@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/chunk-RSBAFDUA.mjs

@@ -0,0 +1,89 @@
+import { defineComponent, ref, computed, h } from 'vue';
+import { getFixedVirtualRange, classNames, virtualListContainerClasses, coerceClassValue, virtualListInnerClasses } from '@expcat/tigercat-core';
+
+// src/components/VirtualList.ts
+var VirtualList = defineComponent({
+  name: "TigerVirtualList",
+  props: {
+    itemCount: { type: Number, default: 0 },
+    itemHeight: { type: Number, default: 40 },
+    height: { type: Number, default: 400 },
+    overscan: { type: Number, default: 5 }
+  },
+  emits: ["scroll"],
+  setup(props, { emit, attrs, slots }) {
+    const scrollTop = ref(0);
+    const containerRef = ref(null);
+    const range = computed(
+      () => getFixedVirtualRange(
+        scrollTop.value,
+        props.height,
+        props.itemHeight,
+        props.itemCount,
+        props.overscan
+      )
+    );
+    function handleScroll() {
+      if (containerRef.value) {
+        scrollTop.value = containerRef.value.scrollTop;
+        emit("scroll", scrollTop.value);
+      }
+    }
+    return () => {
+      const { startIndex, endIndex, offsetTop, totalHeight } = range.value;
+      const items = [];
+      for (let i = startIndex; i <= endIndex; i++) {
+        const slotContent = slots.default?.({ index: i });
+        items.push(
+          h(
+            "div",
+            {
+              key: i,
+              style: {
+                height: `${props.itemHeight}px`,
+                width: "100%"
+              }
+            },
+            slotContent
+          )
+        );
+      }
+      return h(
+        "div",
+        {
+          ref: containerRef,
+          class: classNames(virtualListContainerClasses, coerceClassValue(attrs.class)),
+          style: { height: `${props.height}px` },
+          onScroll: handleScroll
+        },
+        [
+          h(
+            "div",
+            {
+              class: virtualListInnerClasses,
+              style: { height: `${totalHeight}px` }
+            },
+            [
+              h(
+                "div",
+                {
+                  style: {
+                    transform: `translateY(${offsetTop}px)`,
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%"
+                  }
+                },
+                items
+              )
+            ]
+          )
+        ]
+      );
+    };
+  }
+});
+var VirtualList_default = VirtualList;
+
+export { VirtualList, VirtualList_default };

package/dist/chunk-S276SM7L.mjs

@@ -0,0 +1,146 @@
+import { defineComponent, ref, computed, onBeforeUnmount, h } from 'vue';
+import { defaultResizeHandles, classNames, resizableBaseClasses, coerceClassValue, getResizableHandleClasses, calculateResizeDelta, applyAspectRatio, clampDimensions } from '@expcat/tigercat-core';
+
+// src/components/Resizable.ts
+var Resizable = defineComponent({
+  name: "TigerResizable",
+  props: {
+    defaultWidth: { type: Number, default: void 0 },
+    defaultHeight: { type: Number, default: void 0 },
+    minWidth: { type: Number, default: 0 },
+    minHeight: { type: Number, default: 0 },
+    maxWidth: { type: Number, default: void 0 },
+    maxHeight: { type: Number, default: void 0 },
+    handles: {
+      type: Array,
+      default: () => [...defaultResizeHandles]
+    },
+    axis: {
+      type: String,
+      default: "both"
+    },
+    disabled: { type: Boolean, default: false },
+    lockAspectRatio: { type: Boolean, default: false },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["resize-start", "resize", "resize-end"],
+  setup(props, { slots, emit, attrs }) {
+    const width = ref(props.defaultWidth);
+    const height = ref(props.defaultHeight);
+    const draggingHandle = ref(null);
+    const startMouseX = ref(0);
+    const startMouseY = ref(0);
+    const startWidth = ref(0);
+    const startHeight = ref(0);
+    const containerClasses = computed(
+      () => classNames(
+        resizableBaseClasses,
+        "group/resizable",
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const containerStyle = computed(() => {
+      const s = {};
+      if (width.value != null) s.width = `${width.value}px`;
+      if (height.value != null) s.height = `${height.value}px`;
+      return s;
+    });
+    const onMouseDown = (handle, e) => {
+      if (props.disabled) return;
+      e.preventDefault();
+      draggingHandle.value = handle;
+      startMouseX.value = e.clientX;
+      startMouseY.value = e.clientY;
+      startWidth.value = width.value ?? 0;
+      startHeight.value = height.value ?? 0;
+      emit("resize-start", {
+        width: startWidth.value,
+        height: startHeight.value,
+        handle,
+        deltaX: 0,
+        deltaY: 0
+      });
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+    const onMouseMove = (e) => {
+      if (!draggingHandle.value) return;
+      const mouseDeltaX = e.clientX - startMouseX.value;
+      const mouseDeltaY = e.clientY - startMouseY.value;
+      const { deltaWidth, deltaHeight } = calculateResizeDelta(
+        draggingHandle.value,
+        mouseDeltaX,
+        mouseDeltaY,
+        props.axis
+      );
+      let newW = startWidth.value + deltaWidth;
+      let newH = startHeight.value + deltaHeight;
+      if (props.lockAspectRatio) {
+        const ar = applyAspectRatio(newW, newH, startWidth.value, startHeight.value);
+        newW = ar.width;
+        newH = ar.height;
+      }
+      const clamped = clampDimensions(
+        newW,
+        newH,
+        props.minWidth,
+        props.minHeight,
+        props.maxWidth,
+        props.maxHeight
+      );
+      width.value = clamped.width;
+      height.value = clamped.height;
+      emit("resize", {
+        width: clamped.width,
+        height: clamped.height,
+        handle: draggingHandle.value,
+        deltaX: clamped.width - startWidth.value,
+        deltaY: clamped.height - startHeight.value
+      });
+    };
+    const onMouseUp = () => {
+      if (draggingHandle.value) {
+        emit("resize-end", {
+          width: width.value ?? 0,
+          height: height.value ?? 0,
+          handle: draggingHandle.value,
+          deltaX: (width.value ?? 0) - startWidth.value,
+          deltaY: (height.value ?? 0) - startHeight.value
+        });
+      }
+      draggingHandle.value = null;
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+    onBeforeUnmount(() => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    });
+    return () => {
+      const handleNodes = props.handles.map(
+        (pos) => h("div", {
+          class: getResizableHandleClasses(pos, draggingHandle.value === pos, props.disabled),
+          "data-handle": pos,
+          onMousedown: (e) => onMouseDown(pos, e)
+        })
+      );
+      return h(
+        "div",
+        {
+          class: containerClasses.value,
+          style: { ...containerStyle.value, ...props.style },
+          "data-resizable": ""
+        },
+        [...slots.default?.() || [], ...handleNodes]
+      );
+    };
+  }
+});
+var Resizable_default = Resizable;
+
+export { Resizable, Resizable_default };

package/dist/{chunk-6MJBCXPO.js → chunk-S2PMAXBQ.js}

@@ -5,6 +5,8 @@ var chunkIVTBNUKQ_js = require('./chunk-IVTBNUKQ.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
+var dropdownIdCounter = 0;
+var createDropdownMenuId = () => `tiger-dropdown-menu-${++dropdownIdCounter}`;
 var DropdownContextKey = /* @__PURE__ */ Symbol("DropdownContext");
 var Dropdown = vue.defineComponent({
   name: "TigerDropdown",
@@ -43,17 +45,17 @@ var Dropdown = vue.defineComponent({
       default: false
     },
     /**
-     * Whether the dropdown is visible (controlled mode)
+     * Whether the dropdown is open (controlled mode)
      */
-    visible: {
+    open: {
       type: Boolean,
       default: void 0
     },
     /**
-     * Default visibility (uncontrolled mode)
+     * Default open state (uncontrolled mode)
      * @default false
      */
-    defaultVisible: {
+    defaultOpen: {
       type: Boolean,
       default: false
     },
@@ -85,26 +87,41 @@ var Dropdown = vue.defineComponent({
       default: void 0
     }
   },
-  emits: ["update:visible", "visible-change"],
+  emits: ["update:open", "open-change"],
   setup(props, { slots, emit, attrs }) {
     const attrsRecord = attrs;
     const attrsClass = attrsRecord.class;
     const attrsStyle = attrsRecord.style;
     vue.onMounted(() => tigercatCore.injectDropdownStyles());
-    const internalVisible = vue.ref(props.defaultVisible);
+    const menuId = createDropdownMenuId();
+    const previousActiveElement = vue.ref(null);
+    const internalVisible = vue.ref(props.defaultOpen);
     const currentVisible = vue.computed(
-      () => props.visible !== void 0 ? props.visible : internalVisible.value
+      () => props.open !== void 0 ? props.open : internalVisible.value
     );
     const containerRef = vue.ref(null);
     const triggerRef = vue.ref(null);
     const floatingRef = vue.ref(null);
     const setVisible = (visible) => {
       if (props.disabled && visible) return;
-      if (props.visible === void 0) {
+      if (visible && !currentVisible.value) {
+        previousActiveElement.value = tigercatCore.captureActiveElement();
+      }
+      if (props.open === void 0) {
         internalVisible.value = visible;
       }
-      emit("update:visible", visible);
-      emit("visible-change", visible);
+      emit("update:open", visible);
+      emit("open-change", visible);
+      if (visible) {
+        vue.nextTick(() => {
+          if (floatingRef.value) {
+            tigercatCore.focusFirstMenuItem(floatingRef.value);
+          }
+        });
+      } else {
+        tigercatCore.restoreFocus(previousActiveElement.value);
+        previousActiveElement.value = null;
+      }
     };
     const handleItemClick = () => {
       if (props.closeOnClick) setVisible(false);
@@ -124,6 +141,11 @@ var Dropdown = vue.defineComponent({
       if (props.trigger !== "click") return;
       setVisible(!currentVisible.value);
     };
+    const handleMenuKeyDown = (event) => {
+      if (floatingRef.value) {
+        tigercatCore.handleMenuNavigation(floatingRef.value, event);
+      }
+    };
     const {
       x,
       y,
@@ -229,7 +251,8 @@ var Dropdown = vue.defineComponent({
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
           "aria-haspopup": "menu",
-          "aria-expanded": currentVisible.value
+          "aria-expanded": currentVisible.value,
+          "aria-controls": currentVisible.value ? menuId : void 0
         },
         [triggerNode, chevronNode]
       ) : null;
@@ -241,9 +264,18 @@ var Dropdown = vue.defineComponent({
           style: menuWrapperStyles.value,
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
+          onKeydown: handleMenuKeyDown,
           hidden: !currentVisible.value
         },
-        menuNode
+        [
+          vue.h(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            menuNode.type,
+            { ...menuNode.props || {}, id: menuId },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            menuNode.children
+          )
+        ]
       ) : null;
       const {
         class: _class,

package/dist/{chunk-5BAN4GHQ.mjs → chunk-SAMKKXAW.mjs}

@@ -1,4 +1,4 @@
-import { DropdownContextKey } from './chunk-D5CR2P7K.mjs';
+import { DropdownContextKey } from './chunk-3ICMBQPM.mjs';
 import { defineComponent, inject, computed, h } from 'vue';
 import { classNames, getDropdownItemClasses, coerceClassValue, mergeStyleValues } from '@expcat/tigercat-core';
 
@@ -78,6 +78,7 @@ var DropdownItem = defineComponent({
           type: "button",
           class: itemClasses.value,
           role: "menuitem",
+          tabindex: -1,
           "aria-disabled": props.disabled,
           disabled: props.disabled,
           onClick: handleClick,

package/dist/{chunk-S4GFEADD.js → chunk-SEKYX56R.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkATOLZW76_js = require('./chunk-ATOLZW76.js');
+var chunkD6AWPRGV_js = require('./chunk-D6AWPRGV.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -65,10 +65,18 @@ var FormItem = vue.defineComponent({
      */
     size: {
       type: String
+    },
+    /**
+     * Error display mode
+     * @default 'inline'
+     */
+    errorDisplayMode: {
+      type: String,
+      default: "inline"
     }
   },
   setup(props, { slots }) {
-    const formContextRef = vue.inject(chunkATOLZW76_js.FormContextKey, null);
+    const formContextRef = vue.inject(chunkD6AWPRGV_js.FormContextKey, null);
     const formContext = vue.computed(() => formContextRef?.value ?? null);
     const errorMessage = vue.ref("");
     const shakeTrigger = vue.ref(0);
@@ -266,7 +274,7 @@ var FormItem = vue.defineComponent({
       const contentElement = vue.h(
         "div",
         {
-          class: contentClasses.value
+          class: tigercatCore.classNames(contentClasses.value, props.errorDisplayMode === "popup" && "relative")
         },
         [
           vue.h(
@@ -288,7 +296,13 @@ var FormItem = vue.defineComponent({
             {
               id: hasError.value ? errorId : void 0,
               role: hasError.value ? "alert" : void 0,
-              class: errorClasses.value,
+              class: props.errorDisplayMode === "block" ? tigercatCore.classNames(
+                "mt-1 p-2 rounded bg-red-50 border border-red-200 text-red-600 text-sm",
+                !hasError.value && "hidden"
+              ) : props.errorDisplayMode === "popup" ? tigercatCore.classNames(
+                "absolute z-10 mt-1 px-2 py-1 rounded bg-red-600 text-white text-xs shadow-lg",
+                !hasError.value && "hidden"
+              ) : errorClasses.value,
               "aria-hidden": hasError.value ? void 0 : "true"
             },
             hasError.value ? errorMessage.value : ""

package/dist/chunk-T52TU2RW.mjs

@@ -0,0 +1,190 @@
+import { defineComponent, ref, watch, onMounted, computed, onBeforeUnmount, h } from 'vue';
+import { classNames, getSplitterContainerClasses, coerceClassValue, getPaneStyle, getSplitterGutterClasses, resizePanes, getSplitterGutterHandleClasses } from '@expcat/tigercat-core';
+
+// src/components/Splitter.ts
+var Splitter = defineComponent({
+  name: "TigerSplitter",
+  props: {
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    sizes: {
+      type: Array,
+      default: void 0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: void 0
+    },
+    gutterSize: {
+      type: Number,
+      default: 4
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:sizes", "resize-start", "resize", "resize-end"],
+  setup(props, { slots, emit, attrs }) {
+    const containerRef = ref(null);
+    const paneSizes = ref([]);
+    const draggingIndex = ref(-1);
+    const startPos = ref(0);
+    const startSizes = ref([]);
+    watch(
+      () => props.sizes,
+      (newSizes) => {
+        if (newSizes) paneSizes.value = [...newSizes];
+      },
+      { immediate: true }
+    );
+    const initSizes = () => {
+      if (props.sizes && props.sizes.length > 0) {
+        paneSizes.value = [...props.sizes];
+        return;
+      }
+      const el = containerRef.value;
+      if (!el) return;
+      const slotChildren = slots.default?.() || [];
+      const paneCount = slotChildren.length;
+      if (paneCount === 0) return;
+      const totalGutter = (paneCount - 1) * props.gutterSize;
+      const total = props.direction === "horizontal" ? el.clientWidth - totalGutter : el.clientHeight - totalGutter;
+      const eachSize = total / paneCount;
+      paneSizes.value = Array.from({ length: paneCount }, () => eachSize);
+    };
+    onMounted(initSizes);
+    const containerClasses = computed(
+      () => classNames(
+        getSplitterContainerClasses(props.direction, props.className),
+        coerceClassValue(attrs.class)
+      )
+    );
+    const getMins = () => paneSizes.value.map(() => props.min);
+    const getMaxes = () => paneSizes.value.map(() => props.max);
+    const onMouseDown = (index, e) => {
+      if (props.disabled) return;
+      e.preventDefault();
+      draggingIndex.value = index;
+      startPos.value = props.direction === "horizontal" ? e.clientX : e.clientY;
+      startSizes.value = [...paneSizes.value];
+      emit("resize-start", { index, sizes: [...paneSizes.value] });
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+    const onMouseMove = (e) => {
+      if (draggingIndex.value < 0) return;
+      const currentPos = props.direction === "horizontal" ? e.clientX : e.clientY;
+      const delta = currentPos - startPos.value;
+      const newSizes = resizePanes(
+        startSizes.value,
+        draggingIndex.value,
+        delta,
+        getMins(),
+        getMaxes()
+      );
+      if (newSizes) {
+        paneSizes.value = newSizes;
+        emit("update:sizes", newSizes);
+        emit("resize", { index: draggingIndex.value, sizes: newSizes });
+      }
+    };
+    const onMouseUp = () => {
+      if (draggingIndex.value >= 0) {
+        emit("resize-end", {
+          index: draggingIndex.value,
+          sizes: [...paneSizes.value]
+        });
+      }
+      draggingIndex.value = -1;
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+    onBeforeUnmount(() => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    });
+    return () => {
+      const children = slots.default?.() || [];
+      const nodes = [];
+      children.forEach((child, i) => {
+        const size = paneSizes.value[i];
+        const paneStyle = size != null ? getPaneStyle(size, props.direction) : void 0;
+        nodes.push(
+          h(
+            "div",
+            {
+              class: "tiger-splitter-pane relative overflow-auto",
+              style: paneStyle,
+              "data-pane-index": i
+            },
+            [child]
+          )
+        );
+        if (i < children.length - 1) {
+          const isDragging = draggingIndex.value === i;
+          nodes.push(
+            h(
+              "div",
+              {
+                class: getSplitterGutterClasses(props.direction, isDragging, props.disabled),
+                role: "separator",
+                "aria-orientation": props.direction === "horizontal" ? "vertical" : "horizontal",
+                tabindex: props.disabled ? -1 : 0,
+                "data-gutter-index": i,
+                onMousedown: (e) => onMouseDown(i, e),
+                onKeydown: (e) => {
+                  if (props.disabled) return;
+                  const step = 10;
+                  let delta = 0;
+                  if (props.direction === "horizontal" && e.key === "ArrowLeft" || props.direction === "vertical" && e.key === "ArrowUp") {
+                    delta = -step;
+                  } else if (props.direction === "horizontal" && e.key === "ArrowRight" || props.direction === "vertical" && e.key === "ArrowDown") {
+                    delta = step;
+                  }
+                  if (delta !== 0) {
+                    e.preventDefault();
+                    const newSizes = resizePanes(paneSizes.value, i, delta, getMins(), getMaxes());
+                    if (newSizes) {
+                      paneSizes.value = newSizes;
+                      emit("update:sizes", newSizes);
+                      emit("resize", { index: i, sizes: newSizes });
+                    }
+                  }
+                }
+              },
+              [h("div", { class: getSplitterGutterHandleClasses(props.direction) })]
+            )
+          );
+        }
+      });
+      return h(
+        "div",
+        {
+          ref: containerRef,
+          class: containerClasses.value,
+          style: props.style,
+          "data-direction": props.direction
+        },
+        nodes
+      );
+    };
+  }
+});
+var Splitter_default = Splitter;
+
+export { Splitter, Splitter_default };

package/dist/{chunk-VBXPDCRX.js → chunk-TDL4BUUB.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkBFNHRBWN_js = require('./chunk-BFNHRBWN.js');
+var chunk2WZGK7XJ_js = require('./chunk-2WZGK7XJ.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -28,10 +28,10 @@ var Popconfirm = vue.defineComponent({
   name: "TigerPopconfirm",
   inheritAttrs: false,
   props: {
-    /** Whether the popconfirm is visible (controlled mode) */
-    visible: { type: Boolean, default: void 0 },
-    /** Default visibility (uncontrolled mode) @default false */
-    defaultVisible: { type: Boolean, default: false },
+    /** Whether the popconfirm is open (controlled mode) */
+    open: { type: Boolean, default: void 0 },
+    /** Default open state (uncontrolled mode) @default false */
+    defaultOpen: { type: Boolean, default: false },
     /** Popconfirm title/question text */
     title: { type: String, default: "\u786E\u5B9A\u8981\u6267\u884C\u6B64\u64CD\u4F5C\u5417\uFF1F" },
     /** Popconfirm description text */
@@ -59,7 +59,7 @@ var Popconfirm = vue.defineComponent({
     className: { type: String, default: void 0 },
     style: { type: [String, Object, Array], default: void 0 }
   },
-  emits: ["update:visible", "visible-change", "confirm", "cancel"],
+  emits: ["update:open", "open-change", "confirm", "cancel"],
   setup(props, { slots, emit, attrs }) {
     const {
       currentVisible,
@@ -69,7 +69,7 @@ var Popconfirm = vue.defineComponent({
       floatingRef,
       floatingStyles,
       actualPlacement
-    } = chunkBFNHRBWN_js.useFloatingPopup({ props, emit, multiTrigger: false });
+    } = chunk2WZGK7XJ_js.useFloatingPopup({ props, emit, multiTrigger: false });
     const popconfirmId = createPopconfirmId();
     const titleId = `${popconfirmId}-title`;
     const descriptionId = `${popconfirmId}-description`;