@fastkit/vue-color-scheme - npm Package Compare versions

Comparing version 0.6.12 to 0.6.13

dist/vue-color-scheme.cjs.js

@@ -16,9 +16,11 @@ 'use strict';
 function useColorVariantClasses(props) {
-    const colorVariantClasses = vue.computed(() => {
-        const classes = [];
-        const { variant } = props;
-        variant && classes.push(variant);
-        return classes;
+    const result = vue.computed(() => {
+        const value = resolveFnValue(props.variant);
+        const className = value ? value : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return colorVariantClasses;
+    return result;
 }
@@ -30,47 +32,66 @@ function useThemeClass(props, useRootThemeDefault) {
     }
-    const themeClass = vue.computed(() => {
-        let { theme } = props;
-        if (!theme && service) {
-            theme = service.rootTheme;
+    const result = vue.computed(() => {
+        let value = resolveFnValue(props.theme);
+        if (!value && service) {
+            value = service.rootTheme;
         }
-        return theme ? `${theme}-theme` : undefined;
+        const className = value ? `${value}-theme` : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return themeClass;
+    return result;
 }
+function toScopeColorClass(name) {
+    return `${name}-scope`;
+}
 function useScopeColorClass(props) {
-    const scopeColorClass = vue.computed(() => {
-        const { color } = props;
-        return color ? `${color}-scope` : undefined;
+    const result = vue.computed(() => {
+        const value = resolveFnValue(props.color);
+        const className = value ? toScopeColorClass(value) : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return scopeColorClass;
+    return result;
 }
+function toTextColorClass(name) {
+    return `${name}-text`;
+}
+function resolveFnValue(value) {
+    return typeof value === 'function' ? value() : value;
+}
 function useTextColorClass(props) {
-    const textColorClass = vue.computed(() => {
-        const { textColor } = props;
-        return textColor ? `${textColor}-text` : undefined;
+    const result = vue.computed(() => {
+        const value = resolveFnValue(props.textColor);
+        const className = value ? toTextColorClass(value) : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return textColorClass;
+    return result;
 }
 function useBorderColorClass(props) {
-    const borderColorClass = vue.computed(() => {
-        const { borderColor } = props;
-        return borderColor ? `${borderColor}-border` : undefined;
+    const result = vue.computed(() => {
+        const value = resolveFnValue(props.borderColor);
+        const className = value ? `${value}-border` : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return borderColorClass;
+    return result;
 }
 function useColorClasses(props, opts = {}) {
-    const themeClass = useThemeClass(props, opts.useRootThemeDefault);
-    const scopeColorClass = useScopeColorClass(props);
-    const textColorClass = useTextColorClass(props);
-    const borderColorClass = useBorderColorClass(props);
-    const colorVariantClasses = useColorVariantClasses(props);
+    const theme = useThemeClass(props, opts.useRootThemeDefault);
+    const color = useScopeColorClass(props);
+    const textColor = useTextColorClass(props);
+    const borderColor = useBorderColorClass(props);
+    const variant = useColorVariantClasses(props);
     const colorClasses = vue.computed(() => {
-        const classes = [
-            themeClass,
-            scopeColorClass,
-            textColorClass,
-            borderColorClass,
-            colorVariantClasses,
-        ]
-            .map((c) => c.value)
+        const classes = [theme, color, textColor, borderColor, variant]
+            .map((c) => c.value.className)
             .filter((c) => !!c);
@@ -80,7 +101,7 @@ return classes;
     return {
-        themeClass,
-        scopeColorClass,
-        textColorClass,
-        borderColorClass,
-        colorVariantClasses,
+        theme,
+        color,
+        textColor,
+        borderColor,
+        variant,
         colorClasses,
@@ -106,8 +127,5 @@ };
 function colorSchemeProps(opts = {}) {
-    const { theme = 'theme', color = 'color', textColor = 'textColor', borderColor = 'borderColor', defaultScope, defaultVariant, } = opts;
+    const { theme = 'theme', color = 'color', textColor = 'textColor', borderColor = 'borderColor', } = opts;
     const props = {
-        variant: {
-            type: String,
-            default: defaultVariant || undefined,
-        },
+        variant: String,
     };
@@ -117,6 +135,3 @@ if (theme)
     if (color)
-        props[color] = {
-            type: String,
-            default: defaultScope,
-        };
+        props[color] = String;
     if (textColor)
@@ -192,2 +207,4 @@ props[textColor] = String;
 exports.colorSchemeProps = colorSchemeProps;
+exports.toScopeColorClass = toScopeColorClass;
+exports.toTextColorClass = toTextColorClass;
 exports.useBorderColorClass = useBorderColorClass;
@@ -194,0 +211,0 @@ exports.useColorClasses = useColorClasses;

dist/vue-color-scheme.cjs.prod.js

@@ -16,9 +16,11 @@ 'use strict';
 function useColorVariantClasses(props) {
-    const colorVariantClasses = vue.computed(() => {
-        const classes = [];
-        const { variant } = props;
-        variant && classes.push(variant);
-        return classes;
+    const result = vue.computed(() => {
+        const value = resolveFnValue(props.variant);
+        const className = value ? value : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return colorVariantClasses;
+    return result;
 }
@@ -30,47 +32,66 @@ function useThemeClass(props, useRootThemeDefault) {
     }
-    const themeClass = vue.computed(() => {
-        let { theme } = props;
-        if (!theme && service) {
-            theme = service.rootTheme;
+    const result = vue.computed(() => {
+        let value = resolveFnValue(props.theme);
+        if (!value && service) {
+            value = service.rootTheme;
         }
-        return theme ? `${theme}-theme` : undefined;
+        const className = value ? `${value}-theme` : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return themeClass;
+    return result;
 }
+function toScopeColorClass(name) {
+    return `${name}-scope`;
+}
 function useScopeColorClass(props) {
-    const scopeColorClass = vue.computed(() => {
-        const { color } = props;
-        return color ? `${color}-scope` : undefined;
+    const result = vue.computed(() => {
+        const value = resolveFnValue(props.color);
+        const className = value ? toScopeColorClass(value) : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return scopeColorClass;
+    return result;
 }
+function toTextColorClass(name) {
+    return `${name}-text`;
+}
+function resolveFnValue(value) {
+    return typeof value === 'function' ? value() : value;
+}
 function useTextColorClass(props) {
-    const textColorClass = vue.computed(() => {
-        const { textColor } = props;
-        return textColor ? `${textColor}-text` : undefined;
+    const result = vue.computed(() => {
+        const value = resolveFnValue(props.textColor);
+        const className = value ? toTextColorClass(value) : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return textColorClass;
+    return result;
 }
 function useBorderColorClass(props) {
-    const borderColorClass = vue.computed(() => {
-        const { borderColor } = props;
-        return borderColor ? `${borderColor}-border` : undefined;
+    const result = vue.computed(() => {
+        const value = resolveFnValue(props.borderColor);
+        const className = value ? `${value}-border` : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return borderColorClass;
+    return result;
 }
 function useColorClasses(props, opts = {}) {
-    const themeClass = useThemeClass(props, opts.useRootThemeDefault);
-    const scopeColorClass = useScopeColorClass(props);
-    const textColorClass = useTextColorClass(props);
-    const borderColorClass = useBorderColorClass(props);
-    const colorVariantClasses = useColorVariantClasses(props);
+    const theme = useThemeClass(props, opts.useRootThemeDefault);
+    const color = useScopeColorClass(props);
+    const textColor = useTextColorClass(props);
+    const borderColor = useBorderColorClass(props);
+    const variant = useColorVariantClasses(props);
     const colorClasses = vue.computed(() => {
-        const classes = [
-            themeClass,
-            scopeColorClass,
-            textColorClass,
-            borderColorClass,
-            colorVariantClasses,
-        ]
-            .map((c) => c.value)
+        const classes = [theme, color, textColor, borderColor, variant]
+            .map((c) => c.value.className)
             .filter((c) => !!c);
@@ -80,7 +101,7 @@ return classes;
     return {
-        themeClass,
-        scopeColorClass,
-        textColorClass,
-        borderColorClass,
-        colorVariantClasses,
+        theme,
+        color,
+        textColor,
+        borderColor,
+        variant,
         colorClasses,
@@ -106,8 +127,5 @@ };
 function colorSchemeProps(opts = {}) {
-    const { theme = 'theme', color = 'color', textColor = 'textColor', borderColor = 'borderColor', defaultScope, defaultVariant, } = opts;
+    const { theme = 'theme', color = 'color', textColor = 'textColor', borderColor = 'borderColor', } = opts;
     const props = {
-        variant: {
-            type: String,
-            default: defaultVariant || undefined,
-        },
+        variant: String,
     };
@@ -117,6 +135,3 @@ if (theme)
     if (color)
-        props[color] = {
-            type: String,
-            default: defaultScope,
-        };
+        props[color] = String;
     if (textColor)
@@ -192,2 +207,4 @@ props[textColor] = String;
 exports.colorSchemeProps = colorSchemeProps;
+exports.toScopeColorClass = toScopeColorClass;
+exports.toTextColorClass = toTextColorClass;
 exports.useBorderColorClass = useBorderColorClass;
@@ -194,0 +211,0 @@ exports.useColorClasses = useColorClasses;

dist/vue-color-scheme.d.ts

@@ -11,7 +11,22 @@ import { App } from 'vue';
 export declare interface ColorClassesResult {
-    themeClass: ComputedRef<string | undefined>;
-    scopeColorClass: ComputedRef<string | undefined>;
-    textColorClass: ComputedRef<string | undefined>;
-    borderColorClass: ComputedRef<string | undefined>;
-    colorVariantClasses: ComputedRef<string[]>;
+    theme: ComputedRef<{
+        value?: ThemeName;
+        classes?: string;
+    }>;
+    color: ComputedRef<{
+        value?: ScopeName;
+        classes?: string;
+    }>;
+    textColor: ComputedRef<{
+        value?: PaletteName;
+        classes?: string;
+    }>;
+    borderColor: ComputedRef<{
+        value?: PaletteName;
+        classes?: string;
+    }>;
+    variant: ComputedRef<{
+        value?: ColorVariant;
+        classes?: string;
+    }>;
     colorClasses: ComputedRef<string[]>;
@@ -21,7 +36,7 @@ }
 export declare interface ColorSchemeHooksProps {
-    readonly theme?: ThemeName;
-    readonly color?: ScopeName;
-    readonly textColor?: PaletteName;
-    readonly borderColor?: PaletteName;
-    readonly variant?: ColorVariant;
+    readonly theme?: ThemeName | (() => ThemeName | undefined);
+    readonly color?: ScopeName | (() => ScopeName | undefined);
+    readonly textColor?: PaletteName | (() => PaletteName | undefined);
+    readonly borderColor?: PaletteName | (() => PaletteName | undefined);
+    readonly variant?: ColorVariant | (() => ColorVariant | undefined);
 }
@@ -46,3 +61,3 @@
 
-export declare interface ColorSchemePropsOptions<ThemeProp extends PropKey = 'theme', ScopeProp extends PropKey = 'color', TextColorProp extends PropKey = 'textColor', BorderColorProp extends PropKey = 'borderColor'> extends ColorSchemePropsStaticOptions {
+export declare interface ColorSchemePropsOptions<ThemeProp extends PropKey = 'theme', ScopeProp extends PropKey = 'color', TextColorProp extends PropKey = 'textColor', BorderColorProp extends PropKey = 'borderColor'> {
     theme?: ThemeProp;
@@ -54,7 +69,2 @@ color?: ScopeProp;
 
-export declare interface ColorSchemePropsStaticOptions {
-    defaultScope?: ScopeName;
-    defaultVariant?: ColorVariant;
-}
-
 export { ColorVariant }
@@ -70,4 +80,11 @@
 
-export declare function useBorderColorClass(props: ColorSchemeHooksProps): ComputedRef<string | undefined>;
+export declare function toScopeColorClass(name: string): string;
 
+export declare function toTextColorClass(name: string): string;
+
+export declare function useBorderColorClass(props: ColorSchemeHooksProps): ComputedRef<{
+    value: PaletteName | undefined;
+    className: string | undefined;
+}>;
+
 export declare function useColorClasses(props: ColorSchemeHooksProps, opts?: {
@@ -79,11 +96,23 @@ useRootThemeDefault?: boolean;
 
-export declare function useColorVariantClasses(props: ColorSchemeHooksProps): ComputedRef<string[]>;
+export declare function useColorVariantClasses(props: ColorSchemeHooksProps): ComputedRef<{
+    value: ColorVariant | undefined;
+    className: ColorVariant | undefined;
+}>;
 
 export declare function useInjectTheme(): VueColorSchemeService;
 
-export declare function useScopeColorClass(props: ColorSchemeHooksProps): ComputedRef<string | undefined>;
+export declare function useScopeColorClass(props: ColorSchemeHooksProps): ComputedRef<{
+    value: ScopeName | undefined;
+    className: string | undefined;
+}>;
 
-export declare function useTextColorClass(props: ColorSchemeHooksProps): ComputedRef<string | undefined>;
+export declare function useTextColorClass(props: ColorSchemeHooksProps): ComputedRef<{
+    value: PaletteName | undefined;
+    className: string | undefined;
+}>;
 
-export declare function useThemeClass(props: ColorSchemeHooksProps, useRootThemeDefault?: boolean): ComputedRef<string | undefined>;
+export declare function useThemeClass(props: ColorSchemeHooksProps, useRootThemeDefault?: boolean): ComputedRef<{
+    value: ThemeName | undefined;
+    className: string | undefined;
+}>;
 
@@ -115,4 +144,4 @@ export declare class VueColorSchemePlugin {
 
-export declare type VueColorSchemeServiceSettings = ColorSchemeInfo<ThemeName, PaletteName, ScopeName>;
+export declare type VueColorSchemeServiceSettings = ColorSchemeInfo<ThemeName, PaletteName, ScopeName, ColorVariant>;
 
 export { }

dist/vue-color-scheme.esm-bundler.js

@@ -12,9 +12,11 @@ import { computed, inject, ref } from 'vue';
 function useColorVariantClasses(props) {
-    const colorVariantClasses = computed(() => {
-        const classes = [];
-        const { variant } = props;
-        variant && classes.push(variant);
-        return classes;
+    const result = computed(() => {
+        const value = resolveFnValue(props.variant);
+        const className = value ? value : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return colorVariantClasses;
+    return result;
 }
@@ -26,47 +28,66 @@ function useThemeClass(props, useRootThemeDefault) {
     }
-    const themeClass = computed(() => {
-        let { theme } = props;
-        if (!theme && service) {
-            theme = service.rootTheme;
+    const result = computed(() => {
+        let value = resolveFnValue(props.theme);
+        if (!value && service) {
+            value = service.rootTheme;
         }
-        return theme ? `${theme}-theme` : undefined;
+        const className = value ? `${value}-theme` : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return themeClass;
+    return result;
 }
+function toScopeColorClass(name) {
+    return `${name}-scope`;
+}
 function useScopeColorClass(props) {
-    const scopeColorClass = computed(() => {
-        const { color } = props;
-        return color ? `${color}-scope` : undefined;
+    const result = computed(() => {
+        const value = resolveFnValue(props.color);
+        const className = value ? toScopeColorClass(value) : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return scopeColorClass;
+    return result;
 }
+function toTextColorClass(name) {
+    return `${name}-text`;
+}
+function resolveFnValue(value) {
+    return typeof value === 'function' ? value() : value;
+}
 function useTextColorClass(props) {
-    const textColorClass = computed(() => {
-        const { textColor } = props;
-        return textColor ? `${textColor}-text` : undefined;
+    const result = computed(() => {
+        const value = resolveFnValue(props.textColor);
+        const className = value ? toTextColorClass(value) : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return textColorClass;
+    return result;
 }
 function useBorderColorClass(props) {
-    const borderColorClass = computed(() => {
-        const { borderColor } = props;
-        return borderColor ? `${borderColor}-border` : undefined;
+    const result = computed(() => {
+        const value = resolveFnValue(props.borderColor);
+        const className = value ? `${value}-border` : undefined;
+        return {
+            value,
+            className,
+        };
     });
-    return borderColorClass;
+    return result;
 }
 function useColorClasses(props, opts = {}) {
-    const themeClass = useThemeClass(props, opts.useRootThemeDefault);
-    const scopeColorClass = useScopeColorClass(props);
-    const textColorClass = useTextColorClass(props);
-    const borderColorClass = useBorderColorClass(props);
-    const colorVariantClasses = useColorVariantClasses(props);
+    const theme = useThemeClass(props, opts.useRootThemeDefault);
+    const color = useScopeColorClass(props);
+    const textColor = useTextColorClass(props);
+    const borderColor = useBorderColorClass(props);
+    const variant = useColorVariantClasses(props);
     const colorClasses = computed(() => {
-        const classes = [
-            themeClass,
-            scopeColorClass,
-            textColorClass,
-            borderColorClass,
-            colorVariantClasses,
-        ]
-            .map((c) => c.value)
+        const classes = [theme, color, textColor, borderColor, variant]
+            .map((c) => c.value.className)
             .filter((c) => !!c);
@@ -76,7 +97,7 @@ return classes;
     return {
-        themeClass,
-        scopeColorClass,
-        textColorClass,
-        borderColorClass,
-        colorVariantClasses,
+        theme,
+        color,
+        textColor,
+        borderColor,
+        variant,
         colorClasses,
@@ -102,8 +123,5 @@ };
 function colorSchemeProps(opts = {}) {
-    const { theme = 'theme', color = 'color', textColor = 'textColor', borderColor = 'borderColor', defaultScope, defaultVariant, } = opts;
+    const { theme = 'theme', color = 'color', textColor = 'textColor', borderColor = 'borderColor', } = opts;
     const props = {
-        variant: {
-            type: String,
-            default: defaultVariant || undefined,
-        },
+        variant: String,
     };
@@ -113,6 +131,3 @@ if (theme)
     if (color)
-        props[color] = {
-            type: String,
-            default: defaultScope,
-        };
+        props[color] = String;
     if (textColor)
@@ -185,2 +200,2 @@ props[textColor] = String;
 
-export { VueColorSchemePlugin, VueColorSchemeService, colorSchemeProps, useBorderColorClass, useColorClasses, useColorScheme, useColorVariantClasses, useInjectTheme, useScopeColorClass, useTextColorClass, useThemeClass };
+export { VueColorSchemePlugin, VueColorSchemeService, colorSchemeProps, toScopeColorClass, toTextColorClass, useBorderColorClass, useColorClasses, useColorScheme, useColorVariantClasses, useInjectTheme, useScopeColorClass, useTextColorClass, useThemeClass };

package.json

 {
   "name": "@fastkit/vue-color-scheme",
-  "version": "0.6.12",
+  "version": "0.6.13",
   "description": "@fastkit/vue-color-scheme",
@@ -33,6 +33,6 @@ "buildOptions": {
   "dependencies": {
-    "@fastkit/color-scheme": "0.6.12",
-    "@fastkit/tiny-logger": "0.6.12",
-    "@fastkit/vue-utils": "0.6.12"
+    "@fastkit/color-scheme": "0.6.13",
+    "@fastkit/tiny-logger": "0.6.13",
+    "@fastkit/vue-utils": "0.6.13"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24229

increased by7.05%

Lines of code

720

increased by11.98%

Dependency changes

• + Added@fastkit/body-scroll-lock@0.6.13(transitive)

• + Added@fastkit/color@0.6.13(transitive)

• + Added@fastkit/color-scheme@0.6.13(transitive)

• + Added@fastkit/helpers@0.6.13(transitive)

• + Added@fastkit/keybord@0.6.13(transitive)

• + Added@fastkit/tiny-logger@0.6.13(transitive)

• + Added@fastkit/visibility@0.6.13(transitive)

• + Added@fastkit/vue-utils@0.6.13(transitive)

• - Removed@fastkit/body-scroll-lock@0.6.12(transitive)

• - Removed@fastkit/color@0.6.12(transitive)

• - Removed@fastkit/color-scheme@0.6.12(transitive)

• - Removed@fastkit/helpers@0.6.12(transitive)

• - Removed@fastkit/keybord@0.6.12(transitive)

• - Removed@fastkit/tiny-logger@0.6.12(transitive)

• - Removed@fastkit/visibility@0.6.12(transitive)

• - Removed@fastkit/vue-utils@0.6.12(transitive)

• Updated@fastkit/color-scheme@0.6.13

• Updated@fastkit/tiny-logger@0.6.13

• Updated@fastkit/vue-utils@0.6.13