@expcat/tigercat-vue 2.0.0 → 2.0.4

package/dist/{chunk-N7LWKAYS.mjs → chunk-BZ6MVFV7.mjs}

@@ -1,3 +1,7 @@
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";
@@ -228,6 +232,19 @@ var Select = defineComponent({
     const dropdownRef = ref(null);
     const triggerRef = ref(null);
     const searchInputRef = ref(null);
+    const overlay = useVueAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: triggerRef,
+      floatingRef: dropdownRef,
+      placement: "bottom-start",
+      offset: 4,
+      layout: "fullscreen-sm",
+      matchReferenceWidth: true,
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      onDismiss: closeDropdown
+    });
     const virtualScrollTop = ref(0);
     const virtualScrollRef = ref(null);
     watch(activeIndex, (idx) => {
@@ -369,11 +386,6 @@ var Select = defineComponent({
       emit("update:modelValue", newValue);
       emit("change", newValue);
     }
-    function handleClickOutside(event) {
-      if (dropdownRef.value && triggerRef.value && !dropdownRef.value.contains(event.target) && !triggerRef.value.contains(event.target)) {
-        closeDropdown();
-      }
-    }
     function handleSearchInput(event) {
       const target = event.target;
       updateSearchValue(target.value);
@@ -532,7 +544,6 @@ var Select = defineComponent({
       isOpen,
       (open) => {
         if (open) {
-          document.addEventListener("click", handleClickOutside);
           const selectedIndex = (() => {
             if (props.multiple && Array.isArray(props.modelValue)) {
               const values = props.modelValue;
@@ -556,8 +567,6 @@ var Select = defineComponent({
           if (!props.searchable) {
             focusOptionAt(nextActive);
           }
-        } else {
-          document.removeEventListener("click", handleClickOutside);
         }
       },
       { immediate: true }
@@ -579,7 +588,6 @@ var Select = defineComponent({
       }
     );
     onBeforeUnmount(() => {
-      document.removeEventListener("click", handleClickOutside);
       searchDebouncer.cancel();
     });
     return () => {
@@ -643,188 +651,196 @@ var Select = defineComponent({
           ]
         ),
         // Dropdown
-        isOpen.value && h(
-          "div",
-          {
-            ref: dropdownRef,
-            class: selectDropdownBaseClasses,
-            role: "listbox",
-            id: listboxId,
-            "aria-multiselectable": props.multiple ? true : void 0,
-            onKeydown: handleDropdownKeyDown
-          },
-          [
-            // Search input
-            props.searchable && h("input", {
-              ref: searchInputRef,
-              type: "text",
-              class: selectSearchInputClasses,
-              placeholder: resolveLocaleText(
-                "Search...",
-                mergedLocale.value?.common?.searchPlaceholder
-              ),
-              value: searchQuery.value,
-              onInput: handleSearchInput,
-              onKeydown: handleSearchKeyDown
-            }),
-            // Options list
-            filteredOptions.value.length > 0 ? (() => {
-              let optionIndex = -1;
-              const renderOptionItem = (option, idx, displayLabel = option.label) => {
-                const selected = isSelected(option);
-                const active = idx === activeIndex.value;
-                const optionAria = getPickerOptionAria({
-                  selected,
-                  disabled: !!option.disabled
-                });
-                return h(
-                  "div",
-                  {
-                    key: option.value,
-                    id: getOptionId(idx),
-                    "data-option-index": idx,
-                    ...optionAria,
-                    tabindex: active ? 0 : -1,
-                    class: getSelectOptionClasses(selected, !!option.disabled, props.size),
-                    onMouseenter: () => {
-                      if (!option.disabled) {
-                        activeIndex.value = idx;
+        isOpen.value && renderVueOverlayTeleport(
+          h(
+            "div",
+            {
+              ref: dropdownRef,
+              class: classNames(selectDropdownBaseClasses, overlay.floatingClasses.value),
+              style: overlay.floatingStyles.value,
+              "data-positioned": overlay.positioned.value,
+              role: "listbox",
+              id: listboxId,
+              "aria-multiselectable": props.multiple ? true : void 0,
+              onKeydown: handleDropdownKeyDown
+            },
+            [
+              // Search input
+              props.searchable && h("input", {
+                ref: searchInputRef,
+                type: "text",
+                class: selectSearchInputClasses,
+                placeholder: resolveLocaleText(
+                  "Search...",
+                  mergedLocale.value?.common?.searchPlaceholder
+                ),
+                value: searchQuery.value,
+                onInput: handleSearchInput,
+                onKeydown: handleSearchKeyDown
+              }),
+              // Options list
+              filteredOptions.value.length > 0 ? (() => {
+                let optionIndex = -1;
+                const renderOptionItem = (option, idx, displayLabel = option.label) => {
+                  const selected = isSelected(option);
+                  const active = idx === activeIndex.value;
+                  const optionAria = getPickerOptionAria({
+                    selected,
+                    disabled: !!option.disabled
+                  });
+                  return h(
+                    "div",
+                    {
+                      key: option.value,
+                      id: getOptionId(idx),
+                      "data-option-index": idx,
+                      ...optionAria,
+                      tabindex: active ? 0 : -1,
+                      class: getSelectOptionClasses(selected, !!option.disabled, props.size),
+                      onMouseenter: () => {
+                        if (!option.disabled) {
+                          activeIndex.value = idx;
+                        }
+                      },
+                      onClick: () => selectOption(option)
+                    },
+                    [
+                      h("span", { class: "flex items-center justify-between w-full" }, [
+                        h("span", displayLabel),
+                        selected && h("span", CheckIcon)
+                      ])
+                    ]
+                  );
+                };
+                const hasGroups = filteredOptions.value.some(isOptionGroup);
+                if (props.virtual && !hasGroups) {
+                  const flat = filteredOptions.value.filter(
+                    (o) => !isOptionGroup(o)
+                  );
+                  const all = creatableOption.value ? [...flat, creatableOption.value] : flat;
+                  const itemH = getSelectVirtualItemHeight(props.size);
+                  const { startIndex, endIndex, totalHeight } = fixedSizeStrategy(
+                    itemH
+                  ).getRange(virtualScrollTop.value, props.listHeight, all.length, 5);
+                  const visible = [];
+                  for (let i = startIndex; i <= endIndex; i++) {
+                    const isCreate = creatableOption.value && i === all.length - 1;
+                    visible.push(
+                      renderOptionItem(
+                        all[i],
+                        i,
+                        isCreate ? getCreateSelectOptionLabel(all[i], props.createOptionText) : all[i].label
+                      )
+                    );
+                  }
+                  return h(
+                    "div",
+                    {
+                      ref: virtualScrollRef,
+                      "data-tiger-select-virtual": "",
+                      style: { maxHeight: `${props.listHeight}px`, overflowY: "auto" },
+                      onScroll: (e) => {
+                        virtualScrollTop.value = e.target.scrollTop;
                       }
                     },
-                    onClick: () => selectOption(option)
-                  },
-                  [
-                    h("span", { class: "flex items-center justify-between w-full" }, [
-                      h("span", displayLabel),
-                      selected && h("span", CheckIcon)
-                    ])
-                  ]
-                );
-              };
-              const hasGroups = filteredOptions.value.some(isOptionGroup);
-              if (props.virtual && !hasGroups) {
-                const flat = filteredOptions.value.filter(
-                  (o) => !isOptionGroup(o)
-                );
-                const all = creatableOption.value ? [...flat, creatableOption.value] : flat;
-                const itemH = getSelectVirtualItemHeight(props.size);
-                const { startIndex, endIndex, totalHeight } = fixedSizeStrategy(
-                  itemH
-                ).getRange(virtualScrollTop.value, props.listHeight, all.length, 5);
-                const visible = [];
-                for (let i = startIndex; i <= endIndex; i++) {
-                  const isCreate = creatableOption.value && i === all.length - 1;
-                  visible.push(
+                    [
+                      h(
+                        "div",
+                        { style: { height: `${totalHeight}px`, position: "relative" } },
+                        [
+                          h(
+                            "div",
+                            { style: { transform: `translateY(${startIndex * itemH}px)` } },
+                            visible
+                          )
+                        ]
+                      )
+                    ]
+                  );
+                }
+                const optionNodes = filteredOptions.value.map((item) => {
+                  if (isOptionGroup(item)) {
+                    return h("div", { key: item.label }, [
+                      h("div", { class: selectGroupLabelClasses }, item.label),
+                      item.options.map((option) => {
+                        optionIndex += 1;
+                        return renderOptionItem(option, optionIndex);
+                      })
+                    ]);
+                  }
+                  optionIndex += 1;
+                  return renderOptionItem(item, optionIndex);
+                });
+                if (creatableOption.value) {
+                  optionIndex += 1;
+                  optionNodes.push(
                     renderOptionItem(
-                      all[i],
-                      i,
-                      isCreate ? getCreateSelectOptionLabel(all[i], props.createOptionText) : all[i].label
+                      creatableOption.value,
+                      optionIndex,
+                      getCreateSelectOptionLabel(
+                        creatableOption.value,
+                        props.createOptionText
+                      )
                     )
                   );
                 }
+                return optionNodes;
+              })() : creatableOption.value ? (() => {
+                const optionLabel = getCreateSelectOptionLabel(
+                  creatableOption.value,
+                  props.createOptionText
+                );
                 return h(
                   "div",
                   {
-                    ref: virtualScrollRef,
-                    "data-tiger-select-virtual": "",
-                    style: { maxHeight: `${props.listHeight}px`, overflowY: "auto" },
-                    onScroll: (e) => {
-                      virtualScrollTop.value = e.target.scrollTop;
-                    }
+                    key: creatableOption.value.value,
+                    id: getOptionId(0),
+                    "data-option-index": 0,
+                    role: "option",
+                    "aria-selected": false,
+                    tabindex: activeIndex.value === 0 ? 0 : -1,
+                    class: getSelectOptionClasses(false, false, props.size),
+                    onMouseenter: () => {
+                      activeIndex.value = 0;
+                    },
+                    onClick: () => selectOption(creatableOption.value)
                   },
                   [
                     h(
-                      "div",
-                      { style: { height: `${totalHeight}px`, position: "relative" } },
-                      [
-                        h(
-                          "div",
-                          { style: { transform: `translateY(${startIndex * itemH}px)` } },
-                          visible
-                        )
-                      ]
+                      "span",
+                      { class: "flex items-center justify-between w-full" },
+                      optionLabel
                     )
                   ]
                 );
-              }
-              const optionNodes = filteredOptions.value.map((item) => {
-                if (isOptionGroup(item)) {
-                  return h("div", { key: item.label }, [
-                    h("div", { class: selectGroupLabelClasses }, item.label),
-                    item.options.map((option) => {
-                      optionIndex += 1;
-                      return renderOptionItem(option, optionIndex);
-                    })
-                  ]);
-                }
-                optionIndex += 1;
-                return renderOptionItem(item, optionIndex);
-              });
-              if (creatableOption.value) {
-                optionIndex += 1;
-                optionNodes.push(
-                  renderOptionItem(
-                    creatableOption.value,
-                    optionIndex,
-                    getCreateSelectOptionLabel(creatableOption.value, props.createOptionText)
-                  )
-                );
-              }
-              return optionNodes;
-            })() : creatableOption.value ? (() => {
-              const optionLabel = getCreateSelectOptionLabel(
-                creatableOption.value,
-                props.createOptionText
-              );
-              return h(
+              })() : h(
                 "div",
-                {
-                  key: creatableOption.value.value,
-                  id: getOptionId(0),
-                  "data-option-index": 0,
-                  role: "option",
-                  "aria-selected": false,
-                  tabindex: activeIndex.value === 0 ? 0 : -1,
-                  class: getSelectOptionClasses(false, false, props.size),
-                  onMouseenter: () => {
-                    activeIndex.value = 0;
-                  },
-                  onClick: () => selectOption(creatableOption.value)
-                },
-                [
-                  h(
-                    "span",
-                    { class: "flex items-center justify-between w-full" },
-                    optionLabel
-                  )
-                ]
-              );
-            })() : h(
-              "div",
-              { class: selectEmptyStateClasses },
-              resolveLocaleText(
-                "No options found",
-                props.emptyText,
-                mergedLocale.value?.common?.emptyText
-              )
-            ),
-            h("div", { class: selectDoneActionClasses }, [
-              h(
-                "button",
-                {
-                  type: "button",
-                  class: selectDoneButtonClasses,
-                  onClick: closeDropdown,
-                  onKeydown: (event) => {
-                    if (event.key === "Enter" || event.key === " ") {
-                      event.stopPropagation();
+                { class: selectEmptyStateClasses },
+                resolveLocaleText(
+                  "No options found",
+                  props.emptyText,
+                  mergedLocale.value?.common?.emptyText
+                )
+              ),
+              h("div", { class: selectDoneActionClasses }, [
+                h(
+                  "button",
+                  {
+                    type: "button",
+                    class: selectDoneButtonClasses,
+                    onClick: closeDropdown,
+                    onKeydown: (event) => {
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.stopPropagation();
+                      }
                     }
-                  }
-                },
-                doneText.value
-              )
-            ])
-          ]
+                  },
+                  doneText.value
+                )
+              ])
+            ]
+          ),
+          overlay.target.value
         )
       ]);
     };

package/dist/{chunk-TK3QU367.mjs → chunk-DI6RRAGQ.mjs}

@@ -1,12 +1,12 @@
 import {
   Table
-} from "./chunk-IZRQ7LB3.mjs";
+} from "./chunk-AU6IC6K7.mjs";
 import {
   Select
-} from "./chunk-N7LWKAYS.mjs";
+} from "./chunk-BZ6MVFV7.mjs";
 import {
   Popover
-} from "./chunk-SYRRMZT2.mjs";
+} from "./chunk-OQVGB7X6.mjs";
 import {
   Input
 } from "./chunk-XLNK3Z2P.mjs";