@expcat/tigercat-vue 0.3.70 → 0.4.2

package/dist/{chunk-ZTJTIQZY.mjs → chunk-DEFEAEYE.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, getExpandCellClasses, getCheckboxCellClasses, getTableHeaderCellClasses, getTableHeaderClasses, tableEmptyStateClasses, expandIconButtonClasses, getExpandIconRotationClasses, normalizeSvgAttrs, icon16ViewBox, getTableCellClasses, getTableRowClasses, expandedRowContentClasses, getLoadingOverlaySpinnerClasses, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD } from '@expcat/tigercat-core';
 
 // src/components/Table.ts
 var spinnerSvg = getSpinnerSVG("spinner");
@@ -158,6 +158,12 @@ var Table = defineComponent({
     rowSelection: {
       type: Object
     },
+    /**
+     * Row expansion configuration
+     */
+    expandable: {
+      type: Object
+    },
     /**
      * Function to get row key
      */
@@ -192,7 +198,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",
+    "expanded-rows-change"
+  ],
   setup(props, { emit, slots }) {
     const paginationConfig = computed(() => {
       return props.pagination !== false && typeof props.pagination === "object" ? props.pagination : null;
@@ -202,6 +216,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 +228,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 +242,10 @@ var Table = defineComponent({
     const selectedRowKeys = computed(() => {
       return props.rowSelection?.selectedRowKeys ?? uncontrolledSelectedRowKeys.value;
     });
+    const expandedRowKeys = computed(() => {
+      return props.expandable?.expandedRowKeys ?? uncontrolledExpandedRowKeys.value;
+    });
+    const expandedRowKeySet = computed(() => new Set(expandedRowKeys.value));
     watch(
       () => props.sort,
       (next) => {
@@ -435,8 +457,25 @@ var Table = defineComponent({
     const someSelected = computed(() => {
       return selectedRowKeys.value.length > 0 && !allSelected.value;
     });
+    function handleToggleExpand(key) {
+      const isExp = expandedRowKeySet.value.has(key);
+      const next = isExp ? expandedRowKeys.value.filter((k) => k !== key) : [...expandedRowKeys.value, key];
+      if (!isExpandControlled.value) {
+        uncontrolledExpandedRowKeys.value = next;
+      }
+      emit("expanded-rows-change", next);
+    }
+    const totalColumnCount = computed(() => {
+      let count = displayColumns.value.length;
+      if (props.rowSelection && props.rowSelection.showCheckbox !== false) count++;
+      if (props.expandable) count++;
+      return count;
+    });
     function renderTableHeader() {
       const headerCells = [];
+      if (props.expandable && props.expandable.expandIconPosition !== "end") {
+        headerCells.push(h("th", { class: getExpandCellClasses(props.size) }));
+      }
       if (props.rowSelection && props.rowSelection.showCheckbox !== false && props.rowSelection.type !== "radio") {
         headerCells.push(
           h(
@@ -556,6 +595,9 @@ var Table = defineComponent({
           )
         );
       });
+      if (props.expandable && props.expandable.expandIconPosition === "end") {
+        headerCells.push(h("th", { class: getExpandCellClasses(props.size) }));
+      }
       return h("thead", { class: getTableHeaderClasses(props.stickyHeader) }, [
         h("tr", headerCells)
       ]);
@@ -570,7 +612,7 @@ var Table = defineComponent({
             h(
               "td",
               {
-                colspan: displayColumns.value.length + (props.rowSelection ? 1 : 0),
+                colspan: totalColumnCount.value,
                 class: tableEmptyStateClasses
               },
               [
@@ -587,11 +629,45 @@ 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 isExpandable = props.expandable ? props.expandable.rowExpandable?.(record) ?? true : false;
         const rowClass = typeof props.rowClassName === "function" ? props.rowClassName(record, index) : props.rowClassName;
         const cells = [];
+        if (props.expandable && props.expandable.expandIconPosition !== "end") {
+          cells.push(
+            h("td", { class: getExpandCellClasses(props.size) }, [
+              isExpandable ? h(
+                "button",
+                {
+                  class: classNames(
+                    expandIconButtonClasses,
+                    getExpandIconRotationClasses(isExpanded)
+                  ),
+                  "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleToggleExpand(key);
+                  }
+                },
+                [
+                  h(
+                    "svg",
+                    normalizeSvgAttrs({
+                      xmlns: "http://www.w3.org/2000/svg",
+                      viewBox: icon16ViewBox,
+                      fill: "currentColor",
+                      class: "w-4 h-4"
+                    }),
+                    [h("path", { d: "M6 3l6 5-6 5V3z" })]
+                  )
+                ]
+              ) : null
+            ])
+          );
+        }
         if (props.rowSelection && props.rowSelection.showCheckbox !== false) {
           const checkboxProps = props.rowSelection?.getCheckboxProps?.(record) || {};
           cells.push(
@@ -606,6 +682,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 +724,44 @@ 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 (props.expandable && props.expandable.expandIconPosition === "end") {
+          cells.push(
+            h("td", { class: getExpandCellClasses(props.size) }, [
+              isExpandable ? h(
+                "button",
+                {
+                  class: classNames(
+                    expandIconButtonClasses,
+                    getExpandIconRotationClasses(isExpanded)
+                  ),
+                  "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleToggleExpand(key);
+                  }
+                },
+                [
+                  h(
+                    "svg",
+                    normalizeSvgAttrs({
+                      xmlns: "http://www.w3.org/2000/svg",
+                      viewBox: icon16ViewBox,
+                      fill: "currentColor",
+                      class: "w-4 h-4"
+                    }),
+                    [h("path", { d: "M6 3l6 5-6 5V3z" })]
+                  )
+                ]
+              ) : null
+            ])
+          );
+        }
+        const row = h(
           "tr",
           {
             key,
@@ -664,6 +773,17 @@ var Table = defineComponent({
           },
           cells
         );
+        const result = [row];
+        if (props.expandable && isExpanded && isExpandable) {
+          result.push(
+            h("tr", { key: `${key}-expanded`, class: expandedRowContentClasses }, [
+              h("td", { colspan: totalColumnCount.value }, [
+                props.expandable.expandedRowRender(record, index)
+              ])
+            ])
+          );
+        }
+        return result;
       });
       return h("tbody", rows);
     }

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?.()
     );
   }
 });