@nonsuch/component-library 0.5.0 → 0.6.0

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.
Files changed (45) hide show
  1. package/dist/components/NsAvatar/NsAvatar.vue.d.ts +40 -0
  2. package/dist/components/NsAvatar/index.d.ts +1 -0
  3. package/dist/components/NsBanner/NsBanner.vue.d.ts +30 -0
  4. package/dist/components/NsBanner/index.d.ts +1 -0
  5. package/dist/components/NsButton/NsButton.vue.d.ts +42 -0
  6. package/dist/components/NsButton/index.d.ts +1 -0
  7. package/dist/components/NsCard/NsCard.vue.d.ts +35 -0
  8. package/dist/components/NsCard/index.d.ts +1 -0
  9. package/dist/components/NsCheckbox/NsCheckbox.vue.d.ts +30 -0
  10. package/dist/components/NsCheckbox/index.d.ts +1 -0
  11. package/dist/components/NsChip/NsChip.vue.d.ts +44 -0
  12. package/dist/components/NsChip/index.d.ts +1 -0
  13. package/dist/components/NsDialog/NsDialog.vue.d.ts +42 -0
  14. package/dist/components/NsDialog/index.d.ts +1 -0
  15. package/dist/components/NsForm/NsForm.vue.d.ts +34 -0
  16. package/dist/components/NsForm/index.d.ts +1 -0
  17. package/dist/components/NsInput/NsInput.vue.d.ts +42 -0
  18. package/dist/components/NsInput/index.d.ts +1 -0
  19. package/dist/components/NsList/NsList.vue.d.ts +34 -0
  20. package/dist/components/NsList/index.d.ts +1 -0
  21. package/dist/components/NsSelect/NsSelect.vue.d.ts +59 -0
  22. package/dist/components/NsSelect/index.d.ts +1 -0
  23. package/dist/components/NsSkeleton/NsSkeleton.vue.d.ts +33 -0
  24. package/dist/components/NsSkeleton/index.d.ts +2 -0
  25. package/dist/components/NsThemeProvider/NsThemeProvider.vue.d.ts +36 -0
  26. package/dist/components/NsThemeProvider/index.d.ts +1 -0
  27. package/dist/components/NsToggle/NsToggle.vue.d.ts +30 -0
  28. package/dist/components/NsToggle/index.d.ts +1 -0
  29. package/dist/components/NsTooltip/NsTooltip.vue.d.ts +35 -0
  30. package/dist/components/NsTooltip/index.d.ts +1 -0
  31. package/dist/composables/index.d.ts +4 -0
  32. package/dist/composables/useNsDarkMode.d.ts +37 -0
  33. package/dist/composables/useNsDefaults.d.ts +25 -0
  34. package/dist/composables/useNsLocale.d.ts +28 -0
  35. package/dist/index.d.ts +43 -0
  36. package/dist/locale/NsLocaleMessages.d.ts +58 -0
  37. package/dist/locale/en-CA.d.ts +8 -0
  38. package/dist/locale/fr-CA.d.ts +5 -0
  39. package/dist/locale/index.d.ts +3 -0
  40. package/dist/nonsuch-components.css +1 -1
  41. package/dist/nonsuch-components.js +251 -215
  42. package/dist/plugin.d.ts +42 -0
  43. package/dist/quasarConfig.d.ts +41 -0
  44. package/dist/tokens/index.d.ts +20 -0
  45. package/package.json +5 -3
package/dist/composables/useNsDarkMode.d.ts ADDED
@@ -0,0 +1,37 @@
1
+ import { type Ref } from 'vue';
2
+ type DarkModeSource = 'user' | 'system' | 'storage';
3
+ export interface UseNsDarkModeReturn {
4
+ /** Whether dark mode is currently active */
5
+ isDark: Readonly<Ref<boolean>>;
6
+ /** What triggered the current state */
7
+ source: Readonly<Ref<DarkModeSource>>;
8
+ /** Enable dark mode */
9
+ enable: () => void;
10
+ /** Disable dark mode */
11
+ disable: () => void;
12
+ /** Toggle dark mode */
13
+ toggle: () => void;
14
+ /** Reset to system preference (clears localStorage override) */
15
+ useSystem: () => void;
16
+ }
17
+ /**
18
+ * Dark-mode composable that syncs the document root classes/attributes
19
+ * with the design-token dark selectors and persists user preference.
20
+ *
21
+ * Activation order:
22
+ * 1. localStorage override (if previously set by user)
23
+ * 2. OS `prefers-color-scheme: dark`
24
+ * 3. Explicit `enable()` / `disable()` / `toggle()` calls
25
+ *
26
+ * This sets `class="dark"` and `data-theme="dark"` on `<html>`,
27
+ * matching the selectors in `tokens.css`.
28
+ *
29
+ * @example
30
+ * ```ts
31
+ * import { useNsDarkMode } from '@nonsuch/component-library'
32
+ *
33
+ * const { isDark, toggle } = useNsDarkMode()
34
+ * ```
35
+ */
36
+ export declare function useNsDarkMode(): UseNsDarkModeReturn;
37
+ export {};
package/dist/composables/useNsDefaults.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { type ComputedRef } from 'vue';
2
+ type NestedKeyOf<T> = T extends object ? {
3
+ [K in keyof T & string]: T[K] extends object ? `${K}.${NestedKeyOf<T[K]>}` : K;
4
+ }[keyof T & string] : never;
5
+ /**
6
+ * Resolve a user-visible string with the following priority:
7
+ * 1. Explicit prop value (if not undefined/null)
8
+ * 2. Injected Ns locale (via provideNsLocale)
9
+ * 3. Built-in en-CA default
10
+ *
11
+ * Usage inside a component:
12
+ *
13
+ * ```ts
14
+ * const props = defineProps<{ addToCartLabel?: string }>()
15
+ * const addToCartText = useNsDefault(() => props.addToCartLabel, 'product.addToCart')
16
+ * ```
17
+ *
18
+ * In the template: `{{ addToCartText }}`
19
+ *
20
+ * @param prop - Getter returning the optional prop value
21
+ * @param localeKey - Dot-path key into NsLocaleMessages (e.g. 'product.addToCart')
22
+ * @returns Computed string, always resolved
23
+ */
24
+ export declare function useNsDefault<K extends NestedKeyOf<import('../locale/NsLocaleMessages').NsLocaleMessages>>(prop: () => string | undefined | null, localeKey: K): ComputedRef<string>;
25
+ export {};
package/dist/composables/useNsLocale.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ import { type InjectionKey } from 'vue';
2
+ import type { NsLocaleMessages } from '../locale/NsLocaleMessages';
3
+ /**
4
+ * Injection key for the Ns locale messages.
5
+ * Components use this internally — consumers call provideNsLocale().
6
+ */
7
+ export declare const NsLocaleKey: InjectionKey<NsLocaleMessages>;
8
+ /**
9
+ * Provide Ns locale messages to all descendant Ns components.
10
+ *
11
+ * Call this in your app's root setup (e.g. App.vue or a boot file):
12
+ *
13
+ * ```ts
14
+ * import { provideNsLocale } from '@nonsuch/component-library'
15
+ * import { myFrenchLocale } from './locales/fr'
16
+ *
17
+ * // In setup()
18
+ * provideNsLocale(myFrenchLocale)
19
+ * ```
20
+ */
21
+ export declare function provideNsLocale(messages: NsLocaleMessages): void;
22
+ /**
23
+ * Internal composable — used by Ns components to read locale strings.
24
+ *
25
+ * Returns the injected locale or falls back to en-CA defaults.
26
+ * Components should NOT re-export this — it's an implementation detail.
27
+ */
28
+ export declare function useNsLocale(): NsLocaleMessages;
package/dist/index.d.ts ADDED
@@ -0,0 +1,43 @@
1
+ export { default as NsButton } from './components/NsButton/NsButton.vue';
2
+ export type { NsButtonProps } from './components/NsButton/NsButton.vue';
3
+ export { default as NsSkeleton } from './components/NsSkeleton/NsSkeleton.vue';
4
+ export type { NsSkeletonProps, NsSkeletonType, NsSkeletonAnimation, } from './components/NsSkeleton/NsSkeleton.vue';
5
+ export { default as NsThemeProvider } from './components/NsThemeProvider/NsThemeProvider.vue';
6
+ export type { NsThemeProviderProps } from './components/NsThemeProvider/NsThemeProvider.vue';
7
+ export { default as NsInput } from './components/NsInput/NsInput.vue';
8
+ export type { NsInputProps } from './components/NsInput/NsInput.vue';
9
+ export { default as NsCard } from './components/NsCard/NsCard.vue';
10
+ export type { NsCardProps } from './components/NsCard/NsCard.vue';
11
+ export { default as NsSelect } from './components/NsSelect/NsSelect.vue';
12
+ export type { NsSelectProps, NsSelectOption } from './components/NsSelect/NsSelect.vue';
13
+ export { default as NsCheckbox } from './components/NsCheckbox/NsCheckbox.vue';
14
+ export type { NsCheckboxProps } from './components/NsCheckbox/NsCheckbox.vue';
15
+ export { default as NsToggle } from './components/NsToggle/NsToggle.vue';
16
+ export type { NsToggleProps } from './components/NsToggle/NsToggle.vue';
17
+ export { default as NsForm } from './components/NsForm/NsForm.vue';
18
+ export type { NsFormProps } from './components/NsForm/NsForm.vue';
19
+ export { default as NsDialog } from './components/NsDialog/NsDialog.vue';
20
+ export type { NsDialogProps } from './components/NsDialog/NsDialog.vue';
21
+ export { default as NsBanner } from './components/NsBanner/NsBanner.vue';
22
+ export type { NsBannerProps, NsBannerType } from './components/NsBanner/NsBanner.vue';
23
+ export { default as NsAvatar } from './components/NsAvatar/NsAvatar.vue';
24
+ export type { NsAvatarProps, NsAvatarSize } from './components/NsAvatar/NsAvatar.vue';
25
+ export { default as NsChip } from './components/NsChip/NsChip.vue';
26
+ export type { NsChipProps } from './components/NsChip/NsChip.vue';
27
+ export { default as NsList } from './components/NsList/NsList.vue';
28
+ export type { NsListProps } from './components/NsList/NsList.vue';
29
+ export { default as NsTooltip } from './components/NsTooltip/NsTooltip.vue';
30
+ export type { NsTooltipProps, NsTooltipAnchor } from './components/NsTooltip/NsTooltip.vue';
31
+ export { createNonsuch } from './plugin';
32
+ export type { NsPluginOptions } from './plugin';
33
+ export { createQuasarConfig } from './quasarConfig';
34
+ export type { QuasarConfigOverrides, QuasarBrandColors } from './quasarConfig';
35
+ export type { NsLocaleMessages } from './locale/NsLocaleMessages';
36
+ export { nsLocaleEnCA } from './locale/en-CA';
37
+ export { nsLocaleFrCA } from './locale/fr-CA';
38
+ export { provideNsLocale, useNsLocale, NsLocaleKey } from './composables/useNsLocale';
39
+ export { useNsDefault } from './composables/useNsDefaults';
40
+ export { useNsDarkMode } from './composables/useNsDarkMode';
41
+ export type { UseNsDarkModeReturn } from './composables/useNsDarkMode';
42
+ export type { NsToken } from './tokens';
43
+ export { getToken } from './tokens';
package/dist/locale/NsLocaleMessages.d.ts ADDED
@@ -0,0 +1,58 @@
1
+ /**
2
+ * NsLocaleMessages — typed interface for all Ns-specific strings.
3
+ *
4
+ * The library ships default locale objects (nsLocaleEnCA, nsLocaleFrCA).
5
+ * Consuming apps can merge this into their vue-i18n messages
6
+ * under a namespace like `$ns`, or provide translations via
7
+ * the `provideNsLocale()` helper.
8
+ *
9
+ * The library itself never imports or calls vue-i18n — it stays
10
+ * fully decoupled. Components resolve strings via:
11
+ * 1. Explicit prop (highest priority)
12
+ * 2. Injected NsLocaleMessages (via provideNsLocale)
13
+ * 3. Built-in English defaults (nsLocaleEnCA)
14
+ *
15
+ * Quasar-originated strings (e.g. "Close", "Clear") continue to
16
+ * use $q.lang.* and are NOT duplicated here.
17
+ */
18
+ export interface NsLocaleMessages {
19
+ /** Common strings shared across components */
20
+ common: {
21
+ loading: string;
22
+ retry: string;
23
+ cancel: string;
24
+ confirm: string;
25
+ save: string;
26
+ delete: string;
27
+ edit: string;
28
+ search: string;
29
+ noResults: string;
30
+ showMore: string;
31
+ showLess: string;
32
+ };
33
+ /** Product-related strings (NsProductCard, etc.) */
34
+ product: {
35
+ addToCart: string;
36
+ outOfStock: string;
37
+ inStock: string;
38
+ quantity: string;
39
+ price: string;
40
+ sale: string;
41
+ };
42
+ /** Media/image viewer strings */
43
+ media: {
44
+ zoomIn: string;
45
+ zoomOut: string;
46
+ fullscreen: string;
47
+ exitFullscreen: string;
48
+ previousImage: string;
49
+ nextImage: string;
50
+ };
51
+ /** Form validation messages */
52
+ validation: {
53
+ required: string;
54
+ invalidEmail: string;
55
+ tooShort: string;
56
+ tooLong: string;
57
+ };
58
+ }
package/dist/locale/en-CA.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import type { NsLocaleMessages } from './NsLocaleMessages';
2
+ /**
3
+ * English (Canada) locale for Ns-specific strings.
4
+ *
5
+ * This is the built-in fallback — components use these values
6
+ * when no locale is provided via provideNsLocale().
7
+ */
8
+ export declare const nsLocaleEnCA: NsLocaleMessages;
package/dist/locale/fr-CA.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import type { NsLocaleMessages } from './NsLocaleMessages';
2
+ /**
3
+ * French (Canada) locale for Ns-specific strings.
4
+ */
5
+ export declare const nsLocaleFrCA: NsLocaleMessages;
package/dist/locale/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export type { NsLocaleMessages } from './NsLocaleMessages';
2
+ export { nsLocaleEnCA } from './en-CA';
3
+ export { nsLocaleFrCA } from './fr-CA';
package/dist/nonsuch-components.css CHANGED
@@ -1 +1 @@
1
- .ns-button[data-v-7f6c2760]{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-62627927]{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-41ecea50]{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-41ecea50]:hover{box-shadow:var(--ns-shadow-md)}.ns-card--flat[data-v-41ecea50],.ns-card--flat[data-v-41ecea50]:hover{box-shadow:none}.ns-card__header[data-v-41ecea50]{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-beb96bf2],.ns-form[data-v-0fd74bb1]{font-family:var(--ns-font-family-text)}.ns-dialog__card[data-v-9bff0f12]{border-radius:var(--ns-radius-lg);font-family:var(--ns-font-family-text);min-width:320px}.ns-dialog__header[data-v-9bff0f12]{font-family:var(--ns-font-family-display)}.ns-banner[data-v-35ed7ae7]{font-family:var(--ns-font-family-text);border-radius:var(--ns-radius-md)}.ns-banner--info[data-v-35ed7ae7]{background-color:var(--ns-color-info-bg, #e3f2fd);color:var(--ns-color-info-text, #0d47a1)}.ns-banner--success[data-v-35ed7ae7]{background-color:var(--ns-color-success-bg, #e8f5e9);color:var(--ns-color-success-text, #1b5e20)}.ns-banner--warning[data-v-35ed7ae7]{background-color:var(--ns-color-warning-bg, #fff3e0);color:var(--ns-color-warning-text, #e65100)}.ns-banner--error[data-v-35ed7ae7]{background-color:var(--ns-color-error-bg, #ffebee);color:var(--ns-color-error-text, #b71c1c)}.ns-avatar[data-v-e4df869f]{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-b778ff3f]{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)}
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)}