From ddafc68ae2e897199fbfc88de7032106ccd0f6cb Mon Sep 17 00:00:00 2001
From: philip ross <philip@satchel.scot>
Date: Wed, 21 Feb 2018 13:03:59 +0000
Subject: [PATCH] fix: Support leading and trailing icons simultaneously (needs
 material-components-web@0.31.0). Support font-awesome icons. Demonstrate
 custom themed chips.

---
 components/chips/README.md    |  42 +++++-----
 components/chips/demo.vue     | 148 ++++++++++++++++++++++++++++++++--
 components/chips/mdc-chip.vue |  73 ++++++++++++-----
 demo/index.html               |   4 +-
 4 files changed, 222 insertions(+), 45 deletions(-)

diff --git a/components/chips/README.md b/components/chips/README.md
index 5cd77c47..c9ca07c4 100644
--- a/components/chips/README.md
+++ b/components/chips/README.md
@@ -1,37 +1,41 @@
 ## Usage
 
 ```html
-<mdc-chip-set>
-  <mdc-chip>Chip content 1</mdc-chip>
-  <mdc-chip>Chip content 2</mdc-chip>
-  <mdc-chip>Chip content 3</mdc-chip>
-</mdc-chip-set>
+  <!-- material icons -->
+  <mdc-chip-set>
+    <mdc-chip leadingIcon="face" trailingIcon="more_vert">Jane Smith</mdc-chip>
+    <mdc-chip leadingIcon="face" trailingIcon="more_vert">John Doe</mdc-chip>
+  </mdc-chip-set>
+
+  <!-- font-awesome -->
+  <mdc-chip-set>
+    <mdc-chip :leadingIconClasses="{fa:1,'fa-font-awesome':1 }" :trailingIconClasses="{fa:1,'fa-ellipsis-v':1}">Jane Smith</mdc-chip>
+    <mdc-chip :leadingIconClasses="{fa:1, 'fa-smile-o':1}" :trailingIconClasses="{fa:1, 'fa-ellipsis-v':1}">John Doe</mdc-chip>
+  <mdc-chip-set>
 ```
 
 ### props
 
 #### mdc-chip
 
-mdc-chip is a compact element that allows a user to enter information or select a choice. mdc-chip dispatches
-`@MDCChip:interaction` event.
-
-| prop           | Type    | Default  | Description                                 |
-| -------------- | ------- | -------- | ------------------------------------------- |
-| `event`        | String  | optional | optional event to emit on click             |
-| `event-target` | Object  | vm.$root | optional event target, defaults to root bus |
-| `event-args`   | Array   | []       | optional event args                         |
-| `icon`         | String  | optional | optional leading or trailing icon           |
-| `trailing`     | Boolean | false    | if true icon is a trailing icon             |
+mdc-chip is a compact element that allows a user to enter information or select a choice.
 
-> emits `@MDCChip:interaction` event with the chip as parameter
+| prop                  | Type   | Default  | Description                                   |
+| --------------------- | ------ | -------- | --------------------------------------------- |
+| `event`               | String | optional | optional event to emit on click               |
+| `event-target`        | Object | vm.$root | optional event target, defaults to root bus   |
+| `event-args`          | Array  | []       | optional event args                           |
+| `leadingIcon`         | String | optional | optional leading icon                         |
+| `trailingIcon`        | String | optional | optional trailing icon                        |
+| `leadingIconClasses`  | Object | optional | optional leading icon classes (font-awesome)  |
+| `trailingIconClasses` | Object | optional | optional trailing icon classes (font-awesome) |
 
 ### Chips with icons
 
 ```html
 <mdc-chip-set>
-  <mdc-chip icon="save">Chip content 1</mdc-chip>
-  <mdc-chip icon="delete" trailing>Chip content 2</mdc-chip>
-  <mdc-chip>Chip content 3</mdc-chip>
+  <mdc-chip leadingIcon="face" trailingIcon="more_vert">Jane Smith</mdc-chip>
+  <mdc-chip leadingIcon="face" trailingIcon="more_vert">John Doe</mdc-chip>
 </mdc-chip-set>
 ```
 
diff --git a/components/chips/demo.vue b/components/chips/demo.vue
index da447565..4e105aac 100644
--- a/components/chips/demo.vue
+++ b/components/chips/demo.vue
@@ -1,9 +1,145 @@
 <template>
-<div class="mdc-demo mdc-demo--container">
-  <mdc-chip-set>
-    <mdc-chip>Chip content 1</mdc-chip>
-    <mdc-chip>Chip content 2</mdc-chip>
-    <mdc-chip>Chip content 3</mdc-chip>
-  </mdc-chip-set>
+<div class="">
+  <section class="mdc-demo">
+    <mdc-chip-set>
+      <mdc-chip>Item One</mdc-chip>
+      <mdc-chip>Item Two</mdc-chip>
+      <mdc-chip>Item Three</mdc-chip>
+    </mdc-chip-set>
+  </section>
+
+  <section class="mdc-demo">
+    <h3>Entry Chips</h3>
+    <mdc-chip-set>
+      <mdc-chip leading-icon="face" trailing-icon="more_vert">Jane Smith</mdc-chip>
+      <mdc-chip leading-icon="face" trailing-icon="more_vert">John Doe</mdc-chip>
+    </mdc-chip-set>
+  </section>
+
+  <section class="mdc-demo">
+    <h3>Entry Chips (font-awesome)</h3>
+    <mdc-chip-set>
+      <mdc-chip :leading-icon-classes="{fa:1,'fa-font-awesome':1 }" :trailing-icon-classes="{fa:1,'fa-ellipsis-v':1}">Jane Smith</mdc-chip>
+      <mdc-chip :leading-icon-classes="{fa:1, 'fa-smile-o':1}" :trailing-icon-classes="{fa:1, 'fa-ellipsis-v':1}">John Doe</mdc-chip>
+    </mdc-chip-set>
+  </section>
+
+  <section class="mdc-demo">
+    <h3>Filter Chips</h3>
+    <mdc-chip-set>
+      <mdc-chip trailing-icon="cancel" class="">Tops</mdc-chip>
+      <mdc-chip trailing-icon="cancel">Bottoms</mdc-chip>
+      <mdc-chip trailing-icon="cancel">Shoes</mdc-chip>
+      <mdc-chip trailing-icon="cancel">Accessories</mdc-chip>
+    </mdc-chip-set>
+  </section>
+
+  <section class="mdc-demo">
+    <h3>Custom theme</h3>
+    <mdc-chip-set>
+      <mdc-chip class="custom-chip-primary">Add to Calendar</mdc-chip>
+      <mdc-chip class="custom-chip-primary">Bookmark</mdc-chip>
+      <mdc-chip class="custom-chip-primary">Set Alarm</mdc-chip>
+      <mdc-chip class="custom-chip-primary">Get Directions</mdc-chip>
+    </mdc-chip-set>
+
+
+    <mdc-chip-set>
+      <mdc-chip class="custom-chip-secondary">Add to Calendar</mdc-chip>
+      <mdc-chip class="custom-chip-secondary">Bookmark</mdc-chip>
+      <mdc-chip class="custom-chip-secondary">Set Alarm</mdc-chip>
+      <mdc-chip class="custom-chip-secondary">Get Directions</mdc-chip>
+    </mdc-chip-set>
+  </section>
+
 </div>
 </template>
+
+<style scoped>
+@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
+.custom-chip-primary {
+  background-color: #6200ee;
+  /* @alternate */
+  color: white;
+  color: var(--mdc-theme-text-primary-on-dark, white);
+}
+
+.custom-chip-primary::before,
+.custom-chip-primary::after {
+  /* @alternate */
+  background-color: white;
+}
+
+@supports not (-ms-ime-align: auto) {
+  .custom-chip-primary::before,
+  .custom-chip-primary::after {
+    background-color: var(--mdc-theme-text-primary-on-dark, white);
+  }
+}
+
+.custom-chip-primary:hover::before {
+  opacity: 0.08;
+}
+
+.custom-chip-primary:not(.mdc-ripple-upgraded):focus::before,
+.custom-chip-primary.mdc-ripple-upgraded--background-focused::before {
+  -webkit-transition-duration: 75ms;
+  transition-duration: 75ms;
+  opacity: 0.24;
+}
+
+.custom-chip-primary:not(.mdc-ripple-upgraded)::after {
+  -webkit-transition: opacity 150ms linear;
+  transition: opacity 150ms linear;
+}
+
+.custom-chip-primary:not(.mdc-ripple-upgraded):active::after {
+  -webkit-transition-duration: 75ms;
+  transition-duration: 75ms;
+  opacity: 0.32;
+}
+
+.custom-chip-primary.mdc-ripple-upgraded {
+  --mdc-ripple-fg-opacity: 0.32;
+}
+
+.custom-chip-secondary {
+  background-color: white;
+  color: #018786;
+  padding: 5px 10px 5px 10px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #018786;
+}
+
+.custom-chip-secondary::before,
+.custom-chip-secondary::after {
+  background-color: #018786;
+}
+
+.custom-chip-secondary:hover::before {
+  opacity: 0.04;
+}
+
+.custom-chip-secondary:not(.mdc-ripple-upgraded):focus::before,
+.custom-chip-secondary.mdc-ripple-upgraded--background-focused::before {
+  -webkit-transition-duration: 75ms;
+  transition-duration: 75ms;
+  opacity: 0.12;
+}
+
+.custom-chip-secondary:not(.mdc-ripple-upgraded)::after {
+  -webkit-transition: opacity 150ms linear;
+  transition: opacity 150ms linear;
+}
+
+.custom-chip-secondary:not(.mdc-ripple-upgraded):active::after {
+  -webkit-transition-duration: 75ms;
+  transition-duration: 75ms;
+  opacity: 0.16;
+}
+
+.custom-chip-secondary.mdc-ripple-upgraded {
+  --mdc-ripple-fg-opacity: 0.16;
+}
+</style>
diff --git a/components/chips/mdc-chip.vue b/components/chips/mdc-chip.vue
index 1fd518d3..85988cce 100644
--- a/components/chips/mdc-chip.vue
+++ b/components/chips/mdc-chip.vue
@@ -1,38 +1,49 @@
 <template>
-  <div class="mdc-chip" :class="classes" :style="styles" tabindex="0" @click="dispatchEvent">
-    <i class="material-icons mdc-chip__icon mdc-chip__icon--leading" v-if="icon && !trailing">{{icon}}</i>
-    <div classes="mdc-chip__text">
-      <slot></slot>
-    </div>
-    <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button" v-if="icon && trailing">{{icon}}</i>
-  </div>  
+<div class="mdc-chip" :class="classes" :style="styles" tabindex="0" @click="dispatchEvent">
+  <i class="mdc-chip__icon mdc-chip__icon--leading" :class="leadingClasses" v-if="haveleadingIcon">{{leadingIcon}}</i>
+  <div classes="mdc-chip__text">
+    <slot></slot>
+  </div>
+  <i class="mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button" :class="trailingClasses" v-if="havetrailingIcon">{{trailingIcon}}</i>
+</div>
 </template>
 
 <script>
-import MDCChipFoundation from '@material/chips/chip/foundation';
-import { CustomLinkMixin, DispatchEventMixin, emitCustomEvent } from '../base';
-import { RippleBase } from '../ripple';
+import MDCChipFoundation from "@material/chips/chip/foundation";
+import { CustomLinkMixin, DispatchEventMixin, emitCustomEvent } from "../base";
+import { RippleBase } from "../ripple";
 
 export default {
-  name: 'mdc-chip',
+  name: "mdc-chip",
   mixins: [CustomLinkMixin, DispatchEventMixin],
   props: {
-    icon: [String],
-    trailing: Boolean,
+    leadingIcon: [String],
+    trailingIcon: [String],
+    leadingIconClasses: [Object],
+    trailingIconClasses: [Object]
   },
   data() {
     return {
       classes: {},
-      styles: {},
+      styles: {}
     };
   },
   methods: {},
   mounted() {
     this.foundation = new MDCChipFoundation({
-      registerInteractionHandler: (type, handler) => this.$el.addEventListener(type, handler),
-      deregisterInteractionHandler: (type, handler) => this.$el.removeEventListener(type, handler),
+      registerInteractionHandler: (type, handler) =>
+        this.$el.addEventListener(type, handler),
+      deregisterInteractionHandler: (type, handler) =>
+        this.$el.removeEventListener(type, handler),
       notifyInteraction: () =>
-        emitCustomEvent(this.$el, MDCChipFoundation.strings.INTERACTION_EVENT, { chip: this }, true),
+        emitCustomEvent(
+          this.$el,
+          MDCChipFoundation.strings.INTERACTION_EVENT,
+          {
+            chip: this
+          },
+          true
+        )
     });
 
     this.foundation.init();
@@ -40,9 +51,35 @@ export default {
     this.ripple = new RippleBase(this);
     this.ripple.init();
   },
+  computed: {
+    haveleadingIcon() {
+      return !!this.leadingIcon || this.leadingIconClasses;
+    },
+    havetrailingIcon() {
+      return !!this.trailingIcon || this.trailingIconClasses;
+    },
+    leadingClasses() {
+      return Object.assign(
+        {},
+        {
+          "material-icons": !!this.leadingIcon
+        },
+        this.leadingIconClasses
+      );
+    },
+    trailingClasses() {
+      return Object.assign(
+        {},
+        {
+          "material-icons": !!this.trailingIcon
+        },
+        this.trailingIconClasses
+      );
+    }
+  },
   beforeDestroy() {
     this.ripple.destroy();
     this.foundation.destroy();
-  },
+  }
 };
 </script>
diff --git a/demo/index.html b/demo/index.html
index dcff32ce..a032add3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -7,8 +7,8 @@
 
     <title>vue-mdc-adapter</title>
     <meta name="author" content="Sebastien Tasson">
-    <meta name="description" content="Material Components for Vue. vue-mdc-adapter is 
-    an integration of Material Components for Vue.js which follows the best practices 
+    <meta name="description" content="Material Components for Vue. vue-mdc-adapter is
+    an integration of Material Components for Vue.js which follows the best practices
     recommended by Google: Using Foundations and Adapters">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">