@nonsuch/component-library 0.7.1 → 0.8.0

package/README.md

@@ -305,6 +305,8 @@ src/
     NsCheckbox/           # Styled QCheckbox wrapper
     NsChip/               # Tag/filter chip
     NsDialog/             # Modal dialog with header/body/actions
+    NsDrawer/             # Side drawer (within NsLayout)
+    NsExpansionItem/      # Collapsible list item
     NsFooter/             # App footer (within NsLayout)
     NsForm/               # Form wrapper with validation
     NsHeader/             # App header (within NsLayout)

package/dist/components/NsAppShell/NsAppShell.vue.d.ts

@@ -0,0 +1,65 @@
+import type { NsAppShellTab, NsAppShellNavItem } from './types';
+/**
+ * NsAppShell — Primary responsive app layout template.
+ *
+ * Handles the mobile → tablet → desktop layout transition:
+ * - Mobile (xs/sm): Bottom tab bar for primary nav, hamburger opens drawer
+ * - Tablet+ (md+): Persistent or mini side drawer, no bottom tab bar
+ *
+ * Composes NsLayout, NsHeader, NsToolbar, NsDrawer, NsPageContainer,
+ * NsTabs, NsTab, NsIcon, NsButton, NsFooter, and more.
+ */
+export interface NsAppShellProps {
+    /** Tab items for mobile bottom navigation bar */
+    tabs?: NsAppShellTab[];
+    /** Navigation items for the side drawer */
+    drawerItems?: NsAppShellNavItem[];
+    /** Whether to show the search action */
+    showSearch?: boolean;
+    /** Use mini (rail) mode for the side drawer on desktop */
+    miniDrawer?: boolean;
+    /** Pixel breakpoint for persistent drawer (default: md = 1024) */
+    drawerBreakpoint?: number;
+    /** Currently active tab name */
+    modelValue?: string;
+}
+declare var __VLS_33: {}, __VLS_67: {}, __VLS_111: {}, __VLS_153: {}, __VLS_167: {}, __VLS_175: {};
+type __VLS_Slots = {} & {
+    'header-left'?: (props: typeof __VLS_33) => any;
+} & {
+    'header-actions'?: (props: typeof __VLS_67) => any;
+} & {
+    'drawer-header'?: (props: typeof __VLS_111) => any;
+} & {
+    'drawer-footer'?: (props: typeof __VLS_153) => any;
+} & {
+    default?: (props: typeof __VLS_167) => any;
+} & {
+    'bottom-bar-above'?: (props: typeof __VLS_175) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<NsAppShellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (query: string) => any;
+    "update:modelValue": (name: string) => any;
+    "tab-change": (name: string | number) => any;
+    "drawer-toggle": (open: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<NsAppShellProps> & Readonly<{
+    onSearch?: ((query: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((name: string) => any) | undefined;
+    "onTab-change"?: ((name: string | number) => any) | undefined;
+    "onDrawer-toggle"?: ((open: boolean) => any) | undefined;
+}>, {
+    modelValue: string;
+    tabs: NsAppShellTab[];
+    drawerItems: NsAppShellNavItem[];
+    showSearch: boolean;
+    miniDrawer: boolean;
+    drawerBreakpoint: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NsAppShell/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NsAppShell } from './NsAppShell.vue';
+export type { NsAppShellTab, NsAppShellNavItem } from './types';

package/dist/components/NsAppShell/types.d.ts

@@ -0,0 +1,26 @@
+/** Represents a tab item for the mobile bottom navigation bar. */
+export interface NsAppShellTab {
+    /** Unique identifier for the tab */
+    name: string;
+    /** Display label for the tab */
+    label: string;
+    /** Material icon name */
+    icon: string;
+}
+/** Represents a navigation item in the side drawer. */
+export interface NsAppShellNavItem {
+    /** Unique identifier for the nav item */
+    name: string;
+    /** Display label */
+    label: string;
+    /** Material icon name */
+    icon?: string;
+    /** Route path or URL */
+    to?: string;
+    /** Whether this item is currently active */
+    active?: boolean;
+    /** Nested children (for expandable sections) */
+    children?: NsAppShellNavItem[];
+    /** Separator before this item */
+    separator?: boolean;
+}

package/dist/components/NsAuthLayout/NsAuthLayout.vue.d.ts

@@ -0,0 +1,29 @@
+/**
+ * NsAuthLayout — A centered layout for authentication flows.
+ *
+ * Provides a vertically and horizontally centered card container
+ * ideal for login, register, 2FA, and similar auth pages.
+ * Mobile-first: full-width with padding on small screens,
+ * constrained max-width on larger screens.
+ */
+export interface NsAuthLayoutProps {
+    /** Maximum width of the auth card container (CSS value) */
+    maxWidth?: string;
+}
+declare var __VLS_20: {}, __VLS_28: {};
+type __VLS_Slots = {} & {
+    branding?: (props: typeof __VLS_20) => any;
+} & {
+    default?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<NsAuthLayoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NsAuthLayoutProps> & Readonly<{}>, {
+    maxWidth: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NsAuthLayout/index.d.ts

@@ -0,0 +1 @@
+export { default as NsAuthLayout } from './NsAuthLayout.vue';

package/dist/components/NsDashboardGrid/NsDashboardGrid.vue.d.ts

@@ -0,0 +1,29 @@
+/**
+ * NsDashboardGrid — A responsive grid layout for dashboard widgets.
+ *
+ * Mobile-first responsive columns using Quasar's ascending breakpoint system.
+ * Default: 1 column (xs) → 2 columns (sm) → 3 columns (md) → 4 columns (lg).
+ *
+ * Each direct child in the default slot is automatically wrapped in a
+ * responsive column div. Works with any content but optimized for
+ * equal-height cards in each row.
+ */
+export interface NsDashboardGridColumns {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+}
+export interface NsDashboardGridProps {
+    /** Override breakpoint column configuration */
+    columns?: NsDashboardGridColumns;
+    /** Spacing between widgets (Quasar gutter size: xs, sm, md, lg, xl) */
+    gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+declare const __VLS_export: import("vue").DefineComponent<NsDashboardGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NsDashboardGridProps> & Readonly<{}>, {
+    columns: NsDashboardGridColumns;
+    gap: "xs" | "sm" | "md" | "lg" | "xl";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/NsDashboardGrid/index.d.ts

@@ -0,0 +1 @@
+export { default as NsDashboardGrid } from './NsDashboardGrid.vue';

package/dist/components/NsDrawer/NsDrawer.vue.d.ts

@@ -0,0 +1,15 @@
+export interface NsDrawerProps {
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<NsDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NsDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NsDrawer/index.d.ts

@@ -0,0 +1 @@
+export { default as NsDrawer } from './NsDrawer.vue';

package/dist/components/NsExpansionItem/NsExpansionItem.vue.d.ts

@@ -0,0 +1,15 @@
+export interface NsExpansionItemProps {
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<NsExpansionItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NsExpansionItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NsExpansionItem/index.d.ts

@@ -0,0 +1 @@
+export { default as NsExpansionItem } from './NsExpansionItem.vue';

package/dist/index.d.ts

@@ -18,6 +18,10 @@ export { default as NsForm } from './components/NsForm/NsForm.vue';
 export type { NsFormProps } from './components/NsForm/NsForm.vue';
 export { default as NsDialog } from './components/NsDialog/NsDialog.vue';
 export type { NsDialogProps } from './components/NsDialog/NsDialog.vue';
+export { default as NsDrawer } from './components/NsDrawer/NsDrawer.vue';
+export type { NsDrawerProps } from './components/NsDrawer/NsDrawer.vue';
+export { default as NsExpansionItem } from './components/NsExpansionItem/NsExpansionItem.vue';
+export type { NsExpansionItemProps } from './components/NsExpansionItem/NsExpansionItem.vue';
 export { default as NsBanner } from './components/NsBanner/NsBanner.vue';
 export type { NsBannerProps, NsBannerType } from './components/NsBanner/NsBanner.vue';
 export { default as NsAvatar } from './components/NsAvatar/NsAvatar.vue';
@@ -96,6 +100,13 @@ export { default as NsToolbar } from './components/NsToolbar/NsToolbar.vue';
 export type { NsToolbarProps } from './components/NsToolbar/NsToolbar.vue';
 export { default as NsToolbarTitle } from './components/NsToolbarTitle/NsToolbarTitle.vue';
 export type { NsToolbarTitleProps } from './components/NsToolbarTitle/NsToolbarTitle.vue';
+export { default as NsAppShell } from './components/NsAppShell/NsAppShell.vue';
+export type { NsAppShellProps } from './components/NsAppShell/NsAppShell.vue';
+export type { NsAppShellTab, NsAppShellNavItem } from './components/NsAppShell/types';
+export { default as NsAuthLayout } from './components/NsAuthLayout/NsAuthLayout.vue';
+export type { NsAuthLayoutProps } from './components/NsAuthLayout/NsAuthLayout.vue';
+export { default as NsDashboardGrid } from './components/NsDashboardGrid/NsDashboardGrid.vue';
+export type { NsDashboardGridProps, NsDashboardGridColumns, } from './components/NsDashboardGrid/NsDashboardGrid.vue';
 export { createNonsuch } from './plugin';
 export type { NsPluginOptions } from './plugin';
 export { createQuasarConfig } from './quasarConfig';

package/dist/nonsuch-components.css

@@ -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-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-icon[data-v-d068ec18],.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-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-icon[data-v-d068ec18],.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-d88db6ec],.ns-app-shell__search-btn[data-v-d88db6ec]{min-width:var(--ns-touch-target);min-height:var(--ns-touch-target)}.ns-app-shell__search-inline[data-v-d88db6ec]{min-width:200px;max-width:320px}.ns-app-shell__search-input[data-v-d88db6ec]{width:100%}.ns-app-shell__nav-item[data-v-d88db6ec]{min-height:var(--ns-touch-target)}.ns-app-shell__bottom-bar[data-v-d88db6ec]{padding-bottom:env(safe-area-inset-bottom,0px)}.ns-app-shell__bottom-tab[data-v-d88db6ec]{min-height:56px;min-width:var(--ns-touch-target)}.ns-app-shell__page--has-bottom-bar[data-v-d88db6ec]{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}.ns-auth-layout__page[data-v-d70a792e]{display:flex;align-items:center;justify-content:center;min-height:inherit;padding:var(--ns-space-4)}.ns-auth-layout__container[data-v-d70a792e]{width:100%}.ns-auth-layout__branding[data-v-d70a792e]{text-align:center;margin-bottom:var(--ns-space-6)}.ns-auth-layout__card[data-v-d70a792e]{width:100%}