@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/CvDataTable/cvDataTableStore.js

@@ -0,0 +1,340 @@
+import { reactive, unref } from 'vue';
+let loggerEnabled = false;
+try {
+  loggerEnabled = localStorage
+    ?.getItem('debug')
+    ?.split(' ')
+    .includes('cv:data-table-store');
+} catch (e) {
+  // ignore
+}
+// eslint-disable-next-line no-console
+const logger = loggerEnabled ? console.debug : () => {};
+
+/**
+ * @typedef {string|ComputedRef<string>|Ref<string>} CvTableDataString
+ */
+
+/**
+ * Row Data
+ * @typedef {Object} CvRowData
+ * @property {CvTableDataString} id - row id
+ * @property {string} value? - used to determine which rows are selected
+ * @property {boolean} expandable - True if the row can be expended via a click
+ * @property {boolean} isExpanded - True if the row is currently expanded
+ * @property {boolean} isChecked - True is the row is currently selected via the checkbox in the row
+ */
+
+/**
+ * Row update data
+ * @typedef {Object} CvRowDataChecked
+ * @property {CvTableDataString} id - heading id
+ * @property {boolean} isChecked - True is the row is currently selected via the checkbox in the row
+ */
+
+/**
+ * Row update data
+ * @typedef {Object} CvRowDataExpanded
+ * @property {CvTableDataString} id - heading id
+ * @property {boolean} isExpanded - True if the row is currently expanded
+ */
+
+/**
+ * Row update data
+ * @typedef {Object} CvRowDataExpandable
+ * @property {CvTableDataString} id - heading id
+ * @property {boolean} expandable - True if the row can be expended via a click
+ */
+
+/**
+ * @typedef {CvRowData|CvRowDataChecked|CvRowDataExpanded|CvRowDataExpandable} CvRowDataUpdate
+ */
+
+/**
+ * Heading data
+ * @typedef {Object} CvHeadingData
+ * @property {CvTableDataString} id - heading id
+ * @property {string} name? - name of the heading which can be used by sort
+ * @property {CvTableDataString} order - sort order for this heading
+ * @property {boolean} sortable - Is the heading sortable?
+ */
+
+/**
+ * Heading update data
+ * @typedef {Object} CvHeadingDataSortable
+ * @property {CvTableDataString} id - heading id
+ * @property {boolean} sortable - Is the heading sortable?
+ */
+
+/**
+ * Heading update data
+ * @typedef {Object} CvHeadingDataOrder
+ * @property {CvTableDataString} id - heading id
+ * @property {CvTableDataString} order - sort order for this heading
+ */
+
+/**
+ * @typedef {CvHeadingData|CvHeadingDataSortable|CvHeadingDataOrder} CvHeadingDataUpdate
+ */
+
+/**
+ * Table data
+ * @typedef {Object} CvTableData
+ * @property {Array<CvRowData>} rows - table row data
+ * @property {Array<CvHeadingData>} headings - table heading data
+ * @property {boolean} hasBatchActions - Batch actions are available
+ * @property {boolean} hasExpandable - At least some rows are expandable
+ */
+
+export default reactive({
+  state: { global: { rows: [], headings: [] } },
+  /**
+   * Add a new table using the table's id
+   * @param {CvTableDataString} tableId
+   */
+  addTable(tableId) {
+    const table = unref(tableId);
+    this.state[table] = {
+      rows: [],
+      headings: [],
+      hasBatchActions: false,
+      hasExpandable: false,
+    };
+    logger(`added table:${table}`);
+  },
+  /**
+   * Remove a table using the table's id
+   * @param {CvTableDataString} tableId
+   */
+  removeTable(tableId) {
+    const table = unref(tableId);
+    delete this.state[table];
+    logger(`added table:${table}`);
+  },
+  /**
+   * Get data for a table
+   * @param {CvTableDataString} tableId
+   * @returns {CvTableData}
+   */
+  getTable(tableId) {
+    const table = unref(tableId);
+    if (!this.state[table]) this.addTable(table);
+    return this.state[table];
+  },
+  /**
+   * Does the table have batch actions
+   * @param {CvTableDataString} tableId
+   * @returns {boolean|undefined}
+   */
+  hasBatchActions(tableId) {
+    const table = unref(tableId);
+    if (!this.state[table]) return;
+    const hasBatchActions = this.state[table]?.hasBatchActions;
+    logger(`get hasBatchActions:${table} result:${hasBatchActions}`);
+    return hasBatchActions;
+  },
+  /**
+   * Set if the table has batch actions or not
+   * @param {CvTableDataString} tableId
+   * @param {boolean} val
+   */
+  setBatchActions(tableId, val) {
+    const table = unref(tableId);
+    if (!this.state[table]) return;
+    if (this.state[table].hasBatchActions !== val) {
+      this.state[table].hasBatchActions = val;
+      logger(`setBatchActions:${table} payload:${val}`);
+    }
+  },
+  /**
+   * Find a heading by table + heading id
+   * @param {CvTableDataString} tableId
+   * @param {CvTableDataString} headingId
+   * @returns {CvHeadingData|undefined}
+   */
+  findHeading(tableId, headingId) {
+    const table = unref(tableId);
+    const id = unref(headingId);
+
+    const headings = this.headings(table);
+    return headings.find(heading => heading.id === id);
+  },
+  /**
+   * Get all headings for a table
+   * @param {CvTableDataString} tableId
+   * @returns {Array<CvHeadingData>}
+   */
+  headings(tableId) {
+    const table = unref(tableId);
+    return this.state[table]?.headings || [];
+  },
+  /**
+   * Get all rows for a table
+   * @param {CvTableDataString} tableId
+   * @returns {Array<CvRowData>}
+   */
+  rows(tableId) {
+    const table = unref(tableId);
+    return this.state[table]?.rows || [];
+  },
+  /**
+   * Are any header sortable
+   * @param {CvTableDataString} tableId
+   * @returns {boolean}
+   */
+  someSortableHeadings(tableId) {
+    const table = unref(tableId);
+    const headings = this.state[table]?.headings;
+    const some = headings?.some(column => column.sortable);
+    logger(`get someSortableHeadings:${table} result:${some}`);
+    return some;
+  },
+  /**
+   * Update a heading
+   * @param {CvTableDataString} tableId
+   * @param {CvHeadingDataUpdate} update
+   */
+  updateHeading(tableId, update) {
+    const table = unref(tableId);
+
+    if (!this.state[table]) return;
+    const headings = this.state[table].headings;
+    const index = headings.findIndex(heading => heading.id === update.id);
+    if (index === -1) {
+      headings.push(update);
+      logger(`update heading:${table} payload:${JSON.stringify(update)}`);
+    } else {
+      const current = headings[index];
+      const changes = { ...current, ...update };
+      const changed =
+        current.name !== changes.name ||
+        current.order !== changes.order ||
+        current.sortable !== changes.sortable;
+      if (changed) {
+        headings.splice(index, 1, changes);
+        logger(`update heading:${table} payload:${JSON.stringify(update)}`);
+        logger(
+          `update heading:${table} result:${JSON.stringify(headings[index])}`
+        );
+      }
+    }
+  },
+  /**
+   * Remove a heading data object from the table
+   * @param {CvTableDataString} tableId
+   * @param {CvTableDataString} headingId
+   */
+  removeHeading(tableId, headingId) {
+    const table = unref(tableId);
+    const id = unref(headingId);
+    logger(`remove heading:${table} payload:${id}`);
+    if (!this.state[table]) return;
+    const headings = this.state[table].headings;
+    const index = headings.findIndex(heading => heading.id === id);
+    if (index > -1) headings.splice(index, 1);
+    else logger(`remove heading:${table} payload:${id} - heading not found`);
+  },
+  /**
+   * Find a row for using the table & row ids
+   * @param {CvTableDataString} tableId
+   * @param {CvTableDataString} rowId
+   * @returns {CvRowData|undefined}
+   */
+  findRow(tableId, rowId) {
+    const table = unref(tableId);
+    const id = unref(rowId);
+    if (!this.state[table]) return undefined;
+    return this.state[table].rows.find(row => row.id === id);
+  },
+  /**
+   * Is the given row expanded
+   * @param {CvTableDataString} tableId
+   * @param {CvTableDataString} rowId
+   * @returns {boolean}
+   */
+  isRowExpanded(tableId, rowId) {
+    const row = this.findRow(tableId, rowId);
+    return row?.isExpanded;
+  },
+  /**
+   * Set if any rows are expandable
+   * @param {CvTableDataString} tableId
+   */
+  setSomeExpandingRows(tableId) {
+    const table = unref(tableId);
+    if (!this.state[table]) return;
+    const rows = this.state[table].rows;
+    const some = rows?.some(item => item.expandable);
+    logger(`set someExpandingRows:${table} result:${some}`);
+    this.state[table].hasExpandable = some;
+  },
+  /**
+   * Are any rows expandable in the given table
+   * @param {CvTableDataString} tableId
+   * @returns {boolean}
+   */
+  someExpandingRows(tableId) {
+    const table = unref(tableId);
+    if (!table) return false;
+    const some = this.state[table]?.hasExpandable;
+    logger(`get someExpandingRows:${table} result:${some}`);
+    return some;
+  },
+  /**
+   * Are all the table rows expanded
+   * @param {CvTableDataString} tableId
+   * @returns {boolean}
+   */
+  allExpandedRows(tableId) {
+    const table = unref(tableId);
+    if (!table) return false;
+    const rows = this.state[table].rows;
+    const every = rows?.every(item => item.isExpanded);
+    logger(`get allExpandedRows:${table} result:${every}`);
+    return every;
+  },
+  /**
+   * Add or update a row in the table
+   * @param {CvTableDataString} tableId
+   * @param {CvRowDataUpdate} update
+   */
+  updateRow(tableId, update) {
+    const table = unref(tableId);
+
+    if (!this.state[table]) return;
+    const rows = this.state[table].rows;
+    const index = rows.findIndex(row => row.id === update.id);
+    if (index === -1) {
+      rows.push(update);
+      logger(`update row:${table} payload:${JSON.stringify(update)}`);
+    } else {
+      const current = rows[index];
+      const changes = { ...current, ...update };
+      const changed =
+        current.value !== changes.value ||
+        current.expandable !== changes.expandable ||
+        current.isExpanded !== changes.isExpanded ||
+        current.isChecked !== changes.isChecked;
+      if (changed) {
+        rows.splice(index, 1, changes);
+        logger(`update row:${table} payload:${JSON.stringify(update)}`);
+        logger(`update row:${table} result:${JSON.stringify(rows[index])}`);
+      }
+    }
+  },
+  /**
+   * Remove a row from the table
+   * @param {CvTableDataString} tableId
+   * @param {CvTableDataString} rowId
+   */
+  removeRow(tableId, rowId) {
+    const table = unref(tableId);
+    const id = unref(rowId);
+    logger(`remove row:${table} payload:${id}`);
+    if (!this.state[table]) return;
+    const rows = this.state[table].rows;
+    const index = rows.findIndex(row => row.id === id);
+    if (index > -1) rows.splice(index, 1);
+    else logger(`remove row:${table} payload:${id} - row not found`);
+  },
+});

package/src/components/CvDataTable/index.js

@@ -0,0 +1,3 @@
+import CvDataTable from './CvDataTable.vue';
+export { CvDataTable };
+export default CvDataTable;

package/src/components/CvEmpty/_CvEmpty.vue

@@ -0,0 +1,22 @@
+<!-- Use this as the "nothing" instead of CvWrapper when you need a a dom/component or nothing
+Example:
+Instead of
+<cv-wrapper :tag-type="something ? 'span' : ''">
+<h1>Hello</h1>
+</cv-wrapper>
+
+Which will produce either the h1 element wrapped in a span or unwrapped.
+<span>
+<h1>Hello</h1>
+</span>
+or just
+<h1>Hello</h1>
+
+Instead of that use the built-in component tag like this:
+<component :is="something ? 'span' : CvEmpty">
+<h1>Hello</h1>
+</component>
+-->
+<template>
+  <slot v-bind="$attrs"></slot>
+</template>

package/src/components/CvGrid/CvColumn.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="cv-column" :class="classes">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { computed } from 'vue';
+import { columnValidator } from './_cvColumnValidation';
+
+const props = defineProps({
+  sm: {
+    type: [Boolean, Number, Object],
+    validator: value => columnValidator('sm', value),
+  },
+  md: {
+    type: [Boolean, Number, Object],
+    validator: value => columnValidator('md', value),
+  },
+  lg: {
+    type: [Boolean, Number, Object],
+    validator: value => columnValidator('lg', value),
+  },
+  xlg: {
+    type: [Boolean, Number, Object],
+    validator: value => columnValidator('xlg', value),
+  },
+  max: {
+    type: [Boolean, Number, Object],
+    validator: value => columnValidator('max', value),
+  },
+});
+const classes = computed(() => {
+  const classnames = [];
+
+  const breakpoints = [
+    { name: 'sm', value: props.sm },
+    { name: 'md', value: props.md },
+    { name: 'lg', value: props.lg },
+    { name: 'xlg', value: props.xlg },
+    { name: 'max', value: props.max },
+  ].filter(breakpoint => breakpoint.value !== false);
+
+  for (let i = 0; i < breakpoints.length; i += 1) {
+    const { name, value } = breakpoints[i];
+
+    if (typeof value === 'boolean') {
+      // auto-column
+      classnames.push(`${carbonPrefix}--col-${name}`);
+    } else if (typeof value === 'number') {
+      classnames.push(`${carbonPrefix}--col-${name}-${value}`);
+    } else {
+      const { span, offset, start, end } = value;
+
+      if (typeof span === 'boolean') {
+        classnames.push(`${carbonPrefix}--col-${name}`);
+      } else if (typeof span === 'number') {
+        classnames.push(`${carbonPrefix}--col-${name}-${span}`);
+      }
+
+      if (typeof offset === 'number') {
+        classnames.push(`${carbonPrefix}--offset-${name}-${offset}`);
+      }
+
+      // Carbon 11
+      if (typeof start === 'number') {
+        classnames.push(`${carbonPrefix}--${name}:col-start-${start}`);
+      }
+
+      // Carbon 11
+      if (typeof end === 'number') {
+        classnames.push(`${carbonPrefix}--${name}:col-end-${end}`);
+      }
+    }
+  }
+
+  if (classnames.length === 0) {
+    // no breakpoints were defined. use auto-column
+    classnames.push(`${carbonPrefix}--col`);
+  }
+
+  return classnames;
+});
+</script>

package/src/components/CvGrid/CvGrid.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="cv-grid"
+    :class="[
+      `${carbonPrefix}--grid`,
+      {
+        [`${carbonPrefix}--grid--full-width`]: fullWidth,
+        [`${carbonPrefix}--grid--condensed`]: kind === 'condensed',
+        [`${carbonPrefix}--grid--narrow`]: kind === 'narrow',
+        [`${carbonPrefix}--subgrid`]: subgrid,
+      },
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { inject, provide } from 'vue';
+
+defineProps({
+  /**
+   * Remove the default max width that the grid has set
+   */
+  fullWidth: Boolean,
+  /**
+   * - wide - default
+   * - condensed - Collapse the gutter to 1px. Useful for fluid layouts. Rows have 1px of margin between them to match gutter.
+   * - narrow - Container hangs 16px into the gutter. Useful for typographic alignment with and without containers.
+   */
+  kind: {
+    type: String,
+    default: 'wide',
+    validator: val => ['wide', 'narrow', 'condensed'].includes(val),
+  },
+});
+
+// Carbon 11 - a bit of a head start on Carbon 11 support
+const subgrid = inject('cv-parent-grid', false);
+if (!subgrid) provide('cv-parent-grid', true);
+</script>

package/src/components/{cv-grid/cv-row.vue → CvGrid/CvRow.vue}

@@ -13,18 +13,14 @@
   </div>
 </template>
 
-<script>
-import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
+<script setup>
+import { carbonPrefix } from '../../global/settings';
 
-export default {
-  name: 'CvRow',
-  mixins: [carbonPrefixMixin],
-  props: {
-    kind: {
-      type: String,
-      default: 'wide',
-      validator: val => ['wide', 'narrow', 'condensed'].includes(val),
-    },
+defineProps({
+  kind: {
+    type: String,
+    default: 'wide',
+    validator: val => ['wide', 'narrow', 'condensed'].includes(val),
   },
-};
+});
 </script>