Bootstrap styled Vue components ready to drop into a project
\r\n\r\n\r\n\r\nA collection of components that can be dropped into projects, not overly complicated.\r\n\r\n## Index\r\n- [Usage](#usage)\r\n - [Download & Installation](#download--installation)\r\n - [Mount Globally](#mount-globally)\r\n - [Mount Within Component](#mount-within-component)\r\n- [Field Components](#fields)\r\n - [Input Field](#input-field)\r\n - [Radio Field](#radio-field)\r\n - [Select Field](#select-field)\r\n - [Multiselect Field](#multiselect-field)\r\n - [Date Field](#date-field)\r\n - [Switch Field](#switch-field)\r\n\r\n## Usage\r\n\r\n### Download & Installation\r\n```shell\r\n$ npm i tuxedo-elements\r\n```\r\nSome CSS styling is available (recommended) to be included in your compiled stylesheets\r\n```css\r\n@import '~tuxedo-elements/dist/tuxedo.css';\r\n```\r\n\r\n### Mount Globally\r\n```js\r\nimport { TuxedoInput, TuxedoRadio } from 'tuxedo-elements'\r\n\r\nconst components = {\r\n TuxedoInput,\r\n TuxedoRadio\r\n}\r\n\r\nObject.entries(components).forEach(([name, component]) => Vue.component(name, component))\r\n```\r\n\r\n### Mount Within Component\r\n```vue\r\n\r\n```\r\n\r\n### Fields\r\nAll fields include a few standard props that can be used consistently throughout.\r\n\r\n**:name (required)** \r\nThis 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.\r\n\r\n**:label** \r\nOptional, set the attached label markup to the field.\r\n\r\n**:sub** \r\nOptional, set `````` text next to the label and within the label tag.\r\n\r\n**:help** \r\nOptional, include a helpful bit of text to guide the user. This text gets replaced with error text if there is some validation problem.\r\n\r\n**:inputClass** \r\nOptional, include class declarations to be applied to the input field.\r\n\r\n#### Input Field\r\n```vue\r\n\r\n```\r\n\r\n#### Radio Field\r\n```vue\r\n\r\n```\r\n\r\n#### Select Field\r\nThis 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.\r\n```vue\r\n\r\n\r\n# Pass in a default value, and insist on simple returns\r\n\r\n```\r\n\r\n#### Multiselect Field\r\nSimilar to above, but we can pass in the 'multi' prop to let our select field know it should be multi-select\r\n```vue\r\n\r\n```\r\nThis 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. \r\n\r\n#### Date Field\r\n```vue\r\n\r\n\r\n# Make it a date range picker by passing the 'range' prop\r\n\r\n\r\n# Insist on a specific format to get and set by passing in the 'insistFormat' prop\r\n# Formats available include:\r\n# 'iso', 'isoDate' (which returns as date only no tz), 'isoDateTime' (excludes tz)\r\n\r\n```\r\n\r\n#### Switch Field\r\n```vue\r\n\r\n```\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License\r\n","readmeFilename":"README.md"}