@expcat/tigercat-vue 2.0.0 → 2.0.4

package/dist/{chunk-LFENEILY.mjs → chunk-WC5MKASU.mjs}

@@ -1,9 +1,13 @@
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";
 
 // src/components/TreeSelect.ts
-import { defineComponent, h, ref, computed, watch, onBeforeUnmount } from "vue";
+import { defineComponent, h, ref, computed } from "vue";
 import {
   treeSelectBaseClasses,
   treeSelectDropdownClasses,
@@ -130,6 +134,21 @@ var TreeSelect = defineComponent({
     const uncontrolledSearchValue = ref(props.defaultSearchValue);
     const searchQuery = computed(() => props.searchValue ?? uncontrolledSearchValue.value);
     const containerRef = ref(null);
+    const triggerRef = ref(null);
+    const dropdownRef = ref(null);
+    const overlay = useVueAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: triggerRef,
+      floatingRef: dropdownRef,
+      containerRef,
+      placement: "bottom-start",
+      offset: 4,
+      matchReferenceWidth: true,
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      onDismiss: closeDropdown
+    });
     const expandedKeys = ref(
       props.defaultExpandAll ? new Set(getAllTreeSelectKeys(props.treeData)) : /* @__PURE__ */ new Set()
     );
@@ -222,21 +241,6 @@ var TreeSelect = defineComponent({
         closeDropdown();
       }
     }
-    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 }, [
@@ -244,6 +248,7 @@ var TreeSelect = defineComponent({
         h(
           "button",
           {
+            ref: triggerRef,
             type: "button",
             class: getTreeSelectTriggerClasses(props.size, props.disabled, isOpen.value),
             ...getPickerComboboxAria({ expanded: isOpen.value, listboxId }),
@@ -284,91 +289,97 @@ var TreeSelect = defineComponent({
           ]
         ),
         // Dropdown
-        isOpen.value ? h(
-          "div",
-          {
-            ...getPickerListboxAria({ id: listboxId }),
-            class: treeSelectDropdownClasses
-          },
-          [
-            // Search
-            props.searchable ? h("input", {
-              type: "text",
-              class: treeSelectSearchClasses,
-              placeholder: resolveLocaleText(
-                "Search...",
-                mergedLocale.value?.common?.searchPlaceholder
-              ),
-              value: searchQuery.value,
-              "aria-label": resolveLocaleText(
-                "Search tree",
-                mergedLocale.value?.common?.searchPlaceholder
-              ),
-              onInput: (e) => updateSearchValue(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(
+        isOpen.value ? renderVueOverlayTeleport(
+          h(
+            "div",
+            {
+              ref: dropdownRef,
+              ...getPickerListboxAria({ id: listboxId }),
+              class: classNames(treeSelectDropdownClasses, overlay.floatingClasses.value),
+              style: overlay.floatingStyles.value,
+              "data-positioned": overlay.positioned.value
+            },
+            [
+              // Search
+              props.searchable ? h("input", {
+                type: "text",
+                class: treeSelectSearchClasses,
+                placeholder: resolveLocaleText(
+                  "Search...",
+                  mergedLocale.value?.common?.searchPlaceholder
+                ),
+                value: searchQuery.value,
+                "aria-label": resolveLocaleText(
+                  "Search tree",
+                  mergedLocale.value?.common?.searchPlaceholder
+                ),
+                onInput: (e) => updateSearchValue(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,
+                    ...getPickerOptionAria({ selected, 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",
-                {
-                  key: node.key,
-                  ...getPickerOptionAria({ selected, 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 },
-              resolveLocaleText(
-                "No data",
-                props.emptyText,
-                mergedLocale.value?.common?.emptyText
+                { class: treeSelectEmptyClasses },
+                resolveLocaleText(
+                  "No data",
+                  props.emptyText,
+                  mergedLocale.value?.common?.emptyText
+                )
               )
-            )
-          ]
+            ]
+          ),
+          overlay.target.value
         ) : null
       ]);
     };

package/dist/components/ActivityFeed.mjs

@@ -1,14 +1,14 @@
 import {
   ActivityFeed,
   ActivityFeed_default
-} from "../chunk-NP6DZQ3O.mjs";
+} from "../chunk-RID7A5V7.mjs";
 import "../chunk-JQSIWPNM.mjs";
 import "../chunk-3MO7A4GU.mjs";
-import "../chunk-O6BN5R6J.mjs";
-import "../chunk-BDTPFPSB.mjs";
+import "../chunk-AUMTHL6N.mjs";
 import "../chunk-342DH5CF.mjs";
 import "../chunk-NN6AINLG.mjs";
 import "../chunk-TC6ZPQFT.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-ZFTRR3KW.mjs";
 import "../chunk-JHFM6IFO.mjs";
 import "../chunk-UOJOJBEU.mjs";

package/dist/components/AutoComplete.mjs

@@ -1,7 +1,8 @@
 import {
   AutoComplete,
   AutoComplete_default
-} from "../chunk-IDUEWMWN.mjs";
+} from "../chunk-7KCOF5US.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/BackTop.d.mts

@@ -104,10 +104,10 @@ declare const BackTop: vue.DefineComponent<vue.ExtractPropTypes<{
 }>, {
     className: string;
     style: Record<string, unknown>;
+    placement: ViewportPlacement;
+    offset: ViewportOffset;
     target: () => HTMLElement | Window | null;
     position: BackTopPosition;
-    offset: ViewportOffset;
-    placement: ViewportPlacement;
     duration: number;
     visibilityHeight: number;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

package/dist/components/Cascader.mjs

@@ -1,7 +1,8 @@
 import {
   Cascader,
   Cascader_default
-} from "../chunk-DWK5GUMB.mjs";
+} from "../chunk-OTGGPXDT.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/ColorPicker.mjs

@@ -1,7 +1,8 @@
 import {
   ColorPicker,
   ColorPicker_default
-} from "../chunk-EWUHEW6W.mjs";
+} from "../chunk-4HUYX5WW.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 export {
   ColorPicker,
   ColorPicker_default as default

package/dist/components/CropUpload.mjs

@@ -1,12 +1,12 @@
 import {
   CropUpload,
   CropUpload_default
-} from "../chunk-DKMKJZ7A.mjs";
-import "../chunk-D4APFWWS.mjs";
+} from "../chunk-S5RTMAQN.mjs";
+import "../chunk-IPGPLFUZ.mjs";
 import "../chunk-BCU7GYF6.mjs";
 import "../chunk-YZBQ6IR7.mjs";
 import "../chunk-Z2ZECCGD.mjs";
-import "../chunk-BDTPFPSB.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/DataExport.mjs

@@ -1,8 +1,8 @@
 import {
   DataExport
-} from "../chunk-A7QIMKWQ.mjs";
-import "../chunk-SK2QJ66E.mjs";
-import "../chunk-BDTPFPSB.mjs";
+} from "../chunk-2T2NEZRZ.mjs";
+import "../chunk-KROVW4AW.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/DataTableWithToolbar.mjs

@@ -1,14 +1,14 @@
 import {
   DataTableWithToolbar,
   DataTableWithToolbar_default
-} from "../chunk-TK3QU367.mjs";
-import "../chunk-IZRQ7LB3.mjs";
-import "../chunk-N7LWKAYS.mjs";
-import "../chunk-SYRRMZT2.mjs";
+} from "../chunk-DI6RRAGQ.mjs";
+import "../chunk-AU6IC6K7.mjs";
+import "../chunk-BZ6MVFV7.mjs";
+import "../chunk-OQVGB7X6.mjs";
 import "../chunk-6BDDX2R4.mjs";
 import "../chunk-6TTICJR4.mjs";
 import "../chunk-2LIIMWBR.mjs";
-import "../chunk-KE6RGD4Y.mjs";
+import "../chunk-26OI3TEA.mjs";
 import "../chunk-XLNK3Z2P.mjs";
 import "../chunk-SJINC5NF.mjs";
 import "../chunk-P2LZ2MR5.mjs";
@@ -17,7 +17,7 @@ import "../chunk-MYKKKVGK.mjs";
 import "../chunk-P3VAY2IQ.mjs";
 import "../chunk-YZBQ6IR7.mjs";
 import "../chunk-Z2ZECCGD.mjs";
-import "../chunk-BDTPFPSB.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/DatePicker.mjs

@@ -1,8 +1,9 @@
 import {
   DatePicker,
   DatePicker_default
-} from "../chunk-4ZZYQITT.mjs";
+} from "../chunk-FWO7RNGI.mjs";
 import "../chunk-2TNZ4JNT.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/DonutChart.d.mts

@@ -303,7 +303,7 @@ declare const DonutChart: vue.DefineComponent<vue.ExtractPropTypes<{
     width: number;
     height: number;
     padding: ChartPadding;
-    labelPosition: "inside" | "outside";
+    labelPosition: "outside" | "inside";
     gradient: boolean;
     hoverable: boolean;
     shadow: boolean;

package/dist/components/Drawer.d.mts

@@ -358,10 +358,10 @@ declare const Drawer: vue.DefineComponent<vue.ExtractPropTypes<{
     className: string;
     style: Record<string, unknown>;
     title: string;
-    open: boolean;
     mask: boolean;
-    width: string | number;
     placement: DrawerPlacement;
+    open: boolean;
+    width: string | number;
     closable: boolean;
     zIndex: number;
     maskClosable: boolean;

package/dist/components/Drawer.mjs

@@ -1,8 +1,8 @@
 import {
   Drawer,
   Drawer_default
-} from "../chunk-MNSVJBNH.mjs";
-import "../chunk-BDTPFPSB.mjs";
+} from "../chunk-B4MDHE3L.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/Dropdown.d.mts

@@ -295,9 +295,9 @@ declare const Dropdown: vue.DefineComponent<vue.ExtractPropTypes<{
     className: string;
     style: Record<string, unknown>;
     disabled: boolean;
-    open: boolean;
-    offset: number;
     placement: FloatingPlacement;
+    offset: number;
+    open: boolean;
     trigger: DropdownTrigger;
     defaultOpen: boolean;
     closeOnClick: boolean;

package/dist/components/Dropdown.mjs

@@ -4,8 +4,8 @@ import {
   DropdownItem,
   DropdownMenu,
   Dropdown_default
-} from "../chunk-SK2QJ66E.mjs";
-import "../chunk-BDTPFPSB.mjs";
+} from "../chunk-KROVW4AW.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 export {
   Dropdown,
   DropdownContextKey,

package/dist/components/FloatButton.d.mts

@@ -117,8 +117,8 @@ declare const FloatButton: vue.DefineComponent<vue.ExtractPropTypes<{
     style: Record<string, string | number>;
     disabled: boolean;
     tooltip: string;
-    offset: ViewportOffset;
     placement: ViewportPlacement;
+    offset: ViewportOffset;
     floating: boolean;
     shape: FloatButtonShape;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

package/dist/components/FormItem.mjs

@@ -1,9 +1,10 @@
 import {
   FormItem,
   FormItem_default
-} from "../chunk-OHPXOLNB.mjs";
+} from "../chunk-K3WTQBE4.mjs";
 import "../chunk-HAUG3OP5.mjs";
 import "../chunk-P2LZ2MR5.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/Image.mjs

@@ -2,10 +2,10 @@ import {
   IMAGE_GROUP_INJECTION_KEY,
   Image,
   Image_default
-} from "../chunk-JKPXJ3VB.mjs";
+} from "../chunk-JALHMWKW.mjs";
 import "../chunk-LPZBXTJ6.mjs";
-import "../chunk-KE6RGD4Y.mjs";
-import "../chunk-BDTPFPSB.mjs";
+import "../chunk-26OI3TEA.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/Loading.mjs

@@ -1,8 +1,8 @@
 import {
   Loading,
   Loading_default
-} from "../chunk-O6BN5R6J.mjs";
-import "../chunk-BDTPFPSB.mjs";
+} from "../chunk-AUMTHL6N.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/Mentions.mjs

@@ -1,7 +1,8 @@
 import {
   Mentions,
   Mentions_default
-} from "../chunk-DWPZRG7A.mjs";
+} from "../chunk-PGF7HLLR.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 export {
   Mentions,
   Mentions_default as default

package/dist/components/Menu.mjs

@@ -5,8 +5,8 @@ import {
   MenuItemGroup,
   Menu_default,
   SubMenu
-} from "../chunk-RHV6DWY6.mjs";
-import "../chunk-BDTPFPSB.mjs";
+} from "../chunk-7VHXZX7Y.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 export {
   Menu,
   MenuContextKey,

package/dist/components/Modal.d.mts

@@ -347,8 +347,8 @@ declare const Modal: vue.DefineComponent<vue.ExtractPropTypes<{
     className: string;
     style: Record<string, unknown>;
     title: string;
-    open: boolean;
     mask: boolean;
+    open: boolean;
     width: string | number;
     draggable: boolean;
     closable: boolean;

package/dist/components/Modal.mjs

@@ -1,10 +1,10 @@
 import {
   Modal,
   Modal_default
-} from "../chunk-D4APFWWS.mjs";
+} from "../chunk-IPGPLFUZ.mjs";
 import "../chunk-YZBQ6IR7.mjs";
 import "../chunk-Z2ZECCGD.mjs";
-import "../chunk-BDTPFPSB.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/NotificationCenter.mjs

@@ -1,17 +1,17 @@
 import {
   NotificationCenter,
   NotificationCenter_default
-} from "../chunk-EZZD4OCV.mjs";
+} from "../chunk-GS4SV2HK.mjs";
 import "../chunk-U6OGGZBY.mjs";
 import "../chunk-KOG3HKOF.mjs";
 import "../chunk-2LIIMWBR.mjs";
 import "../chunk-HS4YQGZQ.mjs";
 import "../chunk-YZBQ6IR7.mjs";
 import "../chunk-Z2ZECCGD.mjs";
-import "../chunk-O6BN5R6J.mjs";
-import "../chunk-BDTPFPSB.mjs";
+import "../chunk-AUMTHL6N.mjs";
 import "../chunk-NN6AINLG.mjs";
 import "../chunk-TC6ZPQFT.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/PieChart.d.mts

@@ -277,7 +277,7 @@ declare const PieChart: vue.DefineComponent<vue.ExtractPropTypes<{
     width: number;
     height: number;
     padding: ChartPadding;
-    labelPosition: "inside" | "outside";
+    labelPosition: "outside" | "inside";
     gradient: boolean;
     hoverable: boolean;
     shadow: boolean;

package/dist/components/Popconfirm.d.mts

@@ -161,10 +161,10 @@ declare const Popconfirm: vue.DefineComponent<vue.ExtractPropTypes<{
     title: string;
     disabled: boolean;
     icon: PopconfirmIconType;
-    open: boolean;
+    placement: FloatingPlacement;
     offset: number;
+    open: boolean;
     description: string;
-    placement: FloatingPlacement;
     defaultOpen: boolean;
     showIcon: boolean;
     okType: "primary" | "danger";

package/dist/components/Popconfirm.mjs

@@ -1,9 +1,9 @@
 import {
   Popconfirm,
   Popconfirm_default
-} from "../chunk-VMYV5EWI.mjs";
-import "../chunk-KE6RGD4Y.mjs";
-import "../chunk-BDTPFPSB.mjs";
+} from "../chunk-KICZSLOX.mjs";
+import "../chunk-26OI3TEA.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 export {
   Popconfirm,
   Popconfirm_default as default

package/dist/components/Popover.d.mts

@@ -126,11 +126,11 @@ declare const Popover: vue.DefineComponent<vue.ExtractPropTypes<{
     style: StyleValue;
     title: string;
     disabled: boolean;
+    placement: FloatingPlacement;
+    offset: number;
     open: boolean;
     width: string | number;
     content: string;
-    offset: number;
-    placement: FloatingPlacement;
     trigger: PopoverTrigger;
     defaultOpen: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

package/dist/components/Popover.mjs

@@ -1,9 +1,9 @@
 import {
   Popover,
   Popover_default
-} from "../chunk-SYRRMZT2.mjs";
-import "../chunk-KE6RGD4Y.mjs";
-import "../chunk-BDTPFPSB.mjs";
+} from "../chunk-OQVGB7X6.mjs";
+import "../chunk-26OI3TEA.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 export {
   Popover,
   Popover_default as default

package/dist/components/Select.mjs

@@ -1,7 +1,8 @@
 import {
   Select,
   Select_default
-} from "../chunk-N7LWKAYS.mjs";
+} from "../chunk-BZ6MVFV7.mjs";
+import "../chunk-Q7Y22OFX.mjs";
 import "../chunk-UOJOJBEU.mjs";
 import "../chunk-TGXBCKOU.mjs";
 export {

package/dist/components/Spotlight.d.mts

@@ -186,8 +186,8 @@ declare const Spotlight: vue.DefineComponent<vue.ExtractPropTypes<{
     className: string;
     style: Record<string, unknown>;
     title: string;
-    open: boolean | undefined;
     mask: boolean;
+    open: boolean | undefined;
     limit: number;
     defaultOpen: boolean;
     zIndex: number;