fix(mdc-dialog): use vue-mdc-adapter unique id

stasson · Apr 6, 2018 · 0ceec66 · 0ceec66
1 parent 3222267
commit 0ceec66
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 16 deletions.
diff --git a/components/checkbox/mdc-checkbox.vue b/components/checkbox/mdc-checkbox.vue
@@ -2,7 +2,7 @@
   <div :class=formFieldClasses class="mdc-checkbox-wrapper">
     <div ref="root" class="mdc-checkbox"
     :class="classes" :style="styles">
-      <input ref="control" :id="_vma_uid" type="checkbox" :name="name"
+      <input ref="control" :id="vma_uid_" type="checkbox" :name="name"
         class="mdc-checkbox__native-control" :value="value"
         @change="onChange"/>
       <div class="mdc-checkbox__background">
@@ -16,7 +16,7 @@
         <div class="mdc-checkbox__mixedmark"></div>
       </div>
     </div>
-    <label ref="label"  :for="_vma_uid"
+    <label ref="label"  :for="vma_uid_"
     ><slot>{{label}}</slot></label>
   </div>
 </template>

diff --git a/components/common/unique-id.js b/components/common/unique-id.js
@@ -2,7 +2,7 @@ let uid_ = 0;
 
 const uidMixin = {
   beforeCreate() {
-    this._vma_uid = `_vma_${uid_++}`;
+    this.vma_uid_ = `_vma_${uid_++}`;
   },
 };
 

diff --git a/components/dialog/mdc-dialog.vue b/components/dialog/mdc-dialog.vue
@@ -1,16 +1,16 @@
 <template>
   <aside class="mdc-dialog" ref="root" :class="classes" :style="styles"
     role="alertdialog"
-    :aria-labelledby="'label' + _uid"
-    :aria-describedby="'desc' + _uid"
+    :aria-labelledby="'label' + vma_uid_"
+    :aria-describedby="'desc' + vma_uid_"
   >
     <div  ref="surface" class="mdc-dialog__surface" :class="surfaceClasses">
       <header class="mdc-dialog__header">
-        <h2 :id="'label' + _uid" class="mdc-dialog__header__title">
+        <h2 :id="'label' + vma_uid_" class="mdc-dialog__header__title">
           {{ title }}
         </h2>
       </header>
-      <section :id="'desc' + _uid"
+      <section :id="'desc' + vma_uid_"
         class="mdc-dialog__body" :class="bodyClasses">
         <slot />
       </section>

diff --git a/components/radio/mdc-radio.vue b/components/radio/mdc-radio.vue
@@ -1,15 +1,15 @@
 <template>
 <div :class="formFieldClasses" class="mdc-radio-wrapper">
   <div ref="root" class="mdc-radio" :class="classes" :style="styles">
-    <input type="radio" ref="control" :id="_vma_uid" :name="name" 
+    <input type="radio" ref="control" :id="vma_uid_" :name="name" 
       class="mdc-radio__native-control" @change="sync">
 
     <div ref="label" class="mdc-radio__background">
       <div class="mdc-radio__outer-circle"></div>
       <div class="mdc-radio__inner-circle"></div>
     </div>
   </div>
-  <label ref="label" :for="_vma_uid"><slot>{{label}}</slot></label>
+  <label ref="label" :for="vma_uid_"><slot>{{label}}</slot></label>
 </div>
 </template>
 

diff --git a/components/switch/mdc-switch.vue b/components/switch/mdc-switch.vue
@@ -8,7 +8,7 @@
     <div class="mdc-switch" 
       :class="{'mdc-switch--disabled': disabled }">
       <input ref="control" type="checkbox" 
-        :name="name" :id="_vma_uid" 
+        :name="name" :id="vma_uid_" 
         class="mdc-switch__native-control" 
         :checked="checked" 
         :disabled="disabled"
@@ -20,7 +20,7 @@
 
     </div>
 
-    <label :for="_vma_uid" v-if="hasLabel"
+    <label :for="vma_uid_" v-if="hasLabel"
       class="mdc-switch-label">
       <slot>{{label}}</slot>
     </label>

diff --git a/components/textfield/mdc-textfield.vue b/components/textfield/mdc-textfield.vue
@@ -13,7 +13,7 @@
       <textarea ref="input" v-if="multiline"
         v-on="$listeners"
         v-bind="$attrs"
-        :id="_vma_uid"
+        :id="vma_uid_"
         :class="inputClasses"
         @input="updateValue($event.target.value)"
         :minlength="minlength" :maxlength="maxlength"
@@ -26,7 +26,7 @@
       <input ref="input" v-else
         v-on="$listeners"
         v-bind="$attrs"
-        :id="_vma_uid"
+        :id="vma_uid_"
         :class="inputClasses"
         @input="updateValue($event.target.value)"
         :type="type"
@@ -36,7 +36,7 @@
         :aria-controls="inputAriaControls"
         />
 
-      <label ref="label" :class="labelClassesUpgraded" :for="_vma_uid"  v-if="hasLabel">
+      <label ref="label" :class="labelClassesUpgraded" :for="vma_uid_"  v-if="hasLabel">
         {{ label }}
       </label>
 
@@ -57,7 +57,7 @@
 
     </div>
 
-    <p ref="help" :id="'help-'+_vma_uid" :class="helpClasses"
+    <p ref="help" :id="'help-'+vma_uid_" :class="helpClasses"
       aria-hidden="true" v-if="helptext">
       {{ helptext  }}
     </p>
@@ -207,7 +207,7 @@ export default {
       return this.fullwidth ? this.label : undefined;
     },
     inputAriaControls() {
-      return this.help ? 'help-' + this._vma_uid : undefined;
+      return this.help ? 'help-' + this.vma_uid_ : undefined;
     },
     hasLabel() {
       return !this.fullwidth && this.label;