@volverjs/ui-vue 0.0.3 → 0.0.5-beta.1

package/src/components/VvDialog/index.ts

@@ -1,4 +1,4 @@
-import { IdProps } from '@/props'
+import { IdProps } from '../../props'
 
 export const VvDialogEvents = ['open', 'close', 'update:modelValue']
 
@@ -11,7 +11,10 @@ export const VvDialogProps = {
 	/**
 	 * Show / hide dialog programmatically
 	 */
-	modelValue: Boolean,
+	modelValue: {
+		type: Boolean,
+		default: undefined,
+	},
 	/**
 	 * Dialog transition
 	 */

package/src/components/VvDropdown/VvDropdown.vue

@@ -17,14 +17,15 @@
 		arrow,
 		size,
 	} from '@floating-ui/vue'
-	import { VvDropdownProps } from '@/components/VvDropdown'
+	import { VvDropdownProps } from '.'
 	import type {
 		AutoPlacementOptions,
 		FlipOptions,
 		OffsetOptions,
 		ShiftOptions,
 		SizeOptions,
-	} from '@/types/floating-ui'
+	} from '../../types/floating-ui'
+	import type { Placement } from '@/constants'
 
 	// props, emit and attrs
 	const props = defineProps(VvDropdownProps)
@@ -127,7 +128,7 @@
 		floatingEl,
 		{
 			whileElementsMounted: autoUpdate,
-			placement: props.placement,
+			placement: props.placement as Placement,
 			middleware,
 		},
 	)
@@ -219,7 +220,7 @@
 
 	// aria
 	const hasAriaLabelledby = computed(() => {
-		return referenceEl.value?.getAttribute('id') ?? undefined
+		return referenceEl.value?.getAttribute?.('id') ?? undefined
 	})
 	const referenceAria = computed(() => ({
 		'aria-controls': hasId.value,
@@ -242,7 +243,7 @@
 	const { itemRole } = useProvideDropdownItem({ role, expanded })
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-dropdown',
 		modifiers,
 		computed(() => ({

package/src/components/VvDropdown/VvDropdownAction.vue

@@ -0,0 +1,46 @@
+<script lang="ts">
+	export default {
+		name: 'VvDropdownAction',
+	}
+</script>
+
+<script setup lang="ts">
+	import VvAction from '../VvAction/VvAction.vue'
+	import VvDropdownItem from '../VvDropdown/VvDropdownItem.vue'
+	import { ActionProps, ModifiersProps } from '../../props'
+
+	// props
+	const props = defineProps({
+		...ActionProps,
+		...ModifiersProps,
+	})
+
+	/**
+	 * @description Define component classes with BEM style.
+	 * @returns {Array} The component classes.
+	 */
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useModifiers('vv-dropdown-action', modifiers)
+</script>
+
+<template>
+	<VvDropdownItem>
+		<VvAction
+			v-bind="{
+				disabled,
+				pressed,
+				active,
+				type,
+				to,
+				href,
+				target,
+				rel,
+			}"
+			:class="bemCssClasses"
+		>
+			<slot>
+				{{ label }}
+			</slot>
+		</VvAction>
+	</VvDropdownItem>
+</template>

package/src/components/VvDropdown/VvDropdownOption.vue

@@ -0,0 +1,72 @@
+<script lang="ts">
+	export default {
+		name: 'VvDropdownOption',
+	}
+</script>
+
+<script setup lang="ts">
+	import VvDropdownItem from './VvDropdownItem.vue'
+	import {
+		DisabledProps,
+		ModifiersProps,
+		SelectedProps,
+		UnselectableProps,
+	} from '../../props'
+
+	// props
+	const props = defineProps({
+		...DisabledProps,
+		...SelectedProps,
+		...UnselectableProps,
+		...ModifiersProps,
+		deselectHintLabel: {
+			type: String,
+		},
+		selectHintLabel: {
+			type: String,
+		},
+		selectedHintLabel: {
+			type: String,
+		},
+	})
+
+	// style
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useModifiers(
+		'vv-dropdown-option',
+		modifiers,
+		computed(() => ({
+			disabled: props.disabled,
+			selected: props.selected,
+			unselectable: props.unselectable && props.selected,
+		})),
+	)
+
+	// hint
+	const hintLabel = computed(() => {
+		if (props.selected) {
+			return props.unselectable
+				? props.deselectHintLabel
+				: props.selectedHintLabel
+		}
+		if (!props.disabled) {
+			return props.selectHintLabel
+		}
+	})
+</script>
+
+<template>
+	<VvDropdownItem
+		:class="bemCssClasses"
+		:tabindex="disabled ? -1 : 0"
+		:aria-selected="selected"
+		:aria-disabled="disabled"
+	>
+		<slot />
+		<span class="vv-dropdown-option__hint" :title="hintLabel">
+			<slot name="hint" v-bind="{ disabled, selected, unselectable }">
+				{{ hintLabel }}
+			</slot>
+		</span>
+	</VvDropdownItem>
+</template>

package/src/components/VvDropdown/index.ts

@@ -1,11 +1,6 @@
-import { DropdownProps, IdProps, ModifiersProps } from '@/props'
 import type { PropType } from 'vue'
-
-export const DROPDOWN_ROLES = ['listbox', 'menu'] as const
-export const DROPDOWN_ITEM_ROLES = ['option', 'presentation'] as const
-
-export type DropdownRole = (typeof DROPDOWN_ROLES)[number]
-export type DropdownItemRole = (typeof DROPDOWN_ITEM_ROLES)[number]
+import { DropdownProps, IdProps, ModifiersProps } from '../../props'
+import { DropdownRole } from '../../constants'
 
 export const VvDropdownProps = {
 	...IdProps,
@@ -29,9 +24,9 @@ export const VvDropdownProps = {
 	 * Dropdown role
 	 */
 	role: {
-		type: String as PropType<DropdownRole>,
-		default: DROPDOWN_ROLES[1],
-		validator: (value: string) =>
-			(DROPDOWN_ROLES as ReadonlyArray<string>).includes(value),
+		type: String as PropType<`${DropdownRole}`>,
+		default: DropdownRole.menu,
+		validator: (value: DropdownRole) =>
+			Object.values(DropdownRole).includes(value),
 	},
 }

package/src/components/VvIcon/VvIcon.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 	import { Icon, addIcon, iconExists, type IconifyJSON } from '@iconify/vue'
-	import { VvIconProps } from '@/components/VvIcon'
+	import { VvIconProps } from '.'
 
 	// props
 	const props = defineProps(VvIconProps)
@@ -19,13 +19,13 @@
 
 	// classes
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers('vv-icon', modifiers)
+	const bemCssClasses = useModifiers('vv-icon', modifiers)
 
 	/**
 	 * Provider name
 	 */
 	const provider = computed(() => {
-		return props.provider || volver?.provider
+		return props.provider || volver?.iconsProvider
 	})
 
 	/**

package/src/components/VvIcon/index.ts

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue'
 import type { IconifyRenderMode } from '@iconify/vue'
 
-export enum PREFIX {
+export enum IconPrefix {
 	simple = 'simple',
 	normal = 'normal',
 	detailed = 'detailed',
@@ -46,7 +46,7 @@ export const VvIconProps = {
 	 * Icon default options prefix: simple | normal | detailed
 	 */
 	prefix: {
-		type: String as PropType<PREFIX>,
+		type: String as PropType<`${IconPrefix}` | string>,
 		default: 'normal',
 	},
 	/**
@@ -74,7 +74,7 @@ export const VvIconProps = {
 	 * 'svg' = svg
 	 * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
 	 */
-	mode: String as PropType<IconifyRenderMode>,
+	mode: String as PropType<`${IconifyRenderMode}`>,
 	/**
 	 * Toggles inline or block mode
 	 * Example https://docs.iconify.design/icon-components/vue/inline.html

package/src/components/VvInputText/VvInputClearAction.ts

@@ -1,4 +1,4 @@
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import VvIcon from '../VvIcon/VvIcon.vue'
 
 export default defineComponent({
 	components: {
@@ -34,7 +34,7 @@ export default defineComponent({
 	render() {
 		const icon = h(VvIcon, {
 			name: this.icon,
-			class: 'vv-input-text__action-icon',
+			class: 'vv-input-text__icon',
 		})
 
 		return h(

package/src/components/VvInputText/VvInputPasswordAction.ts

@@ -1,5 +1,5 @@
-import { TYPES_ICON } from '@/components/VvInputText'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { TYPES_ICON } from '../VvInputText'
+import VvIcon from '../VvIcon/VvIcon.vue'
 
 export default defineComponent({
 	components: {
@@ -51,9 +51,8 @@ export default defineComponent({
 	render() {
 		const icon = h(VvIcon, {
 			name: this.activeIcon,
-			class: 'vv-input-text__action-icon',
+			class: 'vv-input-text__icon',
 		})
-
 		return h(
 			'button',
 			{

package/src/components/VvInputText/VvInputStepAction.ts

@@ -1,4 +1,4 @@
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import VvIcon from '../VvIcon/VvIcon.vue'
 
 export default defineComponent({
 	components: {
@@ -37,11 +37,12 @@ export default defineComponent({
 	render() {
 		return h('button', {
 			class: [
-				'vv-input-text__action-chevron',
+				'vv-input-text__action vv-input-text__action-chevron',
 				this.isUp && 'vv-input-text__action-chevron-up',
 			],
 			disabled: this.disabled,
 			ariaLabel: this.label,
+			type: 'button',
 			onClick: this.onClick,
 		})
 	},

package/src/components/VvInputText/VvInputText.vue

@@ -6,15 +6,16 @@
 
 <script setup lang="ts">
 	import type { InputHTMLAttributes } from 'vue'
-	import HintSlotFactory from '@/components/common/HintSlot'
-	import VvIcon from '@/components/VvIcon/VvIcon.vue'
-	import VvInputTextActionsFactory from '@/components/VvInputText/VvInputTextActions'
+	import { Mask } from 'maska'
+	import HintSlotFactory from '../common/HintSlot'
+	import VvIcon from '../VvIcon/VvIcon.vue'
+	import VvInputTextActionsFactory from '../VvInputText/VvInputTextActions'
 	import {
 		VvInputTextEvents,
 		VvInputTextProps,
 		INPUT_TYPES,
 		TYPES_ICON,
-	} from '@/components/VvInputText'
+	} from '../VvInputText'
 
 	// props, emit, slots and attrs
 	const props = defineProps(VvInputTextProps)
@@ -22,7 +23,10 @@
 	const slots = useSlots()
 
 	// template refs
-	const input = ref()
+	const inputEl = ref()
+	const innerEl = ref()
+
+	defineExpose({ $inner: innerEl })
 
 	// data
 	const {
@@ -44,15 +48,39 @@
 	)
 
 	// debounce
-	const localModelValue = useDebouncedInput(modelValue, emit, props.debounce)
+	const localModelValue = useDebouncedInput(
+		modelValue,
+		emit,
+		props.debounce,
+		{
+			getter: (value) => {
+				if (mask.value) {
+					return mask.value.masked(value ?? '')
+				}
+				return value
+			},
+			setter: (value) => {
+				if (mask.value) {
+					value = mask.value.unmasked(value)
+				}
+				if (props.type === INPUT_TYPES.NUMBER) {
+					return Number(value)
+				}
+				return value
+			},
+		},
+	)
 
 	// focus
-	const { focused } = useComponentFocus(input, emit)
+	const { focused } = useComponentFocus(inputEl, emit)
+	const isFocused = computed(
+		() => focused.value && !props.disabled && !props.readonly,
+	)
 
 	// visibility
-	const isVisible = useElementVisibility(input)
+	const isVisible = useElementVisibility(inputEl)
 	watch(isVisible, (newValue) => {
-		if (newValue && props.autofocus) {
+		if (newValue && props.autofocus && !props.disabled && !props.readonly) {
 			focused.value = true
 		}
 	})
@@ -78,14 +106,14 @@
 	const isNumber = computed(() => props.type === INPUT_TYPES.NUMBER)
 	const onStepUp = () => {
 		if (isClickable.value) {
-			input.value.stepUp()
-			localModelValue.value = unref(input).value
+			inputEl.value.stepUp()
+			localModelValue.value = unref(inputEl).value
 		}
 	}
 	const onStepDown = () => {
 		if (isClickable.value) {
-			input.value.stepDown()
-			localModelValue.value = unref(input).value
+			inputEl.value.stepDown()
+			localModelValue.value = unref(inputEl).value
 		}
 	}
 
@@ -145,7 +173,7 @@
 
 	// styles
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-input-text',
 		modifiers,
 		computed(() => ({
@@ -158,7 +186,8 @@
 			'icon-after': hasIconAfter.value || !isEmpty(defaultAfterIcon),
 			floating: props.floating && !isEmpty(props.label),
 			dirty: isDirty.value,
-			focus: focused.value,
+			focus: isFocused.value,
+			'auto-width': props.autoWidth,
 		})),
 	)
 
@@ -199,8 +228,10 @@
 			type === INPUT_TYPES.NUMBER
 		) {
 			toReturn.step = props.step
-			toReturn.max = String(props.max)
-			toReturn.min = String(props.min)
+			toReturn.max =
+				props.max !== undefined ? String(props.max) : undefined
+			toReturn.min =
+				props.min !== undefined ? String(props.min) : undefined
 		}
 		if (
 			type === INPUT_TYPES.TEXT ||
@@ -256,6 +287,51 @@
 		INPUT_TYPES.SEARCH,
 		props,
 	)
+
+	// mask
+	const mask = ref()
+	watch(
+		[
+			() => props.mask,
+			() => props.type,
+			() => props.maskEager,
+			() => props.maskReversed,
+			() => props.maskTokens,
+			() => props.maskTokensReplace,
+		],
+		([newMask, newType, eager, reversed, tokens, tokensReplace]) => {
+			if (newMask && newType === INPUT_TYPES.TEXT) {
+				mask.value = new Mask({
+					mask: newMask,
+					eager,
+					reversed,
+					tokens,
+					tokensReplace,
+				})
+				return
+			}
+			mask.value = undefined
+		},
+		{ immediate: true },
+	)
+
+	// auto-width
+	const onClickInner = () => {
+		if (isClickable.value) {
+			focused.value = true
+		}
+	}
+	const hasStyle = computed(() => {
+		if (!props.autoWidth) {
+			return undefined
+		}
+		return {
+			width:
+				localModelValue.value !== undefined
+					? `${String(localModelValue.value).length + 1}ch`
+					: undefined,
+		}
+	})
 </script>
 
 <template>
@@ -268,7 +344,11 @@
 				<!-- @slot Slot before input icon -->
 				<slot name="before" v-bind="slotProps" />
 			</div>
-			<div class="vv-input-text__inner">
+			<div
+				ref="innerEl"
+				class="vv-input-text__inner"
+				@click.stop="onClickInner"
+			>
 				<VvIcon
 					v-if="hasIconBefore"
 					class="vv-input-text__icon"
@@ -276,28 +356,41 @@
 				/>
 				<input
 					:id="hasId"
-					ref="input"
+					ref="inputEl"
 					v-model="localModelValue"
 					v-bind="hasAttrs"
+					:style="hasStyle"
 					@keyup="emit('keyup', $event)"
 				/>
-				<!-- @slot Slot to replace right icon -->
-				<VvIcon
-					v-if="hasIconAfter || defaultAfterIcon"
-					class="vv-input-text__icon vv-input-text__icon-after"
-					v-bind="hasIconAfter ? hasIcon : defaultAfterIcon"
-				/>
-				<PasswordInputActions
-					v-else-if="isPassword"
-					@toggle-password="onTogglePassword"
-				/>
-				<NumberInputActions
-					v-else-if="isNumber"
-					@step-up="onStepUp"
-					@step-down="onStepDown"
-				/>
-				<SearchInputActions v-else-if="isSearch" @clear="onClear" />
+				<div
+					v-if="(unit || $slots.unit) && isDirty"
+					class="vv-input-text__unit"
+				>
+					<!-- @slot Slot to replace unit-->
+					<slot name v-bind="slotProps">
+						{{ unit }}
+					</slot>
+				</div>
 			</div>
+			<!-- @slot Slot to replace right icon -->
+			<VvIcon
+				v-if="hasIconAfter || defaultAfterIcon"
+				class="vv-input-text__icon vv-input-text__icon-after"
+				v-bind="hasIconAfter ? hasIcon : defaultAfterIcon"
+			/>
+			<PasswordInputActions
+				v-else-if="isPassword && !hideActions && isClickable"
+				@toggle-password="onTogglePassword"
+			/>
+			<NumberInputActions
+				v-else-if="isNumber && !hideActions && isClickable"
+				@step-up="onStepUp"
+				@step-down="onStepDown"
+			/>
+			<SearchInputActions
+				v-else-if="isSearch && !hideActions && isClickable"
+				@clear="onClear"
+			/>
 			<!-- @slot Slot after input -->
 			<div v-if="$slots.after" class="vv-input-text__input-after">
 				<!-- @slot Slot before input icon -->

package/src/components/VvInputText/VvInputTextActions.ts

@@ -1,12 +1,9 @@
 import type { Component } from 'vue'
-import {
-	type VvInputTextPropsTypes,
-	INPUT_TYPES,
-} from '@/components/VvInputText'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-import VvInputPasswordAction from '@/components/VvInputText/VvInputPasswordAction'
-import VvInputStepAction from '@/components/VvInputText/VvInputStepAction'
-import VvInputClearAction from '@/components/VvInputText/VvInputClearAction'
+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'
 
 export default function VvInputTextActionsFactory(
 	type: string,

package/src/components/VvInputText/index.ts

@@ -1,5 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import { InputTextareaProps } from '@/props'
+import type { MaskTokens } from 'maska'
+import { InputTextareaProps } from '../../props'
 
 export const INPUT_TYPES = {
 	TEXT: 'text',
@@ -135,6 +136,66 @@ export const VvInputTextProps = {
 		type: String,
 		default: 'Clear',
 	},
+	/**
+	 * Input mask, only for text type
+	 * @see https://beholdr.github.io/maska/
+	 */
+	mask: {
+		type: String,
+		default: undefined,
+	},
+	/**
+	 * Show mask before typing
+	 * @see https://beholdr.github.io/maska/#/?id=maskinput-options
+	 */
+	maskEager: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	 * Write values reverse (ex. for numbers)
+	 * @see https://beholdr.github.io/maska/#/?id=maskinput-options
+	 */
+	maskReversed: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	 * Add mask custom tokens
+	 * @see https://beholdr.github.io/maska/#/?id=custom-tokens
+	 */
+	maskTokens: {
+		type: Object as PropType<MaskTokens>,
+		default: undefined,
+	},
+	/**
+	 * Replace default tokens
+	 * @see https://beholdr.github.io/maska/#/?id=custom-tokens
+	 */
+	maskTokensReplace: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	 * 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,
+	},
 }
 
 export type VvInputTextPropsTypes = ExtractPropTypes<typeof VvInputTextProps>

package/src/components/VvProgress/VvProgress.vue

@@ -5,7 +5,7 @@
 </script>
 
 <script setup lang="ts">
-	import { VvProgressProps } from '@/components/VvProgress'
+	import { VvProgressProps } from '.'
 
 	// props
 	const props = defineProps(VvProgressProps)
@@ -14,7 +14,7 @@
 
 	// styles
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-progress',
 		modifiers,
 		computed(() => ({ indeterminate: indeterminate.value })),

package/src/components/VvProgress/index.ts

@@ -1,4 +1,4 @@
-import { ModifiersProps } from '@/props'
+import { ModifiersProps } from '../../props'
 
 export const VvProgressProps = {
 	...ModifiersProps,