cisse-vue-ui 0.1.7 → 0.1.8

package/dist/Dropdown.vue_vue_type_script_setup_true_lang-CZQ5Ci8K.cjs

@@ -0,0 +1,258 @@
+"use strict";
+const vue = require("vue");
+const vue$1 = require("@iconify/vue");
+const _hoisted_1$1 = { class: "relative" };
+const _hoisted_2$1 = {
+  key: 0,
+  class: "absolute top-0.25 right-0.25 size-1.5 rounded-full bg-red-600"
+};
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "MenuItem",
+  props: {
+    menuItem: {},
+    expanded: { type: Boolean, default: true },
+    active: { type: Boolean, default: void 0 },
+    currentPath: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const isRouteActive = vue.computed(() => {
+      if (props.active !== void 0) {
+        return props.active;
+      }
+      const path = props.currentPath ?? (typeof window !== "undefined" ? window.location.pathname : "/");
+      if (props.menuItem.link === "/") {
+        return path === "/";
+      }
+      return path === props.menuItem.link || path.startsWith(props.menuItem.link + "/");
+    });
+    const linkComponent = vue.computed(() => {
+      try {
+        const RouterLink = vue.resolveComponent("RouterLink");
+        if (typeof RouterLink !== "string") {
+          return RouterLink;
+        }
+      } catch {
+      }
+      return "a";
+    });
+    const linkProps = vue.computed(() => {
+      if (linkComponent.value === "a") {
+        return { href: props.menuItem.link };
+      }
+      return { to: props.menuItem.link };
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(linkComponent.value), vue.mergeProps(linkProps.value, {
+        class: [__props.expanded ? "flex-row" : "flex-col", "group relative flex items-center justify-center gap-2 px-5"]
+      }), {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_1$1, [
+            vue.createVNode(vue.unref(vue$1.Icon), {
+              class: vue.normalizeClass([[
+                isRouteActive.value ? "text-white" : "text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500",
+                __props.expanded ? "size-6" : "size-8"
+              ], "transition-all duration-300"]),
+              icon: __props.menuItem.icon
+            }, null, 8, ["class", "icon"]),
+            __props.menuItem.notification ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1)) : vue.createCommentVNode("", true)
+          ]),
+          vue.createVNode(vue.Transition, {
+            "enter-active-class": "transition-all duration-300 ease-out",
+            "enter-from-class": "opacity-0 -translate-x-2",
+            "enter-to-class": "opacity-100 translate-x-0",
+            "leave-active-class": "transition-all duration-200 ease-in",
+            "leave-from-class": "opacity-100 translate-x-0",
+            "leave-to-class": "opacity-0 -translate-x-2"
+          }, {
+            default: vue.withCtx(() => [
+              __props.expanded ? (vue.openBlock(), vue.createElementBlock("span", {
+                key: 0,
+                class: vue.normalizeClass([
+                  isRouteActive.value ? "text-white" : "text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500",
+                  "text-sm font-semibold whitespace-nowrap"
+                ])
+              }, vue.toDisplayString(__props.menuItem.label), 3)) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 16, ["class"]);
+    };
+  }
+});
+const _hoisted_1 = {
+  type: "button",
+  class: "inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "my-1 border-t border-gray-200 dark:border-gray-700"
+};
+const _hoisted_3 = ["disabled", "onClick"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "Dropdown",
+  props: {
+    items: { default: () => [] },
+    align: { default: "left" },
+    width: { default: "auto" },
+    teleport: { type: Boolean, default: true }
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isOpen = vue.ref(false);
+    const dropdownRef = vue.ref();
+    const triggerRef = vue.ref();
+    const menuRef = vue.ref();
+    const dropdownPosition = vue.ref({ top: 0, left: 0, width: 0 });
+    const updatePosition = () => {
+      if (!triggerRef.value || !props.teleport) return;
+      const rect = triggerRef.value.getBoundingClientRect();
+      dropdownPosition.value = {
+        top: rect.bottom + window.scrollY + 8,
+        left: props.align === "right" ? rect.right + window.scrollX : rect.left + window.scrollX,
+        width: rect.width
+      };
+    };
+    const toggle = () => {
+      isOpen.value = !isOpen.value;
+      if (isOpen.value) {
+        vue.nextTick(updatePosition);
+      }
+    };
+    const close = () => {
+      isOpen.value = false;
+    };
+    const selectItem = (item) => {
+      if (item.disabled || item.divider) return;
+      emit("select", item);
+      close();
+    };
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      const target = event.target;
+      const isInsideTrigger = (_a = triggerRef.value) == null ? void 0 : _a.contains(target);
+      const isInsideMenu = (_b = menuRef.value) == null ? void 0 : _b.contains(target);
+      if (!isInsideTrigger && !isInsideMenu) {
+        close();
+      }
+    };
+    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 widthClasses = {
+      auto: "w-auto min-w-[10rem]",
+      full: "w-full",
+      sm: "w-32",
+      md: "w-48",
+      lg: "w-64"
+    };
+    const dropdownStyle = vue.computed(() => {
+      if (!props.teleport) return {};
+      return {
+        position: "absolute",
+        top: `${dropdownPosition.value.top}px`,
+        left: props.align === "right" ? "auto" : `${dropdownPosition.value.left}px`,
+        right: props.align === "right" ? `${window.innerWidth - dropdownPosition.value.left - dropdownPosition.value.width}px` : "auto"
+      };
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "dropdownRef",
+        ref: dropdownRef,
+        class: "relative inline-block"
+      }, [
+        vue.createElementVNode("div", {
+          ref_key: "triggerRef",
+          ref: triggerRef,
+          onClick: toggle
+        }, [
+          vue.renderSlot(_ctx.$slots, "trigger", {}, () => [
+            vue.createElementVNode("button", _hoisted_1, [
+              vue.renderSlot(_ctx.$slots, "trigger-label", {}, () => [
+                _cache[0] || (_cache[0] = vue.createTextVNode("Options", -1))
+              ]),
+              vue.createVNode(vue.unref(vue$1.Icon), {
+                icon: "lucide:chevron-down",
+                class: vue.normalizeClass(["size-4 transition-transform", isOpen.value && "rotate-180"])
+              }, null, 8, ["class"])
+            ])
+          ])
+        ], 512),
+        (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          to: "body",
+          disabled: !__props.teleport
+        }, [
+          vue.createVNode(vue.Transition, {
+            "enter-active-class": "transition ease-out duration-100",
+            "enter-from-class": "transform opacity-0 scale-95",
+            "enter-to-class": "transform opacity-100 scale-100",
+            "leave-active-class": "transition ease-in duration-75",
+            "leave-from-class": "transform opacity-100 scale-100",
+            "leave-to-class": "transform opacity-0 scale-95"
+          }, {
+            default: vue.withCtx(() => [
+              isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                ref_key: "menuRef",
+                ref: menuRef,
+                style: vue.normalizeStyle(dropdownStyle.value),
+                class: vue.normalizeClass([
+                  "z-[9999] rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800",
+                  widthClasses[__props.width],
+                  !__props.teleport && (__props.align === "right" ? "absolute mt-2 right-0" : "absolute mt-2 left-0")
+                ])
+              }, [
+                vue.renderSlot(_ctx.$slots, "default", { close }, () => [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
+                    return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                      key: item.key
+                    }, [
+                      item.divider ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2)) : (vue.openBlock(), vue.createElementBlock("button", {
+                        key: 1,
+                        type: "button",
+                        disabled: item.disabled,
+                        class: vue.normalizeClass([
+                          "flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors",
+                          item.disabled ? "cursor-not-allowed opacity-50" : item.danger ? "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20" : "text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+                        ]),
+                        onClick: ($event) => selectItem(item)
+                      }, [
+                        item.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                          key: 0,
+                          icon: item.icon,
+                          class: "size-4"
+                        }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                        vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)
+                      ], 10, _hoisted_3))
+                    ], 64);
+                  }), 128))
+                ])
+              ], 6)) : vue.createCommentVNode("", true)
+            ]),
+            _: 3
+          })
+        ], 8, ["disabled"]))
+      ], 512);
+    };
+  }
+});
+exports._sfc_main = _sfc_main$1;
+exports._sfc_main$1 = _sfc_main;
+//# sourceMappingURL=Dropdown.vue_vue_type_script_setup_true_lang-CZQ5Ci8K.cjs.map

package/dist/Dropdown.vue_vue_type_script_setup_true_lang-CZQ5Ci8K.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.vue_vue_type_script_setup_true_lang-CZQ5Ci8K.cjs","sources":["../src/components/core/MenuItem.vue","../src/components/core/Dropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, resolveComponent } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport type { MenuItemProps } from '@/types'\n\nconst props = withDefaults(\n  defineProps<{\n    menuItem: MenuItemProps\n    /** Whether sidebar is expanded (shows labels) */\n    expanded?: boolean\n    /** Override active state directly */\n    active?: boolean\n    /** Current route path (pass from parent using useRoute().path) */\n    currentPath?: string\n  }>(),\n  {\n    expanded: true,\n    active: undefined,\n    currentPath: undefined,\n  },\n)\n\nconst isRouteActive = computed(() => {\n  // If active prop is explicitly set, use it\n  if (props.active !== undefined) {\n    return props.active\n  }\n\n  // Use currentPath prop if provided, otherwise fall back to window.location\n  const path = props.currentPath ?? (typeof window !== 'undefined' ? window.location.pathname : '/')\n\n  if (props.menuItem.link === '/') {\n    return path === '/'\n  }\n  return path === props.menuItem.link || path.startsWith(props.menuItem.link + '/')\n})\n\n// Try to resolve RouterLink, fallback to 'a' tag\nconst linkComponent = computed(() => {\n  try {\n    const RouterLink = resolveComponent('RouterLink')\n    if (typeof RouterLink !== 'string') {\n      return RouterLink\n    }\n  } catch {\n    // RouterLink not available\n  }\n  return 'a'\n})\n\nconst linkProps = computed(() => {\n  if (linkComponent.value === 'a') {\n    return { href: props.menuItem.link }\n  }\n  return { to: props.menuItem.link }\n})\n</script>\n\n<template>\n  <component\n    :is=\"linkComponent\"\n    v-bind=\"linkProps\"\n    :class=\"expanded ? 'flex-row' : 'flex-col'\"\n    class=\"group relative flex items-center justify-center gap-2 px-5\"\n  >\n    <div class=\"relative\">\n      <Icon\n        :class=\"[\n          isRouteActive\n            ? 'text-white'\n            : 'text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500',\n          expanded ? 'size-6' : 'size-8',\n        ]\"\n        class=\"transition-all duration-300\"\n        :icon=\"menuItem.icon\"\n      />\n\n      <span\n        v-if=\"menuItem.notification\"\n        class=\"absolute top-0.25 right-0.25 size-1.5 rounded-full bg-red-600\"\n      ></span>\n    </div>\n\n    <Transition\n      enter-active-class=\"transition-all duration-300 ease-out\"\n      enter-from-class=\"opacity-0 -translate-x-2\"\n      enter-to-class=\"opacity-100 translate-x-0\"\n      leave-active-class=\"transition-all duration-200 ease-in\"\n      leave-from-class=\"opacity-100 translate-x-0\"\n      leave-to-class=\"opacity-0 -translate-x-2\"\n    >\n      <span\n        v-if=\"expanded\"\n        :class=\"\n          isRouteActive\n            ? 'text-white'\n            : 'text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500'\n        \"\n        class=\"text-sm font-semibold whitespace-nowrap\"\n        >{{ menuItem.label }}</span\n      >\n    </Transition>\n  </component>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, computed, onUnmounted, nextTick, watch } from 'vue'\nimport { Icon } from '@iconify/vue'\n\nexport interface DropdownItem {\n  key: string\n  label: string\n  icon?: string\n  disabled?: boolean\n  danger?: boolean\n  divider?: boolean\n}\n\nconst props = withDefaults(\n  defineProps<{\n    /** Dropdown items (optional if using default slot) */\n    items?: DropdownItem[]\n    /** Align dropdown */\n    align?: 'left' | 'right'\n    /** Dropdown width */\n    width?: 'auto' | 'full' | 'sm' | 'md' | 'lg'\n    /** Use teleport to body to avoid overflow clipping */\n    teleport?: boolean\n  }>(),\n  {\n    items: () => [],\n    align: 'left',\n    width: 'auto',\n    teleport: true,\n  },\n)\n\nconst emit = defineEmits<{\n  select: [item: DropdownItem]\n}>()\n\nconst isOpen = ref(false)\nconst dropdownRef = ref<HTMLElement>()\nconst triggerRef = ref<HTMLElement>()\nconst menuRef = ref<HTMLElement>()\nconst dropdownPosition = ref({ top: 0, left: 0, width: 0 })\n\nconst updatePosition = () => {\n  if (!triggerRef.value || !props.teleport) return\n  const rect = triggerRef.value.getBoundingClientRect()\n  dropdownPosition.value = {\n    top: rect.bottom + window.scrollY + 8,\n    left: props.align === 'right' ? rect.right + window.scrollX : rect.left + window.scrollX,\n    width: rect.width,\n  }\n}\n\nconst toggle = () => {\n  isOpen.value = !isOpen.value\n  if (isOpen.value) {\n    nextTick(updatePosition)\n  }\n}\n\nconst close = () => {\n  isOpen.value = false\n}\n\nconst selectItem = (item: DropdownItem) => {\n  if (item.disabled || item.divider) return\n  emit('select', item)\n  close()\n}\n\nconst handleClickOutside = (event: MouseEvent) => {\n  const target = event.target as Node\n  const isInsideTrigger = triggerRef.value?.contains(target)\n  const isInsideMenu = menuRef.value?.contains(target)\n  if (!isInsideTrigger && !isInsideMenu) {\n    close()\n  }\n}\n\nwatch(isOpen, (newValue) => {\n  if (newValue) {\n    document.addEventListener('click', handleClickOutside)\n    window.addEventListener('scroll', updatePosition, true)\n    window.addEventListener('resize', updatePosition)\n  } else {\n    document.removeEventListener('click', handleClickOutside)\n    window.removeEventListener('scroll', updatePosition, true)\n    window.removeEventListener('resize', updatePosition)\n  }\n})\n\nonUnmounted(() => {\n  document.removeEventListener('click', handleClickOutside)\n  window.removeEventListener('scroll', updatePosition, true)\n  window.removeEventListener('resize', updatePosition)\n})\n\nconst widthClasses = {\n  auto: 'w-auto min-w-[10rem]',\n  full: 'w-full',\n  sm: 'w-32',\n  md: 'w-48',\n  lg: 'w-64',\n}\n\nconst dropdownStyle = computed(() => {\n  if (!props.teleport) return {}\n  return {\n    position: 'absolute' as const,\n    top: `${dropdownPosition.value.top}px`,\n    left: props.align === 'right' ? 'auto' : `${dropdownPosition.value.left}px`,\n    right: props.align === 'right' ? `${window.innerWidth - dropdownPosition.value.left - dropdownPosition.value.width}px` : 'auto',\n  }\n})\n</script>\n\n<template>\n  <div ref=\"dropdownRef\" class=\"relative inline-block\">\n    <div ref=\"triggerRef\" @click=\"toggle\">\n      <slot name=\"trigger\">\n        <button\n          type=\"button\"\n          class=\"inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n        >\n          <slot name=\"trigger-label\">Options</slot>\n          <Icon\n            icon=\"lucide:chevron-down\"\n            :class=\"['size-4 transition-transform', isOpen && 'rotate-180']\"\n          />\n        </button>\n      </slot>\n    </div>\n\n    <Teleport to=\"body\" :disabled=\"!teleport\">\n      <Transition\n        enter-active-class=\"transition ease-out duration-100\"\n        enter-from-class=\"transform opacity-0 scale-95\"\n        enter-to-class=\"transform opacity-100 scale-100\"\n        leave-active-class=\"transition ease-in duration-75\"\n        leave-from-class=\"transform opacity-100 scale-100\"\n        leave-to-class=\"transform opacity-0 scale-95\"\n      >\n        <div\n          v-if=\"isOpen\"\n          ref=\"menuRef\"\n          :style=\"dropdownStyle\"\n          :class=\"[\n            'z-[9999] rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800',\n            widthClasses[width],\n            !teleport && (align === 'right' ? 'absolute mt-2 right-0' : 'absolute mt-2 left-0'),\n          ]\"\n        >\n          <!-- Custom content via default slot -->\n          <slot :close=\"close\">\n            <!-- Default items rendering -->\n            <template v-for=\"item in items\" :key=\"item.key\">\n              <div\n                v-if=\"item.divider\"\n                class=\"my-1 border-t border-gray-200 dark:border-gray-700\"\n              />\n              <button\n                v-else\n                type=\"button\"\n                :disabled=\"item.disabled\"\n                :class=\"[\n                  'flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors',\n                  item.disabled\n                    ? 'cursor-not-allowed opacity-50'\n                    : item.danger\n                      ? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20'\n                      : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700',\n                ]\"\n                @click=\"selectItem(item)\"\n              >\n                <Icon v-if=\"item.icon\" :icon=\"item.icon\" class=\"size-4\" />\n                {{ item.label }}\n              </button>\n            </template>\n          </slot>\n        </div>\n      </Transition>\n    </Teleport>\n  </div>\n</template>\n"],"names":["computed","resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_createElementVNode","_hoisted_1","_createVNode","_unref","Icon","_normalizeClass","_createElementBlock","_hoisted_2","_Transition","_toDisplayString","ref","nextTick","watch","onUnmounted","_renderSlot","_Teleport","_Fragment","_renderList"],"mappings":"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"}

package/dist/Dropdown.vue_vue_type_script_setup_true_lang-CfyqlT_n.js

@@ -0,0 +1,259 @@
+import { defineComponent, computed, resolveComponent, createBlock, openBlock, resolveDynamicComponent, mergeProps, withCtx, createElementVNode, createVNode, createElementBlock, createCommentVNode, unref, normalizeClass, Transition, toDisplayString, ref, watch, onUnmounted, renderSlot, createTextVNode, Teleport, normalizeStyle, Fragment, renderList, nextTick } from "vue";
+import { Icon } from "@iconify/vue";
+const _hoisted_1$1 = { class: "relative" };
+const _hoisted_2$1 = {
+  key: 0,
+  class: "absolute top-0.25 right-0.25 size-1.5 rounded-full bg-red-600"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "MenuItem",
+  props: {
+    menuItem: {},
+    expanded: { type: Boolean, default: true },
+    active: { type: Boolean, default: void 0 },
+    currentPath: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const isRouteActive = computed(() => {
+      if (props.active !== void 0) {
+        return props.active;
+      }
+      const path = props.currentPath ?? (typeof window !== "undefined" ? window.location.pathname : "/");
+      if (props.menuItem.link === "/") {
+        return path === "/";
+      }
+      return path === props.menuItem.link || path.startsWith(props.menuItem.link + "/");
+    });
+    const linkComponent = computed(() => {
+      try {
+        const RouterLink = resolveComponent("RouterLink");
+        if (typeof RouterLink !== "string") {
+          return RouterLink;
+        }
+      } catch {
+      }
+      return "a";
+    });
+    const linkProps = computed(() => {
+      if (linkComponent.value === "a") {
+        return { href: props.menuItem.link };
+      }
+      return { to: props.menuItem.link };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(linkComponent.value), mergeProps(linkProps.value, {
+        class: [__props.expanded ? "flex-row" : "flex-col", "group relative flex items-center justify-center gap-2 px-5"]
+      }), {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$1, [
+            createVNode(unref(Icon), {
+              class: normalizeClass([[
+                isRouteActive.value ? "text-white" : "text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500",
+                __props.expanded ? "size-6" : "size-8"
+              ], "transition-all duration-300"]),
+              icon: __props.menuItem.icon
+            }, null, 8, ["class", "icon"]),
+            __props.menuItem.notification ? (openBlock(), createElementBlock("span", _hoisted_2$1)) : createCommentVNode("", true)
+          ]),
+          createVNode(Transition, {
+            "enter-active-class": "transition-all duration-300 ease-out",
+            "enter-from-class": "opacity-0 -translate-x-2",
+            "enter-to-class": "opacity-100 translate-x-0",
+            "leave-active-class": "transition-all duration-200 ease-in",
+            "leave-from-class": "opacity-100 translate-x-0",
+            "leave-to-class": "opacity-0 -translate-x-2"
+          }, {
+            default: withCtx(() => [
+              __props.expanded ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: normalizeClass([
+                  isRouteActive.value ? "text-white" : "text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500",
+                  "text-sm font-semibold whitespace-nowrap"
+                ])
+              }, toDisplayString(__props.menuItem.label), 3)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 16, ["class"]);
+    };
+  }
+});
+const _hoisted_1 = {
+  type: "button",
+  class: "inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "my-1 border-t border-gray-200 dark:border-gray-700"
+};
+const _hoisted_3 = ["disabled", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Dropdown",
+  props: {
+    items: { default: () => [] },
+    align: { default: "left" },
+    width: { default: "auto" },
+    teleport: { type: Boolean, default: true }
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isOpen = ref(false);
+    const dropdownRef = ref();
+    const triggerRef = ref();
+    const menuRef = ref();
+    const dropdownPosition = ref({ top: 0, left: 0, width: 0 });
+    const updatePosition = () => {
+      if (!triggerRef.value || !props.teleport) return;
+      const rect = triggerRef.value.getBoundingClientRect();
+      dropdownPosition.value = {
+        top: rect.bottom + window.scrollY + 8,
+        left: props.align === "right" ? rect.right + window.scrollX : rect.left + window.scrollX,
+        width: rect.width
+      };
+    };
+    const toggle = () => {
+      isOpen.value = !isOpen.value;
+      if (isOpen.value) {
+        nextTick(updatePosition);
+      }
+    };
+    const close = () => {
+      isOpen.value = false;
+    };
+    const selectItem = (item) => {
+      if (item.disabled || item.divider) return;
+      emit("select", item);
+      close();
+    };
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      const target = event.target;
+      const isInsideTrigger = (_a = triggerRef.value) == null ? void 0 : _a.contains(target);
+      const isInsideMenu = (_b = menuRef.value) == null ? void 0 : _b.contains(target);
+      if (!isInsideTrigger && !isInsideMenu) {
+        close();
+      }
+    };
+    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 widthClasses = {
+      auto: "w-auto min-w-[10rem]",
+      full: "w-full",
+      sm: "w-32",
+      md: "w-48",
+      lg: "w-64"
+    };
+    const dropdownStyle = computed(() => {
+      if (!props.teleport) return {};
+      return {
+        position: "absolute",
+        top: `${dropdownPosition.value.top}px`,
+        left: props.align === "right" ? "auto" : `${dropdownPosition.value.left}px`,
+        right: props.align === "right" ? `${window.innerWidth - dropdownPosition.value.left - dropdownPosition.value.width}px` : "auto"
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "dropdownRef",
+        ref: dropdownRef,
+        class: "relative inline-block"
+      }, [
+        createElementVNode("div", {
+          ref_key: "triggerRef",
+          ref: triggerRef,
+          onClick: toggle
+        }, [
+          renderSlot(_ctx.$slots, "trigger", {}, () => [
+            createElementVNode("button", _hoisted_1, [
+              renderSlot(_ctx.$slots, "trigger-label", {}, () => [
+                _cache[0] || (_cache[0] = createTextVNode("Options", -1))
+              ]),
+              createVNode(unref(Icon), {
+                icon: "lucide:chevron-down",
+                class: normalizeClass(["size-4 transition-transform", isOpen.value && "rotate-180"])
+              }, null, 8, ["class"])
+            ])
+          ])
+        ], 512),
+        (openBlock(), createBlock(Teleport, {
+          to: "body",
+          disabled: !__props.teleport
+        }, [
+          createVNode(Transition, {
+            "enter-active-class": "transition ease-out duration-100",
+            "enter-from-class": "transform opacity-0 scale-95",
+            "enter-to-class": "transform opacity-100 scale-100",
+            "leave-active-class": "transition ease-in duration-75",
+            "leave-from-class": "transform opacity-100 scale-100",
+            "leave-to-class": "transform opacity-0 scale-95"
+          }, {
+            default: withCtx(() => [
+              isOpen.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                ref_key: "menuRef",
+                ref: menuRef,
+                style: normalizeStyle(dropdownStyle.value),
+                class: normalizeClass([
+                  "z-[9999] rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800",
+                  widthClasses[__props.width],
+                  !__props.teleport && (__props.align === "right" ? "absolute mt-2 right-0" : "absolute mt-2 left-0")
+                ])
+              }, [
+                renderSlot(_ctx.$slots, "default", { close }, () => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+                    return openBlock(), createElementBlock(Fragment, {
+                      key: item.key
+                    }, [
+                      item.divider ? (openBlock(), createElementBlock("div", _hoisted_2)) : (openBlock(), createElementBlock("button", {
+                        key: 1,
+                        type: "button",
+                        disabled: item.disabled,
+                        class: normalizeClass([
+                          "flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors",
+                          item.disabled ? "cursor-not-allowed opacity-50" : item.danger ? "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20" : "text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+                        ]),
+                        onClick: ($event) => selectItem(item)
+                      }, [
+                        item.icon ? (openBlock(), createBlock(unref(Icon), {
+                          key: 0,
+                          icon: item.icon,
+                          class: "size-4"
+                        }, null, 8, ["icon"])) : createCommentVNode("", true),
+                        createTextVNode(" " + toDisplayString(item.label), 1)
+                      ], 10, _hoisted_3))
+                    ], 64);
+                  }), 128))
+                ])
+              ], 6)) : createCommentVNode("", true)
+            ]),
+            _: 3
+          })
+        ], 8, ["disabled"]))
+      ], 512);
+    };
+  }
+});
+export {
+  _sfc_main$1 as _,
+  _sfc_main as a
+};
+//# sourceMappingURL=Dropdown.vue_vue_type_script_setup_true_lang-CfyqlT_n.js.map

package/dist/Dropdown.vue_vue_type_script_setup_true_lang-CfyqlT_n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.vue_vue_type_script_setup_true_lang-CfyqlT_n.js","sources":["../src/components/core/MenuItem.vue","../src/components/core/Dropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, resolveComponent } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport type { MenuItemProps } from '@/types'\n\nconst props = withDefaults(\n  defineProps<{\n    menuItem: MenuItemProps\n    /** Whether sidebar is expanded (shows labels) */\n    expanded?: boolean\n    /** Override active state directly */\n    active?: boolean\n    /** Current route path (pass from parent using useRoute().path) */\n    currentPath?: string\n  }>(),\n  {\n    expanded: true,\n    active: undefined,\n    currentPath: undefined,\n  },\n)\n\nconst isRouteActive = computed(() => {\n  // If active prop is explicitly set, use it\n  if (props.active !== undefined) {\n    return props.active\n  }\n\n  // Use currentPath prop if provided, otherwise fall back to window.location\n  const path = props.currentPath ?? (typeof window !== 'undefined' ? window.location.pathname : '/')\n\n  if (props.menuItem.link === '/') {\n    return path === '/'\n  }\n  return path === props.menuItem.link || path.startsWith(props.menuItem.link + '/')\n})\n\n// Try to resolve RouterLink, fallback to 'a' tag\nconst linkComponent = computed(() => {\n  try {\n    const RouterLink = resolveComponent('RouterLink')\n    if (typeof RouterLink !== 'string') {\n      return RouterLink\n    }\n  } catch {\n    // RouterLink not available\n  }\n  return 'a'\n})\n\nconst linkProps = computed(() => {\n  if (linkComponent.value === 'a') {\n    return { href: props.menuItem.link }\n  }\n  return { to: props.menuItem.link }\n})\n</script>\n\n<template>\n  <component\n    :is=\"linkComponent\"\n    v-bind=\"linkProps\"\n    :class=\"expanded ? 'flex-row' : 'flex-col'\"\n    class=\"group relative flex items-center justify-center gap-2 px-5\"\n  >\n    <div class=\"relative\">\n      <Icon\n        :class=\"[\n          isRouteActive\n            ? 'text-white'\n            : 'text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500',\n          expanded ? 'size-6' : 'size-8',\n        ]\"\n        class=\"transition-all duration-300\"\n        :icon=\"menuItem.icon\"\n      />\n\n      <span\n        v-if=\"menuItem.notification\"\n        class=\"absolute top-0.25 right-0.25 size-1.5 rounded-full bg-red-600\"\n      ></span>\n    </div>\n\n    <Transition\n      enter-active-class=\"transition-all duration-300 ease-out\"\n      enter-from-class=\"opacity-0 -translate-x-2\"\n      enter-to-class=\"opacity-100 translate-x-0\"\n      leave-active-class=\"transition-all duration-200 ease-in\"\n      leave-from-class=\"opacity-100 translate-x-0\"\n      leave-to-class=\"opacity-0 -translate-x-2\"\n    >\n      <span\n        v-if=\"expanded\"\n        :class=\"\n          isRouteActive\n            ? 'text-white'\n            : 'text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500'\n        \"\n        class=\"text-sm font-semibold whitespace-nowrap\"\n        >{{ menuItem.label }}</span\n      >\n    </Transition>\n  </component>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, computed, onUnmounted, nextTick, watch } from 'vue'\nimport { Icon } from '@iconify/vue'\n\nexport interface DropdownItem {\n  key: string\n  label: string\n  icon?: string\n  disabled?: boolean\n  danger?: boolean\n  divider?: boolean\n}\n\nconst props = withDefaults(\n  defineProps<{\n    /** Dropdown items (optional if using default slot) */\n    items?: DropdownItem[]\n    /** Align dropdown */\n    align?: 'left' | 'right'\n    /** Dropdown width */\n    width?: 'auto' | 'full' | 'sm' | 'md' | 'lg'\n    /** Use teleport to body to avoid overflow clipping */\n    teleport?: boolean\n  }>(),\n  {\n    items: () => [],\n    align: 'left',\n    width: 'auto',\n    teleport: true,\n  },\n)\n\nconst emit = defineEmits<{\n  select: [item: DropdownItem]\n}>()\n\nconst isOpen = ref(false)\nconst dropdownRef = ref<HTMLElement>()\nconst triggerRef = ref<HTMLElement>()\nconst menuRef = ref<HTMLElement>()\nconst dropdownPosition = ref({ top: 0, left: 0, width: 0 })\n\nconst updatePosition = () => {\n  if (!triggerRef.value || !props.teleport) return\n  const rect = triggerRef.value.getBoundingClientRect()\n  dropdownPosition.value = {\n    top: rect.bottom + window.scrollY + 8,\n    left: props.align === 'right' ? rect.right + window.scrollX : rect.left + window.scrollX,\n    width: rect.width,\n  }\n}\n\nconst toggle = () => {\n  isOpen.value = !isOpen.value\n  if (isOpen.value) {\n    nextTick(updatePosition)\n  }\n}\n\nconst close = () => {\n  isOpen.value = false\n}\n\nconst selectItem = (item: DropdownItem) => {\n  if (item.disabled || item.divider) return\n  emit('select', item)\n  close()\n}\n\nconst handleClickOutside = (event: MouseEvent) => {\n  const target = event.target as Node\n  const isInsideTrigger = triggerRef.value?.contains(target)\n  const isInsideMenu = menuRef.value?.contains(target)\n  if (!isInsideTrigger && !isInsideMenu) {\n    close()\n  }\n}\n\nwatch(isOpen, (newValue) => {\n  if (newValue) {\n    document.addEventListener('click', handleClickOutside)\n    window.addEventListener('scroll', updatePosition, true)\n    window.addEventListener('resize', updatePosition)\n  } else {\n    document.removeEventListener('click', handleClickOutside)\n    window.removeEventListener('scroll', updatePosition, true)\n    window.removeEventListener('resize', updatePosition)\n  }\n})\n\nonUnmounted(() => {\n  document.removeEventListener('click', handleClickOutside)\n  window.removeEventListener('scroll', updatePosition, true)\n  window.removeEventListener('resize', updatePosition)\n})\n\nconst widthClasses = {\n  auto: 'w-auto min-w-[10rem]',\n  full: 'w-full',\n  sm: 'w-32',\n  md: 'w-48',\n  lg: 'w-64',\n}\n\nconst dropdownStyle = computed(() => {\n  if (!props.teleport) return {}\n  return {\n    position: 'absolute' as const,\n    top: `${dropdownPosition.value.top}px`,\n    left: props.align === 'right' ? 'auto' : `${dropdownPosition.value.left}px`,\n    right: props.align === 'right' ? `${window.innerWidth - dropdownPosition.value.left - dropdownPosition.value.width}px` : 'auto',\n  }\n})\n</script>\n\n<template>\n  <div ref=\"dropdownRef\" class=\"relative inline-block\">\n    <div ref=\"triggerRef\" @click=\"toggle\">\n      <slot name=\"trigger\">\n        <button\n          type=\"button\"\n          class=\"inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n        >\n          <slot name=\"trigger-label\">Options</slot>\n          <Icon\n            icon=\"lucide:chevron-down\"\n            :class=\"['size-4 transition-transform', isOpen && 'rotate-180']\"\n          />\n        </button>\n      </slot>\n    </div>\n\n    <Teleport to=\"body\" :disabled=\"!teleport\">\n      <Transition\n        enter-active-class=\"transition ease-out duration-100\"\n        enter-from-class=\"transform opacity-0 scale-95\"\n        enter-to-class=\"transform opacity-100 scale-100\"\n        leave-active-class=\"transition ease-in duration-75\"\n        leave-from-class=\"transform opacity-100 scale-100\"\n        leave-to-class=\"transform opacity-0 scale-95\"\n      >\n        <div\n          v-if=\"isOpen\"\n          ref=\"menuRef\"\n          :style=\"dropdownStyle\"\n          :class=\"[\n            'z-[9999] rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800',\n            widthClasses[width],\n            !teleport && (align === 'right' ? 'absolute mt-2 right-0' : 'absolute mt-2 left-0'),\n          ]\"\n        >\n          <!-- Custom content via default slot -->\n          <slot :close=\"close\">\n            <!-- Default items rendering -->\n            <template v-for=\"item in items\" :key=\"item.key\">\n              <div\n                v-if=\"item.divider\"\n                class=\"my-1 border-t border-gray-200 dark:border-gray-700\"\n              />\n              <button\n                v-else\n                type=\"button\"\n                :disabled=\"item.disabled\"\n                :class=\"[\n                  'flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors',\n                  item.disabled\n                    ? 'cursor-not-allowed opacity-50'\n                    : item.danger\n                      ? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20'\n                      : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700',\n                ]\"\n                @click=\"selectItem(item)\"\n              >\n                <Icon v-if=\"item.icon\" :icon=\"item.icon\" class=\"size-4\" />\n                {{ item.label }}\n              </button>\n            </template>\n          </slot>\n        </div>\n      </Transition>\n    </Teleport>\n  </div>\n</template>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_createElementVNode","_hoisted_1","_createVNode","_unref","_normalizeClass","_createElementBlock","_hoisted_2","_Transition","_toDisplayString","_renderSlot","_Teleport","_Fragment","_renderList"],"mappings":"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"}