@carbon/vue 2.27.0-canary.1 → 2.27.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.27.0-canary.1",
+  "version": "2.27.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -73,5 +73,5 @@
     "eslint-plugin-prettier": "^3.1.1",
     "vue-template-compiler": "^2.6.10"
   },
-  "gitHead": "7fbfffa31a8dbe70c1317e690c0d285dd62c7fdb"
+  "gitHead": "48ffc15e8d83bb013b01139b1d88d4b542895796"
 }

package/src/components/cv-code-snippet/_cv-code-snippet-inline.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import CvFeedbackButton from './_cv-feedback-button';
+import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
 import themeMixin from '../../mixins/theme-mixin';
 
 export default {

package/src/components/cv-code-snippet/_cv-code-snippet-multiline.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import CvFeedbackButton from './_cv-feedback-button';
+import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
 import CvButton from '../cv-button/cv-button';
 
 import Copy16 from '@carbon/icons-vue/es/copy/16';

package/src/components/cv-code-snippet/_cv-code-snippet-oneline.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import CvFeedbackButton from './_cv-feedback-button';
+import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
 
 import Copy16 from '@carbon/icons-vue/es/copy/16';
 

package/src/components/cv-combo-box/cv-combo-box.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="cv-combo-box bx--list-box__wrapper" @focusout="onFocusOut">
-    <label v-if="title" :for="uid" class="bx--label" :class="{ 'bx--label--disabled': $attrs.disabled }">
-      {{ title }}
-    </label>
+    <label v-if="title" :for="uid" class="bx--label" :class="{ 'bx--label--disabled': disabled }">{{ title }}</label>
 
-    <div v-if="isHelper" class="bx--form__helper-text" :class="{ 'bx--form__helper-text--disabled': $attrs.disabled }">
+    <div v-if="isHelper" class="bx--form__helper-text" :class="{ 'bx--form__helper-text--disabled': disabled }">
       <slot name="helper-text">{{ helperText }}</slot>
     </div>
 
@@ -16,10 +14,10 @@
         'bx--list-box--light': theme === 'light',
         'bx--combo-box--expanded': open,
         'bx--list-box--expanded': open,
-        'bx--combo-box--disabled bx--list-box--disabled': $attrs.disabled,
+        'bx--combo-box--disabled bx--list-box--disabled': disabled,
       }"
       :data-invalid="isInvalid"
-      v-bind="$attrs"
+      v-bind="$attr"
       @keydown.down.prevent="onDown"
       @keydown.up.prevent="onUp"
       @keydown.enter.prevent="onEnter"
@@ -46,8 +44,10 @@
           :aria-controls="uid"
           aria-autocomplete="list"
           role="combobox"
+          :aria-disabled="disabled"
           :aria-expanded="open"
           autocomplete="off"
+          :disabled="disabled"
           :placeholder="label"
           v-model="filter"
           @input="onInput"
@@ -109,6 +109,7 @@ export default {
   props: {
     autoFilter: Boolean,
     autoHighlight: Boolean,
+    disabled: Boolean,
     invalidMessage: { type: String, default: undefined },
     helperText: { type: String, default: undefined },
     title: String,
@@ -209,6 +210,7 @@ export default {
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
     clearFilter() {
+      if (this.disabled) return;
       this.internalUpdateValue('');
       this.filter = '';
       this.$refs.input.focus();
@@ -280,6 +282,7 @@ export default {
       }
     },
     onInput() {
+      if (this.disabled) return;
       this.doOpen(true);
 
       this.updateOptions();
@@ -289,6 +292,7 @@ export default {
       this.open = newVal;
     },
     onDown() {
+      if (this.disabled) return;
       if (!this.open) {
         this.doOpen(true);
       } else {
@@ -296,15 +300,18 @@ export default {
       }
     },
     onUp() {
+      if (this.disabled) return;
       if (this.open) {
         this.doMove(true);
       }
     },
     onEsc() {
+      if (this.disabled) return;
       this.doOpen(false);
       this.$el.focus();
     },
     onEnter() {
+      if (this.disabled) return;
       this.doOpen(!this.open);
       if (!this.open) {
         this.onItemClick(this.highlighted);
@@ -312,6 +319,7 @@ export default {
       }
     },
     onClick() {
+      if (this.disabled) return;
       this.doOpen(!this.open);
       if (this.open) {
         this.$refs.input.focus();
@@ -340,17 +348,20 @@ export default {
       }
     },
     onItemClick(val) {
+      if (this.disabled) return;
       this.internalUpdateValue(val);
       this.$refs.input.focus();
       this.open = false; // close after user makes a selection
       this.$emit('change', this.dataValue);
     },
     inputClick() {
+      if (this.disabled) return;
       if (!this.open) {
         this.doOpen(true);
       }
     },
     inputFocus() {
+      if (this.disabled) return;
       this.doOpen(true);
     },
   },

package/src/components/cv-data-table/_cv-data-table-row-inner.vue

@@ -22,9 +22,9 @@
     </td>
     <slot />
     <td v-if="hasOverflowMenu" class="bx--table-column-menu">
-      <cv-overflow-menu flip-menu>
+      <cv-overflow-menu v-bind="overflowMenuOptions">
         <cv-overflow-menu-item
-          v-for="(item, index) in overflowMenu"
+          v-for="(item, index) in overflowMenuButtons"
           :key="`${index}`"
           @click="
             onMenuItemClick({
@@ -97,6 +97,14 @@ export default {
     isChecked() {
       return this.dataChecked;
     },
+    overflowMenuButtons() {
+      return this.overflowMenu.filter(item => typeof item === 'string');
+    },
+    overflowMenuOptions() {
+      const incomingOptions = this.overflowMenu.find(item => typeof item === 'object') || {};
+      const defaultOptions = { flipMenu: true, label: 'Row overflow menu', tipPosition: 'left' };
+      return { ...defaultOptions, ...incomingOptions };
+    },
   },
   methods: {
     checkSlots() {

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

@@ -142,7 +142,7 @@
                 :key="`cell:${colIndex}:${rowIndex}`"
                 :style="dataStyle(colIndex)"
               >
-                <cv-wrapper :tag-type="skeleton && rowIndex < 1 ? 'span' : ''">{{ cell }}</cv-wrapper>
+                <cv-wrapper :tag-type="skeleton ? 'span' : ''">{{ cell }}</cv-wrapper>
               </cv-data-table-cell>
             </cv-data-table-row>
           </slot>

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

@@ -22,9 +22,9 @@
       :class="{ 'bx--dropdown__wrapper--inline': inline, 'cv-dropdown': !formItem }"
       :style="wrapperStyleOverride"
     >
-      <span v-if="label" :id="`${uid}-label`" class="bx--label" :class="{ 'bx--label--disabled': disabled }">
-        {{ label }}
-      </span>
+      <span v-if="label" :id="`${uid}-label`" class="bx--label" :class="{ 'bx--label--disabled': disabled }">{{
+        label
+      }}</span>
 
       <div
         v-if="!inline && isHelper"
@@ -58,10 +58,12 @@
       >
         <button
           class="bx--dropdown-text"
+          :aria-disabled="disabled"
           aria-haspopup="true"
           :aria-expanded="open"
           :aria-controls="`${uid}-menu`"
-          :aria-labelledby="`${uid}-label ${uid}-value`"
+          :aria-labelledby="ariaLabeledBy"
+          :disabled="disabled"
           type="button"
         >
           <WarningFilled16 v-if="isInvalid && inline" class="bx--dropdown__invalid-icon" />
@@ -161,6 +163,13 @@ export default {
     },
   },
   computed: {
+    ariaLabeledBy() {
+      if (this.label) {
+        return `${this.uid}-label ${this.uid}-value`;
+      } else {
+        return `${this.uid}-value`;
+      }
+    },
     internalCaption() {
       if (this.selectedChild) {
         return this.selectedChild.internalContent;

package/src/components/{cv-code-snippet → cv-feedback-button}/_cv-feedback-button.vue

@@ -1,5 +1,6 @@
 <template>
   <button
+    aria-label="ariaLabel"
     type="button"
     class="cv-feedback-button"
     v-bind="$attrs"
@@ -27,6 +28,7 @@ export default {
   name: 'cvFeedbackButton',
   inheritAttrs: false,
   props: {
+    ariaLabel: { type: String, default: 'Feedback button' },
     feedback: { type: String, required: true },
     inline: Boolean,
     timeout: { type: Number, default: 2000 },

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

@@ -16,7 +16,13 @@
     @keyup.space.prevent="$emit('remove')"
   >
     <span class="bx--tag__label">{{ label }}</span>
-    <button v-if="isFilter" class="bx--tag__close-icon" :aria-label="clearAriaLabel" @click.stop.prevent="onRemove">
+    <button
+      v-if="isFilter"
+      class="bx--tag__close-icon"
+      :aria-label="clearAriaLabel"
+      @click.stop.prevent="onRemove"
+      :disabled="disabled"
+    >
       <Close16 />
     </button>
   </span>