@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.41

package/src/components/VvInputText/VvInputTextActions.ts

@@ -1,97 +1,97 @@
 import type { Component } from 'vue'
-import { type VvInputTextPropsTypes, INPUT_TYPES } from '.'
 import VvIcon from '../VvIcon/VvIcon.vue'
 import VvInputPasswordAction from '../VvInputText/VvInputPasswordAction'
 import VvInputStepAction from '../VvInputText/VvInputStepAction'
 import VvInputClearAction from '../VvInputText/VvInputClearAction'
+import { type VvInputTextPropsTypes, INPUT_TYPES } from '.'
 
 export default function VvInputTextActionsFactory(
-	type: string,
-	parentProps: VvInputTextPropsTypes,
+    type: string,
+    parentProps: VvInputTextPropsTypes,
 ): Component {
-	return {
-		name: 'VvInputTextActions',
-		components: {
-			VvIcon,
-			VvInputPasswordAction,
-			VvInputStepAction,
-			VvInputClearAction,
-		},
-		setup() {
-			const isDisabled = computed(() => {
-				return parentProps.disabled || parentProps.readonly
-			})
+    return {
+        name: 'VvInputTextActions',
+        components: {
+            VvIcon,
+            VvInputPasswordAction,
+            VvInputStepAction,
+            VvInputClearAction,
+        },
+        setup() {
+            const isDisabled = computed(() => {
+                return parentProps.disabled || parentProps.readonly
+            })
 
-			return {
-				isDisabled,
-				labelStepUp: parentProps.labelStepUp,
-				labelStepDown: parentProps.labelStepDown,
-				labelShowPassword: parentProps.labelShowPassword,
-				labelHidePassword: parentProps.labelHidePassword,
-				labelClear: parentProps.labelClear,
-				iconShowPassword: parentProps.iconShowPassword,
-				iconHidePassword: parentProps.iconHidePassword,
-			}
-		},
-		render() {
-			let actions = null
-			switch (type) {
-				case INPUT_TYPES.SEARCH: {
-					const { onClear } = this.$attrs
-					actions = [
-						h(VvInputClearAction, {
-							disabled: this.isDisabled,
-							label: this.labelShowPassword,
-							onClear,
-						}),
-					]
-					break
-				}
-				case INPUT_TYPES.PASSWORD: {
-					const { onTogglePassword } = this.$attrs
-					actions = [
-						h(VvInputPasswordAction, {
-							disabled: this.isDisabled,
-							onTogglePassword,
-							labelShow: this.labelShowPassword,
-							labelHide: this.labelHidePassword,
-							iconShow: this.iconShowPassword,
-							iconHide: this.iconHidePassword,
-						}),
-					]
-					break
-				}
-				case INPUT_TYPES.NUMBER: {
-					const { onStepUp, onStepDown } = this.$attrs
-					actions = [
-						h(VvInputStepAction, {
-							mode: 'up',
-							disabled:
-								this.isDisabled ||
-								(parentProps.max !== undefined &&
-									parentProps.modelValue === parentProps.max),
-							label: this.labelStepUp,
-							onStepUp,
-							onStepDown,
-						}),
-						h(VvInputStepAction, {
-							mode: 'down',
-							disabled:
-								this.isDisabled ||
-								(parentProps.min !== undefined &&
-									parentProps.modelValue === parentProps.min),
-							label: this.labelStepDown,
-							onStepUp,
-							onStepDown,
-						}),
-					]
-					break
-				}
-			}
+            return {
+                isDisabled,
+                labelStepUp: parentProps.labelStepUp,
+                labelStepDown: parentProps.labelStepDown,
+                labelShowPassword: parentProps.labelShowPassword,
+                labelHidePassword: parentProps.labelHidePassword,
+                labelClear: parentProps.labelClear,
+                iconShowPassword: parentProps.iconShowPassword,
+                iconHidePassword: parentProps.iconHidePassword,
+            }
+        },
+        render() {
+            let actions = null
+            switch (type) {
+                case INPUT_TYPES.SEARCH: {
+                    const { onClear } = this.$attrs
+                    actions = [
+                        h(VvInputClearAction, {
+                            disabled: this.isDisabled,
+                            label: this.labelShowPassword,
+                            onClear,
+                        }),
+                    ]
+                    break
+                }
+                case INPUT_TYPES.PASSWORD: {
+                    const { onTogglePassword } = this.$attrs
+                    actions = [
+                        h(VvInputPasswordAction, {
+                            disabled: this.isDisabled,
+                            onTogglePassword,
+                            labelShow: this.labelShowPassword,
+                            labelHide: this.labelHidePassword,
+                            iconShow: this.iconShowPassword,
+                            iconHide: this.iconHidePassword,
+                        }),
+                    ]
+                    break
+                }
+                case INPUT_TYPES.NUMBER: {
+                    const { onStepUp, onStepDown } = this.$attrs
+                    actions = [
+                        h(VvInputStepAction, {
+                            mode: 'up',
+                            disabled:
+								this.isDisabled
+								|| (parentProps.max !== undefined
+								&& parentProps.modelValue === parentProps.max),
+                            label: this.labelStepUp,
+                            onStepUp,
+                            onStepDown,
+                        }),
+                        h(VvInputStepAction, {
+                            mode: 'down',
+                            disabled:
+								this.isDisabled
+								|| (parentProps.min !== undefined
+								&& parentProps.modelValue === parentProps.min),
+                            label: this.labelStepDown,
+                            onStepUp,
+                            onStepDown,
+                        }),
+                    ]
+                    break
+                }
+            }
 
-			return Array.isArray(actions)
-				? h('div', { class: 'vv-input-text__actions-group' }, actions)
-				: actions
-		},
-	}
+            return Array.isArray(actions)
+                ? h('div', { class: 'vv-input-text__actions-group' }, actions)
+                : actions
+        },
+    }
 }

package/src/components/VvInputText/index.ts

@@ -1,199 +1,214 @@
 import type { ExtractPropTypes, PropType } from 'vue'
 import type { FactoryOpts } from 'imask'
-import { InputTextareaProps } from '../../props'
+import { InputTextareaProps, StorageProps } from '../../props'
+import { type VvIconProps, ACTION_ICONS } from '../VvIcon'
 
 export const INPUT_TYPES = {
-	TEXT: 'text',
-	PASSWORD: 'password',
-	NUMBER: 'number',
-	EMAIL: 'email',
-	TEL: 'tel',
-	URL: 'url',
-	COLOR: 'color',
-	SEARCH: 'search',
-	DATE: 'date',
-	TIME: 'time',
-	DATETIME_LOCAL: 'datetime-local',
-	MONTH: 'month',
-	WEEK: 'week',
+    TEXT: 'text',
+    PASSWORD: 'password',
+    NUMBER: 'number',
+    EMAIL: 'email',
+    TEL: 'tel',
+    URL: 'url',
+    COLOR: 'color',
+    SEARCH: 'search',
+    DATE: 'date',
+    TIME: 'time',
+    DATETIME_LOCAL: 'datetime-local',
+    MONTH: 'month',
+    WEEK: 'week',
 } as const
 export type InputType = ValueOf<typeof INPUT_TYPES>
 
-export const TYPES_ICON = {
-	PASSWORD_SHOW: 'eye-on',
-	PASSWORD_HIDE: 'eye-off',
-	DATE: 'calendar',
-	TIME: 'time',
-	COLOR: 'color',
-	SEARCH: 'close',
-} as const
-
 export const VvInputTextEvents = [
-	'update:modelValue',
-	'update:masked',
-	'accept',
-	'accept:typed',
-	'accept:masked',
-	'accept:unmasked',
-	'complete',
-	'complete:typed',
-	'complete:masked',
-	'complete:unmasked',
-	'focus',
-	'blur',
-	'keyup',
-	'keydown',
-	'keypress',
+    'update:modelValue',
+    'update:masked',
+    'accept',
+    'accept:typed',
+    'accept:masked',
+    'accept:unmasked',
+    'complete',
+    'complete:typed',
+    'complete:masked',
+    'complete:unmasked',
+    'focus',
+    'blur',
+    'keyup',
+    'keydown',
+    'keypress',
 ]
 
 export const VvInputTextProps = {
-	...InputTextareaProps,
-	/**
-	 * Input value
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
-	 */
-	modelValue: [String, Number],
-	/**
-	 * Type of form control
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type
-	 */
-	type: {
-		type: String as PropType<InputType>,
-		default: INPUT_TYPES.TEXT,
-		validator: (value: InputType) =>
-			Object.values(INPUT_TYPES).includes(value),
-	},
-	/**
-	 * Minimum value
-	 * Available for input types: date, month, week, time, datetime-local, number, range.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
-	 */
-	min: [Number, Date, String],
-	/**
-	 * Maximum value
-	 * Available for input types: date, month, week, time, datetime-local, number, range.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
-	 */
-	max: [Number, Date, String],
-	/**
-	 * Incremental values that are valid
-	 * Available for input types: date, month, week, time, datetime-local and number
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
-	 */
-	step: { type: [String, Number], default: 1 },
-	/**
-	 * Pattern the value must match to be valid
-	 * Available for input types: text, search, url, tel, email and password
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
-	 */
-	pattern: String,
-	/**
-	 * Whether to allow multiple values
-	 * Available for input type email
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple
-	 */
-	multiple: Boolean,
-	/**
-	 * VvIcon name for show password button
-	 * @see VVIcon
-	 */
-	iconShowPassword: {
-		type: String,
-		default: TYPES_ICON.PASSWORD_SHOW,
-	},
-	/**
-	 * VvIcon name for hide password button
-	 * @see VVIcon
-	 */
-	iconHidePassword: {
-		type: String,
-		default: TYPES_ICON.PASSWORD_HIDE,
-	},
-	/**
-	 * VvIcon name for clear button
-	 * @see VVIcon
-	 */
-	iconClear: {
-		type: String,
-		default: TYPES_ICON.SEARCH,
-	},
-	/**
-	 * Label for step up button
-	 */
-	labelStepUp: {
-		type: String,
-		default: 'Increase value',
-	},
-	/**
-	 * Label for step down button
-	 */
-	labelStepDown: {
-		type: String,
-		default: 'Decrease value',
-	},
-	/**
-	 * Label for show password button
-	 */
-	labelShowPassword: {
-		type: String,
-		default: 'Show password',
-	},
-	/**
-	 * Label for hide password button
-	 */
-	labelHidePassword: {
-		type: String,
-		default: 'Hide password',
-	},
-	/**
-	 * Label for clear button
-	 */
-	labelClear: {
-		type: String,
-		default: 'Clear',
-	},
-	/**
-	 * iMask options
-	 * @see https://imask.js.org/guide.html
-	 */
-	iMask: {
-		type: Object as PropType<FactoryOpts>,
-		default: undefined,
-	},
-	/**
-	 * Masked value
-	 */
-	masked: {
-		type: String,
-		default: undefined,
-	},
-	/**
-	 * Adjust input width to content
-	 */
-	autoWidth: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * Hide type number, password and search actions
-	 */
-	hideActions: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * Add unit label to input
-	 */
-	unit: {
-		type: String,
-	},
-	/**
-	 * Select input text on focus
-	 */
-	selectOnFocus: {
-		type: Boolean,
-		default: false,
-	},
+    ...InputTextareaProps,
+    ...StorageProps,
+    /**
+     * Input value
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+     */
+    modelValue: [String, Number],
+    /**
+     * Type of form control
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type
+     */
+    type: {
+        type: String as PropType<InputType>,
+        default: INPUT_TYPES.TEXT,
+        validator: (value: InputType) =>
+            Object.values(INPUT_TYPES).includes(value),
+    },
+    /**
+     * Minimum value
+     * Available for input types: date, month, week, time, datetime-local, number, range.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
+     */
+    min: [Number, Date, String],
+    /**
+     * Maximum value
+     * Available for input types: date, month, week, time, datetime-local, number, range.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
+     */
+    max: [Number, Date, String],
+    /**
+     * Incremental values that are valid
+     * Available for input types: date, month, week, time, datetime-local and number
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
+     */
+    step: { type: [String, Number], default: 1 },
+    /**
+     * Pattern the value must match to be valid
+     * Available for input types: text, search, url, tel, email and password
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
+     */
+    pattern: String,
+    /**
+     * Whether to allow multiple values
+     * Available for input type email
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple
+     */
+    multiple: Boolean,
+    /**
+     * VvIcon name for show password button
+     * @see VVIcon
+     */
+    iconShowPassword: {
+        type: [String, Object] as PropType<string | VvIconProps>,
+        default: ACTION_ICONS.showPassword,
+    },
+    /**
+     * VvIcon name for hide password button
+     * @see VVIcon
+     */
+    iconHidePassword: {
+        type: [String, Object] as PropType<string | VvIconProps>,
+        default: ACTION_ICONS.hidePassword,
+    },
+    /**
+     * VvIcon name for clear button
+     * @see VVIcon
+     */
+    iconClear: {
+        type: [String, Object] as PropType<string | VvIconProps>,
+        default: ACTION_ICONS.clear,
+    },
+    /**
+     * VvIcon name for remove suggestion button
+     * @see VVIcon
+     */
+    iconRemoveSuggestion: {
+        type: [String, Object] as PropType<string | VvIconProps>,
+        default: ACTION_ICONS.remove,
+    },
+    /**
+     * Label for step up button
+     */
+    labelStepUp: {
+        type: String,
+        default: 'Increase value',
+    },
+    /**
+     * Label for step down button
+     */
+    labelStepDown: {
+        type: String,
+        default: 'Decrease value',
+    },
+    /**
+     * Label for show password button
+     */
+    labelShowPassword: {
+        type: String,
+        default: 'Show password',
+    },
+    /**
+     * Label for hide password button
+     */
+    labelHidePassword: {
+        type: String,
+        default: 'Hide password',
+    },
+    /**
+     * Label for clear button
+     */
+    labelClear: {
+        type: String,
+        default: 'Clear',
+    },
+    /**
+     * Label for remove suggestion button
+     */
+    labelRemoveSuggestion: {
+        type: String,
+        default: 'Remove suggestion',
+    },
+    /**
+     * iMask options
+     * @see https://imask.js.org/guide.html
+     */
+    iMask: {
+        type: Object as PropType<FactoryOpts>,
+        default: undefined,
+    },
+    /**
+     * Masked value
+     */
+    masked: {
+        type: String,
+        default: undefined,
+    },
+    /**
+     * Adjust input width to content
+     */
+    autoWidth: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Hide type number, password and search actions
+     */
+    hideActions: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Add unit label to input
+     */
+    unit: {
+        type: String,
+    },
+    /**
+     * Select input text on focus
+     */
+    selectOnFocus: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Maximum number of suggestions
+     */
+    maxSuggestions: {
+        type: Number,
+        default: 5,
+    },
 }
 
 export type VvInputTextPropsTypes = ExtractPropTypes<typeof VvInputTextProps>

package/src/components/VvNav/VvNav.vue

@@ -1,44 +1,48 @@
 <script setup lang="ts">
-	import { VvNavProps, VvNavEvents } from '@/components/VvNav'
-	import VvNavItem from './VvNavItem.vue'
+import VvNavItem from './VvNavItem.vue'
+import { VvNavProps, VvNavEvents } from '@/components/VvNav'
 
-	const props = defineProps(VvNavProps)
-	const { modifiers } = toRefs(props)
+const props = defineProps(VvNavProps)
+const emit = defineEmits(VvNavEvents)
 
-	const emit = defineEmits(VvNavEvents)
-	const onClick = (event: Event) => {
-		const target = event.target as HTMLElement
-		if (target?.dataset.index) {
-			const index = parseInt(target.dataset.index)
-			const item = props.items?.[index]
-			if (!item || item?.disabled) {
-				return
-			}
-			emit('click', item)
-		}
-	}
+const { modifiers } = toRefs(props)
 
-	// bem css classes
-	const bemCssClasses = useModifiers('vv-nav', modifiers)
+function onClick(event: Event) {
+    const target = event.target as HTMLElement
+    if (target?.dataset.index) {
+        const index = Number.parseInt(target.dataset.index)
+        const item = props.items?.[index]
+        if (!item || item?.disabled) {
+            return
+        }
+        emit('click', item)
+    }
+}
+
+// bem css classes
+const bemCssClasses = useModifiers('vv-nav', modifiers)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvNav',
+}
 </script>
 
 <template>
-	<nav :class="bemCssClasses">
-		<ul
-			class="vv-nav__menu"
-			role="menu"
-			aria-busy="true"
-			@click.stop="onClick"
-		>
-			<slot>
-				<VvNavItem
-					v-for="({ on = {}, ...item }, index) in items"
-					:key="index"
-					:data-index="index"
-					v-bind="item"
-					v-on="on"
-				/>
-			</slot>
-		</ul>
-	</nav>
+    <nav :class="bemCssClasses">
+        <ul class="vv-nav__menu" role="menu" @click.stop="onClick">
+            <slot>
+                <VvNavItem
+                    v-for="({ on = {}, data, ...item }, index) in items"
+                    :key="index"
+                    :data-index="index"
+                    v-bind="item"
+                    v-on="on"
+                >
+                    <slot name="item" v-bind="{ item, data, index }" />
+                </VvNavItem>
+            </slot>
+        </ul>
+    </nav>
 </template>