@volverjs/ui-vue 0.0.9-beta.2 → 0.0.9-beta.21

package/src/components/VvInputText/VvInputText.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 	import type { InputHTMLAttributes } from 'vue'
-	import { Mask } from 'maska'
+	import { useIMask } from 'vue-imask'
 	import HintSlotFactory from '../common/HintSlot'
 	import VvIcon from '../VvIcon/VvIcon.vue'
 	import VvInputTextActionsFactory from '../VvInputText/VvInputTextActions'
@@ -22,11 +22,12 @@
 	const emit = defineEmits(VvInputTextEvents)
 	const slots = useSlots()
 
-	// template refs
-	const inputEl = ref()
-	const innerEl = ref()
-
-	defineExpose({ $inner: innerEl })
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvInputTextProps>(
+		'VvInputText',
+		VvInputTextProps,
+		props,
+	)
 
 	// data
 	const {
@@ -39,6 +40,12 @@
 		valid,
 		invalid,
 		loading,
+		debounce,
+		maxlength,
+		minlength,
+		type,
+		iMask,
+		step,
 	} = toRefs(props)
 	const hasId = useUniqueId(id)
 	const hasHintId = computed(() => `${hasId.value}-hint`)
@@ -47,35 +54,144 @@
 		props.floating && isEmpty(props.placeholder) ? ' ' : props.placeholder,
 	)
 
-	// debounce
-	const localModelValue = useDebouncedInput(
-		modelValue,
-		emit,
-		props.debounce,
+	// template refs
+	const maskReady = ref(false)
+	const { el, mask, typed, masked, unmasked } = useIMask(
+		computed(
+			() =>
+				iMask?.value ?? {
+					mask: /./,
+				},
+		),
 		{
-			getter: (value) => {
-				if (mask.value) {
-					return mask.value.masked(value ?? '')
+			emit,
+			onAccept: () => {
+				if (!maskReady.value) {
+					return
 				}
-				return value
-			},
-			setter: (value) => {
-				if (mask.value) {
-					value = mask.value.unmasked(value)
+				emit('update:masked', masked.value)
+				if (type.value === INPUT_TYPES.NUMBER) {
+					if (masked.value === '') {
+						if (
+							localModelValue.value === null ||
+							localModelValue.value === undefined
+						) {
+							return
+						}
+						localModelValue.value = undefined
+						return
+					}
+					if (typeof typed.value !== 'number') {
+						localModelValue.value = Number(typed.value)
+						return
+					}
+					localModelValue.value = typed.value
+					return
+				}
+				if (type.value === INPUT_TYPES.DATE) {
+					if (
+						el.value instanceof HTMLInputElement &&
+						el.value.type === 'date'
+					) {
+						localModelValue.value = el.value.value
+						return
+					}
+					let date = typed.value
+					if (date === null || date === '') {
+						if (!localModelValue.value) {
+							return
+						}
+						localModelValue.value = ''
+						return
+					}
+					if (!(date instanceof Date)) {
+						date = new Date(date)
+					}
+					localModelValue.value = `${date.getFullYear()}-${(
+						'0' +
+						(date.getMonth() + 1)
+					).slice(-2)}-${('0' + date.getDate()).slice(-2)}`
+					return
 				}
-				if (props.type === INPUT_TYPES.NUMBER) {
-					return Number(value)
+				if (type.value === INPUT_TYPES.DATETIME_LOCAL) {
+					if (
+						el.value instanceof HTMLInputElement &&
+						el.value.type === 'datetime-local'
+					) {
+						localModelValue.value = el.value.value
+						return
+					}
+					let date = typed.value
+					if (date === null || date === '') {
+						if (!localModelValue.value) {
+							return
+						}
+						localModelValue.value = ''
+						return
+					}
+					if (!(typed.value instanceof Date)) {
+						date = new Date(date)
+					}
+					localModelValue.value = `${date.getFullYear()}-${(
+						'0' +
+						(date.getMonth() + 1)
+					).slice(-2)}-${('0' + date.getDate()).slice(-2)}T${(
+						'0' + date.getHours()
+					).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`
+					return
 				}
-				return value
+				if (!localModelValue.value && !unmasked.value) {
+					return
+				}
+				localModelValue.value = unmasked.value
 			},
 		},
 	)
+	onMounted(() => {
+		if (mask.value) {
+			maskReady.value = true
+			typed.value = localModelValue.value ?? ''
+		}
+	})
+	watch(
+		() => props.modelValue,
+		(newValue) => {
+			if (mask.value) {
+				typed.value =
+					newValue && iMask?.value?.mask === Date
+						? new Date(newValue)
+						: newValue ?? ''
+			}
+		},
+	)
+	watch(
+		() => props.masked,
+		(newValue) => {
+			masked.value = newValue ?? ''
+		},
+	)
+	const inputEl = el as Ref<HTMLInputElement>
+	const innerEl = ref()
+
+	defineExpose({ $inner: innerEl })
+
+	// debounce
+	const localModelValue = useDebouncedInput(
+		modelValue,
+		emit,
+		debounce?.value ?? 0,
+	)
 
 	// focus
 	const { focused } = useComponentFocus(inputEl, emit)
 	const isFocused = computed(
 		() => focused.value && !props.disabled && !props.readonly,
 	)
+	watch(isFocused, (newValue) => {
+		if (newValue && propsDefaults.value.selectOnFocus && inputEl.value) {
+			inputEl.value.select()
+		}
+	})
 
 	// visibility
 	const isVisible = useElementVisibility(inputEl)
@@ -106,12 +222,21 @@
 	const isNumber = computed(() => props.type === INPUT_TYPES.NUMBER)
 	const onStepUp = () => {
 		if (isClickable.value) {
+			if (iMask?.value) {
+				typed.value = typed.value + Number(step?.value ?? 1)
+				return
+			}
 			inputEl.value.stepUp()
 			localModelValue.value = unref(inputEl).value
 		}
 	}
 	const onStepDown = () => {
 		if (isClickable.value) {
+			if (iMask?.value) {
+				typed.value = typed.value - Number(step?.value ?? 1)
+
+				return
+			}
 			inputEl.value.stepDown()
 			localModelValue.value = unref(inputEl).value
 		}
@@ -120,7 +245,7 @@
 	// search
 	const isSearch = computed(() => props.type === INPUT_TYPES.SEARCH)
 	const onClear = () => {
-		localModelValue.value = undefined
+		localModelValue.value = ''
 	}
 
 	// icons
@@ -146,9 +271,9 @@
 
 	// count
 	const { formatted: countFormatted } = useTextCount(localModelValue, {
-		mode: props.count,
-		upperLimit: Number(props.maxlength),
-		lowerLimit: Number(props.minlength),
+		mode: count.value,
+		upperLimit: Number(maxlength?.value),
+		lowerLimit: Number(minlength?.value),
 	})
 
 	// tabindex
@@ -200,6 +325,9 @@
 			if (isDateTime.value && !isDirty.value && !focused.value) {
 				return INPUT_TYPES.TEXT
 			}
+			if (iMask?.value) {
+				return INPUT_TYPES.TEXT
+			}
 			return props.type
 		})()
 		const toReturn: InputHTMLAttributes = {
@@ -278,7 +406,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 	const PasswordInputActions = VvInputTextActionsFactory(
 		INPUT_TYPES.PASSWORD,
 		props,
@@ -292,33 +420,6 @@
 		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) {
@@ -336,6 +437,26 @@
 					: undefined,
 		}
 	})
+
+	// keydown
+	const onKeyDown = (event: KeyboardEvent) => {
+		switch (event.code) {
+			case 'ArrowUp':
+				if (isNumber.value) {
+					onStepUp()
+					event.preventDefault()
+				}
+				break
+
+			case 'ArrowDown':
+				if (isNumber.value) {
+					onStepDown()
+					event.preventDefault()
+				}
+				break
+		}
+		emit('keydown', event)
+	}
 </script>
 
 <template>
@@ -361,10 +482,11 @@
 				<input
 					:id="hasId"
 					ref="inputEl"
-					v-model="localModelValue"
 					v-bind="hasAttrs"
 					:style="hasStyle"
 					@keyup="emit('keyup', $event)"
+					@keydown="onKeyDown"
+					@keypress="emit('keypress', $event)"
 				/>
 				<div
 					v-if="(unit || $slots.unit) && isDirty"

package/src/components/VvInputText/index.ts

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import type { MaskTokens } from 'maska'
+import type { FactoryOpts } from 'imask'
 import { InputTextareaProps } from '../../props'
 
 export const INPUT_TYPES = {
@@ -28,7 +28,23 @@ export const TYPES_ICON = {
 	SEARCH: 'close',
 } as const
 
-export const VvInputTextEvents = ['update:modelValue', 'focus', 'blur', 'keyup']
+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',
+]
 
 export const VvInputTextProps = {
 	...InputTextareaProps,
@@ -137,45 +153,20 @@ export const VvInputTextProps = {
 		default: 'Clear',
 	},
 	/**
-	 * Input mask, only for text type
-	 * @see https://beholdr.github.io/maska/
+	 * iMask options
+	 * @see https://imask.js.org/guide.html
 	 */
-	mask: {
-		type: String,
+	iMask: {
+		type: Object as PropType<FactoryOpts>,
 		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
+	 * Masked value
 	 */
-	maskTokens: {
-		type: Object as PropType<MaskTokens>,
+	masked: {
+		type: String,
 		default: undefined,
 	},
-	/**
-	 * Replace default tokens
-	 * @see https://beholdr.github.io/maska/#/?id=custom-tokens
-	 */
-	maskTokensReplace: {
-		type: Boolean,
-		default: false,
-	},
 	/**
 	 * Adjust input width to content
 	 */
@@ -196,6 +187,13 @@ export const VvInputTextProps = {
 	unit: {
 		type: String,
 	},
+	/**
+	 * Select input text on focus
+	 */
+	selectOnFocus: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export type VvInputTextPropsTypes = ExtractPropTypes<typeof VvInputTextProps>

package/src/components/VvNav/VvNav.vue

@@ -55,7 +55,7 @@
 						disabled: navItem.disabled,
 					}"
 					class="vv-nav__item-label"
-					v-on="navItem.on || {}"
+					v-on="navItem.on"
 					@click="onClick(navItem)"
 				>
 					{{ navItem.title }}

package/src/components/VvNav/index.ts

@@ -6,7 +6,7 @@ export type NavItem = {
 	to?: string | { [key: string]: unknown }
 	href?: string
 	disabled?: boolean
-	on: () => void
+	on?: Record<string, () => void>
 }
 
 export const VvNavProps = {

package/src/components/VvRadio/VvRadio.vue

@@ -13,6 +13,13 @@
 	const emit = defineEmits(VvRadioEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvRadioProps>(
+		'VvRadio',
+		VvRadioProps,
+		props,
+	)
+
 	// data
 	const { id, disabled, readonly, modelValue, valid, invalid } =
 		useGroupProps(props, emit)
@@ -77,7 +84,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 </script>
 
 <template>

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -17,6 +17,13 @@
 	const emit = defineEmits(VvRadioGroupEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvRadioGroupProps>(
+		'VvRadioGroup',
+		VvRadioGroupProps,
+		props,
+	)
+
 	// data
 	const modelValue = useVModel(props, 'modelValue', emit)
 	const { disabled, readonly, vertical, valid, invalid, modifiers } =
@@ -58,7 +65,7 @@
 	}
 
 	// hint
-	const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots)
+	const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots)
 </script>
 
 <template>

package/src/components/VvSelect/VvSelect.vue

@@ -16,6 +16,13 @@
 	const emit = defineEmits(VvSelectEmits)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvSelectProps>(
+		'VvSelect',
+		VvSelectProps,
+		props,
+	)
+
 	// template refs
 	const select = ref()
 
@@ -25,7 +32,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 
 	// data
 	const {

package/src/components/VvTextarea/VvTextarea.vue

@@ -15,6 +15,13 @@
 	const emit = defineEmits(VvTextareaEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvTextareaProps>(
+		'VvTextarea',
+		VvTextareaProps,
+		props,
+	)
+
 	// template refs
 	const textarea = ref()
 
@@ -30,6 +37,9 @@
 		invalid,
 		loading,
 		modifiers,
+		debounce,
+		minlength,
+		maxlength,
 	} = toRefs(props)
 	const hasId = useUniqueId(id)
 	const hasHintId = computed(() => `${hasId.value}-hint`)
@@ -39,7 +49,7 @@
 	)
 
 	// debounce
-	const localModelValue = useDebouncedInput(modelValue, emit, props.debounce)
+	const localModelValue = useDebouncedInput(modelValue, emit, debounce?.value)
 
 	// icons
 	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
@@ -60,9 +70,9 @@
 
 	// count
 	const { formatted: countFormatted } = useTextCount(localModelValue, {
-		mode: props.count,
-		upperLimit: Number(props.maxlength),
-		lowerLimit: Number(props.minlength),
+		mode: count?.value,
+		upperLimit: Number(maxlength?.value),
+		lowerLimit: Number(minlength?.value),
 	})
 
 	// tabindex
@@ -91,7 +101,7 @@
 		hasHintLabelOrSlot,
 		hasInvalidLabelOrSlot,
 		hintSlotScope,
-	} = HintSlotFactory(props, slots)
+	} = HintSlotFactory(propsDefaults, slots)
 
 	// styles
 	const bemCssClasses = useModifiers(
@@ -136,7 +146,7 @@
 				'aria-errormessage': hasInvalidLabelOrSlot.value
 					? hasHintId.value
 					: undefined,
-			} as TextareaHTMLAttributes),
+			}) as TextareaHTMLAttributes,
 	)
 
 	// slots props

package/src/components/common/HintSlot.ts

@@ -1,4 +1,5 @@
 import type { ExtractPropTypes, Slots } from 'vue'
+import type { Ref } from 'vue'
 
 /**
  * Merge array of string
@@ -19,7 +20,7 @@ export type HintSlotProps = Readonly<
 			default: ''
 			required: true
 		}
-		modelValue: null
+		modelValue: unknown
 		valid: BooleanConstructor
 		validLabel: (StringConstructor | ArrayConstructor)[]
 		invalid: BooleanConstructor
@@ -35,27 +36,39 @@ export type HintSlotProps = Readonly<
  * @param {Slots} parentSlots vue slots
  * @returns {Component} vue component
  */
-export function HintSlotFactory(props: HintSlotProps, slots: Slots) {
+export function HintSlotFactory(
+	propsOrRef: HintSlotProps | Ref<HintSlotProps>,
+	slots: Slots,
+) {
+	const props = computed(() => {
+		if (isRef(propsOrRef)) {
+			return propsOrRef.value
+		}
+		return propsOrRef
+	})
+
 	// label
-	const invalidLabel = computed(() => joinLines(props.invalidLabel))
-	const validLabel = computed(() => joinLines(props.validLabel))
-	const loadingLabel = computed(() => props.loadingLabel)
-	const hintLabel = computed(() => props.hintLabel)
+	const invalidLabel = computed(() => joinLines(props.value.invalidLabel))
+	const validLabel = computed(() => joinLines(props.value.validLabel))
+	const loadingLabel = computed(() => props.value.loadingLabel)
+	const hintLabel = computed(() => props.value.hintLabel)
 
 	// type
 	const hasLoadingLabelOrSlot = computed(() =>
-		Boolean(props.loading && (slots.loading || loadingLabel.value)),
+		Boolean(props.value.loading && (slots.loading || loadingLabel.value)),
 	)
 	const hasInvalidLabelOrSlot = computed(
 		() =>
 			!hasLoadingLabelOrSlot.value &&
-			Boolean(props.invalid && (slots.invalid || invalidLabel.value)),
+			Boolean(
+				props.value.invalid && (slots.invalid || invalidLabel.value),
+			),
 	)
 	const hasValidLabelOrSlot = computed(
 		() =>
 			!hasLoadingLabelOrSlot.value &&
 			!hasInvalidLabelOrSlot.value &&
-			Boolean(props.valid && (slots.valid || validLabel.value)),
+			Boolean(props.value.valid && (slots.valid || validLabel.value)),
 	)
 	const hasHintLabelOrSlot = computed(
 		() =>
@@ -72,10 +85,10 @@ export function HintSlotFactory(props: HintSlotProps, slots: Slots) {
 			hasHintLabelOrSlot.value,
 	)
 	const hintSlotScope = computed(() => ({
-		modelValue: props.modelValue,
-		valid: props.valid,
-		invalid: props.invalid,
-		loading: props.loading,
+		modelValue: props.value.modelValue,
+		valid: props.value.valid,
+		invalid: props.value.invalid,
+		loading: props.value.loading,
 	}))
 	// component
 	const HintSlot = defineComponent({

package/src/components/index.ts

@@ -1,5 +1,7 @@
 export { default as VvAccordion } from './VvAccordion/VvAccordion.vue'
 export { default as VvAccordionGroup } from './VvAccordionGroup/VvAccordionGroup.vue'
+export { default as VvAction } from './VvAction/VvAction.vue'
+export { default as VvAlert } from './VvAlert/VvAlert.vue'
 export { default as VvBadge } from './VvBadge/VvBadge.vue'
 export { default as VvBreadcrumb } from './VvBreadcrumb/VvBreadcrumb.vue'
 export { default as VvButton } from './VvButton/VvButton.vue'
@@ -12,8 +14,11 @@ export { default as VvDialog } from './VvDialog/VvDialog.vue'
 export { default as VvDropdown } from './VvDropdown/VvDropdown.vue'
 export { default as VvIcon } from './VvIcon/VvIcon.vue'
 export { default as VvInputText } from './VvInputText/VvInputText.vue'
+export { default as VvNav } from './VvNav/VvNav.vue'
 export { default as VvProgress } from './VvProgress/VvProgress.vue'
 export { default as VvRadio } from './VvRadio/VvRadio.vue'
 export { default as VvRadioGroup } from './VvRadioGroup/VvRadioGroup.vue'
 export { default as VvSelect } from './VvSelect/VvSelect.vue'
+export { default as VvTab } from './VvTab/VvTab.vue'
 export { default as VvTextarea } from './VvTextarea/VvTextarea.vue'
+export { default as VvTooltip } from './VvTooltip/VvTooltip.vue'