feat(image-list): Synchronise with mdc-web v0.33.0 (add component)

components/image-list/ImageList.vue

@@ -0,0 +1,48 @@
+<template>
+  <ul 
+    class="mdc-image-list"
+    :class="classes">
+    <slot/>
+  </ul>
+</template>
+
+<script>
+export default {
+  props:  {
+    standardColumn: {
+      type: Number,
+      validator: (value) => value >= 1 && value <= 12,
+      default: 0
+    },
+    masonryColumn: {
+      type: Number,
+      validator: (value) => value >= 1 && value <= 12,
+      default: 0
+    },
+    textProtection: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    classes () {
+      let standard = {}
+      if (this.standardColumn > 0 && this.masonryColumn === 0) {
+        standard['image-list-standard-' + this.standardColumn] = true
+      }
+
+      let masonry = {}
+      if (this.masonryColumn > 0 && this.standardColumn === 0) {
+        masonry['image-list-masonry-' + this.masonryColumn] = true
+        masonry['mdc-image-list--masonry'] = true
+      }
+
+      let others = {}
+      others['mdc-image-list--with-text-protection'] = this.textProtection
+
+      return Object.assign({}, standard, masonry, others)
+    }
+  }
+}
+</script>
+

components/image-list/ImageListItem.vue

@@ -0,0 +1,35 @@
+<template>
+  <li class="mdc-image-list__item">
+    <div
+      v-if="adjustAspectRatio" 
+      class="mdc-image-list__image-aspect-container">
+      <img
+        class="mdc-image-list__image"
+        :src="src">
+    </div>
+    <img
+      v-else
+      class="mdc-image-list__image"
+      :src="src">
+    <div class="mdc-image-list__supporting">
+      <span class="mdc-image-list__label">
+        <slot/>
+      </span>
+    </div>
+  </li>
+</template>
+
+<script>
+export default  {
+  props: {
+    src: {
+      type: String,
+      required: true
+    },
+    adjustAspectRatio: {
+      type: boolean,
+      default: true
+    }
+  }
+}
+</script>

components/image-list/README.md

@@ -0,0 +1,55 @@
+## ImageList
+
+### Markup
+
+```html
+<m-image-list
+  :standardColumn="2"
+  textProtection>
+  <m-image-list-item src="assets/images/pic1.png">
+    Pic 1
+  </m-image-list-item>
+  <m-image-list-item src="assets/images/pic2.png">
+    Pic 2
+  </m-image-list-item>
+  <m-image-list-item src="assets/images/pic3.png">
+    Pic 3
+  </m-image-list-item>
+  <m-image-list-item src="assets/images/pic4.png">
+    Pic 4
+  </m-image-list-item>
+</m-image-list>
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| standardColumn | Number | 0 | standard columns per line |
+| masonryColumn | Number | 0 | masonry columns per line |
+| textProtection | Boolean | false | label will be positioned in a scrim overlaying each image |
+
+### Slots
+
+| Slot | Description |
+|------|-------------|
+| default | should be ImageListItem(s) |
+
+## ImageListItem
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| src | String | - | src url of the image |
+| adjustAspectRatio | Boolean | true | adjusts the ratio of images for standard columns |
+
+### Slots
+
+| Slot |Description |
+|------|-------------|
+| default | image label |
+
+### Reference
+
+- https://github.com/material-components/material-components-web/tree/master/packages/mdc-image-list

components/image-list/index.js

@@ -0,0 +1,14 @@
+import ImageList from './ImageList.vue'
+import ImageListItem from './ImageListItem.vue'
+
+import { initPlugin } from '../'
+
+const plugin = {
+  install (vm) {
+    vm.component('m-image-list', ImageList)
+    vm.component('m-image-list-item', ImageListItem)
+  }
+}
+export default plugin
+
+initPlugin(plugin)

components/image-list/styles.scss

@@ -0,0 +1,75 @@
+@import "@material/image-list/mdc-image-list";
+
+.image-list-standard-1 {
+  @include mdc-image-list-standard-columns(1);
+}
+.image-list-standard-2 {
+  @include mdc-image-list-standard-columns(2);
+}
+.image-list-standard-3 {
+  @include mdc-image-list-standard-columns(3);
+}
+.image-list-standard-4 {
+  @include mdc-image-list-standard-columns(4);
+}
+.image-list-standard-5 {
+  @include mdc-image-list-standard-columns(5);
+}
+.image-list-standard-6 {
+  @include mdc-image-list-standard-columns(6);
+}
+.image-list-standard-7 {
+  @include mdc-image-list-standard-columns(7);
+}
+.image-list-standard-8 {
+  @include mdc-image-list-standard-columns(8);
+}
+.image-list-standard-9 {
+  @include mdc-image-list-standard-columns(9);
+}
+.image-list-standard-10 {
+  @include mdc-image-list-standard-columns(10);
+}
+.image-list-standard-11 {
+  @include mdc-image-list-standard-columns(11);
+}
+.image-list-standard-12 {
+  @include mdc-image-list-standard-columns(12);
+}
+
+.image-list-masonry-1 {
+  @include mdc-image-list-masonry-columns(1);
+}
+.image-list-masonry-2 {
+  @include mdc-image-list-masonry-columns(2);
+}
+.image-list-masonry-3 {
+  @include mdc-image-list-masonry-columns(3);
+}
+.image-list-masonry-4 {
+  @include mdc-image-list-masonry-columns(4);
+}
+.image-list-masonry-5 {
+  @include mdc-image-list-masonry-columns(5);
+}
+.image-list-masonry-6 {
+  @include mdc-image-list-masonry-columns(6);
+}
+.image-list-masonry-7 {
+  @include mdc-image-list-masonry-columns(7);
+}
+.image-list-masonry-8 {
+  @include mdc-image-list-masonry-columns(8);
+}
+.image-list-masonry-9 {
+  @include mdc-image-list-masonry-columns(9);
+}
+.image-list-masonry-10 {
+  @include mdc-image-list-masonry-columns(10);
+}
+.image-list-masonry-11 {
+  @include mdc-image-list-masonry-columns(11);
+}
+.image-list-masonry-12 {
+  @include mdc-image-list-masonry-columns(12);
+}

webpack.config.lib.common.js

@@ -21,6 +21,7 @@ module.exports = {
     'form-field': path.resolve(components + '/form-field/index.js'),
     'grid-list': path.resolve(components + '/grid-list/index.js'),
     icon: path.resolve(components + '/icon/index.js'),
+    'image-list': path.resolve(components + '/image-list/index.js'),
     'icon-toggle': path.resolve(components + '/icon-toggle/index.js'),
     'layout-grid': path.resolve(components + '/layout-grid/index.js'),
     'linear-progress': path.resolve(components + '/linear-progress/index.js'),