@carbon/vue 2.33.0 → 2.34.1

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.33.0",
+  "version": "2.34.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -66,12 +66,12 @@
     "@carbon/icons-vue": "10.10.2",
     "carbon-components": "10.16.0",
     "flatpickr": "4.6.3",
-    "vue": "^2.6.11"
+    "vue": "^2.6.12"
   },
   "devDependencies": {
     "@vue/cli-service": "^3.11.0",
     "eslint-plugin-prettier": "^3.1.1",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.12"
   },
-  "gitHead": "3bd9728ebf1676a3193c76794aed1ba41c4d8be0"
+  "gitHead": "5dda51139702bbd900e288e818c948a8bc530729"
 }

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

@@ -13,7 +13,7 @@
 <script>
 import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvAccordionItemSkeleton',

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

@@ -39,10 +39,7 @@
 
 <script>
 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';
-
+import { uidMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 export default {
   name: 'CvAccordionItem',
   mixins: [uidMixin, carbonPrefixMixin, methodsMixin({ button: ['blur', 'focus'] })],

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

@@ -14,7 +14,7 @@
 <script>
 import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
 import CvAccordionItemSkeleton from './_cv-accordion-item-skeleton';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvAccordionSkeleton',

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

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvAccordion',

package/src/components/cv-breadcrumb/_cv-breadcrumb-item-skeleton.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvBreadcrumbItemSkeleton',
   mixins: [carbonPrefixMixin],

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

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvBreadcrumbItem',
   mixins: [carbonPrefixMixin],

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

@@ -8,7 +8,7 @@
 
 <script>
 import CvBreadcrumbItemSkeleton from './_cv-breadcrumb-item-skeleton';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvBreadcrumbSkeleton',

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

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvBreadcrumb',
   mixins: [carbonPrefixMixin],

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

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvButtonSet',

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

@@ -8,7 +8,7 @@
 
 <script>
 import buttonMixin from './button-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 import CvSvg from '../cv-svg/_cv-svg';
 
 export default {

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

@@ -19,7 +19,7 @@
 
 <script>
 import buttonMixin from './button-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 import CvSvg from '../cv-svg/_cv-svg';
 
 export default {

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

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvCheckboxSkeleton',
   mixins: [carbonPrefixMixin],

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

@@ -33,10 +33,7 @@
 </template>
 
 <script>
-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';
+import { checkMixin, uidMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 
 export default {
   name: 'CvCheckbox',

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

@@ -17,8 +17,7 @@
 
 <script>
 import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
-import themeMixin from '../../mixins/theme-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { themeMixin, carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvCodeSnippetInline',

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

@@ -36,8 +36,7 @@ import CvButton from '../cv-button/cv-button';
 
 import Copy16 from '@carbon/icons-vue/es/copy/16';
 import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-import themeMixin from '../../mixins/theme-mixin';
+import { carbonPrefixMixin, themeMixin } from '../../mixins';
 
 export default {
   name: 'CvCodeSnippetMultiline',

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

@@ -19,8 +19,7 @@
 </template>
 
 <script>
-import themeMixin from '../../mixins/theme-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { themeMixin, carbonPrefixMixin } from '../../mixins';
 import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
 import Copy16 from '@carbon/icons-vue/es/copy/16';
 

package/src/components/cv-code-snippet/cv-code-snippet-skeleton.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvCodeSnippetSkeleton',

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

@@ -113,13 +113,10 @@
 </template>
 
 <script>
-import themeMixin from '../../mixins/theme-mixin';
+import { themeMixin, uidMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
 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',
@@ -189,7 +186,7 @@ export default {
     this.highlighted = this.value ? this.value : this.highlight; // override highlight with value if provided
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -225,7 +222,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       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-content-switcher/cv-content-switcher-button.vue

@@ -34,9 +34,8 @@
 </template>
 
 <script>
-import uidMixin from '../../mixins/uid-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 import CvSvg from '../cv-svg/_cv-svg';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvContentSwitcherButton',

package/src/components/cv-content-switcher/cv-content-switcher.vue

@@ -6,7 +6,7 @@
 
 <script>
 import store from './cv-content-switcher-store';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 const toggleContent = (selector, on) => {
   // hide content

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

@@ -54,7 +54,7 @@ import CvCheckbox from '../cv-checkbox/cv-checkbox';
 import CvOverflowMenu from '../cv-overflow-menu/cv-overflow-menu';
 import CvOverflowMenuItem from '../cv-overflow-menu/cv-overflow-menu-item';
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvDataTableRowInner',
@@ -86,7 +86,7 @@ export default {
   mounted() {
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   watch: {
@@ -121,7 +121,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.hasOverflowMenu = !!((this.overflowMenu && this.overflowMenu.length) || this.$slots['overflow-menu']);
     },
     onChange() {

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

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'cv-data-table-action',
   mixins: [carbonPrefixMixin],

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

@@ -30,8 +30,7 @@
 import ArrowDown16 from '@carbon/icons-vue/es/arrow--down/16';
 import Arrows16 from '@carbon/icons-vue/es/arrows/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import uidMixin from '../../mixins/uid-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 
 const nextOrder = {
   ascending: 'descending',

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

@@ -30,8 +30,7 @@
 
 <script>
 import CvDataTableRowInner from './_cv-data-table-row-inner';
-import uidMixin from '../../mixins/uid-mixin';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvDataTableRow',
@@ -55,7 +54,7 @@ export default {
     },
   },
   mounted() {
-    // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+    // NOTE: this.$slots is not reactive so needs to be managed on updated
     this.dataExpandable = !!this.$slots.expandedContent;
     this.$parent.$emit('cv:mounted', this);
   },

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

@@ -42,7 +42,7 @@ export default {
   mounted() {
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -55,7 +55,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.hasBatchActions = !!this.$slots['batch-actions'];
       this.hasHelperText = !!this.$slots['helper-text'];
       this.hasActions = !!this.$slots['actions'];

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

@@ -187,12 +187,10 @@ import CvButton from '../cv-button/cv-button';
 import CvCheckbox from '../cv-checkbox/cv-checkbox';
 import CvPagination from '../cv-pagination/cv-pagination';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import uidMixin from '../../mixins/uid-mixin';
+import { uidMixin, carbonPrefixMixin } from '../../mixins';
 import Search16 from '@carbon/icons-vue/es/search/16';
 import Close16 from '@carbon/icons-vue/es/close/16';
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
-
 export default {
   name: 'CvDataTable',
   components: {
@@ -276,7 +274,7 @@ export default {
     this.updateRowsSelected();
     this.checkSlots();
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   computed: {
@@ -341,7 +339,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.hasBatchActions = !!this.$slots['batch-actions'];
       this.hasActions = !!this.$slots.actions;
       this.hasToolbar = !!(this.$slots.actions || this.$listeners.search || this.$slots['batch-actions']);

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

@@ -12,7 +12,7 @@
         },
       ]"
       ref="date-picker"
-      :id="formItem ? '' : uid"
+      :id="formItem ? undefined : uid"
     >
       <div
         :class="{
@@ -72,12 +72,14 @@
 <script>
 import Flatpickr from 'flatpickr';
 import l10n from 'flatpickr/dist/l10n/index';
-import RangePlugin from 'flatpickr/dist/plugins/rangePlugin';
-import uidMixin from '../../mixins/uid-mixin';
-import themeMixin from '../../mixins/theme-mixin';
+// import carbonFlatpickrAppendToPlugin from './plugins/appendToPlugin';
+import carbonFlatpickrFixEventsPlugin from './plugins/fixEventsPlugin';
+import carbonFlatpickrRangePlugin from './plugins/rangePlugin';
+import carbonFlatpickrMonthSelectPlugin from './plugins/monthSelectPlugin';
+
+import { uidMixin, themeMixin, carbonPrefixMixin } from '../../mixins';
 import Calendar16 from '@carbon/icons-vue/es/calendar/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 // Weekdays shorthand for english locale
 l10n.en.weekdays.shorthand.forEach((day, index) => {
@@ -133,7 +135,7 @@ export default {
       },
     },
     invalidMessage: { type: String, default: undefined },
-    value: [String, Object, Array],
+    value: [String, Object, Array, Date],
   },
   model: {
     prop: 'value',
@@ -199,7 +201,7 @@ export default {
   },
   methods: {
     checkSlots() {
-      // NOTE: this.$slots is not reactive so needs to be managed on beforeUpdate
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(
         this.$slots['invalid-message'] ||
         (this.invalidMessage && this.invalidMessage.length) ||
@@ -230,13 +232,33 @@ export default {
       }
       // _options.onValueUpdate = this.onChange;
 
-      if (this.isRange) {
-        // let curDate = new Date();
-        // let anotherDate = new Date();
-        // anotherDate = anotherDate.setDate(anotherDate.getDate() + 6);
-        // _options.defaultDate = [curDate, anotherDate];
-        _options.plugins = [new RangePlugin({ input: this.$refs.todate, position: 'left' })];
-      }
+      _options.plugins = [
+        this.isRange
+          ? new carbonFlatpickrRangePlugin({
+              input: this.$refs.todate,
+            })
+          : () => {},
+        carbonFlatpickrMonthSelectPlugin({
+          selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',
+          selectorFlatpickrYearContainer: '.numInputWrapper',
+          selectorFlatpickrCurrentMonth: '.cur-month',
+          classFlatpickrCurrentMonth: 'cur-month',
+        }),
+        carbonFlatpickrFixEventsPlugin({
+          inputFrom: this.$refs.date,
+          inputTo: this.$refs.todate,
+        }),
+      ];
+      _options.nextArrow = `
+      <svg width="16px" height="16px" viewBox="0 0 16 16">
+        <polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/>
+        <rect width="16" height="16" style="fill:none" />
+      </svg>`;
+      _options.prevArrow = `
+      <svg width="16px" height="16px" viewBox="0 0 16 16">
+        <polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/>
+        <rect width="16" height="16" style="fill:none" />
+      </svg>`;
 
       return _options;
     },
@@ -327,7 +349,7 @@ export default {
     //   this.cal.setDate([curDate, anotherDate], true);
     // }, 2000);
   },
-  beforeUpdate() {
+  updated() {
     this.checkSlots();
   },
   beforeDestroy() {

package/src/components/cv-date-picker/plugins/appendToPlugin.js

@@ -0,0 +1,52 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * COPIED FROM carbon-components-react
+ */
+
+/**
+ * @param {object} config Plugin configuration.
+ * @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
+ */
+export default config => fp => {
+  /**
+   * Adjusts the floating meun position after Flatpicker sets it.
+   */
+  const handlePreCalendarPosition = () => {
+    Promise.resolve().then(() => {
+      const { calendarContainer, config: fpConfig, _positionElement: positionElement } = fp;
+      const { appendTo } = fpConfig;
+      const { left: containerLeft, top: containerTop } = appendTo.getBoundingClientRect();
+      const { left: refLeft, bottom: refBottom } = positionElement.getBoundingClientRect();
+      if (
+        (appendTo !== appendTo.ownerDocument.body || containerLeft !== 0 || containerTop !== 0) &&
+        appendTo.ownerDocument.defaultView.getComputedStyle(appendTo).getPropertyValue('position') === 'static'
+      ) {
+        throw new Error('Floating menu container must not have `position:static`.');
+      }
+      // `2` for negative mergin on calendar dropdown
+      calendarContainer.style.top = `${refBottom - containerTop + 2}px`;
+      calendarContainer.style.left = `${refLeft - containerLeft}px`;
+    });
+  };
+
+  /**
+   * Registers this Flatpickr plugin.
+   */
+  const register = () => {
+    fp.loadedPlugins.push('carbonFlatpickrAppendToPlugin');
+  };
+
+  return {
+    appendTo: config.appendTo,
+    onReady: register,
+    onPreCalendarPosition: handlePreCalendarPosition,
+  };
+};

package/src/components/cv-date-picker/plugins/fixEventsPlugin.js

@@ -0,0 +1,75 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+ * COPIED FROM carbon-components-react - amended to remove keyboard code dependency
+ */
+
+/**
+ * @param {object} config Plugin configuration.
+ * @returns {Plugin} A Flatpickr plugin to fix Flatpickr's behavior of certain events.
+ */
+export default config => fp => {
+  /**
+   * Handles `keydown` event.
+   */
+  const handleKeydown = event => {
+    const { inputFrom, inputTo } = config;
+    const { target } = event;
+    if (inputFrom === target || inputTo === target) {
+      if (event.key === 'Enter') {
+        // Makes sure the hitting enter key picks up pending values of both `<input>`
+        // Workaround for: https://github.com/flatpickr/flatpickr/issues/1942
+        fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
+        event.stopPropagation();
+      } else if (event.key === 'Left' || event.key === 'Right') {
+        // Prevents Flatpickr code from canceling the event if left/right arrow keys are hit on `<input>`,
+        // so user can move the keyboard cursor for editing dates
+        // Workaround for: https://github.com/flatpickr/flatpickr/issues/1943
+        event.stopPropagation();
+      } else if (event.key === 'Down') {
+        event.preventDefault();
+        fp.open();
+      }
+    }
+  };
+
+  /**
+   * Releases event listeners used in this Flatpickr plugin.
+   */
+  const release = () => {
+    const { inputFrom, inputTo } = config;
+    if (inputTo) {
+      inputTo.removeEventListener('keydown', handleKeydown, true);
+    }
+    inputFrom.removeEventListener('keydown', handleKeydown, true);
+  };
+
+  /**
+   * Sets up event listeners used for this Flatpickr plugin.
+   */
+  const init = () => {
+    release();
+    const { inputFrom, inputTo } = config;
+    inputFrom.addEventListener('keydown', handleKeydown, true);
+    if (inputTo) {
+      inputTo.addEventListener('keydown', handleKeydown, true);
+    }
+  };
+
+  /**
+   * Registers this Flatpickr plugin.
+   */
+  const register = () => {
+    fp.loadedPlugins.push('carbonFlatpickrFixEventsPlugin');
+  };
+
+  return {
+    onReady: [register, init],
+    onDestroy: [release],
+  };
+};