cisse-vue-ui 0.1.0 → 0.1.2

package/dist/PageLayout.vue_vue_type_script_setup_true_lang-DTlUENg3.js

@@ -0,0 +1,265 @@
+import { defineComponent, ref, computed, resolveComponent, createElementBlock, openBlock, createCommentVNode, createElementVNode, normalizeClass, renderSlot, createVNode, unref, toDisplayString, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, withCtx, createTextVNode } from "vue";
+import { Icon } from "@iconify/vue";
+import { _ as _sfc_main$2 } from "./MenuItem.vue_vue_type_script_setup_true_lang-emN2qlfR.js";
+const _hoisted_1$1 = { class: "font-inter relative flex h-dvh bg-gray-100 dark:bg-slate-900" };
+const _hoisted_2$1 = { class: "flex h-16 items-center px-3" };
+const _hoisted_3$1 = { class: "flex flex-1 items-center justify-center gap-3" };
+const _hoisted_4$1 = { class: "bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-lg bg-white/20" };
+const _hoisted_5$1 = { class: "flex flex-col gap-3 px-3 pb-3" };
+const _hoisted_6$1 = { class: "flex flex-1 flex-col" };
+const _hoisted_7$1 = { class: "flex h-16 items-center justify-between border-b border-slate-200 bg-white px-4 dark:border-slate-800 dark:bg-slate-950" };
+const _hoisted_8$1 = { class: "flex-1" };
+const _hoisted_9$1 = { class: "flex items-center gap-3" };
+const _hoisted_10$1 = { class: "flex flex-1 flex-col overflow-y-auto" };
+const _hoisted_11 = { class: "container mx-auto flex flex-1 flex-col gap-5 p-5" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "BaseLayout",
+  props: {
+    menuItems: { default: () => [] },
+    appName: { default: "App" },
+    appIcon: { default: "lucide:box" },
+    sidebarOpen: { type: Boolean, default: true },
+    dark: { type: Boolean, default: false },
+    showDarkToggle: { type: Boolean, default: true },
+    sidebarClass: { default: "bg-[#172b4c] dark:bg-slate-950" },
+    currentPath: { default: void 0 }
+  },
+  emits: ["update:sidebarOpen", "update:dark"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const internalSidebarOpen = ref(props.sidebarOpen);
+    const internalDark = ref(props.dark);
+    const sidebarOpenModel = computed({
+      get: () => props.sidebarOpen ?? internalSidebarOpen.value,
+      set: (value) => {
+        internalSidebarOpen.value = value;
+        emit("update:sidebarOpen", value);
+      }
+    });
+    const darkModel = computed({
+      get: () => props.dark ?? internalDark.value,
+      set: (value) => {
+        internalDark.value = value;
+        emit("update:dark", value);
+      }
+    });
+    const toggleSidebar = () => {
+      sidebarOpenModel.value = !sidebarOpenModel.value;
+    };
+    const toggleDark = () => {
+      darkModel.value = !darkModel.value;
+    };
+    const routerViewComponent = computed(() => {
+      try {
+        const RouterView = resolveComponent("RouterView");
+        if (typeof RouterView !== "string") {
+          return RouterView;
+        }
+      } catch {
+      }
+      return null;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        sidebarOpenModel.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "absolute z-40 h-full w-full bg-slate-950/20 lg:hidden dark:bg-white/20",
+          onClick: _cache[0] || (_cache[0] = ($event) => sidebarOpenModel.value = false)
+        })) : createCommentVNode("", true),
+        createElementVNode("aside", {
+          class: normalizeClass([[
+            sidebarOpenModel.value ? "lg:w-60" : "-translate-x-76 lg:w-16 lg:translate-x-0",
+            __props.sidebarClass
+          ], "@container absolute z-50 flex h-full w-76 flex-col justify-between gap-10 transition-all duration-1000 ease-in-out lg:relative"])
+        }, [
+          createElementVNode("div", _hoisted_2$1, [
+            createElementVNode("div", _hoisted_3$1, [
+              renderSlot(_ctx.$slots, "logo", {}, () => [
+                createElementVNode("div", _hoisted_4$1, [
+                  createVNode(unref(Icon), {
+                    class: "size-5 text-white",
+                    icon: __props.appIcon
+                  }, null, 8, ["icon"])
+                ]),
+                createElementVNode("span", {
+                  class: normalizeClass([sidebarOpenModel.value ? "block" : "hidden", "font-outfit flex-1 text-lg font-semibold text-white"])
+                }, toDisplayString(__props.appName), 3)
+              ])
+            ]),
+            createElementVNode("button", {
+              class: "rounded-lg bg-white/10 p-1 transition hover:bg-white/20 lg:hidden",
+              onClick: toggleSidebar
+            }, [
+              createVNode(unref(Icon), {
+                class: "size-6 text-white",
+                icon: "lucide:menu"
+              })
+            ])
+          ]),
+          createElementVNode("div", {
+            class: normalizeClass([sidebarOpenModel.value ? "items-start" : "items-center", "flex flex-1 flex-col gap-8 px-2 lg:justify-center"])
+          }, [
+            renderSlot(_ctx.$slots, "menu", { currentPath: __props.currentPath }, () => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuItems, (item, index) => {
+                return openBlock(), createBlock(_sfc_main$2, {
+                  key: index,
+                  "menu-item": item,
+                  expanded: sidebarOpenModel.value,
+                  "current-path": __props.currentPath
+                }, null, 8, ["menu-item", "expanded", "current-path"]);
+              }), 128))
+            ])
+          ], 2),
+          createElementVNode("div", _hoisted_5$1, [
+            renderSlot(_ctx.$slots, "sidebar-footer")
+          ])
+        ], 2),
+        createElementVNode("div", _hoisted_6$1, [
+          createElementVNode("header", _hoisted_7$1, [
+            createElementVNode("div", null, [
+              createElementVNode("button", {
+                class: "rounded-lg bg-gray-100 p-1 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800",
+                onClick: toggleSidebar
+              }, [
+                createVNode(unref(Icon), {
+                  class: "size-6 text-gray-900 hover:text-gray-800 dark:text-gray-100",
+                  icon: "lucide:menu"
+                })
+              ])
+            ]),
+            createElementVNode("div", _hoisted_8$1, [
+              renderSlot(_ctx.$slots, "header-center")
+            ]),
+            createElementVNode("div", _hoisted_9$1, [
+              renderSlot(_ctx.$slots, "header-actions"),
+              __props.showDarkToggle ? (openBlock(), createElementBlock("button", {
+                key: 0,
+                class: "flex items-center justify-center rounded-lg bg-gray-100 p-2 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800",
+                onClick: toggleDark
+              }, [
+                createVNode(unref(Icon), {
+                  icon: darkModel.value ? "lucide:sun" : "lucide:moon",
+                  class: "size-5 text-gray-900 dark:text-gray-100"
+                }, null, 8, ["icon"])
+              ])) : createCommentVNode("", true)
+            ])
+          ]),
+          createElementVNode("div", _hoisted_10$1, [
+            createElementVNode("main", _hoisted_11, [
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                routerViewComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(routerViewComponent.value), { key: 0 })) : createCommentVNode("", true)
+              ])
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+});
+const _hoisted_1 = { class: "flex flex-col gap-4" };
+const _hoisted_2 = {
+  key: 0,
+  "aria-label": "Breadcrumb"
+};
+const _hoisted_3 = { class: "flex items-center" };
+const _hoisted_4 = {
+  key: 0,
+  class: "mx-3 text-sm font-semibold text-gray-400 dark:text-gray-600"
+};
+const _hoisted_5 = { class: "flex flex-col justify-between gap-4 lg:flex-row lg:items-center" };
+const _hoisted_6 = { class: "flex flex-col gap-1" };
+const _hoisted_7 = {
+  key: 0,
+  class: "text-2xl font-bold text-gray-900 dark:text-gray-100"
+};
+const _hoisted_8 = {
+  key: 1,
+  class: "text-sm text-gray-600 dark:text-gray-400"
+};
+const _hoisted_9 = { class: "flex items-center gap-2" };
+const _hoisted_10 = { class: "flex-1" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PageLayout",
+  props: {
+    title: {},
+    description: {},
+    breadcrumbs: {}
+  },
+  setup(__props) {
+    const linkComponent = computed(() => {
+      try {
+        const RouterLink = resolveComponent("RouterLink");
+        if (typeof RouterLink !== "string") {
+          return RouterLink;
+        }
+      } catch {
+      }
+      return "a";
+    });
+    const getLinkProps = (link) => {
+      if (linkComponent.value === "a") {
+        return { href: link };
+      }
+      return { to: link };
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.breadcrumbs && __props.breadcrumbs.length > 0 ? (openBlock(), createElementBlock("nav", _hoisted_2, [
+          createElementVNode("ol", _hoisted_3, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.breadcrumbs, (breadcrumb, index) => {
+              return openBlock(), createElementBlock("li", {
+                key: index,
+                class: "flex items-center"
+              }, [
+                index > 0 ? (openBlock(), createElementBlock("span", _hoisted_4, " / ")) : createCommentVNode("", true),
+                renderSlot(_ctx.$slots, "breadcrumb", {
+                  breadcrumb,
+                  index,
+                  isLast: index === __props.breadcrumbs.length - 1
+                }, () => [
+                  (openBlock(), createBlock(resolveDynamicComponent(linkComponent.value), mergeProps({ ref_for: true }, getLinkProps(breadcrumb.link), {
+                    class: [
+                      "text-sm transition-colors",
+                      index < __props.breadcrumbs.length - 1 ? "font-semibold text-gray-900 hover:text-primary/90 hover:underline dark:text-gray-100" : "text-gray-400 dark:text-gray-600"
+                    ]
+                  }), {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(breadcrumb.label), 1)
+                    ]),
+                    _: 2
+                  }, 1040, ["class"]))
+                ])
+              ]);
+            }), 128))
+          ])
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_5, [
+          createElementVNode("div", _hoisted_6, [
+            __props.title ? (openBlock(), createElementBlock("h1", _hoisted_7, [
+              renderSlot(_ctx.$slots, "title", {}, () => [
+                createTextVNode(toDisplayString(__props.title), 1)
+              ])
+            ])) : createCommentVNode("", true),
+            __props.description ? (openBlock(), createElementBlock("p", _hoisted_8, [
+              renderSlot(_ctx.$slots, "description", {}, () => [
+                createTextVNode(toDisplayString(__props.description), 1)
+              ])
+            ])) : createCommentVNode("", true)
+          ]),
+          createElementVNode("div", _hoisted_9, [
+            renderSlot(_ctx.$slots, "actions")
+          ])
+        ]),
+        createElementVNode("div", _hoisted_10, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main$1 as _,
+  _sfc_main as a
+};
+//# sourceMappingURL=PageLayout.vue_vue_type_script_setup_true_lang-DTlUENg3.js.map

package/dist/PageLayout.vue_vue_type_script_setup_true_lang-DTlUENg3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.vue_vue_type_script_setup_true_lang-DTlUENg3.js","sources":["../src/components/layout/BaseLayout.vue","../src/components/layout/PageLayout.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, computed, resolveComponent } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport MenuItem from '@/components/core/MenuItem.vue'\nimport type { MenuItemProps } from '@/types'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Menu items for the sidebar */\n    menuItems?: MenuItemProps[]\n    /** App/brand name displayed in sidebar */\n    appName?: string\n    /** App icon (iconify icon name) */\n    appIcon?: string\n    /** Whether sidebar is open (v-model:sidebarOpen) */\n    sidebarOpen?: boolean\n    /** Whether dark mode is enabled (v-model:dark) */\n    dark?: boolean\n    /** Show dark mode toggle in header */\n    showDarkToggle?: boolean\n    /** Primary color class for sidebar background */\n    sidebarClass?: string\n    /** Current route path for menu active state (pass useRoute().path) */\n    currentPath?: string\n  }>(),\n  {\n    menuItems: () => [],\n    appName: 'App',\n    appIcon: 'lucide:box',\n    sidebarOpen: true,\n    dark: false,\n    showDarkToggle: true,\n    sidebarClass: 'bg-[#172b4c] dark:bg-slate-950',\n    currentPath: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  'update:sidebarOpen': [value: boolean]\n  'update:dark': [value: boolean]\n}>()\n\nconst internalSidebarOpen = ref(props.sidebarOpen)\nconst internalDark = ref(props.dark)\n\nconst sidebarOpenModel = computed({\n  get: () => props.sidebarOpen ?? internalSidebarOpen.value,\n  set: (value: boolean) => {\n    internalSidebarOpen.value = value\n    emit('update:sidebarOpen', value)\n  },\n})\n\nconst darkModel = computed({\n  get: () => props.dark ?? internalDark.value,\n  set: (value: boolean) => {\n    internalDark.value = value\n    emit('update:dark', value)\n  },\n})\n\nconst toggleSidebar = () => {\n  sidebarOpenModel.value = !sidebarOpenModel.value\n}\n\nconst toggleDark = () => {\n  darkModel.value = !darkModel.value\n}\n\n// Try to resolve RouterView\nconst routerViewComponent = computed(() => {\n  try {\n    const RouterView = resolveComponent('RouterView')\n    if (typeof RouterView !== 'string') {\n      return RouterView\n    }\n  } catch {\n    // RouterView not available\n  }\n  return null\n})\n</script>\n\n<template>\n  <div class=\"font-inter relative flex h-dvh bg-gray-100 dark:bg-slate-900\">\n    <!-- Backdrop for mobile -->\n    <div\n      v-if=\"sidebarOpenModel\"\n      class=\"absolute z-40 h-full w-full bg-slate-950/20 lg:hidden dark:bg-white/20\"\n      @click=\"sidebarOpenModel = false\"\n    ></div>\n\n    <!-- Sidebar -->\n    <aside\n      :class=\"[\n        sidebarOpenModel ? 'lg:w-60' : '-translate-x-76 lg:w-16 lg:translate-x-0',\n        sidebarClass,\n      ]\"\n      class=\"@container absolute z-50 flex h-full w-76 flex-col justify-between gap-10 transition-all duration-1000 ease-in-out lg:relative\"\n    >\n      <!-- Sidebar Header -->\n      <div class=\"flex h-16 items-center px-3\">\n        <div class=\"flex flex-1 items-center justify-center gap-3\">\n          <slot name=\"logo\">\n            <div\n              class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-lg bg-white/20\"\n            >\n              <Icon class=\"size-5 text-white\" :icon=\"appIcon\" />\n            </div>\n            <span\n              :class=\"sidebarOpenModel ? 'block' : 'hidden'\"\n              class=\"font-outfit flex-1 text-lg font-semibold text-white\"\n            >\n              {{ appName }}\n            </span>\n          </slot>\n        </div>\n\n        <button\n          class=\"rounded-lg bg-white/10 p-1 transition hover:bg-white/20 lg:hidden\"\n          @click=\"toggleSidebar\"\n        >\n          <Icon class=\"size-6 text-white\" icon=\"lucide:menu\" />\n        </button>\n      </div>\n\n      <!-- Menu Items -->\n      <div\n        :class=\"sidebarOpenModel ? 'items-start' : 'items-center'\"\n        class=\"flex flex-1 flex-col gap-8 px-2 lg:justify-center\"\n      >\n        <slot name=\"menu\" :current-path=\"currentPath\">\n          <MenuItem\n            v-for=\"(item, index) in menuItems\"\n            :key=\"index\"\n            :menu-item=\"item\"\n            :expanded=\"sidebarOpenModel\"\n            :current-path=\"currentPath\"\n          />\n        </slot>\n      </div>\n\n      <!-- Sidebar Footer -->\n      <div class=\"flex flex-col gap-3 px-3 pb-3\">\n        <slot name=\"sidebar-footer\" />\n      </div>\n    </aside>\n\n    <!-- Main Content Area -->\n    <div class=\"flex flex-1 flex-col\">\n      <!-- Header -->\n      <header\n        class=\"flex h-16 items-center justify-between border-b border-slate-200 bg-white px-4 dark:border-slate-800 dark:bg-slate-950\"\n      >\n        <div>\n          <button\n            class=\"rounded-lg bg-gray-100 p-1 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800\"\n            @click=\"toggleSidebar\"\n          >\n            <Icon\n              class=\"size-6 text-gray-900 hover:text-gray-800 dark:text-gray-100\"\n              icon=\"lucide:menu\"\n            />\n          </button>\n        </div>\n\n        <div class=\"flex-1\">\n          <slot name=\"header-center\" />\n        </div>\n\n        <div class=\"flex items-center gap-3\">\n          <slot name=\"header-actions\" />\n\n          <button\n            v-if=\"showDarkToggle\"\n            class=\"flex items-center justify-center rounded-lg bg-gray-100 p-2 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800\"\n            @click=\"toggleDark\"\n          >\n            <Icon\n              :icon=\"darkModel ? 'lucide:sun' : 'lucide:moon'\"\n              class=\"size-5 text-gray-900 dark:text-gray-100\"\n            />\n          </button>\n        </div>\n      </header>\n\n      <!-- Page Content -->\n      <div class=\"flex flex-1 flex-col overflow-y-auto\">\n        <main class=\"container mx-auto flex flex-1 flex-col gap-5 p-5\">\n          <slot>\n            <component :is=\"routerViewComponent\" v-if=\"routerViewComponent\" />\n          </slot>\n        </main>\n      </div>\n    </div>\n  </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { computed, resolveComponent } from 'vue'\n\nexport interface Breadcrumb {\n  label: string\n  link: string\n}\n\ndefineProps<{\n  /** Page title */\n  title?: string\n  /** Page description */\n  description?: string\n  /** Breadcrumb navigation items */\n  breadcrumbs?: Breadcrumb[]\n}>()\n\n// Try to resolve RouterLink\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 getLinkProps = (link: string) => {\n  if (linkComponent.value === 'a') {\n    return { href: link }\n  }\n  return { to: link }\n}\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-4\">\n    <!-- Breadcrumbs -->\n    <nav v-if=\"breadcrumbs && breadcrumbs.length > 0\" aria-label=\"Breadcrumb\">\n      <ol class=\"flex items-center\">\n        <li\n          v-for=\"(breadcrumb, index) in breadcrumbs\"\n          :key=\"index\"\n          class=\"flex items-center\"\n        >\n          <span\n            v-if=\"index > 0\"\n            class=\"mx-3 text-sm font-semibold text-gray-400 dark:text-gray-600\"\n          >\n            /\n          </span>\n\n          <slot name=\"breadcrumb\" :breadcrumb=\"breadcrumb\" :index=\"index\" :isLast=\"index === breadcrumbs.length - 1\">\n            <component\n              :is=\"linkComponent\"\n              v-bind=\"getLinkProps(breadcrumb.link)\"\n              :class=\"[\n                'text-sm transition-colors',\n                index < breadcrumbs.length - 1\n                  ? 'font-semibold text-gray-900 hover:text-primary/90 hover:underline dark:text-gray-100'\n                  : 'text-gray-400 dark:text-gray-600',\n              ]\"\n            >\n              {{ breadcrumb.label }}\n            </component>\n          </slot>\n        </li>\n      </ol>\n    </nav>\n\n    <!-- Page Header -->\n    <div class=\"flex flex-col justify-between gap-4 lg:flex-row lg:items-center\">\n      <div class=\"flex flex-col gap-1\">\n        <h1\n          v-if=\"title\"\n          class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\"\n        >\n          <slot name=\"title\">{{ title }}</slot>\n        </h1>\n\n        <p\n          v-if=\"description\"\n          class=\"text-sm text-gray-600 dark:text-gray-400\"\n        >\n          <slot name=\"description\">{{ description }}</slot>\n        </p>\n      </div>\n\n      <div class=\"flex items-center gap-2\">\n        <slot name=\"actions\" />\n      </div>\n    </div>\n\n    <!-- Page Content -->\n    <div class=\"flex-1\">\n      <slot />\n    </div>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_renderSlot","_hoisted_4","_createVNode","_unref","_Fragment","_renderList","_createBlock","MenuItem","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_resolveDynamicComponent","_mergeProps","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/dist/PageLayout.vue_vue_type_script_setup_true_lang-IcouTz4C.cjs

@@ -0,0 +1,264 @@
+"use strict";
+const vue = require("vue");
+const vue$1 = require("@iconify/vue");
+const MenuItem_vue_vue_type_script_setup_true_lang = require("./MenuItem.vue_vue_type_script_setup_true_lang-BWz86k7c.cjs");
+const _hoisted_1$1 = { class: "font-inter relative flex h-dvh bg-gray-100 dark:bg-slate-900" };
+const _hoisted_2$1 = { class: "flex h-16 items-center px-3" };
+const _hoisted_3$1 = { class: "flex flex-1 items-center justify-center gap-3" };
+const _hoisted_4$1 = { class: "bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-lg bg-white/20" };
+const _hoisted_5$1 = { class: "flex flex-col gap-3 px-3 pb-3" };
+const _hoisted_6$1 = { class: "flex flex-1 flex-col" };
+const _hoisted_7$1 = { class: "flex h-16 items-center justify-between border-b border-slate-200 bg-white px-4 dark:border-slate-800 dark:bg-slate-950" };
+const _hoisted_8$1 = { class: "flex-1" };
+const _hoisted_9$1 = { class: "flex items-center gap-3" };
+const _hoisted_10$1 = { class: "flex flex-1 flex-col overflow-y-auto" };
+const _hoisted_11 = { class: "container mx-auto flex flex-1 flex-col gap-5 p-5" };
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "BaseLayout",
+  props: {
+    menuItems: { default: () => [] },
+    appName: { default: "App" },
+    appIcon: { default: "lucide:box" },
+    sidebarOpen: { type: Boolean, default: true },
+    dark: { type: Boolean, default: false },
+    showDarkToggle: { type: Boolean, default: true },
+    sidebarClass: { default: "bg-[#172b4c] dark:bg-slate-950" },
+    currentPath: { default: void 0 }
+  },
+  emits: ["update:sidebarOpen", "update:dark"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const internalSidebarOpen = vue.ref(props.sidebarOpen);
+    const internalDark = vue.ref(props.dark);
+    const sidebarOpenModel = vue.computed({
+      get: () => props.sidebarOpen ?? internalSidebarOpen.value,
+      set: (value) => {
+        internalSidebarOpen.value = value;
+        emit("update:sidebarOpen", value);
+      }
+    });
+    const darkModel = vue.computed({
+      get: () => props.dark ?? internalDark.value,
+      set: (value) => {
+        internalDark.value = value;
+        emit("update:dark", value);
+      }
+    });
+    const toggleSidebar = () => {
+      sidebarOpenModel.value = !sidebarOpenModel.value;
+    };
+    const toggleDark = () => {
+      darkModel.value = !darkModel.value;
+    };
+    const routerViewComponent = vue.computed(() => {
+      try {
+        const RouterView = vue.resolveComponent("RouterView");
+        if (typeof RouterView !== "string") {
+          return RouterView;
+        }
+      } catch {
+      }
+      return null;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+        sidebarOpenModel.value ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "absolute z-40 h-full w-full bg-slate-950/20 lg:hidden dark:bg-white/20",
+          onClick: _cache[0] || (_cache[0] = ($event) => sidebarOpenModel.value = false)
+        })) : vue.createCommentVNode("", true),
+        vue.createElementVNode("aside", {
+          class: vue.normalizeClass([[
+            sidebarOpenModel.value ? "lg:w-60" : "-translate-x-76 lg:w-16 lg:translate-x-0",
+            __props.sidebarClass
+          ], "@container absolute z-50 flex h-full w-76 flex-col justify-between gap-10 transition-all duration-1000 ease-in-out lg:relative"])
+        }, [
+          vue.createElementVNode("div", _hoisted_2$1, [
+            vue.createElementVNode("div", _hoisted_3$1, [
+              vue.renderSlot(_ctx.$slots, "logo", {}, () => [
+                vue.createElementVNode("div", _hoisted_4$1, [
+                  vue.createVNode(vue.unref(vue$1.Icon), {
+                    class: "size-5 text-white",
+                    icon: __props.appIcon
+                  }, null, 8, ["icon"])
+                ]),
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass([sidebarOpenModel.value ? "block" : "hidden", "font-outfit flex-1 text-lg font-semibold text-white"])
+                }, vue.toDisplayString(__props.appName), 3)
+              ])
+            ]),
+            vue.createElementVNode("button", {
+              class: "rounded-lg bg-white/10 p-1 transition hover:bg-white/20 lg:hidden",
+              onClick: toggleSidebar
+            }, [
+              vue.createVNode(vue.unref(vue$1.Icon), {
+                class: "size-6 text-white",
+                icon: "lucide:menu"
+              })
+            ])
+          ]),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass([sidebarOpenModel.value ? "items-start" : "items-center", "flex flex-1 flex-col gap-8 px-2 lg:justify-center"])
+          }, [
+            vue.renderSlot(_ctx.$slots, "menu", { currentPath: __props.currentPath }, () => [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.menuItems, (item, index) => {
+                return vue.openBlock(), vue.createBlock(MenuItem_vue_vue_type_script_setup_true_lang._sfc_main, {
+                  key: index,
+                  "menu-item": item,
+                  expanded: sidebarOpenModel.value,
+                  "current-path": __props.currentPath
+                }, null, 8, ["menu-item", "expanded", "current-path"]);
+              }), 128))
+            ])
+          ], 2),
+          vue.createElementVNode("div", _hoisted_5$1, [
+            vue.renderSlot(_ctx.$slots, "sidebar-footer")
+          ])
+        ], 2),
+        vue.createElementVNode("div", _hoisted_6$1, [
+          vue.createElementVNode("header", _hoisted_7$1, [
+            vue.createElementVNode("div", null, [
+              vue.createElementVNode("button", {
+                class: "rounded-lg bg-gray-100 p-1 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800",
+                onClick: toggleSidebar
+              }, [
+                vue.createVNode(vue.unref(vue$1.Icon), {
+                  class: "size-6 text-gray-900 hover:text-gray-800 dark:text-gray-100",
+                  icon: "lucide:menu"
+                })
+              ])
+            ]),
+            vue.createElementVNode("div", _hoisted_8$1, [
+              vue.renderSlot(_ctx.$slots, "header-center")
+            ]),
+            vue.createElementVNode("div", _hoisted_9$1, [
+              vue.renderSlot(_ctx.$slots, "header-actions"),
+              __props.showDarkToggle ? (vue.openBlock(), vue.createElementBlock("button", {
+                key: 0,
+                class: "flex items-center justify-center rounded-lg bg-gray-100 p-2 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800",
+                onClick: toggleDark
+              }, [
+                vue.createVNode(vue.unref(vue$1.Icon), {
+                  icon: darkModel.value ? "lucide:sun" : "lucide:moon",
+                  class: "size-5 text-gray-900 dark:text-gray-100"
+                }, null, 8, ["icon"])
+              ])) : vue.createCommentVNode("", true)
+            ])
+          ]),
+          vue.createElementVNode("div", _hoisted_10$1, [
+            vue.createElementVNode("main", _hoisted_11, [
+              vue.renderSlot(_ctx.$slots, "default", {}, () => [
+                routerViewComponent.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(routerViewComponent.value), { key: 0 })) : vue.createCommentVNode("", true)
+              ])
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+});
+const _hoisted_1 = { class: "flex flex-col gap-4" };
+const _hoisted_2 = {
+  key: 0,
+  "aria-label": "Breadcrumb"
+};
+const _hoisted_3 = { class: "flex items-center" };
+const _hoisted_4 = {
+  key: 0,
+  class: "mx-3 text-sm font-semibold text-gray-400 dark:text-gray-600"
+};
+const _hoisted_5 = { class: "flex flex-col justify-between gap-4 lg:flex-row lg:items-center" };
+const _hoisted_6 = { class: "flex flex-col gap-1" };
+const _hoisted_7 = {
+  key: 0,
+  class: "text-2xl font-bold text-gray-900 dark:text-gray-100"
+};
+const _hoisted_8 = {
+  key: 1,
+  class: "text-sm text-gray-600 dark:text-gray-400"
+};
+const _hoisted_9 = { class: "flex items-center gap-2" };
+const _hoisted_10 = { class: "flex-1" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "PageLayout",
+  props: {
+    title: {},
+    description: {},
+    breadcrumbs: {}
+  },
+  setup(__props) {
+    const linkComponent = vue.computed(() => {
+      try {
+        const RouterLink = vue.resolveComponent("RouterLink");
+        if (typeof RouterLink !== "string") {
+          return RouterLink;
+        }
+      } catch {
+      }
+      return "a";
+    });
+    const getLinkProps = (link) => {
+      if (linkComponent.value === "a") {
+        return { href: link };
+      }
+      return { to: link };
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        __props.breadcrumbs && __props.breadcrumbs.length > 0 ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_2, [
+          vue.createElementVNode("ol", _hoisted_3, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.breadcrumbs, (breadcrumb, index) => {
+              return vue.openBlock(), vue.createElementBlock("li", {
+                key: index,
+                class: "flex items-center"
+              }, [
+                index > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, " / ")) : vue.createCommentVNode("", true),
+                vue.renderSlot(_ctx.$slots, "breadcrumb", {
+                  breadcrumb,
+                  index,
+                  isLast: index === __props.breadcrumbs.length - 1
+                }, () => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(linkComponent.value), vue.mergeProps({ ref_for: true }, getLinkProps(breadcrumb.link), {
+                    class: [
+                      "text-sm transition-colors",
+                      index < __props.breadcrumbs.length - 1 ? "font-semibold text-gray-900 hover:text-primary/90 hover:underline dark:text-gray-100" : "text-gray-400 dark:text-gray-600"
+                    ]
+                  }), {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString(breadcrumb.label), 1)
+                    ]),
+                    _: 2
+                  }, 1040, ["class"]))
+                ])
+              ]);
+            }), 128))
+          ])
+        ])) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", _hoisted_5, [
+          vue.createElementVNode("div", _hoisted_6, [
+            __props.title ? (vue.openBlock(), vue.createElementBlock("h1", _hoisted_7, [
+              vue.renderSlot(_ctx.$slots, "title", {}, () => [
+                vue.createTextVNode(vue.toDisplayString(__props.title), 1)
+              ])
+            ])) : vue.createCommentVNode("", true),
+            __props.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_8, [
+              vue.renderSlot(_ctx.$slots, "description", {}, () => [
+                vue.createTextVNode(vue.toDisplayString(__props.description), 1)
+              ])
+            ])) : vue.createCommentVNode("", true)
+          ]),
+          vue.createElementVNode("div", _hoisted_9, [
+            vue.renderSlot(_ctx.$slots, "actions")
+          ])
+        ]),
+        vue.createElementVNode("div", _hoisted_10, [
+          vue.renderSlot(_ctx.$slots, "default")
+        ])
+      ]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main$1;
+exports._sfc_main$1 = _sfc_main;
+//# sourceMappingURL=PageLayout.vue_vue_type_script_setup_true_lang-IcouTz4C.cjs.map

package/dist/PageLayout.vue_vue_type_script_setup_true_lang-IcouTz4C.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.vue_vue_type_script_setup_true_lang-IcouTz4C.cjs","sources":["../src/components/layout/BaseLayout.vue","../src/components/layout/PageLayout.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, computed, resolveComponent } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport MenuItem from '@/components/core/MenuItem.vue'\nimport type { MenuItemProps } from '@/types'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Menu items for the sidebar */\n    menuItems?: MenuItemProps[]\n    /** App/brand name displayed in sidebar */\n    appName?: string\n    /** App icon (iconify icon name) */\n    appIcon?: string\n    /** Whether sidebar is open (v-model:sidebarOpen) */\n    sidebarOpen?: boolean\n    /** Whether dark mode is enabled (v-model:dark) */\n    dark?: boolean\n    /** Show dark mode toggle in header */\n    showDarkToggle?: boolean\n    /** Primary color class for sidebar background */\n    sidebarClass?: string\n    /** Current route path for menu active state (pass useRoute().path) */\n    currentPath?: string\n  }>(),\n  {\n    menuItems: () => [],\n    appName: 'App',\n    appIcon: 'lucide:box',\n    sidebarOpen: true,\n    dark: false,\n    showDarkToggle: true,\n    sidebarClass: 'bg-[#172b4c] dark:bg-slate-950',\n    currentPath: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  'update:sidebarOpen': [value: boolean]\n  'update:dark': [value: boolean]\n}>()\n\nconst internalSidebarOpen = ref(props.sidebarOpen)\nconst internalDark = ref(props.dark)\n\nconst sidebarOpenModel = computed({\n  get: () => props.sidebarOpen ?? internalSidebarOpen.value,\n  set: (value: boolean) => {\n    internalSidebarOpen.value = value\n    emit('update:sidebarOpen', value)\n  },\n})\n\nconst darkModel = computed({\n  get: () => props.dark ?? internalDark.value,\n  set: (value: boolean) => {\n    internalDark.value = value\n    emit('update:dark', value)\n  },\n})\n\nconst toggleSidebar = () => {\n  sidebarOpenModel.value = !sidebarOpenModel.value\n}\n\nconst toggleDark = () => {\n  darkModel.value = !darkModel.value\n}\n\n// Try to resolve RouterView\nconst routerViewComponent = computed(() => {\n  try {\n    const RouterView = resolveComponent('RouterView')\n    if (typeof RouterView !== 'string') {\n      return RouterView\n    }\n  } catch {\n    // RouterView not available\n  }\n  return null\n})\n</script>\n\n<template>\n  <div class=\"font-inter relative flex h-dvh bg-gray-100 dark:bg-slate-900\">\n    <!-- Backdrop for mobile -->\n    <div\n      v-if=\"sidebarOpenModel\"\n      class=\"absolute z-40 h-full w-full bg-slate-950/20 lg:hidden dark:bg-white/20\"\n      @click=\"sidebarOpenModel = false\"\n    ></div>\n\n    <!-- Sidebar -->\n    <aside\n      :class=\"[\n        sidebarOpenModel ? 'lg:w-60' : '-translate-x-76 lg:w-16 lg:translate-x-0',\n        sidebarClass,\n      ]\"\n      class=\"@container absolute z-50 flex h-full w-76 flex-col justify-between gap-10 transition-all duration-1000 ease-in-out lg:relative\"\n    >\n      <!-- Sidebar Header -->\n      <div class=\"flex h-16 items-center px-3\">\n        <div class=\"flex flex-1 items-center justify-center gap-3\">\n          <slot name=\"logo\">\n            <div\n              class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-lg bg-white/20\"\n            >\n              <Icon class=\"size-5 text-white\" :icon=\"appIcon\" />\n            </div>\n            <span\n              :class=\"sidebarOpenModel ? 'block' : 'hidden'\"\n              class=\"font-outfit flex-1 text-lg font-semibold text-white\"\n            >\n              {{ appName }}\n            </span>\n          </slot>\n        </div>\n\n        <button\n          class=\"rounded-lg bg-white/10 p-1 transition hover:bg-white/20 lg:hidden\"\n          @click=\"toggleSidebar\"\n        >\n          <Icon class=\"size-6 text-white\" icon=\"lucide:menu\" />\n        </button>\n      </div>\n\n      <!-- Menu Items -->\n      <div\n        :class=\"sidebarOpenModel ? 'items-start' : 'items-center'\"\n        class=\"flex flex-1 flex-col gap-8 px-2 lg:justify-center\"\n      >\n        <slot name=\"menu\" :current-path=\"currentPath\">\n          <MenuItem\n            v-for=\"(item, index) in menuItems\"\n            :key=\"index\"\n            :menu-item=\"item\"\n            :expanded=\"sidebarOpenModel\"\n            :current-path=\"currentPath\"\n          />\n        </slot>\n      </div>\n\n      <!-- Sidebar Footer -->\n      <div class=\"flex flex-col gap-3 px-3 pb-3\">\n        <slot name=\"sidebar-footer\" />\n      </div>\n    </aside>\n\n    <!-- Main Content Area -->\n    <div class=\"flex flex-1 flex-col\">\n      <!-- Header -->\n      <header\n        class=\"flex h-16 items-center justify-between border-b border-slate-200 bg-white px-4 dark:border-slate-800 dark:bg-slate-950\"\n      >\n        <div>\n          <button\n            class=\"rounded-lg bg-gray-100 p-1 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800\"\n            @click=\"toggleSidebar\"\n          >\n            <Icon\n              class=\"size-6 text-gray-900 hover:text-gray-800 dark:text-gray-100\"\n              icon=\"lucide:menu\"\n            />\n          </button>\n        </div>\n\n        <div class=\"flex-1\">\n          <slot name=\"header-center\" />\n        </div>\n\n        <div class=\"flex items-center gap-3\">\n          <slot name=\"header-actions\" />\n\n          <button\n            v-if=\"showDarkToggle\"\n            class=\"flex items-center justify-center rounded-lg bg-gray-100 p-2 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800\"\n            @click=\"toggleDark\"\n          >\n            <Icon\n              :icon=\"darkModel ? 'lucide:sun' : 'lucide:moon'\"\n              class=\"size-5 text-gray-900 dark:text-gray-100\"\n            />\n          </button>\n        </div>\n      </header>\n\n      <!-- Page Content -->\n      <div class=\"flex flex-1 flex-col overflow-y-auto\">\n        <main class=\"container mx-auto flex flex-1 flex-col gap-5 p-5\">\n          <slot>\n            <component :is=\"routerViewComponent\" v-if=\"routerViewComponent\" />\n          </slot>\n        </main>\n      </div>\n    </div>\n  </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { computed, resolveComponent } from 'vue'\n\nexport interface Breadcrumb {\n  label: string\n  link: string\n}\n\ndefineProps<{\n  /** Page title */\n  title?: string\n  /** Page description */\n  description?: string\n  /** Breadcrumb navigation items */\n  breadcrumbs?: Breadcrumb[]\n}>()\n\n// Try to resolve RouterLink\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 getLinkProps = (link: string) => {\n  if (linkComponent.value === 'a') {\n    return { href: link }\n  }\n  return { to: link }\n}\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-4\">\n    <!-- Breadcrumbs -->\n    <nav v-if=\"breadcrumbs && breadcrumbs.length > 0\" aria-label=\"Breadcrumb\">\n      <ol class=\"flex items-center\">\n        <li\n          v-for=\"(breadcrumb, index) in breadcrumbs\"\n          :key=\"index\"\n          class=\"flex items-center\"\n        >\n          <span\n            v-if=\"index > 0\"\n            class=\"mx-3 text-sm font-semibold text-gray-400 dark:text-gray-600\"\n          >\n            /\n          </span>\n\n          <slot name=\"breadcrumb\" :breadcrumb=\"breadcrumb\" :index=\"index\" :isLast=\"index === breadcrumbs.length - 1\">\n            <component\n              :is=\"linkComponent\"\n              v-bind=\"getLinkProps(breadcrumb.link)\"\n              :class=\"[\n                'text-sm transition-colors',\n                index < breadcrumbs.length - 1\n                  ? 'font-semibold text-gray-900 hover:text-primary/90 hover:underline dark:text-gray-100'\n                  : 'text-gray-400 dark:text-gray-600',\n              ]\"\n            >\n              {{ breadcrumb.label }}\n            </component>\n          </slot>\n        </li>\n      </ol>\n    </nav>\n\n    <!-- Page Header -->\n    <div class=\"flex flex-col justify-between gap-4 lg:flex-row lg:items-center\">\n      <div class=\"flex flex-col gap-1\">\n        <h1\n          v-if=\"title\"\n          class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\"\n        >\n          <slot name=\"title\">{{ title }}</slot>\n        </h1>\n\n        <p\n          v-if=\"description\"\n          class=\"text-sm text-gray-600 dark:text-gray-400\"\n        >\n          <slot name=\"description\">{{ description }}</slot>\n        </p>\n      </div>\n\n      <div class=\"flex items-center gap-2\">\n        <slot name=\"actions\" />\n      </div>\n    </div>\n\n    <!-- Page Content -->\n    <div class=\"flex-1\">\n      <slot />\n    </div>\n  </div>\n</template>\n"],"names":["ref","computed","resolveComponent","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_renderSlot","_hoisted_4","_createVNode","_unref","Icon","_Fragment","_renderList","_createBlock","MenuItem","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_resolveDynamicComponent","_mergeProps","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/dist/components/core/AutocompleteComponent.vue.d.ts

@@ -7,12 +7,18 @@ type __VLS_Props = {
     label?: string;
     error?: string;
     noResultsText?: string;
+    /** Use teleport to body to avoid overflow clipping */
+    teleport?: boolean;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | null) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+}>, {
+    teleport: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerRef: HTMLDivElement;
+    inputWrapperRef: HTMLDivElement;
     inputRef: HTMLInputElement;
     dropdownRef: HTMLDivElement;
 }, HTMLDivElement>;

package/dist/components/core/Avatar.vue.d.ts

@@ -0,0 +1,20 @@
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type __VLS_Props = {
+    /** Image source URL */
+    src?: string;
+    /** Alt text for image */
+    alt?: string;
+    /** Fallback name (shows initials) */
+    name?: string;
+    /** Size variant */
+    size?: AvatarSize;
+    /** Show online status indicator */
+    status?: 'online' | 'offline' | 'away' | 'busy';
+    /** Rounded style */
+    rounded?: 'full' | 'lg' | 'md';
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: AvatarSize;
+    rounded: "full" | "lg" | "md";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;