README
pf-ponzi
startup
- get dependencies
yarn - start the dev env
make dev
components
all form elements
| prop | desc |
|---|---|
| disabled | If the element should be disabled |
| loading | If the element is loading data before the user can interact with it |
| required | If the element is required - also sets 'not blank' as a rule |
| requiredRule | An alternate function to be run instead of 'not blank' |
| label | A label |
| rules | An array of functions, where the only argument to the function is the current value of the element. Can return an object of the form { valid: Boolean, hint: String, always?: Boolean } |
| id | An id to use for the form element - normally auto-generated |
checkbox
| prop | desc |
|---|---|
| checkboxes | An array of objects of the form { label, value, disabledTitle?: String} |
radio
| prop | desc |
|---|---|
| radios | An array of objects of the form { label, value } |
| button | Creates radio-buttons instead of radios |
collapse
| prop | desc |
|---|---|
| as | The HTML element for the parent |
| expand | Should be used with .sync — controls expansion |
| removeHidden | Removes children from the DOM when true, useful if the children shouldn\t be part of validation when hidden' |
input
| prop | desc |
|---|---|
| width | Possible values are "large" and "small" |
| parsify | Function to transform masked inputs before v-model - don't use parseInt, rather prefer v-model.number |
| mask | An options object from cleave.js options |
| suffix | A suffix to append to the input, padding is automatically applied to create space |
form
| prop | desc |
|---|---|
| v-model | The current validation-state of the entire form |
| validated | Should be used with .sync — whether validation has been triggerd on the form |
button
| prop | desc |
|---|---|
| filled | Creates a solid color button |
| flat | Creates a flat button (no outline) |
| loading | Disables the button and shows a loading animation in the label's place |
| small | Makes a smaller size button |
| smallMobile | Makes a smaller size button on mobile only |
| color | can be "red" or "green" |
flex (flexbox)
| prop | desc |
|---|---|
| direction | Options equivalent to flex-direction |
| mobileDirection | Options equivalent to flex-direction, used on mobile |
| align | Options equivalent to align-items |
| justify | Options equivalent to justify-content |
| wrap | Applies flex-wrap when true |
| as | The HTML element for the parent |
validation
| prop | desc |
|---|---|
| v-model | The value to validate against |
| noSpacing | Used with ui — removes spacing after the hint text |
| preventChildSpacing | Used with ui — removes spacing before the hint text, useful when rapping another form element |
| ui | Used when a hint will be shown to the user from this validation |
| control | Injects several form controls into the default scoped slot |
select
no additional props
loading
no additional props