cisse-vue-ui 0.2.5 → 0.2.7

package/dist/{CollapsibleCard.vue_vue_type_script_setup_true_lang-Cwn5A5CH.js → CollapsibleCard.vue_vue_type_script_setup_true_lang-Y1wvT4aS.js}

@@ -1,7 +1,8 @@
-import { defineComponent, createElementBlock, openBlock, createCommentVNode, renderSlot, createElementVNode, createTextVNode, toDisplayString, useSlots, computed, createVNode, Fragment, renderList, normalizeClass, createBlock, resolveDynamicComponent, withCtx, onMounted, nextTick, getCurrentInstance, getCurrentScope, hasInjectionContext, inject, watch, shallowRef, toValue, watchEffect, unref, createSlots, ref, onUnmounted, withDirectives, vModelText, withModifiers, Teleport, Transition, normalizeStyle, resolveComponent, mergeProps, provide, vShow } from "vue";
+import { defineComponent, createElementBlock, openBlock, createCommentVNode, renderSlot, createElementVNode, createTextVNode, toDisplayString, useSlots, computed, createVNode, Fragment, renderList, normalizeClass, createBlock, resolveDynamicComponent, withCtx, onMounted, nextTick, getCurrentInstance, getCurrentScope, hasInjectionContext, inject, watch, shallowRef, toValue, watchEffect, unref, createSlots, ref, withDirectives, vModelText, withModifiers, Teleport, Transition, normalizeStyle, resolveComponent, mergeProps, provide, vShow } from "vue";
 import { _ as _sfc_main$c } from "./Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js";
 import { e as _sfc_main$d, d as _sfc_main$e, c as _sfc_main$f, b as _sfc_main$g, a as _sfc_main$h } from "./BadgeType.vue_vue_type_script_setup_true_lang-CnB5eNEM.js";
 import { Icon } from "@iconify/vue";
+import { u as useDropdown } from "./useDropdown-iVu14E6s.js";
 const _hoisted_1$8 = { class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950" };
 const _hoisted_2$6 = {
   key: 0,
@@ -82,9 +83,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   },
   emits: ["select", "selectAll"],
   setup(__props, { emit: __emit }) {
+    const slots = useSlots();
     const props = __props;
     const emit = __emit;
-    const slots = useSlots();
     const typeComponents = {
       text: _sfc_main$h,
       number: _sfc_main$g,
@@ -712,13 +713,21 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const searchQuery = ref("");
-    const isOpen = ref(false);
-    const highlightedIndex = ref(-1);
     const inputRef = ref(null);
-    const dropdownRef = ref(null);
     const containerRef = ref(null);
+    const dropdownRef = ref(null);
     const inputWrapperRef = ref(null);
-    const dropdownPosition = ref({ top: 0, left: 0, width: 0 });
+    const {
+      isOpen,
+      highlightedIndex,
+      dropdownStyle,
+      open: openBase,
+      close: closeBase,
+      handleKeydown: baseHandleKeydown,
+      scrollToHighlighted
+    } = useDropdown(inputWrapperRef, dropdownRef, {
+      teleport: props.teleport
+    });
     const filteredOptions = computed(() => {
       if (!searchQuery.value) {
         return props.options;
@@ -742,30 +751,19 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
-    const updatePosition = () => {
-      if (!inputWrapperRef.value || !props.teleport) return;
-      const rect = inputWrapperRef.value.getBoundingClientRect();
-      dropdownPosition.value = {
-        top: rect.bottom + window.scrollY + 8,
-        left: rect.left + window.scrollX,
-        width: rect.width
-      };
-    };
     const openDropdown = () => {
       if (props.disabled) return;
-      isOpen.value = true;
       searchQuery.value = "";
       highlightedIndex.value = -1;
+      openBase();
       nextTick(() => {
         var _a;
         (_a = inputRef.value) == null ? void 0 : _a.focus();
-        updatePosition();
       });
     };
     const closeDropdown = () => {
-      isOpen.value = false;
+      closeBase();
       searchQuery.value = selectedLabel.value;
-      highlightedIndex.value = -1;
     };
     const selectOption = (option) => {
       emit("update:modelValue", option.value);
@@ -782,79 +780,18 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       });
     };
     const handleKeydown = (event) => {
-      if (!isOpen.value) return;
-      switch (event.key) {
-        case "ArrowDown":
-          event.preventDefault();
-          highlightedIndex.value = Math.min(
-            highlightedIndex.value + 1,
-            filteredOptions.value.length - 1
-          );
-          scrollToHighlighted();
-          break;
-        case "ArrowUp":
-          event.preventDefault();
-          highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0);
-          scrollToHighlighted();
-          break;
-        case "Enter":
-          event.preventDefault();
-          if (highlightedIndex.value >= 0 && filteredOptions.value[highlightedIndex.value]) {
-            selectOption(filteredOptions.value[highlightedIndex.value]);
-          }
-          break;
-        case "Escape":
-          event.preventDefault();
-          closeDropdown();
-          break;
-      }
-    };
-    const scrollToHighlighted = () => {
-      nextTick(() => {
-        if (dropdownRef.value) {
-          const highlightedElement = dropdownRef.value.querySelector(
-            `[data-index="${highlightedIndex.value}"]`
-          );
-          if (highlightedElement) {
-            highlightedElement.scrollIntoView({ block: "nearest" });
+      baseHandleKeydown(event, {
+        itemCount: filteredOptions.value.length,
+        onSelect: (index) => {
+          if (filteredOptions.value[index]) {
+            selectOption(filteredOptions.value[index]);
           }
         }
       });
-    };
-    const handleClickOutside = (event) => {
-      var _a, _b;
-      const target = event.target;
-      const isInsideContainer = (_a = containerRef.value) == null ? void 0 : _a.contains(target);
-      const isInsideDropdown = (_b = dropdownRef.value) == null ? void 0 : _b.contains(target);
-      if (!isInsideContainer && !isInsideDropdown) {
-        closeDropdown();
+      if (isOpen.value) {
+        scrollToHighlighted(dropdownRef.value);
       }
     };
-    watch(isOpen, (newValue) => {
-      if (newValue) {
-        document.addEventListener("click", handleClickOutside);
-        window.addEventListener("scroll", updatePosition, true);
-        window.addEventListener("resize", updatePosition);
-      } else {
-        document.removeEventListener("click", handleClickOutside);
-        window.removeEventListener("scroll", updatePosition, true);
-        window.removeEventListener("resize", updatePosition);
-      }
-    });
-    onUnmounted(() => {
-      document.removeEventListener("click", handleClickOutside);
-      window.removeEventListener("scroll", updatePosition, true);
-      window.removeEventListener("resize", updatePosition);
-    });
-    const dropdownStyle = computed(() => {
-      if (!props.teleport) return {};
-      return {
-        position: "absolute",
-        top: `${dropdownPosition.value.top}px`,
-        left: `${dropdownPosition.value.left}px`,
-        width: `${dropdownPosition.value.width}px`
-      };
-    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "containerRef",
@@ -868,8 +805,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             ref: inputWrapperRef,
             class: normalizeClass([{
               "border-red-500": __props.error,
-              "border-gray-300 dark:border-gray-600": !__props.error && !isOpen.value,
-              "border-primary ring-2 ring-primary/20": isOpen.value,
+              "border-gray-300 dark:border-gray-600": !__props.error && !unref(isOpen),
+              "border-primary ring-2 ring-primary/20": unref(isOpen),
               "cursor-not-allowed opacity-50": __props.disabled
             }, "flex items-center gap-2 rounded-lg border bg-white px-3 py-2 transition dark:bg-gray-800"])
           }, [
@@ -905,10 +842,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               disabled: __props.disabled,
               class: "rounded p-1 transition hover:bg-gray-100 dark:hover:bg-gray-700",
               type: "button",
-              onClick: _cache[1] || (_cache[1] = withModifiers(($event) => isOpen.value ? closeDropdown() : openDropdown(), ["stop"]))
+              onClick: _cache[1] || (_cache[1] = withModifiers(($event) => unref(isOpen) ? closeDropdown() : openDropdown(), ["stop"]))
             }, [
               createVNode(unref(Icon), {
-                class: normalizeClass([{ "rotate-180": isOpen.value }, "size-4 text-gray-400 transition"]),
+                class: normalizeClass([{ "rotate-180": unref(isOpen) }, "size-4 text-gray-400 transition"]),
                 icon: "lucide:chevron-down"
               }, null, 8, ["class"])
             ], 8, _hoisted_4)
@@ -926,11 +863,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               "leave-to-class": "opacity-0 scale-95"
             }, {
               default: withCtx(() => [
-                isOpen.value ? (openBlock(), createElementBlock("div", {
+                unref(isOpen) ? (openBlock(), createElementBlock("div", {
                   key: 0,
                   ref_key: "dropdownRef",
                   ref: dropdownRef,
-                  style: normalizeStyle(dropdownStyle.value),
+                  style: normalizeStyle(unref(dropdownStyle)),
                   class: normalizeClass([
                     "autocomplete-dropdown z-[9999] max-h-60 overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800",
                     !__props.teleport && "absolute mt-2 w-full"
@@ -941,7 +878,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                     return openBlock(), createElementBlock("button", {
                       key: option.value,
                       class: normalizeClass([{
-                        "bg-gray-100 dark:bg-gray-700": highlightedIndex.value === index,
+                        "bg-gray-100 dark:bg-gray-700": unref(highlightedIndex) === index,
                         "bg-primary/10": __props.modelValue === option.value
                       }, "flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition hover:bg-gray-100 dark:hover:bg-gray-700"]),
                       "data-index": index,
@@ -1481,4 +1418,4 @@ export {
   _sfc_main$1 as j,
   _sfc_main as k
 };
-//# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-Cwn5A5CH.js.map
+//# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-Y1wvT4aS.js.map