cisse-vue-ui 0.2.4 → 0.2.6

package/README.md

@@ -151,7 +151,73 @@ app.use(VueTailwindUI, { components: ['Button', 'CardComponent'] })
 ## Composables
 
 ```typescript
-import { useNotifications, useDarkMode, useExportCSV } from 'cisse-vue-ui/composables'
+import { useNotifications, useDarkMode, useExportCSV, useDropdown, useModal } from 'cisse-vue-ui/composables'
+```
+
+### useModal
+
+Manage modal state with data support:
+
+```typescript
+import { useModal } from 'cisse-vue-ui/composables'
+
+// Simple modal
+const createModal = useModal()
+createModal.open()
+createModal.close()
+
+// Modal with data (e.g., for editing)
+const editModal = useModal<User>()
+editModal.open(selectedUser)
+// Access editModal.data.value in template
+
+// With callbacks
+const deleteModal = useModal<Item>({
+  onOpen: (data) => console.log('Opening with:', data),
+  onClose: () => refetchData()
+})
+```
+
+```vue
+<template>
+  <!-- Use isOpen for v-model binding -->
+  <Modal v-model="editModal.isOpen.value" title="Edit User">
+    <FormInput v-model="editModal.data.value.name" label="Name" />
+    <template #footer>
+      <Button @click="editModal.close()">Cancel</Button>
+      <Button variant="primary" @click="save">Save</Button>
+    </template>
+  </Modal>
+</template>
+```
+
+### useDropdown
+
+Shared dropdown logic for custom dropdown components (used internally by Dropdown, FormSelect, AutocompleteComponent):
+
+```typescript
+import { useDropdown } from 'cisse-vue-ui/composables'
+import { ref } from 'vue'
+
+const triggerRef = ref<HTMLElement>()
+const dropdownRef = ref<HTMLElement>()
+
+const {
+  isOpen,
+  highlightedIndex,
+  dropdownStyle,
+  open,
+  close,
+  toggle,
+  handleKeydown,
+  scrollToHighlighted,
+} = useDropdown(triggerRef, dropdownRef, {
+  teleport: true,
+  align: 'left',
+  gap: 8,
+  onOpen: () => console.log('Opened'),
+  onClose: () => console.log('Closed'),
+})
 ```
 
 ### useNotifications

package/dist/{CollapsibleCard.vue_vue_type_script_setup_true_lang-Do0H2ZOe.cjs → CollapsibleCard.vue_vue_type_script_setup_true_lang-CPV2dtkO.cjs}

@@ -3,6 +3,7 @@ const vue = require("vue");
 const Checkbox_vue_vue_type_script_setup_true_lang = require("./Checkbox.vue_vue_type_script_setup_true_lang-DIoHDji4.cjs");
 const BadgeType_vue_vue_type_script_setup_true_lang = require("./BadgeType.vue_vue_type_script_setup_true_lang-CJb63H1I.cjs");
 const vue$1 = require("@iconify/vue");
+const useDropdown = require("./useDropdown-DHFnd259.cjs");
 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,
@@ -236,10 +237,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.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,
@@ -305,39 +303,47 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     const hasEmptySlot = vue.computed(() => !!slots.empty);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
-        __props.selectable && selectableItems.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4, [
-          vue.createVNode(Checkbox_vue_vue_type_script_setup_true_lang._sfc_main, {
-            "model-value": allSelected.value,
-            indeterminate: someSelected.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
-          }, null, 8, ["model-value", "indeterminate"]),
-          vue.createElementVNode("span", _hoisted_3$2, vue.toDisplayString(allSelected.value ? "Tout désélectionner" : "Tout sélectionner"), 1),
-          __props.selectedItems && __props.selectedItems.size > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, " (" + vue.toDisplayString(__props.selectedItems.size) + " sélectionné" + vue.toDisplayString(__props.selectedItems.size > 1 ? "s" : "") + ") ", 1)) : vue.createCommentVNode("", true)
-        ])) : vue.createCommentVNode("", true),
+        __props.selectable && selectableItems.value.length > 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$b, { key: 0 }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_2$4, [
+              vue.createVNode(Checkbox_vue_vue_type_script_setup_true_lang._sfc_main, {
+                "model-value": allSelected.value,
+                indeterminate: someSelected.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
+              }, null, 8, ["model-value", "indeterminate"]),
+              vue.createElementVNode("span", _hoisted_3$2, vue.toDisplayString(allSelected.value ? "Tout désélectionner" : "Tout sélectionner"), 1),
+              __props.selectedItems && __props.selectedItems.size > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, " (" + vue.toDisplayString(__props.selectedItems.size) + " sélectionné" + vue.toDisplayString(__props.selectedItems.size > 1 ? "s" : "") + ") ", 1)) : vue.createCommentVNode("", true)
+            ])
+          ]),
+          _: 1
+        })) : vue.createCommentVNode("", true),
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
-          return vue.openBlock(), vue.createElementBlock("div", {
+          return vue.openBlock(), vue.createBlock(_sfc_main$b, {
             key: getKey(item),
-            class: vue.normalizeClass(["bg-white dark:bg-slate-950 rounded-lg shadow-md hover:shadow-lg transition-all duration-200", {
+            class: vue.normalizeClass(["hover:shadow-lg transition-all duration-200", {
               "ring-2 ring-primary": isSelected(item)
             }])
-          }, [
-            vue.createElementVNode("div", _hoisted_5$1, [
-              __props.selectable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [
-                isSelectable(item) ? (vue.openBlock(), vue.createBlock(Checkbox_vue_vue_type_script_setup_true_lang._sfc_main, {
-                  key: 0,
-                  "model-value": isSelected(item),
-                  "onUpdate:modelValue": ($event) => handleSelect(item)
-                }, null, 8, ["model-value", "onUpdate:modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1))
-              ])) : vue.createCommentVNode("", true),
-              vue.renderSlot(_ctx.$slots, "avatar", { item }),
-              vue.createElementVNode("div", _hoisted_8$1, [
-                vue.renderSlot(_ctx.$slots, "content", { item })
-              ]),
-              vue.createElementVNode("div", _hoisted_9$1, [
-                vue.renderSlot(_ctx.$slots, "actions", { item })
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_5$1, [
+                __props.selectable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [
+                  isSelectable(item) ? (vue.openBlock(), vue.createBlock(Checkbox_vue_vue_type_script_setup_true_lang._sfc_main, {
+                    key: 0,
+                    "model-value": isSelected(item),
+                    "onUpdate:modelValue": ($event) => handleSelect(item)
+                  }, null, 8, ["model-value", "onUpdate:modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1))
+                ])) : vue.createCommentVNode("", true),
+                vue.renderSlot(_ctx.$slots, "avatar", { item }),
+                vue.createElementVNode("div", _hoisted_8$1, [
+                  vue.renderSlot(_ctx.$slots, "content", { item })
+                ]),
+                vue.createElementVNode("div", _hoisted_9$1, [
+                  vue.renderSlot(_ctx.$slots, "actions", { item })
+                ])
               ])
-            ])
-          ], 2);
+            ]),
+            _: 2
+          }, 1032, ["class"]);
         }), 128)),
         __props.items.length === 0 && hasEmptySlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
           vue.renderSlot(_ctx.$slots, "empty")
@@ -708,13 +714,21 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const emit = __emit;
     const searchQuery = vue.ref("");
-    const isOpen = vue.ref(false);
-    const highlightedIndex = vue.ref(-1);
     const inputRef = vue.ref(null);
-    const dropdownRef = vue.ref(null);
     const containerRef = vue.ref(null);
+    const dropdownRef = vue.ref(null);
     const inputWrapperRef = vue.ref(null);
-    const dropdownPosition = vue.ref({ top: 0, left: 0, width: 0 });
+    const {
+      isOpen,
+      highlightedIndex,
+      dropdownStyle,
+      open: openBase,
+      close: closeBase,
+      handleKeydown: baseHandleKeydown,
+      scrollToHighlighted
+    } = useDropdown.useDropdown(inputWrapperRef, dropdownRef, {
+      teleport: props.teleport
+    });
     const filteredOptions = vue.computed(() => {
       if (!searchQuery.value) {
         return props.options;
@@ -738,30 +752,19 @@ const _sfc_main$7 = /* @__PURE__ */ vue.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();
       vue.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);
@@ -778,79 +781,18 @@ const _sfc_main$7 = /* @__PURE__ */ vue.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 = () => {
-      vue.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);
       }
     };
-    vue.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);
-      }
-    });
-    vue.onUnmounted(() => {
-      document.removeEventListener("click", handleClickOutside);
-      window.removeEventListener("scroll", updatePosition, true);
-      window.removeEventListener("resize", updatePosition);
-    });
-    const dropdownStyle = vue.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 vue.openBlock(), vue.createElementBlock("div", {
         ref_key: "containerRef",
@@ -864,8 +806,8 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
             ref: inputWrapperRef,
             class: vue.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 && !vue.unref(isOpen),
+              "border-primary ring-2 ring-primary/20": vue.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"])
           }, [
@@ -901,10 +843,10 @@ const _sfc_main$7 = /* @__PURE__ */ vue.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] = vue.withModifiers(($event) => isOpen.value ? closeDropdown() : openDropdown(), ["stop"]))
+              onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => vue.unref(isOpen) ? closeDropdown() : openDropdown(), ["stop"]))
             }, [
               vue.createVNode(vue.unref(vue$1.Icon), {
-                class: vue.normalizeClass([{ "rotate-180": isOpen.value }, "size-4 text-gray-400 transition"]),
+                class: vue.normalizeClass([{ "rotate-180": vue.unref(isOpen) }, "size-4 text-gray-400 transition"]),
                 icon: "lucide:chevron-down"
               }, null, 8, ["class"])
             ], 8, _hoisted_4)
@@ -922,11 +864,11 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
               "leave-to-class": "opacity-0 scale-95"
             }, {
               default: vue.withCtx(() => [
-                isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
+                vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
                   key: 0,
                   ref_key: "dropdownRef",
                   ref: dropdownRef,
-                  style: vue.normalizeStyle(dropdownStyle.value),
+                  style: vue.normalizeStyle(vue.unref(dropdownStyle)),
                   class: vue.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"
@@ -937,7 +879,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
                     return vue.openBlock(), vue.createElementBlock("button", {
                       key: option.value,
                       class: vue.normalizeClass([{
-                        "bg-gray-100 dark:bg-gray-700": highlightedIndex.value === index,
+                        "bg-gray-100 dark:bg-gray-700": vue.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,
@@ -1475,4 +1417,4 @@ exports._sfc_main$6 = _sfc_main$5;
 exports._sfc_main$7 = _sfc_main$4;
 exports._sfc_main$8 = _sfc_main$3;
 exports._sfc_main$9 = _sfc_main$2;
-//# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-Do0H2ZOe.cjs.map
+//# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-CPV2dtkO.cjs.map