@duxweb/dvha-core 0.1.15 → 0.1.17

package/dist/types/hooks/theme.d.ts

@@ -1,8 +1,257 @@
-import type { UseColorModeOptions } from '@vueuse/core';
 import type { ITheme } from '../types';
-export declare function useTheme(options?: UseColorModeOptions): {
+export type ThemeColorType = 'primary' | 'info' | 'success' | 'warning' | 'error' | 'gray';
+export type ThemeColorName = string;
+export type ThemeColorShade = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950';
+export type ThemeSceneType = 'default' | 'hover' | 'pressed' | 'focus' | 'disabled';
+export interface ThemeColorSceneConfig {
+    default: string;
+    hover: string;
+    pressed: string;
+    focus: string;
+    disabled: string;
+}
+export interface ThemeColorSceneGroupConfig {
+    default: ThemeColorSceneConfig;
+    overrides?: Partial<Record<ThemeColorType, Partial<ThemeColorSceneConfig>>>;
+}
+export interface ThemeColorSemanticConfig {
+    text: {
+        dimmed: string;
+        muted: string;
+        toned: string;
+        base: string;
+        highlighted: string;
+        inverted: string;
+    };
+    bg: {
+        base: string;
+        muted: string;
+        elevated: string;
+        accented: string;
+        inverted: string;
+    };
+    border: {
+        base: string;
+        muted: string;
+        accented: string;
+        inverted: string;
+    };
+}
+export interface ThemeConfig {
+    colors: Record<string, Record<string, string>>;
+    colorTypes: ThemeColorType[];
+    colorShades: ThemeColorShade[];
+    colorScenes: {
+        light: ThemeColorSceneGroupConfig;
+        dark: ThemeColorSceneGroupConfig;
+    };
+    colorSemantic: {
+        light: ThemeColorSemanticConfig;
+        dark: ThemeColorSemanticConfig;
+    };
+    colorBase?: {
+        white: string;
+        black: string;
+    };
+}
+export declare function useTheme(): {
     toggle: (n?: number) => "light" | "dark" | "auto";
     mode: import("vue").ShallowRef<"light" | "dark" | "auto">;
     isDark: import("vue").ComputedRef<boolean>;
-    theme: import("vue").ComputedRef<ITheme>;
+    resources: import("vue").ComputedRef<ITheme>;
+    config: {
+        readonly colors: {
+            readonly [x: string]: {
+                readonly [x: string]: string;
+            };
+        };
+        readonly colorTypes: readonly ThemeColorType[];
+        readonly colorShades: readonly ThemeColorShade[];
+        readonly colorScenes: {
+            readonly light: {
+                readonly default: {
+                    readonly default: string;
+                    readonly hover: string;
+                    readonly pressed: string;
+                    readonly focus: string;
+                    readonly disabled: string;
+                };
+                readonly overrides?: {
+                    readonly info?: {
+                        readonly default?: string | undefined;
+                        readonly hover?: string | undefined;
+                        readonly pressed?: string | undefined;
+                        readonly focus?: string | undefined;
+                        readonly disabled?: string | undefined;
+                    } | undefined;
+                    readonly error?: {
+                        readonly default?: string | undefined;
+                        readonly hover?: string | undefined;
+                        readonly pressed?: string | undefined;
+                        readonly focus?: string | undefined;
+                        readonly disabled?: string | undefined;
+                    } | undefined;
+                    readonly gray?: {
+                        readonly default?: string | undefined;
+                        readonly hover?: string | undefined;
+                        readonly pressed?: string | undefined;
+                        readonly focus?: string | undefined;
+                        readonly disabled?: string | undefined;
+                    } | undefined;
+                    readonly primary?: {
+                        readonly default?: string | undefined;
+                        readonly hover?: string | undefined;
+                        readonly pressed?: string | undefined;
+                        readonly focus?: string | undefined;
+                        readonly disabled?: string | undefined;
+                    } | undefined;
+                    readonly success?: {
+                        readonly default?: string | undefined;
+                        readonly hover?: string | undefined;
+                        readonly pressed?: string | undefined;
+                        readonly focus?: string | undefined;
+                        readonly disabled?: string | undefined;
+                    } | undefined;
+                    readonly warning?: {
+                        readonly default?: string | undefined;
+                        readonly hover?: string | undefined;
+                        readonly pressed?: string | undefined;
+                        readonly focus?: string | undefined;
+                        readonly disabled?: string | undefined;
+                    } | undefined;
+                } | undefined;
+            };
+            readonly dark: {
+                readonly default: {
+                    readonly default: string;
+                    readonly hover: string;
+                    readonly pressed: string;
+                    readonly focus: string;
+                    readonly disabled: string;
+                };
+                readonly overrides?: {
+                    readonly info?: {
+                        readonly default?: string | undefined;
+                        readonly hover?: string | undefined;
+                        readonly pressed?: string | undefined;
+                        readonly focus?: string | undefined;
+                        readonly disabled?: string | undefined;
+                    } | undefined;
+                    readonly error?: {
+                        readonly default?: string | undefined;
+                        readonly hover?: string | undefined;
+                        readonly pressed?: string | undefined;
+                        readonly focus?: string | undefined;
+                        readonly disabled?: string | undefined;
+                    } | undefined;
+                    readonly gray?: {
+                        readonly default?: string | undefined;
+                        readonly hover?: string | undefined;
+                        readonly pressed?: string | undefined;
+                        readonly focus?: string | undefined;
+                        readonly disabled?: string | undefined;
+                    } | undefined;
+                    readonly primary?: {
+                        readonly default?: string | undefined;
+                        readonly hover?: string | undefined;
+                        readonly pressed?: string | undefined;
+                        readonly focus?: string | undefined;
+                        readonly disabled?: string | undefined;
+                    } | undefined;
+                    readonly success?: {
+                        readonly default?: string | undefined;
+                        readonly hover?: string | undefined;
+                        readonly pressed?: string | undefined;
+                        readonly focus?: string | undefined;
+                        readonly disabled?: string | undefined;
+                    } | undefined;
+                    readonly warning?: {
+                        readonly default?: string | undefined;
+                        readonly hover?: string | undefined;
+                        readonly pressed?: string | undefined;
+                        readonly focus?: string | undefined;
+                        readonly disabled?: string | undefined;
+                    } | undefined;
+                } | undefined;
+            };
+        };
+        readonly colorSemantic: {
+            readonly light: {
+                readonly text: {
+                    readonly dimmed: string;
+                    readonly muted: string;
+                    readonly toned: string;
+                    readonly base: string;
+                    readonly highlighted: string;
+                    readonly inverted: string;
+                };
+                readonly bg: {
+                    readonly base: string;
+                    readonly muted: string;
+                    readonly elevated: string;
+                    readonly accented: string;
+                    readonly inverted: string;
+                };
+                readonly border: {
+                    readonly base: string;
+                    readonly muted: string;
+                    readonly accented: string;
+                    readonly inverted: string;
+                };
+            };
+            readonly dark: {
+                readonly text: {
+                    readonly dimmed: string;
+                    readonly muted: string;
+                    readonly toned: string;
+                    readonly base: string;
+                    readonly highlighted: string;
+                    readonly inverted: string;
+                };
+                readonly bg: {
+                    readonly base: string;
+                    readonly muted: string;
+                    readonly elevated: string;
+                    readonly accented: string;
+                    readonly inverted: string;
+                };
+                readonly border: {
+                    readonly base: string;
+                    readonly muted: string;
+                    readonly accented: string;
+                    readonly inverted: string;
+                };
+            };
+        };
+        readonly colorBase?: {
+            readonly white: string;
+            readonly black: string;
+        } | undefined;
+    };
+    colorMapping: Readonly<import("vue").Ref<{
+        readonly primary: ThemeColorName;
+        readonly info: ThemeColorName;
+        readonly success: ThemeColorName;
+        readonly warning: ThemeColorName;
+        readonly error: ThemeColorName;
+        readonly gray: ThemeColorName;
+    }, {
+        readonly primary: ThemeColorName;
+        readonly info: ThemeColorName;
+        readonly success: ThemeColorName;
+        readonly warning: ThemeColorName;
+        readonly error: ThemeColorName;
+        readonly gray: ThemeColorName;
+    }>>;
+    colors: import("vue").ComputedRef<string[]>;
+    colorShades: ThemeColorShade[];
+    colorTypes: ThemeColorType[];
+    colorScenes: ThemeSceneType[];
+    cssInit: () => void;
+    cssReset: () => void;
+    setColor: (type: ThemeColorType, colorName: ThemeColorName) => void;
+    setColors: (mappings: Partial<Record<ThemeColorType, ThemeColorName>>) => void;
+    getSceneColor: (type: ThemeColorType, scene?: ThemeSceneType) => string;
+    getShadeColor: (type: ThemeColorType, shade: ThemeColorShade) => string;
+    getSemanticColor: (category: keyof ThemeColorSemanticConfig, key: string) => string;
 };

package/dist/types/hooks/themeColor.d.ts

@@ -0,0 +1,288 @@
+export declare const themeColor: {
+    slate: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    zinc: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    neutral: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    stone: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    orange: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    amber: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    yellow: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    lime: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    green: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    emerald: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    teal: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    cyan: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    sky: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    blue: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    indigo: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    violet: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    purple: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    fuchsia: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    pink: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    rose: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+};

package/dist/types/stores/index.d.ts

@@ -3,3 +3,4 @@ export * from './route';
 export * from './tab';
 export * from './manage';
 export * from './i18n';
+export * from './theme';

package/dist/types/stores/theme.d.ts

@@ -0,0 +1,104 @@
+import { ThemeColorName, ThemeColorType } from '../hooks';
+import { Ref } from 'vue';
+export interface ThemeState {
+    primary: ThemeColorName;
+    info: ThemeColorName;
+    success: ThemeColorName;
+    warning: ThemeColorName;
+    error: ThemeColorName;
+    gray: ThemeColorName;
+}
+export declare function useThemeStore(manageName?: string): import("pinia").Store<`theme-${string}`, Pick<{
+    mode: Ref<"light" | "dark" | "auto", "light" | "dark" | "auto">;
+    setMode: (newMode: "light" | "dark" | "auto") => void;
+    theme: Ref<{
+        primary: ThemeColorName;
+        info: ThemeColorName;
+        success: ThemeColorName;
+        warning: ThemeColorName;
+        error: ThemeColorName;
+        gray: ThemeColorName;
+    }, ThemeState | {
+        primary: ThemeColorName;
+        info: ThemeColorName;
+        success: ThemeColorName;
+        warning: ThemeColorName;
+        error: ThemeColorName;
+        gray: ThemeColorName;
+    }>;
+    cssInit: Ref<boolean, boolean>;
+    setCssInit: () => void;
+    setThemeColor: (type: ThemeColorType, colorName: ThemeColorName) => void;
+    setThemeColors: (colors: Partial<ThemeState>) => void;
+    resetTheme: () => void;
+    getTheme: () => {
+        primary: ThemeColorName;
+        info: ThemeColorName;
+        success: ThemeColorName;
+        warning: ThemeColorName;
+        error: ThemeColorName;
+        gray: ThemeColorName;
+    };
+}, "theme" | "mode" | "cssInit">, Pick<{
+    mode: Ref<"light" | "dark" | "auto", "light" | "dark" | "auto">;
+    setMode: (newMode: "light" | "dark" | "auto") => void;
+    theme: Ref<{
+        primary: ThemeColorName;
+        info: ThemeColorName;
+        success: ThemeColorName;
+        warning: ThemeColorName;
+        error: ThemeColorName;
+        gray: ThemeColorName;
+    }, ThemeState | {
+        primary: ThemeColorName;
+        info: ThemeColorName;
+        success: ThemeColorName;
+        warning: ThemeColorName;
+        error: ThemeColorName;
+        gray: ThemeColorName;
+    }>;
+    cssInit: Ref<boolean, boolean>;
+    setCssInit: () => void;
+    setThemeColor: (type: ThemeColorType, colorName: ThemeColorName) => void;
+    setThemeColors: (colors: Partial<ThemeState>) => void;
+    resetTheme: () => void;
+    getTheme: () => {
+        primary: ThemeColorName;
+        info: ThemeColorName;
+        success: ThemeColorName;
+        warning: ThemeColorName;
+        error: ThemeColorName;
+        gray: ThemeColorName;
+    };
+}, never>, Pick<{
+    mode: Ref<"light" | "dark" | "auto", "light" | "dark" | "auto">;
+    setMode: (newMode: "light" | "dark" | "auto") => void;
+    theme: Ref<{
+        primary: ThemeColorName;
+        info: ThemeColorName;
+        success: ThemeColorName;
+        warning: ThemeColorName;
+        error: ThemeColorName;
+        gray: ThemeColorName;
+    }, ThemeState | {
+        primary: ThemeColorName;
+        info: ThemeColorName;
+        success: ThemeColorName;
+        warning: ThemeColorName;
+        error: ThemeColorName;
+        gray: ThemeColorName;
+    }>;
+    cssInit: Ref<boolean, boolean>;
+    setCssInit: () => void;
+    setThemeColor: (type: ThemeColorType, colorName: ThemeColorName) => void;
+    setThemeColors: (colors: Partial<ThemeState>) => void;
+    resetTheme: () => void;
+    getTheme: () => {
+        primary: ThemeColorName;
+        info: ThemeColorName;
+        success: ThemeColorName;
+        warning: ThemeColorName;
+        error: ThemeColorName;
+        gray: ThemeColorName;
+    };
+}, "setMode" | "setCssInit" | "setThemeColor" | "setThemeColors" | "resetTheme" | "getTheme">>;

package/dist/types/types/theme.d.ts

@@ -1,8 +1,10 @@
+import type { ThemeConfig } from '../hooks';
 export interface IConfigTheme {
     logo?: string;
     darkLogo?: string;
     banner?: string;
     darkBanner?: string;
+    config?: ThemeConfig;
 }
 export interface ITheme {
     logo?: string;

package/dist/types/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './tree';
+export * from './theme';