@expcat/tigercat-vue 0.4.0 → 0.4.3

package/dist/{chunk-ZTJTIQZY.mjs → chunk-BS52UCMT.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, ref, watch, h } from 'vue';
-import { getSpinnerSVG, getFixedColumnOffsets, filterData, sortData, paginateData, getRowKey, calculatePagination, getTableWrapperClasses, classNames, tableBaseClasses, tableLoadingOverlayClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getCheckboxCellClasses, getTableHeaderCellClasses, getTableHeaderClasses, tableEmptyStateClasses, getTableCellClasses, getTableRowClasses, getLoadingOverlaySpinnerClasses, normalizeSvgAttrs, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, icon16ViewBox, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD } from '@expcat/tigercat-core';
+import { getSpinnerSVG, getFixedColumnOffsets, filterData, sortData, paginateData, getRowKey, calculatePagination, getTableWrapperClasses, classNames, tableBaseClasses, tableLoadingOverlayClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getExpandIconCellClasses, getCheckboxCellClasses, getTableHeaderCellClasses, getTableHeaderClasses, tableEmptyStateClasses, getTableCellClasses, getTableRowClasses, getExpandedRowClasses, getExpandedRowContentClasses, getLoadingOverlaySpinnerClasses, normalizeSvgAttrs, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, icon16ViewBox, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, getExpandIconClasses, expandChevronIcon16PathD } from '@expcat/tigercat-core';
 
 // src/components/Table.ts
 var spinnerSvg = getSpinnerSVG("spinner");
@@ -31,6 +31,20 @@ var LockIcon = (locked) => {
     [h("path", { d: locked ? lockClosedIcon24PathD : lockOpenIcon24PathD })]
   );
 };
+var ExpandIcon = (expanded) => {
+  return h(
+    "svg",
+    {
+      class: getExpandIconClasses(expanded),
+      width: "16",
+      height: "16",
+      viewBox: icon16ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true"
+    },
+    [h("path", { d: expandChevronIcon16PathD })]
+  );
+};
 var LoadingSpinner = () => {
   return h(
     "svg",
@@ -158,6 +172,12 @@ var Table = defineComponent({
     rowSelection: {
       type: Object
     },
+    /**
+     * Row expansion configuration
+     */
+    expandable: {
+      type: Object
+    },
     /**
      * Function to get row key
      */
@@ -192,7 +212,15 @@ var Table = defineComponent({
       default: "auto"
     }
   },
-  emits: ["change", "row-click", "selection-change", "sort-change", "filter-change", "page-change"],
+  emits: [
+    "change",
+    "row-click",
+    "selection-change",
+    "sort-change",
+    "filter-change",
+    "page-change",
+    "expand-change"
+  ],
   setup(props, { emit, slots }) {
     const paginationConfig = computed(() => {
       return props.pagination !== false && typeof props.pagination === "object" ? props.pagination : null;
@@ -202,6 +230,7 @@ var Table = defineComponent({
     computed(() => paginationConfig.value?.current !== void 0);
     computed(() => paginationConfig.value?.pageSize !== void 0);
     const isSelectionControlled = computed(() => props.rowSelection?.selectedRowKeys !== void 0);
+    const isExpandControlled = computed(() => props.expandable?.expandedRowKeys !== void 0);
     const uncontrolledSortState = ref(props.defaultSort);
     const uncontrolledFilterState = ref(props.defaultFilters);
     const uncontrolledCurrentPage = ref(
@@ -213,6 +242,9 @@ var Table = defineComponent({
     const uncontrolledSelectedRowKeys = ref(
       props.rowSelection?.defaultSelectedRowKeys ?? props.rowSelection?.selectedRowKeys ?? []
     );
+    const uncontrolledExpandedRowKeys = ref(
+      props.expandable?.defaultExpandedRowKeys ?? props.expandable?.expandedRowKeys ?? []
+    );
     const sortState = computed(() => props.sort ?? uncontrolledSortState.value);
     const filterState = computed(() => props.filters ?? uncontrolledFilterState.value);
     const currentPage = computed(() => {
@@ -224,6 +256,9 @@ var Table = defineComponent({
     const selectedRowKeys = computed(() => {
       return props.rowSelection?.selectedRowKeys ?? uncontrolledSelectedRowKeys.value;
     });
+    const expandedRowKeys = computed(() => {
+      return props.expandable?.expandedRowKeys ?? uncontrolledExpandedRowKeys.value;
+    });
     watch(
       () => props.sort,
       (next) => {
@@ -264,6 +299,14 @@ var Table = defineComponent({
         }
       }
     );
+    watch(
+      () => props.expandable?.expandedRowKeys,
+      (next) => {
+        if (next !== void 0) {
+          uncontrolledExpandedRowKeys.value = next;
+        }
+      }
+    );
     const fixedOverrides = ref({});
     const displayColumns = computed(() => {
       return props.columns.map((column) => {
@@ -312,6 +355,15 @@ var Table = defineComponent({
     const selectedRowKeySet = computed(() => {
       return new Set(selectedRowKeys.value);
     });
+    const expandedRowKeySet = computed(() => {
+      return new Set(expandedRowKeys.value);
+    });
+    const totalColumnCount = computed(() => {
+      let count = displayColumns.value.length;
+      if (props.rowSelection) count += 1;
+      if (props.expandable) count += 1;
+      return count;
+    });
     const paginationInfo = computed(() => {
       if (props.pagination === false) {
         return null;
@@ -395,6 +447,21 @@ var Table = defineComponent({
     }
     function handleRowClick(record, index) {
       emit("row-click", record, index);
+      if (props.expandable?.expandRowByClick) {
+        const key = getRowKey(record, props.rowKey, index);
+        const isExpandable = props.expandable?.rowExpandable ? props.expandable.rowExpandable(record) : true;
+        if (isExpandable) {
+          handleToggleExpand(key, record);
+        }
+      }
+    }
+    function handleToggleExpand(key, record) {
+      const isExpanded = expandedRowKeySet.value.has(key);
+      const newKeys = isExpanded ? expandedRowKeys.value.filter((k) => k !== key) : [...expandedRowKeys.value, key];
+      if (!isExpandControlled.value) {
+        uncontrolledExpandedRowKeys.value = newKeys;
+      }
+      emit("expand-change", newKeys, record, !isExpanded);
     }
     function handleSelectRow(key, checked) {
       let newKeys;
@@ -437,6 +504,15 @@ var Table = defineComponent({
     });
     function renderTableHeader() {
       const headerCells = [];
+      const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
+      const expandAtEnd = props.expandable && props.expandable.expandIconPosition === "end";
+      const expandHeaderTh = props.expandable ? h("th", {
+        class: getExpandIconCellClasses(props.size),
+        "aria-label": "Expand"
+      }) : null;
+      if (expandAtStart && expandHeaderTh) {
+        headerCells.push(expandHeaderTh);
+      }
       if (props.rowSelection && props.rowSelection.showCheckbox !== false && props.rowSelection.type !== "radio") {
         headerCells.push(
           h(
@@ -556,6 +632,9 @@ var Table = defineComponent({
           )
         );
       });
+      if (expandAtEnd && expandHeaderTh) {
+        headerCells.push(expandHeaderTh);
+      }
       return h("thead", { class: getTableHeaderClasses(props.stickyHeader) }, [
         h("tr", headerCells)
       ]);
@@ -570,7 +649,7 @@ var Table = defineComponent({
             h(
               "td",
               {
-                colspan: displayColumns.value.length + (props.rowSelection ? 1 : 0),
+                colspan: totalColumnCount.value,
                 class: tableEmptyStateClasses
               },
               [
@@ -587,11 +666,39 @@ var Table = defineComponent({
           ])
         ]);
       }
-      const rows = paginatedData.value.map((record, index) => {
+      const rows = paginatedData.value.flatMap((record, index) => {
         const key = paginatedRowKeys.value[index];
         const isSelected = selectedRowKeySet.value.has(key);
+        const isExpanded = expandedRowKeySet.value.has(key);
+        const isRowExpandable = props.expandable ? props.expandable.rowExpandable ? props.expandable.rowExpandable(record) : true : false;
         const rowClass = typeof props.rowClassName === "function" ? props.rowClassName(record, index) : props.rowClassName;
         const cells = [];
+        const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
+        const expandToggleCell = props.expandable ? h(
+          "td",
+          {
+            class: getExpandIconCellClasses(props.size)
+          },
+          isRowExpandable ? [
+            h(
+              "button",
+              {
+                type: "button",
+                class: "inline-flex items-center justify-center",
+                "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                "aria-expanded": isExpanded,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleToggleExpand(key, record);
+                }
+              },
+              [ExpandIcon(isExpanded)]
+            )
+          ] : []
+        ) : null;
+        if (expandAtStart && expandToggleCell) {
+          cells.push(expandToggleCell);
+        }
         if (props.rowSelection && props.rowSelection.showCheckbox !== false) {
           const checkboxProps = props.rowSelection?.getCheckboxProps?.(record) || {};
           cells.push(
@@ -606,6 +713,7 @@ var Table = defineComponent({
                   class: props.rowSelection?.type === "radio" ? "border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]" : "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
                   checked: isSelected,
                   disabled: checkboxProps.disabled,
+                  onClick: (e) => e.stopPropagation(),
                   onChange: (e) => handleSelectRow(key, e.target.checked)
                 })
               ]
@@ -647,12 +755,15 @@ var Table = defineComponent({
                 style
               },
               [
-                column.render ? slots[`cell-${column.key}`]?.({ record, index }) || column.render(record, index) : cellValue
+                slots[`cell-${column.key}`]?.({ record, index }) ?? (column.render ? column.render(record, index) : cellValue)
               ]
             )
           );
         });
-        return h(
+        if (!expandAtStart && expandToggleCell) {
+          cells.push(expandToggleCell);
+        }
+        const rowNode = h(
           "tr",
           {
             key,
@@ -664,6 +775,28 @@ var Table = defineComponent({
           },
           cells
         );
+        if (props.expandable && isExpanded && isRowExpandable) {
+          const expandedContent = slots["expanded-row"]?.({ record, index }) || (props.expandable.expandedRowRender ? props.expandable.expandedRowRender(record, index) : null);
+          const expandedRow = h(
+            "tr",
+            {
+              key: `${key}-expanded`,
+              class: getExpandedRowClasses()
+            },
+            [
+              h(
+                "td",
+                {
+                  colspan: totalColumnCount.value,
+                  class: getExpandedRowContentClasses(props.size)
+                },
+                [expandedContent]
+              )
+            ]
+          );
+          return [rowNode, expandedRow];
+        }
+        return rowNode;
       });
       return h("tbody", rows);
     }

package/dist/{chunk-ND4XDRYR.mjs → chunk-CWDBL5YC.mjs}

@@ -1,4 +1,4 @@
-import { Table } from './chunk-ZTJTIQZY.mjs';
+import { Table } from './chunk-BS52UCMT.mjs';
 import { Select } from './chunk-GALASVSG.mjs';
 import { Pagination } from './chunk-NHCCPMLC.mjs';
 import { Input } from './chunk-VURU7TLN.mjs';

package/dist/{chunk-KUJ75OHX.js → chunk-ESALMEHU.js}

@@ -87,7 +87,9 @@ var SubMenu = vue.defineComponent({
       return props.collapsed ?? (menuContext ? menuContext.collapsed.value : false);
     });
     const isPopup = vue.computed(() => {
-      return !!menuContext && menuContext.mode.value === "vertical" && effectiveCollapsed.value;
+      if (!menuContext) return false;
+      if (menuContext.mode.value === "horizontal") return true;
+      return menuContext.mode.value === "vertical" && effectiveCollapsed.value;
     });
     const isExpanded = vue.computed(() => {
       if (menuContext?.mode.value === "horizontal" || isPopup.value) {
@@ -111,12 +113,13 @@ var SubMenu = vue.defineComponent({
     const contentClasses = vue.computed(() => {
       if (!menuContext) return "";
       if (menuContext.mode.value === "horizontal") {
-        return tigercatCore.submenuContentHorizontalClasses;
+        return props.level === 0 ? tigercatCore.submenuContentHorizontalClasses : tigercatCore.submenuContentHorizontalNestedClasses;
       }
       if (isPopup.value) return tigercatCore.submenuContentPopupClasses;
       if (menuContext.mode.value === "inline") return tigercatCore.submenuContentInlineClasses;
       return tigercatCore.submenuContentVerticalClasses;
     });
+    const popupZIndex = vue.computed(() => isPopup.value ? tigercatCore.getSubmenuPopupZIndex(props.level) : {});
     const handleTitleClick = () => {
       if (!menuContext || props.disabled) return;
       if (menuContext.mode.value === "horizontal") return;
@@ -208,7 +211,7 @@ var SubMenu = vue.defineComponent({
       }
     };
     const indentStyle = vue.computed(() => {
-      if (!menuContext || menuContext.mode.value !== "inline" || props.level === 0) {
+      if (!menuContext || menuContext.mode.value === "horizontal" || props.level === 0) {
         return {};
       }
       return tigercatCore.getMenuItemIndent(props.level, menuContext.inlineIndent.value);
@@ -226,9 +229,6 @@ var SubMenu = vue.defineComponent({
         const nextProps = {
           level: existingProps.level ?? nextLevel
         };
-        if (isPopup.value) {
-          nextProps.collapsed = false;
-        }
         return vue.cloneVNode(node, nextProps);
       });
     };
@@ -276,12 +276,13 @@ var SubMenu = vue.defineComponent({
         },
         titleChildren
       );
-      const contentNode = menuContext.mode.value === "horizontal" || isPopup.value ? vue.h(
+      const contentNode = isPopup.value ? vue.h(
         "ul",
         {
           class: contentClasses.value,
           style: {
-            display: isExpanded.value ? "block" : "none"
+            display: isExpanded.value ? "block" : "none",
+            ...popupZIndex.value
           },
           role: "menu",
           "aria-hidden": isExpanded.value ? void 0 : "true"
@@ -326,7 +327,7 @@ var SubMenu = vue.defineComponent({
       return vue.h(
         "li",
         {
-          class: menuContext.mode.value === "horizontal" || isPopup.value ? "relative" : "",
+          class: isPopup.value ? "relative" : "",
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
           role: "none"

package/dist/{chunk-KVZLGW45.js → chunk-ETTYERGO.js}

@@ -23,6 +23,15 @@ var Sidebar = vue.defineComponent({
       type: String,
       default: "256px"
     },
+    /**
+     * Width when collapsed (mini mode).
+     * Set to '0px' to fully hide the sidebar when collapsed.
+     * @default '64px'
+     */
+    collapsedWidth: {
+      type: String,
+      default: "64px"
+    },
     /**
      * Whether the sidebar is collapsed
      * @default false
@@ -43,14 +52,14 @@ var Sidebar = vue.defineComponent({
     const sidebarClasses = vue.computed(
       () => tigercatCore.classNames(
         tigercatCore.layoutSidebarClasses,
+        props.collapsed && tigercatCore.layoutSidebarCollapsedClasses,
         props.className,
         tigercatCore.coerceClassValue(attrs.class)
       )
     );
-    const sidebarStyle = vue.computed(() => ({
-      width: props.collapsed ? "0px" : props.width,
-      minWidth: props.collapsed ? "0px" : props.width
-    }));
+    const sidebarStyle = vue.computed(
+      () => tigercatCore.getSidebarStyle(props.collapsed, props.width, props.collapsedWidth)
+    );
     return () => vue.h(
       "aside",
       {
@@ -58,7 +67,7 @@ var Sidebar = vue.defineComponent({
         class: sidebarClasses.value,
         style: tigercatCore.mergeStyleValues(props.style, sidebarStyle.value)
       },
-      !props.collapsed && slots.default?.()
+      slots.default?.()
     );
   }
 });

package/dist/{chunk-YZK2HXRT.js → chunk-HBZHIEDV.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk3PQIZBT5_js = require('./chunk-3PQIZBT5.js');
+var chunkNUFSJMVC_js = require('./chunk-NUFSJMVC.js');
 var chunkHNQZ5JRB_js = require('./chunk-HNQZ5JRB.js');
 var chunkAGAJJYP2_js = require('./chunk-AGAJJYP2.js');
 var chunkWC4B72TZ_js = require('./chunk-WC4B72TZ.js');
@@ -338,7 +338,7 @@ var DataTableWithToolbar = vue.defineComponent({
         },
         [
           renderToolbar(),
-          vue.h(chunk3PQIZBT5_js.Table, tableProps),
+          vue.h(chunkNUFSJMVC_js.Table, tableProps),
           showPagination ? vue.h(chunkAGAJJYP2_js.Pagination, {
             ...props.pagination,
             onChange: (current, pageSize) => emit("page-change", current, pageSize),