@expcat/tigercat-vue 0.3.70 → 0.4.2

package/dist/{chunk-7FCHU5KV.mjs → chunk-TTDBR2B4.mjs}

@@ -1,6 +1,6 @@
 import { MenuContextKey } from './chunk-3AM6WEUE.mjs';
 import { defineComponent, inject, computed, ref, h, Transition, isVNode, cloneVNode, nextTick } from 'vue';
-import { isKeyOpen, classNames, getSubMenuTitleClasses, coerceClassValue, mergeStyleValues, submenuContentHorizontalClasses, submenuContentPopupClasses, submenuContentInlineClasses, submenuContentVerticalClasses, getMenuItemIndent, menuItemIconClasses, getSubMenuExpandIconClasses, moveFocusInMenu, focusMenuEdge, focusFirstChildItem } from '@expcat/tigercat-core';
+import { isKeyOpen, classNames, getSubMenuTitleClasses, coerceClassValue, mergeStyleValues, submenuContentHorizontalClasses, submenuContentHorizontalNestedClasses, submenuContentPopupClasses, submenuContentInlineClasses, submenuContentVerticalClasses, getSubmenuPopupZIndex, getMenuItemIndent, menuItemIconClasses, getSubMenuExpandIconClasses, moveFocusInMenu, focusMenuEdge, focusFirstChildItem } from '@expcat/tigercat-core';
 
 var ExpandIcon = (expanded) => {
   return h(
@@ -85,7 +85,9 @@ var SubMenu = defineComponent({
       return props.collapsed ?? (menuContext ? menuContext.collapsed.value : false);
     });
     const isPopup = 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 = computed(() => {
       if (menuContext?.mode.value === "horizontal" || isPopup.value) {
@@ -109,12 +111,13 @@ var SubMenu = defineComponent({
     const contentClasses = computed(() => {
       if (!menuContext) return "";
       if (menuContext.mode.value === "horizontal") {
-        return submenuContentHorizontalClasses;
+        return props.level === 0 ? submenuContentHorizontalClasses : submenuContentHorizontalNestedClasses;
       }
       if (isPopup.value) return submenuContentPopupClasses;
       if (menuContext.mode.value === "inline") return submenuContentInlineClasses;
       return submenuContentVerticalClasses;
     });
+    const popupZIndex = computed(() => isPopup.value ? getSubmenuPopupZIndex(props.level) : {});
     const handleTitleClick = () => {
       if (!menuContext || props.disabled) return;
       if (menuContext.mode.value === "horizontal") return;
@@ -206,7 +209,7 @@ var SubMenu = defineComponent({
       }
     };
     const indentStyle = computed(() => {
-      if (!menuContext || menuContext.mode.value !== "inline" || props.level === 0) {
+      if (!menuContext || menuContext.mode.value === "horizontal" || props.level === 0) {
         return {};
       }
       return getMenuItemIndent(props.level, menuContext.inlineIndent.value);
@@ -224,9 +227,6 @@ var SubMenu = defineComponent({
         const nextProps = {
           level: existingProps.level ?? nextLevel
         };
-        if (isPopup.value) {
-          nextProps.collapsed = false;
-        }
         return cloneVNode(node, nextProps);
       });
     };
@@ -274,12 +274,13 @@ var SubMenu = defineComponent({
         },
         titleChildren
       );
-      const contentNode = menuContext.mode.value === "horizontal" || isPopup.value ? h(
+      const contentNode = isPopup.value ? 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"
@@ -324,7 +325,7 @@ var SubMenu = defineComponent({
       return h(
         "li",
         {
-          class: menuContext.mode.value === "horizontal" || isPopup.value ? "relative" : "",
+          class: isPopup.value ? "relative" : "",
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
           role: "none"

package/dist/{chunk-RKPYLBPU.mjs → chunk-WM4ESIHG.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, h } from 'vue';
-import { classNames, layoutSidebarClasses, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';
+import { classNames, layoutSidebarClasses, layoutSidebarCollapsedClasses, coerceClassValue, getSidebarStyle, mergeStyleValues } from '@expcat/tigercat-core';
 
 // src/components/Sidebar.ts
 var Sidebar = defineComponent({
@@ -21,6 +21,15 @@ var Sidebar = 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
@@ -41,14 +50,14 @@ var Sidebar = defineComponent({
     const sidebarClasses = computed(
       () => classNames(
         layoutSidebarClasses,
+        props.collapsed && layoutSidebarCollapsedClasses,
         props.className,
         coerceClassValue(attrs.class)
       )
     );
-    const sidebarStyle = computed(() => ({
-      width: props.collapsed ? "0px" : props.width,
-      minWidth: props.collapsed ? "0px" : props.width
-    }));
+    const sidebarStyle = computed(
+      () => getSidebarStyle(props.collapsed, props.width, props.collapsedWidth)
+    );
     return () => h(
       "aside",
       {
@@ -56,7 +65,7 @@ var Sidebar = defineComponent({
         class: sidebarClasses.value,
         style: mergeStyleValues(props.style, sidebarStyle.value)
       },
-      !props.collapsed && slots.default?.()
+      slots.default?.()
     );
   }
 });

package/dist/{chunk-3PQIZBT5.js → chunk-WV3Y45YK.js}

@@ -160,6 +160,12 @@ var Table = vue.defineComponent({
     rowSelection: {
       type: Object
     },
+    /**
+     * Row expansion configuration
+     */
+    expandable: {
+      type: Object
+    },
     /**
      * Function to get row key
      */
@@ -194,7 +200,15 @@ var Table = vue.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 = vue.computed(() => {
       return props.pagination !== false && typeof props.pagination === "object" ? props.pagination : null;
@@ -204,6 +218,7 @@ var Table = vue.defineComponent({
     vue.computed(() => paginationConfig.value?.current !== void 0);
     vue.computed(() => paginationConfig.value?.pageSize !== void 0);
     const isSelectionControlled = vue.computed(() => props.rowSelection?.selectedRowKeys !== void 0);
+    const isExpandControlled = vue.computed(() => props.expandable?.expandedRowKeys !== void 0);
     const uncontrolledSortState = vue.ref(props.defaultSort);
     const uncontrolledFilterState = vue.ref(props.defaultFilters);
     const uncontrolledCurrentPage = vue.ref(
@@ -215,6 +230,9 @@ var Table = vue.defineComponent({
     const uncontrolledSelectedRowKeys = vue.ref(
       props.rowSelection?.defaultSelectedRowKeys ?? props.rowSelection?.selectedRowKeys ?? []
     );
+    const uncontrolledExpandedRowKeys = vue.ref(
+      props.expandable?.defaultExpandedRowKeys ?? props.expandable?.expandedRowKeys ?? []
+    );
     const sortState = vue.computed(() => props.sort ?? uncontrolledSortState.value);
     const filterState = vue.computed(() => props.filters ?? uncontrolledFilterState.value);
     const currentPage = vue.computed(() => {
@@ -226,6 +244,10 @@ var Table = vue.defineComponent({
     const selectedRowKeys = vue.computed(() => {
       return props.rowSelection?.selectedRowKeys ?? uncontrolledSelectedRowKeys.value;
     });
+    const expandedRowKeys = vue.computed(() => {
+      return props.expandable?.expandedRowKeys ?? uncontrolledExpandedRowKeys.value;
+    });
+    const expandedRowKeySet = vue.computed(() => new Set(expandedRowKeys.value));
     vue.watch(
       () => props.sort,
       (next) => {
@@ -437,8 +459,25 @@ var Table = vue.defineComponent({
     const someSelected = vue.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 = vue.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(vue.h("th", { class: tigercatCore.getExpandCellClasses(props.size) }));
+      }
       if (props.rowSelection && props.rowSelection.showCheckbox !== false && props.rowSelection.type !== "radio") {
         headerCells.push(
           vue.h(
@@ -558,6 +597,9 @@ var Table = vue.defineComponent({
           )
         );
       });
+      if (props.expandable && props.expandable.expandIconPosition === "end") {
+        headerCells.push(vue.h("th", { class: tigercatCore.getExpandCellClasses(props.size) }));
+      }
       return vue.h("thead", { class: tigercatCore.getTableHeaderClasses(props.stickyHeader) }, [
         vue.h("tr", headerCells)
       ]);
@@ -572,7 +614,7 @@ var Table = vue.defineComponent({
             vue.h(
               "td",
               {
-                colspan: displayColumns.value.length + (props.rowSelection ? 1 : 0),
+                colspan: totalColumnCount.value,
                 class: tigercatCore.tableEmptyStateClasses
               },
               [
@@ -589,11 +631,45 @@ var Table = vue.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(
+            vue.h("td", { class: tigercatCore.getExpandCellClasses(props.size) }, [
+              isExpandable ? vue.h(
+                "button",
+                {
+                  class: tigercatCore.classNames(
+                    tigercatCore.expandIconButtonClasses,
+                    tigercatCore.getExpandIconRotationClasses(isExpanded)
+                  ),
+                  "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleToggleExpand(key);
+                  }
+                },
+                [
+                  vue.h(
+                    "svg",
+                    tigercatCore.normalizeSvgAttrs({
+                      xmlns: "http://www.w3.org/2000/svg",
+                      viewBox: tigercatCore.icon16ViewBox,
+                      fill: "currentColor",
+                      class: "w-4 h-4"
+                    }),
+                    [vue.h("path", { d: "M6 3l6 5-6 5V3z" })]
+                  )
+                ]
+              ) : null
+            ])
+          );
+        }
         if (props.rowSelection && props.rowSelection.showCheckbox !== false) {
           const checkboxProps = props.rowSelection?.getCheckboxProps?.(record) || {};
           cells.push(
@@ -608,6 +684,7 @@ var Table = vue.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)
                 })
               ]
@@ -649,12 +726,44 @@ var Table = vue.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 vue.h(
+        if (props.expandable && props.expandable.expandIconPosition === "end") {
+          cells.push(
+            vue.h("td", { class: tigercatCore.getExpandCellClasses(props.size) }, [
+              isExpandable ? vue.h(
+                "button",
+                {
+                  class: tigercatCore.classNames(
+                    tigercatCore.expandIconButtonClasses,
+                    tigercatCore.getExpandIconRotationClasses(isExpanded)
+                  ),
+                  "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleToggleExpand(key);
+                  }
+                },
+                [
+                  vue.h(
+                    "svg",
+                    tigercatCore.normalizeSvgAttrs({
+                      xmlns: "http://www.w3.org/2000/svg",
+                      viewBox: tigercatCore.icon16ViewBox,
+                      fill: "currentColor",
+                      class: "w-4 h-4"
+                    }),
+                    [vue.h("path", { d: "M6 3l6 5-6 5V3z" })]
+                  )
+                ]
+              ) : null
+            ])
+          );
+        }
+        const row = vue.h(
           "tr",
           {
             key,
@@ -666,6 +775,17 @@ var Table = vue.defineComponent({
           },
           cells
         );
+        const result = [row];
+        if (props.expandable && isExpanded && isExpandable) {
+          result.push(
+            vue.h("tr", { key: `${key}-expanded`, class: tigercatCore.expandedRowContentClasses }, [
+              vue.h("td", { colspan: totalColumnCount.value }, [
+                props.expandable.expandedRowRender(record, index)
+              ])
+            ])
+          );
+        }
+        return result;
       });
       return vue.h("tbody", rows);
     }