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

package/src/components/VvTextarea/VvTextarea.vue

@@ -1,6 +1,8 @@
 <template>
-	<div v-bind="vvTextareaProps" :class="vvInputTextareaClass">
-		<label v-if="label" :for="innerTextareaProps.id">{{ label }}</label>
+	<div v-bind="textAreaProps" :class="textAreaClass">
+		<label v-if="label" :id="textAreaLabeledBy" :for="textAreaId">{{
+			label
+		}}</label>
 		<div class="vv-textarea__wrapper">
 			<!-- @slot icon-left to replace icon left -->
 			<slot v-if="hasIconLeft" name="icon-left" v-bind="iconSlotProps">
@@ -8,18 +10,25 @@
 			</slot>
 			<textarea
 				ref="input"
-				v-bind="innerTextareaProps"
 				v-model="inputTextData"
+				v-bind="htmlTextareaProps"
 				@input="emit('input', $event)" />
+			<!-- autoclear text button -->
+			<button
+				v-if="autoclear && textLength > 0"
+				class="vv-button vv-button--ghost"
+				@click="clearTextarea">
+				<vv-icon name="clear-field" />
+			</button>
 			<!-- @slot icon-right to replace icon right -->
 			<slot v-if="hasIconRight" name="icon-right" v-bind="iconSlotProps">
-				<!-- default password icon -->
 				<vv-icon :name="icon" />
 			</slot>
+			<span v-if="limit" class="vv-textarea__limit">
+				<slot name="limit"> {{ formattedTextLimitLength }} </slot>
+			</span>
 		</div>
-		<HintSlot
-			:id="inputAriaAttrs['aria-describedby']"
-			class="vv-textarea__hint" />
+		<HintSlot :id="textAreaDescribedBy" class="vv-textarea__hint" />
 	</div>
 </template>
 
@@ -31,7 +40,6 @@ import {
 	ref,
 	toRefs,
 	onMounted,
-	watch,
 	type HTMLAttributes,
 	type TextareaHTMLAttributes
 } from 'vue'
@@ -43,10 +51,11 @@ import VvIcon from '../../components/VvIcon/VvIcon.vue'
 import HintSlotFactory from '../common/HintSlot'
 
 //Composables
-import { refDebounced } from '@vueuse/core'
-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(VvTextareaProps)
@@ -58,124 +67,111 @@ const attrs = useAttrs()
 const input = ref()
 
 //Data
-const inputTextData = ref(props.modelValue)
-const {
-	readonly,
-	icon,
-	iconPosition,
-	valid,
-	error,
-	loading,
-	floating,
-	label,
-	modelValue
-} = toRefs(props)
-
-//Debounce
-const debouncedInputTextData = refDebounced(inputTextData, props.debounce || 0)
-watch(debouncedInputTextData, (v) => emit('update:modelValue', v))
+const { icon, iconPosition, label, modelValue, autoclear, limit } =
+	toRefs(props)
+const textAreaId = props.id || props.name
+const textAreaLabeledBy = `${props.name}-label`
+const textAreaDescribedBy = `${props.name}-hint`
+//BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
+const textAreaPlaceholder = computed(() =>
+	props.floating && ObjectUtilities.isEmpty(props.placeholder)
+		? ' '
+		: props.placeholder
+)
+
+//Debounce input
+const inputTextData = useDebouncedInput(modelValue, props.debounce, emit)
 
 //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)
+})
 
 //Input FOCUS
 const { focused } = useComponentFocus(input, emit)
 
-//Styles & Bindings
-const { bemCssClasses: bemInputClass } = useBemModifiers('vv-textarea', {
-	readonly,
-	valid,
-	invalid: error,
-	loading,
-	iconLeft: hasIconLeft,
-	iconRight: hasIconRight,
-	floating: computed(
-		() => floating.value && ObjectUtilities.isNotEmpty(label?.value)
-	),
-	dirty: computed(() => ObjectUtilities.isNotEmpty(modelValue))
+//Conteggio battute
+const { textLength, formattedTextLimitLength } = useTextLimit(inputTextData, {
+	mode: props.limit,
+	upperLimit: props.maxlength || 0
 })
-const vvInputTextareaClass = computed(() => {
-	const { class: cssClass } = attrs
-	return {
-		class: cssClass,
-		...bemInputClass.value
-	}
+
+//Styles & Bindings
+const textAreaClass = computed(() => {
+	return [
+		toBem('vv-textarea', {
+			modifiers: props.modifiers,
+			readonly: props.readonly,
+			valid: props.valid,
+			invalid: props.error,
+			loading: props.loading,
+			iconLeft: hasIconLeft,
+			iconRight: hasIconRight,
+			floating: props.floating && ObjectUtilities.isNotEmpty(props.label),
+			dirty: ObjectUtilities.isNotEmpty(modelValue?.value),
+			resizable: props.resizable
+		}),
+		attrs.class
+	]
 })
-const vvTextareaProps = computed(() => {
-	const { style } = attrs
+const textAreaProps = computed(() => {
 	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
 		k.startsWith('data-')
 	)
 	return {
-		style,
+		style: attrs.style,
 		...dataAttrs
 	} as HTMLAttributes
 })
-const innerTextareaProps = computed(() => {
-	const {
-		id,
-		name,
-		autocomplete,
-		minlength,
-		maxlength,
-		disabled,
-		readonly,
-		floating,
-		placeholder,
-		cols,
-		rows
-	} = props
-
-	const _id = id || name
-	//BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
-	const _placeholder =
-		floating && ObjectUtilities.isEmpty(placeholder) ? ' ' : placeholder
-
-	return {
-		id: _id,
-		placeholder: _placeholder,
-		name,
-		autocomplete,
-		disabled,
-		readonly,
-		minlength,
-		maxlength,
-		cols,
-		rows,
-		...inputAriaAttrs.value
-	} as TextareaHTMLAttributes
-})
-const inputAriaAttrs = computed(() => {
-	const { name } = attrs
+const htmlTextareaProps = computed(() => {
 	const ariaAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
 		k.startsWith('aria-')
 	)
+
 	return {
-		'aria-label': name,
-		'aria-describedby': `${name}-hint`,
+		id: textAreaId,
+		placeholder: textAreaPlaceholder.value,
+		name: props.name,
+		autocomplete: props.autocomplete,
+		disabled: props.disabled,
+		readonly: props.readonly,
+		minlength: props.minlength,
+		maxlength: props.maxlength,
+		cols: props.cols,
+		rows: props.rows,
+		required: props.required,
+		tabindex: attrs.tabindex,
 		'aria-invalid': props.error,
+		'aria-valid': !props.valid,
+		'aria-labeledby': textAreaLabeledBy,
+		'aria-describedby': textAreaDescribedBy,
+		'aria-errormessage': textAreaDescribedBy,
 		...ariaAttrs
-	}
+	} as TextareaHTMLAttributes
 })
 
 //Slot props
 const iconSlotProps = computed(() => {
-	const { modelValue, valid, error } = props
+	const { modelValue, valid, error, maxlength, hintLabel } = props
 	return {
 		valid,
 		error,
-		modelValue
+		modelValue,
+		hintLabel,
+		maxlength,
+		textLength
 	}
 })
 
 //Hint
 const HintSlot = HintSlotFactory(props, slots)
 
+//methods
+function clearTextarea() {
+	inputTextData.value = ''
+}
+
 onMounted(() => {
 	if (props.autofocus) focused.value = true
 	console.log('Focused', focused.value)

package/src/components/common/HintSlot.ts

@@ -1,3 +1,4 @@
+import { toReactive } from '@vueuse/core'
 import { h, type Component, type ExtractPropTypes, type Slots } from 'vue'
 import { computed, toRefs } from 'vue'
 import ObjectUtilities from '../../utils/ObjectUtilities'
@@ -7,7 +8,7 @@ import ObjectUtilities from '../../utils/ObjectUtilities'
  * @param {Array<string> | string} errors
  * @returns {string}
  */
-function joinErrors(errors: Array<string> | string) {
+function joinLines(errors: Array<string> | string | unknown[] | undefined) {
 	if (Array.isArray(errors))
 		return errors
 			.filter((e) => ObjectUtilities.isString(e))
@@ -50,7 +51,10 @@ export function HintSlotFactory(
 ): Component {
 	return {
 		name: 'HintSlot',
-		setup() {
+		props: {
+			params: { type: Object, default: () => {} }
+		},
+		setup(hProps) {
 			const props = toRefs(pProps)
 
 			//Slots
@@ -110,19 +114,29 @@ export function HintSlotFactory(
 				)
 			})
 
-			const errorMessage = computed(() => {
-				if (Array.isArray(errorLabel?.value))
-					return joinErrors(errorLabel?.value || '')
-				else return errorLabel?.value
-			})
+			// const errorMessage = computed(() => {
+			// 	if (Array.isArray(errorLabel?.value))
+			// 		return joinLines(errorLabel?.value || '')
+			// 	else return errorLabel?.value
+			// })
 
 			const hintContent = computed(() => {
-				const slotProps = { modelValue, error, valid }
+				const slotProps = toReactive({
+					hintLabel,
+					modelValue,
+					valid,
+					validLabel,
+					error,
+					errorLabel,
+					loading,
+					loadingLabel,
+					...hProps.params
+				})
 
 				if (error?.value) {
 					return (
 						errorSlot?.(slotProps) ||
-						errorMessage?.value ||
+						joinLines(errorLabel?.value) ||
 						hintLabel?.value
 					)
 				}
@@ -130,20 +144,20 @@ export function HintSlotFactory(
 				if (valid?.value)
 					return (
 						validSlot?.(slotProps) ||
-						validLabel?.value ||
+						joinLines(validLabel?.value) ||
 						hintLabel?.value
 					)
 
 				if (loading?.value)
 					return (
 						loadingSlot?.(slotProps) ||
-						loadingLabel?.value ||
+						joinLines(loadingLabel?.value) ||
 						hintLabel?.value
 					)
 
 				return (
 					hintSlot?.(slotProps) ||
-					hintLabel?.value ||
+					joinLines(hintLabel?.value) ||
 					hintLabel?.value
 				)
 			})
@@ -155,7 +169,11 @@ export function HintSlotFactory(
 		},
 		render() {
 			if (this.hasHint) {
-				return h('span', null, this.hintContent)
+				return h(
+					'pre',
+					{ style: { 'white-space': 'pre' } },
+					this.hintContent
+				)
 			}
 		}
 	}

package/src/composables/debouncedInput/useDebouncedInput.ts

@@ -0,0 +1,19 @@
+import type { Ref } from 'vue'
+
+import { refDebounced } from '@vueuse/core'
+
+import { watch, ref } from 'vue'
+
+export function useDebouncedInput(
+	inputText: Ref<any> | undefined,
+	debounced: number | undefined,
+	emit: (event: any, ...args: any[]) => void
+): Ref<any> {
+	const _text = ref(inputText?.value)
+	const debouncedInputTextData = refDebounced(
+		_text as Ref<any>,
+		debounced || 0
+	)
+	watch(debouncedInputTextData, (v) => emit('update:modelValue', v))
+	return _text
+}

package/src/composables/icons/useComponentIcons.ts

@@ -50,3 +50,38 @@ export function useComponentIcons(
 		hasIconBottom
 	}
 }
+
+export function useComponentIcon(
+	icon: Ref<string>,
+	iconPosition: Ref<string>,
+	slots: ComponentIconSlots
+) {
+	const hasIconLeft = computed(
+		() =>
+			!!((icon.value && iconPosition.value === 'left') || slots.iconLeft)
+	)
+	const hasIconRight = computed(
+		() =>
+			!!(
+				(icon.value && iconPosition.value === 'right') ||
+				slots.iconRight
+			)
+	)
+	const hasIconTop = computed(
+		() => !!((icon.value && iconPosition.value === 'top') || slots.iconTop)
+	)
+	const hasIconBottom = computed(
+		() =>
+			!!(
+				(icon.value && iconPosition.value === 'bottom') ||
+				slots.iconBottom
+			)
+	)
+
+	return {
+		hasIconLeft,
+		hasIconRight,
+		hasIconTop,
+		hasIconBottom
+	}
+}

package/src/composables/textLimit/useTextLimit.ts

@@ -0,0 +1,44 @@
+import { isString } from '@vueuse/core'
+import { computed, unref, type Ref } from 'vue'
+
+interface useTextOptions {
+	mode: string | boolean
+	upperLimit: number
+}
+
+/**
+ *
+ */
+export function useTextLimit(inputText: Ref<string>, options: useTextOptions) {
+	const textLength = computed(() => {
+		const _text = unref(inputText)
+		return isString(_text) ? _text.length : 0
+	})
+
+	const textLimitLength = computed(() => {
+		const _text = unref(inputText) || ''
+
+		if (!isString(_text) || options.mode === false) return 0
+
+		if (options.mode === true) return _text.length
+		else return unref(options.upperLimit) - _text.length
+	})
+
+	const formattedTextLimitLength = computed(() => {
+		if (options.mode === false) return ''
+
+		if (
+			options.mode === true &&
+			options.upperLimit &&
+			options.upperLimit > 0
+		)
+			return `${textLimitLength.value}/${unref(options.upperLimit)}`
+		else return textLimitLength.value
+	})
+
+	return {
+		textLength,
+		textLimitLength,
+		formattedTextLimitLength
+	}
+}

package/src/composables/useModifiers.ts

@@ -5,8 +5,17 @@ interface IBemModifiers {
 	[key: string]:
 		| Ref<boolean>
 		| Ref<string | unknown[] | undefined>
+		| boolean
+		| string
+		| string[]
 		| undefined
-	modifiers?: Ref<string | unknown[] | undefined> | undefined
+		| unknown[]
+	modifiers?:
+		| Ref<string | unknown[] | undefined>
+		| undefined
+		| string[]
+		| string
+		| unknown[]
 }
 
 export function useBemModifiers(prefix: string, modifiers: IBemModifiers) {
@@ -52,3 +61,40 @@ export function useBemModifiers(prefix: string, modifiers: IBemModifiers) {
 		bemCssClasses
 	}
 }
+
+export function toBem(prefix: string, modifiers: IBemModifiers) {
+	const baseCssClass: object = { [`${prefix}`]: true }
+
+	return (
+		Object.keys(modifiers).reduce((acc, k) => {
+			const _modifier = unref(modifiers[k] as Ref<any>) || false
+
+			if (!_modifier) return acc
+
+			if (k === 'modifiers') {
+				const _reduceModifiers = Array.isArray(_modifier)
+					? _modifier
+					: [_modifier]
+				return {
+					...acc,
+					..._reduceModifiers.reduce(
+						(accVariant: object, currentVariant: string) => {
+							return {
+								...accVariant,
+								[`${prefix}--${ObjectUtilities.kebabCase(
+									currentVariant
+								)}`]: true
+							}
+						},
+						{}
+					)
+				}
+			} else {
+				return {
+					...acc,
+					[`${prefix}--${ObjectUtilities.kebabCase(k)}`]: _modifier
+				}
+			}
+		}, baseCssClass) || {}
+	)
+}

package/src/props/index.ts

@@ -43,3 +43,42 @@ export const OptionsProps = {
 	 */
 	optionValue: { type: [String, Function], default: () => 'value' }
 }
+
+export const LimitProps = {
+	/**
+	 * Conteggio caratteri
+	 * @description
+	 * Se false, non mostrare il conteggio caratteri
+	 * Se true, mostra quanti caratteri ho digitato sin ora e qualì'è la maxlength.
+	 * Se true e maxlength > 0, mostra quanti caratteri ho digitato sin ora e qualì'è la maxlength.
+	 * Se "countdown", mostra quanti caratteri mancano per raggiungere la maxlength.
+	 */
+	limit: {
+		type: [Boolean, String],
+		default: false,
+		validator: (value: string) => [true, false, 'countdown'].includes(value)
+	}
+}
+
+export const InputProps = {
+	id: String,
+	name: { type: String, required: true },
+	autocomplete: { type: String, default: 'off' },
+	autofocus: Boolean,
+	minlength: Number,
+	maxlength: Number,
+	label: String,
+	placeholder: String,
+	required: Boolean,
+	disabled: Boolean,
+	readonly: Boolean
+}
+
+export const DebounceProps = {
+	/**
+	 * Debounce time (millisecondi)
+	 * @descrition
+	 * Tempo che deve passare dall'ultima battuta prima che modelValue venga aggiornato.
+	 */
+	debounce: Number
+}

package/src/stories/InputText/InputTextMaxLength.stories.mdx

@@ -13,3 +13,24 @@ import { Template } from './InputText.stories.mdx'
 		{Template.bind({})}
 	</Story>
 </Canvas>
+
+<Canvas>
+	<Story
+		name="MaxLength - limit"
+		args={{ name: 'input-text-limit', maxlength: 5, showLimit: true }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="MaxLength - countdown"
+		args={{
+			name: 'input-text-limit-countdown',
+			maxlength: 5,
+			showLimit: true,
+			showLimitMode: 'countdown'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/Textarea.stories.mdx

@@ -1,7 +1,10 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
 
+import { toGroup } from '../utils'
+import ObjectUtilities from '../../utils/ObjectUtilities'
 import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { VvTextareaProps } from '../../components/VvTextarea/VvTextarea'
 
 <Meta title="Components/Textarea" component={VvTextarea} />
 
@@ -20,65 +23,44 @@ export const Template = (args, { argTypes }) => ({
         `
 })
 
+# VvTextarea
+
+`VvTextarea` is a multi-line text input element.
+
 <Canvas>
 	<Story
 		name="vv-textarea"
 		args={{
-			text: 'text',
-			id: 'vv-textarea',
-			name: 'vv-textarea',
-			placeholder: 'Prova input',
-			label: 'Campo di prova',
-			hintLabel: 'Hint label text',
-			autocomplete: 'off',
-			disabled: false,
-			readonly: false,
-			valid: false,
-			error: false,
-			loading: false,
-			loadingLabel: 'Ciao sono il loading',
-			icon: '',
-			iconPosition: null,
-			floating: false,
-			minlength: null,
+			...ObjectUtilities.propsToObject(VvTextareaProps),
 			maxlength: null
 		}}
 		argTypes={{
-			id: {
-				description: 'Id input element.',
-				table: { category: 'Attributes' }
-			},
-			name: {
-				description: 'Nome input element',
-				table: { category: 'Attributes' }
-			},
-			placeholder: {
-				description: 'Placeholder input',
-				table: { category: 'Attributes' }
-			},
-			iconPosition: {
-				control: {
-					type: 'select',
-					options: [null, 'left', 'right']
-				},
-				table: { category: 'Attributes' }
-			},
-			type: {
-				control: {
-					type: 'select',
-					options: ['text', 'password', 'date', 'datetime-local']
-				},
-				table: { category: 'Attributes' }
-			},
-			minlength: {
-				description: 'Lunghezza minima testo',
-				table: { category: 'Attributes' }
-			},
-			maxlength: {
-				description: 'Lunghezza massima testo',
-				table: { category: 'Attributes' }
-			}
+			...toGroup(
+				['required', 'minlength', 'maxlength'],
+				'Data validation'
+			),
+			...toGroup(
+				[
+					'disabled',
+					'readonly',
+					'valid',
+					'validLabel',
+					'error',
+					'errorLabel',
+					'loading',
+					'loadingLabel'
+				],
+				'State'
+			),
+			...toGroup(['floating'], 'Floating'),
+			...toGroup(['modifiers'], 'Modifiers'),
+			...toGroup(['icon', 'iconPosition'], 'Icon'),
+			...toGroup(['hintLabel'], 'Hint text'),
+			...toGroup(['limit'], 'Text limit count'),
+			...toGroup(['autoclear'], 'Experimental feature')
 		}}>
 		{Template.bind({})}
 	</Story>
 </Canvas>
+
+<ArgsTable story="vv-textarea" />