@carbon/vue 2.18.0-canary.0 → 2.19.0

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

@@ -1,26 +1,29 @@
 <template>
-  <div class="cv-tabs">
+  <div class="cv-tabs" @focusout="onFocusout" @focusin="onFocusin">
     <div
       data-tabs
       class="cv-tab bx--tabs"
       role="navigation"
       v-on="$listeners"
       v-bind="$attrs"
-      @keydown.right.prevent="moveRight"
-      @keydown.left.prevent="moveLeft"
+      @keydown.right.prevent="onRight"
+      @keydown.left.prevent="onLeft"
+      @keydown.down.prevent="onDown"
+      @keydown.up.prevent="onUp"
+      @keydown.esc.prevent="onEsc"
     >
-      <cv-dropdown
+      <div
         class="bx--tabs-trigger"
-        :value="`${selectedId}`"
-        @change="onDropChange"
-        :form-item="false"
-        :style="triggerStyleOverride"
+        :class="{ ' bx--tabs-trigger--open': open }"
+        tabindex="0"
+        ref="trigger"
+        @click="onClick"
+        @keydown.enter.prevent="onClick"
       >
-        <cv-dropdown-item v-for="tab in tabs" :key="`drop-${tab.uid}`" :value="`${tab.uid}`">{{
-          tab.label
-        }}</cv-dropdown-item>
-      </cv-dropdown>
-      <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
+        <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1">{{ currentTabLabel }}</a>
+        <chevron-down-glyph />
+      </div>
+      <ul class="bx--tabs__nav" :class="{ 'bx--tabs__nav--hidden': !open }" role="tablist">
         <li
           v-for="tab in tabs"
           :key="tab.uid"
@@ -40,6 +43,7 @@
             :aria-controls="tab.uid"
             :id="`${tab.uid}-link`"
             @click="onTabClick(tab.uid)"
+            @keydown.enter.prevent="onTabEnter(tab.uid)"
             ref="link"
             >{{ tab.label }}</a
           >
@@ -53,20 +57,22 @@
 </template>
 
 <script>
-import CvDropdown from '../cv-dropdown/cv-dropdown';
-import CvDropdownItem from '../cv-dropdown/cv-dropdown-item';
+import ChevronDownGlyph from '@carbon/icons-vue/es/chevron--down';
 
 export default {
   name: 'CvTabs',
-  components: { CvDropdown, CvDropdownItem },
   props: {
     noDefaultToFirst: Boolean,
   },
+  components: { ChevronDownGlyph },
   data() {
     return {
       tabs: [],
       selectedId: undefined,
       disabledTabs: [],
+      open: false,
+      lastDisplayProp: undefined,
+      // data is open
     };
   },
   created() {
@@ -77,13 +83,59 @@ export default {
     this.$on('cv:disabled', srcComponent => this.onCvDisabled(srcComponent));
     this.$on('cv:enabled', srcComponent => this.onCvEnabled(srcComponent));
   },
+  mounted() {},
   computed: {
     triggerStyleOverride() {
       // <style carbon tweaks - DO NOT USE STYLE TAG as it causes SSR issues
       return { padding: 0 };
     },
+    currentTabLabel() {
+      const index = this.tabs.findIndex(tab => tab.uid === this.selectedId);
+
+      return index > -1 ? this.tabs[index].label : '';
+    },
   },
   methods: {
+    onFocusin(ev) {
+      if (ev.target.classList.contains('bx--tabs__nav-link') || ev.target.classList.contains('bx--tabs-trigger')) {
+        // record display prop state
+        this.lastDisplayProp = window.getComputedStyle(this.$refs.trigger).getPropertyValue('display');
+      } else {
+        this.lastDisplayProp = undefined;
+      }
+    },
+    onFocusout(ev) {
+      // works with onFocusin to determine whether focus needs to be set to a tab or trigger
+      const displayProp = window.getComputedStyle(this.$refs.trigger).getPropertyValue('display');
+      if (ev.relatedTarget) {
+        if (
+          ev.relatedTarget.classList.contains('bx--tabs__nav-link') ||
+          ev.relatedTarget.classList.contains('bx--tabs-trigger')
+        ) {
+          return; // no need to do anything - focus is going somewhere
+        } else {
+          this.open = false;
+        }
+      } else {
+        if (this.lastDisplayProp && this.lastDisplayProp !== displayProp) {
+          if (displayProp === 'none') {
+            // focus on selected tab
+            const currentTabLink = this.$refs.link.find(link => link.getAttribute('aria-controls') === this.selectedId);
+            if (currentTabLink) {
+              currentTabLink.focus();
+            }
+          } else {
+            this.$refs.trigger.focus();
+          }
+        } else {
+          this.open = false;
+        }
+      }
+    },
+    onWindowResize() {
+      // check whether trigger is displayed
+      this.dataDropdownShown = window.getComputedStyle(this.$refs.trigger).getPropertyValue('display') !== 'none';
+    },
     onDropChange(val) {
       this.onTabClick(val);
     },
@@ -126,6 +178,12 @@ export default {
             }
           }
 
+          this.open = false;
+          if (this.$refs.trigger) {
+            // following code build sometimes trigger is not yet available
+            this.$refs.trigger.focus();
+          }
+
           this.$emit('tab-selected', newIndex);
         }
       }
@@ -166,64 +224,115 @@ export default {
     isAllTabsDisabled() {
       return this.disabledTabs.length === this.tabs.length;
     },
-    moveLeft() {
+    onTabEnter(id) {
+      // const newIndex = this.tabs.findIndex(tab => tab.uid === id);
+
+      this.onTabClick(id);
+      this.$refs.trigger.focus();
+    },
+    onClick() {
+      this.open = !this.open;
+    },
+    onEsc() {
+      this.open = false;
+    },
+    onUp() {
       if (this.isAllTabsDisabled()) {
         return;
       }
-      let newId;
-      let newIndex;
 
-      if (this.selectedId) {
-        newIndex = this.tabs.indexOf(this.selectedId);
-      }
+      const displayProp = window.getComputedStyle(this.$refs.trigger).getPropertyValue('display');
 
-      if (newIndex > 0) {
-        newIndex--;
-      } else {
-        newIndex = this.tabs.length - 1;
+      if (displayProp !== 'none') {
+        const el = document.activeElement;
+        let id;
+        if (el.classList.contains('bx--tabs__nav-link')) {
+          id = el.getAttribute('aria-controls');
+        } else {
+          id = this.selectedId;
+        }
+
+        const newIndex = this.move(id, false);
+        this.$refs.link[newIndex].focus();
+      }
+    },
+    onDown() {
+      if (this.isAllTabsDisabled()) {
+        return;
       }
-      newId = this.tabs[newIndex].uid;
 
-      while (this.disabledTabs.indexOf(newId) !== -1) {
-        if (newIndex > 0) {
-          newIndex--;
+      const displayProp = window.getComputedStyle(this.$refs.trigger).getPropertyValue('display');
+
+      if (displayProp !== 'none') {
+        if (!this.open) {
+          this.open = true;
         } else {
-          newIndex = this.tabs.length - 1;
+          const el = document.activeElement;
+          let id;
+          if (el.classList.contains('bx--tabs__nav-link')) {
+            id = el.getAttribute('aria-controls');
+          } else {
+            id = this.selectedId;
+          }
+
+          const newIndex = this.move(id, true);
+          this.$refs.link[newIndex].focus();
         }
-        newId = this.tabs[newIndex].uid;
       }
-      this.onTabClick(newId);
-      this.$refs.link[newIndex].focus();
     },
-    moveRight() {
+    onLeft() {
       if (this.isAllTabsDisabled()) {
         return;
       }
-      let newId;
-      let newIndex;
 
-      if (this.selectedId) {
-        newIndex = this.tabs.indexOf(this.selectedId);
+      const displayProp = window.getComputedStyle(this.$refs.trigger).getPropertyValue('display');
+      if (displayProp === 'none') {
+        const newIndex = this.move(this.selectedId, false);
+        const newId = this.tabs[newIndex].uid;
+
+        this.onTabClick(newId);
+        this.$refs.link[newIndex].focus();
       }
+    },
+    move(id, next) {
+      let newIndex;
+      let newId;
 
-      if (newIndex < this.tabs.length - 1) {
-        newIndex++;
-      } else {
-        newIndex = 0;
+      newIndex = this.tabs.findIndex(tab => tab.uid === id);
+
+      if (newIndex > -1) {
+        newIndex = next ? newIndex + 1 : newIndex - 1;
+      }
+      if (newIndex < 0 || newIndex >= this.tabs.length) {
+        newIndex = next ? 0 : this.tabs.length - 1;
       }
-      newId = this.tabs[newIndex].uid;
 
-      while (this.disabledTabs.indexOf(newIndex) !== -1) {
-        if (newIndex < this.tabs.length - 1) {
-          newIndex++;
-        } else {
-          newIndex = 0;
+      newId = this.tabs[newIndex].uid;
+      while (newId === this.selectedId || this.disabledTabs.indexOf(newId) !== -1) {
+        if (newIndex > -1) {
+          newIndex = next ? newIndex + 1 : newIndex - 1;
+        }
+        if (newIndex < 0 || newIndex >= this.tabs.length) {
+          newIndex = next ? 0 : this.tabs.length - 1;
         }
         newId = this.tabs[newIndex].uid;
       }
 
-      this.onTabClick(newId);
-      this.$refs.link[newIndex].focus();
+      return newIndex;
+    },
+    onRight() {
+      if (this.isAllTabsDisabled()) {
+        return;
+      }
+
+      const displayProp = window.getComputedStyle(this.$refs.trigger).getPropertyValue('display');
+      if (displayProp === 'none') {
+        const newIndex = this.move(this.selectedId, true);
+        const newId = this.tabs[newIndex].uid;
+
+        this.onTabClick(newId);
+        this.$refs.link[newIndex].focus();
+      }
     },
     selected(index) {
       let selItem = this.tabs[index ? index : -1];

package/src/components/cv-text-area/cv-text-area.vue

@@ -46,6 +46,18 @@ export default {
     label: String,
     value: String,
   },
+  data() {
+    return {
+      isHelper: false,
+      isInvalid: false,
+    };
+  },
+  mounted() {
+    this.checkSlots();
+  },
+  beforeUpdate() {
+    this.checkSlots();
+  },
   computed: {
     // Bind listeners at the component level to the embedded input element and
     // add our own input listener to service the v-model. See:
@@ -56,11 +68,12 @@ export default {
         input: event => this.$emit('input', event.target.value),
       };
     },
-    isInvalid() {
-      return this.$slots['invalid-message'] !== undefined || (this.invalidMessage && this.invalidMessage.length);
-    },
-    isHelper() {
-      return this.$slots['helper-text'] || (this.helperText && this.helperText.length);
+  },
+  methods: {
+    checkSlots() {
+      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
+      this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
   },
 };

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

@@ -70,8 +70,16 @@ export default {
     return {
       dataPasswordVisible: this.isPassword && this.passwordVisible,
       dataType: this.type,
+      isHelper: false,
+      isInvalid: false,
     };
   },
+  mounted: function() {
+    this.checkSlots();
+  },
+  beforeUpdate() {
+    this.checkSlots();
+  },
   watch: {
     passwordVisible() {
       if (this.passwordVisible !== this.dataPasswordVisible) {
@@ -92,12 +100,6 @@ export default {
         input: event => this.$emit('input', event.target.value),
       };
     },
-    isInvalid() {
-      return this.$slots['invalid-message'] !== undefined || (this.invalidMessage && this.invalidMessage.length);
-    },
-    isHelper() {
-      return this.$slots['helper-text'] || (this.helperText && this.helperText.length);
-    },
     isPassword() {
       return this.type === 'password';
     },
@@ -109,6 +111,11 @@ export default {
     },
   },
   methods: {
+    checkSlots() {
+      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
+      this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
+    },
     togglePasswordVisibility() {
       const currentValue = this.$refs.input.value;
       this.dataPasswordVisible = !this.dataPasswordVisible;

package/src/components/cv-time-picker/cv-time-picker.vue

@@ -80,13 +80,18 @@ export default {
     timezones: { type: Array, default: () => [] },
     timezonesSelectLabel: { type: String, default: 'Select time zone' },
   },
+  data() {
+    return {
+      isInvalid: false,
+    };
+  },
+  mounted() {
+    this.checkSlots();
+  },
+  beforeUpdate() {
+    this.checkSlots();
+  },
   computed: {
-    isInvalid() {
-      return (
-        (this.$slots['invalid-message'] && this.$slots['invalid-message'].length) ||
-        (this.invalidMessage && this.invalidMessage.length > 0)
-      );
-    },
     validAmpm() {
       let result = this.ampm;
       if (!['AM', 'PM'].includes(this.ampm)) {
@@ -111,5 +116,11 @@ export default {
       return result;
     },
   },
+  methods: {
+    checkSlots() {
+      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
+    },
+  },
 };
 </script>

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

@@ -0,0 +1,21 @@
+<template>
+  <div class="cv-toggle bx--form-item">
+    <label class="bx--toggle__label bx--skeleton" :for="uid" :aria-label="label ? 'Toggle is loading' : label">
+      <span class="bx--toggle__label-text" />
+      <span class="bx--toggle__text--left" />
+      <span class="bx--toggle__appearance" />
+      <span class="bx--toggle__text--right" />
+    </label>
+  </div>
+</template>
+
+<script>
+import uidMixin from '../../mixins/uid-mixin';
+export default {
+  name: 'CvToggleSkeleton',
+  mixins: [uidMixin],
+  props: {
+    label: { type: String, default: 'Toggle is loading' },
+  },
+};
+</script>

package/src/components/cv-toggle/index.js

@@ -1,2 +1,3 @@
 import CvToggle from './cv-toggle';
-export { CvToggle };
+import CvToggleSkeleton from './cv-toggle-skeleton';
+export { CvToggle, CvToggleSkeleton };

package/src/components/cv-ui-shell/cv-header.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="cv-header bx--header" role="banner" data-header>
     <slot />
-    <div v-if="$slots['header-global']" class="bx--header__global">
+    <div v-if="hasGlobalHeader" class="bx--header__global">
       <slot name="header-global" />
     </div>
     <slot name="left-panels" />
@@ -26,8 +26,16 @@ export default {
     return {
       panelControllers: [],
       panels: [],
+      hasGlobalHeader: false,
     };
   },
+  mounted() {
+    // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+    this.hasGlobalHeader = !!this.$slots['header-global'];
+  },
+  beforeUpdate() {
+    this.hasGlobalHeader = !!this.$slots['header-global'];
+  },
   computed: {
     isCvHeader() {
       return true;

package/src/components/cv-ui-shell/cv-side-nav-link.vue

@@ -7,7 +7,7 @@
       v-bind="{ ...$attrs, ...linkProps }"
       :class="{ 'bx--side-nav__link--current': active }"
     >
-      <cv-side-nav-icon v-if="$slots['nav-icon'] !== undefined" small>
+      <cv-side-nav-icon v-if="hasNavIcon" small>
         <slot name="nav-icon" />
       </cv-side-nav-icon>
       <cv-side-nav-link-text>
@@ -31,5 +31,13 @@ export default {
     active: Boolean,
     icon: Object,
   },
+  data() {
+    return {
+      hasNavIcon: this.$slots['nav-icon'],
+    };
+  },
+  beforeUpdate() {
+    this.hasNavIcon = !!this.$slots['nav-icon'];
+  },
 };
 </script>

package/src/components/cv-ui-shell/cv-side-nav-menu.vue

@@ -46,11 +46,19 @@ export default {
   data() {
     return {
       expanded: false,
+      hasNavIcon: false,
     };
   },
+  mounted() {
+    // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+    this.hasNavIcon = !!this.$slots['nav-icon'];
+  },
+  beforeUpdate() {
+    this.hasNavIcon = !!this.$slots['nav-icon'];
+  },
   computed: {
     hasIcon() {
-      return this.$slots['nav-icon'] !== undefined;
+      return !!this.$slots['nav-icon'];
     },
   },
   methods: {

package/src/index.js

@@ -73,7 +73,7 @@ import { CvTextInput } from './components/cv-text-input';
 import { CvTile } from './components/cv-tile';
 import { CvTimePicker } from './components/cv-time-picker';
 import { CvToastNotification } from './components/cv-toast-notification';
-import { CvToggle } from './components/cv-toggle';
+import { CvToggle, CvToggleSkeleton } from './components/cv-toggle';
 import { CvToolbar, CvToolbarTitle, CvToolbarSearch, CvToolbarOption, CvToolbarDivider } from './components/cv-toolbar';
 import { CvTooltip, CvInteractiveTooltip, CvDefinitionTooltip } from './components/cv-tooltip';
 import {
@@ -135,7 +135,7 @@ export { CvTextInput };
 export { CvTile };
 export { CvTimePicker };
 export { CvToastNotification };
-export { CvToggle };
+export { CvToggle, CvToggleSkeleton };
 export { CvToolbar, CvToolbarTitle, CvToolbarSearch, CvToolbarOption, CvToolbarDivider };
 export { CvTooltip, CvInteractiveTooltip, CvDefinitionTooltip };
 export {