feat(card): Synchronise with mdc-web v0.30.0

components/Card/Card.vue

@@ -2,103 +2,64 @@
   <div
     class="mdc-card"
     :class="classes">
+    <slot name="media"/>
+    <slot />
     <div
-      class="mdc-card__horizontal-block"
-      v-if="horizontal && ($slots['horizontalMedia'] || $slots['horizontalTitle'] || $slots['horizontalSubtitle'])">
-      <section class="mdc-card__primary">
-        <section
-          class="mdc-card__media"
-          v-if="$slots['horizontalMedia']">
-          <slot name="horizontalMedia"/>
-        </section>
-        <div
-          class="mdc-card__title"
-          :class="classesTitle"
-          v-if="$slots['horizontalTitle']">
-          <slot name="horizontalTitle"/>
-        </div>
-        <div
-          class="mdc-card__subtitle"
-          v-if="$slots['horizontalSubtitle']">
-          <slot name="horizontalSubtitle"/>
-        </div>
-      </section>
-    </div>
-    <section
-      class="mdc-card__primary"
-      v-else-if="!horizontal && ($slots['media'] || $slots['title'] || $slots['subtitle'])">
-      <section
-        class="mdc-card__media"
-        v-if="$slots['media']">
-        <slot name="media"/>
-      </section>
+      class="mdc-card__actions"
+      :class="actionClasses"
+      v-if="$slots['actionButtons'] || $slots['actionIcons']">
       <div
-        class="mdc-card__title"
-        :class="classesTitle"
-        v-if="$slots['title']">
-        <slot name="title"/>
+        class="mdc-card__action-buttons"
+        v-if="$slots['actionButtons']">
+        <slot name="actionButtons"/>
       </div>
       <div
-        class="mdc-card__subtitle"
-        v-if="$slots['subtitle']">
-        <slot name="subtitle"/>
+        class="mdc-card__action-icons"
+        v-if="$slots['actionIcons']">
+        <slot name="actionIcons"/>
       </div>
-    </section>
-    <section
-      class="mdc-card__supporting-text"
-      v-if="$slots['supportingText']">
-      <slot name="supportingText" />
-    </section>
-    <section
-      class="mdc-card__actions"
-      :class="classesActions"
-      v-if="$slots['actions']">
-      <slot name="actions" />
-    </section>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   props: {
-    verticalActions: {
-      type: Boolean,
-      default: false
-    },
-    largeTitle: {
-      type: Boolean,
-      default: false
-    },
-    horizontal: {
+    stroked: {
       type: Boolean,
       default: false
     },
-    stroked: {
+    fullBleedAction: {
       type: Boolean,
       default: false
     }
   },
   computed: {
-    classesActions () {
+    classes () {
       return {
-        'mdc-card__actions--vertical': this.verticalActions
+        'mdc-card--stroked': this.stroked
       }
     },
-    classesTitle () {
+    actionClasses () {
       return {
-        'mdc-card__title--large': this.largeTitle
-      }
-    },
-    classes () {
-      return {
-        'mdc-card--stroked': this.stroked
+        'mdc-card__actions--full-bleed': this.fullBleedAction
       }
     }
   },
   mounted () {
-    if (this.$slots.actions) {
-      this.$slots.actions.map((n) => {
+    if (this.$slots.actionButtons) {
+      this.$slots.actionButtons.map((n) => {
+        n.elm.classList.add('mdc-card__action')
+        n.elm.classList.add('mdc-card__action--button')
+      })
+    }
+
+    if (this.$slots.actionIcons) {
+      this.$slots.actionIcons.map((n) => {
         n.elm.classList.add('mdc-card__action')
+        n.elm.classList.add('mdc-card__action--icon')
+        n.elm.setAttribute('tabindex', '0')
+        n.elm.setAttribute('role', 'button')
       })
     }
   }

components/Card/CardMedia.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="mdc-card__media"
+    :class="classes">
+    <div class="mdc-card__media-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    square: {
+      type: Boolean,
+      default: true
+    },
+    sixteenNine: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    classes () {
+      return {
+        'mdc-card__media--square': this.square,
+        'mdc-card__media--16-9': this.sixteenNine
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "@material/card/mdc-card";
+</style>

components/Card/README.md

@@ -4,48 +4,63 @@
 
 ```html
 <m-card>
-    <m-card-media-item slot="media" :height="1" src="..." />
-    <m-typo-title slot="title">Title</m-typo-title>
-    <m-typo-subheading :level="1" slot="subtitle">
-        Subtitle
-    </m-typo-subheading>
-    <m-typo-body :level="1" slot="supportingText">
-        Text
-    </m-typo-body>
-    <m-button slot="actions">Action</m-button>
+  <m-typo-headline class="demo">
+    Title
+  </m-typo-headline>
+  <m-typo-body
+    class="demo"
+    :level="1">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+  </m-typo-body>
+  <m-button
+    interactive
+    slot="actionButtons"
+    href="https://github.com/matsp/material-components-vue/blob/master/components/Card">
+    github
+  </m-button>
 </m-card>
 ```
+### CSS
+
+```css
+ .demo {
+   padding: 8px 16px;
+ }
+```
 
 ### Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| verticalActions | Boolean | false | renders actions vertical |
-| largeTitle | Boolean | false | larger title (without typography component)| 
-| horizontal | Boolean | false | renders media, title & subtitle horizontal
 | stroked | Boolean | false | renders a hairline stroke |
+| fullBleedAction | Boolean | false | a single action will take up the entire space in the row |
 
 ### Slots
 
-| Slot | Prop dependencies | Description |
-|------|-------------------|-------------|
-| horizontalMedia | horizontal | horizontal card media item |
-| horizontalTitle | horizontal, largeTitle | horizontal card title |
-| horizontalSubtitle | horizontal | horizontal card subtitle |
-| media | - | card media item |
-| title | largeTitle | card title |
-| subtitle | - | card subtitle |
-| supportingText | - | card text |
-| actions | verticalActions | card actions
+| Slot | Description |
+|------|-------------|
+| default | card content |
+| media | media content |
+| actionButtons | button components |
+| actionIcons | icon components |
 
-## CardMediaItem
+## CardMedia
 
 ### Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| height | Number | 1 | image scale between 1 and 3
+| square | Boolean | true | square media |
+| sixteenNine | Boolean | false | 16:9 media |
+
+### Slots
 
+| Slot | Description |
+|------|-------------|
+| default | media content |
 
 ### Reference
 - https://github.com/material-components/material-components-web/tree/master/packages/mdc-card

components/Card/index.js

@@ -1,9 +1,9 @@
 import Card from './Card.vue'
-import CardMediaItem from './CardMediaItem.vue'
+import CardMedia from './CardMedia.vue'
 
 export default {
   install (vm) {
     vm.component('m-card', Card)
-    vm.component('m-card-media-item', CardMediaItem)
+    vm.component('m-card-media', CardMedia)
   }
 }

demo/views/CardView.vue

@@ -10,13 +10,30 @@
     </m-layout-grid-cell>
     <m-layout-grid-cell>
       <m-card>
-        <m-typo-title slot="title">Title</m-typo-title>
-        <m-typo-subheading :level="1" slot="subtitle">Subtitle</m-typo-subheading>
-        <m-typo-body :level="1" slot="supportingText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</m-typo-body>
-        <m-button interactive slot="actions" href="https://github.com/matsp/material-components-vue/blob/master/components/Card">
+        <m-typo-headline class="demo">
+          Title
+        </m-typo-headline>
+        <m-typo-body
+          class="demo"
+          :level="1">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        </m-typo-body>
+        <m-button
+          interactive
+          slot="actionButtons"
+          href="https://github.com/matsp/material-components-vue/blob/master/components/Card">
           github
         </m-button>
       </m-card>
     </m-layout-grid-cell>
   </m-layout-grid-inner>
 </template>
+
+<style>
+ .demo {
+   padding: 8px 16px;
+ }
+</style>