@expcat/tigercat-vue 0.4.0 → 0.4.2

package/dist/chunk-LW3LFCRZ.mjs

@@ -0,0 +1,331 @@
+import { defineComponent, ref, watch, computed, onMounted, h } from 'vue';
+import { isAtMin, isAtMax, classNames, getInputNumberWrapperClasses, getInputNumberStatusClasses, getInputNumberSizeClasses, getInputNumberFocusRingColor, coerceClassValue, getInputNumberInputClasses, getInputNumberSideButtonClasses, inputNumberMinusIconPathD, inputNumberPlusIconPathD, inputNumberControlsRightClasses, getInputNumberStepButtonClasses, inputNumberUpIconPathD, inputNumberDownIconPathD, stepValue, clampValue, formatPrecision } from '@expcat/tigercat-core';
+
+// src/components/InputNumber.ts
+var InputNumber = defineComponent({
+  name: "TigerInputNumber",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [Number, null]
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    status: {
+      type: String,
+      default: "default"
+    },
+    min: {
+      type: Number,
+      default: -Infinity
+    },
+    max: {
+      type: Number,
+      default: Infinity
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    precision: {
+      type: Number,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: String,
+    name: String,
+    id: String,
+    keyboard: {
+      type: Boolean,
+      default: true
+    },
+    controls: {
+      type: Boolean,
+      default: true
+    },
+    controlsPosition: {
+      type: String,
+      default: "right"
+    },
+    formatter: {
+      type: Function
+    },
+    parser: {
+      type: Function
+    },
+    autoFocus: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "change", "focus", "blur"],
+  setup(props, { emit, attrs }) {
+    const inputRef = ref(null);
+    const focused = ref(false);
+    const displayValue = ref("");
+    function toDisplayValue(val) {
+      if (val === null || val === void 0) return "";
+      if (props.formatter) return props.formatter(val);
+      if (props.precision !== void 0) return val.toFixed(props.precision);
+      return String(val);
+    }
+    function parseValue(str) {
+      if (str === "" || str === "-") return null;
+      if (props.parser) return props.parser(str);
+      const num = Number(str);
+      return Number.isNaN(num) ? null : num;
+    }
+    watch(
+      () => props.modelValue,
+      (val) => {
+        if (!focused.value) {
+          displayValue.value = toDisplayValue(val);
+        }
+      },
+      { immediate: true }
+    );
+    const isControlled = computed(() => props.modelValue !== void 0);
+    const internalValue = ref(props.modelValue ?? null);
+    const currentValue = computed(
+      () => isControlled.value ? props.modelValue ?? null : internalValue.value
+    );
+    function commitValue(val) {
+      let finalVal = val;
+      if (finalVal !== null) {
+        finalVal = clampValue(finalVal, props.min, props.max);
+        if (props.precision !== void 0) {
+          finalVal = formatPrecision(finalVal, props.precision);
+        }
+      }
+      if (!isControlled.value) {
+        internalValue.value = finalVal;
+      }
+      emit("update:modelValue", finalVal);
+      emit("change", finalVal);
+      displayValue.value = toDisplayValue(finalVal);
+    }
+    function handleStep(direction) {
+      if (props.disabled || props.readonly) return;
+      const next = stepValue(
+        currentValue.value,
+        props.step,
+        direction,
+        props.min,
+        props.max,
+        props.precision
+      );
+      commitValue(next);
+    }
+    function handleInput(e) {
+      const target = e.target;
+      displayValue.value = target.value;
+    }
+    function handleBlur(e) {
+      focused.value = false;
+      const parsed = parseValue(displayValue.value);
+      commitValue(parsed);
+      emit("blur", e);
+    }
+    function handleFocus(e) {
+      focused.value = true;
+      if (props.formatter && currentValue.value !== null) {
+        displayValue.value = String(currentValue.value);
+      }
+      emit("focus", e);
+    }
+    function handleKeyDown(e) {
+      if (!props.keyboard || props.disabled || props.readonly) return;
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        handleStep("up");
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        handleStep("down");
+      } else if (e.key === "Enter") {
+        const parsed = parseValue(displayValue.value);
+        commitValue(parsed);
+      }
+    }
+    const atMin = computed(() => isAtMin(currentValue.value, props.min));
+    const atMax = computed(() => isAtMax(currentValue.value, props.max));
+    const wrapperClasses = computed(
+      () => classNames(
+        getInputNumberWrapperClasses(props.disabled),
+        getInputNumberStatusClasses(props.status),
+        getInputNumberSizeClasses(props.size),
+        focused.value && `ring-2 ${getInputNumberFocusRingColor(props.status)}`,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const inputClasses = computed(
+      () => getInputNumberInputClasses(
+        props.size,
+        props.controls && props.controlsPosition === "right",
+        props.controls && props.controlsPosition === "both"
+      )
+    );
+    onMounted(() => {
+      if (props.autoFocus && inputRef.value) {
+        inputRef.value.focus();
+      }
+    });
+    return () => {
+      const children = [];
+      if (props.controls && props.controlsPosition === "both") {
+        children.push(
+          h(
+            "button",
+            {
+              type: "button",
+              tabindex: -1,
+              "aria-label": "Decrease",
+              class: getInputNumberSideButtonClasses("left", props.disabled || atMin.value),
+              disabled: props.disabled || atMin.value,
+              onMousedown: (e) => e.preventDefault(),
+              onClick: () => handleStep("down")
+            },
+            [
+              h(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  class: "w-4 h-4"
+                },
+                [h("path", { d: inputNumberMinusIconPathD })]
+              )
+            ]
+          )
+        );
+      }
+      children.push(
+        h("input", {
+          ref: inputRef,
+          type: "text",
+          inputmode: "decimal",
+          role: "spinbutton",
+          "aria-valuemin": props.min === -Infinity ? void 0 : props.min,
+          "aria-valuemax": props.max === Infinity ? void 0 : props.max,
+          "aria-valuenow": currentValue.value ?? void 0,
+          class: inputClasses.value,
+          value: displayValue.value,
+          placeholder: props.placeholder,
+          disabled: props.disabled,
+          readonly: props.readonly,
+          name: props.name,
+          id: props.id,
+          onInput: handleInput,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
+          onKeydown: handleKeyDown
+        })
+      );
+      if (props.controls && props.controlsPosition === "both") {
+        children.push(
+          h(
+            "button",
+            {
+              type: "button",
+              tabindex: -1,
+              "aria-label": "Increase",
+              class: getInputNumberSideButtonClasses("right", props.disabled || atMax.value),
+              disabled: props.disabled || atMax.value,
+              onMousedown: (e) => e.preventDefault(),
+              onClick: () => handleStep("up")
+            },
+            [
+              h(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  class: "w-4 h-4"
+                },
+                [h("path", { d: inputNumberPlusIconPathD })]
+              )
+            ]
+          )
+        );
+      }
+      if (props.controls && props.controlsPosition === "right") {
+        children.push(
+          h("div", { class: inputNumberControlsRightClasses }, [
+            h(
+              "button",
+              {
+                type: "button",
+                tabindex: -1,
+                "aria-label": "Increase",
+                class: getInputNumberStepButtonClasses("up", props.disabled || atMax.value),
+                disabled: props.disabled || atMax.value,
+                onMousedown: (e) => e.preventDefault(),
+                onClick: () => handleStep("up")
+              },
+              [
+                h(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 24 24",
+                    fill: "currentColor",
+                    class: "w-3 h-3"
+                  },
+                  [h("path", { d: inputNumberUpIconPathD })]
+                )
+              ]
+            ),
+            h(
+              "button",
+              {
+                type: "button",
+                tabindex: -1,
+                "aria-label": "Decrease",
+                class: getInputNumberStepButtonClasses("down", props.disabled || atMin.value),
+                disabled: props.disabled || atMin.value,
+                onMousedown: (e) => e.preventDefault(),
+                onClick: () => handleStep("down")
+              },
+              [
+                h(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 24 24",
+                    fill: "currentColor",
+                    class: "w-3 h-3"
+                  },
+                  [h("path", { d: inputNumberDownIconPathD })]
+                )
+              ]
+            )
+          ])
+        );
+      }
+      return h(
+        "div",
+        {
+          class: wrapperClasses.value
+        },
+        children
+      );
+    };
+  }
+});
+var InputNumber_default = InputNumber;
+
+export { InputNumber, InputNumber_default };

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

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

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);
     }

package/dist/components/ActivityFeed.d.mts

@@ -107,9 +107,9 @@ declare const ActivityFeed: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    className: string;
     style: Record<string, string | number>;
     loading: boolean;
+    className: string;
     emptyText: string;
     items: ActivityItem[];
     groups: ActivityGroup[];