@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-4SGEY2EB.mjs

@@ -0,0 +1,236 @@
+import {
+  ChartCanvas
+} from "./chunk-6K5BLE4Q.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/OrgChart.ts
+import { computed, defineComponent, h, ref } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  computeOrgChartLayout,
+  getCartesianChartShellClasses,
+  getChartLabels,
+  mergeTigerLocale,
+  normalizeChartPadding,
+  getOrgChartNodeAriaLabel,
+  getOrgChartNodeClasses,
+  orgChartLinkClasses,
+  orgChartNodeLabelClasses,
+  orgChartNodeRectClasses,
+  orgChartNodeSubtitleClasses,
+  orgChartNodeTitleClasses
+} from "@expcat/tigercat-core";
+var OrgChart = defineComponent({
+  name: "TigerOrgChart",
+  inheritAttrs: false,
+  props: {
+    data: { type: [Object, Array], required: true },
+    width: { type: Number, default: 720 },
+    height: { type: Number, default: 420 },
+    padding: { type: [Number, Object], default: 24 },
+    nodeWidth: { type: Number, default: 160 },
+    nodeHeight: { type: Number, default: 72 },
+    levelGap: { type: Number, default: 80 },
+    siblingGap: { type: Number, default: 32 },
+    direction: { type: String, default: "vertical" },
+    showAvatars: { type: Boolean, default: true },
+    showSubtitles: { type: Boolean, default: true },
+    hoverable: { type: Boolean, default: false },
+    selectable: { type: Boolean, default: false },
+    selectedId: {
+      type: [String, Number, null],
+      default: void 0
+    },
+    activeOpacity: { type: Number, default: 1 },
+    inactiveOpacity: { type: Number, default: 0.25 },
+    colors: { type: Array },
+    title: { type: String },
+    desc: { type: String },
+    ariaLabel: { type: String },
+    className: { type: String },
+    onNodeClick: { type: Function }
+  },
+  emits: ["update:selectedId", "node-click", "node-hover"],
+  setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(() => getChartLabels(mergeTigerLocale(config.value.locale)));
+    const innerSelectedId = ref(null);
+    const hoveredId = ref(null);
+    const resolvedSelectedId = computed(
+      () => props.selectedId === void 0 ? innerSelectedId.value : props.selectedId
+    );
+    const layout = computed(
+      () => computeOrgChartLayout(props.data, {
+        nodeWidth: props.nodeWidth,
+        nodeHeight: props.nodeHeight,
+        levelGap: props.levelGap,
+        siblingGap: props.siblingGap,
+        direction: props.direction,
+        colors: props.colors
+      })
+    );
+    const resolvedPadding = computed(() => normalizeChartPadding(props.padding));
+    const plotWidth = computed(
+      () => Math.max(
+        props.width,
+        layout.value.width + resolvedPadding.value.left + resolvedPadding.value.right
+      )
+    );
+    const plotHeight = computed(
+      () => Math.max(
+        props.height,
+        layout.value.height + resolvedPadding.value.top + resolvedPadding.value.bottom
+      )
+    );
+    const offsetX = computed(
+      () => Math.max(
+        0,
+        (plotWidth.value - resolvedPadding.value.left - resolvedPadding.value.right - layout.value.width) / 2
+      )
+    );
+    const offsetY = computed(
+      () => Math.max(
+        0,
+        (plotHeight.value - resolvedPadding.value.top - resolvedPadding.value.bottom - layout.value.height) / 2
+      )
+    );
+    const activeId = computed(() => resolvedSelectedId.value ?? hoveredId.value);
+    const selectNode = (node) => {
+      if (node.node.disabled) return;
+      if (props.selectable) {
+        const nextId = resolvedSelectedId.value === node.id ? null : node.id;
+        if (props.selectedId === void 0) innerSelectedId.value = nextId;
+        emit("update:selectedId", nextId);
+      }
+      props.onNodeClick?.(node.node);
+      emit("node-click", node.node);
+    };
+    const setHoveredNode = (node) => {
+      if (!props.hoverable) return;
+      hoveredId.value = node?.id ?? null;
+      emit("node-hover", node?.node ?? null);
+    };
+    const getNodeOpacity = (node) => {
+      if (activeId.value === null) return props.activeOpacity;
+      return activeId.value === node.id ? props.activeOpacity : props.inactiveOpacity;
+    };
+    return () => h(
+      "div",
+      {
+        class: getCartesianChartShellClasses({
+          showLegend: false,
+          className: classNames(coerceClassValue(attrs.class), props.className)
+        })
+      },
+      [
+        h(
+          ChartCanvas,
+          {
+            width: plotWidth.value,
+            height: plotHeight.value,
+            padding: props.padding,
+            title: props.title,
+            desc: props.desc,
+            "aria-label": props.ariaLabel ?? (props.title ? void 0 : labels.value.orgChartAriaLabel)
+          },
+          {
+            default: () => h(
+              "g",
+              {
+                transform: `translate(${offsetX.value}, ${offsetY.value})`,
+                "data-series-type": "org-chart"
+              },
+              [
+                h(
+                  "g",
+                  { "data-org-chart-links": "true" },
+                  layout.value.links.map(
+                    (link) => h("path", {
+                      key: `${link.sourceId}-${link.targetId}`,
+                      d: link.path,
+                      class: orgChartLinkClasses
+                    })
+                  )
+                ),
+                h(
+                  "g",
+                  { "data-org-chart-nodes": "true" },
+                  layout.value.nodes.map((node) => {
+                    const selected = resolvedSelectedId.value === node.id;
+                    const interactive = (props.hoverable || props.selectable || typeof props.onNodeClick === "function") && !node.node.disabled;
+                    const textStart = props.showAvatars && node.node.avatar ? 58 : 16;
+                    return h(
+                      "g",
+                      {
+                        key: node.id,
+                        transform: `translate(${node.x}, ${node.y})`,
+                        class: getOrgChartNodeClasses(interactive, selected),
+                        opacity: getNodeOpacity(node),
+                        role: interactive ? "button" : "group",
+                        tabindex: interactive ? 0 : void 0,
+                        "aria-label": getOrgChartNodeAriaLabel(node.node),
+                        onMouseenter: () => setHoveredNode(node),
+                        onMouseleave: () => setHoveredNode(null),
+                        onClick: () => selectNode(node),
+                        onKeydown: (event) => {
+                          if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            selectNode(node);
+                          }
+                        }
+                      },
+                      [
+                        h("rect", {
+                          width: node.width,
+                          height: node.height,
+                          rx: 8,
+                          class: orgChartNodeRectClasses,
+                          stroke: selected ? node.color : void 0,
+                          strokeWidth: selected ? 2 : 1
+                        }),
+                        h("rect", { width: 4, height: node.height, rx: 2, fill: node.color }),
+                        props.showAvatars && node.node.avatar ? h("image", {
+                          href: node.node.avatar,
+                          x: 16,
+                          y: 16,
+                          width: 32,
+                          height: 32,
+                          preserveAspectRatio: "xMidYMid slice",
+                          "aria-hidden": "true"
+                        }) : void 0,
+                        h(
+                          "text",
+                          { x: textStart, y: 26, class: orgChartNodeLabelClasses },
+                          node.node.label
+                        ),
+                        node.node.title ? h(
+                          "text",
+                          { x: textStart, y: 44, class: orgChartNodeTitleClasses },
+                          node.node.title
+                        ) : void 0,
+                        props.showSubtitles && node.node.subtitle ? h(
+                          "text",
+                          { x: textStart, y: 60, class: orgChartNodeSubtitleClasses },
+                          node.node.subtitle
+                        ) : void 0
+                      ]
+                    );
+                  })
+                )
+              ]
+            )
+          }
+        )
+      ]
+    );
+  }
+});
+var OrgChart_default = OrgChart;
+
+export {
+  OrgChart,
+  OrgChart_default
+};

package/dist/chunk-55BVZU4O.mjs

@@ -0,0 +1,417 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/VirtualTable.ts
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  getCurrentInstance
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  isActivationKey,
+  mergeStyleValues,
+  calculateVirtualColumnRange,
+  EMPTY_VIRTUAL_TABLE_COLUMNS,
+  EMPTY_VIRTUAL_TABLE_ROWS,
+  getVirtualTableContainerClasses,
+  getVirtualTableRowClasses,
+  getVirtualTableRowWindow,
+  getVirtualTableSpacerHeights,
+  getVirtualTableColumnWidths,
+  getNextVirtualTableSelection,
+  getVirtualTableFixedInfo,
+  getVirtualTableFixedCellStyle,
+  getVirtualTableFixedCellClasses,
+  getVirtualTableFixedHeaderCellClasses,
+  getTableColgroup,
+  isVirtualTableCellControlTarget,
+  resolveVirtualTableColumnVirtualization,
+  resolveVirtualTableRowIdentity,
+  resolveVirtualTableSelectedKeys,
+  resolveVirtualTableWidth,
+  tableBaseClasses,
+  tableVirtualSpacerCellClasses,
+  virtualTableHeaderClasses,
+  virtualTableHeaderCellClasses,
+  virtualTableCellClasses,
+  virtualTableEmptyClasses,
+  virtualTableLoadingClasses,
+  virtualTableRowFocusClasses,
+  VIRTUAL_TABLE_HEADER_ROW_HEIGHT,
+  resolveLocaleText,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+function alignClass(align) {
+  if (align === "center") return "text-center";
+  if (align === "right") return "text-end";
+  return "text-start";
+}
+var VirtualTable = defineComponent({
+  name: "TigerVirtualTable",
+  inheritAttrs: false,
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => EMPTY_VIRTUAL_TABLE_ROWS
+    },
+    columns: {
+      type: Array,
+      default: () => EMPTY_VIRTUAL_TABLE_COLUMNS
+    },
+    virtualItemHeight: { type: Number, default: 48 },
+    virtualHeight: { type: Number, default: 400 },
+    width: { type: [Number, String], default: "auto" },
+    overscan: { type: Number, default: 5 },
+    stickyHeader: { type: Boolean, default: true },
+    virtualizeColumns: { type: Boolean, default: false },
+    rowKey: {
+      type: [String, Function],
+      default: "id"
+    },
+    rowClassName: {
+      type: [String, Function],
+      default: void 0
+    },
+    loading: { type: Boolean, default: false },
+    emptyText: { type: String, default: void 0 },
+    rowSelection: {
+      type: Object,
+      default: void 0
+    },
+    striped: { type: Boolean, default: false },
+    bordered: { type: Boolean, default: false },
+    className: { type: String, default: void 0 },
+    locale: { type: Object, default: void 0 },
+    onRowClick: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: ["row-click", "selection-change", "update:rowSelection"],
+  setup(props, { emit, attrs, expose }) {
+    const instance = getCurrentInstance();
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const containerRef = ref(null);
+    const scrollTop = ref(0);
+    const scrollLeft = ref(0);
+    const activeIndex = ref(0);
+    const resolvedWidth = computed(() => resolveVirtualTableWidth(props.width));
+    const resolvedData = computed(() => props.dataSource ?? EMPTY_VIRTUAL_TABLE_ROWS);
+    const resolvedColumns = computed(() => props.columns ?? EMPTY_VIRTUAL_TABLE_COLUMNS);
+    const uncontrolledSelectedKeys = ref(
+      resolveVirtualTableSelectedKeys(props.rowSelection?.defaultSelectedRowKeys)
+    );
+    const isSelectionControlled = computed(() => props.rowSelection?.selectedRowKeys !== void 0);
+    const selectedKeys = computed(
+      () => isSelectionControlled.value ? resolveVirtualTableSelectedKeys(props.rowSelection?.selectedRowKeys) : uncontrolledSelectedKeys.value
+    );
+    const hasSelection = computed(() => !!props.rowSelection);
+    const hasRowClick = () => typeof props.onRowClick === "function" || typeof instance?.vnode.props?.onRowClick === "function";
+    function commitSelection(nextKeys) {
+      if (!isSelectionControlled.value) {
+        uncontrolledSelectedKeys.value = nextKeys;
+      }
+      emit("selection-change", nextKeys);
+      emit("update:rowSelection", { ...props.rowSelection, selectedRowKeys: nextKeys });
+    }
+    function toggleRowSelection(key, row) {
+      if (!props.rowSelection || props.rowSelection.getCheckboxProps?.(row)?.disabled) return;
+      commitSelection(
+        getNextVirtualTableSelection({
+          type: props.rowSelection.type,
+          selectedKeys: selectedKeys.value,
+          key
+        })
+      );
+    }
+    const range = computed(
+      () => getVirtualTableRowWindow(
+        scrollTop.value,
+        props.virtualHeight,
+        resolvedData.value.length,
+        props.virtualItemHeight,
+        props.overscan,
+        props.stickyHeader ? VIRTUAL_TABLE_HEADER_ROW_HEIGHT : 0
+      )
+    );
+    const visibleData = computed(() => resolvedData.value.slice(range.value.start, range.value.end));
+    function scrollToIndex(index) {
+      const next = Math.max(0, index) * props.virtualItemHeight;
+      const el = containerRef.value;
+      if (el) el.scrollTop = next;
+      scrollTop.value = next;
+    }
+    expose({ scrollToIndex });
+    function onScroll() {
+      if (containerRef.value) {
+        scrollTop.value = containerRef.value.scrollTop;
+        scrollLeft.value = containerRef.value.scrollLeft;
+      }
+    }
+    const columnWidths = computed(() => getVirtualTableColumnWidths(resolvedColumns.value));
+    const resolveRowClassName = (row, index) => typeof props.rowClassName === "function" ? props.rowClassName(row, index) : props.rowClassName;
+    const selectedSet = computed(() => new Set(selectedKeys.value));
+    const fixedInfo = computed(() => getVirtualTableFixedInfo(resolvedColumns.value));
+    return () => {
+      const attrsRecord = attrs;
+      const {
+        class: attrsClass,
+        style: attrsStyle,
+        ...restAttrs
+      } = attrsRecord;
+      const containerClasses = classNames(
+        getVirtualTableContainerClasses(props.bordered, props.className),
+        coerceClassValue(attrsClass)
+      );
+      const fi = fixedInfo.value;
+      const colVirtual = resolveVirtualTableColumnVirtualization({
+        virtualizeColumns: props.virtualizeColumns,
+        hasFixedColumns: fi.hasFixedColumns,
+        width: resolvedWidth.value
+      });
+      const colRange = colVirtual.active ? calculateVirtualColumnRange(
+        scrollLeft.value,
+        colVirtual.viewportWidth,
+        columnWidths.value
+      ) : void 0;
+      const visibleColumns = colRange ? resolvedColumns.value.slice(colRange.start, colRange.end) : resolvedColumns.value;
+      const colIndexOffset = colRange ? colRange.start : 0;
+      const colgroupEntries = getTableColgroup({
+        columns: visibleColumns,
+        size: "md",
+        hasSelectionColumn: false,
+        expand: false
+      });
+      const colSpan = visibleColumns.length + (colRange && colRange.leftPad > 0 ? 1 : 0) + (colRange && colRange.rightPad > 0 ? 1 : 0);
+      const spacers = getVirtualTableSpacerHeights(range.value, props.virtualItemHeight);
+      const interactive = hasSelection.value || hasRowClick();
+      const focusIndex = visibleData.value.some(
+        (_, localIdx) => range.value.start + localIdx === activeIndex.value
+      ) ? activeIndex.value : range.value.start;
+      const headerCells = visibleColumns.map((col) => {
+        const widthStyle = col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : {};
+        const stickyStyle = getVirtualTableFixedCellStyle(col.key, fi);
+        return h(
+          "th",
+          {
+            key: col.key,
+            class: classNames(
+              virtualTableHeaderCellClasses,
+              alignClass(col.align),
+              getVirtualTableFixedHeaderCellClasses(col, fi, props.stickyHeader)
+            ),
+            style: { ...widthStyle, ...stickyStyle }
+          },
+          [col.renderHeader ? col.renderHeader() : col.title ?? ""]
+        );
+      });
+      const headerRow = h("tr", { "aria-rowindex": 1 }, [
+        colRange && colRange.leftPad > 0 ? h("th", {
+          key: "__left-pad",
+          "aria-hidden": true,
+          style: { width: `${colRange.leftPad}px`, padding: 0 }
+        }) : null,
+        ...headerCells,
+        colRange && colRange.rightPad > 0 ? h("th", {
+          key: "__right-pad",
+          "aria-hidden": true,
+          style: { width: `${colRange.rightPad}px`, padding: 0 }
+        }) : null
+      ]);
+      const thead = h(
+        "thead",
+        { class: props.stickyHeader ? virtualTableHeaderClasses : void 0 },
+        [headerRow]
+      );
+      const rows = visibleData.value.map((row, localIdx) => {
+        const globalIdx = range.value.start + localIdx;
+        const identity = props.rowSelection?.getRowKey ? {
+          key: props.rowSelection.getRowKey(row),
+          domKey: props.rowSelection.getRowKey(row)
+        } : resolveVirtualTableRowIdentity(
+          row,
+          globalIdx,
+          props.rowKey
+        );
+        const isSelected = identity.key !== void 0 && selectedSet.value.has(identity.key);
+        const isDisabled = !!props.rowSelection?.getCheckboxProps?.(row)?.disabled;
+        const tabIndex = props.loading || !interactive || isDisabled ? void 0 : globalIdx === focusIndex ? 0 : -1;
+        const activate = (event) => {
+          if (event && isVirtualTableCellControlTarget(event.target)) return;
+          emit("row-click", row, globalIdx);
+          if (hasSelection.value && identity.key !== void 0 && !isDisabled) {
+            toggleRowSelection(identity.key, row);
+          }
+        };
+        const cells = visibleColumns.map((col, colIdx) => {
+          const dataKey = col.dataKey || col.key;
+          const value = row[dataKey];
+          return h(
+            "td",
+            {
+              key: col.key,
+              "aria-colindex": colIndexOffset + colIdx + 1,
+              class: classNames(
+                virtualTableCellClasses,
+                alignClass(col.align),
+                getVirtualTableFixedCellClasses({
+                  column: col,
+                  record: row,
+                  rowIndex: globalIdx,
+                  striped: props.striped,
+                  selected: isSelected,
+                  hoverable: true,
+                  fixedInfo: fi
+                })
+              ),
+              style: {
+                height: `${props.virtualItemHeight}px`,
+                overflow: "hidden",
+                ...getVirtualTableFixedCellStyle(col.key, fi)
+              }
+            },
+            [col.render ? col.render(row, globalIdx) : value]
+          );
+        });
+        return h(
+          "tr",
+          {
+            key: identity.domKey,
+            class: classNames(
+              getVirtualTableRowClasses(globalIdx, props.striped, isSelected),
+              interactive && virtualTableRowFocusClasses,
+              resolveRowClassName(row, globalIdx)
+            ),
+            style: { height: `${props.virtualItemHeight}px`, overflow: "hidden" },
+            "aria-rowindex": globalIdx + 2,
+            "aria-selected": hasSelection.value ? isSelected : void 0,
+            "aria-disabled": isDisabled || void 0,
+            tabindex: tabIndex,
+            onClick: interactive ? (event) => activate(event) : void 0,
+            onKeydown: interactive ? (e) => {
+              if (isActivationKey(e)) {
+                e.preventDefault();
+                activate(e);
+                return;
+              }
+              if (e.key === "ArrowDown") {
+                e.preventDefault();
+                const next = Math.max(0, Math.min(resolvedData.value.length - 1, globalIdx + 1));
+                activeIndex.value = next;
+                if (next < range.value.start || next >= range.value.end) scrollToIndex(next);
+              }
+              if (e.key === "ArrowUp") {
+                e.preventDefault();
+                const next = Math.max(0, Math.min(resolvedData.value.length - 1, globalIdx - 1));
+                activeIndex.value = next;
+                if (next < range.value.start || next >= range.value.end) scrollToIndex(next);
+              }
+            } : void 0
+          },
+          [
+            colRange && colRange.leftPad > 0 ? h("td", {
+              key: "__left-pad",
+              "aria-hidden": true,
+              style: { width: `${colRange.leftPad}px`, padding: 0 }
+            }) : null,
+            ...cells,
+            colRange && colRange.rightPad > 0 ? h("td", {
+              key: "__right-pad",
+              "aria-hidden": true,
+              style: { width: `${colRange.rightPad}px`, padding: 0 }
+            }) : null
+          ]
+        );
+      });
+      const topSpacer = spacers.top > 0 ? h(
+        "tr",
+        {
+          key: "__top-spacer",
+          "aria-hidden": true,
+          "data-tiger-table-virtual-spacer": ""
+        },
+        [
+          h("td", {
+            colSpan: Math.max(1, colSpan),
+            class: tableVirtualSpacerCellClasses,
+            style: { height: `${spacers.top}px` }
+          })
+        ]
+      ) : null;
+      const bottomSpacer = spacers.bottom > 0 ? h(
+        "tr",
+        {
+          key: "__bottom-spacer",
+          "aria-hidden": true,
+          "data-tiger-table-virtual-spacer": ""
+        },
+        [
+          h("td", {
+            colSpan: Math.max(1, colSpan),
+            class: tableVirtualSpacerCellClasses,
+            style: { height: `${spacers.bottom}px` }
+          })
+        ]
+      ) : null;
+      const tbody = h("tbody", {}, [topSpacer, ...rows, bottomSpacer]);
+      const colgroup = colgroupEntries.length > 0 ? h("colgroup", {}, [
+        colRange && colRange.leftPad > 0 ? h("col", { key: "__left-pad", style: { width: `${colRange.leftPad}px` } }) : null,
+        ...colgroupEntries.map(
+          (entry) => h("col", {
+            key: entry.key,
+            "data-tiger-table-col": entry.key,
+            style: entry.width ? { width: entry.width } : void 0
+          })
+        ),
+        colRange && colRange.rightPad > 0 ? h("col", { key: "__right-pad", style: { width: `${colRange.rightPad}px` } }) : null
+      ]) : null;
+      const table = h(
+        "table",
+        {
+          class: classNames(tableBaseClasses, "table-fixed"),
+          style: fi.minTableWidth > 0 ? { minWidth: `${fi.minTableWidth}px` } : void 0,
+          "aria-rowcount": resolvedData.value.length + 1,
+          "aria-colcount": resolvedColumns.value.length
+        },
+        [colgroup, thead, tbody]
+      );
+      const emptyEl = resolvedData.value.length === 0 && !props.loading ? h(
+        "div",
+        { class: virtualTableEmptyClasses },
+        resolveLocaleText("No data", props.emptyText, mergedLocale.value?.common?.emptyText)
+      ) : null;
+      const loadingEl = props.loading ? h(
+        "div",
+        { class: virtualTableLoadingClasses, "aria-live": "polite" },
+        resolveLocaleText("Loading...", mergedLocale.value?.common?.loadingText)
+      ) : null;
+      return h(
+        "div",
+        {
+          ...restAttrs,
+          ref: containerRef,
+          class: containerClasses,
+          style: mergeStyleValues(attrsStyle, {
+            height: `${props.virtualHeight}px`,
+            ...resolvedWidth.value !== "auto" ? { width: `${resolvedWidth.value}px` } : {}
+          }),
+          onScroll,
+          "aria-busy": props.loading || void 0
+        },
+        [table, emptyEl, loadingEl]
+      );
+    };
+  }
+});
+var VirtualTable_default = VirtualTable;
+
+export {
+  VirtualTable,
+  VirtualTable_default
+};