@volverjs/ui-vue 0.0.1-beta.2

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,55 @@
+import {
+	ValidProps,
+	ErrorProps,
+	HintProps,
+	LoadingProps,
+	DisabledProps,
+	ReadonlyProps
+} from '../../props'
+import { ICON_POSITIONS, WRAP } from './constants'
+
+export const VvTextareaEvents = ['update:modelValue', 'focus', 'blur']
+
+export const VvTextareaProps = {
+	...ValidProps,
+	...ErrorProps,
+	...HintProps,
+	...LoadingProps,
+	...DisabledProps,
+	...ReadonlyProps,
+	modelValue: null,
+	id: String,
+	name: { type: String, required: true },
+	autocomplete: { type: String, default: 'off' },
+	autofocus: Boolean,
+	minlength: Number,
+	maxlength: Number,
+	label: String,
+	placeholder: String,
+	/**
+	 * 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,
+	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 }
+}

package/src/components/VvTextarea/VvTextarea.vue

@@ -0,0 +1,189 @@
+<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 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(() => {
+	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-')
+	)
+	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
+	}
+})
+
+//Hint
+const HintSlot = HintSlotFactory(props, slots)
+
+onMounted(() => {
+	if (props.autofocus) focused.value = true
+	console.log('Focused', focused.value)
+})
+</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
+}

package/src/components/common/HintSlot.ts

@@ -0,0 +1,164 @@
+import { h, type Component, type ExtractPropTypes, type Slots } from 'vue'
+import { computed, toRefs } from 'vue'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+
+/**
+ * Merge errors from Array<string> to string errors separated from new line (\n)
+ * @param {Array<string> | string} errors
+ * @returns {string}
+ */
+function joinErrors(errors: Array<string> | string) {
+	if (Array.isArray(errors))
+		return errors
+			.filter((e) => ObjectUtilities.isString(e))
+			.reduce((prevVal, currVal) => {
+				if (prevVal.length > 0) return prevVal + '\n' + currVal
+				return currVal
+			}, '')
+	else return errors
+}
+
+interface HintSlotProps {
+	hintLabel: {
+		type: StringConstructor
+		default: ''
+		required: true
+	}
+	modelValue: null
+	valid: BooleanConstructor
+	validLabel: (StringConstructor | ArrayConstructor)[]
+	error: BooleanConstructor
+	errorLabel: (StringConstructor | ArrayConstructor)[]
+}
+
+interface HintSlotPropsWithLoading extends HintSlotProps {
+	loading: BooleanConstructor
+	loadingLabel: StringConstructor
+}
+
+/**
+ * Return a vue component (HintSlot) to render and manage hint, errors, valid, loading state and messages
+ * @param {Readonly<ExtractPropTypes<HintSlotProps | HintSlotPropsWithLoading>>} pProps vue props
+ * @param {Slots} pSlots vue slots
+ * @returns {Component} vue component
+ */
+export function HintSlotFactory(
+	pProps: Readonly<
+		ExtractPropTypes<HintSlotProps | HintSlotPropsWithLoading>
+	>,
+	pSlots: Slots
+): Component {
+	return {
+		name: 'HintSlot',
+		setup() {
+			const props = toRefs(pProps)
+
+			//Slots
+			const {
+				error: errorSlot,
+				valid: validSlot,
+				hint: hintSlot,
+				loading: loadingSlot
+			} = pSlots
+
+			//Props hint + errors
+			const {
+				hintLabel,
+				modelValue,
+				valid,
+				validLabel,
+				error,
+				errorLabel
+			} = props
+			const loading = ObjectUtilities.resolveFieldData(props, 'loading')
+			const loadingLabel = ObjectUtilities.resolveFieldData(
+				props,
+				'loadingLabel'
+			)
+
+			const hasErrors = computed(() => {
+				//No error
+				if (!error.value) return false
+
+				if (error.value && errorSlot) return true
+
+				if (
+					errorLabel?.value &&
+					Array.isArray(errorLabel.value) &&
+					errorLabel.value.length > 0
+				)
+					return true
+
+				if (
+					errorLabel?.value &&
+					ObjectUtilities.isNotEmpty(errorLabel.value)
+				)
+					return true
+
+				return false
+			})
+
+			const hasHint = computed(() => {
+				return !!(
+					(hintLabel && hintLabel.value) ||
+					hintSlot ||
+					validSlot ||
+					(validLabel && validLabel.value) ||
+					hasErrors.value ||
+					(loading?.value && loadingSlot) ||
+					(loading?.value && loadingLabel?.value)
+				)
+			})
+
+			const errorMessage = computed(() => {
+				if (Array.isArray(errorLabel?.value))
+					return joinErrors(errorLabel?.value || '')
+				else return errorLabel?.value
+			})
+
+			const hintContent = computed(() => {
+				const slotProps = { modelValue, error, valid }
+
+				if (error?.value) {
+					return (
+						errorSlot?.(slotProps) ||
+						errorMessage?.value ||
+						hintLabel?.value
+					)
+				}
+
+				if (valid?.value)
+					return (
+						validSlot?.(slotProps) ||
+						validLabel?.value ||
+						hintLabel?.value
+					)
+
+				if (loading?.value)
+					return (
+						loadingSlot?.(slotProps) ||
+						loadingLabel?.value ||
+						hintLabel?.value
+					)
+
+				return (
+					hintSlot?.(slotProps) ||
+					hintLabel?.value ||
+					hintLabel?.value
+				)
+			})
+
+			return {
+				hasHint,
+				hintContent
+			}
+		},
+		render() {
+			if (this.hasHint) {
+				return h('span', null, this.hintContent)
+			}
+		}
+	}
+}
+
+export default HintSlotFactory

package/src/components/index.ts

@@ -0,0 +1,12 @@
+export { default as VvButton } from '@/components/VvButton/VvButton.vue'
+export { default as VvIcon } from '@/components/VvIcon/VvIcon.vue'
+export { default as VvBadge } from '@/components/VvBadge/VvBadge.vue'
+export { default as VvButtonGroup } from '@/components/VvButtonGroup/VvButtonGroup.vue'
+export { default as VvAccordion } from '@/components/VvAccordion/VvAccordion.vue'
+export { default as VvAccordionGroup } from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
+export { default as VvBreadcrumb } from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
+export { default as VvCard } from '@/components/VvCard/VvCard.vue'
+export { default as VvCheck } from '@/components/VvCheck/VvCheck.vue'
+export { default as VvCheckGroup } from '@/components/VvCheckGroup/VvCheckGroup.vue'
+export { default as VvDialog } from '@/components/VvDialog/VvDialog.vue'
+export { default as VvDropdown } from '@/components/VvDropdown/VvDropdown.vue'

package/src/composables/focus/useComponentFocus.ts

@@ -0,0 +1,22 @@
+import type { Ref } from 'vue'
+import { watch } from 'vue'
+import { useFocus } from '@vueuse/core'
+
+/**
+ *
+ */
+export function useComponentFocus(
+	inputTemplateRef: Ref<HTMLInputElement>,
+	emit: (event: any, ...args: any[]) => void
+) {
+	const { focused } = useFocus(inputTemplateRef)
+
+	watch(focused, (bFocus) => {
+		if (bFocus) emit('focus', inputTemplateRef.value)
+		else emit('blur', inputTemplateRef.value)
+	})
+
+	return {
+		focused
+	}
+}

package/src/composables/group/types/IAccordionGroupState.ts

@@ -0,0 +1,12 @@
+import type { Ref } from 'vue'
+
+import type IGroupState from './IGroupState'
+
+/**
+ * Stato condiviso per un gruppo di pulsanti
+ */
+export default interface IAccordionGroupState extends IGroupState {
+	iconRight: Ref<boolean>
+	bordered: Ref<boolean>
+	accordion: Ref<boolean>
+}

package/src/composables/group/types/IButtonGroupState.ts

@@ -0,0 +1,21 @@
+import type { Ref } from 'vue'
+
+import type IGroupState from './IGroupState'
+
+/**
+ * Stato condiviso per un gruppo di pulsanti
+ */
+export default interface IButtonGroupState extends IGroupState {
+	/**
+	 * Singolo bottone selezionato - utilizzo un id (o un name)
+	 */
+	modelValue: Ref<string | undefined>
+	/**
+	 * Stato disabilitato
+	 */
+	disabled: Ref<boolean>
+	/**
+	 * True = gruppo di pulsanti è in modalità TOGGLE (come i radio buttons)
+	 */
+	toggle: Ref<boolean>
+}

package/src/composables/group/types/IGroupState.ts

@@ -0,0 +1,12 @@
+import type { Ref } from 'vue'
+
+/**
+ * Stato condiviso per un gruppo di elementi
+ */
+export default interface IGroupState {
+	[key: string]: Ref<any> | symbol
+	/**
+	 * Chiave usata per il provide del gruppo
+	 */
+	key: symbol
+}