feat(floating-label): Synchronise with mdc-web v0.32.0 (add component)

matsp · matsp · commit c2a13f5bfd8c · 2018-03-07T20:40:33.000+01:00
diff --git a/components/floating-label/FloatingLabel.vue b/components/floating-label/FloatingLabel.vue
@@ -0,0 +1,43 @@
+<template>
+  <label
+    class="mdc-floating-label"
+    :class="classes">
+    <slot/>
+  </label>
+</template>
+
+<script>
+import { MDCFloatingLabel } from '@material/floating-label'
+
+export default {
+  props: {
+    floatAbove: {
+      type: Boolean,
+      default: false
+    },
+    shake: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      mdcFloatingLabel: null
+    }
+  },
+  computed: {
+    classes () {
+      return {
+        'mdc-floating-label--float-above': this.floatAbove,
+        'mdc-floating-label--shake': this.shake
+      }
+    }
+  },
+  mounted () {
+    this.mdcFloatingLabel = MDCFloatingLabel.attachTo(this.$el)
+  },
+  beforeDestroy () {
+    this.mdcFloatingLabel.destroy()
+  }
+}
+</script>
diff --git a/components/floating-label/README.md b/components/floating-label/README.md
@@ -0,0 +1,29 @@
+## FloatingLabel
+
+### Markup
+
+
+```html
+<m-text-field id="textfield">
+  <m-floating-label for="textfield">Textfield label</m-floating-label>
+  <m-line-ripple slot="bottomLine"/>
+</m-text-field>
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| floatAbove | Boolean | false | label is floating above |
+| absoluteRight | Boolean | false | shakes the label |
+
+### Slots
+
+| Slot | Description |
+|------|-------------|
+| default | label content |
+
+### Reference
+
+- https://github.com/material-components/material-components-web/tree/master/packages/mdc-floating-label
+
+
diff --git a/components/floating-label/index.js b/components/floating-label/index.js
@@ -0,0 +1,13 @@
+import FloatingLabel from './FloatingLabel.vue'
+import './styles.scss'
+
+import { initPlugin } from '../'
+
+const plugin = {
+  install (vm) {
+    vm.component('m-floating-label', FloatingLabel)
+  }
+}
+export default plugin
+
+initPlugin(plugin)
diff --git a/components/floating-label/styles.scss b/components/floating-label/styles.scss
@@ -0,0 +1 @@
+@import "@material/floating-label/mdc-floating-label";
diff --git a/components/textfield/README.md b/components/textfield/README.md
@@ -3,12 +3,12 @@
 ### Markup
 
 ```html
-<m-text-field v-model="text">
-  Textfield
+<m-text-field v-model="text" id="textfield">
+  <m-floating-label for="textfield">Textfield label</m-floating-label>
   <m-line-ripple slot="bottomLine"/>
 </m-text-field>
-<m-text-field v-model="pw" type="password" required minlength="8" aria-controls="pw-validation">
-  Password
+<m-text-field v-model="pw" id="passwordfield" type="password" required minlength="8" aria-controls="pw-validation">
+  <m-floating-label for="passwordfield">Password</m-floating-label>
   <m-line-ripple slot="bottomLine"/>
 </m-text-field>
 <m-text-field-helptext id="pw-validation">
@@ -35,12 +35,10 @@ data() {
 | upgraded | Boolean | false | whether the textfield should be upgraded when it already has a value (FOUC) |
 | fullWidth | Boolean | false | expand the textfield to max width |
 | box | Boolean | false | draws a box around the textfield |
-| labelFloat | Boolean | false | whether the label should float above the input field that already has a value (FOUC) |
 | outlined | Boolean | false | draws an outer line around input field |
 | dense | Boolean | false | whether the textfield should be dense |
 | focused | Boolean | false | whether the textfield should be in focus |
 | textarea | Boolean | false | whether the textfield should be a textarea |
-| shake | Boolean | false | whether the textfield label should shake |
 
 ### Slots
 
diff --git a/components/textfield/Textfield.vue b/components/textfield/Textfield.vue
@@ -15,12 +15,7 @@
       @input="onInput"
       v-bind="$attrs"
       v-if="textarea"/>
-    <label
-      class="mdc-text-field__label"
-      :class="classesLabel"
-      v-if="$slots['default'] && !fullWidth">
-      <slot />
-    </label>
+    <slot v-if="$slots['default'] && !fullWidth"/>
     <div
       v-if="outlined"
       class="mdc-text-field__outline">
@@ -62,10 +57,6 @@ export default {
       type: Boolean,
       default: false
     },
-    labelFloat: {
-      type: Boolean,
-      default: false
-    },
     outlined: {
       type: Boolean,
       default: false
@@ -81,17 +72,12 @@ export default {
     textarea: {
       type: Boolean,
       default: false
-    },
-    shake: {
-      type: Boolean,
-      default: false
     }
   },
   data () {
     return {
       mdcTextField: null,
       mdcRipple: null,
-      float: false
     }
   },
   computed: {
@@ -108,17 +94,6 @@ export default {
         'mdc-text-field--focused': this.focused,
         'mdc-text-field--textarea': this.textarea
       }
-    },
-    classesLabel () {
-      return {
-        'mdc-text-field__label--float-above': this.float,
-        'mdc-text-field__label--shake': this.shake
-      }
-    }
-  },
-  watch: {
-    value () {
-      this.value === '' ? this.float = false : this.float = true
     }
   },
   mounted () {
@@ -135,7 +110,6 @@ export default {
     }
 
     this.mdcTextField = MDCTextField.attachTo(this.$el)
-    this.float = this.labelFloat
   },
   beforeDestroy () {
     this.mdcTextField.destroy()
diff --git a/demo/views/TextfieldView.vue b/demo/views/TextfieldView.vue
@@ -9,14 +9,14 @@
       </m-typo-body>
     </m-layout-grid-cell>
     <m-layout-grid-cell :span="2">
-      <m-text-field v-model="text">
-        Textfield
+      <m-text-field id="textfield1">
+        <m-floating-label for="textfield1">Textfield</m-floating-label>
         <m-line-ripple slot="bottomLine"/>
       </m-text-field>
     </m-layout-grid-cell>
     <m-layout-grid-cell :span="2">
-      <m-text-field v-model="pw" type="password" required minlength="8" aria-controls="pw-validation">
-        Password
+      <m-text-field type="password" id="textfield2" required minlength="8" aria-controls="pw-validation">
+        <m-floating-label for="textfield2">Password</m-floating-label>
         <m-line-ripple slot="bottomLine"/>
       </m-text-field>
       <m-text-field-helptext id="pw-validation">
@@ -25,69 +25,73 @@
     </m-layout-grid-cell>
     <m-layout-grid-cell :span="8" />
     <m-layout-grid-cell :span="2">
-      <m-text-field v-model="text" box>
-        Textfield
+      <m-text-field
+        box
+        id="textfield3">
+        <m-floating-label for="textfield3">Textfield</m-floating-label>
       </m-text-field>
     </m-layout-grid-cell>
     <m-layout-grid-cell :span="2">
       <m-text-field
-        v-model="text"
-        box>
+        box
+        id="textfield4">
         <m-icon
           slot="leadingIcon"
           icon="person"/>
-        Textfield
+        <m-floating-label for="textfield4">Textfield</m-floating-label>
       </m-text-field>
     </m-layout-grid-cell>
     <m-layout-grid-cell :span="2">
       <m-text-field
-        v-model="text"
-        box>
+        box
+        id="textfield5">
         <m-icon
           slot="trailingIcon"
           icon="person"/>
-        Textfield
+        <m-floating-label for="textfield5">Textfield</m-floating-label>
       </m-text-field>
     </m-layout-grid-cell>
     <m-layout-grid-cell :span="12">
-      <m-text-field v-model="text" placeholder="Fullwidth" full-width>
+      <m-text-field placeholder="Fullwidth" full-width>
         <m-line-ripple slot="bottomLine"/>
       </m-text-field>
     </m-layout-grid-cell>
     <m-layout-grid-cell :span="12">
-      <m-text-field v-model="text" textarea>
-        Textarea
+      <m-text-field
+        textarea
+        id="textfield6">
+        <m-floating-label for ="textfield6">Textarea</m-floating-label>
       </m-text-field>
     </m-layout-grid-cell>
     <m-layout-grid-cell :span="12">
-      <m-text-field v-model="text" outlined>
-        Outlined
+      <m-text-field 
+        outlined
+        id="textfield7">
+        <m-floating-label for="textfield7">Outlined</m-floating-label>
       </m-text-field>
     </m-layout-grid-cell>
   </m-layout-grid-inner>
 </template>
 
 <script>
 import Vue from 'vue'
+import FloatingLabel from '../../dist/floating-label'
 import LineRipple from '../../dist/line-ripple'
 import Icon from '../../dist/icon'
 import Textfield from '../../dist/textfield'
 
+Vue.use(FloatingLabel)
 Vue.use(LineRipple)
 Vue.use(Icon)
 Vue.use(Textfield)
 
 export default {
-  data () {
-    return {
-      text: '',
-      pw: ''
-    }
-  }
+
 }
 </script>
 
 <style lang="scss">
+@import "../../dist/floating-label/styles";
 @import "../../dist/line-ripple/styles";
 @import "../../dist/textfield/styles";
 </style>
diff --git a/webpack.config.lib.common.js b/webpack.config.lib.common.js
@@ -17,6 +17,7 @@ module.exports = {
     drawer: path.resolve(components + '/drawer/index.js'),
     elevation: path.resolve(components + '/elevation/index.js'),
     fab: path.resolve(components + '/fab/index.js'),
+    'floating-label': path.resolve(components + '/floating-label/index.js'),
     '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'),

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+@import "@material/floating-label/mdc-floating-label";`