@volverjs/ui-vue 0.0.1-beta.5 → 0.0.1-beta.8

package/src/components/VvButton/VvButton.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { useAttrs, useSlots } from 'vue'
+import { useAttrs } from 'vue'
 
 import { computed } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
@@ -64,7 +64,6 @@ import { toButtonRefs } from './useButtonGroupProps'
 //Props, emits, attrs, slots
 const props = defineProps(VvButtonProps)
 const attrs = useAttrs()
-const slots = useSlots()
 
 //Data
 const btnName = attrs?.name || uuidv4()

package/src/components/VvInputText/VvInputText.ts

@@ -1,4 +1,12 @@
-import { ValidProps, ErrorProps, HintProps, LoadingProps } from '../../props'
+import type { ExtractPropTypes } from 'vue'
+import {
+	ValidProps,
+	ErrorProps,
+	HintProps,
+	LoadingProps,
+	ModifiersProps,
+	LimitProps
+} from '../../props'
 import { TYPES, ICON_POSITIONS } from './constants'
 
 export const VvInputTextEvents = ['update:modelValue', 'focus', 'blur']
@@ -8,6 +16,8 @@ export const VvInputTextProps = {
 	...ErrorProps,
 	...HintProps,
 	...LoadingProps,
+	...ModifiersProps,
+	...LimitProps,
 	modelValue: null,
 	type: {
 		type: String,
@@ -45,5 +55,12 @@ export const VvInputTextProps = {
 	 * True = label flottante
 	 */
 	floating: Boolean,
-	debounce: Number
+	debounce: Number,
+	/**
+	 * Se true, attiva la possibilità di cancellare il testo nella textarea
+	 */
+	autoclear: Boolean
 }
+
+type VvInputTextPropsType = typeof VvInputTextProps
+export type VvInputTextPropsTypes = ExtractPropTypes<VvInputTextPropsType>

package/src/components/VvInputText/VvInputText.vue

@@ -1,6 +1,6 @@
 <template>
-	<div v-bind="vvInputTextProps" :class="vvInputInputClass">
-		<label v-if="label" :for="innerInputProps.id">{{ label }}</label>
+	<div v-bind="vvInputTextProps" :class="inputTextClass">
+		<label v-if="label" :for="inputTextId">{{ label }}</label>
 		<div class="vv-input-text__wrapper">
 			<!-- @slot icon-left to replace icon left -->
 			<slot v-if="hasIconLeft" name="icon-left" v-bind="iconSlotProps">
@@ -11,43 +11,34 @@
 				v-bind="innerInputProps"
 				v-model="inputTextData"
 				@input="emit('input', $event)" />
+			<!-- autoclear text button -->
+			<button
+				v-if="autoclear && textLength > 0"
+				class="vv-button vv-button--ghost"
+				@click="clearInputText">
+				<vv-icon name="clear-field" />
+			</button>
 			<!-- @slot icon-right to replace icon right -->
 			<slot name="icon-right" v-bind="iconSlotProps">
-				<!-- default password icon -->
 				<template v-if="isPassword">
-					<div class="vv-input-text__actions-group">
-						<button
-							class="vv-input-text__action"
-							:disabled="isActionsDisabled"
-							@click.prevent="toggleShowHidePassword">
-							<vv-icon :name="inputRightIcon" />
-						</button>
-					</div>
+					<PasswordInputActions
+						@action-password-on="showPassword = true"
+						@action-password-off="showPassword = false" />
 				</template>
-				<!-- default number icon -->
 				<template v-else-if="isNumber">
-					<div class="vv-input-text__actions-group">
-						<button
-							type="button"
-							class="vv-input-text__action-chevron vv-input-text__action-chevron-up"
-							:disabled="isActionsDisabled"
-							@click.prevent="stepUp()"></button>
-						<button
-							type="button"
-							class="vv-input-text__action-chevron"
-							:disabled="isActionsDisabled"
-							@click.prevent="stepDown()"></button>
-					</div>
+					<NumberInputActions
+						@action-step-up="stepUp"
+						@action-step-down="stepDown" />
 				</template>
-				<!-- default icon -->
-				<template v-else>
-					<vv-icon :name="inputRightIcon" />
+				<template v-else-if="hasIconRight || defaultRightIcon">
+					<vv-icon :name="icon || defaultRightIcon" />
 				</template>
 			</slot>
+			<span v-if="limit" class="vv-input-text__limit">
+				<slot name="limit"> {{ formattedTextLimitLength }} </slot>
+			</span>
 		</div>
-		<HintSlot
-			:id="inputAriaAttrs['aria-describedby']"
-			class="vv-input-text__hint" />
+		<HintSlot :id="inputTextDescribedBy" class="vv-input-text__hint" />
 	</div>
 </template>
 
@@ -59,7 +50,7 @@ import {
 	ref,
 	toRefs,
 	onMounted,
-	watch,
+	unref,
 	type HTMLAttributes,
 	type InputHTMLAttributes
 } from 'vue'
@@ -69,17 +60,17 @@ import { VvInputTextEvents, VvInputTextProps } from './VvInputText'
 //Componenti
 import VvIcon from '../../components/VvIcon/VvIcon.vue'
 import HintSlotFactory from '../common/HintSlot'
+import VvInputTextActionsFactory from './VvInputTextActions'
 
 //Constanti
 import INPUT from './constants'
 
 //Composables
-import { refDebounced } from '@vueuse/core'
-import { useInputPassword } from './useInputPassword'
-import { useInputNumber } from './useInputNumber'
-import { useComponentIcons } from '../../composables/icons/useComponentIcons'
+import { useComponentIcon } from '../../composables/icons/useComponentIcons'
 import { useComponentFocus } from '../../composables/focus/useComponentFocus'
-import { useBemModifiers } from '@/composables/useModifiers'
+import { useDebouncedInput } from '../../composables/debouncedInput/useDebouncedInput'
+import { useTextLimit } from '../../composables/textLimit/useTextLimit'
+import { toBem } from '@/composables/useModifiers'
 
 //Props, Emits, Slots e Attrs
 const props = defineProps(VvInputTextProps)
@@ -91,41 +82,51 @@ const attrs = useAttrs()
 const input = ref()
 
 //Data
-const inputTextData = ref(props.modelValue)
-const {
-	disabled,
-	readonly,
-	type,
-	icon,
-	iconPosition,
-	valid,
-	error,
-	loading,
-	floating,
-	label,
-	modelValue
-} = toRefs(props)
+const { icon, iconPosition, label, modelValue, autoclear, limit } =
+	toRefs(props)
+const inputTextId = props.id || props.name
+const inputTextLabeledBy = `${props.name}-label`
+const inputTextDescribedBy = `${props.name}-hint`
+//BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
+const inputTextPlaceholder = computed(() =>
+	props.floating && ObjectUtilities.isEmpty(props.placeholder)
+		? ' '
+		: props.placeholder
+)
 
-//Component computed
-const isActionsDisabled = computed(() => disabled.value || readonly.value)
+//Debounce input
+const inputTextData = useDebouncedInput(modelValue, props.debounce, emit)
 
-//Debounce
-const debouncedInputTextData = refDebounced(inputTextData, props.debounce || 0)
-watch(debouncedInputTextData, (v) => emit('update:modelValue', v))
+//Gestione input tipo password
+const showPassword = ref(false)
+const isPassword = computed(() => props.type === INPUT.TYPES.PASSWORD)
+
+//Gestione input tipo NUMBER
+const isNumber = computed(() => props.type === INPUT.TYPES.NUMBER)
+function stepUp() {
+	const _max = props.max as number
+	if (!isActionsDisabled.value && inputTextData.value + 1 <= _max) {
+		input.value.stepUp()
+		inputTextData.value = unref(input.value).value
+	}
+}
+function stepDown() {
+	const _min = props.min as number
+	if (!isActionsDisabled.value && inputTextData.value - 1 <= _min) {
+		input.value.stepDown()
+		inputTextData.value = unref(input.value).value
+	}
+}
 
 //Gestione ICONE
-const iconProps = { icon, iconPosition }
-const iconSlots = {
+const { hasIconLeft, hasIconRight } = useComponentIcon(icon, iconPosition, {
 	iconLeft: slots['icon-left'],
 	iconRight: slots['icon-right']
-}
-const { hasIconLeft, hasIconRight } = useComponentIcons(iconProps, iconSlots)
-const inputRightIcon = computed(() => {
-	if (hasIconRight.value) return props.icon
-
+})
+const defaultRightIcon = computed(() => {
 	switch (props.type) {
 		case INPUT.TYPES.PASSWORD:
-			return passwordButtonIcon.value
+			return INPUT.TYPES_ICON.PASSWORD_OFF
 		case INPUT.TYPES.COLOR:
 			return INPUT.TYPES_ICON.COLOR
 		case INPUT.TYPES.DATE:
@@ -140,53 +141,40 @@ const inputRightIcon = computed(() => {
 	}
 })
 
-//Gestione input tipo password
-const inputPswProps = {
-	type,
-	disabled,
-	readonly
-}
-const {
-	isPassword,
-	isPasswordVisible,
-	passwordButtonIcon,
-	toggleShowHidePassword
-} = useInputPassword(inputPswProps)
-
-//Gestione input tipo NUMBER
-const inputNumberProps = {
-	disabled,
-	readonly,
-	type,
-	inputTemplateRef: input
-}
-const { isNumber, stepUp, stepDown } = useInputNumber(
-	inputTextData,
-	inputNumberProps
-)
+//Conteggio battute
+const { textLength, formattedTextLimitLength } = useTextLimit(inputTextData, {
+	mode: props.limit,
+	upperLimit: props.maxlength || 0
+})
 
 //Input FOCUS
 const { focused } = useComponentFocus(input, emit)
 
+//Component computed
+const isActionsDisabled = computed(() => props.disabled || props.readonly)
+
 //Styles & Bindings
-const { bemCssClasses: bemInputClass } = useBemModifiers('vv-input-text', {
-	readonly,
-	valid,
-	invalid: error,
-	loading,
-	iconLeft: hasIconLeft,
-	iconRight: computed(() => ObjectUtilities.isNotEmpty(inputRightIcon.value)),
-	floating: computed(
-		() => floating.value && ObjectUtilities.isNotEmpty(label?.value)
-	),
-	dirty: computed(() => ObjectUtilities.isNotEmpty(modelValue))
-})
-const vvInputInputClass = computed(() => {
-	const { class: cssClass } = attrs
-	return {
-		class: cssClass,
-		...bemInputClass.value
-	}
+const inputTextClass = computed(() => {
+	const _hasIconRigth =
+		hasIconRight.value || ObjectUtilities.isNotEmpty(defaultRightIcon.value)
+	const _isFloating =
+		props.floating && ObjectUtilities.isNotEmpty(props.label)
+	const _isDirty = ObjectUtilities.isNotEmpty(modelValue?.value)
+
+	return [
+		toBem('vv-input-text', {
+			modifiers: props.modifiers,
+			readonly: props.readonly,
+			valid: props.valid,
+			invalid: props.error,
+			loading: props.loading,
+			iconLeft: hasIconLeft,
+			iconRight: _hasIconRigth,
+			floating: _isFloating,
+			dirty: _isDirty
+		}),
+		attrs.class
+	]
 })
 const vvInputTextProps = computed(() => {
 	const { style } = attrs
@@ -199,55 +187,31 @@ const vvInputTextProps = computed(() => {
 	} as HTMLAttributes
 })
 const innerInputProps = computed(() => {
-	const {
-		id,
-		name,
-		type,
-		autocomplete,
-		minlength,
-		maxlength,
-		min,
-		max,
-		step,
-		disabled,
-		readonly,
-		floating,
-		placeholder
-	} = props
-
-	const _id = id || name
-	const _type = isPassword.value && isPasswordVisible.value ? 'text' : type
-	//BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
-	const _placeholder =
-		floating && ObjectUtilities.isEmpty(placeholder) ? ' ' : placeholder
-
-	return {
-		id: _id,
-		type: _type,
-		placeholder: _placeholder,
-		name,
-		autocomplete,
-		disabled,
-		readonly,
-		minlength,
-		maxlength,
-		min,
-		max,
-		step,
-		...inputAriaAttrs.value
-	} as InputHTMLAttributes
-})
-const inputAriaAttrs = computed(() => {
-	const { name } = attrs
+	const _type = isPassword.value && showPassword.value ? 'text' : props.type
 	const ariaAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
 		k.startsWith('aria-')
 	)
+
 	return {
-		'aria-label': name,
-		'aria-describedby': `${name}-hint`,
+		id: inputTextId,
+		type: _type,
+		placeholder: inputTextPlaceholder.value,
+		name: props.name,
+		autocomplete: props.autocomplete,
+		disabled: props.disabled,
+		readonly: props.readonly,
+		minlength: props.minlength,
+		maxlength: props.maxlength,
+		min: props.min,
+		max: props.max,
+		step: props.step,
 		'aria-invalid': props.error,
+		'aria-valid': !props.valid,
+		'aria-labeledby': inputTextLabeledBy,
+		'aria-describedby': inputTextDescribedBy,
+		'aria-errormessage': inputTextDescribedBy,
 		...ariaAttrs
-	}
+	} as InputHTMLAttributes
 })
 
 //Slot props
@@ -260,8 +224,18 @@ const iconSlotProps = computed(() => {
 	}
 })
 
-//Hint
+//Other components
 const HintSlot = HintSlotFactory(props, slots)
+const PasswordInputActions = VvInputTextActionsFactory(
+	INPUT.TYPES.PASSWORD,
+	props
+)
+const NumberInputActions = VvInputTextActionsFactory(INPUT.TYPES.NUMBER, props)
+
+//Methods
+function clearInputText() {
+	inputTextData.value = null
+}
 
 onMounted(() => {
 	if (props.autofocus) focused.value = true

package/src/components/VvInputText/VvInputTextActions.ts

@@ -0,0 +1,151 @@
+/* eslint-disable vue/one-component-per-file */
+import type { VvInputTextPropsTypes } from './VvInputText'
+import { computed, type Component } from 'vue'
+
+import { h, ref, defineComponent } from 'vue'
+import VvIcon from '../VvIcon/VvIcon.vue'
+import { TYPES, TYPES_ICON } from './constants'
+
+const VvInputPasswordAction = defineComponent({
+	components: {
+		VvIcon
+	},
+	props: {
+		disabled: Boolean
+	},
+	setup(props, { emit }) {
+		const active = ref(false)
+		const activeIcon = computed(() =>
+			active.value ? TYPES_ICON.PASSWORD_OFF : TYPES_ICON.PASSWORD_ON
+		)
+
+		function onClick() {
+			if (!props.disabled) {
+				active.value = !active.value
+				emit(
+					active.value ? 'action-password-on' : 'action-password-off'
+				)
+			}
+		}
+
+		return {
+			activeIcon,
+			onClick
+		}
+	},
+	render() {
+		const icon = h(VvIcon, { name: this.activeIcon })
+
+		return h(
+			'button',
+			{
+				disabled: this.disabled,
+				class: ['vv-input-text__action'],
+				onClick: this.onClick
+			},
+			icon
+		)
+	}
+})
+const VvInputStepAction = defineComponent({
+	components: {
+		VvIcon
+	},
+	props: {
+		disabled: Boolean,
+		mode: {
+			type: String,
+			validator: (v: string) => ['up', 'down'].includes(v),
+			default: 'up'
+		}
+	},
+	setup(props, { emit }) {
+		function onClick() {
+			if (!props.disabled) {
+				emit(
+					props.mode === 'up' ? 'action-step-up' : 'action-step-down'
+				)
+			}
+		}
+
+		return {
+			onClick
+		}
+	},
+	render() {
+		return h('button', {
+			class: [
+				'vv-input-text__action-chevron',
+				this.mode === 'up' && 'vv-input-text__action-chevron-up'
+			],
+			disabled: this.disabled,
+			onClick: this.onClick
+		})
+	}
+})
+
+export default function VvInputTextActionsFactory(
+	type: string,
+	parentProps: VvInputTextPropsTypes
+): Component {
+	return {
+		name: 'VvInputTextActions',
+		components: {
+			VvIcon,
+			VvInputPasswordAction,
+			VvInputStepAction
+		},
+		setup() {
+			const isDisabled = computed(() => {
+				return parentProps.disabled || parentProps.readonly
+			})
+
+			return {
+				isDisabled
+			}
+		},
+		render() {
+			let _actions = null
+			switch (type) {
+				case TYPES.PASSWORD: {
+					const { onActionPasswordOn, onActionPasswordOff } =
+						this.$attrs
+					_actions = [
+						h(VvInputPasswordAction, {
+							disabled: this.isDisabled,
+							onActionPasswordOn,
+							onActionPasswordOff
+						})
+					]
+					break
+				}
+				case TYPES.NUMBER: {
+					const { onActionStepUp, onActionStepDown } = this.$attrs
+					_actions = [
+						h(VvInputStepAction, {
+							mode: 'up',
+							disabled: this.isDisabled,
+							onActionStepUp,
+							onActionStepDown
+						}),
+						h(VvInputStepAction, {
+							mode: 'down',
+							disabled: this.isDisabled,
+							onActionStepUp,
+							onActionStepDown
+						})
+					]
+					break
+				}
+				default: {
+					_actions = null
+					break
+				}
+			}
+
+			return Array.isArray(_actions)
+				? h('div', { class: 'vv-input-text__actions-group' }, _actions)
+				: _actions
+		}
+	}
+}

package/src/components/VvTextarea/VvTextarea.ts

@@ -1,10 +1,13 @@
+import type { ExtractPropTypes } from 'vue'
 import {
 	ValidProps,
 	ErrorProps,
 	HintProps,
 	LoadingProps,
-	DisabledProps,
-	ReadonlyProps
+	ModifiersProps,
+	LimitProps,
+	InputProps,
+	DebounceProps
 } from '../../props'
 import { ICON_POSITIONS, WRAP } from './constants'
 
@@ -15,17 +18,13 @@ export const VvTextareaProps = {
 	...ErrorProps,
 	...HintProps,
 	...LoadingProps,
-	...DisabledProps,
-	...ReadonlyProps,
+	...ModifiersProps,
+	...LimitProps,
+	...InputProps,
+	...DebounceProps,
 	modelValue: null,
-	id: String,
-	name: { type: String, required: true },
-	autocomplete: { type: String, default: 'off' },
-	autofocus: Boolean,
-	minlength: Number,
-	maxlength: Number,
-	label: String,
-	placeholder: String,
+	cols: { type: Number, default: 50 },
+	rows: { type: Number, default: 5 },
 	/**
 	 * Nome dell'icona
 	 * @see DsIcon
@@ -44,12 +43,22 @@ export const VvTextareaProps = {
 	 * True = label flottante
 	 */
 	floating: Boolean,
-	debounce: Number,
-	cols: { type: Number, default: 50 },
-	rows: { type: Number, default: 5 },
 	/**
 	 * Specifica come il testo sarà wrappato
 	 * @see Documentation https://www.w3schools.com/tags/att_textarea_wrap.asp
 	 */
-	wrap: { type: String, default: WRAP.soft }
+	wrap: { type: String, default: WRAP.soft },
+	/**
+	 * Se true, attiva la possibilità di cancellare il testo nella textarea
+	 */
+	autoclear: Boolean,
+	/**
+	 * Se true, la textbox può essere ridimensionata verticalmente.
+	 * @description
+	 * Il resize è pilotato via css. Al momento è attivo solamente il resize verticale
+	 */
+	resizable: Boolean
 }
+
+type VvTextareaPropsType = typeof VvTextareaProps
+export type VvTextareaPropsTypes = ExtractPropTypes<VvTextareaPropsType>