@obewds/vue-validators

Appearance

On this page

@obewds/vue-validators ​

Welcome to the docs page for OBE:WDS's vue-validators data sets for Vue.js!

⚠️ Project Depreciated ⚠️ ​

This project has been depreciated. Use VueVentus (via github or via npm), which is the result of this project, and has this functionality along with much more.

Installation ​

bash
npm install @obewds/vue-validators --save-dev

Importing/Using Validators ​

Script setup syntax ​

html
<script setup lang="ts">
    // examples of importing validators individually
    import { blockLevelElementTags } from '@obewds/vue-validators'
    import { elementTags } from '@obewds/vue-validators'
    import { emptyElementTags } from '@obewds/vue-validators'
    import { inlineLevelElementTags } from '@obewds/vue-validators'
    import { unsupportedElementTags } from '@obewds/vue-validators'

    const props = defineProps({
        tag: {
            type: String,
            validator: (prop: string): boolean => (blockLevelElementTags).includes(prop),
        },
    })
</script>

Composition API syntax ​

html
<script lang="ts">
    // an example of importing validators together
    import {
        blockLevelElementTags,
        elementTags,
        emptyElementTags,
        inlineLevelElementTags,
        unsupportedElementTags
    } from '@obewds/vue-validators'
    import { defineComponent } from 'vue'

    export default defineComponent({
        props: {
            tag: {
                type: String,
                validator: (prop: string): boolean => (elementTags).includes(prop),
            },
        },
    })
</script>

Validators ​

Animation Directions ​

ts
export default <string[]>[
    'up',
    'down',
    'left',
    'right',
    '',
]

Block-Level Element Tags ​

ts
export default <string[]>[
    'address',
    'article',
    'aside',
    'blockquote',
    'details',
    'dialog',
    'dd',
    'div',
    'dl',
    'dt',
    'fieldset',
    'figcaption',
    'figure',
    'footer',
    'form',
    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
    'header',
    'hgroup',
    /*'hr',*/
    'li',
    'main',
    'nav',
    'ol',
    'p',
    'pre',
    'section',
    'table',
    'ul'
]

Block Orders ​

ts
export default <string[]>[
    'bottom',
    'top',
]

Button Types ​

ts
export default <string[]>[
    'button',
    'submit',
    'reset',
]

Element Tags ​

ts
export default <string[]>[
    // HTML Main root element
    /*'html',*/ 
    // HTML Document metadata elements
    /*'base',*/ /*'head',*/ /*'link',*/ /*'meta',*/ 'style', 'title', 
    // HTML Sectioning root element
    /*'body',*/ 
    // HTML Content sectioning elements
    'address', 'article', 'aside', 'footer', 'header', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'main', 'nav', 'section', 
    // HTML Text content elements
    'blockquote', 'dd', 'div', 'dl', 'dt', 'figcaption', 'figure', /*'hr',*/ 'li', 'menu', 'ol', 'p', 'pre', 'ul', 
    // HTML Inline text semantic elements
    'a', 'abbr', 'b', 'bdi', 'bdo', /*'br',*/ 'cite', 'code', 'data', 'dfn', 'em', 'i', 'kbd', 'mark', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'small', 'span', 'strong', 'sub', 'sup', 'time', 'u', 'var', /*'wbr',*/ 
    // HTML Image and multimedia elements
    /*'area',*/ 'audio', /*'img',*/ 'map', /*'track',*/ 'video', 
    // HTML Embedded content elements
    /*'embed',*/ 'iframe', 'object', /*'param',*/ 'picture', 'portal', /*'source',*/ 
    // HTML SVG and MathML elements
    'svg', 'math', 
    // HTML Scripting  elements
    'canvas', /*'noscript',*/ /*'script',*/ 
    // HTML Demarcating edits elements
    'del', 'ins', 
    // HTML Table content elements
    'caption', /*'col',*/ 'colgroup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 
    // HTML Forms elements
    'button', 'datalist', 'fieldset', 'form', /*'input',*/ 'label', 'legend', 'meter', 'optgroup', 'option', 'output', 'progress', 'select', 'textarea', 
    // HTML Interactive elements
    'details', 'dialog', 'summary', 
    // HTML Web Components elements
    /*'slot',*/ /*'template',*/ 
]

Empty Element Tags ​

ts
export default <string[]>[
    'area',
    'base',
    'br',
    'col',
    'embed',
    'hr',
    'img',
    'input',
    'keygen',
    'link',
    'meta',
    'param',
    'source',
    'track',
    'wbr',
]

FontAwesome Families ​

ts
export default <string[]>[
    'fab',
    'fad',
    'fal',
    'far',
    'fas',
    'fat',
]

FontAwesome Sizes ​

ts
export default <string[]>[
    'xs',
    'sm',
    '1x', // '1x' is effectively size 'md' - aka icon size inherits font size
    'lg',
    '2x',
    '3x',
    '4x',
    '5x',
    '6x',
    '7x',
    '8x',
    '9x',
    '10x',
]

Heading Levels ​

ts
export default <number[]>[
    1,
    2,
    3,
    4,
    5,
    6,
]

Inline-Level Element Tags ​

ts
export default <string[]>[
    'a',
    'abbr',
    'acronym',
    'audio', // if it has visible controls
    'b',
    'bdi',
    'bdo',
    'big',
    /*'br',*/
    'button',
    'canvas',
    'cite',
    'code',
    'data',
    'datalist',
    'del',
    'dfn',
    'em',
    /*'embed',*/
    'i',
    'iframe',
    /*'img',*/
    /*'input',*/
    'ins',
    'kbd',
    'label',
    'map',
    'mark',
    'meter',
    /*'noscript',*/
    'object',
    'output',
    'picture',
    'progress',
    'q',
    'ruby',
    's',
    'samp',
    /*'script',*/
    'select',
    /*'slot',*/
    'small',
    'span',
    'strong',
    'sub',
    'sup',
    'svg',
    /*'template',*/
    'textarea',
    'time',
    'u',
    'tt',
    'var',
    'video',
    /*'wbr',*/
]

Input Types ​

ts
export default <string[]>[
    // 'button',
    // 'checkbox',
    'color',
    'date',
    'datetime-local',
    'email',
    // 'file',
    // 'hidden',
    // 'image',
    'month',
    'number',
    'password',
    // 'radio',
    // 'range',
    // 'reset',
    'search',
    // 'submit',
    'tel',
    'text',
    'time',
    'url',
    // 'week',
]

Source Audio Types ​

ts
export default <string[]>[
    'audio/flac',
    'audio/mp4',
    'audio/mpeg',
    'audio/ogg',
    'audio/x-flac',
    'audio/webm',
]

Source Image Types ​

ts
export default <string[]>[
    'image/gif',
    'image/jpeg',
    'image/png',
    'image/svg+xml',
    'image/webp',
]

Source Video Types ​

ts
export default <string[]>[
    'video/mp4',
    'video/ogg',
    'video/webm',
]

Unsupported Element Tags ​

ts
export default <string[]>[
    'body',
    'head',
    'html',
    'noscript',
    'script',
    'slot',
    'template'
]

Uninstall ​

bash
npm uninstall @obewds/vue-validators