@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/CvDataTable/CvDataTableHeading.vue

@@ -0,0 +1,143 @@
+<template>
+  <th
+    :aria-sort="internalOrder"
+    :style="skeleton && headingStyle"
+    :id="cvId"
+    ref="el"
+  >
+    <button
+      type="button"
+      v-if="sortable"
+      :class="[
+        `${carbonPrefix}--table-sort`,
+        {
+          [`${carbonPrefix}--table-sort--active`]:
+            internalOrder === 'descending',
+          [`${carbonPrefix}--table-sort--active ${carbonPrefix}--table-sort--ascending`]:
+            internalOrder === 'ascending',
+        },
+      ]"
+      @click="onSortClick"
+      :style="headingStyle"
+    >
+      <component
+        :is="headingLabelTag"
+        :class="`${carbonPrefix}--table-header-label`"
+      >
+        <slot>{{ heading }}</slot>
+      </component>
+      <ArrowDown16 :class="`${carbonPrefix}--table-sort__icon`" />
+      <Arrows16 :class="`${carbonPrefix}--table-sort__icon-unsorted`" />
+    </button>
+    <component
+      v-else
+      :is="headingLabelTag"
+      :class="`${carbonPrefix}--table-header-label`"
+      :style="headingStyle"
+    >
+      <slot>{{ heading }}</slot>
+    </component>
+  </th>
+</template>
+
+<script setup>
+import ArrowDown16 from '@carbon/icons-vue/es/arrow--down/16';
+import Arrows16 from '@carbon/icons-vue/es/arrows--vertical/16';
+import CvEmpty from '../CvEmpty/_CvEmpty.vue';
+import { props as propsCvId, useCvId } from '../../use/cvId';
+import { carbonPrefix } from '../../global/settings';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { getBus } from '../../global/component-utils/event-bus';
+import store from './cvDataTableStore';
+
+const nextOrder = {
+  ascending: 'descending',
+  descending: 'none',
+  none: 'ascending',
+};
+const props = defineProps({
+  dataStyle: Object,
+  heading: String,
+  name: String,
+  sortable: Boolean,
+  order: { type: String, default: 'none' },
+  skeleton: Boolean,
+  headingStyle: Object,
+  ...propsCvId,
+});
+const cvId = useCvId(props, true);
+const dataOrder = ref(props.order);
+const parent = ref(null);
+watch(
+  () => props.order,
+  () => {
+    if (dataOrder.value !== props.order) {
+      dataOrder.value = props.order;
+      store.updateHeading(parent, {
+        id: cvId.value,
+        order: dataOrder.value,
+      });
+      onSortClick();
+    }
+  }
+);
+watch(
+  () => props.sortable,
+  () => {
+    store.updateHeading(parent, {
+      id: cvId.value,
+      sortable: props.sortable,
+    });
+  }
+);
+
+let bus = undefined;
+const el = ref(null);
+onMounted(() => {
+  const pe = el.value.closest('.cv-data-table');
+  parent.value = pe?.getAttribute('id');
+  if (parent.value) bus = getBus(parent);
+  else console.warn('data table not found');
+
+  const exists = store.findHeading(parent, cvId);
+  if (exists)
+    console.error(
+      `CvDataTable: Duplicate ID specified for CvDataTableHeading, may cause issues. {id: ${cvId.value}, name: ${props.name}`
+    );
+  else
+    store.updateHeading(parent, {
+      id: cvId.value,
+      name: props.name,
+      order: dataOrder.value,
+      sortable: props.sortable,
+    });
+});
+
+onBeforeUnmount(() => {
+  store.removeHeading(parent, cvId);
+});
+function onSortClick() {
+  bus?.emit('cv:sort', {
+    heading: { id: cvId.value, name: props.name },
+    value: nextOrder[internalOrder.value],
+  });
+}
+const internalOrder = computed(() => {
+  if (!props.sortable) {
+    return undefined;
+  }
+  const heading = store.findHeading(parent, cvId);
+  if (heading?.order !== 'ascending' && heading?.order !== 'descending') {
+    return 'none';
+  } else {
+    return heading?.order;
+  }
+});
+
+const headingLabelTag = computed(() => {
+  // no tag if non-blank skeleton
+  return props.skeleton && props.heading && props.heading.length > 0
+    ? CvEmpty
+    : 'span';
+});
+</script>

package/src/components/CvDataTable/CvDataTableRow.vue

@@ -0,0 +1,139 @@
+<template>
+  <tbody
+    v-if="dataSomeExpandingRows"
+    class="cv-data-table-row cv-data-table-row--expandable"
+    :id="cvId"
+  >
+    <cv-data-table-row-inner
+      ref="row"
+      :rowId="cvId"
+      v-bind="$attrs"
+      :expanding-row="dataExpandable"
+      @expanded-change="onExpandedChange"
+      @checked-change="onCheckedChange"
+      :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"
+    class="cv-data-table-row"
+    :id="cvId"
+    :rowId="cvId"
+    @checked-change="onCheckedChange"
+  >
+    <slot />
+  </cv-data-table-row-inner>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { props as propsCvId, useCvId } from '../../use/cvId';
+import CvDataTableRowInner from './_CvDataTableRowInner.vue';
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  useAttrs,
+  useSlots,
+  watch,
+} from 'vue';
+import store from './cvDataTableStore';
+import { getBus } from '../../global/component-utils/event-bus';
+
+const props = defineProps({
+  expanded: Boolean,
+  ...propsCvId,
+});
+const cvId = useCvId(props, true);
+
+const dataExpandable = ref(false);
+
+const attrs = useAttrs();
+const slots = useSlots();
+const row = ref(null);
+const parent = ref(null);
+let bus;
+onMounted(() => {
+  const el = row.value?.$el;
+  const pe = el?.closest('.cv-data-table');
+  parent.value = pe?.getAttribute('id');
+  if (parent.value) {
+    bus = getBus(parent);
+    store.getTable(parent);
+  } else console.warn('data table not found');
+
+  dataExpandable.value = !!slots.expandedContent;
+  const exists = store.findRow(parent, cvId);
+  if (exists)
+    console.error(
+      `CvDataTable: Duplicate ID specified for CvDataTableRow, may cause issues. {id: ${cvId.value}, value: ${attrs.value}}`
+    );
+  else
+    store.updateRow(parent, {
+      id: cvId.value,
+      value: attrs.value,
+      expandable: dataExpandable.value,
+      isExpanded: props.expanded,
+      isChecked: false,
+    });
+});
+onUpdated(() => {
+  const curr = dataExpandable.value;
+  dataExpandable.value = !!slots.expandedContent;
+  if (dataExpandable.value !== curr)
+    store.updateRow(parent, {
+      id: cvId.value,
+      expandable: dataExpandable.value,
+    });
+});
+onBeforeUnmount(() => {
+  store.removeRow(parent, cvId);
+});
+const dataExpanded = computed(() => {
+  return Boolean(props.expanded || store.isRowExpanded(parent, cvId));
+});
+watch(
+  () => props.expanded,
+  () => {
+    store.updateRow(parent, {
+      id: cvId.value,
+      isExpanded: props.expanded,
+    });
+  }
+);
+const dataSomeExpandingRows = computed(() => {
+  return store.someExpandingRows(parent);
+});
+function onExpandedChange(val) {
+  const row = store.findRow(parent, cvId);
+  store.updateRow(parent, {
+    id: cvId.value,
+    isExpanded: val,
+  });
+  bus?.emit('cv:expanded-change', row);
+}
+function onCheckedChange(val) {
+  store.updateRow(parent, {
+    id: cvId.value,
+    isChecked: val,
+  });
+  bus?.emit('cv:check-change', { value: attrs.value, checked: val });
+}
+</script>

package/src/components/CvDataTable/CvDataTableSkeleton.vue

@@ -0,0 +1,48 @@
+<template>
+  <cv-data-table skeleton :data="data" :columns="cols" v-bind="$attrs">
+    <template v-if="hasHelperText" v-slot:helper-text>
+      <slot name="helper-text" />
+    </template>
+
+    <template v-if="hasBatchActions" v-slot:batch-actions>
+      <slot name="batch-actions" />
+    </template>
+
+    <template v-if="hasActions" v-slot:actions>
+      <slot name="actions" />
+    </template>
+  </cv-data-table>
+</template>
+
+<script setup>
+import CvDataTable from './CvDataTable.vue';
+import { computed, onMounted, onUpdated, ref, useSlots } from 'vue';
+
+const props = defineProps({
+  columns: { type: [Array, Number], default: 5 },
+  rows: { type: Number, default: 5 },
+});
+const hasActions = ref(false);
+const hasHelperText = ref(false);
+const hasBatchActions = ref(false);
+const slots = useSlots();
+function checkSlots() {
+  // NOTE: slots is not reactive so needs to be managed on updated
+  hasBatchActions.value = !!slots['batch-actions'];
+  hasHelperText.value = !!slots['helper-text'];
+  hasActions.value = !!slots['actions'];
+}
+onMounted(checkSlots);
+onUpdated(checkSlots);
+
+const data = computed(() => {
+  return [...Array(Math.max(props.rows, 1))].map(() =>
+    Array(cols.value.length).fill('')
+  );
+});
+const cols = computed(() => {
+  return typeof props.columns !== 'number'
+    ? props.columns
+    : Array(Math.max(props.columns, 1)).fill('');
+});
+</script>

package/src/components/CvDataTable/_CvDataTableRowInner.vue

@@ -0,0 +1,169 @@
+<template>
+  <tr
+    ref="el"
+    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>
+      <div v-else>{{ expandingRow }}</div>
+    </td>
+    <td
+      v-if="hasBatchActions"
+      :class="`${carbonPrefix}--table-column-checkbox`"
+    >
+      <cv-checkbox
+        :form-item="false"
+        :value="value"
+        :inline="true"
+        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 setup>
+import { carbonPrefix } from '../../global/settings';
+import CvCheckbox from '../CvCheckbox';
+import CvOverflowMenu from '../CvOverflowMenu';
+import CvOverflowMenuItem from '../CvOverflowMenu/CvOverflowMenuItem.vue';
+import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
+import { computed, onMounted, onUpdated, ref, useSlots, watch } from 'vue';
+import store from './cvDataTableStore';
+import { getBus } from '../../global/component-utils/event-bus';
+
+const props = defineProps({
+  ariaLabelForBatchCheckbox: String,
+  checked: Boolean,
+  expanded: Boolean,
+  expandingRow: Boolean,
+  ariaLabelExpandRow: { type: String, default: 'Expand current row' },
+  ariaLabelCollapseRow: { type: String, default: 'Collapse current row' },
+  overflowMenu: Array,
+  value: String,
+  rowId: String,
+});
+
+const dataSomeExpandingRows = computed(() => {
+  return store.someExpandingRows(parent);
+});
+
+const overflowMenuButtons = computed(() => {
+  return props.overflowMenu.filter(item => typeof item === 'string');
+});
+const overflowMenuOptions = computed(() => {
+  const incomingOptions =
+    props.overflowMenu.find(item => typeof item === 'object') || {};
+  const defaultOptions = {
+    flipMenu: true,
+    label: 'Row overflow menu',
+    tipPosition: 'left',
+  };
+  return { ...defaultOptions, ...incomingOptions };
+});
+
+const slots = useSlots();
+const hasOverflowMenu = ref(false);
+function checkSlots() {
+  // NOTE: this.$slots is not reactive so needs to be managed on updated
+  hasOverflowMenu.value = !!(
+    (props.overflowMenu && props.overflowMenu.length) ||
+    slots['overflow-menu']
+  );
+}
+onMounted(checkSlots);
+onUpdated(checkSlots);
+
+const el = ref(null);
+const parent = ref(null);
+let bus;
+onMounted(() => {
+  const pe = el.value.closest('.cv-data-table');
+  parent.value = pe?.getAttribute('id');
+  if (parent.value) {
+    store.getTable(parent);
+    bus = getBus(parent);
+  } else console.warn('data table not found');
+});
+const hasBatchActions = computed(() => {
+  return store.hasBatchActions(parent);
+});
+
+function onMenuItemClick(val) {
+  bus.emit('cv:click', val);
+}
+
+const emit = defineEmits(['expanded-change', 'checked-change']);
+const dataExpanded = ref(props.expanded);
+watch(
+  () => props.expanded,
+  () => {
+    dataExpanded.value = props.expanded;
+  }
+);
+function toggleExpand() {
+  dataExpanded.value = !dataExpanded.value;
+  emit('expanded-change', dataExpanded.value);
+}
+
+const dataChecked = ref(props.checked);
+function onChange() {
+  emit('checked-change', dataChecked.value);
+}
+watch(
+  () => props.checked,
+  () => {
+    dataChecked.value = props.checked;
+    emit('checked-change', dataExpanded.value);
+  }
+);
+watch(
+  () => store.state[parent.value]?.rows,
+  () => {
+    const row = store.findRow(parent, props.rowId);
+    const isChecked = row?.isChecked;
+    if (isChecked !== undefined) {
+      dataChecked.value = isChecked;
+    }
+  },
+  { deep: true }
+);
+</script>