@carbon/vue 2.30.0-canary.1 → 2.30.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.30.0-canary.1",
+  "version": "2.30.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": "22b01b43bff17f4c72f8030cc74ff4d232a6f3b6"
+  "gitHead": "a9d5f597ab1b9f4872ffba2fa250eab3fbf7b4f1"
 }

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

@@ -19,6 +19,7 @@
     @animationend="onAnimationEnd"
   >
     <button
+      ref="button"
       type="button"
       :class="`${carbonPrefix}--accordion__heading`"
       :aria-expanded="dataOpen ? 'true' : 'false'"
@@ -40,10 +41,11 @@
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
 import uidMixin from '../../mixins/uid-mixin';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvAccordionItem',
-  mixins: [uidMixin, carbonPrefixMixin],
+  mixins: [uidMixin, carbonPrefixMixin, methodsMixin({ button: ['blur', 'focus'] })],
   components: { ChevronRight16 },
   props: {
     open: { type: Boolean, default: false },

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

@@ -36,10 +36,11 @@
 import checkMixin from '../../mixins/check-mixin';
 import uidMixin from '../../mixins/uid-mixin';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvCheckbox',
-  mixins: [checkMixin, uidMixin, carbonPrefixMixin],
+  mixins: [checkMixin, uidMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
   inheritAttrs: false,
   props: {
     hideLabel: Boolean,

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

@@ -44,7 +44,10 @@
       >
         <input
           ref="input"
-          :class="[`${carbonPrefix}--text-input`]"
+          :class="[
+            `${carbonPrefix}--text-input`,
+            { [`${carbonPrefix}--text-input--empty`]: !filter || filter.length === 0 },
+          ]"
           :aria-controls="uid"
           aria-autocomplete="list"
           role="combobox"
@@ -116,11 +119,12 @@ import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
 import Close16 from '@carbon/icons-vue/es/close/16';
 import uidMixin from '../../mixins/uid-mixin';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvComboBox',
   inheritAttrs: false,
-  mixins: [themeMixin, uidMixin, carbonPrefixMixin],
+  mixins: [themeMixin, uidMixin, carbonPrefixMixin, methodsMixin({ input: ['focus', 'blur'] })],
   components: { WarningFilled16, ChevronDown16, Close16 },
   props: {
     autoFilter: Boolean,

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

@@ -112,6 +112,7 @@
 <script>
 import themeMixin from '../../mixins/theme-mixin';
 import uidMixin from '../../mixins/uid-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
 import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
@@ -119,7 +120,7 @@ import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 export default {
   name: 'CvDropdown',
   inheritAttrs: false,
-  mixins: [themeMixin, uidMixin, carbonPrefixMixin],
+  mixins: [themeMixin, uidMixin, carbonPrefixMixin, methodsMixin({ button: ['blur', 'focus'] })],
   components: { WarningFilled16, ChevronDown16 },
   props: {
     disabled: Boolean,
@@ -324,11 +325,6 @@ export default {
         }
       }
     },
-    focus() {
-      this.$nextTick(() => {
-        this.$refs.button.focus();
-      });
-    },
   },
 };
 </script>

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

@@ -14,6 +14,7 @@
         ]"
         role="button"
         tabindex="0"
+        ref="focusTarget"
         @keydown.enter.prevent="onShow()"
         @keydown.space.prevent
         @keyup.space.prevent="onShow()"
@@ -117,11 +118,12 @@ import Close16 from '@carbon/icons-vue/es/close/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 import { STATES, KINDS } from './consts.js';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvFileUploader',
   components: { CvFormItem, CheckmarkFilled16, WarningFilled16, Close16, CvWrapper },
-  mixins: [uidMixin, carbonPrefixMixin],
+  mixins: [uidMixin, carbonPrefixMixin, methodsMixin({ focusTarget: ['blur', 'focus'] })],
   inheritAttrs: false,
   props: {
     clearOnReselect: Boolean,

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

@@ -79,7 +79,10 @@
         <template v-else>
           <input
             ref="input"
-            :class="`${carbonPrefix}--text-input`"
+            :class="[
+              `${carbonPrefix}--text-input`,
+              { [`${carbonPrefix}--text-input--empty`]: !filter || filter.length === 0 },
+            ]"
             :aria-controls="uid"
             aria-autocomplete="list"
             role="combobox"
@@ -156,6 +159,7 @@ import uidMixin from '../../mixins/uid-mixin';
 import CvCheckbox from '../cv-checkbox/cv-checkbox';
 import CvTag from '../cv-tag/cv-tag';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 const TOP_AFTER_REOPEN = 0;
 const TOP = 1;
@@ -165,7 +169,7 @@ const selectionFeedbackOptions = ['top-after-reopen', 'top', 'fixed'];
 export default {
   name: 'CvMultiSelect',
   inheritAttrs: false,
-  mixins: [themeMixin, uidMixin, carbonPrefixMixin],
+  mixins: [themeMixin, uidMixin, carbonPrefixMixin, methodsMixin({ button: ['blur', 'focus'] })],
   components: { WarningFilled16, ChevronDown16, CvCheckbox, CvTag, Close16 },
   props: {
     autoFilter: Boolean,

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

@@ -90,10 +90,11 @@ import CaretUpGlyph from '@carbon/icons-vue/es/caret--up/index';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvNumberInput',
-  mixins: [uidMixin, themeMixin, carbonPrefixMixin],
+  mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
   components: { CaretDownGlyph, CaretUpGlyph, WarningFilled16, CvWrapper },
   inheritAttrs: false,
   props: {

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

@@ -69,11 +69,12 @@
 import OverflowMenuVertical16 from '@carbon/icons-vue/es/overflow-menu--vertical/16';
 import uidMixin from '../../mixins/uid-mixin';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvOverflowMenu',
   components: { OverflowMenuVertical16 },
-  mixins: [uidMixin, carbonPrefixMixin],
+  mixins: [uidMixin, carbonPrefixMixin, methodsMixin({ trigger: ['blur', 'focus'] })],
   props: {
     label: String,
     flipMenu: Boolean,

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

@@ -27,11 +27,12 @@
 import uidMixin from '../../mixins/uid-mixin';
 import radioMixin from '../../mixins/radio-mixin';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvRadioButton',
   inheritAttrs: false,
-  mixins: [uidMixin, radioMixin, carbonPrefixMixin],
+  mixins: [uidMixin, radioMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
   props: {
     labelLeft: Boolean,
   },

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

@@ -62,10 +62,11 @@ import Search20 from '@carbon/icons-vue/es/search/20';
 import Close16 from '@carbon/icons-vue/es/close/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvSearch',
-  mixins: [uidMixin, themeMixin, carbonPrefixMixin],
+  mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
   components: { Close16, CvWrapper },
   inheritAttrs: false,
   props: {

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

@@ -62,12 +62,13 @@ import CvWrapper from '../cv-wrapper/_cv-wrapper';
 import ChevronDownGlyph from '@carbon/icons-vue/es/chevron--down';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvSelect',
   inheritAttrs: false,
   components: { CvWrapper, ChevronDownGlyph, WarningFilled16 },
-  mixins: [uidMixin, themeMixin, carbonPrefixMixin],
+  mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ select: ['blur', 'focus'] })],
   props: {
     inline: Boolean,
     invalidMessage: { type: String, default: undefined },

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

@@ -59,10 +59,11 @@
 import uidMixin from '../../mixins/uid-mixin';
 import themeMixin from '../../mixins/theme-mixin';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvSlider',
-  mixins: [uidMixin, themeMixin, carbonPrefixMixin],
+  mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ thumb: ['blur', 'focus'] })],
   props: {
     disabled: Boolean,
     label: String,

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

@@ -45,12 +45,13 @@
 <script>
 import uidMixin from '../../mixins/uid-mixin';
 import themeMixin from '../../mixins/theme-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvTextArea',
-  mixins: [uidMixin, themeMixin, carbonPrefixMixin],
+  mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ textarea: ['blur', 'focus'] })],
   inheritAttrs: false,
   components: { WarningFilled16 },
   props: {
@@ -88,11 +89,6 @@ export default {
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
-    focus() {
-      this.$nextTick(() => {
-        this.$refs.textarea.focus();
-      });
-    },
   },
 };
 </script>

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

@@ -63,6 +63,7 @@
 <script>
 import uidMixin from '../../mixins/uid-mixin';
 import themeMixin from '../../mixins/theme-mixin';
+import methodsMixin from '../../mixins/methods-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';
@@ -71,7 +72,7 @@ import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 export default {
   name: 'CvTextInput',
   components: { WarningFilled16, View16, ViewOff16 },
-  mixins: [uidMixin, themeMixin, carbonPrefixMixin],
+  mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
   inheritAttrs: false,
   props: {
     helperText: { type: String, default: undefined },
@@ -143,11 +144,6 @@ export default {
         this.$refs.input.value = currentValue;
       });
     },
-    focus() {
-      this.$nextTick(() => {
-        this.$refs.input.focus();
-      });
-    },
   },
 };
 </script>

package/src/components/cv-tile/_cv-tile-clickable.vue

@@ -3,6 +3,7 @@
     :is="tagType"
     v-on="$listeners"
     v-bind="linkProps"
+    ref="target"
     data-tile="clickable"
     :class="`cv-tile-clickable ${carbonPrefix}--tile--clickable`"
     tabindex="0"
@@ -14,9 +15,10 @@
 <script>
 import LinkMixin from '../../mixins/link-mixin';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvTileClickable',
-  mixins: [LinkMixin, carbonPrefixMixin],
+  mixins: [LinkMixin, carbonPrefixMixin, methodsMixin({ target: ['blur', 'focus'] })],
 };
 </script>

package/src/components/cv-tile/_cv-tile-expandable.vue

@@ -5,6 +5,7 @@
       `cv-tile-expandable ${carbonPrefix}--tile--expandable`,
       { [`${carbonPrefix}--tile--is-expanded`]: internalExpanded },
     ]"
+    ref="target"
     tabindex="0"
     :style="styleObject"
     @click="toggle"
@@ -37,10 +38,11 @@
 <script>
 import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvTileExpandable',
-  mixins: [carbonPrefixMixin],
+  mixins: [carbonPrefixMixin, methodsMixin({ target: ['blur', 'focus'] })],
   props: {
     expanded: Boolean,
   },

package/src/components/cv-tile/_cv-tile-selectable.vue

@@ -10,6 +10,7 @@
     data-tile="selectable"
     tabindex="0"
     :data-contained-checkbox-state="isChecked"
+    ref="target"
   >
     <input
       tabindex="-1"
@@ -37,10 +38,11 @@ import uidMixin from '../../mixins/uid-mixin';
 import checkMixin from '../../mixins/check-mixin';
 import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvTileSelectable',
-  mixins: [uidMixin, checkMixin, carbonPrefixMixin],
+  mixins: [uidMixin, checkMixin, carbonPrefixMixin, methodsMixin({ target: ['blur', 'focus'] })],
   components: { CheckmarkFilled16 },
   inheritAttrs: false,
   props: {

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

@@ -6,6 +6,7 @@
     :expanded="expanded"
     v-bind="$attrs"
     v-on="$listeners"
+    ref="tile"
   >
     <!-- can i now click on this -->
     <template>
@@ -24,6 +25,7 @@ import CvTileExpandable from './_cv-tile-expandable';
 import CvTileSelectable from './_cv-tile-selectable';
 import CvTileStandard from './_cv-tile-standard';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvTile',
@@ -33,7 +35,7 @@ export default {
     prop: 'modelValue',
     event: 'modelEvent',
   },
-  mixins: [themeMixin, carbonPrefixMixin],
+  mixins: [themeMixin, carbonPrefixMixin, methodsMixin({ tile: ['blur', 'focus'] })],
   components: {
     CvTileClickable,
     CvTileExpandable,
@@ -63,5 +65,17 @@ export default {
       }
     },
   },
+  // methods: {
+  //   focus() {
+  //     if (this.$children[0].focus) {
+  //       this.$children[0].focus();
+  //     }
+  //   },
+  //   blur() {
+  //     if (this.$children[0].blur) {
+  //       this.$children[0].blur();
+  //     }
+  //   },
+  // },
 };
 </script>

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

@@ -7,6 +7,7 @@
       <div :class="`${carbonPrefix}--time-picker__input`">
         <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
         <input
+          ref="input"
           :id="uid"
           type="text"
           :class="[
@@ -68,6 +69,7 @@ import themeMixin from '../../mixins/theme-mixin';
 import CvSelect from '../cv-select/cv-select';
 import CvSelectOption from '../cv-select/cv-select-option';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvTimePicker',
@@ -75,7 +77,7 @@ export default {
     CvSelect,
     CvSelectOption,
   },
-  mixins: [uidMixin, themeMixin, carbonPrefixMixin],
+  mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
   inheritAttrs: false,
   props: {
     ampm: {

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

@@ -9,6 +9,7 @@
       :checked="isChecked === true"
       :aria-checked="`${isChecked}`"
       :value="value"
+      ref="input"
     />
     <label :class="`${carbonPrefix}--toggle-input__label`" :for="uid" :aria-label="hiddenLabel">
       {{ visibleLabel }}
@@ -31,10 +32,11 @@
 import uidMixin from '../../mixins/uid-mixin';
 import checkMixin from '../../mixins/check-mixin';
 import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import methodsMixin from '../../mixins/methods-mixin';
 
 export default {
   name: 'CvToggle',
-  mixins: [uidMixin, checkMixin, carbonPrefixMixin],
+  mixins: [uidMixin, checkMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
   inheritAttrs: false,
   props: {
     small: Boolean,

package/src/mixins/methods-mixin.js

@@ -0,0 +1,18 @@
+const methodsMixin = methodDefs => {
+  const methods = {};
+  const keys = Object.keys(methodDefs);
+
+  for (let key of keys) {
+    for (let method of methodDefs[key]) {
+      methods[method] = function(...args) {
+        this.$refs[key][method](...args);
+      };
+    }
+  }
+
+  return {
+    methods: methods,
+  };
+};
+
+export default methodsMixin;