@carbon/vue 2.18.0-canary.0 → 2.19.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.18.0-canary.0",
+  "version": "2.19.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": "4535ef7a894bdb3c0244eea916a3cd50a152b748"
+  "gitHead": "f18fa788d7082e80cba1bed19b0da020bc9ba346"
 }

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

@@ -47,7 +47,7 @@
           role="combobox"
           :aria-expanded="open"
           autocomplete="off"
-          placeholder="Filter"
+          :placeholder="label"
           v-model="filter"
           @input="onInput"
           @focus="inputFocus"
@@ -138,6 +138,8 @@ export default {
       dataValue: this.value,
       dataHighlighted: null,
       dataFilter: null,
+      isHelper: false,
+      isInvalid: false,
     };
   },
   model: {
@@ -163,17 +165,12 @@ export default {
   mounted() {
     this.filter = this.value;
     this.highlighted = this.value ? this.value : this.highlight; // override highlight with value if provided
-    console.warn(
-      `${this.$vnode.componentOptions.Ctor.extendOptions.name} - Under review. This component isn't quite ready. Hopefully no features will get broken but this cannot be guarenteed.`
-    );
+    this.checkSlots();
+  },
+  beforeUpdate() {
+    this.checkSlots();
   },
   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);
-    },
     highlighted: {
       get() {
         return this.dataHighlighted;
@@ -205,11 +202,18 @@ 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));
+    },
     clearFilter() {
+      this.internalUpdateValue('');
       this.filter = '';
       this.$refs.input.focus();
       this.doOpen(true);
       this.updateOptions();
+      this.$emit('change', this.dataValue);
     },
     checkHighlightPosition(newHiglight) {
       if (this.$refs.list && this.$refs.option) {
@@ -250,7 +254,7 @@ export default {
       }
     },
     updateOptions() {
-      if (this.autoFilter) {
+      if (this.autoFilter && this.filter) {
         const escFilter = this.filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
         const pat = new RegExp(escFilter, 'iu');
         this.dataOptions = this.options.filter(opt => pat.test(opt.label)).slice(0);

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

@@ -58,8 +58,15 @@ export default {
       dataChecked: this.checked,
       dataExpanded: this.expanded,
       dataSomeExpandingRows: this.someExpandingRows,
+      hasOverflowMenu: false,
     };
   },
+  mounted: function() {
+    this.checkSlots();
+  },
+  beforeUpdate() {
+    this.checkSlots();
+  },
   watch: {
     checked() {
       this.dataChecked = this.checked;
@@ -75,9 +82,6 @@ export default {
     isCvDataTableRow() {
       return true;
     },
-    hasOverflowMenu() {
-      return (this.overflowMenu && this.overflowMenu.length) || this.$slots['overflow-menu'];
-    },
     hasBatchActions() {
       return this.$parent.$parent.hasBatchActions;
     },
@@ -86,6 +90,10 @@ export default {
     },
   },
   methods: {
+    checkSlots() {
+      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      this.hasOverflowMenu = !!((this.overflowMenu && this.overflowMenu.length) || this.$slots['overflow-menu']);
+    },
     onChange() {
       this.$parent.$parent.onRowCheckChange(this.value, this.dataChecked);
     },

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

@@ -9,7 +9,7 @@ export default {
   name: 'cv-data-table-action',
   mounted() {
     // ensure SVG has
-    this.$el.children[0].classList.add('class="bx--toolbar-action__icon');
+    this.$el.children[0].classList.add('bx--toolbar-action__icon');
   },
 };
 </script>

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

@@ -37,7 +37,7 @@ export default {
   },
   data() {
     return {
-      dataExpandable: this.$slots.expandedContent !== undefined,
+      dataExpandable: false,
       dataSomeExpandingRows: false,
       dataExpanded: this.expanded,
     };
@@ -50,10 +50,12 @@ export default {
     },
   },
   mounted() {
+    // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+    this.dataExpandable = !!this.$slots.expandedContent;
     this.$parent.$emit('cv:mounted', this);
   },
   updated() {
-    this.dataExpandable = this.$slots.expandedContent !== undefined;
+    this.dataExpandable = !!this.$slots.expandedContent;
   },
   beforeDestroy() {
     this.$parent.$emit('cv:beforeDestroy', this);

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

@@ -1,14 +1,14 @@
 <template>
   <cv-data-table skeleton :data="data" :columns="cols" v-on="$listeners" v-bind="$attrs">
-    <template v-if="$slots['helper-text']" slot="helper-text">
+    <template v-if="hasBatchActions" slot="helper-text">
       <slot name="helper-text" />
     </template>
 
-    <template v-if="$slots['batch-actions']" slot="batch-actions">
+    <template v-if="hasBatchActions" slot="batch-actions">
       <slot name="batch-actions" />
     </template>
 
-    <template v-if="$slots.actions" slot="actions">
+    <template v-if="hasActions" slot="actions">
       <slot name="actions" />
     </template>
   </cv-data-table>
@@ -32,6 +32,19 @@ export default {
     hasExpandables: Boolean,
     rows: { type: Number, default: DEFAULTS.ROWS },
   },
+  data() {
+    return {
+      hasActions: false,
+      hasHelperText: false,
+      hasBatchActions: false,
+    };
+  },
+  mounted() {
+    this.checkSlots();
+  },
+  beforeUpdate() {
+    this.checkSlots();
+  },
   computed: {
     data() {
       return [...Array(Math.max(this.rows, 1))].map(item => Array(this.cols.length).fill(''));
@@ -40,5 +53,13 @@ export default {
       return typeof this.columns !== 'number' ? this.columns : Array(Math.max(this.columns, 1)).fill('');
     },
   },
+  methods: {
+    checkSlots() {
+      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      this.hasBatchActions = !!this.$slots['batch-actions'];
+      this.hasHelperText = !!this.$slots['helper-text'];
+      this.hasActions = !!this.$slots['actions'];
+    },
+  },
 };
 </script>

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

@@ -32,7 +32,7 @@
           </div>
         </div>
 
-        <div v-if="($slots.actions || $listeners.search) && !batchActive" class="bx--toolbar-content">
+        <div v-if="(hasActions || $listeners.search) && !batchActive" class="bx--toolbar-content">
           <div
             v-if="$listeners.search"
             :class="{
@@ -235,6 +235,10 @@ export default {
             order: 'none',
           }))
         : this.columns,
+      hasBatchActions: false,
+      hasActions: false,
+      hasToolbar: false,
+      isHelper: false,
       batchActive: false,
       headingChecked: false,
       dataRowsSelected: this.rowsSelected,
@@ -263,17 +267,16 @@ export default {
   },
   mounted() {
     this.updateRowsSelected();
+    this.checkSlots();
+  },
+  beforeUpdate() {
+    this.checkSlots();
   },
   computed: {
-    hasBatchActions() {
-      return this.$slots['batch-actions'];
-    },
     hasTableHeader() {
       return this.title || this.isHelper;
     },
-    hasToolbar() {
-      return this.$slots.actions || this.$listeners.search || this.$slots['batch-actions'];
-    },
+
     hasExpandables() {
       return this.registeredRows.some(item => item.expandable);
     },
@@ -317,11 +320,15 @@ export default {
     selectedRows() {
       return this.dataRowsSelected;
     },
-    isHelper() {
-      return this.$slots['helper-text'] !== undefined || (this.helperText && this.helperText.length);
-    },
   },
   methods: {
+    checkSlots() {
+      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      this.hasBatchActions = !!this.$slots['batch-actions'];
+      this.hasActions = !!this.$slots.actions;
+      this.hasToolbar = !!(this.$slots.actions || this.$listeners.search || this.$slots['batch-actions']);
+      this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
+    },
     onCvMount(row) {
       this.registeredRows.push(row);
       row.$on('cv:expanded-change', this.onCvExpandedChange);

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

@@ -130,6 +130,7 @@ export default {
     return {
       dataValue: '',
       dataOptions: {},
+      isInvalid: false,
     };
   },
   watch: {
@@ -178,13 +179,6 @@ export default {
         }
       }
     },
-    isInvalid() {
-      return (
-        this.$slots['invalid-message'] !== undefined ||
-        (this.invalidMessage && this.invalidMessage.length) ||
-        (this.invalidDateMessage && this.invalidDateMessage.length)
-      );
-    },
     isRange() {
       return this.kind === 'range';
     },
@@ -193,6 +187,14 @@ 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.invalidDateMessage && this.invalidDateMessage.length)
+      );
+    },
     initFlatpickr() {
       if (['single', 'range'].includes(this.kind)) {
         // no need to call set value as it's done through getOptions
@@ -300,6 +302,7 @@ export default {
   },
   mounted() {
     this.initFlatpickr();
+    this.checkSlots();
     // this.cal.setDate([Date.now(), Date.now()]);
     // setTimeout(() => {
     //   let curDate = new Date();
@@ -308,6 +311,9 @@ export default {
     //   this.cal.setDate([curDate, anotherDate], true);
     // }, 2000);
   },
+  beforeUpdate() {
+    this.checkSlots();
+  },
   beforeDestroy() {
     if (this.cal) {
       this.cal.destroy();

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

@@ -122,6 +122,8 @@ export default {
     return {
       open: false,
       dataValue: this.value,
+      isHelper: false,
+      isInvalid: false,
     };
   },
   created() {
@@ -136,6 +138,10 @@ export default {
       }
     });
     this.internalValue = this.internalValue; // forces update of value
+    this.checkSlots();
+  },
+  beforeUpdate() {
+    this.checkSlots();
   },
   model: {
     prop: 'value',
@@ -147,12 +153,6 @@ export default {
     },
   },
   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);
-    },
     internalValue: {
       get() {
         return this.dataValue;
@@ -198,6 +198,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));
+    },
     onCvMount(srcComponent) {
       if (srcComponent.internalSelected) {
         this.internalValue = srcComponent.value;

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

@@ -20,7 +20,7 @@
         @focus="focusBeforeContent"
       />
       <div class="bx--modal-header">
-        <h4 class="bx--modal-header__label" v-if="$slots.label">
+        <h4 class="bx--modal-header__label" v-if="hasHeaderLabel">
           <slot name="label">label (Optional)</slot>
         </h4>
         <h2 class="bx--modal-header__heading">
@@ -41,13 +41,7 @@
       </div>
 
       <div class="bx--modal-footer" v-if="hasFooter">
-        <cv-button
-          type="button"
-          :kind="secondaryKind"
-          @click="onSecondaryClick"
-          v-if="this.$slots['secondary-button']"
-          ref="secondary"
-        >
+        <cv-button type="button" :kind="secondaryKind" @click="onSecondaryClick" v-if="hasSecondary" ref="secondary">
           <slot name="secondary-button">Secondary button</slot>
         </cv-button>
         <cv-button
@@ -55,7 +49,7 @@
           type="button"
           :kind="primaryKind"
           @click="onPrimaryClick"
-          v-if="this.$slots['primary-button']"
+          v-if="hasPrimary"
           ref="primary"
         >
           <slot name="primary-button">Primary button</slot>
@@ -98,12 +92,20 @@ export default {
     return {
       dataVisible: false,
       scrollable: false,
+      hasFooter: false,
+      hasHeaderLabel: false,
+      hasPrimary: false,
+      hasSecondary: false,
     };
   },
   mounted() {
     if (this.visible) {
       this.show();
     }
+    this.checkSlots();
+  },
+  beforeUpdate() {
+    this.checkSlots();
   },
   watch: {
     visible(val) {
@@ -125,15 +127,19 @@ export default {
     secondaryKind() {
       return 'secondary';
     },
-    hasFooter() {
-      return this.$slots['primary-button'] || this.$slots['secondary-button'];
-    },
   },
   model: {
     event: 'modelEvent',
     prop: 'visible',
   },
   methods: {
+    checkSlots() {
+      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      this.hasFooter = !!(this.$slots['primary-button'] || this.$slots['secondary-button']);
+      this.hasHeaderLabel = !!this.$slots.label;
+      this.hasSecondary = !!this.$slots['secondary-button'];
+      this.hasPrimary = !!this.$slots['primary-button'];
+    },
     focusBeforeContent() {
       if (this.$slots['primary-button']) {
         this.$refs.primary.$el.focus();

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

@@ -37,6 +37,7 @@
       @keydown.up.prevent="onUp"
       @keydown.enter.prevent="onEnter"
       @keydown.esc.prevent="onEsc"
+      @keydown="otherKey"
       @click="onClick"
     >
       <WarningFilled16 v-if="isInvalid" class="bx--list-box__invalid-icon" />
@@ -199,6 +200,8 @@ export default {
       dataValue: '',
       dataHighlighted: null,
       dataFilter: '',
+      isHelper: false,
+      isInvalid: false,
     };
   },
   model: {
@@ -225,17 +228,12 @@ export default {
   },
   mounted() {
     this.highlighted = this.value ? this.value : this.highlight; // override highlight with value if provided
-    console.warn(
-      `${this.$vnode.componentOptions.Ctor.extendOptions.name} - Under review. This component isn't quite ready. Hopefully no features will get broken but this cannot be guarenteed.`
-    );
+    this.checkSlots();
+  },
+  beforeUpdate() {
+    this.checkSlots();
   },
   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);
-    },
     highlighted: {
       get() {
         return this.dataHighlighted;
@@ -271,6 +269,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));
+    },
     clearFilter() {
       this.filter = '';
       this.$refs.input.focus();
@@ -399,8 +402,16 @@ export default {
       if (this.disabled) {
         ev.preventDefault();
       } else {
-        this.doOpen(!this.open);
-        this.inputOrButtonFocus();
+        if (this.open) {
+          this.inputOrButtonFocus();
+          // done this way round otherwise will auto open on focus.
+          this.$nextTick(() => {
+            this.doOpen(false);
+          });
+        } else {
+          this.doOpen(true);
+          this.inputOrButtonFocus();
+        }
       }
     },
     clearValues() {
@@ -437,6 +448,11 @@ export default {
     inputFocus() {
       this.doOpen(true);
     },
+    otherKey(ev) {
+      if (!['Escape', 'ArrowUp', 'ArrowDown', 'Enter'].includes(ev.code)) {
+        console.log(ev.code);
+      }
+    },
   },
 };
 </script>

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

@@ -78,8 +78,16 @@ export default {
   data() {
     return {
       internalValue: this.valueAsString(this.value),
+      isHelper: false,
+      isInvalid: false,
     };
   },
+  mounted() {
+    this.checkSlots();
+  },
+  beforeUpdate() {
+    this.checkSlots();
+  },
   watch: {
     value() {
       this.internalValue = this.valueAsString(this.value);
@@ -102,14 +110,13 @@ export default {
       }
       return intVal;
     },
-    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: {
+    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));
+    },
     doUp() {
       this.internalValue = `${this.internalIntValue + 1}`;
       this.emitValue();

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

@@ -15,7 +15,9 @@
       v-on="$listeners"
       @click="onClick"
     >
-      <slot></slot>
+      <span class="bx--overflow-menu-options__option-content">
+        <slot></slot>
+      </span>
     </button>
   </li>
 </template>

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

@@ -92,7 +92,11 @@ export default {
     delete this.$attrs.multiple;
   },
   data() {
-    return { dataValue: undefined };
+    return {
+      dataValue: undefined,
+      isHelper: false,
+      isInvalid: false,
+    };
   },
   mounted() {
     // this is needed to ensure selected for an option when no value is supplied
@@ -104,6 +108,10 @@ export default {
         }
       }
     }
+    this.checkSlots();
+  },
+  beforeUpdate() {
+    this.checkSlots();
   },
   watch: {
     value() {
@@ -128,15 +136,16 @@ 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'] !== undefined || (this.helperText && this.helperText.length);
-    },
     internalValue() {
       return this.dataValue ? this.dataValue : this.value;
     },
   },
+  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));
+    },
+  },
 };
 </script>