@code-coaching/vuetiful 0.23.1 → 0.24.0

package/dist/style.css

@@ -1,4 +1,4 @@
-.icon[data-v-73195296],.icon[data-v-5635c35e]{@apply my-1 h-4 w-4 fill-current;}.icon[data-v-6c055e30]{@apply my-1 h-4 min-h-[1rem] w-4 min-w-[1rem] fill-current;}.icon[data-v-5df26a83]{@apply my-1 h-6 min-h-[1.5rem] w-6 min-w-[1.5rem] fill-current;}.vuetiful-card-header{border-top-left-radius:inherit;border-top-right-radius:inherit}.vuetiful-card-header>*{border-top-left-radius:inherit;border-top-right-radius:inherit}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+.icon[data-v-ef253f90],.icon[data-v-31089628]{@apply my-1 h-4 w-4 fill-current;}.icon[data-v-513d21fc]{@apply my-1 h-4 min-h-[1rem] w-4 min-w-[1rem] fill-current;}.icon[data-v-5d6982bd]{@apply my-1 h-6 min-h-[1.5rem] w-6 min-w-[1.5rem] fill-current;}.vuetiful-card-header{border-top-left-radius:inherit;border-top-right-radius:inherit}.vuetiful-card-header>*{border-top-left-radius:inherit;border-top-right-radius:inherit}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
   Theme: GitHub Dark
   Description: Dark theme as seen on github.com
   Author: github.com

package/dist/types/components/VBootstrap.vue.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from "vue";
+import { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     variant: {
         type: PropType<"" | "variant-filled" | "variant-filled-surface" | "variant-filled-primary" | "variant-filled-secondary" | "variant-filled-tertiary" | "variant-filled-success" | "variant-filled-warning" | "variant-filled-error" | "variant-ringed" | "variant-ringed-primary" | "variant-ringed-secondary" | "variant-ringed-tertiary" | "variant-ringed-success" | "variant-ringed-warning" | "variant-ringed-error" | "variant-ringed-surface" | "variant-ghost" | "variant-ghost-primary" | "variant-ghost-secondary" | "variant-ghost-tertiary" | "variant-ghost-success" | "variant-ghost-warning" | "variant-ghost-error" | "variant-ghost-surface" | "variant-soft" | "variant-soft-primary" | "variant-soft-secondary" | "variant-soft-tertiary" | "variant-soft-success" | "variant-soft-warning" | "variant-soft-error" | "variant-soft-surface" | "variant-glass" | "variant-glass-primary" | "variant-glass-secondary" | "variant-glass-tertiary" | "variant-glass-success" | "variant-glass-warning" | "variant-glass-error" | "variant-glass-surface">;

package/dist/types/components/atoms/VAvatar.vue.d.ts

@@ -1,4 +1,4 @@
-import { CssClasses } from "@/index";
+import { CssClasses } from '@/index';
 declare const _default: import("vue").DefineComponent<{
     initials: {
         type: StringConstructor;

package/dist/types/components/atoms/VLightSwitch.vue.d.ts

@@ -1,5 +1,5 @@
-import { CssClasses } from "@/index";
-import { ComputedRef } from "vue";
+import { CssClasses } from '@/index';
+import { ComputedRef } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     bgLight: {
         type: () => CssClasses;
@@ -43,8 +43,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     onToggleHandler: () => void;
     onKeyDown: (event: KeyboardEvent) => void;
-    currentMode: Readonly<import("vue").Ref<boolean>>;
+    chosenMode: import("vue").Ref<string>;
     iconFill: ComputedRef<string>;
+    MODE: {
+        LIGHT: string;
+        DARK: string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     bgLight: {
         type: () => CssClasses;

package/dist/types/components/atoms/index.d.ts

@@ -1,14 +1,14 @@
-import VAvatar from "./VAvatar.vue";
-import VBadge from "./VBadge.vue";
-import VButton from "./VButton.vue";
-import VChip from "./VChip.vue";
-import VLightSwitch from "./VLightSwitch.vue";
-import VRadioDescription from "./VRadio/VRadioDescription.vue";
-import VRadioGroup from "./VRadio/VRadioGroup.vue";
-import VRadioItem from "./VRadio/VRadioItem.vue";
-import VRadioLabel from "./VRadio/VRadioLabel.vue";
-import VSwitch from "./VSwitch/VSwitch.vue";
-import VSwitchDescription from "./VSwitch/VSwitchDescription.vue";
-import VSwitchGroup from "./VSwitch/VSwitchGroup.vue";
-import VSwitchLabel from "./VSwitch/VSwitchLabel.vue";
+import VAvatar from './VAvatar.vue';
+import VBadge from './VBadge.vue';
+import VButton from './VButton.vue';
+import VChip from './VChip.vue';
+import VLightSwitch from './VLightSwitch.vue';
+import VRadioDescription from './VRadio/VRadioDescription.vue';
+import VRadioGroup from './VRadio/VRadioGroup.vue';
+import VRadioItem from './VRadio/VRadioItem.vue';
+import VRadioLabel from './VRadio/VRadioLabel.vue';
+import VSwitch from './VSwitch/VSwitch.vue';
+import VSwitchDescription from './VSwitch/VSwitchDescription.vue';
+import VSwitchGroup from './VSwitch/VSwitchGroup.vue';
+import VSwitchLabel from './VSwitch/VSwitchLabel.vue';
 export { VAvatar, VButton, VBadge, VChip, VLightSwitch, VRadioGroup, VRadioItem, VRadioLabel, VRadioDescription, VSwitchGroup, VSwitchLabel, VSwitchDescription, VSwitch, };

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

@@ -1,2 +1,2 @@
-export * from "./atoms";
-export * from "./molecules";
+export * from './atoms';
+export * from './molecules';

package/dist/types/components/molecules/VAlert.vue.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from "vue";
+import { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     hideIcon: {
         type: BooleanConstructor;

package/dist/types/components/molecules/VCodeBlock.vue.d.ts

@@ -1,5 +1,5 @@
-import { CssClasses } from "@/index";
-import "highlight.js/styles/github-dark.css";
+import { CssClasses } from '@/index';
+import 'highlight.js/styles/github-dark.css';
 declare const _default: import("vue").DefineComponent<{
     language: {
         type: StringConstructor;

package/dist/types/components/molecules/VDrawer.vue.d.ts

@@ -1,4 +1,4 @@
-import type { CssClasses } from "@/index";
+import type { CssClasses } from '@/index';
 declare const _default: import("vue").DefineComponent<{
     regionBackdrop: {
         type: () => CssClasses;

package/dist/types/components/molecules/VListbox/VListbox.vue.d.ts

@@ -1,4 +1,4 @@
-import { CssClasses } from "@/index";
+import { CssClasses } from '@/index';
 declare const _default: import("vue").DefineComponent<{
     modelValue: any;
     by: {

package/dist/types/components/molecules/VRail/VRail.vue.d.ts

@@ -1,4 +1,4 @@
-import type { CssClasses } from "@/index";
+import type { CssClasses } from '@/index';
 declare const _default: import("vue").DefineComponent<{
     active: {
         type: () => CssClasses;

package/dist/types/components/molecules/VRail/VRailTile.vue.d.ts

@@ -1,4 +1,4 @@
-import type { CssClasses } from "@/index";
+import type { CssClasses } from '@/index';
 declare const _default: import("vue").DefineComponent<{
     value: {
         type: StringConstructor;

package/dist/types/components/molecules/index.d.ts

@@ -1,22 +1,22 @@
-import VDrawer from "./VDrawer.vue";
-import VPreview from "./VPreview.vue";
-import VRail from "./VRail/VRail.vue";
-import VRailTile from "./VRail/VRailTile.vue";
-import VShell from "./VShell.vue";
-import VListbox from "./VListbox/VListbox.vue";
-import VListboxButton from "./VListbox/VListboxButton.vue";
-import VListboxItem from "./VListbox/VListboxItem.vue";
-import VListboxItems from "./VListbox/VListboxItems.vue";
-import VListboxLabel from "./VListbox/VListboxLabel.vue";
-import VTab from "./VTabs/VTab.vue";
-import VTabPanel from "./VTabs/VTabPanel.vue";
-import VTabs from "./VTabs/VTabs.vue";
-import VAccordion from "./VAccordion/VAccordion.vue";
-import VAccordionItem from "./VAccordion/VAccordionItem.vue";
-import VAlert from "./VAlert.vue";
-import VCard from "./VCard/VCard.vue";
-import VCardBody from "./VCard/VCardBody.vue";
-import VCardFooter from "./VCard/VCardFooter.vue";
-import VCardHeader from "./VCard/VCardHeader.vue";
-import VCodeBlock from "./VCodeBlock.vue";
+import VDrawer from './VDrawer.vue';
+import VPreview from './VPreview.vue';
+import VRail from './VRail/VRail.vue';
+import VRailTile from './VRail/VRailTile.vue';
+import VShell from './VShell.vue';
+import VListbox from './VListbox/VListbox.vue';
+import VListboxButton from './VListbox/VListboxButton.vue';
+import VListboxItem from './VListbox/VListboxItem.vue';
+import VListboxItems from './VListbox/VListboxItems.vue';
+import VListboxLabel from './VListbox/VListboxLabel.vue';
+import VTab from './VTabs/VTab.vue';
+import VTabPanel from './VTabs/VTabPanel.vue';
+import VTabs from './VTabs/VTabs.vue';
+import VAccordion from './VAccordion/VAccordion.vue';
+import VAccordionItem from './VAccordion/VAccordionItem.vue';
+import VAlert from './VAlert.vue';
+import VCard from './VCard/VCard.vue';
+import VCardBody from './VCard/VCardBody.vue';
+import VCardFooter from './VCard/VCardFooter.vue';
+import VCardHeader from './VCard/VCardHeader.vue';
+import VCodeBlock from './VCodeBlock.vue';
 export { VAccordion, VAccordionItem, VAlert, VCard, VCardBody, VCardFooter, VCardHeader, VCodeBlock, VDrawer, VListbox, VListboxButton, VListboxItem, VListboxItems, VListboxLabel, VPreview, VRail, VRailTile, VShell, VTab, VTabPanel, VTabs, };

package/dist/types/directives/clipboard.d.ts

@@ -1,3 +1,3 @@
-import { DirectiveBinding } from "vue";
+import { DirectiveBinding } from 'vue';
 declare const clipboard: (el: HTMLElement, binding: DirectiveBinding) => void;
 export default clipboard;

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

@@ -1,2 +1,2 @@
-import vClipboard from "./clipboard";
+import vClipboard from './clipboard';
 export { vClipboard };

package/dist/types/index.d.ts

@@ -1,12 +1,12 @@
 declare function install(app: any): void;
-import "./assets/main.css";
-import "./styles/tailwind.css";
+import './assets/main.css';
+import './styles/tailwind.css';
 declare const _default: {
     install: typeof install;
 };
 export default _default;
-export * from "./components";
-export * from "./utils";
-export * from "./directives";
-export * from "./services";
+export * from './components';
+export * from './utils';
+export * from './directives';
+export * from './services';
 export declare type CssClasses = string;

package/dist/types/props/props.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from "vue";
+import { PropType } from 'vue';
 declare const sizeProp: {
     type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
     default: string;

package/dist/types/services/dark-mode.service.d.ts

@@ -1,19 +1,19 @@
-import { Ref } from "vue";
+declare const MODE: {
+    LIGHT: string;
+    DARK: string;
+};
+export declare type Mode = (typeof MODE)[keyof typeof MODE];
 declare const useDarkMode: () => {
-    modeOsPrefers: Readonly<Ref<boolean>>;
-    modeUserPrefers: Readonly<Ref<boolean | undefined>>;
-    currentMode: Readonly<Ref<boolean>>;
-    isDark: Readonly<Ref<boolean>>;
-    getModeOsPrefers: () => boolean;
-    getModeUserPrefers: () => boolean | undefined;
-    getModeAutoPrefers: () => boolean;
-    setModeUserPrefers: (value: boolean) => void;
-    setModeCurrent: (value: boolean) => void;
-    autoModeWatcher: () => void;
+    chosenMode: import("vue").Ref<string>;
+    isDark: Readonly<import("vue").Ref<boolean>>;
     initializeMode: () => void;
+    applyMode: (value: Mode) => void;
+    autoModeWatcher: () => void;
+    applyModeSSR: (html: string, mode: Mode) => string;
+    getModeFromCookie: (cookies: string) => string;
     MODE: {
-        LIGHT: boolean;
-        DARK: boolean;
+        LIGHT: string;
+        DARK: string;
     };
 };
 export { useDarkMode };

package/dist/types/services/drawer.service.d.ts

@@ -1,7 +1,7 @@
 export interface DrawerSettings {
     id?: string;
     open?: boolean;
-    position?: "left" | "top" | "right" | "bottom";
+    position?: 'left' | 'top' | 'right' | 'bottom';
     duration?: 150 | 300;
     regionBackdrop?: string;
     regionDrawer?: string;

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

@@ -1,7 +1,7 @@
-import { useDarkMode } from "./dark-mode.service";
-import { useDrawer } from "./drawer.service";
-import { useHighlight } from "./highlight.service";
-import { useRail } from "./rail.service";
-import { useSettings, VuetifulSettings } from "./settings.service";
+import { useDarkMode, Mode } from './dark-mode.service';
+import { useDrawer } from './drawer.service';
+import { useHighlight } from './highlight.service';
+import { useRail } from './rail.service';
+import { useSettings, VuetifulSettings } from './settings.service';
 export { useDarkMode, useDrawer, useHighlight, useRail, useSettings };
-export type { VuetifulSettings };
+export type { VuetifulSettings, Mode };

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

@@ -1,4 +1,4 @@
-export * from "./tailwind";
+export * from './tailwind';
 /**
  * The commented string unions are to use in PropType<> for Vue components,
  * TypeScript types or enums do not give errors when using a string that is not in the union.

package/dist/types/utils/colors/colors.service.d.ts

@@ -0,0 +1,69 @@
+declare type ContrastLevel = 'AA' | 'AAA';
+declare type ContrastSize = 'small' | 'large';
+export interface Report {
+    emoji: string;
+    note: string;
+}
+export interface PassReport {
+    textColor: string;
+    backgroundColor: string;
+    contrast: number;
+    report: Report;
+    smallAA: boolean;
+    smallAAA: boolean;
+    largeAA: boolean;
+    largeAAA: boolean;
+    fails: boolean;
+}
+export declare type Palette = {
+    [key: number]: {
+        hex: string;
+        rgb: string;
+        on: string;
+    };
+};
+export declare const semanticNames: readonly ["primary", "secondary", "tertiary", "success", "warning", "error", "surface"];
+export declare type SemanticNames = (typeof semanticNames)[number];
+export interface ColorSettings {
+    key: SemanticNames;
+    label: string;
+    hex: string;
+    rgb: string;
+    on: string;
+}
+declare type Rgb = {
+    r: number;
+    g: number;
+    b: number;
+};
+declare const useColors: () => {
+    hexToRgb: (hex: string) => Rgb | null;
+    hexToTailwindRgbString: (hex: string) => string;
+    rgbToHex: (r: number, g: number, b: number) => string;
+    generateA11yOnColor: (hex: string) => '255 255 255' | '0 0 0';
+    lighten: (hex: string, intensity: number) => string;
+    darken: (hex: string, intensity: number) => string;
+    generatePalette: (baseColor: string) => Palette;
+    contrastLevels: Record<ContrastSize, {
+        AA: number;
+        AAA: number;
+    }>;
+    getLuminance: {
+        (r: Rgb): number;
+        (r: number, g: number, b: number): number;
+    };
+    destringRgb: (rgbString: string) => Rgb;
+    handleStringColor: {
+        (colorString: string): Rgb;
+        (colorString: string, returnType: 'rgb'): Rgb;
+        (colorString: string, returnType: 'hex'): string;
+        (colorString: string, returnType?: "rgb" | "hex" | undefined): string | Rgb;
+    };
+    calculateRatio: (luminance1: string | number, luminance2: string | number) => number;
+    textPasses: (textColor: string, backgroundColor: string, size: ContrastSize, level: ContrastLevel) => boolean;
+    hexValueIsValid: (textColor: string) => boolean;
+    getPassReport: (textColor: string, backgroundColor: string) => PassReport;
+    hexValuesAreValid: (colors: Array<ColorSettings>) => boolean;
+    semanticNames: readonly ["primary", "secondary", "tertiary", "success", "warning", "error", "surface"];
+};
+export { useColors };

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

@@ -1,3 +1,7 @@
-import ThemeSwitcher from "./theme/theme-switcher.vue";
-import { useTheme } from "./theme/theme.service";
-export { ThemeSwitcher, useTheme };
+import type { ColorSettings, Palette, PassReport, Report, SemanticNames } from './colors/colors.service';
+import { useColors } from './colors/colors.service';
+import { usePlatform } from './platform/platform.service';
+import ThemeSwitcher from './theme/theme-switcher.vue';
+import { useTheme } from './theme/theme.service';
+export { ThemeSwitcher, useColors, usePlatform, useTheme };
+export type { ColorSettings, Palette, PassReport, Report, SemanticNames };

package/dist/types/utils/theme/theme-switcher.vue.d.ts

@@ -1,4 +1,4 @@
-import { CssClasses } from "@/index";
+import { CssClasses } from '@/index';
 declare const _default: import("vue").DefineComponent<{
     background: {
         type: () => CssClasses;

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

@@ -1,28 +1,13 @@
-import { Ref } from "vue";
-export interface Theme {
-    name: string;
-    url: string;
-}
+import { Ref } from 'vue';
+import { Theme } from './themes';
 declare const useTheme: () => {
-    themes: Readonly<Ref<readonly {
-        readonly name: string;
-        readonly url: string;
-    }[]>>;
-    chosenTheme: Readonly<Ref<string>>;
+    chosenTheme: Ref<Theme>;
+    themes: Theme[];
+    applyThemeSSR: (html: string, theme: Theme) => string;
+    applyTheme: (theme: Theme, callback?: Function | undefined) => void;
+    getThemeFromCookie: (cookies: string) => Theme;
     initializeTheme: (callback?: Function | undefined) => void;
-    loadTheme: (themeName: string, callback?: Function | undefined) => void;
-    saveThemeToStorage: (name: string) => void;
-    THEMES: {
-        VUETIFUL: string;
-        ROCKET: string;
-        SAHARA: string;
-        SEAFOAM: string;
-        SEASONAL: string;
-        SKELETON: string;
-        VINTAGE: string;
-    };
-    overwriteThemes: (newThemes: Array<Theme>) => void;
-    registerAllBuiltInThemes: () => Array<Theme>;
-    registerTheme: (name: string, url: string) => Theme;
+    changeDataTheme: (name: string) => void;
+    registerTheme: (theme: Theme) => void;
 };
 export { useTheme };

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

@@ -0,0 +1,35 @@
+import { ColorSettings } from '../colors/colors.service';
+export declare const themes: Array<Theme>;
+export interface Theme {
+    name: string;
+    gradients: Gradients;
+    colors: {
+        primary: ColorSettings;
+        secondary: ColorSettings;
+        tertiary: ColorSettings;
+        success: ColorSettings;
+        warning: ColorSettings;
+        error: ColorSettings;
+        surface: ColorSettings;
+    };
+    fonts: Fonts;
+    textColorLight: string;
+    textColorDark: string;
+    roundedBase: string;
+    roundedContainer: string;
+    borderBase: string;
+    customCss: string;
+    [key: string]: any;
+}
+export interface Fonts {
+    base: string;
+    customBase: string;
+    baseImports: string;
+    headings: string;
+    customHeadings: string;
+    headingImports: string;
+}
+export interface Gradients {
+    light: string;
+    dark: string;
+}