@volverjs/ui-vue 0.0.1-beta.6 → 0.0.1

package/src/components/VvTextarea/VvTextarea.vue

@@ -1,189 +1,197 @@
-<template>
-	<div v-bind="vvTextareaProps" :class="vvInputTextareaClass">
-		<label v-if="label" :for="innerTextareaProps.id">{{ 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-bind="innerTextareaProps"
-				v-model="inputTextData"
-				@input="emit('input', $event)" />
-			<!-- @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>
-		</div>
-		<HintSlot
-			:id="inputAriaAttrs['aria-describedby']"
-			class="vv-textarea__hint" />
-	</div>
-</template>
+<script lang="ts">
+	export default {
+		name: 'VvTextarea',
+	}
+</script>
 
 <script setup lang="ts">
-import {
-	computed,
-	useAttrs,
-	useSlots,
-	ref,
-	toRefs,
-	onMounted,
-	watch,
-	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 { refDebounced } from '@vueuse/core'
-import { useComponentIcons } from '../../composables/icons/useComponentIcons'
-import { useComponentFocus } from '../../composables/focus/useComponentFocus'
-import { useBemModifiers } from '@/composables/useModifiers'
-
-//Props, Emits, Slots e Attrs
-const props = defineProps(VvTextareaProps)
-const emit = defineEmits(VvTextareaEvents)
-const slots = useSlots()
-const attrs = useAttrs()
-
-//Template References
-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))
-
-//Gestione ICONE
-const iconProps = { icon, iconPosition }
-const iconSlots = {
-	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))
-})
-const vvInputTextareaClass = computed(() => {
-	const { class: cssClass } = attrs
-	return {
-		class: cssClass,
-		...bemInputClass.value
-	}
-})
-const vvTextareaProps = computed(() => {
-	const { style } = attrs
-	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
-		k.startsWith('data-')
-	)
-	return {
-		style,
-		...dataAttrs
-	} as HTMLAttributes
-})
-const innerTextareaProps = computed(() => {
+	import {
+		computed,
+		useSlots,
+		ref,
+		toRefs,
+		onMounted,
+		type TextareaHTMLAttributes,
+	} from 'vue'
+	import { nanoid } from 'nanoid'
+	import { isEmpty } from '@/utils/ObjectUtilities'
+	import HintSlotFactory from '@/components/common/HintSlot'
+	import { useComponentIcon } from '@/composables/useComponentIcons'
+	import { useComponentFocus } from '@/composables/useComponentFocus'
+	import { useDebouncedInput } from '@/composables/useDebouncedInput'
+	import { useTextCount } from '@/composables/useTextCount'
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import VvIcon from '@/components/VvIcon/VvIcon.vue'
+	import { VvTextareaProps, VvTextareaEvents } from '@/components/VvTextarea'
+
+	// props, emit and slots
+	const props = defineProps(VvTextareaProps)
+	const emit = defineEmits(VvTextareaEvents)
+	const slots = useSlots()
+
+	// template refs
+	const textarea = ref()
+
+	// data
 	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 ariaAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
-		k.startsWith('aria-')
+		icon,
+		iconPosition,
+		label,
+		modelValue,
+		count,
+		valid,
+		invalid,
+		loading,
+	} = toRefs(props)
+	const hasId = computed(() => String(props.id || nanoid()))
+	const hasDescribedBy = computed(() => `${hasId.value}-hint`)
+	// BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
+	const hasPlaceholder = computed(() =>
+		props.floating && isEmpty(props.placeholder) ? ' ' : props.placeholder,
 	)
-	return {
-		'aria-label': name,
-		'aria-describedby': `${name}-hint`,
-		'aria-invalid': props.error,
-		...ariaAttrs
-	}
-})
 
-//Slot props
-const iconSlotProps = computed(() => {
-	const { modelValue, valid, error } = props
-	return {
-		valid,
-		error,
-		modelValue
-	}
-})
+	// debounce
+	const localModelValue = useDebouncedInput(modelValue, emit, props.debounce)
+
+	// icons
+	const { hasIcon, hasIconLeft, hasIconRight } = useComponentIcon(
+		icon,
+		iconPosition,
+	)
 
-//Hint
-const HintSlot = HintSlotFactory(props, slots)
+	// focus
+	const { focused } = useComponentFocus(textarea, emit)
 
-onMounted(() => {
-	if (props.autofocus) focused.value = true
-	console.log('Focused', focused.value)
-})
-</script>
+	// count
+	const { formatted: countFormatted } = useTextCount(localModelValue, {
+		mode: props.count,
+		upperLimit: props.maxlength,
+		lowerLimit: props.minlength,
+	})
 
-<script lang="ts">
-export default {
-	inheritAttrs: false
-}
+	// tabindex
+	const isClickable = computed(() => !props.disabled && !props.readonly)
+	const hasTabindex = computed(() =>
+		isClickable.value ? props.tabindex : -1,
+	)
+
+	// dirty
+	const isDirty = computed(() => !isEmpty(modelValue))
+
+	// invalid
+	const isInvalid = computed(() => {
+		if (props.invalid === true) {
+			return true
+		}
+		if (props.valid === true) {
+			return false
+		}
+		return undefined
+	})
+
+	// hint
+	const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots)
+
+	// styles
+	const { bemCssClasses } = useBemModifiers('vv-textarea', {
+		modifiers: props.modifiers,
+		valid: valid,
+		invalid: invalid,
+		loading,
+		disabled: props.disabled,
+		readonly: props.readonly,
+		iconLeft: hasIconLeft,
+		iconRight: hasIconRight,
+		floating: props.floating && !isEmpty(props.label),
+		dirty: isDirty,
+		focused: focused,
+		resizable: props.resizable,
+	})
+
+	// attrs
+	const hasAttrs = computed(
+		() =>
+			({
+				name: props.name,
+				placeholder: hasPlaceholder.value,
+				tabindex: hasTabindex.value,
+				disabled: props.disabled,
+				readonly: props.readonly,
+				required: props.required,
+				autocomplete: props.autocomplete,
+				minlength: props.minlength,
+				maxlength: props.maxlength,
+				cols: props.cols,
+				rows: props.rows,
+				wrap: props.wrap,
+				spellcheck: props.spellcheck,
+				'aria-invalid': isInvalid.value,
+				'aria-describedby':
+					!hasInvalid.value && hasHint.value
+						? hasDescribedBy.value
+						: undefined,
+				'aria-errormessage': hasInvalid.value
+					? hasDescribedBy.value
+					: undefined,
+			} as TextareaHTMLAttributes),
+	)
+
+	// slots props
+	const slotProps = computed(() => ({
+		valid: props.valid,
+		invalid: props.invalid,
+		modelValue: props.modelValue,
+		hintLabel: props.hintLabel,
+		maxlength: props.maxlength,
+		minlength: props.minlength,
+		clear: onClear,
+	}))
+
+	// methods
+	const onClear = () => {
+		localModelValue.value = undefined
+	}
+
+	// lifecycle
+	onMounted(() => {
+		if (props.autofocus) {
+			focused.value = true
+		}
+	})
 </script>
+
+<template>
+	<div :class="bemCssClasses">
+		<label v-if="label" :for="hasId" class="vv-textarea__label">
+			{{ label }}
+		</label>
+		<div class="vv-textarea__wrapper">
+			<!-- @slot Slot to replace left icon -->
+			<slot name="before" v-bind="slotProps">
+				<VvIcon
+					v-if="hasIconLeft"
+					class="vv-textarea__icon-left"
+					v-bind="hasIcon"
+				/>
+			</slot>
+			<textarea
+				:id="hasId"
+				ref="textarea"
+				v-model="localModelValue"
+				v-bind="hasAttrs"
+				@keyup="emit('keyup', $event)"
+			/>
+			<slot name="after" v-bind="slotProps">
+				<VvIcon v-if="hasIconRight" v-bind="hasIcon" />
+			</slot>
+			<!-- @slot Slot to replace right icon -->
+			<span v-if="count" class="vv-textarea__limit">
+				<!-- @slot Slot to replace count -->
+				<slot name="count" v-bind="slotProps">
+					{{ countFormatted }}
+				</slot>
+			</span>
+		</div>
+		<HintSlot :id="hasDescribedBy" class="vv-textarea__hint" />
+	</div>
+</template>

package/src/components/VvTextarea/index.ts

@@ -0,0 +1,50 @@
+import type { ExtractPropTypes } from 'vue'
+import { InputTextareaProps } from '@/props'
+
+export const WRAP = {
+	hard: 'hard',
+	soft: 'soft',
+}
+
+export const SPELLCHECK = {
+	true: true,
+	false: false,
+	default: 'default',
+}
+
+export const VvTextareaEvents = ['update:modelValue', 'focus', 'blur', 'keyup']
+
+export const VvTextareaProps = {
+	...InputTextareaProps,
+	/**
+	 * Textarea value
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#value
+	 */
+	modelValue: String,
+	/**
+	 * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols
+	 */
+	cols: { type: [String, Number], default: 20 },
+	/**
+	 * The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows
+	 */
+	rows: { type: [String, Number], default: 2 },
+	/**
+	 * Indicates how the control should wrap the value for form submission.
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
+	 */
+	wrap: { type: String, default: WRAP.soft },
+	/**
+	 * Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS.
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
+	 */
+	spellcheck: { type: [Boolean, String], default: SPELLCHECK.default },
+	/**
+	 * If true, the textarea will be resizable
+	 */
+	resizable: Boolean,
+}
+
+export type VvTextareaPropsTypes = ExtractPropTypes<typeof VvTextareaProps>