@carbon/vue 2.45.1 → 3.0.4-alpha.0

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

@@ -1,117 +0,0 @@
-<template>
-  <div
-    data-content-switcher
-    :class="[
-      `cv-content-switcher ${carbonPrefix}--content-switcher`,
-      {
-        [`${carbonPrefix}--content-switcher--light`]: isLight,
-        [`${carbonPrefix}--content-switcher--${size}`]: size,
-      },
-    ]"
-    role="tablist"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import store from './cv-content-switcher-store';
-import { carbonPrefixMixin, themeMixin } from '../../mixins';
-
-const toggleContent = (selector, on) => {
-  // hide content
-  const content = document.querySelectorAll(selector);
-  for (const element of content) {
-    // element.style.visibility = on;
-    if (!on) {
-      element.setAttribute('hidden', 'hidden');
-    } else {
-      element.removeAttribute('hidden');
-    }
-    element.setAttribute('aria-hidden', `${!on}`);
-  }
-};
-
-export default {
-  name: 'CvContentSwitcher',
-  mixins: [carbonPrefixMixin, themeMixin],
-  created() {
-    // 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));
-  },
-  props: {
-    size: {
-      type: String,
-      default: undefined,
-      validator: val => ['', 'sm', 'xl'].includes(val),
-    },
-  },
-  data() {
-    return {
-      store: store,
-    };
-  },
-  methods: {
-    switcherButtons() {
-      return this.$children.filter(item => item.$_CvContentSwitcherButton);
-    },
-    onCvMount(srcComponent) {
-      this.processState(srcComponent, srcComponent.isSelected);
-    },
-    onCvBeforeDestroy(srcComponent) {
-      let nextOpen;
-      if (srcComponent.isSelected) {
-        const switcherButtons = this.switcherButtons();
-
-        for (let index in switcherButtons) {
-          if (
-            switcherButtons[index].$_CvContentSwitcherButton &&
-            switcherButtons[index].buttonId !== srcComponent.buttonId
-          ) {
-            nextOpen = switcherButtons[index];
-            break;
-          }
-        }
-      }
-      // unhide content for destroyed srcComponent
-      if (srcComponent.ownerId) {
-        this.store.remove(srcComponent.ownerId);
-      } else {
-        toggleContent(srcComponent.contentSelector, true);
-      }
-      if (nextOpen) {
-        setTimeout(() => {
-          nextOpen.open();
-        }, 1);
-      }
-    },
-    processState(srcComponent, state) {
-      const innerProcessState = (component, newState) => {
-        if (component.ownerId) {
-          this.store.setState(component.ownerId, newState);
-        } else {
-          toggleContent(component.contentSelector, newState);
-        }
-      };
-      innerProcessState(srcComponent, state);
-
-      if (state) {
-        // if opening one button close others
-        const switcherButtons = this.switcherButtons();
-        for (let index in switcherButtons) {
-          if (switcherButtons[index].buttonId !== srcComponent.buttonId) {
-            switcherButtons[index].close();
-            innerProcessState(switcherButtons[index], false);
-          }
-        }
-      }
-    },
-    onCvOpen(srcComponent) {
-      this.$emit('selected', srcComponent.ownerId ? srcComponent.ownerId : srcComponent.contentSelector);
-      this.processState(srcComponent, true);
-    },
-  },
-};
-</script>

package/src/components/cv-content-switcher/index.js

@@ -1,4 +0,0 @@
-import CvContentSwitcher from './cv-content-switcher';
-import CvContentSwitcherButton from './cv-content-switcher-button';
-import CvContentSwitcherContent from './cv-content-switcher-content';
-export { CvContentSwitcher, CvContentSwitcherButton, CvContentSwitcherContent };

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

@@ -1,139 +0,0 @@
-<template>
-  <tr
-    class="cv-data-table-row-inner"
-    :class="{ [`${carbonPrefix}--parent-row`]: expandingRow, [`${carbonPrefix}--expandable-row`]: dataExpanded }"
-  >
-    <td
-      v-if="dataSomeExpandingRows"
-      :class="`${carbonPrefix}--table-expand`"
-      :data-previous-value="dataExpanded ? 'collapsed' : 'expanded'"
-    >
-      <button
-        v-if="expandingRow"
-        :class="`${carbonPrefix}--table-expand__button`"
-        @click="toggleExpand"
-        type="button"
-        :aria-label="dataExpanded ? ariaLabelCollapseRow : ariaLabelExpandRow"
-      >
-        <ChevronRight16 :class="`${carbonPrefix}--table-expand__svg`" />
-      </button>
-    </td>
-    <td v-if="hasBatchActions" :class="`${carbonPrefix}--table-column-checkbox`">
-      <cv-checkbox
-        :form-item="false"
-        :value="value"
-        v-model="dataChecked"
-        @change="onChange"
-        ref="rowChecked"
-        :label="ariaLabelForBatchCheckbox || `Select row ${value} for batch action`"
-        hideLabel
-      />
-    </td>
-    <slot />
-    <td v-if="hasOverflowMenu" :class="`${carbonPrefix}--table-column-menu`">
-      <cv-overflow-menu v-bind="overflowMenuOptions">
-        <cv-overflow-menu-item
-          v-for="(item, index) in overflowMenuButtons"
-          :key="`${index}`"
-          @click="
-            onMenuItemClick({
-              rowValue: value,
-              menuIndex: index,
-              menuLabel: item,
-            })
-          "
-          >{{ item }}</cv-overflow-menu-item
-        >
-      </cv-overflow-menu>
-    </td>
-  </tr>
-</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 ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
-import { carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvDataTableRowInner',
-  mixins: [carbonPrefixMixin],
-  components: { CvCheckbox, CvOverflowMenu, CvOverflowMenuItem, ChevronRight16 },
-  props: {
-    ariaLabelForBatchCheckbox: String,
-    checked: Boolean,
-    expanded: Boolean,
-    expandingRow: Boolean,
-    ariaLabelExpandRow: { type: String, default: 'Expand current row' },
-    ariaLabelCollapseRow: { type: String, default: 'Collapse current row' },
-    overflowMenu: Array,
-    someExpandingRows: Boolean,
-    value: String,
-  },
-  model: {
-    event: 'change',
-    prop: 'checked',
-  },
-  data() {
-    return {
-      dataChecked: this.checked,
-      dataExpanded: this.expanded,
-      dataSomeExpandingRows: this.someExpandingRows,
-      hasOverflowMenu: false,
-    };
-  },
-  mounted() {
-    this.checkSlots();
-  },
-  updated() {
-    this.checkSlots();
-  },
-  watch: {
-    checked() {
-      this.dataChecked = this.checked;
-    },
-    expanded() {
-      this.dataExpanded = this.expanded;
-    },
-    someExpandingRows() {
-      this.dataSomeExpandingRows = this.someExpandingRows;
-    },
-  },
-  computed: {
-    isCvDataTableRow() {
-      return true;
-    },
-    hasBatchActions() {
-      return this.$parent.$parent.hasBatchActions;
-    },
-    isChecked() {
-      return this.dataChecked;
-    },
-    overflowMenuButtons() {
-      return this.overflowMenu.filter(item => typeof item === 'string');
-    },
-    overflowMenuOptions() {
-      const incomingOptions = this.overflowMenu.find(item => typeof item === 'object') || {};
-      const defaultOptions = { flipMenu: true, label: 'Row overflow menu', tipPosition: 'left' };
-      return { ...defaultOptions, ...incomingOptions };
-    },
-  },
-  methods: {
-    checkSlots() {
-      // 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() {
-      this.$parent.$parent.onRowCheckChange(this.value, this.dataChecked);
-    },
-    onMenuItemClick(val) {
-      this.$parent.$parent.onMenuItemClick(val);
-    },
-    toggleExpand() {
-      this.dataExpanded = !this.dataExpanded;
-      this.$emit('expanded-change', this.dataExpanded);
-    },
-  },
-};
-</script>

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

@@ -1,25 +0,0 @@
-<template>
-  <button :class="`${carbonPrefix}--overflow-menu ${carbonPrefix}--toolbar-action`" v-on="$listeners" type="button">
-    <slot></slot>
-  </button>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'cv-data-table-action',
-  mixins: [carbonPrefixMixin],
-  mounted() {
-    // ensure SVG has
-    if (this.$el.children[0].classList) {
-      this.$el.children[0].classList.add(`${this.carbonPrefix}--toolbar-action__icon`);
-    } else if (this.$el.children[0].class) {
-      // IE 11 and Edge pre-crhomium
-      this.$el.children[0].setAttribute(
-        'class',
-        `${this.$el.children[0].getAttribute('class')} ${this.carbonPrefix}--toolbar-action__icon`
-      );
-    }
-  },
-};
-</script>

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

@@ -1,14 +0,0 @@
-<template>
-  <td :style="cellStyle">
-    <slot />
-  </td>
-</template>
-
-<script>
-export default {
-  name: 'CvDataTableCell',
-  props: {
-    cellStyle: {},
-  },
-};
-</script>

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

@@ -1,109 +0,0 @@
-<template>
-  <th :aria-sort="internalOrder" :style="skeleton && headingStyle" :id="uid">
-    <button
-      type="button"
-      v-if="sortable"
-      :class="[
-        `${carbonPrefix}--table-sort`,
-        {
-          [`${carbonPrefix}--table-sort--active`]: this.internalOrder === 'descending',
-          [`${carbonPrefix}--table-sort--active ${carbonPrefix}--table-sort--ascending`]:
-            this.internalOrder === 'ascending',
-        },
-      ]"
-      @click="onSortClick"
-      :style="headingStyle"
-    >
-      <cv-wrapper :tag-type="headingLabelTag" :class="`${carbonPrefix}--table-header-label`">
-        <slot>{{ heading }}</slot>
-      </cv-wrapper>
-      <ArrowDown16 :class="`${carbonPrefix}--table-sort__icon`" />
-      <Arrows16 :class="`${carbonPrefix}--table-sort__icon-unsorted`" />
-    </button>
-    <cv-wrapper v-else :tag-type="headingLabelTag" :class="`${carbonPrefix}--table-header-label`" :style="headingStyle">
-      <slot>{{ heading }}</slot>
-    </cv-wrapper>
-  </th>
-</template>
-
-<script>
-import ArrowDown16 from '@carbon/icons-vue/es/arrow--down/16';
-import Arrows16 from '@carbon/icons-vue/es/arrows--vertical/16';
-import CvWrapper from '../cv-wrapper/_cv-wrapper';
-import { uidMixin, carbonPrefixMixin } from '../../mixins';
-
-const nextOrder = {
-  ascending: 'descending',
-  descending: 'none',
-  none: 'ascending',
-};
-
-export default {
-  name: 'CvDataTableHeading',
-  components: { ArrowDown16, Arrows16, CvWrapper },
-  mixins: [uidMixin, carbonPrefixMixin],
-  props: {
-    dataStyle: Object,
-    heading: String,
-    sortable: Boolean,
-    order: { type: String, default: 'none' },
-    skeleton: Boolean,
-    headingStyle: Object,
-  },
-  data() {
-    return {
-      dataOrder: this.order,
-    };
-  },
-  mounted() {
-    this.$_CvDataTableHeading = true; // for use by parent with $children
-    this.$parent.$emit('cv:mounted', this);
-  },
-  beforeDestroy() {
-    this.$parent.$emit('cv:beforeDestroy', this);
-  },
-  watch: {
-    order() {
-      this.dataOrder = this.order;
-    },
-  },
-  computed: {
-    internalOrder: {
-      get() {
-        if (!this.sortable) {
-          return undefined;
-        }
-
-        if (this.dataOrder !== 'ascending' && this.dataOrder !== 'descending') {
-          return 'none';
-        } else {
-          return this.dataOrder;
-        }
-      },
-      set(val) {
-        if (['ascending', 'descending', 'none'].includes(val)) {
-          this.dataOrder = val;
-        }
-      },
-    },
-    sortText() {
-      return this.internalOrder !== 'descending'
-        ? 'Sort rows by this header in descending order'
-        : 'Sort rows by this header in ascending order';
-    },
-    headingLabelTag() {
-      // no tag if non-blank skeleton
-      return this.skeleton && this.heading && this.heading.length > 0 ? '' : 'span';
-    },
-  },
-  model: {
-    event: 'sort',
-    prop: 'order',
-  },
-  methods: {
-    onSortClick() {
-      this.$parent.$emit('cv:sort', this, nextOrder[this.internalOrder]);
-    },
-  },
-};
-</script>

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

@@ -1,113 +0,0 @@
-<template>
-  <tbody v-if="someExpandingRows" class="cv-data-table-row cv-data-table-row--expandable" :id="uid">
-    <cv-data-table-row-inner
-      ref="row"
-      v-bind="$attrs"
-      v-on="$listeners"
-      :expanding-row="dataExpandable"
-      some-expanding-rows
-      @expanded-change="onExpandedChange"
-      :expanded="dataExpanded"
-    >
-      <slot />
-    </cv-data-table-row-inner>
-    <tr
-      v-if="dataExpandable"
-      :class="`${carbonPrefix}--expandable-row ${carbonPrefix}--expandable-row--hidden`"
-      data-child-row
-    >
-      <td colspan="999">
-        <div :class="`${carbonPrefix}--child-row-inner-container`">
-          <slot name="expandedContent" />
-        </div>
-      </td>
-    </tr>
-  </tbody>
-  <cv-data-table-row-inner v-else ref="row" v-bind="$attrs" v-on="$listeners" class="cv-data-table-row" :id="uid">
-    <slot />
-  </cv-data-table-row-inner>
-</template>
-
-<script>
-import CvDataTableRowInner from './_cv-data-table-row-inner';
-import { uidMixin, carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvDataTableRow',
-  mixins: [uidMixin, carbonPrefixMixin],
-  components: { CvDataTableRowInner },
-  props: {
-    expanded: Boolean,
-  },
-  data() {
-    return {
-      dataExpandable: false,
-      dataSomeExpandingRows: false,
-      dataExpanded: this.expanded,
-    };
-  },
-  watch: {
-    expanded() {
-      if (this.dataExpanded !== this.expanded) {
-        this.dataExpanded = this.expanded;
-      }
-    },
-  },
-  mounted() {
-    // NOTE: this.$slots is not reactive so needs to be managed on updated
-    this.dataExpandable = !!this.$slots.expandedContent;
-    this.$parent.$emit('cv:mounted', this);
-  },
-  updated() {
-    this.dataExpandable = !!this.$slots.expandedContent;
-  },
-  beforeDestroy() {
-    this.$parent.$emit('cv:beforeDestroy', this);
-  },
-  computed: {
-    expandable() {
-      return this.dataExpandable;
-    },
-    isCvDataTableRow() {
-      return true;
-    },
-    isChecked: {
-      get() {
-        return this.$refs.row.dataChecked;
-      },
-      set(val) {
-        this.$refs.row.dataChecked = val;
-      },
-    },
-    isExpanded: {
-      get() {
-        return this.dataExpanded;
-      },
-      set(val) {
-        this.dataExpanded = val;
-      },
-    },
-    someExpandingRows: {
-      get() {
-        return this.dataSomeExpandingRows;
-      },
-      set(val) {
-        this.dataSomeExpandingRows = val;
-
-        if (this.$refs.row) {
-          this.$refs.row.dataSomeExpandingRows = val;
-        }
-      },
-    },
-    value() {
-      return this.$refs.row.value;
-    },
-  },
-  methods: {
-    onExpandedChange(val) {
-      this.dataExpanded = val;
-      this.$emit('cv:expanded-change', this);
-    },
-  },
-};
-</script>

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

@@ -1,64 +0,0 @@
-<template>
-  <cv-data-table skeleton :data="data" :columns="cols" v-on="$listeners" v-bind="$attrs">
-    <template v-if="hasHelperText" slot="helper-text">
-      <slot name="helper-text" />
-    </template>
-
-    <template v-if="hasBatchActions" slot="batch-actions">
-      <slot name="batch-actions" />
-    </template>
-
-    <template v-if="hasActions" slot="actions">
-      <slot name="actions" />
-    </template>
-  </cv-data-table>
-</template>
-
-<script>
-import CvDataTable from './cv-data-table';
-
-const DEFAULTS = {
-  COLS: 5,
-  ROWS: 5,
-};
-
-export default {
-  name: 'CvDataTableSkeleton',
-  components: {
-    CvDataTable,
-  },
-  props: {
-    columns: { type: [Array, Number], default: DEFAULTS.COLS },
-    rows: { type: Number, default: DEFAULTS.ROWS },
-  },
-  data() {
-    return {
-      hasActions: false,
-      hasHelperText: false,
-      hasBatchActions: false,
-    };
-  },
-  mounted() {
-    this.checkSlots();
-  },
-  updated() {
-    this.checkSlots();
-  },
-  computed: {
-    data() {
-      return [...Array(Math.max(this.rows, 1))].map(() => Array(this.cols.length).fill(''));
-    },
-    cols() {
-      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 updated
-      this.hasBatchActions = !!this.$slots['batch-actions'];
-      this.hasHelperText = !!this.$slots['helper-text'];
-      this.hasActions = !!this.$slots['actions'];
-    },
-  },
-};
-</script>