@carbon/vue 1.0.2 → 1.1.3

package/src/components/cv-dropdown/_cv-dropdown-inner.vue

@@ -0,0 +1,201 @@
+<!--
+  Carbon Style Dropdown
+
+  Attributes:
+    placeholder: Placeholder text displayed before any  selection is made.
+
+  Usage:
+    <cv-dropdown placeholder="Choose an option">
+      <cv-dropdown-item value="10">Option 1</cv-dropdown-item>
+      <cv-dropdown-item value="20">Option 2</cv-dropdown-item>
+      <cv-dropdown-item value="30">Option 3</cv-dropdown-item>
+      <cv-dropdown-item value="40">Option 4</cv-dropdown-item>
+      <cv-dropdown-item value="50">Option 5</cv-dropdown-item>
+    </cv-dropdown>
+
+-->
+
+<template>
+  <ul
+    data-dropdown
+    :data-value="internalValue"
+    class="bx--dropdown"
+    tabindex="0"
+    :class="{
+      'bx--dropdown--light': theme === 'light',
+      'bx--dropdown--up': up,
+      'bx--dropdown--open': open,
+    }"
+    v-bind="$attrs"
+    @keydown.down.prevent="onDown"
+    @keydown.up.prevent="onUp"
+    @keydown.enter.prevent="onClick"
+    @keydown.esc.prevent="onEsc"
+    @click="onClick"
+  >
+    <li class="bx--dropdown-text" ref="valueContent">{{ placeholder }}</li>
+    <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+      <path d="M10 0L5 5 0 0z"></path>
+    </svg>
+    <li>
+      <ul class="bx--dropdown-list">
+        <slot></slot>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script>
+import themeMixin from '../../mixins/theme-mixin';
+
+export default {
+  name: 'CvDropdownInner',
+  inheritAttrs: false,
+  mixins: [themeMixin],
+  props: {
+    placeholder: {
+      type: String,
+      default: 'Choose an option',
+    },
+    up: Boolean,
+    value: String, // initial value of the dropdown,
+  },
+  data() {
+    return {
+      open: false,
+      dataValue: null,
+    };
+  },
+  created() {
+    // add these on created otherwise cv:mounted is too late.
+    this.$on('cv:mounted', srcComponent => this.onCvMount(srcComponent));
+    this.$on('cv:beforeDestroy', srcComponent => this.onCvBeforeDestroy(srcComponent));
+  },
+  mounted() {
+    this.$el.addEventListener('focusout', ev => {
+      if (ev.relatedTarget === null || !this.$el.contains(ev.relatedTarget)) {
+        this.open = false;
+      }
+    });
+    if (this.value) {
+      this.internalValue = this.value; // forces update of value
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  watch: {
+    value(val) {
+      this.internalValue = val;
+    },
+  },
+  computed: {
+    internalValue: {
+      get() {
+        return this.dataValue;
+      },
+      set(val) {
+        const childItems = this.dropdownItems();
+        for (let index in childItems) {
+          let child = childItems[index];
+          let selected = child.value === val;
+
+          child.internalSelected = selected;
+
+          if (selected) {
+            this.$refs.valueContent.innerHTML = child.internalContent;
+          }
+        }
+        if (this.dataValue !== val) {
+          // only raise event on change
+          this.dataValue = val;
+          this.$emit('change', this.dataValue);
+        }
+      },
+    },
+  },
+  methods: {
+    onCvMount(srcComponent) {
+      if (srcComponent.internalSelected) {
+        this.internalValue = srcComponent.value;
+      } else {
+        if (this.internalValue === srcComponent.value) {
+          srcComponent.internalSelected = true;
+          this.internalValue = srcComponent.value;
+        }
+      }
+    },
+    onCvBeforeDestroy(srcComponent) {
+      if (srcComponent.value === this.internalValue) {
+        this.internalValue = null;
+      }
+    },
+    dropdownItems() {
+      return this.$children.filter(item => item.$_CvDropdownItem);
+    },
+    doMove(up) {
+      // requery could have changed
+      let currentFocusEl = this.$el.querySelector('.cv-dropdown-item :focus');
+      let currentFocusValue;
+      let childItems = this.dropdownItems();
+      let last = childItems.length - 1;
+      let currentFocusIndex = up ? 0 : last;
+      let nextFocusIndex;
+
+      if (currentFocusEl) {
+        currentFocusValue = currentFocusEl.parentNode.getAttribute('data-value');
+      }
+
+      if (currentFocusValue !== undefined) {
+        currentFocusIndex = childItems.findIndex(child => child.value === currentFocusValue);
+      }
+
+      if (up) {
+        nextFocusIndex = currentFocusIndex > 0 ? currentFocusIndex - 1 : last;
+        if (childItems[nextFocusIndex].internalSelected) {
+          nextFocusIndex = nextFocusIndex > 0 ? nextFocusIndex - 1 : last;
+        }
+      } else {
+        nextFocusIndex = currentFocusIndex < last ? currentFocusIndex + 1 : 0;
+        if (childItems[nextFocusIndex].internalSelected) {
+          nextFocusIndex = nextFocusIndex < last ? nextFocusIndex + 1 : 0;
+        }
+      }
+
+      childItems[nextFocusIndex].setFocus();
+    },
+    onDown() {
+      if (!this.open) {
+        this.open = true;
+      } else {
+        this.doMove(false);
+      }
+    },
+    onUp() {
+      if (this.open) {
+        this.doMove(true);
+      }
+    },
+    onEsc() {
+      this.open = false;
+      this.$el.focus();
+    },
+    onClick(ev) {
+      this.open = !this.open;
+      if (!this.open) {
+        this.$el.focus();
+      }
+
+      if (ev.target.classList.contains('bx--dropdown-link')) {
+        const targetItemEl = ev.target.parentNode;
+        const newValue = targetItemEl.getAttribute('data-value');
+
+        this.internalValue = newValue;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss"></style>

package/src/components/cv-dropdown/cv-dropdown-item.vue

@@ -10,11 +10,7 @@
 -->
 
 <template>
-  <li
-    data-option
-    :data-value="value"
-    class="cv-dropdown-item bx--dropdown-item"
-  >
+  <li data-option :data-value="value" class="cv-dropdown-item bx--dropdown-item">
     <a
       class="bx--dropdown-link"
       :class="{ 'bx--dropdown--selected': internalSelected }"
@@ -44,13 +40,15 @@ export default {
   },
   mounted() {
     this.$_CvDropdownItem = true; // for use by parent with $children
+    this.$parent.$emit('cv:mounted', this);
+  },
+  beforeDestroy() {
+    this.$parent.$emit('cv:beforeDestory', this);
   },
   computed: {
     internalSelected: {
       get() {
-        return this.dataSelected === undefined
-          ? this.selected
-          : this.dataSelected === true;
+        return this.dataSelected === undefined ? this.selected : this.dataSelected === true;
       },
       set(val) {
         this.dataSelected = val;

package/src/components/cv-dropdown/cv-dropdown-skeleton.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    disabled
-    class="bx--list-box bx--dropdown-v2 bx--skeleton"
-    :class="{ 'bx--list-box--inline': inline }"
-  ></div>
+  <div disabled class="bx--list-box bx--dropdown-v2 bx--skeleton" :class="{ 'bx--list-box--inline': inline }"></div>
 </template>
 
 <script>

package/src/components/cv-dropdown/cv-dropdown.vue

@@ -1,185 +1,38 @@
-<!--
-  Carbon Style Dropdown
-
-  Attributes:
-    placeholder: Placeholder text displayed before any  selection is made.
-
-  Usage:
-    <cv-dropdown placeholder="Choose an option">
-      <cv-dropdown-item value="10">Option 1</cv-dropdown-item>
-      <cv-dropdown-item value="20">Option 2</cv-dropdown-item>
-      <cv-dropdown-item value="30">Option 3</cv-dropdown-item>
-      <cv-dropdown-item value="40">Option 4</cv-dropdown-item>
-      <cv-dropdown-item value="50">Option 5</cv-dropdown-item>
-    </cv-dropdown>
-
--->
-
 <template>
-  <ul
-    data-dropdown
-    :data-value="internalValue"
-    class="cv-dropdown bx--dropdown"
-    tabindex="0"
-    :class="{
-      'bx--dropdown--light': theme === 'light',
-      'bx--dropdown--up': up,
-      'bx--dropdown--open': open,
-    }"
-    v-bind="$attrs"
-    @keydown.down.prevent="onDown"
-    @keydown.up.prevent="onUp"
-    @keydown.enter.prevent="onClick"
-    @keydown.esc.prevent="onEsc"
-    @click="onClick"
-  >
-    <li class="bx--dropdown-text" ref="valueContent">{{ placeholder }}</li>
-    <svg
-      class="bx--dropdown__arrow"
-      width="10"
-      height="5"
-      viewBox="0 0 10 5"
-      fill-rule="evenodd"
-    >
-      <path d="M10 0L5 5 0 0z"></path>
-    </svg>
-    <li>
-      <ul class="bx--dropdown-list">
-        <slot></slot>
-      </ul>
-    </li>
-  </ul>
+  <component :is="tagType" v-bind="$attrs" v-on="$listeners" :value="value" class="cv-dropdown">
+    <template slot="invalid-message">
+      <slot name="invalid-message" />
+    </template>
+    <template slot="helper-text">
+      <slot name="helper-text" />
+    </template>
+    <slot></slot>
+  </component>
 </template>
 
 <script>
-import themeMixin from '../../mixins/theme-mixin';
+import { componentsX } from '../../internal/feature-flags';
+import CvDropdownInnerC10 from './_cv-dropdown-inner-c10';
+import CvDropdownInner from './_cv-dropdown-inner';
 
 export default {
   name: 'CvDropdown',
-  mixins: [themeMixin],
-  props: {
-    placeholder: {
-      type: String,
-      default: 'Choose an option',
-    },
-    up: Boolean,
-    value: String, // initial value of the dropdown,
-  },
+  components: { CvDropdownInnerC10, CvDropdownInner },
+  inheritAttrs: false,
   data() {
-    return {
-      open: false,
-      dataValue: this.value,
-    };
-  },
-  mounted() {
-    this.$el.addEventListener('focusout', ev => {
-      if (ev.relatedTarget === null || !this.$el.contains(ev.relatedTarget)) {
-        this.open = false;
-      }
-    });
-    this.internalValue = this.internalValue; // forces update of value
+    return { componentsX };
   },
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
-  watch: {
-    value(val) {
-      this.internalValue = val;
-    },
+  props: {
+    value: String,
   },
   computed: {
-    internalValue: {
-      get() {
-        return this.dataValue;
-      },
-      set(val) {
-        const childItems = this.dropdownItems();
-        for (let index in childItems) {
-          let child = childItems[index];
-          let selected = child.value === val;
-          child.internalSelected = selected;
-
-          if (selected) {
-            this.$refs.valueContent.innerHTML = child.internalContent;
-          }
-        }
-        if (this.dataValue !== val) {
-          // only raise event on change
-          this.dataValue = val;
-          this.$emit('change', this.dataValue);
-        }
-      },
+    tagType() {
+      return this.componentsX ? 'cv-dropdown-inner-c10' : 'cv-dropdown-inner';
     },
   },
-  methods: {
-    dropdownItems() {
-      return this.$children.filter(item => item.$_CvDropdownItem);
-    },
-    doMove(up) {
-      // requery could have changed
-      let currentFocusEl = this.$el.querySelector('.cv-dropdown-item :focus');
-      let currentFocusValue;
-      let childItems = this.dropdownItems();
-      let last = childItems.length - 1;
-      let currentFocusIndex = up ? 0 : last;
-      let nextFocusIndex;
-
-      if (currentFocusEl) {
-        currentFocusValue = currentFocusEl.parentNode.getAttribute(
-          'data-value'
-        );
-      }
-
-      if (currentFocusValue !== undefined) {
-        currentFocusIndex = childItems.findIndex(
-          child => child.value === currentFocusValue
-        );
-      }
-
-      if (up) {
-        nextFocusIndex = currentFocusIndex > 0 ? currentFocusIndex - 1 : last;
-        if (childItems[nextFocusIndex].internalSelected) {
-          nextFocusIndex = nextFocusIndex > 0 ? nextFocusIndex - 1 : last;
-        }
-      } else {
-        nextFocusIndex = currentFocusIndex < last ? currentFocusIndex + 1 : 0;
-        if (childItems[nextFocusIndex].internalSelected) {
-          nextFocusIndex = nextFocusIndex < last ? nextFocusIndex + 1 : 0;
-        }
-      }
-
-      childItems[nextFocusIndex].setFocus();
-    },
-    onDown() {
-      if (!this.open) {
-        this.open = true;
-      } else {
-        this.doMove(false);
-      }
-    },
-    onUp() {
-      if (this.open) {
-        this.doMove(true);
-      }
-    },
-    onEsc() {
-      this.open = false;
-      this.$el.focus();
-    },
-    onClick(ev) {
-      this.open = !this.open;
-      if (!this.open) {
-        this.$el.focus();
-      }
-
-      if (ev.target.classList.contains('bx--dropdown-link')) {
-        const targetItemEl = ev.target.parentNode;
-        const newValue = targetItemEl.getAttribute('data-value');
-
-        this.internalValue = newValue;
-      }
-    },
+  model: {
+    prop: 'value',
+    event: 'change',
   },
 };
 </script>

package/src/components/cv-file-uploader/cv-file-uploader.vue

@@ -1,13 +1,16 @@
 <template>
   <cv-form-item class="cv-file-uploader">
-    <strong class="bx--label">{{ label }}</strong>
+    <strong :class="componentsX ? 'bx--label' : 'bx--file--label'">{{ label }}</strong>
     <p class="bx--label-description">{{ helperText }}</p>
     <div class="bx--file" data-file>
       <label
         :for="uid"
-        class="bx--file-btn bx--btn bx--btn--secondary"
+        class="bx--file--btn bx--btn bx--btn--primary bx--btn--sm"
         role="button"
         tabindex="0"
+        @keydown.enter.prevent="onShow()"
+        @keydown.space.prevent
+        @keyup.space.prevent="onShow()"
         >{{ buttonLabel }}</label
       >
       <input
@@ -18,24 +21,22 @@
         data-file-uploader
         data-target="[data-file-container]"
         v-on="inputListeners"
+        ref="file-input"
+        tabindex="-1"
       />
       <div data-file-container class="bx--file-container">
-        <div
-          data-file-container
-          class="bx--file-container"
-          v-for="(file, index) in internalFiles"
-          :key="index"
-        >
+        <div data-file-container class="bx--file-container" v-for="(file, index) in internalFiles" :key="index">
           <span class="bx--file__selected-file">
             <p class="bx--file-filename">{{ file.file.name }}</p>
-            <span
-              :data-for="uid"
-              class="bx--file__state-container"
-              :data-test="file.state"
-              wibble="banana"
-            >
+            <span :data-for="uid" class="bx--file__state-container" :data-test="file.state">
+              <cv-inline-loading
+                v-if="componentsX && (file.state === 'uploading' || file.state === 'complete')"
+                :active="file.state === 'uploading'"
+                loading-text
+                loaded-text
+              />
               <div
-                v-if="file.state === 'uploading'"
+                v-if="!componentsX && file.state === 'uploading'"
                 class="bx--loading"
                 tabindex="0"
                 style="width: 1rem; height: 1rem;"
@@ -45,7 +46,7 @@
                 </svg>
               </div>
               <svg
-                v-if="file.state === 'complete'"
+                v-if="!componentsX && file.state === 'complete'"
                 class="bx--file-complete"
                 fill-rule="evenodd"
                 height="16"
@@ -61,13 +62,30 @@
                 ></path>
               </svg>
               <svg
-                v-if="removable"
+                v-if="componentsX && removable"
                 class="bx--file-close"
-                fill-rule="evenodd"
                 role="button"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                tabindex="0"
+                alt="Remove file"
+                arial-label="Remove file"
+                @click="remove(index)"
+                @keydown.enter.prevent="remove(index)"
+                @keydown.space.prevent
+                @keyup.space.prevent="remove(index)"
+              >
+                <path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>
+              </svg>
+              <svg
+                v-if="!componentsX && removable"
+                class="bx--file-close"
+                fill-rule="evenodd"
                 height="16"
                 width="16"
                 viewBox="0 0 16 16"
+                role="button"
                 tabindex="0"
                 alt="Remove file"
                 arial-label="Remove file"
@@ -92,6 +110,8 @@
 <script>
 import uidMixin from '../../mixins/uid-mixin';
 import CvFormItem from '../cv-form/cv-form-item';
+import { componentsX } from '../../internal/feature-flags';
+import CvInlineLoading from '../cv-inline-loading/cv-inline-loading';
 
 const CONSTS = {
   STATES: {
@@ -103,7 +123,7 @@ const CONSTS = {
 
 export default {
   name: 'CvFileUploader',
-  components: { CvFormItem },
+  components: { CvFormItem, CvInlineLoading },
   mixins: [uidMixin],
   inheritAttrs: false,
   props: {
@@ -124,6 +144,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       internalFiles: [],
     };
   },
@@ -157,14 +178,15 @@ export default {
       }
       for (const file of ev.target.files) {
         this.internalFiles.push({
-          state: this.initialStateUploading
-            ? CONSTS.STATES.UPLOADING
-            : CONSTS.STATES.NONE,
+          state: this.initialStateUploading ? CONSTS.STATES.UPLOADING : CONSTS.STATES.NONE,
           file,
         });
       }
       this.$emit('change', this.internalFiles);
     },
+    onShow() {
+      this.$refs['file-input'].click();
+    },
   },
 };
 </script>

package/src/components/cv-inline-loading/cv-inline-loading.vue

@@ -0,0 +1,37 @@
+<template>
+  <div data-inline-loading class="bx--inline-loading" role="alert" aria-live="assertive">
+    <div class="bx--inline-loading__animation">
+      <cv-loading :hidden="!active" small />
+      <svg
+        :hidden="active"
+        data-inline-loading-finished
+        class="bx--inline-loading__checkmark-container bx--inline-loading__svg"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 10 10"
+      >
+        <polyline class="bx--inline-loading__checkmark" points="0.74 3.4 3.67 6.34 9.24 0.74"></polyline>
+      </svg>
+    </div>
+    <p
+      data-inline-loading-text-active="active"
+      data-inline-loading-text-finished="!active"
+      class="bx--inline-loading__text"
+    >
+      {{ active ? loadingText : loadedText }}
+    </p>
+  </div>
+</template>
+
+<script>
+import CvLoading from '../cv-loading/cv-loading';
+
+export default {
+  name: 'CvInlineLoading',
+  components: { CvLoading },
+  props: {
+    active: Boolean,
+    loadingText: { type: String, default: 'Loading data...' },
+    loadedText: { type: String, default: 'Data loaded.' },
+  },
+};
+</script>