@volverjs/ui-vue 0.0.4 → 0.0.5-beta.2

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
 		}
 	}
 
@@ -119,8 +147,8 @@
 	// count
 	const { formatted: countFormatted } = useTextCount(localModelValue, {
 		mode: props.count,
-		upperLimit: props.maxlength,
-		lowerLimit: props.minlength,
+		upperLimit: Number(props.maxlength),
+		lowerLimit: Number(props.minlength),
 	})
 
 	// tabindex
@@ -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,

package/src/components/VvRadio/VvRadio.vue

@@ -5,12 +5,8 @@
 </script>
 
 <script setup lang="ts">
-	import {
-		VvRadioProps,
-		VvRadioEvents,
-		useGroupProps,
-	} from '@/components/VvRadio'
-	import { HintSlotFactory } from '@/components/common/HintSlot'
+	import { VvRadioProps, VvRadioEvents, useGroupProps } from '.'
+	import { HintSlotFactory } from '../common/HintSlot'
 
 	// props, emit and slots
 	const props = defineProps(VvRadioProps)
@@ -63,7 +59,7 @@
 
 	// styles
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-radio',
 		modifiers,
 		computed(() => ({

package/src/components/VvRadio/index.ts

@@ -1,7 +1,7 @@
 import type { ExtractPropTypes, Ref } from 'vue'
-import type { InputGroupState } from '@/types/group'
-import { CheckboxRadioProps } from '@/props'
-import { INJECTION_KEY_RADIO_GROUP } from '@/constants'
+import type { InputGroupState } from '../../types/group'
+import { CheckboxRadioProps } from '../../props'
+import { INJECTION_KEY_RADIO_GROUP } from '../../constants'
 
 export const VvRadioProps = CheckboxRadioProps
 
@@ -22,10 +22,14 @@ export function useGroupProps(
 
 	// global props
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const readonly = getGroupOrLocalRef('readonly', props) as Ref<boolean>
-	const disabled = getGroupOrLocalRef('disabled', props) as Ref<boolean>
 	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
 	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
+	const readonly = computed(() =>
+		Boolean(props.readonly || group?.value?.disabled.value),
+	)
+	const disabled = computed(() =>
+		Boolean(props.disabled || group?.value?.disabled.value),
+	)
 
 	return {
 		// local props
@@ -34,9 +38,9 @@ export function useGroupProps(
 		group,
 		isInGroup,
 		modelValue,
-		readonly,
-		disabled,
 		valid,
 		invalid,
+		readonly,
+		disabled,
 	}
 }

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -5,15 +5,12 @@
 </script>
 
 <script setup lang="ts">
-	import type { Option } from '@/types/generic'
-	import type { InputGroupState } from '@/types/group'
-	import { INJECTION_KEY_RADIO_GROUP } from '@/constants'
-	import { HintSlotFactory } from '@/components/common/HintSlot'
-	import VvRadio from '@/components/VvRadio/VvRadio.vue'
-	import {
-		VvRadioGroupProps,
-		VvRadioGroupEvents,
-	} from '@/components/VvRadioGroup'
+	import type { Option } from '../../types/generic'
+	import type { InputGroupState } from '../../types/group'
+	import { INJECTION_KEY_RADIO_GROUP } from '../../constants'
+	import { HintSlotFactory } from '../common/HintSlot'
+	import VvRadio from '../VvRadio/VvRadio.vue'
+	import { VvRadioGroupProps, VvRadioGroupEvents } from '.'
 
 	// props, emit and slots
 	const props = defineProps(VvRadioGroupProps)
@@ -38,7 +35,7 @@
 	const { getOptionLabel, getOptionValue } = useOptions(props)
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-radio-group',
 		modifiers,
 		computed(() => ({

package/src/components/VvRadioGroup/index.ts

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

package/src/components/VvSelect/VvSelect.vue

@@ -6,9 +6,9 @@
 
 <script setup lang="ts">
 	import type { SelectHTMLAttributes } from 'vue'
-	import VvIcon from '@/components/VvIcon/VvIcon.vue'
-	import HintSlotFactory from '@/components/common/HintSlot'
-	import { VvSelectProps, VvSelectEmits } from '@/components/VvSelect'
+	import VvIcon from '../VvIcon/VvIcon.vue'
+	import HintSlotFactory from '../common/HintSlot'
+	import { VvSelectProps, VvSelectEmits } from '.'
 
 	// props, emit and slots
 	const props = defineProps(VvSelectProps)
@@ -78,7 +78,7 @@
 	})
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-select',
 		modifiers,
 		computed(() => ({

package/src/components/VvSelect/index.ts

@@ -15,7 +15,7 @@ import {
 	AutofocusProps,
 	AutocompleteProps,
 	LabelProps,
-} from '@/props'
+} from '../../props'
 
 export const VvSelectProps = {
 	...IdNameProps,

package/src/components/VvTextarea/VvTextarea.vue

@@ -6,9 +6,9 @@
 
 <script setup lang="ts">
 	import type { TextareaHTMLAttributes } from 'vue'
-	import HintSlotFactory from '@/components/common/HintSlot'
-	import VvIcon from '@/components/VvIcon/VvIcon.vue'
-	import { VvTextareaProps, VvTextareaEvents } from '@/components/VvTextarea'
+	import HintSlotFactory from '../common/HintSlot'
+	import VvIcon from '../VvIcon/VvIcon.vue'
+	import { VvTextareaProps, VvTextareaEvents } from '.'
 
 	// props, emit and slots
 	const props = defineProps(VvTextareaProps)
@@ -61,8 +61,8 @@
 	// count
 	const { formatted: countFormatted } = useTextCount(localModelValue, {
 		mode: props.count,
-		upperLimit: props.maxlength,
-		lowerLimit: props.minlength,
+		upperLimit: Number(props.maxlength),
+		lowerLimit: Number(props.minlength),
 	})
 
 	// tabindex
@@ -89,7 +89,7 @@
 	const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots)
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-textarea',
 		modifiers,
 		computed(() => ({

package/src/components/VvTextarea/index.ts

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes } from 'vue'
-import { InputTextareaProps } from '@/props'
+import { InputTextareaProps } from '../../props'
 
 export const WRAP = {
 	hard: 'hard',

package/src/components/VvTooltip/VvTooltip.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-	import { VvTooltipProps } from '@/components/VvTooltip'
+	import { VvTooltipProps } from '.'
 
 	const props = defineProps(VvTooltipProps)
 	const { modifiers } = toRefs(props)
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-tooltip',
 		modifiers,
 		computed(() => ({

package/src/components/VvTooltip/index.ts

@@ -1,6 +1,6 @@
-import { Side } from '@/constants'
-import { ModifiersProps } from '@/props'
 import type { PropType } from 'vue'
+import { Side } from '../../constants'
+import { ModifiersProps } from '../../props'
 
 export const VvTooltipProps = {
 	...ModifiersProps,
@@ -9,7 +9,7 @@ export const VvTooltipProps = {
 	 * @default Side.bottom
 	 */
 	position: {
-		type: String as PropType<Side>,
+		type: String as PropType<`${Side}`>,
 		default: Side.bottom,
 	},
 	value: {

package/src/composables/dropdown/useInjectDropdown.ts

@@ -1,11 +1,11 @@
 import type { Ref } from 'vue'
 import type { Emitter, EventType } from 'mitt'
-import type { DropdownItemRole } from '@/constants'
 import {
+	type DropdownItemRole,
 	INJECTION_KEY_DROPDOWN_TRIGGER,
 	INJECTION_KEY_DROPDOWN_ACTION,
 	INJECTION_KEY_DROPDOWN_ITEM,
-} from '@/constants'
+} from '../../constants'
 
 /**
  * Injects dropdown reference and the event bus

package/src/composables/dropdown/useProvideDropdown.ts

@@ -7,7 +7,7 @@ import {
 	DropdownRole,
 	DropdownItemRole,
 	ActionRoles,
-} from '@/constants'
+} from '../../constants'
 
 /**
  * Share the dropdown reference and the event bus with all its children.
@@ -64,7 +64,7 @@ export function useProvideDropdownItem({
 	role,
 	expanded,
 }: {
-	role: Ref<DropdownRole>
+	role: Ref<`${DropdownRole}`>
 	expanded: Ref<boolean>
 }) {
 	const itemRole = computed(() =>

package/src/composables/group/useInjectedGroupState.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import type GroupState from '@/types/group'
+import type GroupState from '../../types/group'
 
 /**
  * Injects a group state

package/src/composables/group/useProvideGroupState.ts

@@ -1,4 +1,4 @@
-import type GroupState from '@/types/group'
+import type GroupState from '../../types/group'
 
 /**
  * Share part of the state of the component with all its children.

package/src/composables/useComponentIcon.ts

@@ -1,5 +1,5 @@
-import { Position, Side } from '@/constants'
 import type { Ref } from 'vue'
+import { Position, Side } from '../constants'
 
 export function useComponentIcon(
 	icon: Ref<string | object | undefined> | undefined,

package/src/composables/useDebouncedInput.ts

@@ -2,8 +2,15 @@ import type { Ref } from 'vue'
 
 export function useDebouncedInput(
 	modelValue: Ref | undefined,
-	emit: (event: string, value: unknown) => void,
+	emit: (event: string, value: string | number) => void,
 	ms: string | number = 0,
+	{
+		getter = (value) => value,
+		setter = (value) => value,
+	}: {
+		getter?: (value: string | number) => string | number
+		setter?: (value: string | number) => string | number
+	} = {},
 ): Ref {
 	let timeout: NodeJS.Timeout
 
@@ -12,13 +19,13 @@ export function useDebouncedInput(
 	}
 
 	return computed({
-		get: () => modelValue?.value,
+		get: () => getter(modelValue?.value),
 		set: (value) => {
 			if (timeout) {
 				clearTimeout(timeout)
 			}
 			timeout = setTimeout(() => {
-				emit('update:modelValue', value)
+				emit('update:modelValue', setter(value))
 			}, ms as number)
 		},
 	})