TheRealSyler/vtheme_old

VTheme

Docs

• directive

  • DirectiveInputBase
  • VThemeDirectiveInput

• extraFunctions

  • ThemeTransition

• helpers

  • VThemeLoaderColors
  • VThemeLoaderCss
  • VThemeLoader
  • VThemeRouterLink
  • VThemeScrollbar
  • VThemeColor

• index

  • ThemeController

• save

  • SaveTheme

• store

  • Color
  • ITheme
  • ThemeOptions

• update

  • UpdateTheme
  • GetColor
  • GetOptions

directive

DirectiveInputBase

interface DirectiveInputBase {
    background: string;
    color: string;
    fill: string;
    border: string;
}

VThemeDirectiveInput

interface VThemeDirectiveInput extends DirectiveInputBase {
    isImage: boolean;
    hover: DirectiveInputBase;
    focus: DirectiveInputBase;
    active: DirectiveInputBase;
    after: DirectiveInputBase;
    before: DirectiveInputBase;
    font: string;
    placeholder: {
        color: string;
        hover: string;
        focus: string;
    };
    shadow: boolean | 'sm' | 'lg' | 'strong';
    update: Array<{
        type: 'shadow' | 'color' | 'background' | 'fill' | 'border' | 'hover' | 'before' | 'after';
        value: string | DirectiveInputBase;
    }> | true;
}

extraFunctions

ThemeTransition

function ThemeTransition(): void;

helpers

VThemeLoaderColors

interface VThemeLoaderColors {
    /**
     * Loader primary color in Css color format, `#35a` etc.
     */
    primary: string;
    /**
     * Loader accent color in Css color format, `#35a` etc.
     */
    accent: string;
}

VThemeLoaderCss

interface VThemeLoaderCss {
    /**
     * Loader width in Css unit format, `1px` | `1rem` etc.
     */
    width: string;
    /**
     * Loader height in Css unit format, `1px` | `1rem` etc.
     */
    height: string;
    /**
     * Loader rotation speed in Css unit format, `1s` | `100ms` etc.
     */
    speed: string;
    /**
     * Loader margin in Css unit format, `1px` | `1rem` etc.
     */
    margin: string;
    /**
     * Loader border width in Css unit format, `1px` | `1rem` etc.
     */
    borderWidth: string;
}

VThemeLoader

class VThemeLoader extends VThemeBaseHelper<VThemeLoaderColors> {
    width: string;
    height: string;
    speed: string;
    margin: string;
    borderWidth: string;
    constructor(options?: Partial<VThemeLoaderColors>, cssOptions?: Partial<VThemeLoaderCss>);
}

VThemeRouterLink

class VThemeRouterLink extends VThemeBaseHelper<VThemeRouterLinkOptions> {
    constructor(options?: Partial<VThemeRouterLinkOptions>);
}

VThemeScrollbar

class VThemeScrollbar {
    /**
     * Scrollbar track color in Css color format, `#35a` etc.
     */
    track: string;
    /**
     * Scrollbar thumb color in Css color format, `#35a` etc.
     */
    thumb: string;
    /**
     * Scrollbar thumb hover color in Css color format, `#35a` etc.
     */
    thumbHover: string;
    /**
     * Scrollbar width in Css unit format, `1px` | `1rem` etc.
     */
    width: string;
    /**
     * Scrollbar width in Css unit format, `1px` | `1rem` etc.
     */
    height: string;
    /**
     * Scrollbar width in Css unit format, `1px` | `1rem` etc.
     */
    radius: string;
    constructor(
    /**
     * Scrollbar track color in Css color format, `#35a` etc.
     */
    track: string, 
    /**
     * Scrollbar thumb color in Css color format, `#35a` etc.
     */
    thumb: string, 
    /**
     * Scrollbar thumb hover color in Css color format, `#35a` etc.
     */
    thumbHover: string, options?: {
        width?: number | string;
        height?: number | string;
        radius?: number | string;
    });
}

VThemeColor

class VThemeColor {
    value: string;
    options: VThemeColorOptions;
    constructor(
    /**
     * Color value in Css color format, `#35a` etc.
     */
    color: string, 
    /**
     * Settings, fill is false by Default.
     */
    options?: VThemeColorOptions);
}

index

ThemeController

/**
 * TODO
 */
class ThemeController {
    static store: ThemeStore;
    static Init(options?: ThemeOptions): void;
}

save

SaveTheme

/**
 * Saves the Theme to local Storage.
 */
function SaveTheme(): void;

store

Color

type Color = VThemeColor | string;

ITheme

/**
 * TODO
 */
interface ITheme {
    name: string;
    /**
     * If true the theme will be saved when the `SaveTheme` function gets called.
     */
    canBeModified: boolean;
    /**
     * Theme Colors
     */
    colors: {
        [key: string]: Color;
    };
    /**
     * Theme Fonts (font-family in css)
     */
    fonts: {
        [key: string]: string;
    };
    defaults: {
        /**
         * Default Text Color, Note the Color has to be in the theme colors.
         */
        color: string;
        /**
         * Default Background Color, Note the Color has to be in the theme colors.
         */
        background: string;
        /**
         * Default Font Family, Note the font has to be in the theme fonts.
         */
        font: string;
    };
    invertImageIcon: boolean;
    shadow?: {
        color: Color;
    };
    data?: {
        [key: string]: any;
    };
    scrollBar?: VThemeScrollbar;
    loader?: VThemeLoader;
    routerLink?: VThemeRouterLink;
}

ThemeOptions

/**
 * Vtheme Installation Options.
 */
interface ThemeOptions {
    defaultTheme: string;
    themes: {
        [name: string]: ITheme;
    };
    debug?: {
        ignoreCannotBeModified?: boolean;
    };
    Log?: {
        Mutations?: boolean;
        ThemeUpdates?: boolean;
        ThemeSaves?: boolean;
        Init?: boolean;
    };
}

update

UpdateTheme

/**
 * Updates the Dom with the current theme based on the given options.
 * only updates the colors if no options are provided.
 */
function UpdateTheme(options?: UpdateThemeOptions | boolean): void;

GetColor

function GetColor(input: string | VThemeColor): string;

GetOptions

function GetOptions(input: string | VThemeColor): VThemeColorOptions;

Generated With ts-doc-gen