@carbon/vue 1.0.2 → 1.1.3

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

@@ -24,12 +24,10 @@ const toggleContent = (selector, on) => {
 export default {
   name: 'CvContentSwitcher',
   created() {
-    // add these on created otherwise cv:mounted is too early.
+    // add these on created otherwise cv:mounted is too late.
     this.$on('cv:open', srcComponent => this.onCvOpen(srcComponent));
     this.$on('cv:mounted', srcComponent => this.onCvMount(srcComponent));
-    this.$on('cv:beforeDestroy', srcComponent =>
-      this.onCvBeforeDestroy(srcComponent)
-    );
+    this.$on('cv:beforeDestroy', srcComponent => this.onCvBeforeDestroy(srcComponent));
   },
   data() {
     return {
@@ -92,12 +90,7 @@ export default {
       }
     },
     onCvOpen(srcComponent) {
-      this.$emit(
-        'selected',
-        srcComponent.ownerId
-          ? srcComponent.ownerId
-          : srcComponent.contentSelector
-      );
+      this.$emit('selected', srcComponent.ownerId ? srcComponent.ownerId : srcComponent.contentSelector);
       this.processState(srcComponent, true);
     },
   },

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

@@ -1,13 +1,7 @@
 <template>
   <tr>
     <td v-if="hasBatchActions">
-      <cv-checkbox
-        :form-item="false"
-        :value="value"
-        v-model="dataChecked"
-        @change="onChange"
-        ref="rowChecked"
-      />
+      <cv-checkbox :form-item="false" :value="value" v-model="dataChecked" @change="onChange" ref="rowChecked" />
     </td>
     <slot />
     <td v-if="hasOverflowMenu">
@@ -30,8 +24,15 @@
 </template>
 
 <script>
+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 uidMixin from '../../mixins/uid-mixin';
+
 export default {
   name: 'CvDataTableRow',
+  components: { CvCheckbox, CvOverflowMenu, CvOverflowMenuItem },
+  mixins: [uidMixin],
   props: {
     checked: Boolean,
     overflowMenu: Array,
@@ -51,15 +52,18 @@ export default {
       dataChecked: this.checked,
     };
   },
+  mounted() {
+    this.$parent.$emit('cv:mounted', this);
+  },
+  beforeDestroy() {
+    this.$parent.$emit('cv:beforeDestroy', this);
+  },
   computed: {
     isCvDataTableRow() {
       return true;
     },
     hasOverflowMenu() {
-      return (
-        (this.overflowMenu && this.overflowMenu.length) ||
-        this.$slots['overflow-menu']
-      );
+      return (this.overflowMenu && this.overflowMenu.length) || this.$slots['overflow-menu'];
     },
     hasBatchActions() {
       return this.$parent.hasBatchActions;

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

@@ -19,9 +19,7 @@
               <span data-items-selected>{{ dataRowsSelected.length }}</span>
               items selected
             </p>
-            <button class="bx--batch-summary__cancel" @click="deselect">
-              Cancel
-            </button>
+            <button class="bx--batch-summary__cancel" @click="deselect">Cancel</button>
           </div>
         </div>
 
@@ -70,7 +68,7 @@
               v-for="(row, rowIndex) in data"
               :key="`row:${rowIndex}`"
               :value="`${rowIndex}`"
-              ref="dataRowsSelected"
+              ref="dataRows"
               :overflow-menu="overflowMenu"
             >
               <cv-data-table-cell
@@ -103,6 +101,9 @@
 import CvDataTableHeadnig from './_cv-data-table-heading';
 import CvDataTableRow from './cv-data-table-row';
 import CvDataTableCell from './cv-data-table-cell';
+import CvSearch from '../cv-search/cv-search';
+import CvCheckbox from '../cv-checkbox/cv-checkbox';
+import CvPagination from '../cv-pagination/cv-pagination';
 
 const rows = children => children.filter(child => child.isCvDataTableRow);
 
@@ -112,6 +113,9 @@ export default {
     CvDataTableHeadnig,
     CvDataTableRow,
     CvDataTableCell,
+    CvSearch,
+    CvCheckbox,
+    CvPagination,
   },
   props: {
     autoWidth: Boolean,
@@ -124,8 +128,7 @@ export default {
     rowSize: {
       type: String,
       default: 'standard',
-      validator: val =>
-        ['compact', 'short', 'standard', 'tall', ''].includes(val),
+      validator: val => ['compact', 'short', 'standard', 'tall', ''].includes(val),
     },
     searchPlaceholder: { type: String, default: 'filter' },
     sortable: Boolean,
@@ -150,6 +153,7 @@ export default {
       batchActive: false,
       headingChecked: false,
       dataRowsSelected: this.rowsSelected,
+      registeredRows: [],
     };
   },
   watch: {
@@ -163,6 +167,11 @@ export default {
       this.updateRowsSelected();
     },
   },
+  created() {
+    // add these on created otherwise cv:mounted is too late.
+    this.$on('cv:mounted', srcComponent => this.onCvMount(srcComponent));
+    this.$on('cv:beforeDestroy', srcComponent => this.onCvBeforeDestroy(srcComponent));
+  },
   mounted() {
     console.warn(
       `${
@@ -176,15 +185,12 @@ export default {
       return this.$slots['batch-actions'];
     },
     hasOverflowMenu() {
-      return (
-        this.overflowMenu === true ||
-        (this.overflowMenu && this.overflowMenu.length > 0)
-      );
+      return this.overflowMenu === true || (this.overflowMenu && this.overflowMenu.length > 0);
     },
     tableStyle() {
       return this.autoWidth ? { width: 'initial' } : { width: '100%' };
     },
-    internalPangination() {
+    internalPagination() {
       if (typeof this.pagination === 'object') {
         return this.pagination;
       } else {
@@ -195,24 +201,15 @@ export default {
       return false;
     },
     internalNumberOfItems() {
-      if (
-        this.internalPagination &&
-        typeof this.internalPagination.numberOfItems === 'number'
-      ) {
-        return Math.min(
-          this.internalPagination.numberOfItems,
-          rows(this.$children).length
-        );
+      if (this.internalPagination && typeof this.internalPagination.numberOfItems === 'number') {
+        return this.internalPagination.numberOfItems;
       } else {
-        return rows(this.$children).length;
+        return this.registeredRows.length;
       }
     },
     modifierClasses() {
       const prefix = 'bx--data-table-v2--';
-      const sizeClass =
-        this.rowSize.length === 0 || this.rowSize === 'standard'
-          ? ''
-          : `${prefix}${this.rowSize} `;
+      const sizeClass = this.rowSize.length === 0 || this.rowSize === 'standard' ? '' : `${prefix}${this.rowSize} `;
       const zebraClass = this.zebra ? `${prefix}zebra ` : '';
       const borderlessClass = this.borderless ? `${prefix}no-border ` : '';
       return `${sizeClass}${zebraClass}${borderlessClass}`.trimRight();
@@ -228,6 +225,13 @@ export default {
     },
   },
   methods: {
+    onCvMount(row) {
+      this.registeredRows.push(row);
+    },
+    onCvBeforeDestroy(row) {
+      const index = this.registeredRows.findIndex(item => row.uid === item.uid);
+      this.registeredRows.slice(index, 1);
+    },
     updateRowsSelected() {
       this.dataRowsSelected = [];
       for (const i in this.$children) {
@@ -241,8 +245,7 @@ export default {
         }
       }
       this.headingChecked =
-        this.dataRowsSelected.length ===
-        this.$children.filter(item => item.isCvDataTableRow).length;
+        this.dataRowsSelected.length === this.$children.filter(item => item.isCvDataTableRow).length;
       this.batchActive = this.dataRowsSelected.length > 0;
     },
     onHeadingCheckChange() {
@@ -278,8 +281,7 @@ export default {
         modelSet.add(value);
       }
       this.dataRowsSelected = Array.from(modelSet);
-      this.headingChecked =
-        this.dataRowsSelected.length === rows(this.$children).length;
+      this.headingChecked = this.dataRowsSelected.length === rows(this.$children).length;
       this.batchActive = this.dataRowsSelected.length > 0;
 
       this.$emit('row-select-change', { value, selected: checked });

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

@@ -1,10 +1,10 @@
 <template>
-  <div class="cv-date-picker bx--form-item">
+  <cv-wrapper :tag-type="formItem ? 'div' : ''" class="cv-date-picker bx--form-item">
     <div
       :data-date-picker="['single', 'range'].includes(kind)"
       :data-date-picker-type="kind"
       class="bx--date-picker"
-      :class="[kindClasses, { 'bx--date-picker--light': theme === 'light' }]"
+      :class="[kindClasses, { 'bx--date-picker--light': theme === 'light', 'cv-date-pciker': !formItem }]"
       ref="date-picker"
     >
       <div
@@ -14,7 +14,7 @@
         @change="onSimpleChange"
       >
         <svg
-          v-if="kind === 'single'"
+          v-if="!componentsX && kind === 'single'"
           data-date-picker-icon
           class="bx--date-picker__icon"
           width="14"
@@ -27,46 +27,48 @@
             fill-rule="nonzero"
           ></path>
         </svg>
-        <label :for="`${uid}-input-1`" class="bx--label">
-          {{ getDateLabel }}
-        </label>
-        <input
-          :data-invalid="isInvalid"
-          type="text"
-          :id="`${uid}-input-1`"
-          class="bx--date-picker__input"
-          :pattern="pattern"
-          :placeholder="placeholder"
-          data-date-picker-input
-          :data-date-picker-input-from="kind === 'range'"
-          ref="date"
-        />
+        <label :for="`${uid}-input-1`" class="bx--label">{{ getDateLabel }}</label>
+        <cv-wrapper :tag-type="componentsX ? 'div' : ''" class="bx--date-picker-input__wrapper">
+          <input
+            :data-invalid="isInvalid"
+            type="text"
+            :id="`${uid}-input-1`"
+            class="bx--date-picker__input"
+            :pattern="pattern"
+            :placeholder="placeholder"
+            data-date-picker-input
+            :data-date-picker-input-from="kind === 'range'"
+            ref="date"
+          />
+          <Calendar16
+            v-if="componentsX && ['single', 'range'].includes(kind)"
+            class="bx--date-picker__icon"
+            data-date-picker-icon
+            @click="cal.open()"
+          />
+        </cv-wrapper>
         <div class="bx--form-requirement" v-if="isInvalid">
-          <slot name="invalid-message">
-            {{ invalidMessage || invalidDateMessage }}
-          </slot>
+          <slot name="invalid-message">{{ invalidMessage || invalidDateMessage }}</slot>
         </div>
       </div>
-      <div
-        :class="{ 'bx--date-picker-container': kind === 'range' }"
-        v-if="kind === 'range'"
-      >
-        <label :for="`${uid}-input-2`" class="bx--label">
-          {{ getDateEndLabel }}
-        </label>
-        <input
-          type="text"
-          :id="`${uid}-input-2`"
-          class="bx--date-picker__input"
-          :pattern="pattern"
-          :placeholder="placeholder"
-          data-date-picker-input
-          :data-date-picker-input-to="kind === 'range'"
-          ref="todate"
-        />
+      <div :class="{ 'bx--date-picker-container': kind === 'range' }" v-if="kind === 'range'">
+        <label :for="`${uid}-input-2`" class="bx--label">{{ getDateEndLabel }}</label>
+        <cv-wrapper :tag-type="componentsX ? 'div' : ''" class="bx--date-picker-input__wrapper">
+          <input
+            type="text"
+            :id="`${uid}-input-2`"
+            class="bx--date-picker__input"
+            :pattern="pattern"
+            :placeholder="placeholder"
+            data-date-picker-input
+            :data-date-picker-input-to="kind === 'range'"
+            ref="todate"
+          />
+          <Calendar16 v-if="componentsX" class="bx--date-picker__icon" data-date-picker-icon @click="cal.open()" />
+        </cv-wrapper>
       </div>
       <svg
-        v-if="kind === 'range'"
+        v-if="!componentsX && kind === 'range'"
         data-date-picker-icon
         class="bx--date-picker__icon"
         width="14"
@@ -80,7 +82,7 @@
         ></path>
       </svg>
     </div>
-  </div>
+  </cv-wrapper>
 </template>
 
 <script>
@@ -89,6 +91,9 @@ 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 Calendar16 from '@carbon/icons-vue/lib/calendar/16';
+import { componentsX } from '../../internal/feature-flags';
+import CvWrapper from '../cv-wrapper/_cv-wrapper';
 
 // Weekdays shorthand for english locale
 l10n.en.weekdays.shorthand.forEach((day, index) => {
@@ -103,9 +108,11 @@ l10n.en.weekdays.shorthand.forEach((day, index) => {
 export default {
   name: 'CvDatePicker',
   mixins: [uidMixin, themeMixin],
+  components: { Calendar16, CvWrapper },
   props: {
     dateLabel: String,
     dateEndLabel: String,
+    formItem: { type: Boolean, default: true },
     kind: {
       type: String,
       default: 'simple',
@@ -126,9 +133,7 @@ export default {
       default: undefined,
       validator(val) {
         if (val !== undefined) {
-          console.warn(
-            'CvDatePicker: invalid prop deprecated in favour of invalidMessage'
-          );
+          console.warn('CvDatePicker: invalid prop deprecated in favour of invalidMessage');
         }
         return true;
       },
@@ -138,15 +143,16 @@ export default {
       default: null,
       validator(val) {
         if (val !== null) {
-          console.warn(
-            'CvDatePicker: invalidDateMessage deprecated in favour of invalidMessage'
-          );
+          console.warn('CvDatePicker: invalidDateMessage deprecated in favour of invalidMessage');
         }
         return true;
       },
     },
     invalidMessage: { type: String, default: null },
   },
+  data() {
+    return { componentsX };
+  },
   computed: {
     kindClasses() {
       if (this.kind === 'short') {
@@ -181,7 +187,7 @@ export default {
 
       // add events update based on parameters
       _options.onChange = this.onChange;
-      _options.onValueUpdate = this.onChange;
+      // _options.onValueUpdate = this.onChange;
 
       if (this.kind === 'range') {
         _options.plugins = [new RangePlugin({ input: this.$refs.todate })];
@@ -191,7 +197,7 @@ export default {
     },
     isInvalid() {
       return (
-        this.$slots['invalid-message'] ||
+        this.$slots['invalid-message'] !== undefined ||
         (this.invalidMessage && this.invalidMessage.length) ||
         (this.invalidDateMessage && this.invalidDateMessage.length)
       );

package/src/components/cv-dropdown/_cv-dropdown-inner-c10.vue

@@ -0,0 +1,226 @@
+<!--
+  Carbon Style Dropdown
+
+  Attributes:
+    placeholder: Placeholder text displayed before any  selection is made.
+
+  Usage:
+    <cv-dropdown placeholder="Choose an option">
+      <cv-dropdown-item value="10">Option 1</cv-dropdown-item>
+      <cv-dropdown-item value="20">Option 2</cv-dropdown-item>
+      <cv-dropdown-item value="30">Option 3</cv-dropdown-item>
+      <cv-dropdown-item value="40">Option 4</cv-dropdown-item>
+      <cv-dropdown-item value="50">Option 5</cv-dropdown-item>
+    </cv-dropdown>
+
+-->
+
+<template>
+  <cv-wrapper :tag-type="formItem ? 'div' : ''" class="cv-dropdown bx--form-item">
+    <div class="bx--dropdown__wrapper" :class="{ 'bx--dropdown__wrapper--inline': inline, 'cv-dropdown': !formItem }">
+      <label :for="uid" class="bx--label" :class="{ 'bx--label--disabled': $attrs.disabled }">{{ label }}</label>
+
+      <div
+        v-if="!inline && isHelper"
+        class="bx--form__helper-text"
+        :class="{ 'bx--form__helper-text--disabled': $attrs.disabled }"
+      >
+        <slot name="helper-text">{{ helperText }}</slot>
+      </div>
+
+      <ul
+        data-dropdown
+        :data-value="internalValue"
+        :data-invalid="isInvalid"
+        class="bx--dropdown"
+        tabindex="0"
+        :class="{
+          'bx--dropdown--light': theme === 'light',
+          'bx--dropdown--up': up,
+          'bx--dropdown--open': open,
+          'bx--dropdown--invalid': isInvalid,
+          'bx--dropdown--disabled': $attrs.disabled,
+        }"
+        v-bind="$attrs"
+        @keydown.down.prevent="onDown"
+        @keydown.up.prevent="onUp"
+        @keydown.enter.prevent="onClick"
+        @keydown.esc.prevent="onEsc"
+        @click="onClick"
+      >
+        <WarningFilled16 v-if="isInvalid" class="bx--dropdown__invalid-icon" />
+        <li v-if="inline" class="bx--dropdown-text" ref="valueContent">
+          <span class="bx--dropdown-text__inner">{{ placeholder }}</span>
+          <chevron-down-16 class="bx--dropdown__arrow" />
+        </li>
+        <template v-else>
+          <li class="bx--dropdown-text" ref="valueContent">{{ placeholder }}</li>
+          <li class="bx--dropdown__arrow-container">
+            <chevron-down-16 class="bx--dropdown__arrow" />
+          </li>
+        </template>
+
+        <li>
+          <ul class="bx--dropdown-list">
+            <slot></slot>
+          </ul>
+        </li>
+      </ul>
+      <div v-if="isInvalid" class="bx--form-requirement">
+        <slot name="invalid-message">{{ invalidMessage }}</slot>
+      </div>
+    </div>
+    <div v-if="isInvalid" class="bx--form-requirement">
+      <slot name="invalid-message">{{ invalidMessage }}</slot>
+    </div>
+  </cv-wrapper>
+</template>
+
+<script>
+import uidMixin from '../../mixins/uid-mixin';
+import themeMixin from '../../mixins/theme-mixin';
+import WarningFilled16 from '@carbon/icons-vue/lib/warning--filled/16';
+import ChevronDown16 from '@carbon/icons-vue/lib/chevron--down/16';
+import CvWrapper from '../cv-wrapper/_cv-wrapper';
+
+export default {
+  name: 'CvDropdownInner',
+  inheritAttrs: false,
+  mixins: [uidMixin, themeMixin],
+  components: { WarningFilled16, ChevronDown16, CvWrapper },
+  props: {
+    formItem: { type: Boolean, default: true },
+    inline: Boolean,
+    invalidMessage: { type: String, default: null },
+    helperText: { type: String, default: null },
+    label: String,
+    placeholder: {
+      type: String,
+      default: 'Choose an option',
+    },
+    up: Boolean,
+    value: String, // initial value of the dropdown,
+  },
+  data() {
+    return {
+      open: false,
+      dataValue: this.value,
+    };
+  },
+  mounted() {
+    console.dir(this.$attrs);
+    this.$el.addEventListener('focusout', ev => {
+      if (ev.relatedTarget === null || !this.$el.contains(ev.relatedTarget)) {
+        this.open = false;
+      }
+    });
+    this.internalValue = this.internalValue; // forces update of value
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  watch: {
+    value(val) {
+      this.internalValue = val;
+    },
+  },
+  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;
+      },
+      set(val) {
+        const childItems = this.dropdownItems();
+        for (let index in childItems) {
+          let child = childItems[index];
+          let selected = child.value === val;
+          child.internalSelected = selected;
+
+          if (selected) {
+            this.$refs.valueContent.innerHTML = child.internalContent;
+          }
+        }
+        if (this.dataValue !== val) {
+          // only raise event on change
+          this.dataValue = val;
+          this.$emit('change', this.dataValue);
+        }
+      },
+    },
+  },
+  methods: {
+    dropdownItems() {
+      return this.$children.filter(item => item.$_CvDropdownItem);
+    },
+    doMove(up) {
+      // requery could have changed
+      let currentFocusEl = this.$el.querySelector('.cv-dropdown-item :focus');
+      let currentFocusValue;
+      let childItems = this.dropdownItems();
+      let last = childItems.length - 1;
+      let currentFocusIndex = up ? 0 : last;
+      let nextFocusIndex;
+
+      if (currentFocusEl) {
+        currentFocusValue = currentFocusEl.parentNode.getAttribute('data-value');
+      }
+
+      if (currentFocusValue !== undefined) {
+        currentFocusIndex = childItems.findIndex(child => child.value === currentFocusValue);
+      }
+
+      if (up) {
+        nextFocusIndex = currentFocusIndex > 0 ? currentFocusIndex - 1 : last;
+        if (childItems[nextFocusIndex].internalSelected) {
+          nextFocusIndex = nextFocusIndex > 0 ? nextFocusIndex - 1 : last;
+        }
+      } else {
+        nextFocusIndex = currentFocusIndex < last ? currentFocusIndex + 1 : 0;
+        if (childItems[nextFocusIndex].internalSelected) {
+          nextFocusIndex = nextFocusIndex < last ? nextFocusIndex + 1 : 0;
+        }
+      }
+
+      childItems[nextFocusIndex].setFocus();
+    },
+    onDown() {
+      if (!this.open) {
+        this.open = true;
+      } else {
+        this.doMove(false);
+      }
+    },
+    onUp() {
+      if (this.open) {
+        this.doMove(true);
+      }
+    },
+    onEsc() {
+      this.open = false;
+      this.$el.focus();
+    },
+    onClick(ev) {
+      this.open = !this.open;
+      if (!this.open) {
+        this.$el.focus();
+      }
+
+      if (ev.target.classList.contains('bx--dropdown-link')) {
+        const targetItemEl = ev.target.parentNode;
+        const newValue = targetItemEl.getAttribute('data-value');
+
+        this.internalValue = newValue;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss"></style>