@volverjs/ui-vue 0.0.1-beta.11

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -0,0 +1,80 @@
+<template>
+	<fieldset :class="groupClass">
+		<legend v-if="label" v-text="label" />
+		<div class="vv-input-radio-group__wrapper">
+			<!-- #region options set up -->
+			<template v-if="options.length > 0">
+				<vv-radio
+					v-for="(o, oIndex) in options"
+					:key="oIndex"
+					v-bind="getOptionProps(o, oIndex)" />
+			</template>
+			<!-- #endregion options set up -->
+			<!-- #region default -->
+			<slot v-else />
+			<!-- #endregion default -->
+		</div>
+		<!-- @slot error,valid,hint,loading vanno vanno qua -->
+		<HintSlot class="vv-input-radio-group__hint" />
+	</fieldset>
+</template>
+
+<script setup lang="ts">
+import { useSlots, computed, toRefs } from 'vue'
+import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
+import { VvRadioGroupProps, VvRadioGroupEvents } from './VvRadioGroup'
+
+//Composables
+import { useVModel } from '@vueuse/core'
+import { useProvideGroupState } from '../../composables/group/useProvideGroupState'
+import { useOptions } from '../../composables/options/useOptions'
+import { useBemModifiers } from '@/composables/useModifiers'
+
+//Constants
+import { VV_RADIO_GROUP } from '../../constants'
+
+//Components
+import VvRadio from '../../components/VvRadio/VvRadio.vue'
+import { HintSlotFactory } from '../common/HintSlot'
+
+//Props, Emits, Slots e Attrs
+const emit = defineEmits(VvRadioGroupEvents)
+const props = defineProps(VvRadioGroupProps)
+const slots = useSlots()
+
+//Data
+const modelValue = useVModel(props, 'modelValue', emit)
+const { disabled, readonly, vertical, valid, error } = toRefs(props)
+
+// #region group
+const groupState: IInputGroupState = {
+	key: VV_RADIO_GROUP,
+	modelValue,
+	disabled,
+	readonly
+}
+useProvideGroupState(groupState)
+// #endregion group
+
+//OPTIONS
+const { getOptionLabel, getOptionValue } = useOptions(props)
+
+//Styles & Bindings
+const { bemCssClasses: groupClass } = useBemModifiers('vv-input-radio-group', {
+	horizontal: computed(() => !vertical.value),
+	valid,
+	invalid: error
+})
+
+//Methods
+function getOptionProps(option: any, oIndex: number) {
+	return {
+		id: `${props.name}_opt${oIndex}`,
+		name: props.name,
+		label: getOptionLabel(option),
+		value: getOptionValue(option)
+	}
+}
+
+const HintSlot = HintSlotFactory(props, slots)
+</script>

package/src/components/VvSelect/VvSelect.ts

@@ -0,0 +1,91 @@
+import type { PropType } from 'vue'
+import type { Option } from '../VvDropdown/VvDropdown'
+import {
+	ValidProps,
+	ErrorProps,
+	HintProps,
+	LoadingProps,
+	DisabledProps,
+	ReadonlyProps,
+	ModifiersProps
+} from '../../props'
+
+export const VvSelectProps = {
+	...ValidProps,
+	...ErrorProps,
+	...HintProps,
+	...LoadingProps,
+	...DisabledProps,
+	...ReadonlyProps,
+	...ModifiersProps,
+	/**
+	 * modelValue can be an Object, a String or an Array of Object/String
+	 */
+	modelValue: [String, Array, Object],
+	/**
+	 * Select input label
+	 */
+	label: String,
+	/**
+	 * Label of "no results" options
+	 */
+	labelNoResult: { type: String, default: 'No results' },
+	/**
+	 * Select input placeholder
+	 */
+	placeholder: String,
+	/**
+	 * Use input text to search on options
+	 */
+	searchable: Boolean,
+	/**
+	 * On searchable select is the input search placeholder
+	 */
+	searchPlaceholder: String,
+	/**
+	 * the input search debounce time in ms
+	 */
+	debounceSearch: {
+		type: [Number, String],
+		default: 0
+	},
+	/**
+	 * Select options, can be string[] or object[]
+	 */
+	options: {
+		type: Array as PropType<Array<Option | string>>,
+		required: true
+	},
+	/**
+	 * Use objects as modelValue (object or object[])
+	 */
+	useObject: Boolean,
+	/**
+	 * Manage modelValue as string[] or object[]
+	 */
+	multiple: Boolean,
+	/**
+	 * The max number of selected values
+	 */
+	maxValues: [Number, String],
+	/**
+	 * The select label separator visible to the user
+	 */
+	separator: { type: String, default: ', ' },
+	/**
+	 * Used when options are objects: key to use for option label
+	 */
+	labelKey: { type: String, default: 'label' },
+	/**
+	 * Used when options are objects: key to use for option label
+	 */
+	valueKey: { type: String, default: 'value' },
+	/**
+	 * Icon name of icon in left position
+	 */
+	iconLeft: String,
+	/**
+	 * Icon name of icon in right position
+	 */
+	iconRight: String
+}

package/src/components/VvSelect/VvSelect.vue

@@ -0,0 +1,194 @@
+<template>
+	<div :id="id" :class="selectClasses">
+		<label v-if="label" for="select">{{ label }}</label>
+		<details
+			ref="dropdown"
+			role="list"
+			class="vv-select__wrapper"
+			@click="disabled || readonly ? $event.preventDefault() : null"
+			@keyup.esc="dropdown.open = false"
+			@toggle="onToggle">
+			<summary
+				class="vv-select__input"
+				aria-haspopup="listbox"
+				@keyup.space="searchable ? $event.preventDefault() : null">
+				<!-- #region search input -->
+				<template v-if="searchable && dropdownOpen">
+					<input
+						ref="inputSearch"
+						v-model="searchText"
+						:placeholder="searchPlaceholder" />
+				</template>
+				<!-- #endregion search input -->
+				<!-- #region label of selected value/s -->
+				<template v-else>
+					{{ labelValue || placeholder }}
+				</template>
+				<!-- #endregion label of selected value/s -->
+			</summary>
+			<VvDropdown
+				v-bind="{
+					...props,
+					options: currentOptions
+				}"
+				@update:model-value="onInput" />
+		</details>
+		<HintSlot class="vv-select__hint" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Option } from '../VvDropdown/VvDropdown'
+import { computed, ref, toRefs, useSlots, watch } from 'vue'
+import { onClickOutside, refDebounced, useFocus } from '@vueuse/core'
+import { v4 as uuidv4 } from 'uuid'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+import { VvSelectProps } from './VvSelect'
+import HintSlotFactory from '../common/HintSlot'
+import VvDropdown from '../VvDropdown/VvDropdown.vue'
+import { useBemModifiers } from '../../composables/useModifiers'
+
+const props = defineProps(VvSelectProps)
+const slots = useSlots()
+const emit = defineEmits(['update:modelValue', 'change:search'])
+
+//Hint component
+const HintSlot = HintSlotFactory(props, slots)
+
+// html ref
+const dropdown = ref()
+const inputSearch = ref()
+// autofocus input search
+useFocus(inputSearch, { initialValue: true })
+
+// data
+const id = uuidv4()
+const searchText = ref('')
+const debouncedSearchText = refDebounced(
+	searchText,
+	Number(props.debounceSearch)
+)
+const dropdownOpen = ref(false)
+const {
+	modifiers,
+	disabled,
+	readonly,
+	loading,
+	iconLeft,
+	iconRight,
+	valid,
+	error
+} = toRefs(props)
+
+// watch
+// emit on change search text
+watch(debouncedSearchText, () =>
+	emit('change:search', debouncedSearchText.value)
+)
+
+//Styles & css classes modifiers
+const { bemCssClasses: selectClasses } = useBemModifiers('vv-select', {
+	modifiers,
+	disabled,
+	loading,
+	readonly,
+	iconLeft,
+	iconRight,
+	valid,
+	invalid: error,
+	dirty: computed(() => ObjectUtilities.isNotEmpty(props.modelValue))
+})
+
+// computed
+
+// Check if options are objects
+const isOptionsObjects = computed(() =>
+	props.options?.every((option) => typeof option === 'object')
+)
+
+// current options, filtered or prop options
+const currentOptions = computed(() =>
+	props.searchable ? filteredOptions.value : props.options
+)
+
+// options filtered by search text
+const filteredOptions = computed(() => {
+	return props.options?.filter((option) => {
+		if (typeof option === 'string') {
+			return option
+				.toLowerCase()
+				.includes(debouncedSearchText.value.toLowerCase().trim())
+		}
+		return option[props.labelKey]
+			.toLowerCase()
+			.includes(debouncedSearchText.value.toLowerCase().trim())
+	})
+})
+
+/**
+ * Compute the label to show to the user
+ * Check if is multiple mode, object mode or "string" mode
+ */
+const labelValue = computed(() => {
+	// #region multiple mode
+	if (
+		props.multiple &&
+		props.modelValue?.length &&
+		Array.isArray(props.modelValue)
+	) {
+		if (isOptionsObjects.value) {
+			// filter options by selected values
+			return ObjectUtilities.filterArray<Option>(
+				props.options as Option[],
+				props.modelValue,
+				props.valueKey
+			)
+				.map((option) => option[props.labelKey])
+				.join(props.separator)
+		} else {
+			return props.modelValue.join(props.separator)
+		}
+	}
+	// #endregion multiple mode
+
+	// #region single mode
+	const selectedOption = props.useObject
+		? props.modelValue
+		: props.options?.find((option) =>
+				typeof option === 'object'
+					? option[props.valueKey] == props.modelValue
+					: option == props.modelValue
+		  )
+
+	return typeof selectedOption === 'object'
+		? selectedOption?.[props.labelKey]
+		: selectedOption
+	// #endregion single mode
+})
+
+// methods
+
+// close dropdown on click outside
+onClickOutside(dropdown, () => {
+	dropdown.value.open = false
+})
+
+// Function triggered on toggle dropdown (open/close)
+function onToggle(event: Event) {
+	const target = event.target as HTMLDetailsElement
+	dropdownOpen.value = target.open
+}
+
+/**
+ * Function triggered on input of checkbox or radio (multple or single mode)
+ * @param event on input event (checkbox or radio input)
+ */
+function onInput(value: typeof props.modelValue) {
+	// close dropdown in single mode
+	if (dropdown.value && !props.multiple) {
+		dropdown.value.open = false
+	}
+
+	emit('update:modelValue', value)
+}
+</script>

package/src/components/VvTextarea/VvTextarea.ts

@@ -0,0 +1,64 @@
+import type { ExtractPropTypes } from 'vue'
+import {
+	ValidProps,
+	ErrorProps,
+	HintProps,
+	LoadingProps,
+	ModifiersProps,
+	LimitProps,
+	InputProps,
+	DebounceProps
+} from '../../props'
+import { ICON_POSITIONS, WRAP } from './constants'
+
+export const VvTextareaEvents = ['update:modelValue', 'focus', 'blur']
+
+export const VvTextareaProps = {
+	...ValidProps,
+	...ErrorProps,
+	...HintProps,
+	...LoadingProps,
+	...ModifiersProps,
+	...LimitProps,
+	...InputProps,
+	...DebounceProps,
+	modelValue: null,
+	cols: { type: Number, default: 50 },
+	rows: { type: Number, default: 5 },
+	/**
+	 * Nome dell'icona
+	 * @see DsIcon
+	 */
+	icon: { type: String, default: '' },
+	/**
+	 * Posizione dell'icona
+	 */
+	iconPosition: {
+		type: String,
+		validation: (value: string) =>
+			Object.values(ICON_POSITIONS).includes(value),
+		default: ICON_POSITIONS.RIGHT
+	},
+	/**
+	 * True = label flottante
+	 */
+	floating: Boolean,
+	/**
+	 * Specifica come il testo sarà wrappato
+	 * @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
+	 */
+	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>

package/src/components/VvTextarea/VvTextarea.vue

@@ -0,0 +1,184 @@
+<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 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
+const props = defineProps(VvTextareaProps)
+const emit = defineEmits(VvTextareaEvents)
+const slots = useSlots()
+const attrs = useAttrs()
+
+//Template References
+const input = ref()
+
+//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`
+//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 { hasIconLeft, hasIconRight } = useComponentIcon(icon, iconPosition, {
+	iconLeft: slots['icon-left'],
+	iconRight: slots['icon-right']
+})
+
+//Input FOCUS
+const { focused } = useComponentFocus(input, emit)
+
+//Conteggio battute
+const { textLength, formattedTextLimitLength } = useTextLimit(inputTextData, {
+	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
+})
+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
+})
+
+//Slot props
+const iconSlotProps = computed(() => {
+	const { modelValue, valid, error, maxlength, hintLabel } = props
+	return {
+		valid,
+		error,
+		modelValue,
+		hintLabel,
+		maxlength,
+		textLength
+	}
+})
+
+//Hint
+const HintSlot = HintSlotFactory(props, slots)
+
+//methods
+function clearTextarea() {
+	inputTextData.value = ''
+}
+
+onMounted(() => {
+	if (props.autofocus) focused.value = true
+})
+</script>
+
+<script lang="ts">
+export default {
+	inheritAttrs: false
+}
+</script>

package/src/components/VvTextarea/constants.ts

@@ -0,0 +1,14 @@
+export const ICON_POSITIONS = {
+	LEFT: 'left',
+	RIGHT: 'right'
+}
+
+export const WRAP = {
+	hard: 'hard',
+	soft: 'soft'
+}
+
+export default {
+	ICON_POSITIONS,
+	WRAP
+}