@volverjs/ui-vue 0.0.1-beta.11 → 0.0.1-beta.16

package/src/components/VvTextarea/VvTextarea.vue

@@ -1,157 +1,119 @@
-<template>
-	<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">
-				<vv-icon class="vv-textarea__icon-left" :name="icon" />
-			</slot>
-			<textarea
-				ref="input"
-				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">
-				<vv-icon :name="icon" />
-			</slot>
-			<span v-if="limit" class="vv-textarea__limit">
-				<slot name="limit"> {{ formattedTextLimitLength }} </slot>
-			</span>
-		</div>
-		<HintSlot :id="textAreaDescribedBy" class="vv-textarea__hint" />
-	</div>
-</template>
+<script lang="ts">
+export default {
+	name: 'VvInputText'
+}
+</script>
 
 <script setup lang="ts">
 import {
 	computed,
-	useAttrs,
 	useSlots,
 	ref,
 	toRefs,
 	onMounted,
-	type HTMLAttributes,
 	type TextareaHTMLAttributes
 } from 'vue'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import { VvTextareaProps, VvTextareaEvents } from './VvTextarea'
-
-//Componenti
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
-import HintSlotFactory from '../common/HintSlot'
-
-//Composables
-import { useComponentIcon } from '../../composables/icons/useComponentIcons'
-import { useComponentFocus } from '../../composables/focus/useComponentFocus'
-import { useDebouncedInput } from '../../composables/debouncedInput/useDebouncedInput'
-import { useTextLimit } from '../../composables/textLimit/useTextLimit'
-import { toBem } from '@/composables/useModifiers'
-
-//Props, Emits, Slots e Attrs
+import { nanoid } from 'nanoid'
+import { isEmpty } from '@/utils/ObjectUtilities'
+import HintSlotFactory from '@/components/common/HintSlot'
+import { useComponentIcon } from '@/composables/icons/useComponentIcons'
+import { useComponentFocus } from '@/composables/focus/useComponentFocus'
+import { useDebouncedInput } from '@/composables/debouncedInput/useDebouncedInput'
+import { useTextLimit } from '@/composables/textLimit/useTextLimit'
+import { useBemModifiers } from '@/composables/useModifiers'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { VvTextareaProps, VvTextareaEvents } from '@/components/VvTextarea'
+
+// props, emit, slots and attrs
 const props = defineProps(VvTextareaProps)
 const emit = defineEmits(VvTextareaEvents)
 const slots = useSlots()
-const attrs = useAttrs()
 
-//Template References
+// template refs
 const input = ref()
 
-//Data
+// data
 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`
+const hasId = computed(() => String(props.id || nanoid()))
+const hasDescribedBy = computed(() => `${hasId.value}-hint`)
 //BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
-const textAreaPlaceholder = computed(() =>
-	props.floating && ObjectUtilities.isEmpty(props.placeholder)
-		? ' '
-		: props.placeholder
+const hasPlaceholder = computed(() =>
+	props.floating && isEmpty(props.placeholder) ? ' ' : props.placeholder
 )
 
-//Debounce input
-const inputTextData = useDebouncedInput(modelValue, props.debounce, emit)
+// debounce
+const localModelValue = useDebouncedInput(modelValue, emit, props.debounce)
 
-//Gestione ICONE
+// icons
 const { hasIconLeft, hasIconRight } = useComponentIcon(icon, iconPosition, {
 	iconLeft: slots['icon-left'],
 	iconRight: slots['icon-right']
 })
 
-//Input FOCUS
+// focus
 const { focused } = useComponentFocus(input, emit)
 
-//Conteggio battute
-const { textLength, formattedTextLimitLength } = useTextLimit(inputTextData, {
+// text limit
+const { textLength, formattedTextLimitLength } = useTextLimit(localModelValue, {
 	mode: props.limit,
 	upperLimit: props.maxlength || 0
 })
 
-//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 textAreaProps = computed(() => {
-	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
-		k.startsWith('data-')
-	)
-	return {
-		style: attrs.style,
-		...dataAttrs
-	} as HTMLAttributes
+// dirty
+const isDirty = computed(() => !isEmpty(modelValue))
+
+// invalid
+const isInvalid = computed(() => {
+	if (props.error === true) {
+		return true
+	}
+	if (props.valid === true) {
+		return false
+	}
+	return undefined
 })
-const htmlTextareaProps = computed(() => {
-	const ariaAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
-		k.startsWith('aria-')
-	)
 
-	return {
-		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
+// hint
+const { HintSlot, hasHint, hasErrors } = HintSlotFactory(props, slots)
+
+// styles
+const { bemCssClasses } = useBemModifiers('vv-textarea', {
+	modifiers: props.modifiers,
+	readonly: props.readonly,
+	valid: props.valid,
+	invalid: props.error,
+	loading: props.loading,
+	iconLeft: hasIconLeft,
+	iconRight: hasIconRight,
+	floating: props.floating && !isEmpty(props.label),
+	dirty: isDirty,
+	resizable: props.resizable
 })
 
-//Slot props
+// attrs
+const hasAttrs = computed(
+	() =>
+		({
+			placeholder: hasPlaceholder.value,
+			name: props.name,
+			autocomplete: props.autocomplete,
+			minlength: props.minlength,
+			maxlength: props.maxlength,
+			cols: props.cols,
+			rows: props.rows,
+			'aria-invalid': isInvalid.value,
+			'aria-describedby':
+				!hasErrors.value && hasHint.value
+					? hasDescribedBy.value
+					: undefined,
+			'aria-errormessage': hasErrors.value
+				? hasDescribedBy.value
+				: undefined
+		} as TextareaHTMLAttributes)
+)
+
+// slots props
 const iconSlotProps = computed(() => {
 	const { modelValue, valid, error, maxlength, hintLabel } = props
 	return {
@@ -164,21 +126,52 @@ const iconSlotProps = computed(() => {
 	}
 })
 
-//Hint
-const HintSlot = HintSlotFactory(props, slots)
-
-//methods
+// methods
 function clearTextarea() {
-	inputTextData.value = ''
+	localModelValue.value = ''
 }
 
+// lifecycle
 onMounted(() => {
-	if (props.autofocus) focused.value = true
+	if (props.autofocus) {
+		focused.value = true
+	}
 })
 </script>
 
-<script lang="ts">
-export default {
-	inheritAttrs: false
-}
-</script>
+<template>
+	<div v-bind="hasAttrs" :class="bemCssClasses">
+		<label v-if="label" :for="hasId" class="vv-textarea__label">
+			{{ label }}
+		</label>
+		<div class="vv-textarea__wrapper">
+			<!-- @slot icon-left to replace icon left -->
+			<slot v-if="hasIconLeft" name="icon-left" v-bind="iconSlotProps">
+				<vv-icon class="vv-textarea__icon-left" :name="icon" />
+			</slot>
+			<textarea
+				:id="hasId"
+				ref="input"
+				v-model="localModelValue"
+				v-bind="hasAttrs"
+				:disabled="disabled"
+				:readonly="readonly"
+				:required="required" />
+			<!-- autoclear text button -->
+			<button
+				v-show="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">
+				<vv-icon :name="icon" />
+			</slot>
+			<span v-if="limit" class="vv-textarea__limit">
+				<slot name="limit"> {{ formattedTextLimitLength }} </slot>
+			</span>
+		</div>
+		<HintSlot :id="hasDescribedBy" class="vv-textarea__hint" />
+	</div>
+</template>

package/src/components/VvTextarea/{VvTextarea.ts → index.ts}

@@ -8,8 +8,22 @@ import {
 	LimitProps,
 	InputProps,
 	DebounceProps
-} from '../../props'
-import { ICON_POSITIONS, WRAP } from './constants'
+} from '@/props'
+
+export const ICON_POSITIONS = {
+	LEFT: 'left',
+	RIGHT: 'right'
+}
+
+export const WRAP = {
+	hard: 'hard',
+	soft: 'soft'
+}
+
+export default {
+	ICON_POSITIONS,
+	WRAP
+}
 
 export const VvTextareaEvents = ['update:modelValue', 'focus', 'blur']
 
@@ -22,16 +36,23 @@ export const VvTextareaProps = {
 	...LimitProps,
 	...InputProps,
 	...DebounceProps,
-	modelValue: null,
+	/**
+	 * Input id
+	 */
+	id: [String, Number],
+	modelValue: {
+		type: [String],
+		default: undefined
+	},
 	cols: { type: Number, default: 50 },
 	rows: { type: Number, default: 5 },
 	/**
-	 * Nome dell'icona
+	 * Icon name
 	 * @see DsIcon
 	 */
 	icon: { type: String, default: '' },
 	/**
-	 * Posizione dell'icona
+	 * Icon position
 	 */
 	iconPosition: {
 		type: String,
@@ -40,25 +61,24 @@ export const VvTextareaProps = {
 		default: ICON_POSITIONS.RIGHT
 	},
 	/**
-	 * True = label flottante
+	 * If true, the label will be floating
 	 */
 	floating: Boolean,
 	/**
-	 * Specifica come il testo sarà wrappato
+	 * How the text in a text area is to be wrapped.
 	 * @see Documentation https://www.w3schools.com/tags/att_textarea_wrap.asp
 	 */
 	wrap: { type: String, default: WRAP.soft },
 	/**
-	 * Se true, attiva la possibilità di cancellare il testo nella textarea
+	 * If true, the value of the textarea will be cleared automatically
 	 */
 	autoclear: Boolean,
 	/**
-	 * Se true, la textbox può essere ridimensionata verticalmente.
+	 * If true, the textarea will be resizable
 	 * @description
 	 * Il resize è pilotato via css. Al momento è attivo solamente il resize verticale
 	 */
 	resizable: Boolean
 }
 
-type VvTextareaPropsType = typeof VvTextareaProps
-export type VvTextareaPropsTypes = ExtractPropTypes<VvTextareaPropsType>
+export type VvTextareaPropsTypes = ExtractPropTypes<typeof VvTextareaProps>