wize-admin-library 0.1.20 → 0.1.21

package/dist/wize-admin-library.es.js

@@ -1,545 +1,533 @@
-import { computed as w, ref as v, onMounted as C, onBeforeUnmount as g } from "vue";
-function f(n, e, t, a, s, l, o, d) {
-  var r = typeof n == "function" ? n.options : n;
-  e && (r.render = e, r.staticRenderFns = t, r._compiled = !0), a && (r.functional = !0), l && (r._scopeId = "data-v-" + l);
-  var c;
-  if (o ? (c = function(i) {
-    i = i || // cached call
-    this.$vnode && this.$vnode.ssrContext || // stateful
-    this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !i && typeof __VUE_SSR_CONTEXT__ < "u" && (i = __VUE_SSR_CONTEXT__), s && s.call(this, i), i && i._registeredComponents && i._registeredComponents.add(o);
-  }, r._ssrRegister = c) : s && (c = d ? function() {
-    s.call(
-      this,
-      (r.functional ? this.parent : this).$root.$options.shadowRoot
-    );
-  } : s), c)
-    if (r.functional) {
-      r._injectStyles = c;
-      var p = r.render;
-      r.render = function(u, h) {
-        return c.call(h), p(u, h);
-      };
-    } else {
-      var _ = r.beforeCreate;
-      r.beforeCreate = _ ? [].concat(_, c) : [c];
-    }
-  return {
-    exports: n,
-    options: r
-  };
-}
-const y = {
-  __name: "WzButton",
-  props: {
-    /**
-     * Visual style variant of the button.
-     * @values primary, secondary, success, danger, warning, info, light, dark, link, outline
-     */
-    variant: {
-      type: String,
-      default: "primary",
-      validator: (n) => ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark", "link", "outline"].includes(n)
-    },
-    /**
-     * Size of the button.
-     * @values sm, md, lg
-     */
-    size: {
-      type: String,
-      default: "md",
-      validator: (n) => ["sm", "md", "lg"].includes(n)
-    },
-    /**
-     * Whether the button is disabled.
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * If true, renders as a block-level button (full width).
-     */
-    block: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: ["click"],
-  setup(n, { emit: e }) {
-    const t = n, a = w(() => [
-      "wz-btn",
-      `wz-btn-${t.variant}`,
-      `wz-btn-${t.size}`,
-      { "wz-btn-block": t.block }
-    ]);
-    return { __sfc: !0, props: t, emit: e, classes: a, handleClick: (l) => {
-      t.disabled || e("click", l);
-    } };
-  }
-};
-var m = function() {
-  var e = this, t = e._self._c, a = e._self._setupProxy;
-  return t("button", { class: a.classes, attrs: { disabled: e.disabled }, on: { click: a.handleClick } }, [e._t("default")], 2);
-}, b = [], k = /* @__PURE__ */ f(
-  y,
-  m,
-  b,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const S = k.exports, $ = {
-  __name: "WzLayout",
-  props: {
-    /**
-     * Whether the sidebar is collapsed initially.
-     */
-    defaultCollapsed: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Defines layout navigation architecture ('vertical' | 'horizontal')
-     */
-    navigationStyle: {
-      type: String,
-      default: "vertical"
-    },
-    /**
-     * Layout visual theme ('light' | 'dark')
-     */
-    theme: {
-      type: String,
-      default: "light"
-    }
-  },
-  setup(n) {
-    const e = n, t = v(e.defaultCollapsed), a = () => {
-      t.value = !t.value;
-    };
-    return C(() => {
-      typeof window < "u" && window.innerWidth <= 768 && (t.value = !0);
-    }), { __sfc: !0, props: e, isCollapsed: t, toggleSidebar: a };
-  }
-};
-var x = function() {
-  var e = this, t = e._self._c, a = e._self._setupProxy;
-  return t("div", { staticClass: "wz-admin-layout", class: "is-" + e.navigationStyle, attrs: { "data-theme": e.theme } }, [t("div", { staticClass: "wz-admin-layout-sidebar-container" }, [a.isCollapsed ? e._e() : t("div", { staticClass: "wz-admin-layout-backdrop", on: { click: a.toggleSidebar } }), e._t("sidebar", null, { collapsed: a.isCollapsed })], 2), t("div", { staticClass: "wz-admin-layout-main" }, [t("div", { staticClass: "wz-admin-layout-header-container" }, [e._t("header", null, { toggleSidebar: a.toggleSidebar, collapsed: a.isCollapsed })], 2), e.navigationStyle === "horizontal" ? t("div", { staticClass: "wz-admin-layout-horizontal-nav-container" }, [e._t("horizontal-nav")], 2) : e._e(), t("main", { staticClass: "wz-admin-layout-content" }, [e._t("default")], 2)])]);
-}, M = [], P = /* @__PURE__ */ f(
-  $,
-  x,
-  M,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const W = P.exports, H = {
-  __name: "WzSidebar",
-  props: {
-    /**
-     * Array of nav items. Each item is either:
-     * - Nav item:    { key, label, iconHtml, children[] }
-     * - Group label: { type: 'group', label }
-     */
-    items: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * Key of the currently active item.
-     */
-    activeKey: {
-      type: String,
-      default: null
-    },
-    /**
-     * Main logo image source.
-     */
-    logoSrc: {
-      type: String,
-      default: null
-    },
-    /**
-     * Mini logo image source to show when collapsed.
-     */
-    logoMiniSrc: {
-      type: String,
-      default: null
-    },
-    /**
-     * Brand name shown in the logo area.
-     */
-    logoText: {
-      type: String,
-      default: "Admin"
-    },
-    /**
-     * SVG HTML string for the logo icon.
-     */
-    logoIconHtml: {
-      type: String,
-      default: null
-    },
-    /**
-     * Whether the sidebar is collapsed (mini mode).
-     */
-    collapsed: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: ["item-click"],
-  setup(n, { emit: e }) {
-    const t = n, a = v(/* @__PURE__ */ new Set()), s = v(!1), l = w(() => t.collapsed && !s.value), o = (i) => i.key === t.activeKey, d = (i) => i.children && i.children.length > 0, r = (i) => a.value.has(i.key), c = (i) => {
-      if (!d(i) || l.value)
-        return;
-      const u = new Set(a.value);
-      u.has(i.key) ? u.delete(i.key) : u.add(i.key), a.value = u;
-    };
-    return { __sfc: !0, props: t, emit: e, openKeys: a, isHovered: s, visuallyCollapsed: l, isActive: o, hasChildren: d, isOpen: r, toggle: c, handleClick: (i) => {
-      if (l.value) {
-        e("item-click", i);
-        return;
-      }
-      d(i) ? c(i) : e("item-click", i);
-    }, handleChildClick: (i) => {
-      e("item-click", i);
-    } };
-  }
-};
-var L = function() {
-  var e = this, t = e._self._c, a = e._self._setupProxy;
-  return t("aside", { staticClass: "wz-sidebar", class: { "wz-sidebar--collapsed": a.visuallyCollapsed }, on: { mouseenter: function(s) {
-    a.isHovered = !0;
-  }, mouseleave: function(s) {
-    a.isHovered = !1;
-  } } }, [t("div", { staticClass: "wz-sidebar-logo" }, [e._t("logo", function() {
-    return [e.logoSrc || e.logoMiniSrc ? [a.visuallyCollapsed && e.logoMiniSrc ? t("img", { staticClass: "wz-sidebar-logo-img-mini", attrs: { src: e.logoMiniSrc, alt: "Mini Logo" } }) : !a.visuallyCollapsed && e.logoSrc ? t("img", { staticClass: "wz-sidebar-logo-img", attrs: { src: e.logoSrc, alt: "Logo" } }) : e._e()] : [e.logoIconHtml ? t("span", { staticClass: "wz-sidebar-logo-icon", domProps: { innerHTML: e._s(e.logoIconHtml) } }) : e._e(), t("span", { directives: [{ name: "show", rawName: "v-show", value: !a.visuallyCollapsed, expression: "!visuallyCollapsed" }], staticClass: "wz-sidebar-logo-text" }, [e._v(e._s(e.logoText))])]];
-  })], 2), t("nav", { staticClass: "wz-sidebar-nav" }, [e._l(e.items, function(s, l) {
-    return [s.type === "group" ? t("div", { directives: [{ name: "show", rawName: "v-show", value: !a.visuallyCollapsed, expression: "!visuallyCollapsed" }], key: `group-${l}`, staticClass: "wz-sidebar-group" }, [e._v(" " + e._s(s.label) + " ")]) : t("div", { key: s.key || l, staticClass: "wz-sidebar-item-wrapper" }, [t("div", { staticClass: "wz-sidebar-item", class: { "wz-sidebar-item--active": a.isActive(s) }, attrs: { title: a.visuallyCollapsed ? s.label : null }, on: { click: function(o) {
-      return a.handleClick(s);
-    } } }, [t("span", { staticClass: "wz-sidebar-icon" }, [e._t("icon", function() {
-      return [s.icon ? t("i", { class: s.icon, staticStyle: { "font-size": "1.125rem" } }) : s.iconHtml ? t("span", { domProps: { innerHTML: e._s(s.iconHtml) } }) : t("i", { staticClass: "ri-checkbox-blank-circle-line", staticStyle: { "font-size": "10px" } })];
-    }, { item: s })], 2), t("span", { directives: [{ name: "show", rawName: "v-show", value: !a.visuallyCollapsed, expression: "!visuallyCollapsed" }], staticClass: "wz-sidebar-label" }, [e._v(e._s(s.label))]), a.hasChildren(s) ? t("span", { directives: [{ name: "show", rawName: "v-show", value: !a.visuallyCollapsed, expression: "!visuallyCollapsed" }], staticClass: "wz-sidebar-arrow", class: { "wz-sidebar-arrow--open": a.isOpen(s) } }, [t("i", { staticClass: "ri-arrow-right-s-line", staticStyle: { "font-size": "1.125rem" } })]) : e._e()]), t("div", { directives: [{ name: "show", rawName: "v-show", value: !a.visuallyCollapsed, expression: "!visuallyCollapsed" }], staticClass: "wz-sidebar-children-wrapper", class: { "is-open": a.hasChildren(s) && a.isOpen(s) } }, [t("div", { staticClass: "wz-sidebar-children-inner" }, [a.hasChildren(s) ? t("div", { staticClass: "wz-sidebar-children" }, e._l(s.children, function(o) {
-      return t("div", { key: o.key, staticClass: "wz-sidebar-child-item", class: { "wz-sidebar-child-item--active": a.isActive(o) }, on: { click: function(d) {
-        return a.handleChildClick(o);
-      } } }, [t("span", { staticClass: "wz-sidebar-label" }, [e._v(e._s(o.label))]), a.hasChildren(o) ? t("span", { staticClass: "wz-sidebar-arrow" }, [t("i", { staticClass: "ri-arrow-right-s-line", staticStyle: { "font-size": "1rem" } })]) : e._e()]);
-    }), 0) : e._e()])])])];
-  })], 2)]);
-}, N = [], O = /* @__PURE__ */ f(
-  H,
-  L,
-  N,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const T = O.exports, D = {
-  __name: "WzHeader",
-  props: {
-    /**
-     * User object with name and optional avatar URL.
-     */
-    user: {
-      type: Object,
-      default: () => ({ name: "User", avatar: null })
-    },
-    /**
-     * Number shown on the notification badge. 0 hides the badge.
-     */
-    notificationCount: {
-      type: Number,
-      default: 0
-    },
-    /**
-     * If true, changes the menu icon to a close (X) state.
-     */
-    collapsed: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Action items array of objects { key, icon, badge, badgeCount? }
-     */
-    actionItems: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * Dropdown menu items for the user { key, label, icon, isLogout? }
-     */
-    userMenuItems: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * Subtitle to show below the username inside the dropdown
-     */
-    userSubtitle: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Main logo image source to display in header (mobile only)
-     */
-    logoSrc: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Layout hierarchy style ('vertical' | 'horizontal')
-     */
-    layoutMode: {
-      type: String,
-      default: "vertical"
-    }
-  },
-  emits: ["menu-toggle", "search", "notifications", "settings", "user-click", "action-click", "user-menu-click"],
-  setup(n, { emit: e }) {
-    const t = n, a = (c) => c ? c.split(" ").map((p) => p[0]).slice(0, 2).join("").toUpperCase() : "?", s = v(!1), l = v(null), o = () => {
-      s.value = !s.value, e("user-click");
-    }, d = (c) => {
-      e("user-menu-click", c), s.value = !1;
-    }, r = (c) => {
-      l.value && !l.value.contains(c.target) && (s.value = !1);
-    };
-    return C(() => {
-      document.addEventListener("click", r);
-    }), g(() => {
-      document.removeEventListener("click", r);
-    }), { __sfc: !0, props: t, emit: e, initials: a, isUserMenuOpen: s, userMenuContainer: l, toggleUserMenu: o, handleUserItemClick: d, handleClickOutside: r };
-  }
-};
-var I = function() {
-  var e = this, t = e._self._c, a = e._self._setupProxy;
-  return t("header", { staticClass: "wz-header", class: { "wz-header--horizontal": e.layoutMode === "horizontal" } }, [t("div", { staticClass: "wz-header-left" }, [e.layoutMode === "vertical" ? t("button", { staticClass: "wz-header-action wz-header-icon-desktop", attrs: { title: "Toggle Menu" }, on: { click: function(s) {
-    return e.$emit("menu-toggle");
-  } } }, [t("i", { class: e.collapsed ? "ri-menu-unfold-line" : "ri-menu-fold-line" })]) : e._e(), t("button", { staticClass: "wz-header-action wz-header-icon-mobile", staticStyle: { display: "none" }, attrs: { title: "Toggle Menu" }, on: { click: function(s) {
-    return e.$emit("menu-toggle");
-  } } }, [t("i", { staticClass: "ri-menu-2-line" })]), t("div", { staticClass: "wz-header-dynamic-logo", class: e.layoutMode === "horizontal" ? "wz-header-logo-always-visible" : "wz-header-mobile-logo" }, [e.logoSrc ? t("img", { staticClass: "wz-header-dynamic-logo-img", attrs: { src: e.logoSrc, alt: "Logo" } }) : e._e()]), e._t("left")], 2), t("div", { staticClass: "wz-header-right" }, [e._t("actions", function() {
-    return [e.actionItems && e.actionItems.length ? [e._l(e.actionItems, function(s) {
-      return [s.badge ? t("div", { key: "badge-" + s.key, staticClass: "wz-header-badge" }, [t("button", { staticClass: "wz-header-action", attrs: { title: s.key }, on: { click: function(l) {
-        return a.emit("action-click", s);
-      } } }, [t("i", { class: s.icon, staticStyle: { "font-size": "1.125rem" } })]), s.badgeCount || e.notificationCount > 0 ? t("span", { staticClass: "wz-header-badge-dot" }, [e._v(" " + e._s(s.badgeCount || e.notificationCount > 9 ? "9+" : s.badgeCount || e.notificationCount) + " ")]) : e._e()]) : t("button", { key: s.key, staticClass: "wz-header-action", attrs: { title: s.key }, on: { click: function(l) {
-        return a.emit("action-click", s);
-      } } }, [t("i", { class: s.icon, staticStyle: { "font-size": "1.125rem" } })])];
-    })] : [t("button", { staticClass: "wz-header-action", attrs: { title: "Search" }, on: { click: function(s) {
-      return a.emit("search");
-    } } }, [t("i", { staticClass: "ri-search-line", staticStyle: { "font-size": "1.125rem" } })]), e._m(0), e._m(1), t("div", { staticClass: "wz-header-badge" }, [t("button", { staticClass: "wz-header-action", attrs: { title: "Notifications" }, on: { click: function(s) {
-      return a.emit("notifications");
-    } } }, [t("i", { staticClass: "ri-notification-3-line", staticStyle: { "font-size": "1.125rem" } })]), e.notificationCount > 0 ? t("span", { staticClass: "wz-header-badge-dot" }, [e._v(" " + e._s(e.notificationCount > 9 ? "9+" : e.notificationCount) + " ")]) : e._e()]), e._m(2), e._m(3)]];
-  }), t("div", { staticClass: "wz-header-divider" }), t("div", { ref: "userMenuContainer", staticClass: "wz-header-user-wrapper" }, [e._t("user", function() {
-    return [t("div", { staticClass: "wz-header-user", on: { click: function(s) {
-      return s.stopPropagation(), a.toggleUserMenu.apply(null, arguments);
-    } } }, [e.user.avatar ? t("img", { staticClass: "wz-header-user-avatar", attrs: { src: e.user.avatar, alt: e.user.name } }) : t("div", { staticClass: "wz-header-user-avatar-placeholder" }, [e._v(" " + e._s(a.initials(e.user.name)) + " ")]), t("span", { staticClass: "wz-header-user-name" }, [e._v(e._s(e.user.name))])])];
-  }), e.userMenuItems && e.userMenuItems.length > 0 ? t("div", { directives: [{ name: "show", rawName: "v-show", value: a.isUserMenuOpen, expression: "isUserMenuOpen" }], staticClass: "wz-header-dropdown" }, [t("div", { staticClass: "wz-header-dropdown-header" }, [t("div", { staticClass: "wz-header-dropdown-title" }, [e._v(e._s(e.user.name))]), e.userSubtitle ? t("div", { staticClass: "wz-header-dropdown-subtitle" }, [e._v(e._s(e.userSubtitle))]) : e._e()]), t("div", { staticClass: "wz-header-dropdown-body" }, e._l(e.userMenuItems, function(s, l) {
-    return t("div", { key: l, staticClass: "wz-header-dropdown-item", class: { "wz-header-dropdown-item--logout": s.isLogout }, on: { click: function(o) {
-      return a.handleUserItemClick(s);
-    } } }, [s.icon && !s.isLogout ? t("i", { class: s.icon }) : e._e(), t("span", [e._v(e._s(s.label))])]);
-  }), 0)]) : e._e()], 2), t("button", { staticClass: "wz-header-action", attrs: { title: "Settings" }, on: { click: function(s) {
-    return a.emit("settings");
-  } } }, [t("i", { staticClass: "ri-settings-3-line wz-anim-spin", staticStyle: { "font-size": "1.125rem", display: "inline-block" } })])], 2)]);
-}, R = [function() {
-  var n = this, e = n._self._c;
-  return n._self._setupProxy, e("button", { staticClass: "wz-header-action", attrs: { title: "Language" } }, [e("i", { staticClass: "ri-global-line", staticStyle: { "font-size": "1.125rem" } })]);
-}, function() {
-  var n = this, e = n._self._c;
-  return n._self._setupProxy, e("button", { staticClass: "wz-header-action", attrs: { title: "Toggle dark mode" } }, [e("i", { staticClass: "ri-moon-line", staticStyle: { "font-size": "1.125rem" } })]);
-}, function() {
-  var n = this, e = n._self._c;
-  return n._self._setupProxy, e("button", { staticClass: "wz-header-action", attrs: { title: "Calendar" } }, [e("i", { staticClass: "ri-calendar-line", staticStyle: { "font-size": "1.125rem" } })]);
-}, function() {
-  var n = this, e = n._self._c;
-  return n._self._setupProxy, e("button", { staticClass: "wz-header-action", attrs: { title: "Fullscreen" } }, [e("i", { staticClass: "ri-fullscreen-line", staticStyle: { "font-size": "1.125rem" } })]);
-}], U = /* @__PURE__ */ f(
-  D,
-  I,
-  R,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const B = U.exports, A = {
-  __name: "WzSettingsPanel",
-  props: {
-    /**
-     * Defines if the Settings Drawer is currently open
-     */
-    isOpen: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Title shown at the top of the Switcher
-     */
-    title: {
-      type: String,
-      default: "Switcher"
-    },
-    /**
-     * Active values mapped by ID. e.g. { themeMode: 'light', navigationStyle: 'vertical' }
-     */
-    value: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * Array of extra dynamic setting blocks to inject globally below the defaults
-     */
-    extraSettings: {
-      type: Array,
-      default: () => []
-    }
-  },
-  emits: ["close", "input", "setting-change"],
-  setup(n, { emit: e }) {
-    const t = n, a = [
-      {
-        id: "themeMode",
-        title: "Theme Color Mode:",
-        options: [
-          { value: "light", label: "Light" },
-          { value: "dark", label: "Dark" }
-        ]
-      },
-      {
-        id: "navigationStyle",
-        title: "Navigation Styles:",
-        options: [
-          { value: "vertical", label: "Vertical" },
-          { value: "horizontal", label: "Horizontal" }
-        ]
-      }
-    ], s = w(() => [...a, ...t.extraSettings]);
-    return { __sfc: !0, props: t, emit: e, baseSettings: a, allSettings: s, handleSelection: (d, r) => {
-      const c = { ...t.value, [d]: r };
-      e("input", c), e("setting-change", { id: d, value: r });
-    }, closePanel: () => {
-      e("close");
-    } };
-  }
-};
-var F = function() {
-  var e = this, t = e._self._c, a = e._self._setupProxy;
-  return t("div", { staticClass: "wz-settings", class: { "wz-settings--open": e.isOpen } }, [t("div", { staticClass: "wz-settings-overlay", on: { click: a.closePanel } }), t("aside", { staticClass: "wz-settings-panel" }, [t("div", { staticClass: "wz-settings-header" }, [t("h3", { staticClass: "wz-settings-title" }, [e._v(e._s(e.title))]), t("button", { staticClass: "wz-settings-close", attrs: { title: "Close Settings" }, on: { click: a.closePanel } }, [t("i", { staticClass: "ri-close-circle-line" })])]), e._m(0), t("div", { staticClass: "wz-settings-body" }, [e._l(a.allSettings, function(s) {
-    return [t("div", { staticClass: "wz-settings-section" }, [t("h4", { staticClass: "wz-settings-section-title" }, [e._v(e._s(s.title))]), t("div", { staticClass: "wz-settings-radio-group" }, e._l(s.options, function(l) {
-      return t("label", { key: l.value, staticClass: "wz-settings-radio-label" }, [t("div", { staticClass: "wz-settings-radio-circle", class: { "wz-settings-radio-circle--active": e.value[s.id] === l.value } }, [t("span", { directives: [{ name: "show", rawName: "v-show", value: e.value[s.id] === l.value, expression: "value[setting.id] === opt.value" }], staticClass: "wz-settings-radio-dot" })]), t("input", { staticClass: "wz-settings-radio-native", attrs: { type: "radio", name: s.id }, domProps: { value: l.value, checked: e.value[s.id] === l.value }, on: { change: function(o) {
-        return a.handleSelection(s.id, l.value);
-      } } }), t("span", { staticClass: "wz-settings-radio-text" }, [e._v(e._s(l.label))])]);
-    }), 0)])];
-  })], 2)])]);
-}, K = [function() {
-  var n = this, e = n._self._c;
-  return n._self._setupProxy, e("div", { staticClass: "wz-settings-tabs" }, [e("div", { staticClass: "wz-settings-tab wz-settings-tab--active" }, [n._v("Theme Style")])]);
-}], E = /* @__PURE__ */ f(
-  A,
-  F,
-  K,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const V = E.exports, j = {
-  __name: "WzHorizontalNav",
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    activeKey: {
-      type: String,
-      default: null
-    }
-  },
-  emits: ["item-click"],
-  setup(n, { emit: e }) {
-    const t = n, a = v(null), s = (i) => {
-      a.value && a.value.scrollBy({ left: i * 250, behavior: "smooth" });
-    }, l = v(null), o = v({}), d = (i, u) => {
-      if (!i.children || i.children.length === 0)
-        return;
-      const h = u.currentTarget.getBoundingClientRect();
-      o.value = {
-        top: h.bottom + "px",
-        left: h.left + "px"
-      }, l.value = i.key;
-    }, r = () => {
-      l.value = null;
-    }, c = (i) => {
-      i.children && i.children.length > 0 || e("item-click", i);
-    }, p = (i) => {
-      e("item-click", i), l.value = null;
-    }, _ = () => {
-      l.value = null;
-    };
-    return C(() => {
-      document.addEventListener("click", _);
-    }), g(() => {
-      document.removeEventListener("click", _);
-    }), { __sfc: !0, props: t, emit: e, trackWrapper: a, scroll: s, openDropdown: l, dropdownStyle: o, showDropdown: d, hideDropdown: r, handleClick: c, handleChildClick: p, handleDocClick: _ };
-  }
-};
-var X = function() {
-  var e = this, t = e._self._c, a = e._self._setupProxy;
-  return t("div", { staticClass: "wz-horizontal-nav" }, [t("button", { staticClass: "wz-horizontal-nav-arrow", on: { click: function(s) {
-    return a.scroll(-1);
-  } } }, [t("i", { staticClass: "ri-arrow-left-s-line" })]), t("div", { ref: "trackWrapper", staticClass: "wz-horizontal-nav-track-wrapper" }, [t("div", { staticClass: "wz-horizontal-nav-track" }, [e._l(e.items, function(s, l) {
-    return [s.type !== "group" ? t("div", { key: s.key || l, staticClass: "wz-horizontal-nav-item", class: { "wz-horizontal-nav-item--active": s.key === e.activeKey || s.children && s.children.some((o) => o.key === e.activeKey) }, on: { click: function(o) {
-      return o.stopPropagation(), a.handleClick(s);
-    }, mouseenter: function(o) {
-      return a.showDropdown(s, o);
-    }, mouseleave: a.hideDropdown } }, [s.icon ? t("i", { class: s.icon }) : e._e(), t("span", [e._v(e._s(s.label))]), s.children && s.children.length > 0 ? t("i", { staticClass: "ri-arrow-down-s-line wz-horizontal-nav-chevron" }) : e._e()]) : e._e()];
-  })], 2)]), t("button", { staticClass: "wz-horizontal-nav-arrow", on: { click: function(s) {
-    return a.scroll(1);
-  } } }, [t("i", { staticClass: "ri-arrow-right-s-line" })]), a.openDropdown ? t("div", { staticClass: "wz-horizontal-nav-dropdown", style: a.dropdownStyle, on: { mouseenter: function(s) {
-    a.openDropdown = a.openDropdown;
-  }, mouseleave: a.hideDropdown } }, [e._l(e.items, function(s) {
-    return [s.key === a.openDropdown && s.children ? e._l(s.children, function(l) {
-      return t("div", { key: l.key, staticClass: "wz-horizontal-dropdown-child", class: { "wz-horizontal-dropdown-child--active": l.key === e.activeKey }, on: { click: function(o) {
-        return o.stopPropagation(), a.handleChildClick(l);
-      } } }, [e._v(" " + e._s(l.label) + " ")]);
-    }) : e._e()];
-  })], 2) : e._e()]);
-}, q = [], G = /* @__PURE__ */ f(
-  j,
-  X,
-  q,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const J = G.exports, Q = {
-  WzButton: S,
-  WzSidebar: T,
-  WzHeader: B,
-  WzLayout: W,
-  WzSettingsPanel: V,
-  WzHorizontalNav: J
-}, z = (n) => {
-  Object.entries(Q).forEach(([e, t]) => {
-    n.component(e, t);
-  });
-};
-typeof window < "u" && window.Vue && z(window.Vue);
-const Z = { install: z };
-export {
-  S as WzButton,
-  B as WzHeader,
-  J as WzHorizontalNav,
-  W as WzLayout,
-  V as WzSettingsPanel,
-  T as WzSidebar,
-  Z as default
-};
+import { computed as h, ref as v, onMounted as w, onBeforeUnmount as z } from "vue";
+function f(i, e, t, a, s, l, o, u) {
+  var c = typeof i == "function" ? i.options : i;
+  e && (c.render = e, c.staticRenderFns = t, c._compiled = !0), a && (c.functional = !0), l && (c._scopeId = "data-v-" + l);
+  var r;
+  if (o ? (r = function(n) {
+    n = n || // cached call
+    this.$vnode && this.$vnode.ssrContext || // stateful
+    this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !n && typeof __VUE_SSR_CONTEXT__ < "u" && (n = __VUE_SSR_CONTEXT__), s && s.call(this, n), n && n._registeredComponents && n._registeredComponents.add(o);
+  }, c._ssrRegister = r) : s && (r = u ? function() {
+    s.call(
+      this,
+      (c.functional ? this.parent : this).$root.$options.shadowRoot
+    );
+  } : s), r)
+    if (c.functional) {
+      c._injectStyles = r;
+      var _ = c.render;
+      c.render = function(d, C) {
+        return r.call(C), _(d, C);
+      };
+    } else {
+      var p = c.beforeCreate;
+      c.beforeCreate = p ? [].concat(p, r) : [r];
+    }
+  return {
+    exports: i,
+    options: c
+  };
+}
+const y = {
+  __name: "WzButton",
+  props: {
+    /**
+     * Visual style variant of the button.
+     * @values primary, secondary, success, danger, warning, info, light, dark, link, outline
+     */
+    variant: {
+      type: String,
+      default: "primary",
+      validator: (i) => ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark", "link", "outline"].includes(i)
+    },
+    /**
+     * Size of the button.
+     * @values sm, md, lg
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (i) => ["sm", "md", "lg"].includes(i)
+    },
+    /**
+     * Whether the button is disabled.
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If true, renders as a block-level button (full width).
+     */
+    block: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click"],
+  setup(i, { emit: e }) {
+    const t = i, a = h(() => [
+      "wz-btn",
+      `wz-btn-${t.variant}`,
+      `wz-btn-${t.size}`,
+      { "wz-btn-block": t.block }
+    ]);
+    return { __sfc: !0, props: t, emit: e, classes: a, handleClick: (l) => {
+      t.disabled || e("click", l);
+    } };
+  }
+};
+var m = function() {
+  var e = this, t = e._self._c, a = e._self._setupProxy;
+  return t("button", { class: a.classes, attrs: { disabled: e.disabled }, on: { click: a.handleClick } }, [e._t("default")], 2);
+}, b = [], k = /* @__PURE__ */ f(
+  y,
+  m,
+  b,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const S = k.exports, $ = {
+  __name: "WzLayout",
+  props: {
+    /**
+     * Whether the sidebar is collapsed initially.
+     */
+    defaultCollapsed: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Defines layout navigation architecture ('vertical' | 'horizontal')
+     */
+    navigationStyle: {
+      type: String,
+      default: "vertical"
+    },
+    /**
+     * Layout visual theme ('light' | 'dark')
+     */
+    theme: {
+      type: String,
+      default: "light"
+    }
+  },
+  setup(i) {
+    const e = i, t = v(e.defaultCollapsed), a = () => {
+      t.value = !t.value;
+    };
+    return w(() => {
+      typeof window < "u" && window.innerWidth <= 768 && (t.value = !0);
+    }), { __sfc: !0, props: e, isCollapsed: t, toggleSidebar: a };
+  }
+};
+var x = function() {
+  var e = this, t = e._self._c, a = e._self._setupProxy;
+  return t("div", { staticClass: "wz-admin-layout", class: "is-" + e.navigationStyle, attrs: { "data-theme": e.theme } }, [t("div", { staticClass: "wz-admin-layout-sidebar-container" }, [a.isCollapsed ? e._e() : t("div", { staticClass: "wz-admin-layout-backdrop", on: { click: a.toggleSidebar } }), e._t("sidebar", null, { collapsed: a.isCollapsed })], 2), t("div", { staticClass: "wz-admin-layout-main" }, [t("div", { staticClass: "wz-admin-layout-header-container" }, [e._t("header", null, { toggleSidebar: a.toggleSidebar, collapsed: a.isCollapsed })], 2), e.navigationStyle === "horizontal" ? t("div", { staticClass: "wz-admin-layout-horizontal-nav-container" }, [e._t("horizontal-nav")], 2) : e._e(), t("main", { staticClass: "wz-admin-layout-content" }, [e._t("default")], 2)])]);
+}, M = [], P = /* @__PURE__ */ f(
+  $,
+  x,
+  M,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const W = P.exports, H = {
+  __name: "WzSidebar",
+  props: {
+    /**
+     * Array of nav items. Each item is either:
+     * - Nav item:    { key, label, iconHtml, children[] }
+     * - Group label: { type: 'group', label }
+     */
+    items: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Key of the currently active item.
+     */
+    activeKey: {
+      type: String,
+      default: null
+    },
+    /**
+     * Main logo image source.
+     */
+    logoSrc: {
+      type: String,
+      default: null
+    },
+    /**
+     * Mini logo image source to show when collapsed.
+     */
+    logoMiniSrc: {
+      type: String,
+      default: null
+    },
+    /**
+     * Brand name shown in the logo area.
+     */
+    logoText: {
+      type: String,
+      default: "Admin"
+    },
+    /**
+     * SVG HTML string for the logo icon.
+     */
+    logoIconHtml: {
+      type: String,
+      default: null
+    },
+    /**
+     * Whether the sidebar is collapsed (mini mode).
+     */
+    collapsed: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["item-click"],
+  setup(i, { emit: e }) {
+    const t = i, a = v(/* @__PURE__ */ new Set()), s = v(!1), l = h(() => t.collapsed && !s.value), o = (n) => n.key === t.activeKey, u = (n) => n.children && n.children.length > 0, c = (n) => a.value.has(n.key), r = (n) => {
+      if (!u(n) || l.value)
+        return;
+      const d = new Set(a.value);
+      d.has(n.key) ? d.delete(n.key) : d.add(n.key), a.value = d;
+    };
+    return { __sfc: !0, props: t, emit: e, openKeys: a, isHovered: s, visuallyCollapsed: l, isActive: o, hasChildren: u, isOpen: c, toggle: r, handleClick: (n) => {
+      if (l.value) {
+        e("item-click", n);
+        return;
+      }
+      u(n) ? r(n) : e("item-click", n);
+    }, handleChildClick: (n) => {
+      e("item-click", n);
+    } };
+  }
+};
+var N = function() {
+  var e = this, t = e._self._c, a = e._self._setupProxy;
+  return t("aside", { staticClass: "wz-sidebar", class: { "wz-sidebar--collapsed": a.visuallyCollapsed }, on: { mouseenter: function(s) {
+    a.isHovered = !0;
+  }, mouseleave: function(s) {
+    a.isHovered = !1;
+  } } }, [t("div", { staticClass: "wz-sidebar-logo" }, [e._t("logo", function() {
+    return [e.logoSrc || e.logoMiniSrc ? [a.visuallyCollapsed && e.logoMiniSrc ? t("img", { staticClass: "wz-sidebar-logo-img-mini", attrs: { src: e.logoMiniSrc, alt: "Mini Logo" } }) : !a.visuallyCollapsed && e.logoSrc ? t("img", { staticClass: "wz-sidebar-logo-img", attrs: { src: e.logoSrc, alt: "Logo" } }) : e._e()] : [e.logoIconHtml ? t("span", { staticClass: "wz-sidebar-logo-icon", domProps: { innerHTML: e._s(e.logoIconHtml) } }) : e._e(), t("span", { directives: [{ name: "show", rawName: "v-show", value: !a.visuallyCollapsed, expression: "!visuallyCollapsed" }], staticClass: "wz-sidebar-logo-text" }, [e._v(e._s(e.logoText))])]];
+  })], 2), t("nav", { staticClass: "wz-sidebar-nav" }, [e._l(e.items, function(s, l) {
+    return [s.type === "group" ? t("div", { directives: [{ name: "show", rawName: "v-show", value: !a.visuallyCollapsed, expression: "!visuallyCollapsed" }], key: `group-${l}`, staticClass: "wz-sidebar-group" }, [e._v(" " + e._s(s.label) + " ")]) : t("div", { key: s.key || l, staticClass: "wz-sidebar-item-wrapper" }, [t("div", { staticClass: "wz-sidebar-item", class: { "wz-sidebar-item--active": a.isActive(s) }, attrs: { title: a.visuallyCollapsed ? s.label : null }, on: { click: function(o) {
+      return a.handleClick(s);
+    } } }, [t("span", { staticClass: "wz-sidebar-icon" }, [e._t("icon", function() {
+      return [s.icon ? t("i", { class: s.icon, staticStyle: { "font-size": "1.125rem" } }) : s.iconHtml ? t("span", { domProps: { innerHTML: e._s(s.iconHtml) } }) : t("i", { staticClass: "ri-checkbox-blank-circle-line", staticStyle: { "font-size": "10px" } })];
+    }, { item: s })], 2), t("span", { directives: [{ name: "show", rawName: "v-show", value: !a.visuallyCollapsed, expression: "!visuallyCollapsed" }], staticClass: "wz-sidebar-label" }, [e._v(e._s(s.label))]), a.hasChildren(s) ? t("span", { directives: [{ name: "show", rawName: "v-show", value: !a.visuallyCollapsed, expression: "!visuallyCollapsed" }], staticClass: "wz-sidebar-arrow", class: { "wz-sidebar-arrow--open": a.isOpen(s) } }, [t("i", { staticClass: "ri-arrow-right-s-line", staticStyle: { "font-size": "1.125rem" } })]) : e._e()]), t("div", { directives: [{ name: "show", rawName: "v-show", value: !a.visuallyCollapsed, expression: "!visuallyCollapsed" }], staticClass: "wz-sidebar-children-wrapper", class: { "is-open": a.hasChildren(s) && a.isOpen(s) } }, [t("div", { staticClass: "wz-sidebar-children-inner" }, [a.hasChildren(s) ? t("div", { staticClass: "wz-sidebar-children" }, e._l(s.children, function(o) {
+      return t("div", { key: o.key, staticClass: "wz-sidebar-child-item", class: { "wz-sidebar-child-item--active": a.isActive(o) }, on: { click: function(u) {
+        return a.handleChildClick(o);
+      } } }, [t("span", { staticClass: "wz-sidebar-label" }, [e._v(e._s(o.label))]), a.hasChildren(o) ? t("span", { staticClass: "wz-sidebar-arrow" }, [t("i", { staticClass: "ri-arrow-right-s-line", staticStyle: { "font-size": "1rem" } })]) : e._e()]);
+    }), 0) : e._e()])])])];
+  })], 2)]);
+}, O = [], L = /* @__PURE__ */ f(
+  H,
+  N,
+  O,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const T = L.exports, I = {
+  __name: "WzHeader",
+  props: {
+    /**
+     * User object with name and optional avatar URL.
+     */
+    user: {
+      type: Object,
+      default: () => ({ name: "User", avatar: null })
+    },
+    /**
+     * Number shown on the notification badge. 0 hides the badge.
+     */
+    notificationCount: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * If true, changes the menu icon to a close (X) state.
+     */
+    collapsed: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Action items array of objects { key, icon, badge, badgeCount? }
+     */
+    actionItems: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Dropdown menu items for the user { key, label, icon, isLogout? }
+     */
+    userMenuItems: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Subtitle to show below the username inside the dropdown
+     */
+    userSubtitle: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Main logo image source to display in header (mobile only)
+     */
+    logoSrc: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Layout hierarchy style ('vertical' | 'horizontal')
+     */
+    layoutMode: {
+      type: String,
+      default: "vertical"
+    }
+  },
+  emits: ["menu-toggle", "search", "notifications", "settings", "user-click", "action-click", "user-menu-click"],
+  setup(i, { emit: e }) {
+    const t = i, a = (r) => r ? r.split(" ").map((_) => _[0]).slice(0, 2).join("").toUpperCase() : "?", s = v(!1), l = v(null), o = () => {
+      s.value = !s.value, e("user-click");
+    }, u = (r) => {
+      e("user-menu-click", r), s.value = !1;
+    }, c = (r) => {
+      l.value && !l.value.contains(r.target) && (s.value = !1);
+    };
+    return w(() => {
+      document.addEventListener("click", c);
+    }), z(() => {
+      document.removeEventListener("click", c);
+    }), { __sfc: !0, props: t, emit: e, initials: a, isUserMenuOpen: s, userMenuContainer: l, toggleUserMenu: o, handleUserItemClick: u, handleClickOutside: c };
+  }
+};
+var U = function() {
+  var e = this, t = e._self._c, a = e._self._setupProxy;
+  return t("header", { staticClass: "wz-header", class: { "wz-header--horizontal": e.layoutMode === "horizontal" } }, [t("div", { staticClass: "wz-header-left" }, [e.layoutMode === "vertical" ? t("button", { staticClass: "wz-header-action wz-header-icon-desktop", attrs: { title: "Toggle Menu" }, on: { click: function(s) {
+    return e.$emit("menu-toggle");
+  } } }, [t("i", { class: e.collapsed ? "ri-menu-unfold-line" : "ri-menu-fold-line" })]) : e._e(), t("button", { staticClass: "wz-header-action wz-header-icon-mobile", staticStyle: { display: "none" }, attrs: { title: "Toggle Menu" }, on: { click: function(s) {
+    return e.$emit("menu-toggle");
+  } } }, [t("i", { staticClass: "ri-menu-2-line" })]), t("div", { staticClass: "wz-header-dynamic-logo", class: e.layoutMode === "horizontal" ? "wz-header-logo-always-visible" : "wz-header-mobile-logo" }, [e.logoSrc ? t("img", { staticClass: "wz-header-dynamic-logo-img", attrs: { src: e.logoSrc, alt: "Logo" } }) : e._e()]), e._t("left")], 2), t("div", { staticClass: "wz-header-right" }, [e._t("actions", function() {
+    return [e.actionItems && e.actionItems.length ? [e._l(e.actionItems, function(s) {
+      return [s.badge ? t("div", { key: "badge-" + s.key, staticClass: "wz-header-badge" }, [t("button", { staticClass: "wz-header-action", attrs: { title: s.key }, on: { click: function(l) {
+        return a.emit("action-click", s);
+      } } }, [t("i", { class: s.icon, staticStyle: { "font-size": "1.125rem" } })]), s.badgeCount || e.notificationCount > 0 ? t("span", { staticClass: "wz-header-badge-dot" }, [e._v(" " + e._s(s.badgeCount || e.notificationCount > 9 ? "9+" : s.badgeCount || e.notificationCount) + " ")]) : e._e()]) : t("button", { key: s.key, staticClass: "wz-header-action", attrs: { title: s.key }, on: { click: function(l) {
+        return a.emit("action-click", s);
+      } } }, [t("i", { class: s.icon, staticStyle: { "font-size": "1.125rem" } })])];
+    })] : [t("button", { staticClass: "wz-header-action", attrs: { title: "Search" }, on: { click: function(s) {
+      return a.emit("search");
+    } } }, [t("i", { staticClass: "ri-search-line", staticStyle: { "font-size": "1.125rem" } })]), e._m(0), e._m(1), t("div", { staticClass: "wz-header-badge" }, [t("button", { staticClass: "wz-header-action", attrs: { title: "Notifications" }, on: { click: function(s) {
+      return a.emit("notifications");
+    } } }, [t("i", { staticClass: "ri-notification-3-line", staticStyle: { "font-size": "1.125rem" } })]), e.notificationCount > 0 ? t("span", { staticClass: "wz-header-badge-dot" }, [e._v(" " + e._s(e.notificationCount > 9 ? "9+" : e.notificationCount) + " ")]) : e._e()]), e._m(2), e._m(3)]];
+  }), t("div", { staticClass: "wz-header-divider" }), t("div", { ref: "userMenuContainer", staticClass: "wz-header-user-wrapper" }, [e._t("user", function() {
+    return [t("div", { staticClass: "wz-header-user", on: { click: function(s) {
+      return s.stopPropagation(), a.toggleUserMenu.apply(null, arguments);
+    } } }, [e.user.avatar ? t("img", { staticClass: "wz-header-user-avatar", attrs: { src: e.user.avatar, alt: e.user.name } }) : t("div", { staticClass: "wz-header-user-avatar-placeholder" }, [e._v(" " + e._s(a.initials(e.user.name)) + " ")]), t("span", { staticClass: "wz-header-user-name" }, [e._v(e._s(e.user.name))])])];
+  }), e.userMenuItems && e.userMenuItems.length > 0 ? t("div", { directives: [{ name: "show", rawName: "v-show", value: a.isUserMenuOpen, expression: "isUserMenuOpen" }], staticClass: "wz-header-dropdown" }, [t("div", { staticClass: "wz-header-dropdown-header" }, [t("div", { staticClass: "wz-header-dropdown-title" }, [e._v(e._s(e.user.name))]), e.userSubtitle ? t("div", { staticClass: "wz-header-dropdown-subtitle" }, [e._v(e._s(e.userSubtitle))]) : e._e()]), t("div", { staticClass: "wz-header-dropdown-body" }, e._l(e.userMenuItems, function(s, l) {
+    return t("div", { key: l, staticClass: "wz-header-dropdown-item", class: { "wz-header-dropdown-item--logout": s.isLogout }, on: { click: function(o) {
+      return a.handleUserItemClick(s);
+    } } }, [s.icon && !s.isLogout ? t("i", { class: s.icon }) : e._e(), t("span", [e._v(e._s(s.label))])]);
+  }), 0)]) : e._e()], 2), t("button", { staticClass: "wz-header-action", attrs: { title: "Settings" }, on: { click: function(s) {
+    return a.emit("settings");
+  } } }, [t("i", { staticClass: "ri-settings-3-line wz-anim-spin", staticStyle: { "font-size": "1.125rem", display: "inline-block" } })])], 2)]);
+}, R = [function() {
+  var i = this, e = i._self._c;
+  return i._self._setupProxy, e("button", { staticClass: "wz-header-action", attrs: { title: "Language" } }, [e("i", { staticClass: "ri-global-line", staticStyle: { "font-size": "1.125rem" } })]);
+}, function() {
+  var i = this, e = i._self._c;
+  return i._self._setupProxy, e("button", { staticClass: "wz-header-action", attrs: { title: "Toggle dark mode" } }, [e("i", { staticClass: "ri-moon-line", staticStyle: { "font-size": "1.125rem" } })]);
+}, function() {
+  var i = this, e = i._self._c;
+  return i._self._setupProxy, e("button", { staticClass: "wz-header-action", attrs: { title: "Calendar" } }, [e("i", { staticClass: "ri-calendar-line", staticStyle: { "font-size": "1.125rem" } })]);
+}, function() {
+  var i = this, e = i._self._c;
+  return i._self._setupProxy, e("button", { staticClass: "wz-header-action", attrs: { title: "Fullscreen" } }, [e("i", { staticClass: "ri-fullscreen-line", staticStyle: { "font-size": "1.125rem" } })]);
+}], A = /* @__PURE__ */ f(
+  I,
+  U,
+  R,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const B = A.exports, F = {
+  __name: "WzSettingsPanel",
+  props: {
+    /**
+     * Defines if the Settings Drawer is currently open
+     */
+    isOpen: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Title shown at the top of the Switcher
+     */
+    title: {
+      type: String,
+      default: "Switcher"
+    },
+    /**
+     * Active values mapped by ID. e.g. { themeMode: 'light', navigationStyle: 'vertical' }
+     */
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Array of extra dynamic setting blocks to inject globally below the defaults
+     */
+    extraSettings: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["close", "input", "setting-change"],
+  setup(i, { emit: e }) {
+    const t = i, a = [
+      {
+        id: "themeMode",
+        title: "Theme Color Mode:",
+        options: [
+          { value: "light", label: "Light" },
+          { value: "dark", label: "Dark" }
+        ]
+      },
+      {
+        id: "navigationStyle",
+        title: "Navigation Styles:",
+        options: [
+          { value: "vertical", label: "Vertical" },
+          { value: "horizontal", label: "Horizontal" }
+        ]
+      }
+    ], s = h(() => [...a, ...t.extraSettings]);
+    return { __sfc: !0, props: t, emit: e, baseSettings: a, allSettings: s, handleSelection: (u, c) => {
+      const r = { ...t.value, [u]: c };
+      e("input", r), e("setting-change", { id: u, value: c });
+    }, closePanel: () => {
+      e("close");
+    } };
+  }
+};
+var K = function() {
+  var e = this, t = e._self._c, a = e._self._setupProxy;
+  return t("div", { staticClass: "wz-settings", class: { "wz-settings--open": e.isOpen } }, [t("div", { staticClass: "wz-settings-overlay", on: { click: a.closePanel } }), t("aside", { staticClass: "wz-settings-panel" }, [t("div", { staticClass: "wz-settings-header" }, [t("h3", { staticClass: "wz-settings-title" }, [e._v(e._s(e.title))]), t("button", { staticClass: "wz-settings-close", attrs: { title: "Close Settings" }, on: { click: a.closePanel } }, [t("i", { staticClass: "ri-close-circle-line" })])]), e._m(0), t("div", { staticClass: "wz-settings-body" }, [e._l(a.allSettings, function(s) {
+    return [t("div", { staticClass: "wz-settings-section" }, [t("h4", { staticClass: "wz-settings-section-title" }, [e._v(e._s(s.title))]), t("div", { staticClass: "wz-settings-radio-group" }, e._l(s.options, function(l) {
+      return t("label", { key: l.value, staticClass: "wz-settings-radio-label" }, [t("div", { staticClass: "wz-settings-radio-circle", class: { "wz-settings-radio-circle--active": e.value[s.id] === l.value } }, [t("span", { directives: [{ name: "show", rawName: "v-show", value: e.value[s.id] === l.value, expression: "value[setting.id] === opt.value" }], staticClass: "wz-settings-radio-dot" })]), t("input", { staticClass: "wz-settings-radio-native", attrs: { type: "radio", name: s.id }, domProps: { value: l.value, checked: e.value[s.id] === l.value }, on: { change: function(o) {
+        return a.handleSelection(s.id, l.value);
+      } } }), t("span", { staticClass: "wz-settings-radio-text" }, [e._v(e._s(l.label))])]);
+    }), 0)])];
+  })], 2)])]);
+}, X = [function() {
+  var i = this, e = i._self._c;
+  return i._self._setupProxy, e("div", { staticClass: "wz-settings-tabs" }, [e("div", { staticClass: "wz-settings-tab wz-settings-tab--active" }, [i._v("Theme Style")])]);
+}], V = /* @__PURE__ */ f(
+  F,
+  K,
+  X,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const E = V.exports, j = {
+  __name: "WzHorizontalNav",
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    activeKey: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ["item-click"],
+  setup(i, { emit: e }) {
+    const t = i, a = v(null), s = v(null), l = v(0);
+    return { __sfc: !0, props: t, emit: e, track: a, wrapper: s, translateX: l, scroll: (r) => {
+      if (!a.value || !s.value)
+        return;
+      const _ = a.value.scrollWidth, p = s.value.clientWidth;
+      if (_ <= p) {
+        l.value = 0;
+        return;
+      }
+      let n = l.value + r;
+      n > 0 && (n = 0);
+      const d = -(_ - p);
+      n < d && (n = d), l.value = n;
+    }, handleClick: (r) => {
+      e("item-click", r);
+    }, handleChildClick: (r) => {
+      e("item-click", r);
+    } };
+  }
+};
+var D = function() {
+  var e = this, t = e._self._c, a = e._self._setupProxy;
+  return t("div", { staticClass: "wz-horizontal-nav" }, [t("button", { staticClass: "wz-horizontal-nav-arrow wz-horizontal-nav-arrow--left", on: { click: function(s) {
+    return a.scroll(250);
+  } } }, [t("i", { staticClass: "ri-arrow-left-s-line" })]), t("div", { ref: "wrapper", staticClass: "wz-horizontal-nav-track-wrapper" }, [t("div", { ref: "track", staticClass: "wz-horizontal-nav-track", style: { transform: `translateX(${a.translateX}px)` } }, [e._l(e.items, function(s, l) {
+    return [s.type !== "group" ? t("div", { key: s.key || l, staticClass: "wz-horizontal-nav-item", class: { "wz-horizontal-nav-item--active": s.key === e.activeKey || s.children && s.children.some((o) => o.key === e.activeKey) }, on: { click: function(o) {
+      return a.handleClick(s);
+    } } }, [s.icon ? t("i", { class: s.icon }) : e._e(), t("span", [e._v(e._s(s.label))]), s.children && s.children.length > 0 ? t("i", { staticClass: "ri-arrow-down-s-line", staticStyle: { "margin-left": "4px", "margin-right": "0", "font-size": "1rem" } }) : e._e(), s.children && s.children.length > 0 ? t("div", { staticClass: "wz-horizontal-nav-dropdown" }, e._l(s.children, function(o) {
+      return t("div", { key: o.key, staticClass: "wz-horizontal-active-child", class: { "wz-horizontal-active-child--active": o.key === e.activeKey }, on: { click: function(u) {
+        return u.stopPropagation(), a.handleChildClick(o);
+      } } }, [e._v(" " + e._s(o.label) + " ")]);
+    }), 0) : e._e()]) : e._e()];
+  })], 2)]), t("button", { staticClass: "wz-horizontal-nav-arrow wz-horizontal-nav-arrow--right", on: { click: function(s) {
+    return a.scroll(-250);
+  } } }, [t("i", { staticClass: "ri-arrow-right-s-line" })])]);
+}, q = [], G = /* @__PURE__ */ f(
+  j,
+  D,
+  q,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const J = G.exports, Q = {
+  WzButton: S,
+  WzSidebar: T,
+  WzHeader: B,
+  WzLayout: W,
+  WzSettingsPanel: E,
+  WzHorizontalNav: J
+}, g = (i) => {
+  Object.entries(Q).forEach(([e, t]) => {
+    i.component(e, t);
+  });
+};
+typeof window < "u" && window.Vue && g(window.Vue);
+const Z = { install: g };
+export {
+  S as WzButton,
+  B as WzHeader,
+  J as WzHorizontalNav,
+  W as WzLayout,
+  E as WzSettingsPanel,
+  T as WzSidebar,
+  Z as default
+};