@nonsuch/component-library 0.9.0 → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,7 +4,8 @@ import type { NsAppShellTab, NsAppShellNavItem } from './types';
|
|
|
4
4
|
*
|
|
5
5
|
* Handles the mobile → tablet → desktop layout transition:
|
|
6
6
|
* - Mobile (xs/sm): Bottom tab bar for primary nav, hamburger opens drawer
|
|
7
|
-
* - Tablet
|
|
7
|
+
* - Tablet (md): Persistent mini/rail drawer (icons only), no bottom tab bar
|
|
8
|
+
* - Desktop (lg+): Full persistent drawer with labels, no bottom tab bar
|
|
8
9
|
*
|
|
9
10
|
* Composes NsLayout, NsHeader, NsToolbar, NsDrawer, NsPageContainer,
|
|
10
11
|
* NsTabs, NsTab, NsIcon, NsButton, NsFooter, and more.
|
|
@@ -16,37 +17,45 @@ export interface NsAppShellProps {
|
|
|
16
17
|
drawerItems?: NsAppShellNavItem[];
|
|
17
18
|
/** Whether to show the search action */
|
|
18
19
|
showSearch?: boolean;
|
|
19
|
-
/** Use mini (rail) mode for the side drawer on desktop */
|
|
20
|
+
/** Use mini (rail) mode for the side drawer on desktop (lg+). At tablet (md–lg) mini mode is automatic. */
|
|
20
21
|
miniDrawer?: boolean;
|
|
21
22
|
/** Pixel breakpoint for persistent drawer (default: md = 1024) */
|
|
22
23
|
drawerBreakpoint?: number;
|
|
24
|
+
/** Pixel breakpoint for full (non-mini) drawer (default: lg = 1440) */
|
|
25
|
+
fullDrawerBreakpoint?: number;
|
|
26
|
+
/** Show a collapse/expand toggle at the top of the drawer */
|
|
27
|
+
collapsible?: boolean;
|
|
23
28
|
/** Currently active tab name */
|
|
24
29
|
modelValue?: string;
|
|
25
30
|
}
|
|
26
|
-
declare var __VLS_33: {}, __VLS_67: {},
|
|
31
|
+
declare var __VLS_33: {}, __VLS_67: {}, __VLS_142: {
|
|
32
|
+
mini: boolean;
|
|
33
|
+
}, __VLS_195: {}, __VLS_209: {}, __VLS_217: {};
|
|
27
34
|
type __VLS_Slots = {} & {
|
|
28
35
|
'header-left'?: (props: typeof __VLS_33) => any;
|
|
29
36
|
} & {
|
|
30
37
|
'header-actions'?: (props: typeof __VLS_67) => any;
|
|
31
38
|
} & {
|
|
32
|
-
'drawer-header'?: (props: typeof
|
|
39
|
+
'drawer-header'?: (props: typeof __VLS_142) => any;
|
|
33
40
|
} & {
|
|
34
|
-
'drawer-footer'?: (props: typeof
|
|
41
|
+
'drawer-footer'?: (props: typeof __VLS_195) => any;
|
|
35
42
|
} & {
|
|
36
|
-
default?: (props: typeof
|
|
43
|
+
default?: (props: typeof __VLS_209) => any;
|
|
37
44
|
} & {
|
|
38
|
-
'bottom-bar-above'?: (props: typeof
|
|
45
|
+
'bottom-bar-above'?: (props: typeof __VLS_217) => any;
|
|
39
46
|
};
|
|
40
47
|
declare const __VLS_base: import("vue").DefineComponent<NsAppShellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
41
48
|
search: (query: string) => any;
|
|
42
49
|
"update:modelValue": (name: string) => any;
|
|
43
50
|
"tab-change": (name: string | number) => any;
|
|
44
51
|
"drawer-toggle": (open: boolean) => any;
|
|
52
|
+
"drawer-collapse": (collapsed: boolean) => any;
|
|
45
53
|
}, string, import("vue").PublicProps, Readonly<NsAppShellProps> & Readonly<{
|
|
46
54
|
onSearch?: ((query: string) => any) | undefined;
|
|
47
55
|
"onUpdate:modelValue"?: ((name: string) => any) | undefined;
|
|
48
56
|
"onTab-change"?: ((name: string | number) => any) | undefined;
|
|
49
57
|
"onDrawer-toggle"?: ((open: boolean) => any) | undefined;
|
|
58
|
+
"onDrawer-collapse"?: ((collapsed: boolean) => any) | undefined;
|
|
50
59
|
}>, {
|
|
51
60
|
modelValue: string;
|
|
52
61
|
tabs: NsAppShellTab[];
|
|
@@ -54,6 +63,8 @@ declare const __VLS_base: import("vue").DefineComponent<NsAppShellProps, {}, {},
|
|
|
54
63
|
showSearch: boolean;
|
|
55
64
|
miniDrawer: boolean;
|
|
56
65
|
drawerBreakpoint: number;
|
|
66
|
+
fullDrawerBreakpoint: number;
|
|
67
|
+
collapsible: boolean;
|
|
57
68
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
58
69
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
59
70
|
declare const _default: typeof __VLS_export;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* NsDashboardGrid — A responsive grid layout for dashboard widgets.
|
|
3
3
|
*
|
|
4
4
|
* Mobile-first responsive columns using Quasar's ascending breakpoint system.
|
|
5
|
-
* Default: 1 column (xs) → 2 columns (sm) →
|
|
5
|
+
* Default: 1 column (xs) → 2 columns (sm) → 4 columns (md) → 4 columns (lg).
|
|
6
6
|
*
|
|
7
7
|
* Each direct child in the default slot is automatically wrapped in a
|
|
8
8
|
* responsive column div. Works with any content but optimized for
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ns-button[data-v-59b40e5f]{font-family:var(--ns-font-family-text);font-weight:var(--ns-font-weight-medium);letter-spacing:var(--ns-letter-spacing-wide)}.ns-skeleton[data-v-dfd40b8a]{border-radius:var(--ns-radius-md)}.ns-input[data-v-7ebf3284],.ns-input[data-v-7ebf3284] .q-field__label{font-family:var(--ns-font-family-text)}.ns-input[data-v-7ebf3284] .q-field__control{border-radius:var(--ns-radius-md)}.ns-card[data-v-7769879a]{border-radius:var(--ns-radius-lg);box-shadow:var(--ns-shadow-sm);font-family:var(--ns-font-family-text);transition:box-shadow var(--ns-duration-normal) var(--ns-easing-default)}.ns-card[data-v-7769879a]:hover{box-shadow:var(--ns-shadow-md)}.ns-card--flat[data-v-7769879a],.ns-card--flat[data-v-7769879a]:hover{box-shadow:none}.ns-card__header[data-v-7769879a]{font-family:var(--ns-font-family-display)}.ns-select[data-v-081cebe3],.ns-select[data-v-081cebe3] .q-field__label{font-family:var(--ns-font-family-text)}.ns-select[data-v-081cebe3] .q-field__control{border-radius:var(--ns-radius-md)}.ns-checkbox[data-v-2e481f8b],.ns-toggle[data-v-f8c90530],.ns-form[data-v-e20d14ce]{font-family:var(--ns-font-family-text)}.ns-dialog__card[data-v-4fca48ca]{border-radius:var(--ns-radius-lg);font-family:var(--ns-font-family-text);min-width:320px}.ns-dialog__header[data-v-4fca48ca]{font-family:var(--ns-font-family-display)}.ns-drawer[data-v-66ca96b0],.ns-expansion-item[data-v-c07366a7]{font-family:var(--ns-font-family-text)}.ns-banner[data-v-18ebd6f5]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-md)}.ns-banner--info[data-v-18ebd6f5]{background-color:var(--ns-color-info-bg, #e3f2fd);color:var(--ns-color-info-text, #0d47a1)}.ns-banner--success[data-v-18ebd6f5]{background-color:var(--ns-color-success-bg, #e8f5e9);color:var(--ns-color-success-text, #1b5e20)}.ns-banner--warning[data-v-18ebd6f5]{background-color:var(--ns-color-warning-bg, #fff3e0);color:var(--ns-color-warning-text, #e65100)}.ns-banner--error[data-v-18ebd6f5]{background-color:var(--ns-color-error-bg, #ffebee);color:var(--ns-color-error-text, #b71c1c)}.ns-avatar[data-v-6a1b44b8]{font-family:var(--ns-font-family-text);font-weight:var(--ns-font-weight-medium)}.ns-chip[data-v-1a2191f1]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-full, 9999px)}.ns-list[data-v-65aec20e]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-md)}.ns-tooltip[data-v-9cb6af8f]{font-family:var(--ns-font-family-text);font-size:var(--ns-font-size-sm, .875rem);border-radius:var(--ns-radius-sm);padding:var(--ns-space-1, 4px) var(--ns-space-2, 8px)}.ns-badge[data-v-4ca05f24],.ns-breadcrumbs[data-v-dee98f71],.ns-breadcrumb-element[data-v-37bfe51b],.ns-button-toggle[data-v-93652c3e],.ns-card-actions[data-v-0d6f776d],.ns-card-section[data-v-781d42ef],.ns-footer[data-v-1fb919cd],.ns-header[data-v-80d27841],.ns-
|
|
1
|
+
.ns-button[data-v-59b40e5f]{font-family:var(--ns-font-family-text);font-weight:var(--ns-font-weight-medium);letter-spacing:var(--ns-letter-spacing-wide)}.ns-skeleton[data-v-dfd40b8a]{border-radius:var(--ns-radius-md)}.ns-input[data-v-7ebf3284],.ns-input[data-v-7ebf3284] .q-field__label{font-family:var(--ns-font-family-text)}.ns-input[data-v-7ebf3284] .q-field__control{border-radius:var(--ns-radius-md)}.ns-card[data-v-7769879a]{border-radius:var(--ns-radius-lg);box-shadow:var(--ns-shadow-sm);font-family:var(--ns-font-family-text);transition:box-shadow var(--ns-duration-normal) var(--ns-easing-default)}.ns-card[data-v-7769879a]:hover{box-shadow:var(--ns-shadow-md)}.ns-card--flat[data-v-7769879a],.ns-card--flat[data-v-7769879a]:hover{box-shadow:none}.ns-card__header[data-v-7769879a]{font-family:var(--ns-font-family-display)}.ns-select[data-v-081cebe3],.ns-select[data-v-081cebe3] .q-field__label{font-family:var(--ns-font-family-text)}.ns-select[data-v-081cebe3] .q-field__control{border-radius:var(--ns-radius-md)}.ns-checkbox[data-v-2e481f8b],.ns-toggle[data-v-f8c90530],.ns-form[data-v-e20d14ce]{font-family:var(--ns-font-family-text)}.ns-dialog__card[data-v-4fca48ca]{border-radius:var(--ns-radius-lg);font-family:var(--ns-font-family-text);min-width:320px}.ns-dialog__header[data-v-4fca48ca]{font-family:var(--ns-font-family-display)}.ns-drawer[data-v-66ca96b0],.ns-expansion-item[data-v-c07366a7]{font-family:var(--ns-font-family-text)}.ns-banner[data-v-18ebd6f5]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-md)}.ns-banner--info[data-v-18ebd6f5]{background-color:var(--ns-color-info-bg, #e3f2fd);color:var(--ns-color-info-text, #0d47a1)}.ns-banner--success[data-v-18ebd6f5]{background-color:var(--ns-color-success-bg, #e8f5e9);color:var(--ns-color-success-text, #1b5e20)}.ns-banner--warning[data-v-18ebd6f5]{background-color:var(--ns-color-warning-bg, #fff3e0);color:var(--ns-color-warning-text, #e65100)}.ns-banner--error[data-v-18ebd6f5]{background-color:var(--ns-color-error-bg, #ffebee);color:var(--ns-color-error-text, #b71c1c)}.ns-avatar[data-v-6a1b44b8]{font-family:var(--ns-font-family-text);font-weight:var(--ns-font-weight-medium)}.ns-chip[data-v-1a2191f1]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-full, 9999px)}.ns-list[data-v-65aec20e]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-md)}.ns-tooltip[data-v-9cb6af8f]{font-family:var(--ns-font-family-text);font-size:var(--ns-font-size-sm, .875rem);border-radius:var(--ns-radius-sm);padding:var(--ns-space-1, 4px) var(--ns-space-2, 8px)}.ns-badge[data-v-4ca05f24],.ns-breadcrumbs[data-v-dee98f71],.ns-breadcrumb-element[data-v-37bfe51b],.ns-button-toggle[data-v-93652c3e],.ns-card-actions[data-v-0d6f776d],.ns-card-section[data-v-781d42ef],.ns-footer[data-v-1fb919cd],.ns-header[data-v-80d27841],.ns-image[data-v-c9c9f6c1],.ns-inner-loading[data-v-080672c1],.ns-item[data-v-47978f87],.ns-item-label[data-v-df6024af],.ns-item-section[data-v-340a753a],.ns-layout[data-v-cf90e270],.ns-linear-progress[data-v-79c6443f],.ns-menu[data-v-47a4b7d0],.ns-page[data-v-25e2841e],.ns-page-container[data-v-ac167da5],.ns-pagination[data-v-12fa9287],.ns-separator[data-v-0c2b2ac1],.ns-space[data-v-273ca5fc],.ns-spinner[data-v-5b99a17b],.ns-spinner-dots[data-v-20a70106],.ns-tab[data-v-b97f2cd1],.ns-table[data-v-a45d30cf],.ns-table-cell[data-v-ca0da61b],.ns-tab-panel[data-v-d8f64358],.ns-tab-panels[data-v-dec8ab0f],.ns-tabs[data-v-81224e01],.ns-timeline[data-v-1bf558aa],.ns-timeline-entry[data-v-fa149ea0],.ns-toolbar[data-v-e26a45db],.ns-toolbar-title[data-v-42928844]{font-family:var(--ns-font-family-text)}.ns-app-shell__menu-btn[data-v-bb640fe4],.ns-app-shell__search-btn[data-v-bb640fe4]{min-width:var(--ns-touch-target);min-height:var(--ns-touch-target)}.ns-app-shell__search-inline[data-v-bb640fe4]{min-width:200px;max-width:320px}.ns-app-shell__search-input[data-v-bb640fe4]{width:100%}.ns-app-shell__drawer[data-v-bb640fe4]{overflow:hidden}.ns-app-shell__collapse-toggle[data-v-bb640fe4],.ns-app-shell__nav-item[data-v-bb640fe4]{min-height:var(--ns-touch-target)}.ns-app-shell__bottom-bar[data-v-bb640fe4]{padding-bottom:env(safe-area-inset-bottom,0px)}.ns-app-shell__bottom-tabs[data-v-bb640fe4] .q-tabs__content{justify-content:space-around}.ns-app-shell__bottom-tab[data-v-bb640fe4]{min-height:56px;min-width:var(--ns-touch-target);flex:1 1 0;max-width:20%}.ns-app-shell__bottom-tab[data-v-bb640fe4] .q-tab__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.ns-app-shell__page--has-bottom-bar[data-v-bb640fe4]{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}.ns-auth-layout__page[data-v-a5a78d9c]{display:flex;align-items:center;justify-content:center;min-height:inherit;padding:var(--ns-space-4)}.ns-auth-layout__container[data-v-a5a78d9c]{width:100%;margin:0 auto}.ns-auth-layout__branding[data-v-a5a78d9c]{text-align:center;margin-bottom:var(--ns-space-6)}.ns-auth-layout__card[data-v-a5a78d9c]{width:100%}
|