@varlet/ui 3.17.1 → 3.18.0-alpha.1781192892883

package/es/data-table/DataTableBodyCell.mjs

@@ -0,0 +1,210 @@
+import { computed, defineComponent } from "vue";
+import VarCheckbox from "../checkbox/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import VarRadio from "../radio/index.mjs";
+import { createNamespace, MaybeVNode } from "../utils/components.mjs";
+const { n, classes } = createNamespace("data-table");
+import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createVNode as _createVNode, normalizeClass as _normalizeClass, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, mergeProps as _mergeProps } from "vue";
+const _hoisted_1 = ["colspan", "rowspan"];
+const _hoisted_2 = ["disabled"];
+function __render__(_ctx, _cache) {
+  const _component_var_checkbox = _resolveComponent("var-checkbox");
+  const _component_var_radio = _resolveComponent("var-radio");
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_maybe_v_node = _resolveComponent("maybe-v-node");
+  return _openBlock(), _createElementBlock("td", _mergeProps({
+    class: _ctx.classes(
+      _ctx.n("cell"),
+      _ctx.n("body-cell"),
+      [_ctx.isSelectionColumn(_ctx.cell.column), _ctx.n("selection-cell")],
+      [_ctx.isExpandColumn(_ctx.cell.column), _ctx.n("expand-cell")],
+      [_ctx.cell.column.fixed, _ctx.n("fixed-cell")],
+      [_ctx.shouldRenderLeftFixedShadow(_ctx.cell.columnIndex), _ctx.n("fixed-cell--shadow-right")],
+      [_ctx.shouldRenderRightFixedShadow(_ctx.cell.columnIndex), _ctx.n("fixed-cell--shadow-left")]
+    ),
+    style: _ctx.style
+  }, _ctx.getCellProps(_ctx.bodyRow, _ctx.cell.column), {
+    colspan: _ctx.cell.colSpan,
+    rowspan: _ctx.cell.rowSpan
+  }), [
+    _ctx.isSelectionColumn(_ctx.cell.column) && _ctx.isMultipleSelectionColumn(_ctx.cell.column) ? (_openBlock(), _createBlock(_component_var_checkbox, {
+      key: 0,
+      "var-data-table-cover": "",
+      "model-value": _ctx.isRowKeySelected(_ctx.bodyRow.key),
+      indeterminate: _ctx.isRowKeyIndeterminate(_ctx.bodyRow.key),
+      disabled: !_ctx.isSelectionColumnSelectable(_ctx.cell.column) || !_ctx.isRowSelectable(_ctx.bodyRow.row, _ctx.bodyRow.rowIndex, _ctx.cell.column),
+      tabindex: "-1",
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.toggleRowSelection(_ctx.bodyRow, $event))
+    }, null, 8, ["model-value", "indeterminate", "disabled"])) : _ctx.isSelectionColumn(_ctx.cell.column) ? (_openBlock(), _createBlock(_component_var_radio, {
+      key: 1,
+      "var-data-table-cover": "",
+      "model-value": _ctx.isRowKeySelected(_ctx.bodyRow.key),
+      disabled: !_ctx.isSelectionColumnSelectable(_ctx.cell.column) || !_ctx.isRowSelectable(_ctx.bodyRow.row, _ctx.bodyRow.rowIndex, _ctx.cell.column),
+      tabindex: "-1",
+      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.toggleRowSelection(_ctx.bodyRow, $event))
+    }, null, 8, ["model-value", "disabled"])) : _ctx.isExpandColumn(_ctx.cell.column) ? (_openBlock(), _createElementBlock("button", {
+      key: 2,
+      type: "button",
+      tabindex: "-1",
+      class: _normalizeClass(_ctx.classes(_ctx.n("expand-trigger"), [_ctx.bodyRow.expanded, _ctx.n("expand-trigger--expanded")])),
+      disabled: !_ctx.isRowExpandable(_ctx.bodyRow, _ctx.cell.column),
+      onClick: _cache[2] || (_cache[2] = ($event) => _ctx.toggleRowExpanded(_ctx.bodyRow))
+    }, [
+      _createVNode(_component_var_icon, {
+        "var-data-table-cover": "",
+        name: _ctx.bodyRow.expanded ? "chevron-down" : "chevron-right"
+      }, null, 8, ["name"])
+    ], 10, _hoisted_2)) : _ctx.tree && _ctx.cell.treeLevel != null ? (_openBlock(), _createElementBlock(
+      "div",
+      {
+        key: 3,
+        class: _normalizeClass(_ctx.n("tree-cell")),
+        style: _normalizeStyle(_ctx.treeStyle)
+      },
+      [
+        _ctx.cell.treeExpandable ? (_openBlock(), _createElementBlock(
+          "button",
+          {
+            key: 0,
+            type: "button",
+            tabindex: "-1",
+            class: _normalizeClass(_ctx.classes(_ctx.n("tree-trigger"), [_ctx.cell.treeExpanded, _ctx.n("tree-trigger--expanded")])),
+            onClick: _cache[3] || (_cache[3] = ($event) => _ctx.toggleTreeRowExpanded(_ctx.bodyRow))
+          },
+          [
+            _createVNode(_component_var_icon, {
+              "var-data-table-cover": "",
+              name: _ctx.cell.treeExpanded ? "chevron-down" : "chevron-right"
+            }, null, 8, ["name"])
+          ],
+          2
+          /* CLASS */
+        )) : (_openBlock(), _createElementBlock(
+          "span",
+          {
+            key: 1,
+            class: _normalizeClass(_ctx.n("tree-indent"))
+          },
+          null,
+          2
+          /* CLASS */
+        )),
+        _createVNode(_component_maybe_v_node, {
+          is: _ctx.renderCell(_ctx.bodyRow, _ctx.cell.column),
+          tag: "div"
+        }, null, 8, ["is"])
+      ],
+      6
+      /* CLASS, STYLE */
+    )) : (_openBlock(), _createBlock(_component_maybe_v_node, {
+      key: 4,
+      is: _ctx.renderCell(_ctx.bodyRow, _ctx.cell.column),
+      tag: "div"
+    }, null, 8, ["is"]))
+  ], 16, _hoisted_1);
+}
+const __sfc__ = defineComponent({
+  name: "DataTableBodyCell",
+  components: {
+    MaybeVNode,
+    VarCheckbox,
+    VarIcon,
+    VarRadio
+  },
+  props: {
+    bodyRow: {
+      type: Object,
+      required: true
+    },
+    cell: {
+      type: Object,
+      required: true
+    },
+    style: {
+      type: Object,
+      required: true
+    },
+    tree: {
+      type: Boolean,
+      required: true
+    },
+    isSelectionColumn: {
+      type: Function,
+      required: true
+    },
+    isExpandColumn: {
+      type: Function,
+      required: true
+    },
+    isMultipleSelectionColumn: {
+      type: Function,
+      required: true
+    },
+    isSelectionColumnSelectable: {
+      type: Function,
+      required: true
+    },
+    isRowSelectable: {
+      type: Function,
+      required: true
+    },
+    isRowKeySelected: {
+      type: Function,
+      required: true
+    },
+    isRowKeyIndeterminate: {
+      type: Function,
+      required: true
+    },
+    isRowExpandable: {
+      type: Function,
+      required: true
+    },
+    shouldRenderLeftFixedShadow: {
+      type: Function,
+      required: true
+    },
+    shouldRenderRightFixedShadow: {
+      type: Function,
+      required: true
+    },
+    toggleRowSelection: {
+      type: Function,
+      required: true
+    },
+    toggleRowExpanded: {
+      type: Function,
+      required: true
+    },
+    toggleTreeRowExpanded: {
+      type: Function,
+      required: true
+    },
+    renderCell: {
+      type: Function,
+      required: true
+    },
+    getCellProps: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props) {
+    const treeStyle = computed(() => {
+      var _a;
+      return {
+        paddingInlineStart: `${((_a = props.cell.treeLevel) != null ? _a : 0) * 20}px`
+      };
+    });
+    return {
+      n,
+      classes,
+      treeStyle
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/data-table/DataTableHeaderCell.mjs

@@ -0,0 +1,237 @@
+import { callOrReturn } from "@varlet/shared";
+import { computed, defineComponent } from "vue";
+import VarCheckbox from "../checkbox/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import { createNamespace, MaybeVNode } from "../utils/components.mjs";
+const { n, classes } = createNamespace("data-table");
+import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createVNode as _createVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, createElementBlock as _createElementBlock, withModifiers as _withModifiers } from "vue";
+const _hoisted_1 = ["colspan", "rowspan"];
+function __render__(_ctx, _cache) {
+  const _component_var_checkbox = _resolveComponent("var-checkbox");
+  const _component_maybe_v_node = _resolveComponent("maybe-v-node");
+  const _component_var_icon = _resolveComponent("var-icon");
+  return _openBlock(), _createElementBlock("th", {
+    class: _normalizeClass(
+      _ctx.classes(
+        _ctx.n("cell"),
+        _ctx.n("header-cell"),
+        [_ctx.isSelectionColumn(_ctx.headerCell.column), _ctx.n("selection-cell")],
+        [_ctx.isExpandColumn(_ctx.headerCell.column), _ctx.n("expand-cell")],
+        [_ctx.headerCell.fixed, _ctx.n("fixed-cell")],
+        [_ctx.shouldRenderLeftFixedShadow(_ctx.headerCell.endLeafColumnIndex), _ctx.n("fixed-cell--shadow-right")],
+        [_ctx.shouldRenderRightFixedShadow(_ctx.headerCell.startLeafColumnIndex), _ctx.n("fixed-cell--shadow-left")]
+      )
+    ),
+    style: _normalizeStyle(_ctx.style),
+    colspan: _ctx.headerCell.colSpan,
+    rowspan: _ctx.headerCell.rowSpan
+  }, [
+    _ctx.isSelectionColumn(_ctx.headerCell.column) && _ctx.isMultipleSelectionColumn(_ctx.headerCell.column) ? (_openBlock(), _createBlock(_component_var_checkbox, {
+      key: 0,
+      "var-data-table-cover": "",
+      "model-value": _ctx.allCurrentRowsSelected,
+      indeterminate: _ctx.someCurrentRowsSelected,
+      disabled: !_ctx.isSelectionColumnSelectable(_ctx.headerCell.column) || !_ctx.hasSelectableRows,
+      tabindex: "-1",
+      "onUpdate:modelValue": _ctx.toggleCurrentSelectableRows
+    }, null, 8, ["model-value", "indeterminate", "disabled", "onUpdate:modelValue"])) : _ctx.isColumnSortable(_ctx.headerCell.column) ? (_openBlock(), _createElementBlock(
+      "button",
+      {
+        key: 1,
+        type: "button",
+        class: _normalizeClass(
+          _ctx.classes(_ctx.n("sort-trigger"), _ctx.n(`sort-trigger--align-${_ctx.headerAlign}`), [
+            _ctx.columnSorterOrder,
+            _ctx.n("sort-trigger--active")
+          ])
+        ),
+        style: _normalizeStyle(_ctx.sortTriggerStyle),
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleColumnSorter(_ctx.headerCell.column.key))
+      },
+      [
+        _createElementVNode(
+          "span",
+          {
+            class: _normalizeClass(_ctx.n("sort-trigger-text"))
+          },
+          [
+            _createVNode(_component_maybe_v_node, {
+              is: _ctx.renderHeaderTitle()
+            }, null, 8, ["is"])
+          ],
+          2
+          /* CLASS */
+        ),
+        _createElementVNode(
+          "span",
+          {
+            class: _normalizeClass(_ctx.n("sort-trigger-icon")),
+            "aria-hidden": "true"
+          },
+          [
+            _createVNode(_component_var_icon, {
+              name: "chevron-up",
+              size: 18,
+              "var-data-table-cover": "",
+              class: _normalizeClass(_ctx.classes(_ctx.n("sort-trigger-icon-up"), [_ctx.columnSorterOrder === "asc", _ctx.n("sort-trigger-icon--active")]))
+            }, null, 8, ["class"]),
+            _createVNode(_component_var_icon, {
+              name: "chevron-down",
+              size: 18,
+              "var-data-table-cover": "",
+              class: _normalizeClass(_ctx.classes(_ctx.n("sort-trigger-icon-down"), [_ctx.columnSorterOrder === "desc", _ctx.n("sort-trigger-icon--active")]))
+            }, null, 8, ["class"])
+          ],
+          2
+          /* CLASS */
+        )
+      ],
+      6
+      /* CLASS, STYLE */
+    )) : (_openBlock(), _createBlock(_component_maybe_v_node, {
+      key: 2,
+      is: _ctx.renderHeaderTitle()
+    }, null, 8, ["is"])),
+    _ctx.isColumnResizable(_ctx.headerCell.column) && _ctx.headerCell.colSpan == null && !_ctx.isLastHeaderColumn(_ctx.headerCell.startLeafColumnIndex) ? (_openBlock(), _createElementBlock(
+      "button",
+      {
+        key: 3,
+        type: "button",
+        tabindex: "-1",
+        class: _normalizeClass(_ctx.n("resize-trigger")),
+        onClick: _cache[1] || (_cache[1] = _withModifiers(() => {
+        }, ["stop"])),
+        onMousedown: _cache[2] || (_cache[2] = ($event) => _ctx.startColumnResize($event, _ctx.headerCell))
+      },
+      null,
+      34
+      /* CLASS, NEED_HYDRATION */
+    )) : _createCommentVNode("v-if", true)
+  ], 14, _hoisted_1);
+}
+const __sfc__ = defineComponent({
+  name: "DataTableHeaderCell",
+  components: {
+    MaybeVNode,
+    VarCheckbox,
+    VarIcon
+  },
+  props: {
+    headerCell: {
+      type: Object,
+      required: true
+    },
+    style: {
+      type: Object,
+      required: true
+    },
+    allCurrentRowsSelected: {
+      type: Boolean,
+      required: true
+    },
+    someCurrentRowsSelected: {
+      type: Boolean,
+      required: true
+    },
+    hasSelectableRows: {
+      type: Boolean,
+      required: true
+    },
+    isSelectionColumn: {
+      type: Function,
+      required: true
+    },
+    isExpandColumn: {
+      type: Function,
+      required: true
+    },
+    isMultipleSelectionColumn: {
+      type: Function,
+      required: true
+    },
+    isSelectionColumnSelectable: {
+      type: Function,
+      required: true
+    },
+    isColumnSortable: {
+      type: Function,
+      required: true
+    },
+    getColumnSorterOrder: {
+      type: Function,
+      required: true
+    },
+    toggleColumnSorter: {
+      type: Function,
+      required: true
+    },
+    isColumnResizable: {
+      type: Function,
+      required: true
+    },
+    isLastHeaderColumn: {
+      type: Function,
+      required: true
+    },
+    shouldRenderLeftFixedShadow: {
+      type: Function,
+      required: true
+    },
+    shouldRenderRightFixedShadow: {
+      type: Function,
+      required: true
+    },
+    toggleCurrentSelectableRows: {
+      type: Function,
+      required: true
+    },
+    startColumnResize: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props) {
+    const columnSorterOrder = computed(() => {
+      if (!props.isColumnSortable(props.headerCell.column)) {
+        return;
+      }
+      return props.getColumnSorterOrder(props.headerCell.column.key);
+    });
+    const headerAlign = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.headerCell.column.titleAlign) != null ? _a : props.headerCell.column.align) != null ? _b : "left";
+    });
+    const sortTriggerStyle = computed(() => {
+      if (props.headerCell.colSpan != null && props.headerCell.colSpan > 1) {
+        return {};
+      }
+      return {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      };
+    });
+    function renderHeaderTitle() {
+      const { column } = props.headerCell;
+      if (props.isSelectionColumn(column) || props.isExpandColumn(column)) {
+        return "";
+      }
+      return callOrReturn(column.title);
+    }
+    return {
+      n,
+      classes,
+      columnSorterOrder,
+      renderHeaderTitle,
+      headerAlign,
+      sortTriggerStyle
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/data-table/dataTable.css

@@ -0,0 +1 @@
+:root { --data-table-background: #fff; --data-table-surface-low-background: var(--color-surface-container-highest); --data-table-header-cell-background: #fff; --data-table-header-cell-text-color: rgba(0, 0, 0, 0.6); --data-table-body-cell-text-color: #555; --data-table-border-color: var(--color-outline); --data-table-row-hover-background: #f5f5f5; --data-table-surface-low-row-hover-background: var(--color-surface-container-highest); --data-table-plain-row-hover-background: hsla(var(--hsl-on-surface), 0.04); --data-table-sort-trigger-color: hsla(var(--hsl-on-surface), 0.42); --data-table-sort-trigger-active-color: var(--color-primary); --data-table-sort-trigger-hover-background: hsla(var(--hsl-primary), 0.08); --data-table-empty-text-color: var(--color-text-disabled); --data-table-resize-trigger-color: hsla(var(--hsl-on-surface-variant), 0.36); --data-table-fixed-shadow-color: rgba(0, 0, 0, 0.04); --data-table-border-radius: 2px; --data-table-cell-padding: 8px 16px; --data-table-selection-cell-padding: 8px 8px; --data-table-expand-cell-padding: 8px 8px; --data-table-cell-font-size: 14px; --data-table-header-font-size: 14px; --data-table-header-font-weight: 500; --data-table-row-height: 46px; --data-table-row-small-height: 40px; --data-table-row-large-height: 52px; --data-table-footer-padding: 12px 16px; --data-table-empty-padding: 48px 16px;}.var-data-table { --scrollbar-track-background: var(--data-table-background); width: 100%; border-radius: var(--data-table-border-radius); background: var(--data-table-background);}.var-data-table * { box-sizing: border-box;}.var-data-table__container { position: relative; width: 100%; max-width: 100%;}.var-data-table__table { min-width: 100%; border-spacing: 0; border-collapse: collapse; line-height: normal; table-layout: fixed;}.var-data-table__header-row { background: var(--data-table-header-cell-background);}.var-data-table__row { background: var(--data-table-background); border-bottom: 1px solid var(--data-table-border-color); transition: background-color 0.25s;}.var-data-table__row:hover { background: var(--data-table-row-hover-background);}.var-data-table__row:last-child { border-bottom: 0;}.var-data-table--surface-low { --data-table-background: var(--data-table-surface-low-background); --data-table-header-cell-background: var(--data-table-surface-low-background); --data-table-row-hover-background: var(--data-table-surface-low-row-hover-background);}.var-data-table--plain { --data-table-background: transparent; --data-table-header-cell-background: transparent; --data-table-row-hover-background: var(--data-table-plain-row-hover-background); border-radius: 0;}.var-data-table__cell { height: var(--data-table-row-height); padding: var(--data-table-cell-padding); font-size: var(--data-table-cell-font-size); vertical-align: middle;}.var-data-table--cell-bordered .var-data-table__cell:not(:last-child) { border-right: 1px solid var(--data-table-border-color);}.var-data-table__header-cell { color: var(--data-table-header-cell-text-color); font-size: var(--data-table-header-font-size); font-weight: var(--data-table-header-font-weight); background: var(--data-table-header-cell-background); box-shadow: inset 0 -1px 0 var(--data-table-border-color); position: sticky; top: 0;}.var-data-table__sort-trigger { display: flex; align-items: center; width: auto; height: auto; padding: var(--data-table-cell-padding); border: 0; border-radius: 0; background: transparent; color: var(--data-table-sort-trigger-color); cursor: pointer; text-align: inherit; transition: color 0.2s ease, background-color 0.2s ease;}.var-data-table__sort-trigger:hover,.var-data-table__sort-trigger:focus-visible { background: var(--data-table-sort-trigger-hover-background);}.var-data-table__sort-trigger:focus-visible { outline: none;}.var-data-table__sort-trigger--align-left { justify-content: flex-start;}.var-data-table__sort-trigger--align-center { justify-content: center;}.var-data-table__sort-trigger--align-right { justify-content: flex-end;}.var-data-table__sort-trigger--active { color: var(--data-table-sort-trigger-active-color);}.var-data-table__sort-trigger-text { display: inline-flex; align-items: center; min-width: 0;}.var-data-table__sort-trigger-icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 0; margin-inline-start: 8px; vertical-align: middle; color: inherit; opacity: 0.72;}.var-data-table__sort-trigger-icon-up[var-data-table-cover],.var-data-table__sort-trigger-icon-down[var-data-table-cover] { display: block; line-height: 1; opacity: 0.45; transition: opacity 0.2s ease;}.var-data-table__sort-trigger-icon-up[var-data-table-cover] { margin-bottom: -5px;}.var-data-table__sort-trigger-icon-down[var-data-table-cover] { margin-top: -5px;}.var-data-table__sort-trigger-icon--active[var-data-table-cover] { opacity: 1;}.var-data-table__resize-trigger { position: absolute; top: 0; right: -5px; z-index: 1; width: 10px; height: 100%; padding: 0; border: 0; background: transparent; cursor: col-resize; touch-action: none;}.var-data-table__resize-trigger::before { content: ''; position: absolute; top: 10px; left: 50%; bottom: 10px; width: 2px; transform: translateX(-50%); background: var(--data-table-resize-trigger-color);}.var-data-table__body-cell { color: var(--data-table-body-cell-text-color); background: inherit; background-clip: padding-box;}.var-data-table__summary-row { background: var(--data-table-background); border-top: 1px solid var(--data-table-border-color);}.var-data-table__summary-cell { color: var(--data-table-body-cell-text-color); background: inherit; background-clip: padding-box; font-weight: 500;}.var-data-table__fixed-cell { background: inherit; background-clip: padding-box;}.var-data-table__fixed-cell--shadow-right::after { content: ''; position: absolute; top: 0; right: -14px; bottom: 0; width: 14px; pointer-events: none; background: linear-gradient(to right, var(--data-table-fixed-shadow-color), transparent);}.var-data-table__fixed-cell--shadow-left::before { content: ''; position: absolute; top: 0; left: -14px; bottom: 0; width: 14px; pointer-events: none; background: linear-gradient(to left, var(--data-table-fixed-shadow-color), transparent);}.var-data-table__selection-cell,.var-data-table__expand-cell { text-align: center; min-width: 52px;}.var-data-table__selection-cell { padding: var(--data-table-selection-cell-padding);}.var-data-table__expand-cell { padding: var(--data-table-expand-cell-padding);}.var-data-table__selection-cell .var-checkbox[var-data-table-cover],.var-data-table__selection-cell .var-radio[var-data-table-cover] { transform: none;}.var-data-table__selection-cell .var-checkbox[var-data-table-cover] .var-checkbox__wrap,.var-data-table__selection-cell .var-radio[var-data-table-cover] .var-radio__wrap { display: flex; align-items: center; justify-content: center; width: 100%;}.var-data-table__expand-trigger { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;}.var-data-table__expand-trigger:disabled { opacity: 0.4; cursor: not-allowed;}.var-data-table__tree-cell { display: flex; align-items: center; min-width: 0;}.var-data-table__tree-trigger,.var-data-table__tree-indent { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; margin-right: 4px;}.var-data-table__tree-trigger { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;}.var-data-table__expanded-row { background: var(--data-table-background); border-bottom: 1px solid var(--data-table-border-color);}.var-data-table__expanded-cell { padding-top: 12px; padding-bottom: 12px;}.var-data-table__empty { display: flex; align-items: center; justify-content: center; width: 100%; color: var(--data-table-empty-text-color); padding: var(--data-table-empty-padding);}.var-data-table__footer { display: flex; align-items: center; justify-content: space-between; padding: var(--data-table-footer-padding); border-top: 1px solid var(--data-table-border-color); background: var(--data-table-background); overflow: auto;}.var-data-table__footer .var-pagination[var-data-table-cover] { margin-left: auto;}.var-data-table--small .var-data-table__cell { height: var(--data-table-row-small-height);}.var-data-table--large .var-data-table__cell { height: var(--data-table-row-large-height);}

package/es/data-table/index.mjs

@@ -0,0 +1,12 @@
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import DataTable from "./DataTable.mjs";
+import { props as dataTableProps } from "./props.mjs";
+withInstall(DataTable);
+withPropsDefaultsSetter(DataTable, dataTableProps);
+const _DataTableComponent = DataTable;
+var stdin_default = DataTable;
+export {
+  _DataTableComponent,
+  dataTableProps,
+  stdin_default as default
+};

package/es/data-table/props.mjs

@@ -0,0 +1,94 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  data: {
+    type: Array,
+    default: () => []
+  },
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  rowKey: {
+    type: [String, Number, Function],
+    default: "id"
+  },
+  rowProps: {
+    type: [Object, Function]
+  },
+  rowClass: {
+    type: [String, Array, Object, Function]
+  },
+  summary: {
+    type: Function
+  },
+  loading: Boolean,
+  pagination: {
+    type: [Boolean, Object],
+    default: true
+  },
+  remote: Boolean,
+  page: {
+    type: Number,
+    default: 1
+  },
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  total: Number,
+  maxHeight: [Number, String],
+  scrollX: [Number, String],
+  sorters: {
+    type: Array,
+    default: () => []
+  },
+  sortMode: {
+    type: String,
+    default: "single"
+  },
+  tree: Boolean,
+  surface: String,
+  cascade: {
+    type: Boolean,
+    default: true
+  },
+  childrenKey: {
+    type: String,
+    default: "children"
+  },
+  plain: Boolean,
+  checkedRowKeys: {
+    type: Array,
+    default: () => []
+  },
+  expandedRowKeys: {
+    type: Array,
+    default: () => []
+  },
+  expandedTreeRowKeys: {
+    type: Array,
+    default: () => []
+  },
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
+  cellBordered: Boolean,
+  tableLayout: {
+    type: String,
+    default: "auto"
+  },
+  size: {
+    type: String,
+    default: "normal"
+  },
+  "onUpdate:checkedRowKeys": defineListenerProp(),
+  "onUpdate:expandedRowKeys": defineListenerProp(),
+  "onUpdate:expandedTreeRowKeys": defineListenerProp(),
+  "onUpdate:page": defineListenerProp(),
+  "onUpdate:pageSize": defineListenerProp(),
+  "onUpdate:sorters": defineListenerProp()
+};
+export {
+  props
+};

package/es/data-table/span.mjs

@@ -0,0 +1,29 @@
+import { callOrReturn, clamp, floor, times } from "@varlet/shared";
+function createCellSpanMatrix(rowCount, columnCount) {
+  const rawMatrix = times(rowCount, () => Array(columnCount).fill(false));
+  return {
+    rawMatrix,
+    isCovered: (rowIndex, columnIndex) => rawMatrix[rowIndex][columnIndex],
+    cover: (rowIndex, columnIndex, rowSpan, colSpan) => {
+      times(rowSpan, (rowOffset) => {
+        times(colSpan, (columnOffset) => {
+          if (rowOffset === 0 && columnOffset === 0) {
+            return;
+          }
+          rawMatrix[rowIndex + rowOffset][columnIndex + columnOffset] = true;
+        });
+      });
+    }
+  };
+}
+function resolveSpan(span, maxSpan, context) {
+  const resolvedSpan = span == null ? 1 : floor(callOrReturn(span, context));
+  if (resolvedSpan <= 0) {
+    return 0;
+  }
+  return clamp(resolvedSpan, 1, maxSpan);
+}
+export {
+  createCellSpanMatrix,
+  resolveSpan
+};

package/es/data-table/style/index.mjs

@@ -0,0 +1,17 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../ripple/ripple.css'
+import '../../form-details/formDetails.css'
+import '../../icon/icon.css'
+import '../../hover-overlay/hoverOverlay.css'
+import '../../checkbox/checkbox.css'
+import '../../loading/loading.css'
+import '../../menu/menu.css'
+import '../../menu-select/menuSelect.css'
+import '../../menu-option/menuOption.css'
+import '../../radio/radio.css'
+import '../../field-decorator/fieldDecorator.css'
+import '../../input/input.css'
+import '../../pagination/pagination.css'
+import '../dataTable.css'
+import '../DataTableSfc.css'