From cffa49d4c7a906f75f4be1c6e7337bc46de76409 Mon Sep 17 00:00:00 2001
From: stasson <sebastien.tasson@gmail.com>
Date: Mon, 16 Jul 2018 06:50:39 +0200
Subject: [PATCH] feat(select): update select as per MDCWeb 0.37.0

Also add support for outlined select
---
 components/select/README.md                   |  14 +-
 components/select/demo.vue                    |  74 +++++-----
 components/select/mdc-select-label.vue        |  43 ++++++
 components/select/mdc-select-line-ripple.vue  |  48 +++++++
 .../select/mdc-select-notched-outline.vue     |  57 ++++++++
 components/select/mdc-select.vue              | 136 +++++++++---------
 6 files changed, 258 insertions(+), 114 deletions(-)
 create mode 100644 components/select/mdc-select-label.vue
 create mode 100644 components/select/mdc-select-line-ripple.vue
 create mode 100644 components/select/mdc-select-notched-outline.vue

diff --git a/components/select/README.md b/components/select/README.md
index f3974385..2e6c65f8 100644
--- a/components/select/README.md
+++ b/components/select/README.md
@@ -13,19 +13,21 @@
 var vm = new Vue({
   data() {
     return {
-      selected: '',
-    };
-  },
-});
+      selected: ''
+    }
+  }
+})
 ```
 
 ### mdc-select
 
 | props      | Type            | Default | Description                                  |
 | ---------- | --------------- | ------- | -------------------------------------------- |
-| `disabled` | Boolean         | false   | whether this select is disabled              |
 | `label`    | String          |         | the selection label (placeholder)            |
 | `value`    | [String, Array] |         | bind with v-model (update on `change` event) |
+| `disabled` | Boolean         | false   | whether this select is disabled              |
+| `box`      | Boolean         | false   | box style                                    |
+| `outlined` | Boolean         | false   | outlined style                               |
 
 | event    | Description             |
 | -------- | ----------------------- |
@@ -47,4 +49,4 @@ var vm = new Vue({
 
 ### Reference
 
-* <https://material.io/components/web/catalog/input-controls/select-menus>
+- <https://material.io/components/web/catalog/input-controls/select-menus>
diff --git a/components/select/demo.vue b/components/select/demo.vue
index 7de42409..7410beac 100644
--- a/components/select/demo.vue
+++ b/components/select/demo.vue
@@ -1,45 +1,47 @@
 <template>
-  <div class="mdc-demo mdc-demo--container">
-    <div>
-      <mdc-select 
-        v-model="selectedType" 
-        label="Pick up a food type">
-        <optgroup label="categories">
-          <option 
-            v-for="type in types" 
-            :value="type" 
-            :key="type">{{ type }}</option>
-        </optgroup>
-      </mdc-select>
-
-      <mdc-caption tag="p" >Selected Type: {{ selectedType }}</mdc-caption>
-      <br>
-      <br><br><br>
-      <mdc-select 
-        v-if="selectedType" 
-        v-model="selectedValue" 
-        box 
-        label="Pick up a food">
-        <option 
-          v-for="option of options" 
-          :key="option" 
-          :value="option.toLowerCase()">{{ option }}</option>
-      </mdc-select>
-
-      <mdc-caption 
-        v-if="selectedType" 
-        tag="p">Selected Value: {{ selectedValue }}</mdc-caption>
-      <br>
-
-    </div>
+  <div class="mdc-demo mdc-demo--container">
+    <div>
+      <mdc-select
+        v-model="selectedType"
+        label="Pick up a food type">
+        <optgroup label="categories">
+          <option
+            v-for="type in types"
+            :value="type"
+            :key="type">{{ type }}</option>
+        </optgroup>
+      </mdc-select>
+
+      <mdc-caption
+        v-if="selectedType"
+        tag="p" >Selected Type: {{ selectedType }}
+      </mdc-caption>
+
+      <br><br><br>
+      <mdc-select
+        v-if="selectedType"
+        v-model="selectedValue"
+        outlined
+        label="Pick up a food">
+        <option
+          v-for="option of options"
+          :key="option"
+          :value="option.toLowerCase()">{{ option }}</option>
+      </mdc-select>
+      <mdc-caption
+        v-if="selectedValue"
+        tag="p">Selected Value: {{ selectedValue }}
+      </mdc-caption>
+
+    </div>
   </div>
-</template>
-
+</template>
+
 <script>
 export default {
   data() {
     return {
-      selectedType: 'Meat',
+      selectedType: undefined, //'Meat',
       selectedValue: undefined,
       food: {
         Vegetables: ['Spinach', 'Carrots', 'Onions', 'Broccoli'],
diff --git a/components/select/mdc-select-label.vue b/components/select/mdc-select-label.vue
new file mode 100644
index 00000000..5e84ba78
--- /dev/null
+++ b/components/select/mdc-select-label.vue
@@ -0,0 +1,43 @@
+<template>
+  <label
+    :class="labelClasses"
+    class="mdc-floating-label">
+    <slot />
+  </label>
+</template>
+
+<script>
+import MDCFloatingLabelFoundation from '@material/floating-label/foundation'
+
+export default {
+  name: 'mdc-select-label',
+  data() {
+    return {
+      labelClasses: {}
+    }
+  },
+  mounted() {
+    this.foundation = new MDCFloatingLabelFoundation({
+      addClass: className => {
+        this.$set(this.labelClasses, className, true)
+      },
+      removeClass: className => {
+        this.$delete(this.labelClasses, className)
+      },
+      getWidth: () => this.$el.offsetWidth,
+      registerInteractionHandler: (evtType, handler) => {
+        this.$el.addEventListener(evtType, handler)
+      },
+      deregisterInteractionHandler: (evtType, handler) => {
+        this.$el.removeEventListener(evtType, handler)
+      }
+    })
+    this.foundation.init()
+  },
+  beforeDestroy() {
+    let foundation = this.foundation
+    this.foundation = null
+    foundation.destroy()
+  }
+}
+</script>
diff --git a/components/select/mdc-select-line-ripple.vue b/components/select/mdc-select-line-ripple.vue
new file mode 100644
index 00000000..91a5a45b
--- /dev/null
+++ b/components/select/mdc-select-line-ripple.vue
@@ -0,0 +1,48 @@
+<template>
+  <div
+    :class="lineClasses"
+    :style="lineStyles"
+    class="mdc-line-ripple"/>
+</template>
+
+<script>
+import MDCLineRippleFoundation from '@material/line-ripple/foundation'
+
+export default {
+  name: 'mdc-select-line-ripple',
+  data() {
+    return {
+      lineClasses: {},
+      lineStyles: {}
+    }
+  },
+  mounted() {
+    this.foundation = new MDCLineRippleFoundation({
+      addClass: className => {
+        this.$set(this.lineClasses, className, true)
+      },
+      removeClass: className => {
+        this.$delete(this.lineClasses, className)
+      },
+      hasClass: className => {
+        this.$el.classList.contains(className)
+      },
+      setStyle: (name, value) => {
+        this.$set(this.lineStyles, name, value)
+      },
+      registerEventHandler: (evtType, handler) => {
+        this.$el.addEventListener(evtType, handler)
+      },
+      deregisterEventHandler: (evtType, handler) => {
+        this.$el.removeEventListener(evtType, handler)
+      }
+    })
+    this.foundation.init()
+  },
+  beforeDestroy() {
+    let foundation = this.foundation
+    this.foundation = null
+    foundation.destroy()
+  }
+}
+</script>
diff --git a/components/select/mdc-select-notched-outline.vue b/components/select/mdc-select-notched-outline.vue
new file mode 100644
index 00000000..a5e0ff10
--- /dev/null
+++ b/components/select/mdc-select-notched-outline.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div
+      ref="outlined"
+      :class="outlinedClasses"
+      class="mdc-notched-outline">
+      <svg>
+        <path
+          ref="outlinedPath"
+          class="mdc-notched-outline__path"/>
+      </svg>
+    </div>
+    <div
+      ref="outlinedIdle"
+      class="mdc-notched-outline__idle"/>
+  </div>
+</template>
+
+<script>
+import MDCnotchedOutlineFoundationFoundation from '@material/notched-outline/foundation'
+
+export default {
+  name: 'mdc-select-notched-outline',
+  data() {
+    return {
+      outlinedClasses: {}
+    }
+  },
+  mounted() {
+    this.foundation = new MDCnotchedOutlineFoundationFoundation({
+      getWidth: () => this.$refs.outlined.offsetWidth,
+      getHeight: () => this.$refs.outlined.offsetHeight,
+      addClass: className => {
+        this.$set(this.outlinedClasses, className, true)
+      },
+      removeClass: className => {
+        this.$delete(this.outlinedClasses, className)
+      },
+      setOutlinePathAttr: value => {
+        const path = this.$refs.outlinedPath
+        path.setAttribute('d', value)
+      },
+      getIdleOutlineStyleValue: propertyName => {
+        return window
+          .getComputedStyle(this.$refs.outlinedIdle)
+          .getPropertyValue(propertyName)
+      }
+    })
+    this.foundation.init()
+  },
+  beforeDestroy() {
+    let foundation = this.foundation
+    this.foundation = null
+    foundation.destroy()
+  }
+}
+</script>
diff --git a/components/select/mdc-select.vue b/components/select/mdc-select.vue
index 37751128..a7766d5f 100644
--- a/components/select/mdc-select.vue
+++ b/components/select/mdc-select.vue
@@ -17,26 +17,37 @@
         selected/>
       <slot/>
     </select>
-    <div
-      ref="label"
-      :class="labelClasses"
-      class="mdc-floating-label">{{ label }}</div>
-    <div
-      ref="line"
-      :class="lineClasses"
-      :style="lineStyles"
-      class="mdc-line-ripple"/>
+    <!-- label -->
+    <select-label
+      v-if="label"
+      ref="label">{{ label }}</select-label>
+    <!-- line ripple -->
+    <select-line-riple
+      v-if="!outlined"
+      ref="line"/>
+    <!-- outline -->
+    <select-notched-outline
+      v-if="outlined"
+      ref="outline"
+    />
   </div>
 </template>
 
 <script>
 import MDCSelectFoundation from '@material/select/foundation'
-import MDCLineRippleFoundation from '@material/line-ripple/foundation'
-import MDCFloatingLabelFoundation from '@material/floating-label/foundation'
 import { RippleBase } from '../ripple'
 
+import SelectLabel from './mdc-select-label.vue'
+import SelectLineRiple from './mdc-select-line-ripple.vue'
+import SelectNotchedOutline from './mdc-select-notched-outline.vue'
+
 export default {
   name: 'mdc-select',
+  components: {
+    SelectLabel,
+    SelectLineRiple,
+    SelectNotchedOutline
+  },
   inheritAttrs: false,
   model: {
     prop: 'value',
@@ -47,14 +58,12 @@ export default {
     disabled: Boolean,
     label: String,
     box: Boolean,
+    outlined: Boolean,
     id: { type: String }
   },
   data() {
     return {
       styles: {},
-      labelClasses: {},
-      lineClasses: {},
-      lineStyles: {},
       classes: {}
     }
   },
@@ -62,6 +71,7 @@ export default {
     rootClasses() {
       return {
         'mdc-select--box': this.box,
+        'mdc-select--outlined': this.outlined,
         ...this.classes
       }
     },
@@ -79,57 +89,21 @@ export default {
     value: 'refreshIndex'
   },
   mounted() {
-    this.labelFoundation = new MDCFloatingLabelFoundation({
-      addClass: className => {
-        this.$set(this.labelClasses, className, true)
-      },
-      removeClass: className => {
-        this.$delete(this.labelClasses, className)
-      },
-      getWidth: () => this.$refs.label.offsetWidth,
-      registerInteractionHandler: (evtType, handler) => {
-        this.$refs.label.addEventListener(evtType, handler)
-      },
-      deregisterInteractionHandler: (evtType, handler) => {
-        this.$refs.label.removeEventListener(evtType, handler)
-      }
-    })
-    this.labelFoundation.init()
-
-    this.lineRippleFoundation = new MDCLineRippleFoundation({
-      addClass: className => {
-        this.$set(this.lineClasses, className, true)
-      },
-      removeClass: className => {
-        this.$delete(this.lineClasses, className)
-      },
-      hasClass: className => {
-        this.$refs.line.classList.contains(className)
-      },
-      setStyle: (name, value) => {
-        this.$set(this.lineStyles, name, value)
-      },
-      registerEventHandler: (evtType, handler) => {
-        this.$refs.line.addEventListener(evtType, handler)
-      },
-      deregisterEventHandler: (evtType, handler) => {
-        this.$refs.line.removeEventListener(evtType, handler)
-      }
-    })
-    this.lineRippleFoundation.init()
-
     this.foundation = new MDCSelectFoundation({
       addClass: className => this.$set(this.classes, className, true),
       removeClass: className => this.$delete(this.classes, className),
-      floatLabel: value => {
-        this.labelFoundation.float(value)
-      },
+      hasClass: className => this.$el.classList.contains(className),
       activateBottomLine: () => {
-        this.lineRippleFoundation.activate()
+        if (this.$refs.line) {
+          this.$refs.line.foundation.activate()
+        }
       },
       deactivateBottomLine: () => {
-        this.lineRippleFoundation.deactivate()
+        if (this.$refs.line) {
+          this.$refs.line.foundation.deactivate()
+        }
       },
+      setDisabled: disabled => (this.$refs.native_control.disabled = disabled),
       registerInteractionHandler: (type, handler) =>
         this.$refs.native_control.addEventListener(type, handler),
       deregisterInteractionHandler: (type, handler) =>
@@ -137,9 +111,36 @@ export default {
       getSelectedIndex: () => this.$refs.native_control.selectedIndex,
       setSelectedIndex: index =>
         (this.$refs.native_control.selectedIndex = index),
-      setDisabled: disabled => (this.$refs.native_control.disabled = disabled),
       getValue: () => this.$refs.native_control.value,
-      setValue: value => (this.$refs.native_control.value = value)
+      setValue: value => (this.$refs.native_control.value = value),
+      isRtl: () => {
+        return (
+          window.getComputedStyle(this.$el).getPropertyValue('direction') ===
+          'rtl'
+        )
+      },
+      notchOutline: (labelWidth, isRtl) => {
+        if (this.$refs.outline) {
+          this.$refs.outline.foundation.notch(labelWidth, isRtl)
+        }
+      },
+      closeOutline: () => {
+        if (this.$refs.outline) {
+          this.$refs.outline.foundation.closeNotch()
+        }
+      },
+      hasOutline: () => !!this.$refs.outline,
+      floatLabel: value => {
+        if (this.$refs.label) {
+          this.$refs.label.foundation.float(value)
+        }
+      },
+      hasLabel: () => !!this.$refs.label,
+      getLabelWidth: () => {
+        if (this.$refs.label) {
+          return this.$refs.label.foundation.getWidth()
+        }
+      }
     })
 
     this.foundation.init()
@@ -154,25 +155,16 @@ export default {
       subtree: true
     })
 
-    if (this.box) {
-      this.ripple = new RippleBase(this)
-      this.ripple.init()
-    }
+    this.ripple = new RippleBase(this)
+    this.ripple.init()
   },
   beforeDestroy() {
     this.slotObserver.disconnect()
+
     let foundation = this.foundation
     this.foundation = null
     foundation.destroy()
 
-    let labelFoundation = this.labelFoundation
-    this.labelFoundation = null
-    labelFoundation.destroy()
-
-    let lineRippleFoundation = this.lineRippleFoundation
-    this.lineRippleFoundation = null
-    lineRippleFoundation.destroy()
-
     this.ripple && this.ripple.destroy()
   },
   methods: {