@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/chunk-E2GQSWHK.mjs

@@ -0,0 +1,93 @@
+import { defineComponent, computed, h } from 'vue';
+import { classNames, getPrintLayoutClasses, coerceClassValue, printLayoutHeaderClasses, printLayoutFooterClasses, printLayoutPageBreakClasses } from '@expcat/tigercat-core';
+
+// src/components/PrintLayout.ts
+var PrintLayout = defineComponent({
+  name: "TigerPrintLayout",
+  inheritAttrs: false,
+  props: {
+    pageSize: {
+      type: String,
+      default: "A4"
+    },
+    orientation: {
+      type: String,
+      default: "portrait"
+    },
+    showHeader: {
+      type: Boolean,
+      default: false
+    },
+    showFooter: {
+      type: Boolean,
+      default: false
+    },
+    headerText: {
+      type: String,
+      default: void 0
+    },
+    footerText: {
+      type: String,
+      default: void 0
+    },
+    showPageBreaks: {
+      type: Boolean,
+      default: true
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const classes = computed(
+      () => classNames(
+        getPrintLayoutClasses(props.pageSize, props.orientation, props.className),
+        coerceClassValue(attrs.class)
+      )
+    );
+    return () => {
+      const children = [];
+      if (props.showHeader && (props.headerText || slots.header)) {
+        children.push(
+          h(
+            "div",
+            { class: printLayoutHeaderClasses },
+            slots.header ? slots.header() : props.headerText
+          )
+        );
+      }
+      children.push(h("div", { class: "tiger-print-content" }, slots.default?.()));
+      if (props.showFooter && (props.footerText || slots.footer)) {
+        children.push(
+          h(
+            "div",
+            { class: printLayoutFooterClasses },
+            slots.footer ? slots.footer() : props.footerText
+          )
+        );
+      }
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classes.value
+        },
+        children
+      );
+    };
+  }
+});
+var PrintPageBreak = defineComponent({
+  name: "TigerPrintPageBreak",
+  setup(_, { attrs }) {
+    return () => h("div", {
+      ...attrs,
+      class: classNames(printLayoutPageBreakClasses, "print:break-before-page"),
+      "aria-hidden": "true"
+    });
+  }
+});
+var PrintLayout_default = PrintLayout;
+
+export { PrintLayout, PrintLayout_default, PrintPageBreak };

package/dist/{chunk-XEU42TLP.js → chunk-ECUROLZ7.js}

@@ -158,6 +158,13 @@ var Tree = vue.defineComponent({
       type: String,
       default: ""
     },
+    /**
+     * Whether to show built-in search input
+     */
+    searchable: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Custom filter function
      */
@@ -191,6 +198,13 @@ var Tree = vue.defineComponent({
     ariaLabel: {
       type: String,
       default: "Tree"
+    },
+    /**
+     * Whether nodes are draggable
+     */
+    draggable: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
@@ -202,7 +216,8 @@ var Tree = vue.defineComponent({
     "node-collapse",
     "update:expandedKeys",
     "update:selectedKeys",
-    "update:checkedKeys"
+    "update:checkedKeys",
+    "drop"
   ],
   setup(props, { emit, attrs }) {
     const rootEl = vue.ref(null);
@@ -219,6 +234,27 @@ var Tree = vue.defineComponent({
       return props.multiple;
     });
     const internalExpandedKeys = vue.ref(/* @__PURE__ */ new Set());
+    const dragNodeKey = vue.ref(null);
+    function handleTreeDragStart(key) {
+      dragNodeKey.value = key;
+    }
+    function handleTreeDragOver(e) {
+      e.preventDefault();
+    }
+    function handleTreeDrop(targetKey) {
+      if (dragNodeKey.value === null || dragNodeKey.value === targetKey) {
+        dragNodeKey.value = null;
+        return;
+      }
+      emit("drop", {
+        dragKey: dragNodeKey.value,
+        dropKey: targetKey
+      });
+      dragNodeKey.value = null;
+    }
+    function handleTreeDragEnd() {
+      dragNodeKey.value = null;
+    }
     const internalSelectedKeys = vue.ref(
       new Set(props.selectedKeys ?? props.defaultSelectedKeys)
     );
@@ -286,8 +322,12 @@ var Tree = vue.defineComponent({
         target?.focus();
       }
     );
+    const internalSearchValue = vue.ref("");
+    const effectiveFilterValue = vue.computed(
+      () => props.searchable ? internalSearchValue.value : props.filterValue
+    );
     vue.watch(
-      () => props.filterValue,
+      () => effectiveFilterValue.value,
       (newValue) => {
         if (newValue) {
           const matched = tigercatCore.filterTreeNodes(props.treeData, newValue, props.filterFn);
@@ -501,6 +541,18 @@ var Tree = vue.defineComponent({
               "aria-expanded": isExpandable ? isExpanded ? true : false : void 0,
               "aria-checked": props.checkable ? isHalfChecked ? "mixed" : isChecked : void 0,
               tabIndex: isFocusable ? 0 : -1,
+              draggable: props.draggable && !node.disabled ? true : void 0,
+              onDragstart: props.draggable && !node.disabled ? (e) => {
+                e.stopPropagation();
+                handleTreeDragStart(node.key);
+              } : void 0,
+              onDragover: props.draggable ? handleTreeDragOver : void 0,
+              onDrop: props.draggable ? (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleTreeDrop(node.key);
+              } : void 0,
+              onDragend: props.draggable ? handleTreeDragEnd : void 0,
               onFocus: () => {
                 if (!node.disabled) activeKey.value = node.key;
               },
@@ -622,6 +674,15 @@ var Tree = vue.defineComponent({
           [vue.h("div", { class: tigercatCore.treeEmptyStateClasses }, props.emptyText)]
         );
       }
+      const searchInput = props.searchable ? vue.h("input", {
+        type: "text",
+        class: "w-full mb-2 px-2 py-1 text-sm border border-[var(--tiger-border,#e5e7eb)] rounded bg-[var(--tiger-surface,#ffffff)] focus:outline-none focus:ring-1 focus:ring-[var(--tiger-primary,#2563eb)]",
+        placeholder: "Search...",
+        value: internalSearchValue.value,
+        onInput: (e) => {
+          internalSearchValue.value = e.target.value;
+        }
+      }) : null;
       return vue.h(
         "div",
         {
@@ -632,7 +693,7 @@ var Tree = vue.defineComponent({
           "aria-multiselectable": effectiveMultiple.value ? true : void 0,
           ref: rootEl
         },
-        props.treeData.map((node) => renderTreeNode(node, 0))
+        [searchInput, ...props.treeData.map((node) => renderTreeNode(node, 0))]
       );
     };
   }

package/dist/chunk-ELEAQEMV.mjs

@@ -0,0 +1,61 @@
+import { defineComponent, h } from 'vue';
+import { classNames, getSegmentedContainerClasses, coerceClassValue, getSegmentedOptionClasses } from '@expcat/tigercat-core';
+
+// src/components/Segmented.ts
+var Segmented = defineComponent({
+  name: "TigerSegmented",
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    block: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    function handleSelect(option) {
+      if (option.disabled || props.disabled) return;
+      if (option.value === props.modelValue) return;
+      emit("update:modelValue", option.value);
+      emit("change", option.value);
+    }
+    return () => h(
+      "div",
+      {
+        class: classNames(
+          getSegmentedContainerClasses(props.size, props.block),
+          coerceClassValue(attrs.class)
+        ),
+        role: "radiogroup"
+      },
+      props.options.map((opt) => {
+        const selected = opt.value === props.modelValue;
+        const isDisabled = !!opt.disabled || props.disabled;
+        return h(
+          "label",
+          {
+            key: opt.value,
+            class: classNames(
+              getSegmentedOptionClasses(props.size, selected, isDisabled),
+              props.block ? "flex-1 text-center" : ""
+            ),
+            role: "radio",
+            "aria-checked": selected,
+            "aria-disabled": isDisabled,
+            onClick: () => handleSelect(opt)
+          },
+          [h("span", null, opt.label)]
+        );
+      })
+    );
+  }
+});
+var Segmented_default = Segmented;
+
+export { Segmented, Segmented_default };

package/dist/chunk-EXQSRZJX.mjs

@@ -0,0 +1,315 @@
+import { h, defineComponent, ref, computed, watch, onBeforeUnmount } from 'vue';
+import { icon20ViewBox, chevronDownSolidIcon20PathD, closeSolidIcon20PathD, getAllTreeSelectKeys, getTreeSelectDisplayLabel, filterTreeSelectNodes, flattenTreeSelectNodes, classNames, treeSelectBaseClasses, coerceClassValue, getTreeSelectTriggerClasses, treeSelectDropdownClasses, treeSelectSearchClasses, getTreeSelectNodeClasses, chevronRightSolidIcon20PathD, treeSelectEmptyClasses } from '@expcat/tigercat-core';
+
+// src/components/TreeSelect.ts
+var treeSelectInstanceId = 0;
+var ChevronDownIcon = h(
+  "svg",
+  {
+    class: "w-4 h-4 transition-transform",
+    viewBox: icon20ViewBox,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  [
+    h("path", {
+      d: chevronDownSolidIcon20PathD,
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd"
+    })
+  ]
+);
+var ClearIcon = h(
+  "svg",
+  {
+    class: "w-4 h-4",
+    viewBox: icon20ViewBox,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  [
+    h("path", {
+      d: closeSolidIcon20PathD,
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd"
+    })
+  ]
+);
+var TreeSelect = defineComponent({
+  name: "TigerTreeSelect",
+  props: {
+    modelValue: {
+      type: [String, Number, Array],
+      default: void 0
+    },
+    treeData: {
+      type: Array,
+      default: () => []
+    },
+    placeholder: {
+      type: String,
+      default: "Please select"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    showSearch: {
+      type: Boolean,
+      default: false
+    },
+    notFoundText: {
+      type: String,
+      default: "No data"
+    },
+    defaultExpandAll: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    const instanceId = ++treeSelectInstanceId;
+    const listboxId = `tiger-treeselect-listbox-${instanceId}`;
+    const isOpen = ref(false);
+    const searchQuery = ref("");
+    const containerRef = ref(null);
+    const expandedKeys = ref(
+      props.defaultExpandAll ? new Set(getAllTreeSelectKeys(props.treeData)) : /* @__PURE__ */ new Set()
+    );
+    const displayLabel = computed(() => getTreeSelectDisplayLabel(props.treeData, props.modelValue));
+    const showClearButton = computed(
+      () => props.clearable && !props.disabled && props.modelValue !== void 0 && (Array.isArray(props.modelValue) ? props.modelValue.length > 0 : props.modelValue !== "")
+    );
+    const matchedKeys = computed(() => {
+      if (!searchQuery.value) return null;
+      return filterTreeSelectNodes(props.treeData, searchQuery.value);
+    });
+    const effectiveExpandedKeys = computed(() => {
+      if (matchedKeys.value) {
+        return matchedKeys.value;
+      }
+      return expandedKeys.value;
+    });
+    const flatNodes = computed(
+      () => flattenTreeSelectNodes(props.treeData, effectiveExpandedKeys.value)
+    );
+    const visibleNodes = computed(() => {
+      if (!matchedKeys.value) return flatNodes.value;
+      return flatNodes.value.filter((f) => matchedKeys.value.has(f.node.key));
+    });
+    function openDropdown() {
+      if (props.disabled) return;
+      isOpen.value = true;
+    }
+    function closeDropdown() {
+      isOpen.value = false;
+      searchQuery.value = "";
+    }
+    function toggleDropdown() {
+      if (isOpen.value) closeDropdown();
+      else openDropdown();
+    }
+    function toggleExpand(key) {
+      const next = new Set(expandedKeys.value);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      expandedKeys.value = next;
+    }
+    function isSelected(key) {
+      if (props.multiple && Array.isArray(props.modelValue)) {
+        return props.modelValue.includes(key);
+      }
+      return props.modelValue === key;
+    }
+    function handleNodeSelect(node) {
+      if (node.disabled) return;
+      if (props.multiple) {
+        const current = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
+        const idx = current.indexOf(node.key);
+        if (idx >= 0) {
+          current.splice(idx, 1);
+        } else {
+          current.push(node.key);
+        }
+        emit("update:modelValue", current);
+        emit("change", current);
+      } else {
+        emit("update:modelValue", node.key);
+        emit("change", node.key);
+        closeDropdown();
+      }
+    }
+    function handleClear(e) {
+      e.stopPropagation();
+      const val = props.multiple ? [] : void 0;
+      emit("update:modelValue", val);
+      emit("change", val);
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closeDropdown();
+      } else if ((e.key === "Enter" || e.key === " ") && !isOpen.value) {
+        e.preventDefault();
+        openDropdown();
+      }
+    }
+    function handleClickOutside(e) {
+      if (containerRef.value && !containerRef.value.contains(e.target)) {
+        closeDropdown();
+      }
+    }
+    watch(isOpen, (val) => {
+      if (val) {
+        document.addEventListener("click", handleClickOutside);
+      } else {
+        document.removeEventListener("click", handleClickOutside);
+      }
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("click", handleClickOutside);
+    });
+    return () => {
+      const containerClasses = classNames(treeSelectBaseClasses, coerceClassValue(attrs.class));
+      return h("div", { ref: containerRef, class: containerClasses }, [
+        // Trigger
+        h(
+          "button",
+          {
+            type: "button",
+            class: getTreeSelectTriggerClasses(props.size, props.disabled, isOpen.value),
+            role: "combobox",
+            "aria-expanded": String(isOpen.value),
+            "aria-haspopup": "listbox",
+            "aria-controls": isOpen.value ? listboxId : void 0,
+            disabled: props.disabled,
+            onClick: toggleDropdown,
+            onKeydown: handleKeyDown
+          },
+          [
+            h(
+              "span",
+              {
+                class: classNames(
+                  "flex-1 truncate",
+                  !displayLabel.value ? "text-[var(--tiger-treeselect-placeholder,var(--tiger-text-muted,#9ca3af))]" : ""
+                )
+              },
+              displayLabel.value || props.placeholder
+            ),
+            // Clear or chevron
+            showClearButton.value ? h(
+              "span",
+              {
+                class: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-treeselect-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-treeselect-clear-hover,var(--tiger-text,#111827))]",
+                "aria-label": "Clear selection",
+                onClick: handleClear
+              },
+              [ClearIcon]
+            ) : h(
+              "span",
+              {
+                class: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-text-muted,#9ca3af)] pointer-events-none"
+              },
+              [ChevronDownIcon]
+            )
+          ]
+        ),
+        // Dropdown
+        isOpen.value ? h(
+          "div",
+          {
+            id: listboxId,
+            role: "listbox",
+            class: treeSelectDropdownClasses
+          },
+          [
+            // Search
+            props.showSearch ? h("input", {
+              type: "text",
+              class: treeSelectSearchClasses,
+              placeholder: "Search...",
+              value: searchQuery.value,
+              "aria-label": "Search tree",
+              onInput: (e) => {
+                searchQuery.value = e.target.value;
+              }
+            }) : null,
+            // Tree nodes
+            visibleNodes.value.length > 0 ? visibleNodes.value.map((flatNode) => {
+              const { node, level, hasChildren, isExpanded } = flatNode;
+              const selected = isSelected(node.key);
+              const indent = level * 20;
+              return h(
+                "div",
+                {
+                  key: node.key,
+                  role: "option",
+                  "aria-selected": selected,
+                  "aria-disabled": node.disabled,
+                  class: getTreeSelectNodeClasses(selected, !!node.disabled, props.size),
+                  style: { paddingLeft: `${indent + 8}px` },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleNodeSelect(node);
+                  }
+                },
+                [
+                  // Expand toggle
+                  hasChildren ? h(
+                    "span",
+                    {
+                      class: classNames(
+                        "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
+                        isExpanded ? "rotate-90" : ""
+                      ),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        toggleExpand(node.key);
+                      }
+                    },
+                    [
+                      h(
+                        "svg",
+                        {
+                          class: "w-3 h-3",
+                          viewBox: icon20ViewBox,
+                          fill: "currentColor"
+                        },
+                        [
+                          h("path", {
+                            d: chevronRightSolidIcon20PathD,
+                            "fill-rule": "evenodd",
+                            "clip-rule": "evenodd"
+                          })
+                        ]
+                      )
+                    ]
+                  ) : h("span", { class: "w-4 mr-1" }),
+                  // Label
+                  h("span", { class: "flex-1 truncate" }, node.label)
+                ]
+              );
+            }) : h("div", { class: treeSelectEmptyClasses }, props.notFoundText)
+          ]
+        ) : null
+      ]);
+    };
+  }
+});
+var TreeSelect_default = TreeSelect;
+
+export { TreeSelect, TreeSelect_default };

package/dist/{chunk-AO4QQVBB.mjs → chunk-EZ6GXQMP.mjs}

@@ -1,10 +1,10 @@
-import { TabPane } from './chunk-37WD7WPC.mjs';
-import { Tabs } from './chunk-U7MDGSCQ.mjs';
-import { List } from './chunk-EVOLGCGW.mjs';
-import { Button } from './chunk-D6MR5YRE.mjs';
+import { TabPane } from './chunk-ZXR4DAAO.mjs';
+import { Tabs } from './chunk-HKYYO326.mjs';
+import { List } from './chunk-XNORTTVQ.mjs';
+import { Button } from './chunk-M7JUNLA7.mjs';
 import { Loading } from './chunk-Q6OYCTQO.mjs';
 import { Text } from './chunk-6V7XCCXN.mjs';
-import { Card } from './chunk-YXN3YY5Y.mjs';
+import { Card } from './chunk-KOTSKHPQ.mjs';
 import { defineComponent, computed, ref, watch, h } from 'vue';
 import { buildNotificationGroups, classNames, coerceClassValue, mergeStyleValues, formatActivityTime } from '@expcat/tigercat-core';
 
@@ -272,7 +272,7 @@ var NotificationCenter = defineComponent({
         )
       );
     };
-    const renderListItem = (item, index) => {
+    const renderListItem = (item, _index) => {
       const isRead = Boolean(item.read);
       const timeText = item.time ? formatActivityTime(item.time) : "";
       return h(