cisse-vue-ui 0.2.4 → 0.2.6

package/dist/{CollapsibleCard.vue_vue_type_script_setup_true_lang-Cymj-zkh.js → CollapsibleCard.vue_vue_type_script_setup_true_lang-D0eSGYea.js}

@@ -1,7 +1,8 @@
-import { defineComponent, createElementBlock, openBlock, createCommentVNode, renderSlot, createElementVNode, createTextVNode, toDisplayString, useSlots, computed, createVNode, Fragment, renderList, normalizeClass, createBlock, resolveDynamicComponent, onMounted, nextTick, getCurrentInstance, getCurrentScope, hasInjectionContext, inject, watch, shallowRef, toValue, watchEffect, unref, withCtx, 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,
@@ -235,10 +236,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$6 = { class: "space-y-3" };
-const _hoisted_2$4 = {
-  key: 0,
-  class: "flex items-center gap-3 p-3 bg-white dark:bg-slate-950 rounded-lg shadow-md"
-};
+const _hoisted_2$4 = { class: "flex items-center gap-3 p-3" };
 const _hoisted_3$2 = { class: "text-sm text-gray-600 dark:text-gray-400" };
 const _hoisted_4$1 = {
   key: 0,
@@ -304,39 +302,47 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const hasEmptySlot = computed(() => !!slots.empty);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$6, [
-        __props.selectable && selectableItems.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
-          createVNode(_sfc_main$c, {
-            "model-value": allSelected.value,
-            indeterminate: someSelected.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
-          }, null, 8, ["model-value", "indeterminate"]),
-          createElementVNode("span", _hoisted_3$2, toDisplayString(allSelected.value ? "Tout désélectionner" : "Tout sélectionner"), 1),
-          __props.selectedItems && __props.selectedItems.size > 0 ? (openBlock(), createElementBlock("span", _hoisted_4$1, " (" + toDisplayString(__props.selectedItems.size) + " sélectionné" + toDisplayString(__props.selectedItems.size > 1 ? "s" : "") + ") ", 1)) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true),
+        __props.selectable && selectableItems.value.length > 0 ? (openBlock(), createBlock(_sfc_main$b, { key: 0 }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_2$4, [
+              createVNode(_sfc_main$c, {
+                "model-value": allSelected.value,
+                indeterminate: someSelected.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
+              }, null, 8, ["model-value", "indeterminate"]),
+              createElementVNode("span", _hoisted_3$2, toDisplayString(allSelected.value ? "Tout désélectionner" : "Tout sélectionner"), 1),
+              __props.selectedItems && __props.selectedItems.size > 0 ? (openBlock(), createElementBlock("span", _hoisted_4$1, " (" + toDisplayString(__props.selectedItems.size) + " sélectionné" + toDisplayString(__props.selectedItems.size > 1 ? "s" : "") + ") ", 1)) : createCommentVNode("", true)
+            ])
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
-          return openBlock(), createElementBlock("div", {
+          return openBlock(), createBlock(_sfc_main$b, {
             key: getKey(item),
-            class: normalizeClass(["bg-white dark:bg-slate-950 rounded-lg shadow-md hover:shadow-lg transition-all duration-200", {
+            class: normalizeClass(["hover:shadow-lg transition-all duration-200", {
               "ring-2 ring-primary": isSelected(item)
             }])
-          }, [
-            createElementVNode("div", _hoisted_5$1, [
-              __props.selectable ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
-                isSelectable(item) ? (openBlock(), createBlock(_sfc_main$c, {
-                  key: 0,
-                  "model-value": isSelected(item),
-                  "onUpdate:modelValue": ($event) => handleSelect(item)
-                }, null, 8, ["model-value", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_7$1))
-              ])) : createCommentVNode("", true),
-              renderSlot(_ctx.$slots, "avatar", { item }),
-              createElementVNode("div", _hoisted_8$1, [
-                renderSlot(_ctx.$slots, "content", { item })
-              ]),
-              createElementVNode("div", _hoisted_9$1, [
-                renderSlot(_ctx.$slots, "actions", { item })
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_5$1, [
+                __props.selectable ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
+                  isSelectable(item) ? (openBlock(), createBlock(_sfc_main$c, {
+                    key: 0,
+                    "model-value": isSelected(item),
+                    "onUpdate:modelValue": ($event) => handleSelect(item)
+                  }, null, 8, ["model-value", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_7$1))
+                ])) : createCommentVNode("", true),
+                renderSlot(_ctx.$slots, "avatar", { item }),
+                createElementVNode("div", _hoisted_8$1, [
+                  renderSlot(_ctx.$slots, "content", { item })
+                ]),
+                createElementVNode("div", _hoisted_9$1, [
+                  renderSlot(_ctx.$slots, "actions", { item })
+                ])
               ])
-            ])
-          ], 2);
+            ]),
+            _: 2
+          }, 1032, ["class"]);
         }), 128)),
         __props.items.length === 0 && hasEmptySlot.value ? (openBlock(), createElementBlock("div", _hoisted_10, [
           renderSlot(_ctx.$slots, "empty")
@@ -707,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;
@@ -737,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);
@@ -777,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",
@@ -863,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"])
           }, [
@@ -900,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)
@@ -921,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"
@@ -936,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,
@@ -1476,4 +1418,4 @@ export {
   _sfc_main$1 as j,
   _sfc_main as k
 };
-//# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-Cymj-zkh.js.map
+//# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-D0eSGYea.js.map