Vdh NPM | npm.io

Vue Design Helper

This plugin is in active development and is NOT intended for use (yet)!

The plugin's aim is to simplify development of responsive design and bring dynamic color themes to a Vue application.\ This package also includes a few convenient utility components and global properties.

Features

Support Vue 3
Globally define colors and color themes. The latter can be dynamically switched, added, modified or deleted
Globally define breakpoints for responsive style behavior
Globally define utility helper functions
Use intuitive & convenient utility components for common layout tasks (flex, flex item, grid, grid item, absolute div)
Add breakpoint-dependent classes or style object to a plugin component via props
Adjust single breakpoint-dependent (or not) style properties of a plugin component via props

Installation

$ yarn add vdh

$ npm i vdh

Setup

import { createApp } from "vue";
import App from "./App.vue";

import Vdh from "vdh";

const app = createApp(App).use(Vdh).mount("#app");

with options (recommended use):

import { createApp } from "vue";
import App from "./App.vue";

import Vdh from "vdh";
import type { InstallOptions as VdhOptions } from "vdh";

const VDH_OPTIONS: VdhOptions = {
  colorStore: {
    // detect user system theme
    defaultTheme: window.matchMedia?.("(prefers-color-scheme: dark)").matches
      ? "dark"
      : "light",
    themes: {
      light: {
        primary: "#eee"
      },
      dark: {
        primary: "#111"
      }
    },
    colors: {
      white: "#fff",
      black: "#000"
    }
  }
};

const app = createApp(App).use(Vdh, VDH_OPTIONS).mount("#app");

options

interface Options {
  window: {
    /*
     * Key under which the global property is defined for use in a component instance (e.g. this.$window)
     * default: "$window"
     */
    propertyKey: string;

    /*
     * Debounce time of the window resize event
     * default: 300
     */
    resizeDebounceTime: number; //ms

    /*
     * Breakpoints used for responsive styling
     * default: {
     *   sm: 576,
     *   md: 768,
     *   lg: 992,
     *   xl: 1200,
     *   xxl: 1440,
     *   xxxl: 1620
     * }
     */
    breakpoints: {
      [breakpointKey: string]: number; //px
    };

    /*
     * Key of the smallest possible breakpoint that is never broken
     * default: "_"
     */
    defaultBreakpointKey: string;

    /*
     * Detect if user is using a mobile device by checking its browser
     * default: true
     */
    ifMobileByBrowser: boolean;

    /*
     * Takes effect only if 'window.ifMobileByBrowser' is set to false:
     * Mark user's device as mobile, if its width <= the value
     */
    ifMobileWidthThreshold: number; //px

    /*
     * Takes effect only if 'window.ifMobileByBrowser' is set to false:
     * Mark user's device as mobile, if its height <= the value
     * default: 0
     */
    ifMobileHeightThreshold: number; //px
  };

  colorStore: {
    /*
     * Key under which the global property is defined for use in a component instance (e.g. this.$colorStore)
     * default: "$colorStore"
     */
    propertyKey: string;

    /*
     * Define globally accessible colors unaffected by currently active theme
     * default: {}
     */
    colors: {
      [colorName: string]: string;
    };

    /*
     * Define globally accessible colors of each theme
     * Only one theme can be active at a time, and the theme colors can override the colors specified in the 'colorStore.colors' option
     * default: {}
     */
    themes: {
      [themeName: string]: {
        [colorName: string]: string;
      };
    };

    /*
     * Initially active theme from the 'colorStore.themes' option
     * default: null
     */
    defaultTheme: string | null | undefined;
  };

  colors: {
    /*
     * Key under which the global property is defined for use in a component instance (e.g. this.$colors)
     * default: "$colors"
     */
    propertyKey: string;
  };

  utils: {
    /*
     * Key under which the global property is defined for use in a component instance (e.g. this.$utils)
     * default: "$utils"
     */
    propertyKey: string;
  };

  pluginCache: {
    /*
     * Key under which the global property is defined for use in a component instance (e.g. this.$vdhCache)
     * default: "$vdhCache"
     */
    propertyKey: string;
  };

  forceNextTick: {
    /*
     * Key under which the global property is defined for use in a component instance (e.g. this.$forceNextTick)
     * default: "$forceNextTick"
     */
    propertyKey: string;
  };

  components: {
    /*
     * Prefix with whom the plugin components are globally defined (e.g. <vdh-flex></vdh-flex>)
     * default: "vdh"
     */
    prefix: string;
  };
}

Global properties

$colorStore

Includes tools related to plugin-defined colors and color themes.

Component instance:

this.$colorStore; // The property name can be changed via `colorStore.propertyKey` option

Composition API:

import { useColorStore } from "vdh";

const $colorStore = useColorStore();

defaultTheme

Returns the key of the initially active color theme specified in the colorStore.defaultTheme option.

defaultTheme: string | null | undefined;

activeTheme

Returns the key of the active color theme.

activeTheme: string | null | undefined;

setActiveTheme()

Sets a given string as the active theme key.\ Some colors may not be updated on theme change. Use $vdhCache.clear() to clear the plugin cache and force all colors to update.

setActiveTheme(themeKey: string): void

unsetActiveTheme()

Sets the active theme key as null.\ Some colors may not be updated on theme change. Use $vdhCache.clear() to clear the plugin cache and force all colors to update.

unsetActiveTheme(): void

restoreDefaultTheme()

Sets the active theme key as the default theme key specified in the colorStore.defaultTheme option.\ Some colors may not be updated on theme change. Use $vdhCache.clear() to clear the plugin cache and force all colors to update.

restoreDefaultTheme(): void

themes

Returns color themes.

themes: { [themeKey: string]: { [colorKey: string]: string } }

themeKeys

Returns reactive color theme keys.

themeKeys: string[]

addTheme()

Adds a new theme to the $colorStore property.

addTheme(themeKey: string, colors: { [colorKey: string]: string }): void

alterTheme()

Overwrites an existing theme in the $colorStore property.

alterTheme(themeKey: string, colors: { [colorKey: string]: string }): void

removeTheme()

Removes an existing theme from the $colorStore property.

removeTheme(themeKey: string): void

baseColors

Returns colors specified in the colorStore.colors option.

baseColors: { [colorKey: string]: string }

themeColors

Returns colors of the active theme color.

themeColors: { [colorKey: string]: string }

activeColors

Returns combination of baseColors and themeColors (themeColors override baseColors, if the same color key occurs in both). It is recommended to use the $colors shorthand property instead of this one.

activeColors: { [colorKey: string]: string }

parseColor()

If a given string is a color name, returns the color value. Else returns the string.

parseColor(str: string): string

parseColors()

If a value is a string, all color names within are replaced with their corresponding values and returned. Else the value is returned as it is.

parseColors<T>(value: T): T
parseColors(value: string): string

$colors

Shorthand for $colorStore.activeColors.

Component instance:

this.$colors; // The property name can be changed via `colors.propertyKey` option

Composition API:

import { useColors } from "vdh";

const $colors = useColors();

Example usage:

<template>
  <vdh-div text="$primary">primary color text</vdh-div>

  <div class="text--primary-color">also primary color text</div>
</template>

<style scoped>
.text--primary-color {
  color: v-bind("$colors.primary");
}
</style>

$window

The property provides reactive information about window width, height and breakpoint behavior. Also breakpoint-related tools are included.

Component instance:

this.$window; // The property name can be changed via `window.propertyKey` option

Composition API:

import { useWindow } from "vdh";

const $window = useWindow();

width

Reactive window width in px.

width: number;

height

Reactive window height in px.

height: number;

defaultBpKey

Returns the key of the smallest possible breakpoint that is never broken specified in the window.defaultBreakpointKey option.

defaultBpKey: string;

breakpoints

Returns breakpoints specified in the window.breakpoints option.

breakpoints: { [breakpointKey: string]: number; }

intactBpKeys

Returns keys of breakpoints whose thresholds are greater or equal to $window.width.

intactBpKeys: string[]

brokenBpKeys

Returns keys of breakpoints whose thresholds are less than $window.width.

brokenBpKeys: string[]

activeBpKey

Returns the intact breakpoint key with the highest threshold.

activeBpKey: string;

isIntactBp()

Checks if the given key's breakpoint has its threshold greater or equal to $window.width.

isIntactBp(value: string): boolean

isBrokenBp()

Checks if the given key's breakpoint has its threshold less than $window.width.

isBrokenBp(value: string): boolean

intactBpKeysOf()

Returns keys of breakpoints from a given array whose thresholds are greater or equal to $window.width.

intactBpKeysOf(keys: string[]): string[]
intactBpKeysOf(...keys: string[]): string[]

brokenBpKeysOf()

Returns keys of breakpoints from a given array whose thresholds are less than $window.width.

brokenBpKeysOf(keys: string[]): string[]
brokenBpKeysOf(...keys: string[]): string[]

activeBpKeyOf()

Returns the intact breakpoint key from a given array with the highest threshold.

activeBpKeyOf(keys: string[]): string
activeBpKeyOf(...keys: string[]): string

isResponsive()

Checks if a value is an object containing only keys that are valid breakpoint keys.

isResponsive(value: unknown): boolean

parseResponsive()

Checks the value of the intact breakpoint key from a given object with the highest threshold.\ If the value is a string / number / boolean / array, returns it.\ If the value is a null / undefined, the next value is being checked.\ if the value is an object, merges all objects of the keys that are valid intact breakpoint keys. Duplicate properties of subsequent objects are ignored.\ If the value is an unsupported type, null is returned.

parseResponsive(responsiveObj: { [breakpointKey: string]: unknown }): unknown | null

parseIfResponsive()

Checks if a value is an object containing only keys that are valid breakpoint keys.
If so, returns the result of $window.parseResponsive() from the value. Else, returns the value as it is.

parseIfResponsive(value: { [breakpointKey: string]: unknown }): unknown | null
parseIfResponsive<T>(value: T): T

parseResponsiveToStr()

Merges the values of the valid intact breakpoint keys of a given object and returns them as a string. Array values are spread before being concatenating to the string.

parseResponsiveToStr(responsiveObj: { [breakpointKey: string]: unknown }, concatDescending?: boolean = true): string

isMobileBrowser

Returns true, if the user's browser is recognized as a mobile browser.

isMobileBrowser: boolean;

isMobile

Returns true, if the user's device is classified as mobile.

isMobile: boolean;

$utils

Utility function collection.

Component instance:

this.$utils; // The property name can be changed via `utils.propertyKey` option

Composition API:

import { useUtils } from "vdh";

const $utils = useUtils();

areArraysEqual()

Determines if the given arrays are equal.

areArraysEqual(...arrays: unknown[][]): boolean

capitalize()

Capitalizes a string.

capitalize(str: string): Capitalize<string>

cloneDeep()

Clones deeply an object or an array.

cloneDeep<T>(value: T): T

countInArray()

Counts occurences of an element in an array.

countInArray(array: unknown[], elementToCount: unknown): number

countInStr()

Counts occurences of a string in a string.

countInStr(str: string, strToCount: string): number

discardArrayDuplicates()

Discards duplicate elements of an array.

discardArrayDuplicates(value: unknown[]): unknown[]

discardObjKeysOf()

Discards keys of an object whose values are in target values.

discardObjKeysOf<T extends Record<string | number | symbol, V>, V>(obj: T, ...values: unknown[]): T | Partial<T>

discardStrDuplicates()

Discards duplicate characters of a string.

discardStrDuplicates(str: string): string

formatNum()

Sets fixed fraction digits of a numeric value and adds a thousands separator.

formatNum(value: number | string, fractionDigits: number = 2, separator: string = " "): string

hasDuplicates()

Determines if a string or an array has duplicates.

hasDuplicates(value: string | unknown[]): boolean

interpolateColors()

Finds the mixed color between any two HEX/RGB values.

interpolateColors(colorA: string | number[], colorB: string | number[], ratio: number, resultColorModel: "HEX" | "hex" | "RGB" | "rgb" = "HEX"): string | number[] | null

isArray()

isArray(value: unknown): value is unknown[]

isBool()

isBool(value: unknown): value is boolean

isCssColor()

Determines if a value is a valid CSS color value.

isCssColor(value: unknown): boolean

isEmptyObj()

Determines if a value is an empty object.

isEmptyObj(value: unknown): boolean

isFn()

isFn(value: unknown): value is Function

isHexColor()

Determines if a value is a valid HEX color.

isHexColor(value: unknown): boolean

isNullish()

isNullish(value: unknown): value is null | undefined

isNum()

isNum(value: unknown): value is number

isNumeric()

Checks if a value is a number or is a string that can be converted to a number.

isNumeric(value: unknown): boolean

isObj()

isObj(value: unknown): value is Record<string | number | symbol, unknown>

isRgbaColor()

Determines if a value is a valid CSS RGBA color.

isRgbaColor(value: unknown): boolean

isRgbColor()

Determines if a value is a valid CSS RGB color.

isRgbColor(value: unknown): boolean

isRgbishColor()

Determines if a value is a valid CSS RGB or RGBA color.

isRgbishColor(value: unknown): boolean

isStr()

isStr(value: unknown): value is string

kebabize()

Kebabizes a string.

kebabize(str: string): string

mergeObjects()

Merges objects deeply.

mergeObjects<T extends Record<string | number | symbol, V>, V>(...objects: (T | PartialDeep<T>)[]): T

preloadImg()

Loads an image from a source to the browser.

async preloadImg(src: string): Promise<Event>

preloadImgs()

Loads images from multiple sources to the browser.

async preloadImgs(...srcs: string[]): Promise<Event[]>

range()

Creates a range array.

range(startOrEnd: number, end: number | null | undefined = null, step: number = 1): number[]

rgbArrayToHex()

Converts a RGB value array to a HEX value

rgbArrayToHex(rgbArray: number[]): string

rgbArrayToRgb()

Converts a RGB value array to a CSS RGB value

rgbArrayToRgb(rgbArray: number[]): string

rgbToArray()

Converts a CSS RGB color to a RGB value array

rgbToArray(value: unknown): number[] | null

rgbToHex()

Converts a CSS RGB color to a HEX value

rgbToHex(value: unknown): string | null

sum()

Sums values.

sum(...values: number[]): number

wait()

Waits a given number of milliseconds.

async wait(ms: number): Promise<number>

$pluginCache

Stores style objects for component properties that are too inefficient to be generated from scratch each time. Helps with performance, but has to be cleared whenever the active color theme is switched.

Component instance:

this.$vdhCache; // The property name can be changed via `cache.propertyKey` option

Composition API:

import { useCache } from "vdh";

const $vdhCache = useCache();

clear()

Clears cache of the plugin.

clear(): void

Components

div

r-class (responsive class attribute)

<template>
  <vdh-div
    :r-class="{
      _: 'some-element',
      md: 'some-element--md',
      xl: 'some-element--xl'
    }"
  >
    Greetings!
  </vdh-div>
</template>

<style lang="scss" scoped>
.some-element {
  color: #fff;
  background: #f00;
  font-size: 10px;
  line-height: 2;

  &.some-element--md {
    font-size: 12px;
    line-height: 1.5;
  }

  &.some-element--xl {
    font-size: 14px;
    letter-spacing: 2px;
  }
}
</style>

r-style (responsive style attribute)

<template>
  <vdh-div
    :r-style="{
      _: {
        color: '#fff',
        background: '#f00',
        fontSize: '10px',
        lineHeight: '2'
      },
      md: {
        fontSize: '12px',
        lineHeight: '1.5'
      },
      xl: {
        fontSize: '14px',
        letterSpacing: '2px'
      }
    }"
  >
    Greetings!
  </vdh-div>
</template>

w (width)

<template>
  <vdh-div class="some-element" w="200px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :w="{ _: '200px', md: '250px', xl: '300px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

h (height)

<template>
  <vdh-div class="some-element" h="100px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :h="{ _: '100px', md: '200px', xl: '400px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

size (width + height)

<template>
  <vdh-div class="some-element" size="200px"> Greetings! </vdh-div>

  <vdh-div class="some-element" size="200px 100px"> Greetings! </vdh-div>

  <vdh-div
    class="some-element"
    :size="{ _: '200px 100px', md: '250px 200px', xl: '300px 400px' }"
  >
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

max-w (max-width)

<template>
  <vdh-div class="some-element" max-w="200px"> Greetings! </vdh-div>

  <vdh-div
    class="some-element"
    :max-w="{ _: '200px', md: '250px', xl: '300px' }"
  >
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 500px;
}
</style>

max-h (max-height)

<template>
  <vdh-div class="some-element" max-h="100px"> Greetings! </vdh-div>

  <vdh-div
    class="some-element"
    :max-h="{ _: '100px', md: '200px', xl: '400px' }"
  >
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
  height: 500px;
}
</style>

min-w (min-width)

<template>
  <vdh-div class="some-element" min-w="200px"> Greetings! </vdh-div>

  <vdh-div
    class="some-element"
    :min-w="{ _: '200px', md: '250px', xl: '300px' }"
  >
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 100px;
}
</style>

min-h (min-height)

<template>
  <vdh-div class="some-element" min-h="100px"> Greetings! </vdh-div>

  <vdh-div
    class="some-element"
    :min-h="{ _: '100px', md: '200px', xl: '400px' }"
  >
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
  height: 50px;
}
</style>

m (margin)

<template>
  <vdh-div class="some-element" m="10px"> Greetings! </vdh-div>

  <vdh-div class="some-element" m="10px 15px"> Greetings! </vdh-div>

  <vdh-div class="some-element" m="10px 5px 15px 20px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :m="{ _: '10px', md: '15px', xl: '20px 25px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

mx (margin-left + margin-right)

<template>
  <vdh-div class="some-element" mx="10px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :mx="{ _: '10px', md: '15px', xl: '20px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

my (margin-top + margin-bottom)

<template>
  <vdh-div class="some-element" my="10px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :my="{ _: '10px', md: '15px', xl: '20px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

mt (margin-top)

<template>
  <vdh-div class="some-element" mt="10px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :mt="{ _: '10px', md: '15px', xl: '20px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

mb (margin-bottom)

<template>
  <vdh-div class="some-element" mb="10px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :mb="{ _: '10px', md: '15px', xl: '20px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

ml (margin-left)

<template>
  <vdh-div class="some-element" ml="10px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :ml="{ _: '10px', md: '15px', xl: '20px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

mr (margin-right)

<template>
  <vdh-div class="some-element" mr="10px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :mr="{ _: '10px', md: '15px', xl: '20px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

p (padding)

<template>
  <vdh-div class="some-element" p="10px"> Greetings! </vdh-div>

  <vdh-div class="some-element" p="10px 15px"> Greetings! </vdh-div>

  <vdh-div class="some-element" p="10px 5px 15px 20px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :p="{ _: '10px', md: '15px', xl: '20px 25px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

px (padding-left + padding-right)

<template>
  <vdh-div class="some-element" px="10px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :px="{ _: '10px', md: '15px', xl: '20px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

py (padding-top + padding-bottom)

<template>
  <vdh-div class="some-element" py="10px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :py="{ _: '10px', md: '15px', xl: '20px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

pt (padding-top)

<template>
  <vdh-div class="some-element" pt="10px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :pt="{ _: '10px', md: '15px', xl: '20px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

pb (padding-bottom)

<template>
  <vdh-div class="some-element" pb="10px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :pb="{ _: '10px', md: '15px', xl: '20px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

pl (padding-left)

<template>
  <vdh-div class="some-element" pl="10px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :pl="{ _: '10px', md: '15px', xl: '20px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

pr (padding-right)

<template>
  <vdh-div class="some-element" pr="10px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :pr="{ _: '10px', md: '15px', xl: '20px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

rounded (border-radius)

<template>
  <vdh-div class="some-element" rounded="15px"> Greetings! </vdh-div>

  <vdh-div class="some-element" :rounded="{ _: '5px', md: '10px', xl: '15px' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

bg (background)

<template>
  <vdh-div class="some-element" bg="#f00"> Greetings! </vdh-div>

  <vdh-div
    class="some-element"
    bg="url(/some/img/path.svg) center / cover no-repeat local"
  >
    Greetings!
  </vdh-div>

  <vdh-div class="some-element" :bg="{ _: '#f00', md: '#0f0', xl: '#00f' }">
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  width: 200px;
  height: 100px;
}
</style>

bg-img (background-image)

<template>
  <vdh-div class="some-element" :bg-img="showImg ? someImgA : null" />

  <vdh-div class="some-element" :bg-img="[someImgA, someImgB]" />
</template>

<script setup>
import someImgA from "@/assets/img/some-img-a.svg";
import someImgB from "@/assets/img/some-img-b.svg";

defineProps({
  showImgA: { type: Boolean }
});
</script>

<style scoped>
.some-element {
  width: 500px;
  height: 500px;
  background: center / contain no-repeat local;
}
</style>

relative (position: relative)

<template>
  <vdh-div class="some-element" relative>
    <div class="some-absolute-text">Greetings!</div>
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 500px;
  height: 500px;
}

.some-absolute-text {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
</style>

shadow (box-shadow)

<template>
  <vdh-div class="some-element" shadow="1px 2px 3px #00000066">
    Greetings!
  </vdh-div>

  <vdh-div
    class="some-element"
    shadow="1px 2px 3px #00000066, -1px -2px 3px #ffffff66"
  >
    Greetings!
  </vdh-div>

  <vdh-div
    class="some-element"
    :shadow="['1px 2px 3px #00000066', '-1px -2px 3px #ffffff66']"
  >
    Greetings!
  </vdh-div>

  <vdh-div
    class="some-element"
    :shadow="{
      _: '1px 2px 3px #00000066',
      md: '#2px 3px 4px #88888866',
      xl: '#3px 4px 5px #ffffff66'
    }"
  >
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

border

<template>
  <vdh-div
    class="some-element"
    border="5px #f00"
  >
    Greetings!
  </vdh-div>

  <vdh-div
    class="some-element"
    :border="['#f00', 'solid', '5px']"
  >
    Greetings!
  </vdh-div>

  <vdh-div
    class="some-element"
    :border="{
      _: '2px #f00',
      md: ['dotted', '3px', '#0f0'],
      xl: '5px solid #00f'
    }"
  >
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  width: 200px;
  height: 100px;
}

border-t (border-top)

<template>
  <vdh-div
    class="some-element"
    border-t="5px #f00"
  >
    Greetings!
  </vdh-div>

  <vdh-div
    class="some-element"
    :border-t="['#f00', 'solid', '5px']"
  >
    Greetings!
  </vdh-div>

  <vdh-div
    class="some-element"
    :border-t="{
      _: '2px #f00',
      md: ['dotted', '3px', '#0f0'],
      xl: '5px solid #00f'
    }"
  >
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  width: 200px;
  height: 100px;
}

border-b (border-bottom)

<template>
  <vdh-div
    class="some-element"
    border-b="5px #f00"
  >
    Greetings!
  </vdh-div>

  <vdh-div
    class="some-element"
    :border-b="['#f00', 'solid', '5px']"
  >
    Greetings!
  </vdh-div>

  <vdh-div
    class="some-element"
    :border-b="{
      _: '2px #f00',
      md: ['dotted', '3px', '#0f0'],
      xl: '5px solid #00f'
    }"
  >
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  width: 200px;
  height: 100px;
}

border-l (border-left)

<template>
  <vdh-div
    class="some-element"
    border-l="5px #f00"
  >
    Greetings!
  </vdh-div>

  <vdh-div
    class="some-element"
    :border-l="['#f00', 'solid', '5px']"
  >
    Greetings!
  </vdh-div>

  <vdh-div
    class="some-element"
    :border-l="{
      _: '2px #f00',
      md: ['dotted', '3px', '#0f0'],
      xl: '5px solid #00f'
    }"
  >
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  width: 200px;
  height: 100px;
}

border-r (border-right)

<template>
  <vdh-div
    class="some-element"
    border-r="5px #f00"
  >
    Greetings!
  </vdh-div>

  <vdh-div
    class="some-element"
    :border-r="['#f00', 'solid', '5px']"
  >
    Greetings!
  </vdh-div>

  <vdh-div
    class="some-element"
    :border-r="{
      _: '2px #f00',
      md: ['dotted', '3px', '#0f0'],
      xl: '5px solid #00f'
    }"
  >
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  width: 200px;
  height: 100px;
}

overflow

<template>
  <vdh-div class="some-element" overflow="hidden auto"> Greetings! </vdh-div>

  <vdh-div
    class="some-element"
    :overflow="{
      _: 'scroll',
      md: 'auto scroll',
      xl: 'hidden auto'
    }"
  >
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 800px;
  height: 600px;
}
</style>

cursor

<template>
  <vdh-div class="some-element" cursor="pointer"> Greetings! </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

user-select

<template>
  <vdh-div class="some-element" user-select="auto"> Greetings! </vdh-div>

  <vdh-div class="some-element" user-select="none"> Greetings! </vdh-div>

  <vdh-div class="some-element" :user-select="true"> Greetings! </vdh-div>

  <vdh-div class="some-element" :user-select="false"> Greetings! </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

pointer-events

<template>
  <vdh-div class="some-element" pointer-events="auto"> Greetings! </vdh-div>

  <vdh-div class="some-element" pointer-events="none"> Greetings! </vdh-div>

  <vdh-div class="some-element" :pointer-events="true"> Greetings! </vdh-div>

  <vdh-div class="some-element" :pointer-events="false"> Greetings! </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

opacity

<template>
  <vdh-div class="some-element" opacity="0.5"> Greetings! </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

transition

<template>
  <vdh-div class="some-element" transition="300ms" />

  <vdh-div class="some-element" transition=".3s" />

  <vdh-div class="some-element" transition="opacity 300ms, color 200ms" />

  <vdh-div
    class="some-element"
    :transition="{
      opacity: '300ms',
      color: '200ms'
    }"
  />
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

transform

<template>
  <vdh-div class="some-element" transform="scale(0.5)"> Greetings! </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

filter

z (z-index)

<template>
  <div class="some-element">
    <vdh-div class="some-absolute-element" z="1"> Hello! </vdh-div>

    <div class="some-absolute-element">Let me in!</div>
  </div>
</template>

<style scoped>
.some-element {
  width: 800px;
  height: 600px;
  position: relative;
}

.some-absolute-element {
  position: absolute;
  inset: 0;
  background: #f00;
}
</style>

text

<template>
  <vdh-div
    class="some-element"
    text="2rem #fff bold uppercase center nowrap ellipsis"
  >
    Greetings!
  </vdh-div>

  <vdh-div class="some-element" text="20px / 1.5 900 justify $someColor">
    Greetings!
  </vdh-div>

  <vdh-div
    class="some-element"
    :text="{
      _: '12px / 15px 400 $someColor end',
      md: '14px / 20px',
      xl: '16px 600'
    }"
  >
    Greetings!
  </vdh-div>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

span

Same properties as div, but with a span tag.

<template>
  <div class="some-element">
    Hello <vdh-span text="#f00 bold">World</vdh-span>!
  </div>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

absolute

Inherits all properties from div.\ Comes with position CSS property set as 'absolute' by default.\ Has additional properties to help with absolute layout.

inset

<template>
  <vdh-absolute class="some-element" inset="0"> Greetings! </vdh-absolute>

  <vdh-absolute class="some-element" inset="50px"> Greetings! </vdh-absolute>

  <vdh-absolute class="some-element" inset="50px 100px">
    Greetings!
  </vdh-absolute>

  <vdh-absolute class="some-element" inset="50px 60px 70px 80px">
    Greetings!
  </vdh-absolute>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

top

<template>
  <vdh-absolute class="some-element" top="10px"> Greetings! </vdh-absolute>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

bottom

<template>
  <vdh-absolute class="some-element" bottom="10px"> Greetings! </vdh-absolute>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

left

<template>
  <vdh-absolute class="some-element" left="10px"> Greetings! </vdh-absolute>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

right

<template>
  <vdh-absolute class="some-element" right="10px"> Greetings! </vdh-absolute>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

cover

Sets following CSS properties:

inset: 0
max-wdith: 100%
max-height: 100%
border-radius: inherit

<template>
  <vdh-absolute class="some-element" cover> Greetings! </vdh-absolute>
</template>

<style scoped>
.some-element {
  background: #f00;
}
</style>

flex

Inherits all properties from div.\ Comes with display CSS property set as 'flex' by default.\ Has additional properties to help with flex layout.

direction

<template>
  <vdh-flex direction="column">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex direction="col">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex direction="col-reverse">
    <div class="some-element">First but second</div>
    <div class="some-element">Second but first</div>
  </vdh-flex>

  <vdh-flex direction="row">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex direction="row-reverse">
    <div class="some-element">First but second</div>
    <div class="some-element">Second but first</div>
  </vdh-flex>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

wrap

<template>
  <vdh-flex wrap>
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex :wrap="false">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex wrap="true">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex wrap="false">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex wrap="nowrap">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex wrap="wrap">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex wrap="wrap-reverse">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex wrap="reverse">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

flow

direction and wrap shorthand.

<template>
  <vdh-flex flow="column nowrap">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex flow="col">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex flow="col-reverse wrap">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

align-h

<template>
  <vdh-flex align-h="start">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex align-h="center">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex align-h="end">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex align-h="around">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex align-h="evenly">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex align-h="between">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

align-v

<template>
  <vdh-flex align-v="start">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex align-v="center">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex align-v="end">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex align-v="stretch">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex align-v="baseline">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

align

align-h and align-v shorthand.

<template>
  <vdh-flex align="end start">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex align="center baseline">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex align="center">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

align-content

<template>
  <vdh-flex class="some-parent-element" align-content="start">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex class="some-parent-element" align-content="center">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex class="some-parent-element" align-content="end">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex class="some-parent-element" align-content="around">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex class="some-parent-element" align-content="evenly">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex class="some-parent-element" align-content="between">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex class="some-parent-element" align-content="stretch">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>
</template>

<style scoped>
.some-parent-element {
  width: 800px;
  height: 600px;
}

.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

col-gap

<template>
  <vdh-flex col-gap="50px">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

row-gap

<template>
  <vdh-flex row-gap="100px">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 100%;
  height: 100px;
}
</style>

gap

col-gap and row-gap shorthand.

<template>
  <vdh-flex gap="50px 100px">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>

  <vdh-flex gap="20px">
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
    <div class="some-element">Greetings!</div>
  </vdh-flex>
</template>

<style scoped>
.some-element {
  background: #f00;
  width: 50%;
  height: 100px;
}
</style>

fill

<template>
  <vdh-flex class="some-row" fill>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-flex>
</template>

<style scoped>
.some-row {
  background: #f00;
  width: 800px;
  height: 100px;
}
</style>

flex item

Inherits all properties from div.\ Has additional properties to help with flex layout from a children's position.

grow

<template>
  <vdh-flex class="some-row">
    <vdh-fi grow>Greetings!</vdh-fi>

    <vdh-fi grow="3">Greetings!</vdh-fi>
  </vdh-flex>
</template>

<style scoped>
.some-row {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

shrink

<template>
  <vdh-flex class="some-row">
    <vdh-fi shrink="2">Greetings!</vdh-fi>
  </vdh-flex>
</template>

<style scoped>
.some-row {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

basis

<template>
  <vdh-flex class="some-row">
    <vdh-fi basis="100px">Greetings!</vdh-fi>
  </vdh-flex>
</template>

<style scoped>
.some-row {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

order

<template>
  <vdh-flex class="some-row">
    <vdh-fi order="2">Greetings!</vdh-fi>

    <vdh-fi order="1">Greetings!</vdh-fi>
  </vdh-flex>
</template>

<style scoped>
.some-row {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

align

<template>
  <vdh-flex class="some-row">
    <vdh-fi align="start">Greetings!</vdh-fi>

    <vdh-fi align="center">Greetings!</vdh-fi>

    <vdh-fi align="end">Greetings!</vdh-fi>

    <vdh-fi align="stretch">Greetings!</vdh-fi>

    <vdh-fi align="baseline">Greetings!</vdh-fi>
  </vdh-flex>
</template>

<style scoped>
.some-row {
  background: #f00;
  width: 200px;
  height: 100px;
}
</style>

grid

Inherits all properties from div.\ Comes with display CSS property set as 'grid' by default.\ Has additional properties to help with grid layout.

cols

<template>
  <vdh-grid class="some-grid" cols="1fr 50px auto" rows="40px 1fr">
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    :cols="{
      _: 'repeat(3, 1fr)',
      md: '100px 1fr 3fr',
      xl: '2fr 1fr auto'
    }"
    rows="40px 1fr"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 800px;
  height: 600px;
}
</style>

auto-cols

<template>
  <vdh-grid class="some-grid" auto-cols="1fr 50px" rows="1fr auto">
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 800px;
  height: 600px;
}
</style>

rows

<template>
  <vdh-grid class="some-grid" cols="1fr 50px auto" rows="40px 1fr">
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="repeat(3, 1fr)"
    :rows="{
      _: 'repeat(2, 1fr)',
      md: '100px 1fr',
      xl: '2fr 1fr'
    }"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 800px;
  height: 600px;
}
</style>

auto-rows

<template>
  <vdh-grid class="some-grid" cols="1fr 50px" auto-rows="40px auto">
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 800px;
  height: 600px;
}
</style>

areas

<template>
  <vdh-grid
    class="some-grid"
    cols="1fr 50px"
    rows="40px auto"
    areas="'item2 item3' 'item4 item1'"
  >
    <vdh-gi area="item1">Greetings!</vdh-gi>
    <vdh-gi area="item2">Greetings!</vdh-gi>
    <vdh-gi area="item3">Greetings!</vdh-gi>
    <vdh-gi area="item4">Greetings!</vdh-gi>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="1fr 50px"
    rows="40px auto 30px 50px"
    :areas="[
      ['item5', 'item3'],
      'item7 item8',
      ['item6', 'item2'],
      ['item4', 'item1']
    ]"
  >
    <vdh-gi area="item1">Greetings!</vdh-gi>
    <vdh-gi area="item2">Greetings!</vdh-gi>
    <vdh-gi area="item3">Greetings!</vdh-gi>
    <vdh-gi area="item4">Greetings!</vdh-gi>
    <vdh-gi area="item5">Greetings!</vdh-gi>
    <vdh-gi area="item6">Greetings!</vdh-gi>
    <vdh-gi area="item7">Greetings!</vdh-gi>
    <vdh-gi area="item8">Greetings!</vdh-gi>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 200px;
}
</style>

auto-flow

<template>
  <vdh-grid
    class="some-grid"
    cols="1fr 50px"
    auto-rows="40px auto"
    aut-flow="column"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="1fr 50px"
    auto-rows="40px auto"
    aut-flow="row dense"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="1fr 50px"
    auto-rows="40px auto"
    aut-flow="col dense"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 200px;
}
</style>

align-content-h

<template>
  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content-h="start"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content-h="center"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content-h="end"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content-h="stretch"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content-h="between"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content-h="around"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content-h="evenly"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 200px;
  height: 200px;
}
</style>

align-content-v

<template>
  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content-v="start"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content-v="center"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content-v="end"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content-v="stretch"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content-v="around"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content-v="evenly"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content-v="between"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 200px;
  height: 200px;
}
</style>

align-content

<template>
  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content="start end"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-content="center"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 200px;
  height: 200px;
}
</style>

align-items-h

<template>
  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-items-h="start"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-items-h="center"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-items-h="end"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-items-h="stretch"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 200px;
  height: 200px;
}
</style>

align-items-v

<template>
  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-items-v="start"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-items-v="center"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-items-v="end"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-items-v="stretch"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 200px;
  height: 200px;
}
</style>

align-items

<template>
  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-items="start end"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid
    class="some-grid"
    cols="100px 50px"
    rows="40px auto"
    align-items="center"
  >
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 200px;
  height: 200px;
}
</style>

col-gap

<template>
  <vdh-grid class="some-grid" cols="100px 50px" rows="40px auto" col-gap="10px">
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 200px;
  height: 200px;
}
</style>

row-gap

<template>
  <vdh-grid class="some-grid" cols="100px 50px" rows="40px auto" row-gap="10px">
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 200px;
  height: 200px;
}
</style>

gap

<template>
  <vdh-grid class="some-grid" cols="100px 50px" rows="40px auto" gap="10px 5px">
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>

  <vdh-grid class="some-grid" cols="100px 50px" rows="40px auto" gap="10px">
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 200px;
  height: 200px;
}
</style>

grid item

Inherits all properties from div.\ Has additional properties to help with grid layout from a children's position.

col

<template>
  <vdh-grid class="some-grid" cols="1fr 50px" rows="40px auto">
    <div>Greetings!</div>
    <div>Greetings!</div>
    <vdh-gi col="1 / 3">Greetings!</vdh-gi>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 200px;
  height: 200px;
}
</style>

row

<template>
  <vdh-grid class="some-grid" cols="1fr 50px" rows="40px auto">
    <vdh-gi row="1 / 3">Greetings!</vdh-gi>
    <div>Greetings!</div>
    <div>Greetings!</div>
  </vdh-grid>
</template>

<style scoped>
.some-grid {
  background: #f00;
  width: 200px;
  height: 200px;
}
</style>

area

<template>
  <vdh-grid
    class="some-grid"
    cols="1fr 50px"
    rows="40px auto"
    areas="'item2 item3' 'item4 item1'"
  >
    <vdh-gi area="item1">Greetings!</vdh-gi>
    <vdh-gi area="item2">Greetings!</vdh-gi>
    <vdh-gi area="item3">

vue vuejs vuejs3 javascript typescript

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

Vue Design Helper

This plugin is in active development and is NOT intended for use (yet)!

Table of Contents

Features

Installation

Setup

options

Global properties

$colorStore

defaultTheme

activeTheme

setActiveTheme()

unsetActiveTheme()

restoreDefaultTheme()

themes

themeKeys

addTheme()

alterTheme()

removeTheme()

baseColors

themeColors

activeColors

parseColor()

parseColors()

$colors

$window

width

height

defaultBpKey

breakpoints

intactBpKeys

brokenBpKeys

activeBpKey

isIntactBp()

isBrokenBp()

intactBpKeysOf()

brokenBpKeysOf()

activeBpKeyOf()

isResponsive()

parseResponsive()

parseIfResponsive()

parseResponsiveToStr()

isMobileBrowser

isMobile

$utils

areArraysEqual()

capitalize()

cloneDeep()

countInArray()

countInStr()

discardArrayDuplicates()

discardObjKeysOf()

discardStrDuplicates()

formatNum()

hasDuplicates()

interpolateColors()

isArray()

isBool()

isCssColor()

isEmptyObj()

isFn()

isHexColor()

isNullish()

isNum()

isNumeric()

isObj()

isRgbaColor()

isRgbColor()

isRgbishColor()

isStr()

kebabize()

mergeObjects()

preloadImg()

preloadImgs()

range()

rgbArrayToHex()

rgbArrayToRgb()

rgbToArray()

rgbToHex()

sum()