@carbon/vue 2.45.0 → 3.0.4-alpha.0

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

@@ -1,362 +0,0 @@
-<template>
-  <cv-wrapper :tag-type="formItem ? 'div' : ''" :class="`cv-date-picker ${carbonPrefix}--form-item`" :id="uid">
-    <div
-      :data-date-picker="['single', 'range'].includes(kind)"
-      :data-date-picker-type="kind"
-      :class="[
-        `${this.carbonPrefix}--date-picker ${this.carbonPrefix}--date-picker--${this.kind}`,
-        {
-          [`${carbonPrefix}--date-picker--simple`]: this.kind === 'short',
-          [`${carbonPrefix}--date-picker--light`]: isLight,
-          'cv-date-pciker': !formItem,
-        },
-      ]"
-      ref="date-picker"
-      :id="formItem ? undefined : uid"
-    >
-      <div
-        :class="{
-          [`${carbonPrefix}--date-picker-container`]: ['single', 'range'].includes(kind),
-          [`${carbonPrefix}--date-picker--nolabel`]: getDateLabel !== undefined,
-        }"
-        @change="onChange"
-      >
-        <label v-if="getDateLabel.length > 0" :for="`${uid}-input-1`" :class="`${carbonPrefix}--label`">
-          {{ getDateLabel }}
-        </label>
-        <div :class="`${carbonPrefix}--date-picker-input__wrapper`">
-          <input
-            :data-invalid="isInvalid"
-            type="text"
-            :id="`${uid}-input-1`"
-            :class="`${carbonPrefix}--date-picker__input`"
-            :pattern="pattern"
-            :placeholder="placeholder"
-            data-date-picker-input
-            :data-date-picker-input-from="kind === 'range'"
-            ref="date"
-          />
-          <Calendar16
-            v-if="['single', 'range'].includes(kind)"
-            :class="`${carbonPrefix}--date-picker__icon`"
-            data-date-picker-icon
-            @click="cal.open()"
-          />
-        </div>
-        <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
-          <slot name="invalid-message">{{ invalidMessage || invalidDateMessage }}</slot>
-        </div>
-      </div>
-      <div :class="{ [`${carbonPrefix}--date-picker-container`]: kind === 'range' }" v-if="kind === 'range'">
-        <label v-if="getDateEndLabel.length > 0" :for="`${uid}-input-2`" :class="`${carbonPrefix}--label`">
-          {{ getDateEndLabel }}
-        </label>
-        <div :class="`${carbonPrefix}--date-picker-input__wrapper`">
-          <input
-            type="text"
-            :id="`${uid}-input-2`"
-            :class="`${carbonPrefix}--date-picker__input`"
-            :pattern="pattern"
-            :placeholder="placeholder"
-            data-date-picker-input
-            :data-date-picker-input-to="kind === 'range'"
-            ref="todate"
-          />
-          <Calendar16 :class="`${carbonPrefix}--date-picker__icon`" data-date-picker-icon @click="openTodateCal()" />
-        </div>
-      </div>
-    </div>
-  </cv-wrapper>
-</template>
-
-<script>
-import Flatpickr from 'flatpickr';
-import l10n from 'flatpickr/dist/l10n/index';
-// 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';
-
-export default {
-  name: 'CvDatePicker',
-  mixins: [uidMixin, themeMixin, carbonPrefixMixin],
-  components: { Calendar16, CvWrapper },
-  props: {
-    dateLabel: { type: String, default: undefined },
-    dateEndLabel: { type: String, default: undefined },
-    formItem: { type: Boolean, default: true },
-    kind: {
-      type: String,
-      default: 'simple',
-      validator: val => ['short', 'simple', 'single', 'range'].includes(val),
-    },
-    calOptions: {
-      type: Object,
-      default: () => {
-        return {
-          dateFormat: 'm/d/Y',
-        };
-      },
-    },
-    pattern: { type: String, default: '\\d{1,2}/\\d{1,2}/\\d{4}' },
-    placeholder: { type: String, default: 'mm/dd/yyyy' },
-    invalid: /* deprecate */ {
-      type: Boolean,
-      default: undefined,
-      validator(val) {
-        if (val !== undefined && process.env.NODE_ENV === 'development') {
-          console.warn('CvDatePicker: invalid prop deprecated in favour of invalidMessage');
-        }
-        return true;
-      },
-    },
-    invalidDateMessage: /* deprecate */ {
-      type: String,
-      default: undefined,
-      validator(val) {
-        if (val !== undefined && process.env.NODE_ENV === 'development') {
-          console.warn('CvDatePicker: invalidDateMessage deprecated in favour of invalidMessage');
-        }
-        return true;
-      },
-    },
-    invalidMessage: { type: String, default: undefined },
-    value: [String, Object, Array, Date],
-  },
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
-  data() {
-    return {
-      dataValue: this.value,
-      dataOptions: {},
-      isInvalid: false,
-    };
-  },
-  watch: {
-    value() {
-      if (this.isSingle) {
-        this.cal.setDate(this.value, true);
-      } else if (this.isRange) {
-        this.cal.setDate([this.value.startDate, this.value.endDate], true);
-      } else {
-        this.$refs.date.value = this.value;
-      }
-      this.dataValue = this.value;
-    },
-    calOptions() {
-      this.initFlatpickr();
-    },
-    kind() {
-      this.initFlatpickr();
-    },
-    invalidMessage() {
-      this.checkSlots();
-    },
-  },
-  computed: {
-    getDateLabel() {
-      if (this.dateLabel !== undefined) {
-        return this.dateLabel;
-      } else {
-        if (this.isRange) {
-          return 'Start date';
-        } else {
-          return 'Date';
-        }
-      }
-    },
-    getDateEndLabel() {
-      if (this.dateEndLabel !== undefined) {
-        return this.dateEndLabel;
-      } else {
-        if (this.isRange) {
-          return 'End date';
-        } else {
-          return '';
-        }
-      }
-    },
-    isRange() {
-      return this.kind === 'range';
-    },
-    isSingle() {
-      return this.kind === 'single';
-    },
-  },
-  methods: {
-    checkSlots() {
-      // 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.invalidDateMessage && this.invalidDateMessage.length)
-      );
-    },
-    initFlatpickr() {
-      if (['single', 'range'].includes(this.kind)) {
-        // no need to call set value as it's done through getOptions
-        this.cal = new Flatpickr(this.$refs.date, this.getOptions());
-      }
-    },
-    getOptions() {
-      const _options = { ...this.calOptions };
-
-      // add events update based on parameters
-      _options.onChange = this.onChange;
-      _options.onOpen = this.onOpen;
-      _options.onReady = this.onCalReady;
-
-      // prefer value if set
-      if (this.dataValue) {
-        if (this.isRange) {
-          _options.defaultDate = [this.dataValue.startDate, this.dataValue.endDate];
-        } else {
-          _options.defaultDate = this.dataValue;
-        }
-      }
-      // _options.onValueUpdate = this.onChange;
-
-      _options.plugins = [
-        this.isRange
-          ? 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;
-    },
-    onChange() {
-      let firstDate, secondDate;
-      let dateToString = val => {
-        if (typeof val === 'number') {
-          return this.cal.formatDate(val, this.calOptions.dateFormat);
-        } else {
-          return val || '';
-        }
-      };
-
-      if (this.dataValue) {
-        if (this.isRange) {
-          firstDate = dateToString(this.dataValue.startDate);
-          secondDate = dateToString(this.dataValue.endDate);
-        } else {
-          firstDate = dateToString(this.dataValue);
-        }
-      }
-
-      if (this.isRange) {
-        if (firstDate !== this.$refs.date.value || secondDate !== this.$refs.todate.value) {
-          this.dataValue = {
-            startDate: this.$refs.date.value,
-            endDate: this.$refs.todate.value,
-          };
-          this.$emit('change', this.dataValue);
-        }
-      } else {
-        if (firstDate !== this.$refs.date.value) {
-          this.dataValue = this.$refs.date.value;
-          this.$emit('change', this.dataValue);
-
-          if (this.$listeners['simpleChange'] && process.env.NODE_ENV === 'development') {
-            console.warn('CvDatePicker: simple change event deprecated in favour of change.');
-            this.$emit('simpleChange', this.dataValue);
-          }
-        }
-      }
-    },
-    onCalReady(selectedDates, dateString, instance) {
-      const calendarContainer = instance.calendarContainer;
-      const options = {
-        classCalendarContainer: `${this.carbonPrefix}--date-picker__calendar`,
-        classMonth: `${this.carbonPrefix}--date-picker__month`,
-        classWeekdays: `${this.carbonPrefix}--date-picker__weekdays`,
-        classDays: `${this.carbonPrefix}--date-picker__days`,
-        classWeekday: `${this.carbonPrefix}--date-picker__weekday`,
-        classDay: `${this.carbonPrefix}--date-picker__day`,
-        classFocused: `${this.carbonPrefix}--focused`,
-        classVisuallyHidden: `${this.carbonPrefix}--visually-hidden`,
-      };
-
-      if (calendarContainer) {
-        calendarContainer.classList.add(options.classCalendarContainer);
-        calendarContainer.querySelector('.flatpickr-month').classList.add(options.classMonth);
-        calendarContainer.querySelector('.flatpickr-weekdays').classList.add(options.classWeekdays);
-        calendarContainer.querySelector('.flatpickr-days').classList.add(options.classDays);
-        for (const item of calendarContainer.querySelectorAll('.flatpickr-weekday')) {
-          const currentItem = item;
-          currentItem.innerHTML = currentItem.innerHTML.replace(/\s+/g, '');
-          currentItem.classList.add(options.classWeekday);
-        }
-        for (const item of calendarContainer.querySelectorAll('.flatpickr-day')) {
-          item.classList.add(options.classDay);
-          if (item.classList.contains('today') && selectedDates.length > 0) {
-            item.classList.add('no-border');
-          } else if (item.classList.contains('today') && selectedDates.length === 0) {
-            item.classList.remove('no-border');
-          }
-        }
-      }
-    },
-    openTodateCal() {
-      this.$refs.todate.click();
-    },
-  },
-  created() {
-    // Weekdays shorthand for english locale
-    l10n.en.weekdays.shorthand.forEach((day, index) => {
-      const currentDay = l10n.en.weekdays.shorthand;
-      if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
-        currentDay[index] = 'Th';
-      } else {
-        currentDay[index] = currentDay[index].charAt(0);
-      }
-    });
-  },
-  mounted() {
-    this.initFlatpickr();
-    this.checkSlots();
-    // this.cal.setDate([Date.now(), Date.now()]);
-    // setTimeout(() => {
-    //   let curDate = new Date();
-    //   let anotherDate = new Date();
-    //   anotherDate = anotherDate.setDate(anotherDate.getDate() + 16);
-    //   this.cal.setDate([curDate, anotherDate], true);
-    // }, 2000);
-  },
-  updated() {
-    this.checkSlots();
-  },
-  beforeDestroy() {
-    if (this.cal) {
-      this.cal.destroy();
-    }
-  },
-};
-</script>

package/src/components/cv-date-picker/index.js

@@ -1,3 +0,0 @@
-import CvDatePicker from './cv-date-picker';
-
-export { CvDatePicker };

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

@@ -1,52 +0,0 @@
-/**
- * @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

@@ -1,75 +0,0 @@
-/**
- * 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],
-  };
-};

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

@@ -1,66 +0,0 @@
-/*
- * COPIED FROM carbon-components-react
- */
-
-/**
- * @param {number} monthNumber The month number.
- * @param {boolean} shorthand `true` to use shorthand month.
- * @param {Locale} locale The Flatpickr locale data.
- * @returns {string} The month string.
- */
-const monthToStr = (monthNumber, shorthand, locale) => locale.months[shorthand ? 'shorthand' : 'longhand'][monthNumber];
-
-/**
- * @param {object} config Plugin configuration.
- * @param {boolean} [config.shorthand] `true` to use shorthand month.
- * @param {string} config.selectorFlatpickrMonthYearContainer The CSS selector for the container of month/year selection UI.
- * @param {string} config.selectorFlatpickrYearContainer The CSS selector for the container of year selection UI.
- * @param {string} config.selectorFlatpickrCurrentMonth The CSS selector for the text-based month selection UI.
- * @param {string} config.classFlatpickrCurrentMonth The CSS class for the text-based month selection UI.
- * @returns {Plugin} A Flatpickr plugin to use text instead of `<select>` for month picker.
- */
-export default config => fp => {
-  const setupElements = () => {
-    if (!fp.monthElements || fp.monthElements.length < 1) {
-      return;
-    }
-    fp.monthElements.forEach(elem => {
-      if (!elem.parentNode) return;
-      elem.parentNode.removeChild(elem);
-    });
-    fp.monthElements.splice(
-      0,
-      fp.monthElements.length,
-      ...fp.monthElements.map(() => {
-        // eslint-disable-next-line no-underscore-dangle
-        const monthElement = fp._createElement('span', config.classFlatpickrCurrentMonth);
-        monthElement.textContent = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
-        fp.yearElements[0]
-          .closest(config.selectorFlatpickrMonthYearContainer)
-          .insertBefore(monthElement, fp.yearElements[0].closest(config.selectorFlatpickrYearContainer));
-        return monthElement;
-      })
-    );
-  };
-
-  const updateCurrentMonth = () => {
-    const monthStr = monthToStr(fp.currentMonth, config.shorthand === true, fp.l10n);
-    fp.yearElements.forEach(elem => {
-      const currentMonthContainer = elem.closest(config.selectorFlatpickrMonthYearContainer);
-      Array.prototype.forEach.call(currentMonthContainer.querySelectorAll('.cur-month'), monthElement => {
-        monthElement.textContent = monthStr;
-      });
-    });
-  };
-
-  const register = () => {
-    fp.loadedPlugins.push('carbonFlatpickrMonthSelectPlugin');
-  };
-
-  return {
-    onMonthChange: updateCurrentMonth,
-    onValueUpdate: updateCurrentMonth,
-    onOpen: updateCurrentMonth,
-    onReady: [setupElements, updateCurrentMonth, register],
-  };
-};

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

@@ -1,45 +0,0 @@
-import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
-
-/*
- * COPIED FROM carbon-components-react
- */
-
-/**
- * @param {object} config Plugin configuration.
- * @returns {Plugin} An extension of Flatpickr `rangePlugin` that does the following:
- *   * Better ensures the calendar dropdown is always aligned to the `<input>` for the starting date.
- *     Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
- *   * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
- */
-export default config => {
-  const factory = rangePlugin(Object.assign({ position: 'left' }, config));
-
-  return fp => {
-    const origSetDate = fp.setDate;
-
-    const init = () => {
-      fp.setDate = function setDate(dates, triggerChange, format) {
-        origSetDate.call(this, dates, triggerChange, format);
-        // If `triggerChange` is `true`, `onValueUpdate` Flatpickr event is fired
-        // where Flatpickr's range plugin takes care of fixing the first `<input>`
-        if (!triggerChange) {
-          const { _input: inputFrom } = fp;
-          const { input: inputTo } = config;
-          [inputFrom, inputTo].forEach((input, i) => {
-            if (input) {
-              input.value = !dates[i] ? '' : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);
-            }
-          });
-        }
-      };
-    };
-
-    const origRangePlugin = factory(fp);
-    const { onReady: origOnReady } = origRangePlugin;
-
-    return Object.assign(origRangePlugin, {
-      onReady: [init, origOnReady],
-      onPreCalendarPosition() {},
-    });
-  };
-};

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

@@ -1,84 +0,0 @@
-<!--
-  Carbon dropdown item
-
-  Attributes:
-    value: The value for the item. Optional.
-
-  Usage:
-  See dropdown.vue
-
--->
-
-<template>
-  <li
-    data-option
-    :data-value="value"
-    :class="[
-      `cv-dropdown-item ${carbonPrefix}--dropdown-item`,
-      { [`${carbonPrefix}--dropdown--selected`]: internalSelected },
-    ]"
-    role="menuitem"
-  >
-    <a
-      :aria-checked="internalSelected"
-      :class="`${carbonPrefix}--dropdown-link`"
-      href="javascript:void(0)"
-      ref="link"
-      role="menuitemradio"
-      tabindex="-1"
-    >
-      <slot></slot>
-    </a>
-  </li>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvDropdownItem',
-  mixins: [carbonPrefixMixin],
-  props: {
-    value: {
-      type: String,
-      required: true,
-    },
-    selected: Boolean,
-  },
-  watch: {
-    selected() {
-      this.dataSelected = this.selected;
-      this.$parent.$emit('cv:selected', this);
-    },
-  },
-  data() {
-    return {
-      dataSelected: undefined,
-    };
-  },
-  mounted() {
-    this.$_CvDropdownItem = true; // for use by parent with $children
-    this.$parent.$emit('cv:mounted', this);
-  },
-  beforeDestroy() {
-    this.$parent.$emit('cv:beforeDestroy', this);
-  },
-  computed: {
-    internalSelected: {
-      get() {
-        return this.dataSelected === undefined ? this.selected : this.dataSelected === true;
-      },
-      set(val) {
-        this.dataSelected = val;
-      },
-    },
-    internalContent() {
-      return this.$refs.link.innerHTML;
-    },
-  },
-  methods: {
-    setFocus() {
-      this.$refs.link.focus();
-    },
-  },
-};
-</script>