cisse-vue-ui 0.2.5 → 0.2.7

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-D_8YbCbl.cjs → CollapsibleCard.vue_vue_type_script_setup_true_lang-ClNZxjzF.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,
@@ -83,9 +84,9 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   },
   emits: ["select", "selectAll"],
   setup(__props, { emit: __emit }) {
+    const slots = vue.useSlots();
     const props = __props;
     const emit = __emit;
-    const slots = vue.useSlots();
     const typeComponents = {
       text: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$1,
       number: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$2,
@@ -713,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;
@@ -743,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);
@@ -783,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",
@@ -869,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"])
           }, [
@@ -906,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)
@@ -927,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"
@@ -942,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,
@@ -1480,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-D_8YbCbl.cjs.map
+//# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-ClNZxjzF.cjs.map