Prop Validators

The VueVentus component system comes with a variety of component Prop Validators for use within the Vue.js component validation system.

These modules are used to allow a single source of truth between library components - allowing developers to create customized, extended or within app custom components, and easily/DRYly add inherited props without having duplicated validation arrays.

ValidAudioSourceTypes

Use example

html

<script setup lang="ts">

    import { ValidAudioSourceTypes } from '@obewds/vueventus'
    import type { PropType } from 'vue'

    const props = defineProps({
        audioSource: {
            type: String as PropType<ValidAudioSourceTypes>,
            validator: (prop: ValidAudioSourceTypes) => (ValidAudioSourceTypes).includes(prop),
        }
    })
    
</script>

Module Code

// ./src/validators/ValidAudioSourceTypes.ts

const ValidAudioSourceTypes = [
    'audio/flac',
    'audio/mp4',
    'audio/mpeg',
    'audio/ogg',
    'audio/x-flac',
    'audio/webm',
] as const

type ValidAudioSourceTypes = typeof ValidAudioSourceTypes[number]
  
export default ValidAudioSourceTypes

ValidButtonTypes

Use example

html

<script setup lang="ts">

    import { ValidButtonTypes } from '@obewds/vueventus'
    import type { PropType } from 'vue'

    const props = defineProps({
        buttonType: {
            type: String as PropType<ValidButtonTypes>,
            validator: (prop: ValidButtonTypes) => (ValidButtonTypes).includes(prop),
        }
    })

</script>

Module Code

// ./src/validators/ValidButtonTypes.ts

const ValidButtonTypes = [
    'button',
    'submit',
    'reset',
] as const

type ValidButtonTypes = typeof ValidButtonTypes[number]
  
export default ValidButtonTypes

ValidColorModes

Use example

html

<script setup lang="ts">

    import { ValidColorModes } from '@obewds/vueventus'
    import type { PropType } from 'vue'

    const props = defineProps({
        colorMode: {
            type: String as PropType<ValidColorModes>,
            validator: (prop: ValidColorModes) => (ValidColorModes).includes(prop),
        }
    })

</script>

Module Code

// ./src/validators/ValidColorModes.ts

const ValidColorModes = [
    'light',
    'dark',
] as const

type ValidColorModes = typeof ValidColorModes[number]
  
export default ValidColorModes

ValidCommentStyles

Use example

html

<script setup lang="ts">

    import { ValidCommentStyles } from '@obewds/vueventus'
    import type { PropType } from 'vue'

    const props = defineProps({
        commentStyles: {
            type: String as PropType<ValidCommentStyles>,
            validator: (prop: ValidCommentStyles) => (ValidCommentStyles).includes(prop),
        }
    })

</script>

Module Code

// ./src/validators/ValidCommentStyles.ts

const ValidCommentStyles = [
    'normal',
    'italic',
    'oblique',
] as const

type ValidCommentStyles = typeof ValidCommentStyles[number]
  
export default ValidCommentStyles

ValidDirections

Use example

html

<script setup lang="ts">

    import { ValidDirections } from '@obewds/vueventus'
    import type { PropType } from 'vue'

    const props = defineProps({
        direction: {
            type: String as PropType<ValidDirections>,
            validator: (prop: ValidDirections) => (ValidDirections).includes(prop),
        }
    })

</script>

Module Code

// ./src/validators/ValidDirections.ts

const ValidDirections = [
    'up',
    'down',
    'left',
    'right',
    '',
] as const

type ValidDirections = typeof ValidDirections[number]
  
export default ValidDirections

ValidElementTags

Use example

html

<script setup lang="ts">

    import { ValidElementTags } from '@obewds/vueventus'
    import type { PropType } from 'vue'

    const props = defineProps({
        tag: {
            type: String as PropType<ValidElementTags>,
            validator: (prop: ValidElementTags) => (ValidElementTags).includes(prop),
        }
    })

</script>

Module Code

// ./src/validators/ValidElementTags.ts

const ValidElementTags = [

    // 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
    // 'hr',
    'blockquote', 'dd', 'div', 'dl', 'dt', 'figcaption', 'figure', 'li', 'menu', 'ol', 'p', 'pre', 'ul',

    // HTML Inline text semantic elements
    // 'br', 'wbr',
    'a', 'abbr', 'b', 'bdi', 'bdo', 'cite', 'code', 'data', 'dfn', 'em', 'i', 'kbd', 'mark', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'small', 'span', 'strong', 'sub', 'sup', 'time', 'u', 'var',

    // HTML Image and multimedia elements
    // 'area', 'img', 'track',
    'audio', 'map', 'video',

    // HTML Embedded content elements
    // 'embed', 'param', 'source',
    'iframe', 'object', 'picture', 'portal',

    // HTML SVG and MathML elements
    'svg', 'math',
    
    // HTML Scripting  elements
    // 'noscript', 'script',
    'canvas',

    // HTML Demarcating edits elements
    'del', 'ins',

    // HTML Table content elements
    // 'col',
    'caption', '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',

] as const

type ValidElementTags = typeof ValidElementTags[number]
  
export default ValidElementTags

ValidFontAwesomeFamilies

Use example

html

<script setup lang="ts">

    import { ValidFontAwesomeFamilies } from '@obewds/vueventus'
    import type { PropType } from 'vue'

    const props = defineProps({
        faFamily: {
            type: String as PropType<ValidFontAwesomeFamilies>,
            validator: (prop: ValidFontAwesomeFamilies) => (ValidFontAwesomeFamilies).includes(prop),
        }
    })

</script>

Module Code

// ./src/validators/ValidFontAwesomeFamilies.ts

// https://github.com/FortAwesome/Font-Awesome/blob/d3a7818c253fcbafff9ebd1d4abb2866c192e1d7/js-packages/%40fortawesome/fontawesome-common-types/index.d.ts#L2

const ValidFontAwesomeFamilies = [
    'fab',
    'fad',
    'fak',
    'fal',
    'far',
    'fas',
    'fass',
    'fat',
] as const

type ValidFontAwesomeFamilies = typeof ValidFontAwesomeFamilies[number]
  
export default ValidFontAwesomeFamilies

ValidFontAwesomeSizes

Use example

html

<script setup lang="ts">

    import { ValidFontAwesomeSizes } from '@obewds/vueventus'
    import type { PropType } from 'vue'

    const props = defineProps({
        faSize: {
            type: String as PropType<ValidFontAwesomeSizes>,
            validator: (prop: ValidFontAwesomeSizes) => (ValidFontAwesomeSizes).includes(prop),
        }
    })

</script>

Module Code

// ./src/validators/ValidFontAwesomeSizes.ts

const ValidFontAwesomeSizes = [
    'xs',
    'sm',
    '1x', // '1x' is effectively size 'md' & icon size inherits font size
    'lg',
    '2x',
    '3x',
    '4x',
    '5x',
    '6x',
    '7x',
    '8x',
    '9x',
    '10x',
    undefined, // need to add this or else TS will complain downstream
] as const

type ValidFontAwesomeSizes = typeof ValidFontAwesomeSizes[number]
  
export default ValidFontAwesomeSizes

ValidHeadingLevels

Use example

html

<script setup lang="ts">

    import { ValidHeadingLevels } from '@obewds/vueventus'
    import type { PropType } from 'vue'

    const props = defineProps({
        headingLevel: {
            type: String as PropType<ValidHeadingLevels>,
            validator: (prop: ValidHeadingLevels) => (ValidHeadingLevels).includes(prop),
        }
    })

</script>

Module Code

// ./src/validators/ValidHeadingLevels.ts

const ValidHeadingLevels = [ 1, 2, 3, 4, 5, 6 ] as const

type ValidHeadingLevels = typeof ValidHeadingLevels[number]
  
export default ValidHeadingLevels

ValidImageSourceTypes

Use example

html

<script setup lang="ts">

    import { ValidImageSourceTypes } from '@obewds/vueventus'
    import type { PropType } from 'vue'

    const props = defineProps({
        headingLevel: {
            type: String as PropType<ValidImageSourceTypes>,
            validator: (prop: ValidImageSourceTypes) => (ValidImageSourceTypes).includes(prop),
        }
    })

</script>

Module Code

// ./src/validators/ValidImageSourceTypes.ts

const ValidImageSourceTypes = [
    'image/gif',
    'image/jpeg',
    'image/png',
    'image/svg+xml',
    'image/webp',
] as const

type ValidImageSourceTypes = typeof ValidImageSourceTypes[number]
  
export default ValidImageSourceTypes

ValidInputTypes

Use example

html

<script setup lang="ts">

    import { ValidInputTypes } from '@obewds/vueventus'
    import type { PropType } from 'vue'

    const props = defineProps({
        headingLevel: {
            type: String as PropType<ValidInputTypes>,
            validator: (prop: ValidInputTypes) => (ValidInputTypes).includes(prop),
        }
    })

</script>

Module Code

// ./src/validators/ValidInputTypes.ts

const ValidInputTypes = [
    // 'button', // (use VvButton)
    // 'checkbox', // (use VvCheckbox)
    'color',
    'date',
    'datetime-local',
    'email',
    // 'file', // (use TBD)
    // 'hidden',
    // 'image', // (use TBD)
    'month',
    'number',
    'password',
    // 'radio', // (use VvRadio)
    // 'range', // (use TBD)
    // 'reset', // (use VvButton)
    'search',
    // 'submit', // (use VvButton)
    'tel',
    'text',
    'time',
    'url',
    // 'week', // (use TBD)
] as const

type ValidInputTypes = typeof ValidInputTypes[number]
  
export default ValidInputTypes

ValidListTypes

Use example

html

<script setup lang="ts">

    import { ValidListTypes } from '@obewds/vueventus'
    import type { PropType } from 'vue'

    const props = defineProps({
        tag: {
            type: String as PropType<ValidListTypes>,
            validator: (prop: ValidListTypes) => (ValidListTypes).includes(prop),
        }
    })

</script>

Module Code

// ./src/validators/ValidInputTypes.ts

const ValidInputTypes = [
    // 'button', // (use VvButton)
    // 'checkbox', // (use VvCheckbox)
    'color',
    'date',
    'datetime-local',
    'email',
    // 'file', // (use TBD)
    // 'hidden',
    // 'image', // (use TBD)
    'month',
    'number',
    'password',
    // 'radio', // (use VvRadio)
    // 'range', // (use TBD)
    // 'reset', // (use VvButton)
    'search',
    // 'submit', // (use VvButton)
    'tel',
    'text',
    'time',
    'url',
    // 'week', // (use TBD)
] as const

type ValidInputTypes = typeof ValidInputTypes[number]
  
export default ValidInputTypes

ValidUrlDecorations

Use example

html

<script setup lang="ts">

    import { ValidUrlDecorations } from '@obewds/vueventus'
    import type { PropType } from 'vue'

    const props = defineProps({
        urlDecoration: {
            type: String as PropType<ValidUrlDecorations>,
            validator: (prop: ValidUrlDecorations) => (ValidUrlDecorations).includes(prop),
        }
    })

</script>

Module Code

// ./src/validators/ValidUrlDecorations.ts

const ValidUrlDecorations = [
    'underline',
    'overline',
    'none',
] as const

type ValidUrlDecorations = typeof ValidUrlDecorations[number]
  
export default ValidUrlDecorations

ValidVideoSourceTypes

Use example

html

<script setup lang="ts">

    import { ValidVideoSourceTypes } from '@obewds/vueventus'
    import type { PropType } from 'vue'

    const props = defineProps({
        headingLevel: {
            type: String as PropType<ValidVideoSourceTypes>,
            validator: (prop: ValidVideoSourceTypes) => (ValidVideoSourceTypes).includes(prop),
        }
    })

</script>

Module Code

// ./src/validators/ValidVideoSourceTypes.ts

const ValidVideoSourceTypes = [
    'video/mp4',
    'video/ogg',
    'video/webm',
] as const

type ValidVideoSourceTypes = typeof ValidVideoSourceTypes[number]
  
export default ValidVideoSourceTypes

Prop Validators ​

ValidAudioSourceTypes ​

Use example ​

Module Code ​

ValidButtonTypes ​

Use example ​

Module Code ​

ValidColorModes ​

Use example ​

Module Code ​

ValidCommentStyles ​

Use example ​

Module Code ​

ValidDirections ​

Use example ​

Module Code ​

ValidElementTags ​

Use example ​

Module Code ​

ValidFontAwesomeFamilies ​

Use example ​

Module Code ​

ValidFontAwesomeSizes ​

Use example ​

Module Code ​

ValidHeadingLevels ​

Use example ​

Module Code ​

ValidImageSourceTypes ​

Use example ​

Module Code ​

ValidInputTypes ​

Use example ​

Module Code ​

ValidListTypes ​

Use example ​

Module Code ​

ValidUrlDecorations ​

Use example ​

Module Code ​

ValidVideoSourceTypes ​

Use example ​

Module Code ​

Prop Validators

ValidAudioSourceTypes

Use example

Module Code

ValidButtonTypes

Use example

Module Code

ValidColorModes

Use example

Module Code

ValidCommentStyles

Use example

Module Code

ValidDirections

Use example

Module Code

ValidElementTags

Use example

Module Code

ValidFontAwesomeFamilies

Use example

Module Code

ValidFontAwesomeSizes

Use example

Module Code

ValidHeadingLevels

Use example

Module Code

ValidImageSourceTypes

Use example

Module Code

ValidInputTypes

Use example

Module Code

ValidListTypes

Use example

Module Code

ValidUrlDecorations

Use example

Module Code

ValidVideoSourceTypes

Use example

Module Code