@vuecs/design 1.0.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.
- package/LICENSE +201 -0
- package/README.md +57 -0
- package/assets/animations.css +506 -0
- package/assets/index.css +197 -0
- package/assets/palettes.css +303 -0
- package/assets/standalone.css +37 -0
- package/dist/core/color-mode/bind.d.ts +12 -0
- package/dist/core/color-mode/bind.d.ts.map +1 -0
- package/dist/core/color-mode/composable.d.ts +13 -0
- package/dist/core/color-mode/composable.d.ts.map +1 -0
- package/dist/core/color-mode/index.d.ts +4 -0
- package/dist/core/color-mode/index.d.ts.map +1 -0
- package/dist/core/color-mode/types.d.ts +36 -0
- package/dist/core/color-mode/types.d.ts.map +1 -0
- package/dist/core/color-palette/apply.d.ts +34 -0
- package/dist/core/color-palette/apply.d.ts.map +1 -0
- package/dist/core/color-palette/bind.d.ts +14 -0
- package/dist/core/color-palette/bind.d.ts.map +1 -0
- package/dist/core/color-palette/catalog.d.ts +78 -0
- package/dist/core/color-palette/catalog.d.ts.map +1 -0
- package/dist/core/color-palette/composable.d.ts +34 -0
- package/dist/core/color-palette/composable.d.ts.map +1 -0
- package/dist/core/color-palette/index.d.ts +7 -0
- package/dist/core/color-palette/index.d.ts.map +1 -0
- package/dist/core/color-palette/render.d.ts +16 -0
- package/dist/core/color-palette/render.d.ts.map +1 -0
- package/dist/core/color-palette/types.d.ts +107 -0
- package/dist/core/color-palette/types.d.ts.map +1 -0
- package/dist/core/index.d.ts +4 -0
- package/dist/core/index.d.ts.map +1 -0
- package/dist/core/theme-runtime/capture.d.ts +32 -0
- package/dist/core/theme-runtime/capture.d.ts.map +1 -0
- package/dist/core/theme-runtime/composable.d.ts +34 -0
- package/dist/core/theme-runtime/composable.d.ts.map +1 -0
- package/dist/core/theme-runtime/index.d.ts +4 -0
- package/dist/core/theme-runtime/index.d.ts.map +1 -0
- package/dist/core/theme-runtime/types.d.ts +42 -0
- package/dist/core/theme-runtime/types.d.ts.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.mjs +467 -0
- package/dist/index.mjs.map +1 -0
- package/dist/utils/object.d.ts +2 -0
- package/dist/utils/object.d.ts.map +1 -0
- package/package.json +83 -0
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { Ref } from 'vue';
|
|
2
|
+
import type { BindColorPaletteOptions, UseColorPaletteReturn } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Wire any reactive `Ref<T>` into the palette runtime: render the
|
|
5
|
+
* current value via the theme-supplied `render` function, apply it via
|
|
6
|
+
* `applyColorPaletteCss`, and re-apply on every change.
|
|
7
|
+
*
|
|
8
|
+
* Generic: each theme defines its own palette shape `T` and renderer.
|
|
9
|
+
* `@vuecs/theme-tailwind` wraps this with its `ColorPaletteConfig` and
|
|
10
|
+
* `renderColorPaletteStyles`; community themes can do the same with their
|
|
11
|
+
* own shapes — including custom merge semantics via `options.extend`.
|
|
12
|
+
*/
|
|
13
|
+
export declare function bindColorPalette<T>(source: Ref<T>, options: BindColorPaletteOptions<T>): UseColorPaletteReturn<T>;
|
|
14
|
+
//# sourceMappingURL=bind.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bind.d.ts","sourceRoot":"","sources":["../../../src/core/color-palette/bind.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE/B,OAAO,KAAK,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE9E;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAC9B,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,EACd,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACpC,qBAAqB,CAAC,CAAC,CAAC,CAyC1B"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Canonical palette catalog for the vuecs design system.
|
|
3
|
+
*
|
|
4
|
+
* The names originated in Tailwind v4 (see `@vuecs/design/standalone`'s
|
|
5
|
+
* `palettes.css`, generated from `tailwindcss/theme.css`), but the
|
|
6
|
+
* catalog is now considered design-owned: every supported palette
|
|
7
|
+
* source — Tailwind via `@import "tailwindcss"`, or the
|
|
8
|
+
* standalone subpath — provides the matching `--color-<palette>-<shade>`
|
|
9
|
+
* literals so `setColorPalette()` resolves correctly regardless of
|
|
10
|
+
* whether Tailwind is loaded.
|
|
11
|
+
*
|
|
12
|
+
* Themes typically reuse this catalog verbatim (theme-tailwind and
|
|
13
|
+
* theme-bulma both declare `palette.names: COLOR_PALETTES`). A theme
|
|
14
|
+
* with extra palette names just defines its own local union:
|
|
15
|
+
*
|
|
16
|
+
* type AcmePaletteName = ColorPaletteName | 'acme-blue';
|
|
17
|
+
*
|
|
18
|
+
* — and ships its own `palette.names` array.
|
|
19
|
+
*/
|
|
20
|
+
/**
|
|
21
|
+
* The six semantic scales every vuecs theme exposes through the
|
|
22
|
+
* `--vc-color-<scale>-*` variable family. A `setColorPalette({
|
|
23
|
+
* primary: 'green' })` call binds one scale to one palette catalog
|
|
24
|
+
* entry at runtime.
|
|
25
|
+
*/
|
|
26
|
+
export declare const SEMANTIC_SCALES: readonly ["primary", "neutral", "success", "warning", "error", "info"];
|
|
27
|
+
export type SemanticScaleName = typeof SEMANTIC_SCALES[number];
|
|
28
|
+
/**
|
|
29
|
+
* The 22 catalog palettes shipped with `@vuecs/design` (sourced
|
|
30
|
+
* verbatim from Tailwind v4). Any of these can be assigned to a
|
|
31
|
+
* `SemanticScaleName` via `setColorPalette()`.
|
|
32
|
+
*/
|
|
33
|
+
export declare const COLOR_PALETTES: readonly ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
|
|
34
|
+
/**
|
|
35
|
+
* Augmentation hook for community themes that extend the catalog with
|
|
36
|
+
* their own palette names. Defaults to empty — `ColorPaletteName` is just
|
|
37
|
+
* the 22-name Tailwind-derived catalog. A theme that ships extra palettes
|
|
38
|
+
* widens the union via declaration merging:
|
|
39
|
+
*
|
|
40
|
+
* declare module '@vuecs/design' {
|
|
41
|
+
* interface ExtraColorPaletteNames {
|
|
42
|
+
* 'acme-blue': true;
|
|
43
|
+
* 'acme-orange': true;
|
|
44
|
+
* }
|
|
45
|
+
* }
|
|
46
|
+
*
|
|
47
|
+
* Both the SPA composables (`@vuecs/theme-tailwind`'s `useColorPalette`,
|
|
48
|
+
* etc.) and `@vuecs/nuxt`'s `colorPalette.value` option pick up the
|
|
49
|
+
* extension automatically because both type against `ColorPaletteName`.
|
|
50
|
+
*/
|
|
51
|
+
export interface ExtraColorPaletteNames {
|
|
52
|
+
}
|
|
53
|
+
export type ColorPaletteName = typeof COLOR_PALETTES[number] | keyof ExtraColorPaletteNames;
|
|
54
|
+
/**
|
|
55
|
+
* Tailwind-style 11-stop shade ladder. The same ladder appears in
|
|
56
|
+
* every catalog entry (the standalone subpath's `palettes.css` and
|
|
57
|
+
* Tailwind's own `theme.css` both emit `--color-<palette>-<shade>`
|
|
58
|
+
* for each stop).
|
|
59
|
+
*/
|
|
60
|
+
export declare const COLOR_PALETTE_SHADES: readonly ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
|
|
61
|
+
export type ColorPaletteShade = typeof COLOR_PALETTE_SHADES[number];
|
|
62
|
+
/**
|
|
63
|
+
* Canonical runtime palette config — a partial mapping of every
|
|
64
|
+
* semantic scale to a catalog palette name. Used by every theme that
|
|
65
|
+
* opts into runtime palette switching (`theme-tailwind`, `theme-bulma`,
|
|
66
|
+
* and any future palette-aware theme).
|
|
67
|
+
*
|
|
68
|
+
* Both keys (`SemanticScaleName`) and values (`ColorPaletteName`)
|
|
69
|
+
* widen automatically via declaration merging: `ExtraColorPaletteNames`
|
|
70
|
+
* adds value-side names; the canonical scale list is fixed at six.
|
|
71
|
+
*
|
|
72
|
+
* Themes whose internal scale names diverge from the canonical six
|
|
73
|
+
* declare a `scaleAliases` map on their `Theme.palette` slot — the
|
|
74
|
+
* dispatcher translates input keys before calling `palette.handle`,
|
|
75
|
+
* so the public-facing config still uses canonical names.
|
|
76
|
+
*/
|
|
77
|
+
export type ColorPaletteConfig = Partial<Record<SemanticScaleName, ColorPaletteName>>;
|
|
78
|
+
//# sourceMappingURL=catalog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"catalog.d.ts","sourceRoot":"","sources":["../../../src/core/color-palette/catalog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,eAAe,wEAOlB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,OAAO,eAAe,CAAC,MAAM,CAAC,CAAC;AAE/D;;;;GAIG;AACH,eAAO,MAAM,cAAc,gNAuBjB,CAAC;AAEX;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,sBAAsB;CAAG;AAE1C,MAAM,MAAM,gBAAgB,GAAG,OAAO,cAAc,CAAC,MAAM,CAAC,GAAG,MAAM,sBAAsB,CAAC;AAE5F;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,uFAYvB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,OAAO,oBAAoB,CAAC,MAAM,CAAC,CAAC;AAEpE;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { UseColorPaletteOptions, UseColorPaletteReturn } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Theme-aware reactive palette state — un-shared variant.
|
|
4
|
+
*
|
|
5
|
+
* Concatenates every installed theme's `palette.handle` output into the
|
|
6
|
+
* `<style id="vc-color-palette">` element. Walking the installed themes
|
|
7
|
+
* each render means runtime theme swaps via `setThemes()` automatically
|
|
8
|
+
* pick up the new renderer chain.
|
|
9
|
+
*
|
|
10
|
+
* Concat (rather than last-wins) is the doctrinal semantic: when an app
|
|
11
|
+
* stacks multiple palette-aware themes (the docs-site case where
|
|
12
|
+
* Tailwind components and Bulma components share the same picker UI),
|
|
13
|
+
* each theme's renderer emits its own non-overlapping CSS rules —
|
|
14
|
+
* Tailwind rebinds `--vc-color-*`, Bulma writes per-variant HSL channel
|
|
15
|
+
* vars. The CSS cascade resolves any incidental overlap with
|
|
16
|
+
* later-rule-wins semantics, so concat behaves like last-wins for
|
|
17
|
+
* overlapping properties AND emits both themes' unique properties.
|
|
18
|
+
*
|
|
19
|
+
* Production callers should use `useColorPalette` (the shared variant
|
|
20
|
+
* below). This un-shared form is exposed primarily for testing — every
|
|
21
|
+
* call creates a fresh `watchEffect` and palette state.
|
|
22
|
+
*/
|
|
23
|
+
export declare function useColorPaletteUnshared<T extends Record<string, unknown> = Record<string, string>>(options?: UseColorPaletteOptions<T>): UseColorPaletteReturn<T>;
|
|
24
|
+
/**
|
|
25
|
+
* Theme-aware reactive palette state with localStorage persistence
|
|
26
|
+
* (plan 021 slice 2).
|
|
27
|
+
*
|
|
28
|
+
* Wrapped with `createSharedComposable` so every call site shares the
|
|
29
|
+
* same ref + watcher. For SSR-aware cookie-backed storage (Nuxt), the
|
|
30
|
+
* matching Nuxt module ships its own composable that calls
|
|
31
|
+
* `bindColorPalette()` directly with a cookie-backed ref.
|
|
32
|
+
*/
|
|
33
|
+
export declare const useColorPalette: typeof useColorPaletteUnshared;
|
|
34
|
+
//# sourceMappingURL=composable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"composable.d.ts","sourceRoot":"","sources":["../../../src/core/color-palette/composable.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA4C7E;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,uBAAuB,CACnC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC5D,OAAO,GAAE,sBAAsB,CAAC,CAAC,CAAM,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAkFnE;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,gCAAkD,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/color-palette/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { ThemeRuntimeEntry } from '../theme-runtime/types';
|
|
2
|
+
/**
|
|
3
|
+
* Concatenate every installed theme's `palette.handle` output into a
|
|
4
|
+
* single CSS string. SSR plugins emit the result as the
|
|
5
|
+
* `<style id="vc-color-palette">` block so palette-aware themes flow
|
|
6
|
+
* on first paint.
|
|
7
|
+
*
|
|
8
|
+
* Mirrors the client-side concat semantics in `useColorPalette()`:
|
|
9
|
+
* non-overlapping rules from different themes coexist; CSS cascade
|
|
10
|
+
* resolves any incidental overlap with later-rule-wins.
|
|
11
|
+
*
|
|
12
|
+
* Errors thrown by a theme's handler are caught + logged so one
|
|
13
|
+
* broken theme can't crash SSR; other themes still emit.
|
|
14
|
+
*/
|
|
15
|
+
export declare function renderColorPaletteFromThemes(themes: readonly ThemeRuntimeEntry[], palette: Record<string, string>): string;
|
|
16
|
+
//# sourceMappingURL=render.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/core/color-palette/render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE;;;;;;;;;;;;GAYG;AACH,wBAAgB,4BAA4B,CACxC,MAAM,EAAE,SAAS,iBAAiB,EAAE,EACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,MAAM,CAgCR"}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import type { ComputedRef, Ref } from 'vue';
|
|
2
|
+
export interface UseColorPaletteReturn<T> {
|
|
3
|
+
/** Read-only view of the current palette. */
|
|
4
|
+
current: ComputedRef<T>;
|
|
5
|
+
/**
|
|
6
|
+
* Replace the entire palette. Themes typically pass an empty config
|
|
7
|
+
* to reset to defaults (the meaning of "empty" is theme-defined).
|
|
8
|
+
*/
|
|
9
|
+
set(palette: T): void;
|
|
10
|
+
/**
|
|
11
|
+
* Merge `partial` over the current value via the theme's `extend`
|
|
12
|
+
* implementation. Default semantics: shallow object spread. Themes
|
|
13
|
+
* with non-object palette shapes pass their own via `BindColorPaletteOptions.extend`.
|
|
14
|
+
*/
|
|
15
|
+
extend(partial: Partial<T>): void;
|
|
16
|
+
}
|
|
17
|
+
export interface BindColorPaletteOptions<T> {
|
|
18
|
+
/** Render the palette value as a CSS string applied to `<style id="vc-color-palette">`. */
|
|
19
|
+
render: (value: T) => string;
|
|
20
|
+
/**
|
|
21
|
+
* Override the default shallow-merge semantics of `extend()`. The
|
|
22
|
+
* default works for any `Record`-shaped palette; themes with
|
|
23
|
+
* structured non-object shapes (deep-merge, replace-on-conflict,
|
|
24
|
+
* etc.) supply their own here.
|
|
25
|
+
*/
|
|
26
|
+
extend: (current: T, partial: Partial<T>) => T;
|
|
27
|
+
/**
|
|
28
|
+
* Target a non-global Document (iframes, test environments).
|
|
29
|
+
* Defaults to `globalThis.document`; on the server (`undefined`)
|
|
30
|
+
* the watcher is still installed but `applyColorPaletteCss` is a
|
|
31
|
+
* no-op — the first reactive read on the client triggers a re-paint.
|
|
32
|
+
*/
|
|
33
|
+
document?: Document;
|
|
34
|
+
/**
|
|
35
|
+
* CSP nonce written to the `<style id="vc-color-palette">` element.
|
|
36
|
+
* Accepts a string (resolved once) or a getter `() => string | undefined`
|
|
37
|
+
* (called on every re-apply, so reactive nonce changes propagate).
|
|
38
|
+
*/
|
|
39
|
+
nonce?: string | (() => string | undefined);
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Options for the generic theme-aware `useColorPalette()` dispatcher.
|
|
43
|
+
*
|
|
44
|
+
* `useColorPalette` is wrapped with `createSharedComposable`, so these
|
|
45
|
+
* options are honored **only on the first call**. Subsequent invocations
|
|
46
|
+
* from anywhere in the app receive the cached instance with the original
|
|
47
|
+
* options — passing a different `storageKey`, `sanitize`, or `extend` is
|
|
48
|
+
* a silent no-op. For per-call configuration with custom storage,
|
|
49
|
+
* compose `bindColorPalette()` directly with your own ref.
|
|
50
|
+
*/
|
|
51
|
+
export interface UseColorPaletteOptions<T extends Record<string, unknown>> {
|
|
52
|
+
/** Initial palette when no persisted value exists. Default: `{}` (cast to `T`). */
|
|
53
|
+
initial?: T;
|
|
54
|
+
/**
|
|
55
|
+
* Reactive backing store for the palette state. When provided,
|
|
56
|
+
* overrides the default `useStorage` / `ref` backing — useful for
|
|
57
|
+
* SSR-aware persistence (e.g. `@vuecs/nuxt`'s cookie-backed
|
|
58
|
+
* composable passes `useCookie<T>(name)` here). When omitted, the
|
|
59
|
+
* composable falls back to localStorage (`persist: true`) or an
|
|
60
|
+
* in-memory `ref` (`persist: false`).
|
|
61
|
+
*
|
|
62
|
+
* The composable still walks installed themes' `palette.handle`
|
|
63
|
+
* hooks and re-applies the rendered CSS on every change to `source`
|
|
64
|
+
* — only the persistence layer is replaced.
|
|
65
|
+
*/
|
|
66
|
+
source?: Ref<T>;
|
|
67
|
+
/**
|
|
68
|
+
* Persist via localStorage (`useStorage` from `@vueuse/core`).
|
|
69
|
+
* Ignored when `source` is provided. Default: `true`.
|
|
70
|
+
*/
|
|
71
|
+
persist?: boolean;
|
|
72
|
+
/**
|
|
73
|
+
* Storage key for the default backend. Ignored when `source` is
|
|
74
|
+
* provided. Default: `'vc-color-palette'`.
|
|
75
|
+
*/
|
|
76
|
+
storageKey?: string;
|
|
77
|
+
/**
|
|
78
|
+
* Theme-aware sanitizer for serialized values. The default filters
|
|
79
|
+
* input keys to `SEMANTIC_SCALES` and input values to `COLOR_PALETTES`
|
|
80
|
+
* (the canonical catalog) — sufficient for both shipping themes.
|
|
81
|
+
* Pass your own to widen acceptance for themes that use
|
|
82
|
+
* `ExtraColorPaletteNames`. (`Theme.palette.scaleAliases` doesn't
|
|
83
|
+
* affect this layer — aliases translate canonical keys inside the
|
|
84
|
+
* dispatcher AFTER sanitize runs, so the sanitizer still keys on
|
|
85
|
+
* canonical names.)
|
|
86
|
+
*/
|
|
87
|
+
sanitize?: (raw: unknown) => T;
|
|
88
|
+
/**
|
|
89
|
+
* Override the default shallow-merge semantics of `extend()`. Default:
|
|
90
|
+
* `{ ...current, ...partial }`. Themes with structured non-object
|
|
91
|
+
* shapes supply their own.
|
|
92
|
+
*/
|
|
93
|
+
extend?: (current: T, partial: Partial<T>) => T;
|
|
94
|
+
/**
|
|
95
|
+
* CSP nonce written to the `<style id="vc-color-palette">` element.
|
|
96
|
+
* Accepts a string (resolved once) or a getter
|
|
97
|
+
* `() => string | undefined` (called on every re-render, so reactive
|
|
98
|
+
* nonce changes propagate). CSP-strict consumers wire this from
|
|
99
|
+
* `@vuecs/core`'s `useConfig('nonce')`:
|
|
100
|
+
*
|
|
101
|
+
* useColorPalette({ nonce: () => useConfig('nonce').value })
|
|
102
|
+
*
|
|
103
|
+
* Left unset, no nonce attribute is emitted.
|
|
104
|
+
*/
|
|
105
|
+
nonce?: string | (() => string | undefined);
|
|
106
|
+
}
|
|
107
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/color-palette/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE5C,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACpC,6CAA6C;IAC7C,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,OAAO,EAAE,CAAC,GAAG,IAAI,CAAC;IACtB;;;;OAIG;IACH,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;CACrC;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACtC,2FAA2F;IAC3F,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;IAC7B;;;;;OAKG;IACH,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC/C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;CAC/C;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACrE,mFAAmF;IACnF,OAAO,CAAC,EAAE,CAAC,CAAC;IACZ;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,CAAC,CAAC;IAC/B;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAChD;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;CAC/C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { ThemeRuntimeEntry } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Build a synthetic Document-like whose `documentElement` records
|
|
4
|
+
* `setAttribute` / `removeAttribute` calls into the supplied target
|
|
5
|
+
* record, plus a no-op `classList`. **No other Document or Element
|
|
6
|
+
* APIs are stubbed** — themes that call `doc.createElement`,
|
|
7
|
+
* `doc.head.appendChild`, etc. WILL throw at SSR runtime. Themes
|
|
8
|
+
* needing richer DOM access from `colorMode.handle` should guard their
|
|
9
|
+
* CSR-only logic with `if (typeof window === 'undefined') return;`
|
|
10
|
+
* and split the SSR-flowing bits into declarative `setAttribute` calls.
|
|
11
|
+
*
|
|
12
|
+
* Exposed for advanced consumers; the higher-level
|
|
13
|
+
* `captureColorModeAttrs()` covers the common case and catches errors
|
|
14
|
+
* per theme so a single broken theme can't crash SSR.
|
|
15
|
+
*/
|
|
16
|
+
export declare function createCaptureDocument(target: Record<string, string>): Document;
|
|
17
|
+
/**
|
|
18
|
+
* Walk every installed theme's `colorMode.handle` against a synthetic
|
|
19
|
+
* Document and capture the resulting attribute mutations. SSR plugins
|
|
20
|
+
* use this to flow `data-bs-theme` / `data-theme` (or any other
|
|
21
|
+
* attribute a theme declares) into `useHead({ htmlAttrs })` before
|
|
22
|
+
* first paint.
|
|
23
|
+
*
|
|
24
|
+
* Each theme's handler runs in install order. If multiple themes set
|
|
25
|
+
* the same attribute, the last one wins — same semantic as the live
|
|
26
|
+
* `document.documentElement.setAttribute` chain on the client.
|
|
27
|
+
*
|
|
28
|
+
* Errors thrown by a theme's handler are caught + logged as a warning
|
|
29
|
+
* so one malformed theme can't crash SSR; other themes still run.
|
|
30
|
+
*/
|
|
31
|
+
export declare function captureColorModeAttrs(themes: readonly ThemeRuntimeEntry[], mode: 'light' | 'dark'): Record<string, string>;
|
|
32
|
+
//# sourceMappingURL=capture.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"capture.d.ts","sourceRoot":"","sources":["../../../src/core/theme-runtime/capture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAuBjD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,QAAQ,CAwB9E;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,qBAAqB,CACjC,MAAM,EAAE,SAAS,iBAAiB,EAAE,EACpC,IAAI,EAAE,OAAO,GAAG,MAAM,GACvB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA8BxB"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { InjectionKey } from 'vue';
|
|
2
|
+
import type { ThemeRuntimeManager } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Globally-shared `InjectionKey` for the ThemeManager. SSR plugins
|
|
5
|
+
* (Nuxt, future frameworks) that need to look up the manager from
|
|
6
|
+
* outside Vue's component context use this with `app.runWithContext`
|
|
7
|
+
* (or equivalent) + `inject`.
|
|
8
|
+
*
|
|
9
|
+
* Bridge between `@vuecs/design` and `@vuecs/core`'s `ThemeManager`
|
|
10
|
+
* without a hard runtime dep: both packages reference the same
|
|
11
|
+
* `Symbol.for('VCThemeManager')` registry key, so the ThemeManager
|
|
12
|
+
* provided by `installThemeManager(app)` (in `@vuecs/core`) is
|
|
13
|
+
* reachable here. `Symbol.for(...)` is reference-equal across module
|
|
14
|
+
* boundaries, and the `InjectionKey<ThemeRuntimeManager>` cast
|
|
15
|
+
* surfaces the manager type to `inject()` callers without leaking
|
|
16
|
+
* `@vuecs/core` internals.
|
|
17
|
+
*
|
|
18
|
+
* `inject()` returns `undefined` if no ThemeManager is installed —
|
|
19
|
+
* design composables use that as the "no theme dispatch" fallback so
|
|
20
|
+
* they keep working in standalone apps that import `@vuecs/design`
|
|
21
|
+
* without `@vuecs/core`.
|
|
22
|
+
*/
|
|
23
|
+
export declare const THEME_RUNTIME_MANAGER_SYMBOL: InjectionKey<ThemeRuntimeManager>;
|
|
24
|
+
/**
|
|
25
|
+
* Look up the ThemeManager installed by `app.use(vuecs)` (or
|
|
26
|
+
* `installThemeManager(app)`). Returns `undefined` if no manager is
|
|
27
|
+
* provided in the current setup context — design composables fall back
|
|
28
|
+
* to no-dispatch behaviour in that case.
|
|
29
|
+
*
|
|
30
|
+
* Must be called during `setup()` or another composable's setup phase
|
|
31
|
+
* (Vue's `inject()` requirement).
|
|
32
|
+
*/
|
|
33
|
+
export declare function useThemeRuntimeManager(): ThemeRuntimeManager | undefined;
|
|
34
|
+
//# sourceMappingURL=composable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"composable.d.ts","sourceRoot":"","sources":["../../../src/core/theme-runtime/composable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAC;AAExC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,4BAA4B,EAAmC,YAAY,CAAC,mBAAmB,CAAC,CAAC;AAE9G;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,IAAI,mBAAmB,GAAG,SAAS,CAExE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/theme-runtime/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Minimal structural projection of `@vuecs/core`'s `ThemeManager`.
|
|
3
|
+
* Only the surface design composables actually need is declared
|
|
4
|
+
* locally — keeps the bridge a runtime-only contract.
|
|
5
|
+
*/
|
|
6
|
+
export interface ThemeRuntimeColorModeHook {
|
|
7
|
+
/**
|
|
8
|
+
* Called when the resolved color mode changes (or on first mount).
|
|
9
|
+
* Side-effecting — themes typically set framework-specific
|
|
10
|
+
* attributes on `doc.documentElement`. Named `handle` (not `apply`)
|
|
11
|
+
* to avoid collision with `Function.prototype.apply`.
|
|
12
|
+
*/
|
|
13
|
+
handle(doc: Document, mode: 'light' | 'dark'): void;
|
|
14
|
+
}
|
|
15
|
+
export interface ThemeRuntimePaletteHook {
|
|
16
|
+
/**
|
|
17
|
+
* Pure function — receives the resolved palette config and returns
|
|
18
|
+
* a CSS string. Named `handle` to align with
|
|
19
|
+
* `ThemeRuntimeColorModeHook.handle`.
|
|
20
|
+
*/
|
|
21
|
+
handle(palette: Record<string, string>): string;
|
|
22
|
+
names?: readonly string[];
|
|
23
|
+
/**
|
|
24
|
+
* Optional canonical-scale → theme-scale rename map. The dispatcher
|
|
25
|
+
* translates input keys before calling `handle`. See `PaletteHook`
|
|
26
|
+
* in `@vuecs/core` for the authoring-side contract.
|
|
27
|
+
*/
|
|
28
|
+
scaleAliases?: Record<string, string>;
|
|
29
|
+
}
|
|
30
|
+
export interface ThemeRuntimeEntry {
|
|
31
|
+
colorMode?: ThemeRuntimeColorModeHook;
|
|
32
|
+
palette?: ThemeRuntimePaletteHook;
|
|
33
|
+
}
|
|
34
|
+
export interface ThemeRuntimeManager {
|
|
35
|
+
/**
|
|
36
|
+
* Reactive list of installed themes (reads through `ThemeManager`'s
|
|
37
|
+
* `shallowRef`, so accessing this inside a `watch` callback tracks
|
|
38
|
+
* theme swaps via `setThemes()`).
|
|
39
|
+
*/
|
|
40
|
+
readonly themes: readonly ThemeRuntimeEntry[];
|
|
41
|
+
}
|
|
42
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/theme-runtime/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,yBAAyB;IACtC;;;;;OAKG;IACH,MAAM,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;CACvD;AAED,MAAM,WAAW,uBAAuB;IACpC;;;;OAIG;IACH,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC;IAChD,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,iBAAiB;IAC9B,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC,OAAO,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,MAAM,WAAW,mBAAmB;IAChC;;;;OAIG;IACH,QAAQ,CAAC,MAAM,EAAE,SAAS,iBAAiB,EAAE,CAAC;CACjD"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
|