@carbon/vue 2.6.0 → 2.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -63,13 +63,13 @@
   "sideEffects": true,
   "dependencies": {
     "@carbon/icons-vue": "10.3.0",
-    "carbon-components": "10.3.0",
+    "carbon-components": "10.3.1",
     "flatpickr": "4.6.1",
     "vue": "^2.6.10"
   },
   "devDependencies": {
-    "@vue/cli-service": "^3.8.0",
+    "@vue/cli-service": "^3.8.4",
     "vue-template-compiler": "^2.6.10"
   },
-  "gitHead": "fd2c0a1e5b4a76f7ecd727bdad260f7dddbedcb4"
+  "gitHead": "7bb957622b2f4a4a5a3458c19daec5d11283509c"
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="cv-checkbox bx--form-item bx--checkbox-wrapper">
+  <div class="cv-checkbox bx--checkbox-wrapper" :class="{ 'bx--form-item': formItem }">
     <label
       :class="[
         'bx--checkbox-label',
@@ -38,6 +38,7 @@ export default {
   props: {
     label: String,
     mixed: Boolean,
+    formItem: { type: Boolean, default: true },
   },
   watch: {
     mixed() {

package/src/components/cv-data-table/cv-data-table.vue

@@ -23,8 +23,11 @@
           </div>
           <div class="bx--batch-summary">
             <p class="bx--batch-summary__para">
-              <span data-items-selected>{{ dataRowsSelected.length }}</span>
-              items selected
+              <span data-items-selected>
+                <slot name="items-selected" v-bind:scope="{ count: dataRowsSelected.length }"
+                  >{{ dataRowsSelected.length }} items selected</slot
+                >
+              </span>
             </p>
           </div>
         </div>

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

@@ -18,9 +18,7 @@
 <template>
   <div :class="{ 'bx--form-item': formItem }">
     <div class="bx--dropdown__wrapper" :class="{ 'bx--dropdown__wrapper--inline': inline, 'cv-dropdown': !formItem }">
-      <label v-if="label" :for="uid" class="bx--label" :class="{ 'bx--label--disabled': $attrs.disabled }">
-        {{ label }}
-      </label>
+      <label v-if="label" class="bx--label" :class="{ 'bx--label--disabled': $attrs.disabled }">{{ label }}</label>
 
       <div
         v-if="!inline && isHelper"
@@ -80,7 +78,6 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
 import themeMixin from '../../mixins/theme-mixin';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
 import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
@@ -88,7 +85,7 @@ import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
 export default {
   name: 'CvDropdownInner',
   inheritAttrs: false,
-  mixins: [uidMixin, themeMixin],
+  mixins: [themeMixin],
   components: { WarningFilled16, ChevronDown16 },
   props: {
     formItem: { type: Boolean, default: true },

package/src/components/cv-multi-select/cv-multi-select.vue

@@ -0,0 +1,290 @@
+<template>
+  <div
+    class="cv-multi-select bx--multi-select__wrapper bx--list-box__wrapper"
+    :class="{
+      'bx--multi-select__wrapper--inline bx--list-box__wrapper--inline': inline,
+      'bx--multi-select__wrapper--inline--invalid bx--list-box__wrapper--inline--invalid': inline && isInvalid,
+    }"
+    @focusout="onFocusOut"
+  >
+    <label v-if="title" :for="uid" class="bx--label" :class="{ 'bx--label--disabled': $attrs.disabled }">
+      {{ title }}
+    </label>
+
+    <div
+      v-if="!inline && isHelper"
+      class="bx--form__helper-text"
+      :class="{ 'bx--form__helper-text--disabled': $attrs.disabled }"
+    >
+      <slot name="helper-text">{{ helperText }}</slot>
+    </div>
+
+    <div
+      role="listbox"
+      tabindex="-1"
+      class="bx--multi-select bx--list-box"
+      :class="{
+        'bx--list-box--light': theme === 'light',
+        'bx--multi-select--expanded': open,
+        'bx--multi-select--invalid': isInvalid,
+        'bx--multi-select--disabled bx--list-box--disabled': $attrs.disabled,
+        'bx--multi-select--inline bx--list-box--inline': inline,
+      }"
+      :data-invalid="isInvalid"
+      v-bind="$attrs"
+      @keydown.down.prevent="onDown"
+      @keydown.up.prevent="onUp"
+      @keydown.enter.prevent="onClick"
+      @keydown.space.prevent="onSpace"
+      @keydown.esc.prevent="onEsc"
+      @click="onClick"
+    >
+      <WarningFilled16 v-if="isInvalid" class="bx--list-box__invalid-icon" />
+      <div
+        role="button"
+        aria-haspopup="true"
+        :aria-expanded="open"
+        :aria-owns="uid"
+        :aria-controls="uid"
+        class="bx--list-box__field"
+        tabindex="0"
+        type="button"
+        :aria-label="open ? 'close menu' : 'open menu'"
+        data-toggle="true"
+        ref="button"
+      >
+        <cv-tag
+          v-show="dataValue.length > 0"
+          kind="filter"
+          :label="`${dataValue.length}`"
+          @remove="clearValues"
+          ref="tag"
+        />
+        <span class="bx--list-box__label">{{ label }}</span>
+        <div class="bx--list-box__menu-icon" :class="{ 'bx--list-box__menu-icon--open': open }" role="button">
+          <chevron-down-16 :aria-label="open ? 'Close menu' : 'Open menu'" />
+        </div>
+      </div>
+
+      <div v-show="open" :id="uid" class="bx--list-box__menu" role="listbox" ref="list">
+        <div
+          v-for="(item, index) in dataOptions"
+          :key="`multi-select-${index}`"
+          class="bx--list-box__menu-item"
+          :class="{ 'bx--list-box__menu-item--highlighted': highlighted === item.value }"
+          ref="option"
+          @click.stop.prevent="onItemClick(item.value)"
+          @mousemove="onMousemove(item.value)"
+          @mousedown.prevent
+        >
+          <div class="bx--list-box__menu-item__option">
+            <cv-checkbox
+              tabindex="-1"
+              :form-item="false"
+              v-model="dataValue"
+              :value="item.value"
+              :name="item.name"
+              :data-test="item.name"
+              :label="item.label"
+              style="pointer-events: none;"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="isInvalid && !inline" class="bx--form-requirement">
+      <slot name="invalid-message">{{ invalidMessage }}</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import themeMixin from '../../mixins/theme-mixin';
+import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
+import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
+import uidMixin from '../../mixins/uid-mixin';
+import CvCheckbox from '../cv-checkbox/cv-checkbox';
+import CvTag from '../cv-tag/cv-tag';
+
+const TOP_AFTER_REOPEN = 0;
+const TOP = 1;
+const FIXED = 2;
+const selectionFeedbackOptions = ['top-after-reopen', 'top', 'fixed'];
+
+export default {
+  name: 'CvMultiSelect',
+  inheritAttrs: false,
+  mixins: [themeMixin, uidMixin],
+  components: { WarningFilled16, ChevronDown16, CvCheckbox, CvTag },
+  props: {
+    inline: Boolean,
+    invalidMessage: { type: String, default: null },
+    helperText: { type: String, default: null },
+    title: String,
+    label: {
+      type: String,
+      default: 'Choose options',
+    },
+    value: { type: Array, default: () => [] },
+    // initial value of the multi-select,
+    // options in the form
+    // [{ label: '', value: '', name: ''}]
+    options: {
+      type: Array,
+      required: true,
+      validator(list) {
+        const result = list.every(
+          item => typeof item.name === 'string' && typeof item.label === 'string' && typeof item.value === 'string'
+        );
+        if (!result) {
+          console.warn('CvMultiSelect - all options must have name, label and value');
+        }
+        return result;
+      },
+    },
+    selectionFeedback: {
+      type: String,
+      default: selectionFeedbackOptions[TOP_AFTER_REOPEN],
+      validator(val) {
+        if (!selectionFeedbackOptions.includes(val)) {
+          console.warn(`CvMultiSelect: invalid value "${val}", use one of ${selectionFeedbackOptions}`);
+          return false;
+        }
+        return true;
+      },
+    },
+  },
+  data() {
+    return {
+      open: false,
+      dataOptions: null,
+      dataValue: this.value,
+      highlighted: '',
+    };
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  watch: {
+    value() {
+      this.dataValue = this.value;
+    },
+    options() {
+      this.sortOptions();
+    },
+    selectionFeedback() {
+      this.sortOptions();
+    },
+  },
+  created() {
+    this.sortOptions();
+  },
+  computed: {
+    isInvalid() {
+      return this.$slots['invalid-message'] !== undefined || (this.invalidMessage && this.invalidMessage.length);
+    },
+    isHelper() {
+      return this.$slots['helper-text'] !== undefined || (this.helperText && this.helperText.length);
+    },
+  },
+  methods: {
+    doMove(up) {
+      // requery could have changed
+      const currentHighlight = this.dataOptions.findIndex(item => item.value === this.highlighted);
+      let newHiglight;
+
+      if (up) {
+        if (currentHighlight <= 0) {
+          newHiglight = this.dataOptions.length - 1;
+        } else {
+          newHiglight = currentHighlight - 1;
+        }
+      } else {
+        if (currentHighlight >= this.dataOptions.length - 1) {
+          newHiglight = 0;
+        } else {
+          newHiglight = currentHighlight + 1;
+        }
+      }
+      this.highlighted = this.dataOptions[newHiglight].value;
+      if (
+        this.$refs.list.scrollTop > this.$refs.option[newHiglight].offsetTop ||
+        this.$refs.list.scrollTop + this.$refs.list.clientHeight <
+          this.$refs.option[newHiglight].offsetTop + this.$refs.option[newHiglight].offsetHeight
+      ) {
+        this.$refs.option[newHiglight].scrollIntoView();
+      }
+    },
+    sortOptions() {
+      this.dataOptions = this.options.slice(0);
+
+      if (!this.sorting && this.selectionFeedback !== selectionFeedbackOptions[FIXED]) {
+        // if included in data value move to top
+        this.dataOptions.sort(
+          (a, b) => (this.dataValue.includes(a.value) ? -1 : 1) - (this.dataValue.includes(b.value) ? -1 : 1)
+        );
+      }
+    },
+    doOpen(newVal) {
+      if (newVal && this.selectionFeedback === selectionFeedbackOptions[TOP_AFTER_REOPEN]) {
+        this.sortOptions();
+      }
+      this.open = newVal;
+    },
+    onDown() {
+      if (!this.open) {
+        this.doOpen(true);
+      } else {
+        this.doMove(false);
+      }
+    },
+    onUp() {
+      if (this.open) {
+        this.doMove(true);
+      }
+    },
+    onEsc() {
+      this.doOpen(false);
+      this.$el.focus();
+    },
+    onSpace() {
+      this.onItemClick(this.highlighted);
+    },
+    onClick(ev) {
+      this.doOpen(!this.open);
+      if (!this.open) {
+        this.$refs.button.focus();
+      }
+    },
+    clearValues() {
+      this.dataValue = [];
+      this.$refs.button.focus();
+      this.$emit('change', this.dataValue);
+    },
+    onFocusOut(ev) {
+      if (!this.$el.contains(ev.relatedTarget) && !this.$refs.tag.$el.contains(ev.target)) {
+        this.doOpen(false);
+      }
+    },
+    onMousemove(val) {
+      this.highlighted = val;
+    },
+    onItemClick(val) {
+      const index = this.dataValue.findIndex(item => val === item);
+      if (index > -1) {
+        this.dataValue.splice(index, 1);
+      } else {
+        this.dataValue.push(val);
+      }
+      if (this.selectionFeedback === selectionFeedbackOptions[TOP]) {
+        this.sortOptions();
+      }
+      this.$refs.button.focus();
+      this.$emit('change', this.dataValue);
+    },
+  },
+};
+</script>
+
+<style lang="scss"></style>

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

@@ -18,7 +18,9 @@
       </cv-select>
 
       <span class="bx--pagination__text">
-        <span data-displayed-item-range>{{ rangeText }}</span>
+        <span data-displayed-item-range>
+          <slot name="range-text" v-bind:scope="rangeProps">{{ rangeText }}</slot>
+        </span>
       </span>
     </div>
 
@@ -41,7 +43,9 @@
           >{{ pageNumber }}</cv-select-option
         >
       </cv-select>
-      <span class="bx--pagination__text">{{ pageOfPages }}</span>
+      <span class="bx--pagination__text">
+        <slot name="of-n-pages" v-bind:scope="ofNPagesProps">{{ pageOfPages }}</slot>
+      </span>
 
       <span v-if="pages.length == 0">{{ pageValue }}</span>
 
@@ -174,25 +178,38 @@ export default {
     noWayForward() {
       return this.pageValue === this.pageCount;
     },
+    ofNPagesProps() {
+      return {
+        pages: this.pageCount,
+        items: this.numberOfItems,
+      };
+    },
     pageOfPages() {
+      const { pages, items } = this.ofNPagesProps;
       // console.log(this.pageValue, this.pageCount);
-      if (this.numberOfItems !== Infinity) {
-        return `of ${this.pageCount} pages`;
+      if (items !== Infinity) {
+        return `of ${pages} pages`;
       }
       return '';
     },
+    rangeProps() {
+      return {
+        start: this.firstItem,
+        end: Math.min(this.firstItem + parseInt(this.pageSizeValue, 10) - 1, this.numberOfItems),
+        items: this.numberOfItems,
+      };
+    },
     rangeText() {
-      const start = this.firstItem;
-      const end = Math.min(start + parseInt(this.pageSizeValue, 10) - 1, this.numberOfItems);
+      const { start, end, items } = this.rangeProps;
 
-      if (this.numberOfItems !== Infinity) {
-        return `${start}-${end} of ${this.numberOfItems} items`;
+      if (items !== Infinity) {
+        return `${start}-${end} of ${items} items`;
       } else {
         return `${start}-${end}`;
       }
     },
     internalValue() {
-      return { start: this.firstItem, length: parseInt(this.pageSizeValue) };
+      return { start: this.firstItem, page: this.pageValue, length: parseInt(this.pageSizeValue) };
     },
   },
   methods: {

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

@@ -14,9 +14,9 @@
     <Close16
       v-if="isFilter"
       aria-label="Clear filter"
-      @click="$emit('remove')"
+      @click.stop.prevent="$emit('remove')"
       tabindex="0"
-      @keydown.enter.prevent="$emit('remove')"
+      @keydown.enter.stop.prevent="$emit('remove')"
       @keydown.space.prevent
       @keyup.space.prevent="$emit('remove')"
     />

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

@@ -26,27 +26,16 @@
         :type="dataType"
         ref="input"
       />
+      <button
+        v-if="isPassword"
+        class="bx--text-input--password__visibility"
+        :aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
+        @click="togglePasswordVisibility"
+      >
+        <ViewOff16 v-if="isPasswordVisible" class="bx--icon-visibility-off" />
+        <View16 v-else class="bx--icon-visibility-off" />
+      </button>
     </div>
-    <button
-      v-if="isPassword"
-      class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom"
-      :aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
-      @click="togglePasswordVisibility"
-    >
-      <svg v-if="isPasswordVisible" class="icon--visibility-off" width="16" height="16" viewBox="0 0 16 16">
-        <path
-          d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"
-        ></path>
-      </svg>
-      <svg v-else class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
-        <path
-          d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"
-        ></path>
-        <path
-          d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"
-        ></path>
-      </svg>
-    </button>
     <div class="bx--form-requirement" v-if="isInvalid">
       <slot name="invalid-message">{{ invalidMessage }}</slot>
     </div>
@@ -57,10 +46,12 @@
 import uidMixin from '../../mixins/uid-mixin';
 import themeMixin from '../../mixins/theme-mixin';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
+import View16 from '@carbon/icons-vue/es/view/16';
+import ViewOff16 from '@carbon/icons-vue/es/view--off/16';
 
 export default {
   name: 'CvTextInput',
-  components: { WarningFilled16 },
+  components: { WarningFilled16, View16, ViewOff16 },
   mixins: [uidMixin, themeMixin],
   inheritAttrs: false,
   props: {

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

@@ -10,8 +10,8 @@
     @click="gaToggle"
     @focusout="gaFocusout"
   >
-    <Close20 v-if="active" />
-    <Menu20 v-if="!active" />
+    <Close20 v-if="dataActive" />
+    <Menu20 v-if="!dataActive" />
   </button>
 </template>
 
@@ -43,7 +43,7 @@ export default {
     // watch width transition and
   },
   watch: {
-    expanded() {
+    active() {
       if (this.active !== this.dataActive) {
         this.gaToggle();
       }

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

@@ -13,7 +13,6 @@
       @keydown.space.prevent
       @keyup.space.prevent="doToggle"
       @keydown.enter.prevent="doToggle"
-      @focusout="onFocusout"
     >
       <cv-side-nav-icon v-if="hasIcon">
         <slot name="nav-icon" />
@@ -24,10 +23,10 @@
         small
         :aria-label="expanded ? 'collapse nav menu' : 'expand nav menu'"
       >
-        <ChevronDown20 />
+        <ChevronDown20 class="cv-side-nav-menu__chevron-svg" />
       </cv-side-nav-icon>
     </button>
-    <ul class="bx--side-nav__menu" role="menu" ref="menu" @focusout="onFocusout">
+    <ul class="bx--side-nav__menu" role="menu" ref="menu">
       <slot></slot>
     </ul>
   </li>
@@ -58,13 +57,13 @@ export default {
     doToggle() {
       this.expanded = !this.expanded;
     },
-    onFocusout(ev) {
-      if (!(this.$el.contains(ev.relatedTarget) || this.$refs.menu.contains(ev.relatedTarget))) {
-        this.expanded = false;
-      }
-    },
   },
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.cv-side-nav-menu .cv-side-nav-menu__chevron-svg {
+  // prevent safari issue
+  will-change: initial !important;
+}
+</style>