@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.51

package/src/props/index.ts

@@ -1,479 +1,563 @@
 import type { PropType } from 'vue'
-import type { Option } from '@/types/generic'
-import type { NavItem } from '@/types/nav'
+import type { VvIconProps } from '@/components/VvIcon'
 import type {
-	AutoPlacementOptions,
-	FlipOptions,
-	OffsetOptions,
-	ShiftOptions,
-	SizeOptions,
+    AutoPlacementOptions,
+    FlipOptions,
+    OffsetOptions,
+    ShiftOptions,
+    SizeOptions,
 } from '@/types/floating-ui'
+import type { Option } from '@/types/generic'
+import type { NavItem } from '@/types/nav'
 import {
-	Placement,
-	Strategy,
-	Position,
-	Side,
-	AnchorTarget,
-	ButtonType,
+    ActionTag,
+    ButtonType,
+    Placement,
+    Position,
+    Side,
+    StorageType,
+    Strategy,
 } from '@/constants'
 
 export const LinkProps = {
-	/**
-	 * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
-	 * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
-	 */
-	to: {
-		type: [String, Object],
-	},
-	/**
-	 * Anchor href
-	 */
-	href: String,
-	/**
-	 * Anchor target
-	 */
-	target: {
-		type: String as PropType<`${AnchorTarget}`>,
-		validator: (value: AnchorTarget) =>
-			Object.values(AnchorTarget).includes(value),
-	},
-	/**
-	 * Anchor rel
-	 */
-	rel: {
-		type: String,
-		default: 'noopener noreferrer',
-	},
+    /**
+     * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+     * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+     */
+    to: {
+        type: [String, Object],
+    },
+    /**
+     * Anchor href
+     */
+    href: String,
+    /**
+     * Anchor target
+     */
+    target: String,
+    /**
+     * Anchor rel
+     */
+    rel: {
+        type: String,
+        default: 'noopener noreferrer',
+    },
 }
 
 export const ValidProps = {
-	/**
-	 * Valid status
-	 */
-	valid: Boolean,
-	/**
-	 * Valid label
-	 */
-	validLabel: [String, Array],
+    /**
+     * Valid status
+     */
+    valid: { type: Boolean, default: false },
+    /**
+     * Valid label
+     */
+    validLabel: { type: [String, Array], default: undefined },
 }
 
 export const InvalidProps = {
-	/**
-	 * Invalid status
-	 */
-	invalid: Boolean,
-	/**
-	 * Invalid label
-	 */
-	invalidLabel: [String, Array],
+    /**
+     * Invalid status
+     */
+    invalid: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Invalid label
+     */
+    invalidLabel: { type: [String, Array], default: undefined },
 }
 
 export const LoadingProps = {
-	/**
-	 * Loading status
-	 */
-	loading: Boolean,
-	/**
-	 * Loading label
-	 */
-	loadingLabel: {
-		type: String,
-		default: 'Loading...',
-	},
+    /**
+     * Loading status
+     */
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Loading label
+     */
+    loadingLabel: {
+        type: String,
+        default: 'Loading...',
+    },
 }
 
 export const DisabledProps = {
-	/**
-	 * Whether the form control is disabled
-	 */
-	disabled: Boolean,
+    /**
+     * Whether the form control is disabled
+     */
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+}
+
+export const RequiredProps = {
+    /**
+     * Whether the form control is required
+     */
+    required: {
+        type: Boolean,
+        default: false,
+    },
 }
 
 export const SelectedProps = {
-	/**
-	 * Whether the item is selected
-	 */
-	selected: Boolean,
+    /**
+     * Whether the item is selected
+     */
+    selected: {
+        type: Boolean,
+        default: false,
+    },
 }
 
 export const ActiveProps = {
-	/**
-	 * Whether the item is active
-	 */
-	active: Boolean,
+    /**
+     * Whether the item is active
+     */
+    active: {
+        type: Boolean,
+        default: false,
+    },
 }
 
 export const CurrentProps = {
-	/**
-	 * Whether the item is current
-	 */
-	current: Boolean,
+    /**
+     * Whether the item is current
+     */
+    current: {
+        type: Boolean,
+        default: false,
+    },
 }
 
 export const PressedProps = {
-	/**
-	 * Whether the item is pressed
-	 */
-	pressed: Boolean,
+    /**
+     * Whether the item is pressed
+     */
+    pressed: {
+        type: Boolean,
+        default: false,
+    },
 }
 
 export const LabelProps = {
-	/**
-	 * The item label
-	 */
-	label: [String, Number],
+    /**
+     * The item label
+     */
+    label: {
+        type: [String, Number],
+        default: undefined,
+    },
 }
 
 export const ReadonlyProps = {
-	/**
-	 * The value is not editable
-	 */
-	readonly: Boolean,
+    /**
+     * The value is not editable
+     */
+    readonly: {
+        type: Boolean,
+        default: false,
+    },
 }
 
 export const ModifiersProps = {
-	/**
-	 * Component BEM modifiers
-	 */
-	modifiers: [String, Array] as PropType<string | string[]>,
+    /**
+     * Component BEM modifiers
+     */
+    modifiers: {
+        type: [String, Array] as PropType<string | string[]>,
+        default: undefined,
+    },
 }
 
 export const HintProps = {
-	hintLabel: { type: String, default: '' },
+    hintLabel: { type: String, default: '' },
 }
 
 export const OptionsProps = {
-	/**
-	 * List of options, can be string[] or object[]
-	 */
-	options: {
-		type: Array as PropType<(Option | string)[]>,
-		default: () => [],
-	},
-	/**
-	 * Used when options are objects: key to use for option label
-	 */
-	labelKey: { type: [String, Function], default: 'label' },
-	/**
-	 * Used when options are objects: key to use for option label
-	 */
-	valueKey: { type: [String, Function], default: 'value' },
-	/**
-	 * Used when options are objects: key to use for option disabled
-	 */
-	disabledKey: { type: [String, Function], default: 'disabled' },
+    /**
+     * List of options, can be string[] or object[]
+     */
+    options: {
+        type: Array as PropType<(Option | string)[]>,
+        default: () => [],
+    },
+    /**
+     * Used when options are objects: key to use for option label
+     */
+    labelKey: { type: [String, Function], default: 'label' },
+    /**
+     * Used when options are objects: key to use for option label
+     */
+    valueKey: { type: [String, Function], default: 'value' },
+    /**
+     * Used when options are objects: key to use for option disabled
+     */
+    disabledKey: { type: [String, Function], default: 'disabled' },
 }
 
 export const CountProps = {
-	/**
-	 * Show character limit
-	 */
-	count: {
-		type: [Boolean, String],
-		default: false,
-		validator: (value: string) =>
-			[true, false, 'limit', 'countdown'].includes(value),
-	},
+    /**
+     * Show character limit
+     */
+    count: {
+        type: [Boolean, String],
+        default: false,
+        validator: (value: string) =>
+            [true, false, 'limit', 'countdown'].includes(value),
+    },
 }
 
 export const DebounceProps = {
-	/**
-	 * Milliseconds to wait before emitting the input event
-	 */
-	debounce: [Number, String],
+    /**
+     * Milliseconds to wait before emitting the input event
+     */
+    debounce: {
+        type: [Number, String],
+        default: undefined,
+    },
 }
 
 export const IconProps = {
-	/**
-	 * VvIcon name or props
-	 * @see VVIcon
-	 */
-	icon: { type: [String, Object] },
-	/**
-	 * VvIcon position
-	 */
-	iconPosition: {
-		type: String as PropType<`${Position}`>,
-		default: Position.before,
-		validation: (value: Position) =>
-			Object.values(Position).includes(value),
-	},
+    /**
+     * VvIcon name or props
+     * @see VVIcon
+     */
+    icon: {
+        type: [String, Object] as PropType<string | VvIconProps>,
+        default: undefined,
+    },
+    /**
+     * VvIcon position
+     */
+    iconPosition: {
+        type: String as PropType<`${Position}`>,
+        default: Position.before,
+        validation: (value: Position) =>
+            Object.values(Position).includes(value),
+    },
 }
 
 export const TabindexProps = {
-	/**
-	 * Global attribute tabindex
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
-	 */
-	tabindex: { type: [String, Number], default: 0 },
+    /**
+     * Global attribute tabindex
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+     */
+    tabindex: { type: [String, Number], default: 0 },
 }
 
 export const FloatingLabelProps = {
-	/**
-	 * If true the label will be floating
-	 */
-	floating: Boolean,
+    /**
+     * If true the label will be floating
+     */
+    floating: {
+        type: Boolean,
+        default: false,
+    },
 }
 
 export const UnselectableProps = {
-	/**
-	 * If true the input will be unselectable
-	 */
-	unselectable: { type: Boolean, default: true },
+    /**
+     * If true the input will be unselectable
+     */
+    unselectable: { type: Boolean, default: true },
 }
 
 export const IdProps = {
-	/**
-	 * Global attribute id
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
-	 */
-	id: [String, Number],
+    /**
+     * Global attribute id
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+     */
+    id: [String, Number],
 }
 
 export const DropdownProps = {
-	/**
-	 * Dropdown placement
-	 */
-	placement: {
-		type: String as PropType<`${Side}` | `${Placement}`>,
-		default: Side.bottom,
-		validator: (value: Side & Placement) =>
-			Object.values(Side).includes(value) ||
-			Object.values(Placement).includes(value),
-	},
-	/**
-	 * Dropdown strategy
-	 */
-	strategy: {
-		type: String as PropType<`${Strategy}`>,
-		default: undefined,
-		validator: (value: Strategy) => Object.values(Strategy).includes(value),
-	},
-	/**
-	 * Dropdown show / hide transition name
-	 */
-	transitionName: {
-		type: String,
-	},
-	/**
-	 * Offset of the dropdown from the trigger
-	 * @see https://floating-ui.com/docs/offset
-	 */
-	offset: {
-		type: [Number, String, Object] as PropType<
+    /**
+     * Dropdown placement
+     */
+    placement: {
+        type: String as PropType<`${Side}` | `${Placement}`>,
+        default: Side.bottom,
+        validator: (value: Side & Placement) =>
+            Object.values(Side).includes(value)
+            || Object.values(Placement).includes(value),
+    },
+    /**
+     * Dropdown strategy
+     */
+    strategy: {
+        type: String as PropType<`${Strategy}`>,
+        default: undefined,
+        validator: (value: Strategy) => Object.values(Strategy).includes(value),
+    },
+    /**
+     * Dropdown show / hide transition name
+     */
+    transitionName: {
+        type: String,
+        default: undefined,
+    },
+    /**
+     * Offset of the dropdown from the trigger
+     * @see https://floating-ui.com/docs/offset
+     */
+    offset: {
+        type: [Number, String, Object] as PropType<
 			OffsetOptions | number | string
-		>,
-		default: 0,
-	},
-	/**
-	 * Move dropdown to the side if there is no space in the default position
-	 * @see https://floating-ui.com/docs/shift
-	 */
-	shift: {
-		type: [Boolean, Object] as PropType<ShiftOptions | boolean>,
-		default: false,
-	},
-	/**
-	 * Flip dropdown position if there is no space in the default position
-	 * @see https://floating-ui.com/docs/flip
-	 */
-	flip: {
-		type: [Boolean, Object] as PropType<FlipOptions | boolean>,
-		default: true,
-	},
-	/**
-	 * Size of the dropdown
-	 * @see https://floating-ui.com/docs/size
-	 */
-	size: {
-		type: [Boolean, Object] as PropType<SizeOptions | boolean>,
-		default: () => ({ padding: 10 }),
-	},
-	/**
-	 * Automatically change the position of the dropdown
-	 * @see https://floating-ui.com/docs/autoPlacement
-	 */
-	autoPlacement: {
-		type: [Boolean, Object] as PropType<AutoPlacementOptions | boolean>,
-		default: false,
-	},
-	/**
-	 * Add arrow to the dropdown
-	 * @see https://floating-ui.com/docs/arrow
-	 */
-	arrow: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * Keep open dropdown on click outside
-	 */
-	keepOpen: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * Autofocus first item on dropdown open
-	 */
-	autofocusFirst: {
-		type: Boolean,
-		default: true,
-	},
-	/**
-	 * Set dropdown width to the same as the trigger
-	 */
-	triggerWidth: {
-		type: Boolean,
-	},
+        >,
+        default: 0,
+    },
+    /**
+     * Move dropdown to the side if there is no space in the default position
+     * @see https://floating-ui.com/docs/shift
+     */
+    shift: {
+        type: [Boolean, Object] as PropType<ShiftOptions | boolean>,
+        default: false,
+    },
+    /**
+     * Flip dropdown position if there is no space in the default position
+     * @see https://floating-ui.com/docs/flip
+     */
+    flip: {
+        type: [Boolean, Object] as PropType<FlipOptions | boolean>,
+        default: true,
+    },
+    /**
+     * Size of the dropdown
+     * @see https://floating-ui.com/docs/size
+     */
+    size: {
+        type: [Boolean, Object] as PropType<SizeOptions | boolean>,
+        default: () => ({ padding: 10 }),
+    },
+    /**
+     * Automatically change the position of the dropdown
+     * @see https://floating-ui.com/docs/autoPlacement
+     */
+    autoPlacement: {
+        type: [Boolean, Object] as PropType<AutoPlacementOptions | boolean>,
+        default: false,
+    },
+    /**
+     * Add arrow to the dropdown
+     * @see https://floating-ui.com/docs/arrow
+     */
+    arrow: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Keep open dropdown on click outside
+     */
+    keepOpen: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Autofocus first item on dropdown open
+     */
+    autofocusFirst: {
+        type: Boolean,
+        default: true,
+    },
+    /**
+     * Set dropdown width to the same as the trigger
+     */
+    triggerWidth: {
+        type: Boolean,
+        default: false,
+    },
 }
 
 export const IdNameProps = {
-	...IdProps,
-	/**
-	 * Input / Textarea name
-	 * Name of the form control. Submitted with the form as part of a name/value pair
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
-	 */
-	name: { type: String, required: true },
+    ...IdProps,
+    /**
+     * Input / Textarea name
+     * Name of the form control. Submitted with the form as part of a name/value pair
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
+     */
+    name: { type: String, required: true },
 }
 
 export const AutofocusProps = {
-	/**
-	 * Global attribute autofocus
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
-	 */
-	autofocus: Boolean,
+    /**
+     * Global attribute autofocus
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+     */
+    autofocus: {
+        type: Boolean,
+        default: false,
+    },
 }
 
 export const AutocompleteProps = {
-	/**
-	 * Global attribute autocomplete
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
-	 */
-	autocomplete: { type: String, default: 'off' },
+    /**
+     * Global attribute autocomplete
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     */
+    autocomplete: { type: String, default: 'off' },
 }
 
 export const InputTextareaProps = {
-	...IdNameProps,
-	...AutofocusProps,
-	...AutocompleteProps,
-	...TabindexProps,
-	...DisabledProps,
-	...ReadonlyProps,
-	...ValidProps,
-	...InvalidProps,
-	...HintProps,
-	...LoadingProps,
-	...ModifiersProps,
-	...CountProps,
-	...DebounceProps,
-	...IconProps,
-	...FloatingLabelProps,
-	...LabelProps,
-	/**
-	 * Input / Textarea minlength
-	 * Minimum length (number of characters) of value
-	 * Available for input types: text, search, url, tel, email, password
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
-	 */
-	minlength: [String, Number],
-	/**
-	 * Input / Textarea maxlength
-	 * Maximum length (number of characters) of value
-	 * Available for input types: text, search, url, tel, email, password
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
-	 */
-	maxlength: [String, Number],
-	/**
-	 * Input / Textarea placeholder
-	 * Text that appears in the form control when it has no value set
-	 * Available for input types: text, search, url, tel, email, password, number
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
-	 */
-	placeholder: String,
-	/**
-	 * Input / Textarea required
-	 * A value is required or must be check for the form to be submittable
-	 * Available for all input types except color
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
-	 */
-	required: Boolean,
+    ...IdNameProps,
+    ...AutofocusProps,
+    ...AutocompleteProps,
+    ...TabindexProps,
+    ...DisabledProps,
+    ...ReadonlyProps,
+    ...ValidProps,
+    ...InvalidProps,
+    ...HintProps,
+    ...LoadingProps,
+    ...ModifiersProps,
+    ...CountProps,
+    ...DebounceProps,
+    ...IconProps,
+    ...FloatingLabelProps,
+    ...LabelProps,
+    /**
+     * Input / Textarea minlength
+     * Minimum length (number of characters) of value
+     * Available for input types: text, search, url, tel, email, password
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+     */
+    minlength: { type: [String, Number], default: undefined },
+    /**
+     * Input / Textarea maxlength
+     * Maximum length (number of characters) of value
+     * Available for input types: text, search, url, tel, email, password
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
+     */
+    maxlength: { type: [String, Number], default: undefined },
+    /**
+     * Input / Textarea placeholder
+     * Text that appears in the form control when it has no value set
+     * Available for input types: text, search, url, tel, email, password, number
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+     */
+    placeholder: {
+        type: String,
+        default: undefined,
+    },
+    /**
+     * Input / Textarea required
+     * A value is required or must be check for the form to be submittable
+     * Available for all input types except color
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
+     */
+    ...RequiredProps,
 }
 
 export const CheckboxRadioProps = {
-	...IdNameProps,
-	...TabindexProps,
-	...ValidProps,
-	...InvalidProps,
-	...HintProps,
-	...DisabledProps,
-	...ReadonlyProps,
-	...ModifiersProps,
-	...LabelProps,
-	...LoadingProps,
-	/**
-	 * Input value
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
-	 */
-	value: [String, Number, Boolean],
-	/**
-	 * Input value
-	 */
-	modelValue: [Object, Number, Boolean, String],
+    ...IdNameProps,
+    ...TabindexProps,
+    ...ValidProps,
+    ...InvalidProps,
+    ...HintProps,
+    ...DisabledProps,
+    ...ReadonlyProps,
+    ...ModifiersProps,
+    ...LabelProps,
+    ...LoadingProps,
+    /**
+     * Input value
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+     */
+    value: {
+        type: [String, Number, Boolean],
+        default: undefined,
+    },
+    /**
+     * Input value
+     */
+    modelValue: {
+        type: [Object, Number, Boolean, String],
+        default: undefined,
+    },
 }
 
 export const CheckboxRadioGroupProps = {
-	...ValidProps,
-	...InvalidProps,
-	...OptionsProps,
-	...HintProps,
-	...DisabledProps,
-	...ReadonlyProps,
-	...ModifiersProps,
-	...LabelProps,
-	...LoadingProps,
-	/**
-	 * Input value
-	 */
-	modelValue: [String, Array, Boolean, Number, Symbol],
-	/**
-	 * Input name
-	 */
-	name: { type: String, required: true },
-	/**
-	 * If true, the group will be displayed in a vertical column
-	 */
-	vertical: Boolean,
+    ...ValidProps,
+    ...InvalidProps,
+    ...OptionsProps,
+    ...HintProps,
+    ...DisabledProps,
+    ...ReadonlyProps,
+    ...ModifiersProps,
+    ...LabelProps,
+    ...LoadingProps,
+    /**
+     * Input value
+     */
+    modelValue: {
+        type: [String, Array, Boolean, Number, Symbol],
+        default: undefined,
+    },
+    /**
+     * Input name
+     */
+    name: { type: String, required: true },
+    /**
+     * If true, the group will be displayed in a vertical column
+     */
+    vertical: {
+        type: Boolean,
+        default: false,
+    },
 }
 
 export const ActionProps = {
-	...DisabledProps,
-	...LabelProps,
-	...PressedProps,
-	...ActiveProps,
-	...CurrentProps,
-	...LinkProps,
-	/**
-	 * Button type
-	 */
-	type: {
-		type: String as PropType<`${ButtonType}`>,
-		default: ButtonType.button,
-		validator: (value: ButtonType) =>
-			Object.values(ButtonType).includes(value),
-	},
-	/**
-	 * Button aria-label
-	 */
-	ariaLabel: {
-		type: String,
-		default: undefined,
-	},
+    ...DisabledProps,
+    ...LabelProps,
+    ...PressedProps,
+    ...ActiveProps,
+    ...CurrentProps,
+    ...LinkProps,
+    /**
+     * Button type
+     */
+    type: {
+        type: String as PropType<`${ButtonType}`>,
+        default: ButtonType.button,
+        validator: (value: ButtonType) =>
+            Object.values(ButtonType).includes(value),
+    },
+    /**
+     * Button aria-label
+     */
+    ariaLabel: {
+        type: String,
+        default: undefined,
+    },
+    /**
+     * Default tag for the action
+     */
+    defaultTag: {
+        type: String,
+        default: ActionTag.button,
+    },
 }
 
 export const NavProps = {
-	items: {
-		type: Array as PropType<NavItem[]>,
-		default: () => [],
-	},
+    items: {
+        type: Array as PropType<NavItem[]>,
+        default: () => [],
+    },
+}
+
+export const StorageProps = {
+    storageType: {
+        type: String as PropType<`${StorageType}`>,
+        default: StorageType.local,
+        validator: (value: StorageType) =>
+            Object.values(StorageType).includes(value),
+    },
+    storageKey: String,
 }