@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/{chunk-F5AI7CPC.js → chunk-AAO2B46J.js}

@@ -110,9 +110,16 @@ var List = vue.defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    /**
+     * Whether list items are draggable for reorder
+     */
+    draggable: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ["item-click", "page-change"],
+  emits: ["item-click", "page-change", "reorder"],
   setup(props, { emit, slots, attrs }) {
     const instance = vue.getCurrentInstance();
     const hasItemClickListener = vue.computed(() => {
@@ -126,6 +133,28 @@ var List = vue.defineComponent({
     const currentPageSize = vue.ref(
       props.pagination && typeof props.pagination === "object" ? props.pagination.pageSize || 10 : 10
     );
+    const dragIndex = vue.ref(null);
+    function handleDragStart(index) {
+      dragIndex.value = index;
+    }
+    function handleDragOver(e) {
+      e.preventDefault();
+    }
+    function handleDrop(index) {
+      if (dragIndex.value === null || dragIndex.value === index) {
+        dragIndex.value = null;
+        return;
+      }
+      const from = dragIndex.value;
+      dragIndex.value = null;
+      const items = [...props.dataSource];
+      const [moved] = items.splice(from, 1);
+      items.splice(index, 0, moved);
+      emit("reorder", items, from, index);
+    }
+    function handleDragEnd() {
+      dragIndex.value = null;
+    }
     const paginatedData = vue.computed(() => {
       if (props.pagination === false) {
         return props.dataSource;
@@ -202,9 +231,20 @@ var List = vue.defineComponent({
     function getItemAttrs(item, index, itemClasses) {
       const key = getItemKey(item, index);
       const clickable = hasItemClickListener.value;
+      const draggableAttrs = props.draggable ? {
+        draggable: true,
+        onDragstart: () => handleDragStart(index),
+        onDragover: handleDragOver,
+        onDrop: () => handleDrop(index),
+        onDragend: handleDragEnd
+      } : {};
       return {
         key,
-        class: tigercatCore.classNames(itemClasses, clickable && "cursor-pointer"),
+        class: tigercatCore.classNames(
+          itemClasses,
+          clickable && "cursor-pointer",
+          props.draggable && "cursor-grab"
+        ),
         role: "listitem",
         tabindex: clickable ? 0 : void 0,
         onClick: () => handleItemClick(item, index),
@@ -213,7 +253,8 @@ var List = vue.defineComponent({
             e.preventDefault();
             handleItemClick(item, index);
           }
-        } : void 0
+        } : void 0,
+        ...draggableAttrs
       };
     }
     function renderListItem(item, index) {

package/dist/{chunk-ZREPAOSW.mjs → chunk-ABPOLQLE.mjs}

@@ -1,4 +1,4 @@
-import { PieChart } from './chunk-DATFV22V.mjs';
+import { PieChart } from './chunk-NVJRZYES.mjs';
 import { defineComponent, computed, h } from 'vue';
 import { getChartInnerRect, normalizeChartPadding, classNames } from '@expcat/tigercat-core';
 

package/dist/chunk-AFKNO6SF.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/InfiniteScroll.ts
+var InfiniteScroll = vue.defineComponent({
+  name: "TigerInfiniteScroll",
+  inheritAttrs: false,
+  props: {
+    hasMore: { type: Boolean, default: true },
+    loading: { type: Boolean, default: false },
+    threshold: { type: Number, default: 100 },
+    loadingText: { type: String, default: "Loading..." },
+    endText: { type: String, default: "No more data" },
+    direction: {
+      type: String,
+      default: "vertical"
+    },
+    inverse: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    className: { type: String, default: void 0 }
+  },
+  emits: ["load-more"],
+  setup(props, { emit, slots, attrs }) {
+    const containerRef = vue.ref(null);
+    const containerClasses = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.getInfiniteScrollContainerClasses(props.direction, props.className),
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    function checkScroll() {
+      if (props.disabled || props.loading || !props.hasMore) return;
+      const el = containerRef.value;
+      if (!el) return;
+      if (tigercatCore.shouldLoadMore(el, props.threshold, props.direction, props.inverse)) {
+        emit("load-more");
+      }
+    }
+    vue.onMounted(() => {
+      containerRef.value?.addEventListener("scroll", checkScroll, {
+        passive: true
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      containerRef.value?.removeEventListener("scroll", checkScroll);
+    });
+    return () => {
+      const content = slots.default?.();
+      const loader = props.loading ? vue.h(
+        "div",
+        {
+          class: tigercatCore.infiniteScrollLoaderClasses,
+          role: "status",
+          "aria-live": "polite"
+        },
+        slots.loader?.() ?? props.loadingText
+      ) : null;
+      const end = !props.hasMore && !props.loading ? vue.h("div", { class: tigercatCore.infiniteScrollEndClasses }, slots.end?.() ?? props.endText) : null;
+      const children = props.inverse ? [loader, content, end] : [content, loader, end];
+      return vue.h(
+        "div",
+        {
+          ref: containerRef,
+          class: containerClasses.value
+        },
+        children
+      );
+    };
+  }
+});
+var InfiniteScroll_default = InfiniteScroll;
+
+exports.InfiniteScroll = InfiniteScroll;
+exports.InfiniteScroll_default = InfiniteScroll_default;

package/dist/chunk-AGQNHT65.mjs

@@ -0,0 +1,92 @@
+import { defineComponent, h } from 'vue';
+import { classNames, stepperBaseClasses, coerceClassValue, getStepperButtonClasses, getStepperInputClasses, stepperIconViewBox, clampStepperValue, minusPathD, plusPathD } from '@expcat/tigercat-core';
+
+// src/components/Stepper.ts
+var Stepper = defineComponent({
+  name: "TigerStepper",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    min: { type: Number, default: -Infinity },
+    max: { type: Number, default: Infinity },
+    step: { type: Number, default: 1 },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    precision: { type: Number, default: void 0 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    function setValue(v) {
+      const clamped = clampStepperValue(v, props.min, props.max, props.precision);
+      emit("update:modelValue", clamped);
+      emit("change", clamped);
+    }
+    function decrement() {
+      if (props.disabled) return;
+      setValue(props.modelValue - props.step);
+    }
+    function increment() {
+      if (props.disabled) return;
+      setValue(props.modelValue + props.step);
+    }
+    function handleInput(e) {
+      const val = Number(e.target.value);
+      if (!Number.isNaN(val)) setValue(val);
+    }
+    const icon = (d) => h(
+      "svg",
+      {
+        class: "w-4 h-4",
+        viewBox: stepperIconViewBox,
+        fill: "currentColor"
+      },
+      [h("path", { d, "fill-rule": "evenodd", "clip-rule": "evenodd" })]
+    );
+    return () => {
+      const atMin = props.modelValue <= props.min;
+      const atMax = props.modelValue >= props.max;
+      return h(
+        "div",
+        {
+          class: classNames(stepperBaseClasses, coerceClassValue(attrs.class)),
+          role: "group",
+          "aria-label": "Stepper"
+        },
+        [
+          h(
+            "button",
+            {
+              type: "button",
+              class: getStepperButtonClasses(props.size, props.disabled || atMin, "left"),
+              disabled: props.disabled || atMin,
+              "aria-label": "Decrease",
+              onClick: decrement
+            },
+            [icon(minusPathD)]
+          ),
+          h("input", {
+            type: "text",
+            class: getStepperInputClasses(props.size),
+            value: props.precision !== void 0 ? props.modelValue.toFixed(props.precision) : String(props.modelValue),
+            disabled: props.disabled,
+            "aria-label": "Value",
+            onChange: handleInput
+          }),
+          h(
+            "button",
+            {
+              type: "button",
+              class: getStepperButtonClasses(props.size, props.disabled || atMax, "right"),
+              disabled: props.disabled || atMax,
+              "aria-label": "Increase",
+              onClick: increment
+            },
+            [icon(plusPathD)]
+          )
+        ]
+      );
+    };
+  }
+});
+var Stepper_default = Stepper;
+
+export { Stepper, Stepper_default };

package/dist/{chunk-YQGKXFV5.js → chunk-BDMWFNTC.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkLUN3PRLX_js = require('./chunk-LUN3PRLX.js');
+var chunkV4PBWEAU_js = require('./chunk-V4PBWEAU.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -55,7 +55,7 @@ var TaskBoard = vue.defineComponent({
   },
   emits: ["card-move", "column-move", "card-add", "update:columns"],
   setup(props, { slots, attrs, emit }) {
-    const config = chunkLUN3PRLX_js.useTigerConfig();
+    const config = chunkV4PBWEAU_js.useTigerConfig();
     const mergedLocale = vue.computed(() => tigercatCore.mergeTigerLocale(config.value.locale, props.locale));
     const labels = vue.computed(() => tigercatCore.getTaskBoardLabels(mergedLocale.value));
     const innerColumns = vue.ref(props.columns ?? props.defaultColumns ?? []);

package/dist/chunk-BFS7XO3E.js

@@ -0,0 +1,318 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/TreeSelect.ts
+var treeSelectInstanceId = 0;
+var ChevronDownIcon = vue.h(
+  "svg",
+  {
+    class: "w-4 h-4 transition-transform",
+    viewBox: tigercatCore.icon20ViewBox,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  [
+    vue.h("path", {
+      d: tigercatCore.chevronDownSolidIcon20PathD,
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd"
+    })
+  ]
+);
+var ClearIcon = vue.h(
+  "svg",
+  {
+    class: "w-4 h-4",
+    viewBox: tigercatCore.icon20ViewBox,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  [
+    vue.h("path", {
+      d: tigercatCore.closeSolidIcon20PathD,
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd"
+    })
+  ]
+);
+var TreeSelect = vue.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 = vue.ref(false);
+    const searchQuery = vue.ref("");
+    const containerRef = vue.ref(null);
+    const expandedKeys = vue.ref(
+      props.defaultExpandAll ? new Set(tigercatCore.getAllTreeSelectKeys(props.treeData)) : /* @__PURE__ */ new Set()
+    );
+    const displayLabel = vue.computed(() => tigercatCore.getTreeSelectDisplayLabel(props.treeData, props.modelValue));
+    const showClearButton = vue.computed(
+      () => props.clearable && !props.disabled && props.modelValue !== void 0 && (Array.isArray(props.modelValue) ? props.modelValue.length > 0 : props.modelValue !== "")
+    );
+    const matchedKeys = vue.computed(() => {
+      if (!searchQuery.value) return null;
+      return tigercatCore.filterTreeSelectNodes(props.treeData, searchQuery.value);
+    });
+    const effectiveExpandedKeys = vue.computed(() => {
+      if (matchedKeys.value) {
+        return matchedKeys.value;
+      }
+      return expandedKeys.value;
+    });
+    const flatNodes = vue.computed(
+      () => tigercatCore.flattenTreeSelectNodes(props.treeData, effectiveExpandedKeys.value)
+    );
+    const visibleNodes = vue.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();
+      }
+    }
+    vue.watch(isOpen, (val) => {
+      if (val) {
+        document.addEventListener("click", handleClickOutside);
+      } else {
+        document.removeEventListener("click", handleClickOutside);
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("click", handleClickOutside);
+    });
+    return () => {
+      const containerClasses = tigercatCore.classNames(tigercatCore.treeSelectBaseClasses, tigercatCore.coerceClassValue(attrs.class));
+      return vue.h("div", { ref: containerRef, class: containerClasses }, [
+        // Trigger
+        vue.h(
+          "button",
+          {
+            type: "button",
+            class: tigercatCore.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
+          },
+          [
+            vue.h(
+              "span",
+              {
+                class: tigercatCore.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 ? vue.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]
+            ) : vue.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 ? vue.h(
+          "div",
+          {
+            id: listboxId,
+            role: "listbox",
+            class: tigercatCore.treeSelectDropdownClasses
+          },
+          [
+            // Search
+            props.showSearch ? vue.h("input", {
+              type: "text",
+              class: tigercatCore.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 vue.h(
+                "div",
+                {
+                  key: node.key,
+                  role: "option",
+                  "aria-selected": selected,
+                  "aria-disabled": node.disabled,
+                  class: tigercatCore.getTreeSelectNodeClasses(selected, !!node.disabled, props.size),
+                  style: { paddingLeft: `${indent + 8}px` },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleNodeSelect(node);
+                  }
+                },
+                [
+                  // Expand toggle
+                  hasChildren ? vue.h(
+                    "span",
+                    {
+                      class: tigercatCore.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);
+                      }
+                    },
+                    [
+                      vue.h(
+                        "svg",
+                        {
+                          class: "w-3 h-3",
+                          viewBox: tigercatCore.icon20ViewBox,
+                          fill: "currentColor"
+                        },
+                        [
+                          vue.h("path", {
+                            d: tigercatCore.chevronRightSolidIcon20PathD,
+                            "fill-rule": "evenodd",
+                            "clip-rule": "evenodd"
+                          })
+                        ]
+                      )
+                    ]
+                  ) : vue.h("span", { class: "w-4 mr-1" }),
+                  // Label
+                  vue.h("span", { class: "flex-1 truncate" }, node.label)
+                ]
+              );
+            }) : vue.h("div", { class: tigercatCore.treeSelectEmptyClasses }, props.notFoundText)
+          ]
+        ) : null
+      ]);
+    };
+  }
+});
+var TreeSelect_default = TreeSelect;
+
+exports.TreeSelect = TreeSelect;
+exports.TreeSelect_default = TreeSelect_default;

package/dist/{chunk-7TGLZQV5.js → chunk-BNIUWON3.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkCEAMHLIL_js = require('./chunk-CEAMHLIL.js');
+var chunk5JSU44MQ_js = require('./chunk-5JSU44MQ.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -80,13 +80,17 @@ var TabPane = vue.defineComponent({
     }
   },
   setup(props, { slots }) {
-    const tabsContext = vue.inject(chunkCEAMHLIL_js.TabsContextKey);
+    const tabsContext = vue.inject(chunk5JSU44MQ_js.TabsContextKey);
     if (!tabsContext) {
       throw new Error("TabPane must be used within a Tabs component");
     }
     const isActive = vue.computed(() => {
       return tigercatCore.isKeyActive(props.tabKey, tabsContext.activeKey);
     });
+    const hasBeenActivated = vue.ref(isActive.value);
+    vue.watch(isActive, (val) => {
+      if (val) hasBeenActivated.value = true;
+    });
     const isClosable = vue.computed(() => {
       return props.closable !== void 0 ? props.closable : tabsContext.closable && tabsContext.type === "editable-card";
     });
@@ -187,9 +191,9 @@ var TabPane = vue.defineComponent({
             vue.h("span", props.label),
             // Close button
             isClosable.value && vue.h(
-              "button",
+              "span",
               {
-                type: "button",
+                role: "button",
                 class: tigercatCore.tabCloseButtonClasses,
                 "aria-label": `Close ${String(props.label)}`,
                 tabindex: -1,
@@ -214,7 +218,7 @@ var TabPane = vue.defineComponent({
           ]
         );
       }
-      const shouldRender = isActive.value || !tabsContext.destroyInactiveTabPane;
+      const shouldRender = tabsContext.lazy ? hasBeenActivated.value && (isActive.value || !tabsContext.destroyInactiveTabPane) : isActive.value || !tabsContext.destroyInactiveTabPane;
       if (!shouldRender) {
         return null;
       }