@owocow/saber-ui 0.1.11 → 0.1.13

package/dist/components/SaberAppSidebar.mjs

@@ -1,4 +1,4 @@
-import { _ as f } from "../SaberAppSidebar.vue_vue_type_script_setup_true_lang-CEWQTjEi.js";
+import { _ as f } from "../SaberAppSidebar.vue_vue_type_script_setup_true_lang-Cwuj9VNi.js";
 export {
   f as default
 };

package/dist/components/layout/SaberAppLayout.types.d.ts

@@ -0,0 +1,51 @@
+import { ButtonProps } from '@nuxt/ui/components/Button.vue';
+import { DrawerProps } from '@nuxt/ui/components/Drawer.vue';
+import { SaberNavigationSearchGroup, SaberNavigationSearchUI } from '../navigation/SaberAppSidebar.types';
+export type SaberAppLayoutMode = 'phone' | 'pad' | 'desktop';
+export type SaberAppLayoutMaxWidth = number | string | 'full' | false;
+export interface SaberAppLayoutProps {
+    title?: string;
+    description?: string;
+    maxWidth?: SaberAppLayoutMaxWidth;
+    navigationKey?: string | number;
+    sidebarWidth?: number | string;
+    phoneBreakpoint?: number;
+    padBreakpoint?: number;
+    searchGroups?: SaberNavigationSearchGroup[];
+    searchShortcut?: string;
+    searchLabel?: string;
+    menuOpenLabel?: string;
+    menuCloseLabel?: string;
+    menuOpenIcon?: string;
+    menuCloseIcon?: string;
+    ui?: SaberAppLayoutUI;
+}
+export interface SaberAppLayoutNavigationSlotContext {
+    mode: SaberAppLayoutMode;
+    drawerOpen: boolean;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    toggleDrawer: () => void;
+}
+export interface SaberAppLayoutUI {
+    root?: string;
+    desktopSidebar?: string;
+    main?: string;
+    header?: string;
+    headerHeading?: string;
+    title?: string;
+    description?: string;
+    headerSuffix?: string;
+    pageHeaderSuffixTarget?: string;
+    content?: string;
+    phoneDrawer?: DrawerProps['ui'];
+    phoneDrawerContent?: string;
+    phoneSidebarFrame?: string;
+    padDrawer?: DrawerProps['ui'];
+    padDrawerContent?: string;
+    padSidebarFrame?: string;
+    overlay?: string;
+    dock?: string;
+    search?: SaberNavigationSearchUI;
+    menuButton?: ButtonProps['ui'];
+}

package/dist/components/layout/SaberAppLayout.vue.d.ts

@@ -0,0 +1,78 @@
+import { SaberNavigationSelectPayload } from '../navigation/SaberAppSidebar.types';
+import { SaberAppLayoutNavigationSlotContext, SaberAppLayoutProps } from './SaberAppLayout.types';
+type __VLS_Props = SaberAppLayoutProps;
+type __VLS_PublicProps = {
+    'drawerOpen'?: boolean;
+    'searchOpen'?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?: () => unknown;
+        sidebar?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+        'phone-sidebar'?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+        'pad-sidebar'?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+        'header-title'?: (props: {
+            title?: string;
+        }) => unknown;
+        'header-description'?: (props: {
+            description?: string;
+        }) => unknown;
+        'header-suffix'?: () => unknown;
+        dock?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+    }> & {
+        default?: () => unknown;
+        sidebar?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+        'phone-sidebar'?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+        'pad-sidebar'?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+        'header-title'?: (props: {
+            title?: string;
+        }) => unknown;
+        'header-description'?: (props: {
+            description?: string;
+        }) => unknown;
+        'header-suffix'?: () => unknown;
+        dock?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+    };
+    refs: {
+        suffixTarget: HTMLDivElement;
+        menuButton: unknown;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    searchSelect: (payload: SaberNavigationSelectPayload) => any;
+    "update:drawerOpen": (value: boolean) => any;
+    "update:searchOpen": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSearchSelect?: ((payload: SaberNavigationSelectPayload) => any) | undefined;
+    "onUpdate:drawerOpen"?: ((value: boolean) => any) | undefined;
+    "onUpdate:searchOpen"?: ((value: boolean) => any) | undefined;
+}>, {
+    title: string;
+    description: string;
+    ui: import('./SaberAppLayout.types').SaberAppLayoutUI;
+    maxWidth: import('./SaberAppLayout.types').SaberAppLayoutMaxWidth;
+    navigationKey: string | number;
+    sidebarWidth: number | string;
+    phoneBreakpoint: number;
+    padBreakpoint: number;
+    searchGroups: import('../..').SaberNavigationSearchGroup[];
+    searchShortcut: string;
+    searchLabel: string;
+    menuOpenLabel: string;
+    menuCloseLabel: string;
+    menuOpenIcon: string;
+    menuCloseIcon: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    suffixTarget: HTMLDivElement;
+    menuButton: unknown;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/navigation/SaberAppSidebar.types.d.ts

@@ -49,6 +49,7 @@ export interface SaberAppSidebarUI {
     viewport?: string;
     panel?: string;
     sectionList?: string;
+    rootFooter?: string;
     group?: string;
     groupLabel?: string;
     childList?: string;

package/dist/components/navigation/SaberAppSidebar.vue.d.ts

@@ -16,6 +16,7 @@ declare function __VLS_template(): {
         'search-empty'?(_: {
             searchTerm: string;
         }): any;
+        'root-footer'?(_: {}): any;
         footer?(_: {}): any;
     };
     refs: {};

package/dist/composables/use-page-header.mjs

@@ -1,19 +1,21 @@
-import { reactive as c, provide as i, inject as o, watchEffect as d, toValue as r, onBeforeUnmount as s, ref as u } from "vue";
-const n = Symbol("saber-page-header-state"), a = Symbol("saber-page-header-suffix-target");
+import { reactive as c, provide as o, inject as r, watchEffect as u, toValue as i, onBeforeUnmount as d, ref as f } from "vue";
+const n = Symbol.for("@owocow/saber-ui:page-header-state"), a = Symbol.for(
+  "@owocow/saber-ui:page-header-suffix-target"
+);
 function l(t) {
   const e = c({ title: void 0, description: void 0 });
-  return i(n, e), i(a, t), e;
+  return o(n, e), o(a, t), e;
 }
 function E(t) {
-  const e = o(n, null);
-  e && (d(() => {
-    e.title = r(t.title), e.description = r(t.description);
-  }), s(() => {
+  const e = r(n, null);
+  e && (u(() => {
+    e.title = i(t.title), e.description = i(t.description);
+  }), d(() => {
     e.title = void 0, e.description = void 0;
   }));
 }
 function p() {
-  return o(a, u(null));
+  return r(a, f(null));
 }
 export {
   l as providePageHeader,

package/dist/forms/components/fields/SaberPopSelect.vue.d.ts

@@ -17,8 +17,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
     placeholder: string;
-    multiple: boolean;
     disabled: boolean;
+    multiple: boolean;
     clearable: boolean;
     items: PopSelectOption[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/forms/components/fields/SaberUploadImage.vue.d.ts

@@ -102,9 +102,9 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     onRemoveError?: ((error: Error, value: any) => any) | undefined;
 }>, {
-    multiple: boolean;
-    disabled: boolean;
     size: string;
+    disabled: boolean;
+    multiple: boolean;
     dataSource: UploadImageDataSource<any>;
     max: number;
     maxSize: number;

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import { default as SaberInfoProvider } from './components/SaberInfoProvider.vue
 import { default as SaberModalWithMobile } from './components/SaberModalWithMobile.vue';
 import { default as SaberStatus } from './components/SaberStatus.vue';
 import { default as SaberSwitchBar } from './components/SaberSwitchBar.vue';
+import { default as SaberAppLayout } from './components/layout/SaberAppLayout.vue';
 import { default as SaberAppSidebar } from './components/navigation/SaberAppSidebar.vue';
 import { default as SaberNavigationSearch } from './components/navigation/SaberNavigationSearch.vue';
 import { default as SaberFilterBar } from './forms/components/SaberFilterBar.vue';
@@ -33,10 +34,11 @@ export { BadgeStatus as SaberBadgeStatus };
 export type { BadgeStatusProps } from './BadgeStatus.types';
 export { SaberNoData };
 export type { SaberNoDataProps } from './SaberNoData.types';
-export { SaberConfirmModal, SaberConfirmProvider, SaberInfo, SaberInfoProvider, SaberModalWithMobile, SaberAppSidebar, SaberNavigationSearch, SaberStatus, SaberSwitchBar, };
+export { SaberConfirmModal, SaberConfirmProvider, SaberInfo, SaberInfoProvider, SaberModalWithMobile, SaberAppLayout, SaberAppSidebar, SaberNavigationSearch, SaberStatus, SaberSwitchBar, };
 export type { SaberInfoContext, SaberInfoMode, SaberInfoProps, SaberInfoVariant } from './components/SaberInfo.types';
 export type { SaberStatusType } from './components/SaberStatus.types';
 export type { SaberSwitchBarItem, SaberSwitchBarUI, SaberSwitchBarValue } from './components/SaberSwitchBar.types';
+export type { SaberAppLayoutMaxWidth, SaberAppLayoutMode, SaberAppLayoutNavigationSlotContext, SaberAppLayoutProps, SaberAppLayoutUI, } from './components/layout/SaberAppLayout.types';
 export type { SaberAppSidebarUI, SaberNavigationGroup, SaberNavigationItem, SaberNavigationSearchGroup, SaberNavigationSearchUI, SaberNavigationSection, SaberNavigationSelectPayload, SaberNavigationSelectSource, } from './components/navigation/SaberAppSidebar.types';
 export { SaberFilterBar, SaberFormModal, SaberDictCheckbox, SaberDictRadio, SaberDictSelect, SaberDistrictSelect, SaberInput, SaberInputNumber, SaberModal, SaberPopSelect, SaberRadioGroup, SaberSelect, SaberTextarea, };
 export { installSaberForms, type SaberFormsOptions } from './forms/plugin';
@@ -55,6 +57,7 @@ declare module 'vue' {
         SaberSwitchBar: typeof SaberSwitchBar;
         SaberAppSidebar: typeof SaberAppSidebar;
         SaberNavigationSearch: typeof SaberNavigationSearch;
+        SaberAppLayout: typeof SaberAppLayout;
         SaberFilterBar: typeof SaberFilterBar;
         SaberFormModal: typeof SaberFormModal;
         SaberModal: typeof SaberModal;

package/dist/index.mjs

@@ -1,25 +1,26 @@
 import h from "@nuxt/ui/vue-plugin";
 import y from "@nuxt/ui/components/Badge.vue";
-import { defineComponent as _, computed as f, openBlock as s, createBlock as $, normalizeStyle as v, withCtx as C, createTextVNode as k, toDisplayString as d, createElementBlock as i, normalizeClass as B, createElementVNode as l, createVNode as I, createCommentVNode as m, renderSlot as u } from "vue";
+import { defineComponent as _, computed as f, openBlock as s, createBlock as $, normalizeStyle as v, withCtx as C, createTextVNode as k, toDisplayString as b, createElementBlock as i, normalizeClass as B, createElementVNode as l, createVNode as I, createCommentVNode as m, renderSlot as u } from "vue";
 import N from "@nuxt/ui/runtime/vue/components/Icon.vue";
 import { _ as D } from "./SaberConfirmModal.vue_vue_type_script_setup_true_lang-Cqp9krYl.js";
 import { _ as M } from "./SaberConfirmProvider.vue_vue_type_script_setup_true_lang-DUJ6ftNJ.js";
 import { _ as w } from "./SaberInfo.vue_vue_type_script_setup_true_lang-B3W5VsGR.js";
-import { _ as P } from "./SaberInfoProvider.vue_vue_type_script_setup_true_lang-3rF6bSCn.js";
-import { _ as z } from "./SaberModalWithMobile.vue_vue_type_script_setup_true_lang-aQlToncY.js";
-import { _ as A } from "./SaberStatus.vue_vue_type_script_setup_true_lang-D9aRVCow.js";
+import { _ as A } from "./SaberInfoProvider.vue_vue_type_script_setup_true_lang-3rF6bSCn.js";
+import { _ as P } from "./SaberModalWithMobile.vue_vue_type_script_setup_true_lang-aQlToncY.js";
+import { _ as z } from "./SaberStatus.vue_vue_type_script_setup_true_lang-D9aRVCow.js";
 import { _ as F } from "./SaberSwitchBar.vue_vue_type_script_setup_true_lang-CDx3Dcas.js";
-import { _ as U } from "./SaberAppSidebar.vue_vue_type_script_setup_true_lang-CEWQTjEi.js";
+import { _ as L } from "./SaberAppLayout.vue_vue_type_script_setup_true_lang-R7F5K7kj.js";
+import { _ as U } from "./SaberAppSidebar.vue_vue_type_script_setup_true_lang-Cwuj9VNi.js";
 import { _ as V } from "./SaberNavigationSearch.vue_vue_type_script_setup_true_lang-Bj96kMla.js";
 import { k as W } from "./plugin-Dr3z0YFg.js";
-import { _ as be, a as fe, b as ue, c as Se, d as _e, e as pe } from "./plugin-Dr3z0YFg.js";
-import { _ as xe } from "./SaberModal.vue_vue_type_script_setup_true_lang-DJno3jA3.js";
-import { _ as ye } from "./SaberDictCheckbox.vue_vue_type_script_setup_true_lang-DUbzy_C6.js";
-import { _ as ve, a as Ce } from "./SaberDictRadio.vue_vue_type_script_setup_true_lang-DR6-jSID.js";
-import { _ as Be } from "./SaberDictSelect.vue_vue_type_script_setup_true_lang-B8PTKNKX.js";
-import { _ as Ne } from "./SaberDistrictSelect.vue_vue_type_script_setup_true_lang-BX8nLC35.js";
-import { _ as Me } from "./SaberPopSelect.vue_vue_type_script_setup_true_lang-BcS27NXI.js";
-const b = {
+import { _ as ue, a as Se, b as _e, c as pe, d as ge, e as xe } from "./plugin-Dr3z0YFg.js";
+import { _ as ye } from "./SaberModal.vue_vue_type_script_setup_true_lang-DJno3jA3.js";
+import { _ as ve } from "./SaberDictCheckbox.vue_vue_type_script_setup_true_lang-DUbzy_C6.js";
+import { _ as ke, a as Be } from "./SaberDictRadio.vue_vue_type_script_setup_true_lang-DR6-jSID.js";
+import { _ as Ne } from "./SaberDictSelect.vue_vue_type_script_setup_true_lang-B8PTKNKX.js";
+import { _ as Me } from "./SaberDistrictSelect.vue_vue_type_script_setup_true_lang-BX8nLC35.js";
+import { _ as Ae } from "./SaberPopSelect.vue_vue_type_script_setup_true_lang-BcS27NXI.js";
+const d = {
   red: { 500: "#ef4444", 600: "#dc2626" },
   orange: { 500: "#f97316", 600: "#ea580c" },
   amber: { 500: "#f59e0b", 600: "#d97706" },
@@ -42,10 +43,10 @@ const b = {
   zinc: { 500: "#71717a", 600: "#52525b" },
   neutral: { 500: "#737373", 600: "#525252" },
   stone: { 500: "#78716c", 600: "#57534e" }
-}, H = b.gray;
+}, H = d.gray;
 function S(e, t) {
   var o, a;
-  return ((o = b[e]) == null ? void 0 : o[t]) ?? ((a = b[e]) == null ? void 0 : a[500]) ?? H[500];
+  return ((o = d[e]) == null ? void 0 : o[t]) ?? ((a = d[e]) == null ? void 0 : a[500]) ?? H[500];
 }
 function R(e, t) {
   const o = parseInt(e.slice(1, 3), 16), a = parseInt(e.slice(3, 5), 16), r = parseInt(e.slice(5, 7), 16);
@@ -84,16 +85,16 @@ const T = /* @__PURE__ */ _({
         class: "inline-flex items-center rounded-full border-0 pt-0.75 pb-0.75 px-2 text-xs font-medium"
       }, {
         default: C(() => [
-          k(d(o.value.label), 1)
+          k(b(o.value.label), 1)
         ]),
         _: 1
       }, 8, ["style"]);
     };
   }
-}), E = { class: "rounded-md border border-accented p-3" }, L = { class: "flex flex-col gap-1" }, O = { class: "text-base font-semibold mb-2 text-highlighted w-60" }, j = {
+}), E = { class: "rounded-md border border-accented p-3" }, O = { class: "flex flex-col gap-1" }, j = { class: "text-base font-semibold mb-2 text-highlighted w-60" }, G = {
   key: 0,
   class: "text-sm text-muted w-60"
-}, G = { key: 0 }, K = { key: 1 }, q = /* @__PURE__ */ _({
+}, K = { key: 0 }, q = { key: 1 }, J = /* @__PURE__ */ _({
   name: "SaberNoData",
   __name: "SaberNoData",
   props: {
@@ -119,49 +120,50 @@ const T = /* @__PURE__ */ _({
             class: "size-5"
           }, null, 8, ["name"])
         ]),
-        l("div", L, [
-          l("h4", O, d(e.title), 1),
-          e.description ? (s(), i("p", j, d(e.description), 1)) : m("", !0)
+        l("div", O, [
+          l("h4", j, b(e.title), 1),
+          e.description ? (s(), i("p", G, b(e.description), 1)) : m("", !0)
         ]),
-        t.$slots.default ? (s(), i("div", G, [
+        t.$slots.default ? (s(), i("div", K, [
           u(t.$slots, "default")
         ])) : m("", !0),
-        t.$slots.extra ? (s(), i("p", K, [
+        t.$slots.extra ? (s(), i("p", q, [
           u(t.$slots, "extra")
         ])) : m("", !0)
       ], 2);
     };
   }
-}), le = {
+}), be = {
   install(e, t = {}) {
-    e.use(h), e.component("SaberBadgeStatus", T), e.component("SaberNoData", q), e.component("SaberConfirmModal", D), e.component("SaberConfirmProvider", M), e.component("SaberInfo", w), e.component("SaberInfoProvider", P), e.component("SaberModalWithMobile", z), e.component("SaberStatus", A), e.component("SaberSwitchBar", F), e.component("SaberAppSidebar", U), e.component("SaberNavigationSearch", V), W(e, t.forms);
+    e.use(h), e.component("SaberBadgeStatus", T), e.component("SaberNoData", J), e.component("SaberConfirmModal", D), e.component("SaberConfirmProvider", M), e.component("SaberInfo", w), e.component("SaberInfoProvider", A), e.component("SaberModalWithMobile", P), e.component("SaberStatus", z), e.component("SaberSwitchBar", F), e.component("SaberAppSidebar", U), e.component("SaberNavigationSearch", V), e.component("SaberAppLayout", L), W(e, t.forms);
   }
 };
 export {
+  L as SaberAppLayout,
   U as SaberAppSidebar,
   T as SaberBadgeStatus,
   D as SaberConfirmModal,
   M as SaberConfirmProvider,
-  ye as SaberDictCheckbox,
-  ve as SaberDictRadio,
-  Be as SaberDictSelect,
-  Ne as SaberDistrictSelect,
-  be as SaberFilterBar,
-  fe as SaberFormModal,
+  ve as SaberDictCheckbox,
+  ke as SaberDictRadio,
+  Ne as SaberDictSelect,
+  Me as SaberDistrictSelect,
+  ue as SaberFilterBar,
+  Se as SaberFormModal,
   w as SaberInfo,
-  P as SaberInfoProvider,
-  ue as SaberInput,
-  Se as SaberInputNumber,
-  xe as SaberModal,
-  z as SaberModalWithMobile,
+  A as SaberInfoProvider,
+  _e as SaberInput,
+  pe as SaberInputNumber,
+  ye as SaberModal,
+  P as SaberModalWithMobile,
   V as SaberNavigationSearch,
-  q as SaberNoData,
-  Me as SaberPopSelect,
-  Ce as SaberRadioGroup,
-  _e as SaberSelect,
-  A as SaberStatus,
+  J as SaberNoData,
+  Ae as SaberPopSelect,
+  Be as SaberRadioGroup,
+  ge as SaberSelect,
+  z as SaberStatus,
   F as SaberSwitchBar,
-  pe as SaberTextarea,
-  le as default,
+  xe as SaberTextarea,
+  be as default,
   W as installSaberForms
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owocow/saber-ui",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Saber application foundation for Vue 3 projects built on Nuxt UI",
   "type": "module",
   "sideEffects": false,
@@ -100,6 +100,10 @@
       "types": "./dist/components/SaberSwitchBar.vue.d.ts",
       "import": "./dist/components/SaberSwitchBar.mjs"
     },
+    "./components/SaberAppLayout": {
+      "types": "./dist/components/layout/SaberAppLayout.vue.d.ts",
+      "import": "./dist/components/SaberAppLayout.mjs"
+    },
     "./components/SaberAppSidebar": {
       "types": "./dist/components/navigation/SaberAppSidebar.vue.d.ts",
       "import": "./dist/components/SaberAppSidebar.mjs"
@@ -195,6 +199,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@vueuse/core": "^14.2.1",
     "crypto-js": "^4.2.0",
     "jsencrypt": "^3.5.4",
     "klona": "^2.0.6",
@@ -207,7 +212,7 @@
     "vue": "^3"
   },
   "devDependencies": {
-    "@nuxt/ui": "4.8.0",
+    "@nuxt/ui": "4.11.0",
     "@tailwindcss/vite": "^4.3.3",
     "@types/crypto-js": "^4.2.2",
     "@types/node": "^26.1.2",