@carbon/vue 1.0.0 → 1.1.1

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

@@ -1,13 +1,18 @@
 <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,6 +23,8 @@
         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
@@ -32,10 +39,18 @@
               :data-for="uid"
               class="bx--file__state-container"
               :data-test="file.state"
-              wibble="banana"
             >
+              <cv-inline-loader
+                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 +60,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 +76,32 @@
                 ></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 +126,8 @@
 <script>
 import uidMixin from '../../mixins/uid-mixin';
 import CvFormItem from '../cv-form/cv-form-item';
+import { componentsX } from '../../_internal/_feature-flags';
+import CvInlineLoader from '../cv-inline-loader/cv-inline-loader';
 
 const CONSTS = {
   STATES: {
@@ -103,7 +139,7 @@ const CONSTS = {
 
 export default {
   name: 'CvFileUploader',
-  components: { CvFormItem },
+  components: { CvFormItem, CvInlineLoader },
   mixins: [uidMixin],
   inheritAttrs: false,
   props: {
@@ -124,6 +160,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       internalFiles: [],
     };
   },
@@ -165,6 +202,9 @@ export default {
       }
       this.$emit('change', this.internalFiles);
     },
+    onShow() {
+      this.$refs['file-input'].click();
+    },
   },
 };
 </script>

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

@@ -0,0 +1,42 @@
+<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>
+export default {
+  name: 'CvInlineLoader',
+  props: {
+    active: Boolean,
+    loadingText: { type: String, default: 'Loading data...' },
+    loadedText: { type: String, default: 'Data loaded.' },
+  },
+};
+</script>

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

@@ -1,14 +1,20 @@
 <template>
   <div
-    data-inline-notification
+    data-notification
     class="cv-inline-notification bx--inline-notification"
     :class="`bx--inline-notification--${kind.toLowerCase()}`"
     v-on="$listeners"
-    :aria-role="isAlert ? 'alert' : false"
+    :role="isAlert ? 'alert' : false"
     :aria-live="!isAlert ? 'polite' : false"
   >
     <div class="bx--inline-notification__details">
+      <component
+        v-if="componentsX"
+        :is="icon"
+        class="bx--inline-notification__icon"
+      />
       <cv-icon
+        v-else
         :href="`cv(${icon})`"
         class="bx--inline-notification__icon"
         width="16"
@@ -25,7 +31,9 @@
       class="bx--inline-notification__close-button"
       @click="$emit('close')"
     >
+      <Close16 v-if="componentsX" class="bx--inline-notification__close-icon" />
       <svg
+        v-else
         class="bx--inline-notification__close-icon"
         aria-label="close"
         width="10"
@@ -45,10 +53,20 @@
 <script>
 import notificationMixin from '../../mixins/notification-mixin';
 import CvIcon from '../cv-icon/_cv-icon';
+import { componentsX } from '../../_internal/_feature-flags';
+import ErrorFilled16 from '@carbon/icons-vue/lib/error--filled/16';
+import CheckmarkFilled16 from '@carbon/icons-vue/lib/checkmark--filled/16';
+import WarningAltFilled16 from '@carbon/icons-vue/lib/warning--filled/16';
+import Close16 from '@carbon/icons-vue/lib/close/16';
 
 export default {
   name: 'CvInlineNotification',
-  components: { CvIcon },
+  components: { CvIcon, Close16 },
+  data() {
+    return {
+      componentsX,
+    };
+  },
   mixins: [notificationMixin],
   props: {
     kind: {
@@ -61,13 +79,13 @@ export default {
     icon() {
       switch (this.kind) {
         case 'error':
-          return 'icon--error--solid';
+          return componentsX ? ErrorFilled16 : 'icon--error--solid';
         case 'warning':
-          return 'icon--warning--solid';
+          return componentsX ? WarningAltFilled16 : 'icon--warning--solid';
         case 'success':
-          return 'icon--checkmark--solid';
+          return componentsX ? CheckmarkFilled16 : 'icon--checkmark--solid';
         default:
-          return 'icon--info--solid';
+          return componentsX ? null : 'icon--info--solid';
       }
     },
   },

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

@@ -11,13 +11,29 @@
     >
       <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
         <title>Loading</title>
-        <circle cx="0" cy="0" r="37.5"></circle>
+        <circle
+          v-if="componentsX && small"
+          class="bx--loading__background"
+          cx="0"
+          cy="0"
+          r="37.5"
+        ></circle>
+        <circle
+          :class="{
+            'bx--loading__stroke': componentsX,
+          }"
+          cx="0"
+          cy="0"
+          r="37.5"
+        ></circle>
       </svg>
     </div>
   </div>
 </template>
 
 <script>
+import { componentsX } from '../../_internal/_feature-flags';
+
 export default {
   name: 'CvLoading',
   props: {
@@ -36,6 +52,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       stopped: false,
     };
   },

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

@@ -16,7 +16,7 @@
         class="cv-modal__before-content"
         ref="beforeContent"
         tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px;"
         @focus="focusBeforeContent"
       />
       <div class="bx--modal-header">
@@ -27,7 +27,9 @@
           <slot name="title">Modal Title</slot>
         </h2>
         <button class="bx--modal-close" type="button" @click="hide" ref="close">
+          <Close16 v-if="componentsX" class="bx--modal-close__icon" />
           <cv-icon
+            v-else
             class="bx--modal-close__icon"
             href="cv(icon--close)"
             height="10px"
@@ -36,7 +38,7 @@
         </button>
       </div>
 
-      <div class="bx--modal-content">
+      <div class="bx--modal-content" ref="content">
         <slot name="content">
           <p>
             Passive modal notifications should only appear if there is an action
@@ -70,7 +72,7 @@
         class="cv-modal__after-content"
         ref="afterContent"
         tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px;"
         @focus="focusAfterContent"
       />
     </div>
@@ -81,6 +83,8 @@
 import CvButton from '../cv-button/cv-button';
 import CvIcon from '../cv-icon/_cv-icon';
 import uidMixin from '../../mixins/uid-mixin';
+import Close16 from '@carbon/icons-vue/lib/close//16';
+import { componentsX } from '../../_internal/_feature-flags';
 
 export default {
   name: 'CvModal',
@@ -88,6 +92,7 @@ export default {
   components: {
     CvButton,
     CvIcon,
+    Close16,
   },
   props: {
     kind: {
@@ -99,6 +104,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       dataVisible: false,
     };
   },
@@ -119,14 +125,14 @@ export default {
   computed: {
     primaryKind() {
       if (this.kind === 'danger') {
-        return 'danger--primary';
+        return componentsX ? 'danger' : 'danger--primary';
       } else {
         return 'primary';
       }
     },
     secondaryKind() {
       if (this.kind === 'danger') {
-        return 'tertiary';
+        return componentsX ? 'secondary' : 'tertiary';
       } else {
         return 'secondary';
       }
@@ -149,7 +155,12 @@ export default {
       this.$refs.close.focus();
     },
     onShown() {
-      if (this.$slots['primary-button']) {
+      const focusEl = this.$refs.content.querySelector(
+        '[data-modal-primary-focus]'
+      );
+      if (focusEl) {
+        focusEl.focus();
+      } else if (this.$slots['primary-button']) {
         this.$refs.primary.$el.focus();
       } else if (this.$slots['secondary-button']) {
         this.$refs.secondary.$el.focus();

package/src/components/cv-number-input/cv-number-input.vue

@@ -15,7 +15,8 @@
           @click="doUp"
           type="button"
         >
-          <svg width="10" height="5" viewBox="0 0 10 5">
+          <CaretUpGlyph v-if="componentsX" />
+          <svg v-else width="10" height="5" viewBox="0 0 10 5">
             <path d="M0 5L5 .002 10 5z" fill-rule="evenodd"></path>
           </svg>
         </button>
@@ -24,7 +25,8 @@
           @click="doDown"
           type="button"
         >
-          <svg width="10" height="5" viewBox="0 0 10 5">
+          <CaretDownGlyph v-if="componentsX" />
+          <svg v-else width="10" height="5" viewBox="0 0 10 5">
             <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"></path>
           </svg>
         </button>
@@ -50,10 +52,14 @@
 <script>
 import uidMixin from '../../mixins/uid-mixin';
 import themeMixin from '../../mixins/theme-mixin';
+import { componentsX } from '../../_internal/_feature-flags';
+import CaretDownGlyph from '@carbon/icons-vue/lib/caret--down/index';
+import CaretUpGlyph from '@carbon/icons-vue/lib/caret--up/index';
 
 export default {
   name: 'CvNumberInput',
   mixins: [uidMixin, themeMixin],
+  components: { CaretDownGlyph, CaretUpGlyph },
   inheritAttrs: false,
   props: {
     helperText: { type: String, default: null },
@@ -75,6 +81,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       internalValue: this.value,
     };
   },

package/src/components/cv-overflow-menu/cv-overflow-menu.vue

@@ -43,7 +43,7 @@
         class="cv-overflow-menu__before-content"
         ref="beforeContent"
         tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px;"
         @focus="focusBeforeContent"
       />
       <slot></slot>
@@ -51,7 +51,7 @@
         class="cv-overflow-menu__after-content"
         ref="afterContent"
         tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px;"
         @focus="focusAfterContent"
       />
     </ul>
@@ -110,18 +110,18 @@ export default {
         ) {
           this.open = false;
           this.positionListen(false);
-          setTimeout(() => {
+          this.$nextTick(() => {
             this.doFocus();
-          }, 1);
+          });
         }
       }
     },
     menuItemclick() {
       this.open = false;
       this.positionListen(false);
-      setTimeout(() => {
+      this.$nextTick(() => {
         this.doFocus();
-      }, 1);
+      });
     },
     doClose() {
       this.open = false;
@@ -136,10 +136,10 @@ export default {
         window.removeEventListener('resize', this.positionMenu);
       }
     },
-    positionMenu() {
+    async positionMenu() {
       if (this.open) {
         const menuPosition = this.$el.getBoundingClientRect();
-        setTimeout(() => {
+        return this.$nextTick(() => {
           if (this.flipMenu) {
             this.left =
               menuPosition.left +
@@ -155,7 +155,7 @@ export default {
             this.top =
               menuPosition.bottom + 2 + this.offsetTop + window.scrollY;
           }
-        }, 1);
+        });
       }
     },
     doFocus() {
@@ -184,16 +184,18 @@ export default {
       } else {
         focusOn = this.$el;
       }
-      setTimeout(() => {
-        focusOn.focus();
-      }, 1);
+      focusOn.focus();
     },
-    doToggle() {
+    async doToggle() {
       this.open = !this.open;
 
-      this.positionMenu();
+      // await positionMenu otherwise it can race doFocus.
+      // On initial open the menu is positioned 0,0 causing a jump
+      await this.positionMenu();
       this.positionListen(this.open);
-      this.doFocus();
+      this.$nextTick(() => {
+        this.doFocus();
+      });
     },
     onOverflowMenuTab(ev) {
       if (!ev.shiftKey) {

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

@@ -217,13 +217,13 @@ export default {
       this.pageCount = newPageCount(this.numberOfItems, this.pageSizeValue);
       this.pages = newPagesArray(this.pageCount);
       // what page is firstItem on
-      setTimeout(() => {
+      this.$nextTick(() => {
         // setting pageValue immediately seems to cause a problem - test set pageSize to 40, page to 3, set pageSize to 10
         // this previously resulted in 1 being set on Chrome (other browsers untested)
         this.pageValue = Math.ceil(this.firstItem / this.pageSizeValue);
         this.firstItem = newFirstItem(this.pageValue, this.pageSizeValue);
         this.$emit('change', this.internalValue);
-      }, 1);
+      });
     },
     onPrevPage() {
       if (this.pageValue > 1) {

package/src/components/cv-radio-button/cv-radio-button.vue

@@ -24,6 +24,7 @@ import radioMixin from '../../mixins/radio-mixin';
 
 export default {
   name: 'CvRadioButton',
+  inheritAttrs: false,
   mixins: [uidMixin, radioMixin],
 };
 </script>

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

@@ -123,20 +123,20 @@ export default {
       this.setValue(val);
     },
     min() {
-      setTimeout(() => {
+      this.$nextTick(() => {
         this.setValue(this.internalValue);
-      }, 1);
+      });
       //      this.internalMin = val && val.length ? val : '0';
     },
     max() {
-      setTimeout(() => {
+      this.$nextTick(() => {
         this.setValue(this.internalValue);
-      }, 1);
+      });
     },
     step() {
-      setTimeout(() => {
+      this.$nextTick(() => {
         this.setValue(this.internalValue);
-      }, 1);
+      });
     },
   },
   methods: {

package/src/components/cv-structured-list/_cv-structured-list-item-selectable.vue

@@ -39,6 +39,7 @@ import radioMixin from '../../mixins/radio-mixin';
 
 export default {
   name: 'CvStructuredListItemSelectable',
+  inheritAttrs: false,
   mixins: [uidMixin, radioMixin],
 };
 </script>

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

@@ -8,16 +8,18 @@
       @keydown.right.prevent="moveRight"
       @keydown.left.prevent="moveLeft"
     >
-      <div class="bx--tabs-trigger" tabindex="0">
-        <a
-          href="javascript:void(0)"
-          class="bx--tabs-trigger-text"
-          tabindex="-1"
-        ></a>
-        <svg width="10" height="5" viewBox="0 0 10 5">
-          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"></path>
-        </svg>
-      </div>
+      <cv-dropdown
+        class="bx--tabs-trigger"
+        :value="`${selectedIndex}`"
+        @change="onDropChange"
+      >
+        <cv-dropdown-item
+          v-for="(tab, index) in tabs"
+          :key="`drop-${index}`"
+          :value="`${index}`"
+          >{{ tab.label }}</cv-dropdown-item
+        >
+      </cv-dropdown>
       <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
         <li
           v-for="(tab, index) in tabs"
@@ -42,13 +44,19 @@
         </li>
       </ul>
     </nav>
-    <div class="cv-tabs__panels"><slot></slot></div>
+    <div class="cv-tabs__panels">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
 <script>
+import CvDropdown from '../cv-dropdown/cv-dropdown';
+import CvDropdownItem from '../cv-dropdown/cv-dropdown-item';
+
 export default {
   name: 'CvTabs',
+  components: { CvDropdown, CvDropdownItem },
   data() {
     return {
       tabs: [],
@@ -64,6 +72,9 @@ export default {
     this.$on('cv:selected', srcComponent => this.onCvSelected(srcComponent));
   },
   methods: {
+    onDropChange(val) {
+      this.onTabClick(parseInt(val));
+    },
     onCvMount(srcComponent) {
       this.tabs.push(srcComponent);
       this.checkSelected();