A collection of components that can be dropped into projects, not overly complicated.

Index

• Usage
  • Download & Installation
  • Mount Globally
  • Mount Within Component
• Field Components
  • Input Field
  • Radio Field
  • Select Field
  • Multiselect Field
  • Date Field
  • Switch Field

Usage

Download & Installation

$ npm i tuxedo-elements

Some CSS styling is available (recommended) to be included in your compiled stylesheets

@import '~tuxedo-elements/dist/tuxedo.css';

Mount Globally

import { TuxedoInput, TuxedoRadio } from 'tuxedo-elements'

const components = {
    TuxedoInput,
    TuxedoRadio
}

Object.entries(components).forEach(([name, component]) => Vue.component(name, component))

Mount Within Component

<script>
    import { TuxedoInput, TuxedoRadio } from 'tuxedo-elements'
    
    export default {
      name: 'SomeComponent',
      components: {
        TuxedoInput,
        TuxedoRadio
      }
    }
</script>

Fields

All fields include a few standard props that can be used consistently throughout.

:name (required) This prop passes a standard html name value to the field, a required prop with a unique value as it helps to differentiate the field form others.

:label Optional, set the attached label markup to the field.

:sub Optional, set <small> text next to the label and within the label tag.

:help Optional, include a helpful bit of text to guide the user. This text gets replaced with error text if there is some validation problem.

:inputClass Optional, include class declarations to be applied to the input field.

Input Field

<tuxedo-input :name="'first_name'" :label="'Some Label'" :help="'Some help text that appears below the field'" v-model="resource" />

Radio Field

<tuxedo-radio :name="'first_name'" :label="'Some Label'" :help="'Some help text that appears below the field'" v-model="resource" />

Select Field

This is an object select field with search functionality. An array of objects should be passed in as options, and an array of chosen options are returned. by default the component will use id and label properties of the objects in the option fields. An array of selected objects will be returned.

<tuxedo-select :name="'select'" :label="'Select Field'" v-model="resource" :options="[{}]" />

# Pass in a default value, and insist on simple returns
<tuxedo-select 
        :name="'select'" 
        :label="'Select Field'" 
        v-model="resource" 
        :options="[{id: 'yes', label: 'Yes'}, {id: 'no', label: 'No'}]"
        :default="'yes'" # the default value based on the insisted return
        :insistReturn="'id'" 
/>

Multiselect Field

Similar to above, but we can pass in the 'multi' prop to let our select field know it should be multi-select

<tuxedo-select 
        :name="'multi-select'" 
        :label="'Multiselect Field'"
        :options="[]"
        :multi="true" />

This field also will also display a 'Select All' and 'Unselect All' buttons for use. The text of these buttons can be changed by using the props 'insistSelectAll' and 'insistUnselectAll' to pass in the text preferred.

Date Field

<tuxedo-date :name="'date'" :label="'Some Label'" v-model="resource" />

# Make it a date range picker by passing the 'range' prop
<tuxedo-date :name="'dateRange'" :range="true" />

# Insist on a specific format to get and set by passing in the 'insistFormat' prop
# Formats available include:
# 'iso', 'isoDate' (which returns as date only no tz), 'isoDateTime' (excludes tz)
<tuxedo-date :insistFormat="'isoDate'" />

Switch Field

<tuxedo-switch :name="'switch'" :label="'Toggle this switch on and off'" v-model="resource" />

License

This project is licensed under the MIT License