@volverjs/ui-vue 0.0.1-beta.11

package/src/components/VvDropdown/VvDropdown.vue

@@ -0,0 +1,130 @@
+<template>
+	<ul :class="dropdownClasses" role="listbox">
+		<li v-if="!options?.length">
+			<label>
+				{{ labelNoResult }}
+			</label>
+		</li>
+		<li v-for="(option, index) in options" :key="index">
+			<label :for="`dropdown-${index}-${id}`">
+				<input
+					:id="`dropdown-${index}-${id}`"
+					:type="multiple ? 'checkbox' : 'radio'"
+					:value="getValue(option)"
+					:checked="isSelected(option)"
+					:disabled="
+						typeof option === 'object'
+							? option.disabled ?? disabled
+							: disabled
+					"
+					@input="onInput" />
+				{{ getLabel(option) }}
+			</label>
+		</li>
+	</ul>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import { v4 as uuidv4 } from 'uuid'
+import { useBemModifiers } from '../../composables/useModifiers'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+import { VvDropdownProps, type Option } from './VvDropdown'
+
+const props = defineProps(VvDropdownProps)
+const emit = defineEmits(['update:modelValue'])
+
+// data
+const id = uuidv4()
+const { modifiers, disabled } = toRefs(props)
+
+//Styles & css classes modifiers
+const { bemCssClasses: dropdownClasses } = useBemModifiers('vv-dropdown', {
+	modifiers,
+	disabled
+})
+
+/**
+ * Check if an option exist into modelValue array (multiple) or is equal to modelValue (single)
+ * @param {String | Option} option
+ */
+function isSelected(option: string | Option) {
+	if (Array.isArray(props.modelValue)) {
+		// check if contain whole option or option value
+		return (
+			ObjectUtilities.contains(option, props.modelValue) ||
+			ObjectUtilities.contains(getValue(option), props.modelValue)
+		)
+	}
+	// check if modelValue is equal to option or option value
+	return (
+		ObjectUtilities.equals(option, props.modelValue) ||
+		ObjectUtilities.equals(getValue(option), props.modelValue)
+	)
+}
+
+/**
+ * Retrieve the option value based on prop "valueKey" or the option if it is a string
+ * @param {String | Option} option
+ */
+function getValue(option: string | Option) {
+	return typeof option === 'string' ? option : String(option[props.valueKey])
+}
+
+/**
+ * Retrieve the option label based on prop "labelKey" or the option if it is a string
+ * @param {String | Option} option
+ */
+function getLabel(option: string | Option) {
+	return typeof option === 'string' ? option : option[props.labelKey]
+}
+
+/**
+ * Function triggered on input of checkbox or radio (multple or single mode)
+ * @param event on input event (checkbox or radio input)
+ */
+function onInput(event: Event) {
+	const target = event.target as HTMLInputElement
+
+	// Value initialized with string input value
+	// Can be an Array of string or an Option or Array of Options
+	let value: string | string[] | Option | Option[] = target.value
+	// Find option object if useObject prop is true and options are objects
+	const valueObject = props.useObject
+		? props.options?.find(
+				(option) => (option as Option)[props.valueKey] == value
+		  )
+		: null
+
+	// use valueObject if exist or the target value
+	value = valueObject || value
+
+	// Check multiple prop, override value with array and remove or add the value
+	if (props.multiple) {
+		// check maxValues prop and block check new values
+		if (
+			typeof props.maxValues !== 'undefined' &&
+			props.maxValues >= 0 &&
+			props.modelValue?.length >= props.maxValues
+		) {
+			if (
+				(Array.isArray(props.modelValue) &&
+					!ObjectUtilities.contains(value, props.modelValue)) ||
+				props.maxValues == 0
+			) {
+				target.checked = false
+				// maxValues reached
+				return
+			}
+		}
+		if (Array.isArray(props.modelValue)) {
+			value = ObjectUtilities.contains(value, props.modelValue)
+				? ObjectUtilities.removeFromList(value, props.modelValue)
+				: [...props.modelValue, value]
+		} else {
+			value = [value]
+		}
+	}
+	emit('update:modelValue', value)
+}
+</script>

package/src/components/VvIcon/VvIcon.ts

@@ -0,0 +1,94 @@
+import type { PropType } from 'vue'
+import type { IconifyRenderMode } from '@iconify/vue'
+
+export enum PREFIX {
+	simple = 'simple',
+	normal = 'normal',
+	detailed = 'detailed'
+}
+
+export const VvIconProps = {
+	color: String,
+	width: {
+		type: [String, Number]
+	},
+	height: {
+		type: [String, Number]
+	},
+	/**
+	 * Icon name
+	 * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
+	 * https://docs.iconify.design/api/providers.html#provider-in-icon-name
+	 */
+	name: {
+		type: String,
+		required: true
+	},
+	/**
+	 * By default 'vv'
+	 * If custom collection is not added with "addCollection" DS class method, this prop could not be used
+	 * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
+	 */
+	provider: {
+		type: String
+	},
+	/**
+	 * The name of icon set.
+	 * Icon default options prefix: simple | normal | detailed
+	 */
+	prefix: {
+		type: String as PropType<PREFIX>,
+		default: 'normal'
+	},
+	/**
+	 * Url remote SVG icon
+	 */
+	src: String,
+	/**
+	 * Horizontal flip
+	 */
+	horizontalFlip: Boolean,
+	/**
+	 * Vertical flip
+	 */
+	verticalFlip: Boolean,
+	/**
+	 * String alternative to "horizontalFlip" and "verticalFlip".
+	 * Example: https://docs.iconify.design/icon-components/vue/transform.html
+	 */
+	flip: String,
+	/**
+	 * Icon render mode
+	 * 'style' = 'bg' or 'mask', depending on icon content
+	 * 'bg' = span with style using `background`
+	 * 'mask' = span with style using `mask`
+	 * 'svg' = svg
+	 * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
+	 */
+	mode: String as PropType<IconifyRenderMode>,
+	/**
+	 * Toggles inline or block mode
+	 * Example https://docs.iconify.design/icon-components/vue/inline.html
+	 */
+	inline: Boolean,
+	/**
+	 * rotates icon
+	 * Example https://docs.iconify.design/icon-components/vue/transform.html
+	 */
+	rotate: [Number, String],
+	/**
+	 * A callback that is called when icon data has been loaded
+	 */
+	onLoad: Function,
+	/**
+	 * SVG icon string
+	 */
+	svg: String,
+	/**
+	 * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
+	 * @values string | Array<string>
+	 */
+	modifiers: {
+		type: [String, Array] as PropType<string | string[]>
+	}
+}

package/src/components/VvIcon/VvIcon.vue

@@ -0,0 +1,124 @@
+<template>
+	<Icon
+		v-if="show"
+		:class="iconClass"
+		v-bind="{
+			...$props,
+			provider: currentProvider,
+			icon
+		}" />
+</template>
+
+<script setup lang="ts">
+import type { IVolver } from '../../Volver'
+import { VOLVER_PREFIX } from '../../Volver'
+
+import { inject, toRefs } from 'vue'
+
+import { ref, computed } from 'vue'
+import { Icon, addIcon, iconExists, type IconifyJSON } from '@iconify/vue'
+import { VvIconProps } from './VvIcon'
+
+//Composables
+import { useBemModifiers } from '@/composables/useModifiers'
+
+//Props,emits,slots
+const props = defineProps(VvIconProps)
+
+//Data
+const show = ref(true)
+const { modifiers } = toRefs(props)
+
+//Inject
+const ds = inject<IVolver>(VOLVER_PREFIX)
+
+//Styles & bindings
+const { bemCssClasses: iconClass } = useBemModifiers('vv-icon', {
+	modifiers
+})
+
+const currentProvider = computed(() => {
+	return props.provider || ds?.provider
+})
+
+/**
+ * Icon name
+ */
+const icon = computed(() => {
+	const _name = props.name || ''
+	// compose Iconify icon name format
+	const iconName = `@${currentProvider.value}:${props.prefix}:${props.name}`
+
+	// Check first if icon with "name" exist
+	if (iconExists(_name)) {
+		return _name
+	} else if (iconExists(iconName)) {
+		// Check and return composed icon name if exist
+		return iconName
+	} else {
+		// Check into all collections and set "iconName" data
+		return (
+			ds?.iconsCollections.find((iconsCollection: IconifyJSON) => {
+				const icon = `@${currentProvider.value}:${iconsCollection.prefix}:${_name}`
+				if (iconExists(icon)) {
+					return icon
+				}
+			}) || _name
+		)
+	}
+})
+
+/**
+ * Get SVG content from SVG string
+ * @param {string} svg
+ * @return {SVGSVGElement | null} https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement
+ */
+function getSvgContent(svg: string): SVGSVGElement | null {
+	let dom = null
+	if (typeof window === 'undefined') {
+		// SSR
+		// eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
+		const { JSDOM } = require('jsdom')
+		dom = new JSDOM().window
+	}
+	const domParser = dom ? new dom.DOMParser() : new window.DOMParser()
+	const svgDomString = domParser.parseFromString(svg, 'text/html')
+	const svgEl = svgDomString.querySelector('svg')
+	return svgEl
+}
+
+/**
+ * Add icon to current Iconify provider
+ * @param {string} svg
+ */
+function addIconFromSvg(svg: string) {
+	const svgContentEl: SVGSVGElement | null = getSvgContent(svg)
+	const svgContent = svgContentEl?.innerHTML.trim() || ''
+	if (svgContentEl && svgContent) {
+		addIcon(`@${currentProvider.value}:${props.prefix}:${props.name}`, {
+			body: svgContent,
+			// Set height and width from svg content
+			height: svgContentEl.viewBox.baseVal.height,
+			width: svgContentEl.viewBox.baseVal.width
+		})
+	}
+}
+
+if (ds) {
+	if (props.src) {
+		show.value = false
+		ds.fetchIcon(props.src)
+			.then((svg?: string) => {
+				if (svg) {
+					addIconFromSvg(svg)
+					show.value = true
+				}
+			})
+			.catch((e) => {
+				throw new Error(`During fetch icon: ${e?.message}`)
+			})
+	} else if (props.svg) {
+		addIconFromSvg(props.svg)
+	}
+}
+</script>

package/src/components/VvInputText/VvInputText.ts

@@ -0,0 +1,66 @@
+import type { ExtractPropTypes } from 'vue'
+import {
+	ValidProps,
+	ErrorProps,
+	HintProps,
+	LoadingProps,
+	ModifiersProps,
+	LimitProps
+} from '../../props'
+import { TYPES, ICON_POSITIONS } from './constants'
+
+export const VvInputTextEvents = ['update:modelValue', 'focus', 'blur']
+
+export const VvInputTextProps = {
+	...ValidProps,
+	...ErrorProps,
+	...HintProps,
+	...LoadingProps,
+	...ModifiersProps,
+	...LimitProps,
+	modelValue: null,
+	type: {
+		type: String,
+		default: TYPES.TEXT,
+		validator: (value: string) => Object.values(TYPES).includes(value)
+	},
+	id: String,
+	name: { type: String, required: true },
+	autocomplete: { type: String, default: 'off' },
+	autofocus: Boolean,
+	minlength: Number,
+	maxlength: Number,
+	min: [Number, Date],
+	max: [Number, Date],
+	step: Number,
+	label: String,
+	disabled: Boolean,
+	readonly: Boolean,
+	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,
+	/**
+	 * Se true, attiva la possibilità di cancellare il testo nella textarea
+	 */
+	autoclear: Boolean
+}
+
+type VvInputTextPropsType = typeof VvInputTextProps
+export type VvInputTextPropsTypes = ExtractPropTypes<VvInputTextPropsType>

package/src/components/VvInputText/VvInputText.vue

@@ -0,0 +1,249 @@
+<template>
+	<div v-bind="vvInputTextProps" :class="inputTextClass">
+		<label v-if="label" :for="inputTextId">{{ label }}</label>
+		<div class="vv-input-text__wrapper">
+			<!-- @slot icon-left to replace icon left -->
+			<slot v-if="hasIconLeft" name="icon-left" v-bind="iconSlotProps">
+				<vv-icon class="vv-input-text__icon-left" :name="icon" />
+			</slot>
+			<input
+				ref="input"
+				v-bind="innerInputProps"
+				v-model="inputTextData"
+				@input="emit('input', $event)" />
+			<!-- autoclear text button -->
+			<button
+				v-if="autoclear && textLength > 0"
+				class="vv-button vv-button--ghost"
+				@click="clearInputText">
+				<vv-icon name="clear-field" />
+			</button>
+			<!-- @slot icon-right to replace icon right -->
+			<slot name="icon-right" v-bind="iconSlotProps">
+				<template v-if="isPassword">
+					<PasswordInputActions
+						@action-password-on="showPassword = true"
+						@action-password-off="showPassword = false" />
+				</template>
+				<template v-else-if="isNumber">
+					<NumberInputActions
+						@action-step-up="stepUp"
+						@action-step-down="stepDown" />
+				</template>
+				<template v-else-if="hasIconRight || defaultRightIcon">
+					<vv-icon :name="icon || defaultRightIcon" />
+				</template>
+			</slot>
+			<span v-if="limit" class="vv-input-text__limit">
+				<slot name="limit"> {{ formattedTextLimitLength }} </slot>
+			</span>
+		</div>
+		<HintSlot :id="inputTextDescribedBy" class="vv-input-text__hint" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	computed,
+	useAttrs,
+	useSlots,
+	ref,
+	toRefs,
+	onMounted,
+	unref,
+	type HTMLAttributes,
+	type InputHTMLAttributes
+} from 'vue'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+import { VvInputTextEvents, VvInputTextProps } from './VvInputText'
+
+//Componenti
+import VvIcon from '../../components/VvIcon/VvIcon.vue'
+import HintSlotFactory from '../common/HintSlot'
+import VvInputTextActionsFactory from './VvInputTextActions'
+
+//Constanti
+import INPUT from './constants'
+
+//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(VvInputTextProps)
+const emit = defineEmits(VvInputTextEvents)
+const slots = useSlots()
+const attrs = useAttrs()
+
+//Template References
+const input = ref()
+
+//Data
+const { icon, iconPosition, label, modelValue, autoclear, limit } =
+	toRefs(props)
+const inputTextId = props.id || props.name
+const inputTextLabeledBy = `${props.name}-label`
+const inputTextDescribedBy = `${props.name}-hint`
+//BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
+const inputTextPlaceholder = computed(() =>
+	props.floating && ObjectUtilities.isEmpty(props.placeholder)
+		? ' '
+		: props.placeholder
+)
+
+//Debounce input
+const inputTextData = useDebouncedInput(modelValue, props.debounce, emit)
+
+//Gestione input tipo password
+const showPassword = ref(false)
+const isPassword = computed(() => props.type === INPUT.TYPES.PASSWORD)
+
+//Gestione input tipo NUMBER
+const isNumber = computed(() => props.type === INPUT.TYPES.NUMBER)
+function stepUp() {
+	const _max = props.max as number
+	if (!isActionsDisabled.value && inputTextData.value + 1 <= _max) {
+		input.value.stepUp()
+		inputTextData.value = unref(input.value).value
+	}
+}
+function stepDown() {
+	const _min = props.min as number
+	if (!isActionsDisabled.value && inputTextData.value - 1 <= _min) {
+		input.value.stepDown()
+		inputTextData.value = unref(input.value).value
+	}
+}
+
+//Gestione ICONE
+const { hasIconLeft, hasIconRight } = useComponentIcon(icon, iconPosition, {
+	iconLeft: slots['icon-left'],
+	iconRight: slots['icon-right']
+})
+const defaultRightIcon = computed(() => {
+	switch (props.type) {
+		case INPUT.TYPES.PASSWORD:
+			return INPUT.TYPES_ICON.PASSWORD_OFF
+		case INPUT.TYPES.COLOR:
+			return INPUT.TYPES_ICON.COLOR
+		case INPUT.TYPES.DATE:
+		case INPUT.TYPES.DATETIME_LOCAL:
+			return INPUT.TYPES_ICON.DATE
+		case INPUT.TYPES.TIME:
+			return INPUT.TYPES_ICON.TIME
+		case INPUT.TYPES.SEARCH:
+			return INPUT.TYPES_ICON.SEARCH
+		default:
+			return ''
+	}
+})
+
+//Conteggio battute
+const { textLength, formattedTextLimitLength } = useTextLimit(inputTextData, {
+	mode: props.limit,
+	upperLimit: props.maxlength || 0
+})
+
+//Input FOCUS
+const { focused } = useComponentFocus(input, emit)
+
+//Component computed
+const isActionsDisabled = computed(() => props.disabled || props.readonly)
+
+//Styles & Bindings
+const inputTextClass = computed(() => {
+	const _hasIconRigth =
+		hasIconRight.value || ObjectUtilities.isNotEmpty(defaultRightIcon.value)
+	const _isFloating =
+		props.floating && ObjectUtilities.isNotEmpty(props.label)
+	const _isDirty = ObjectUtilities.isNotEmpty(modelValue?.value)
+
+	return [
+		toBem('vv-input-text', {
+			modifiers: props.modifiers,
+			readonly: props.readonly,
+			valid: props.valid,
+			invalid: props.error,
+			loading: props.loading,
+			iconLeft: hasIconLeft,
+			iconRight: _hasIconRigth,
+			floating: _isFloating,
+			dirty: _isDirty
+		}),
+		attrs.class
+	]
+})
+const vvInputTextProps = computed(() => {
+	const { style } = attrs
+	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
+		k.startsWith('data-')
+	)
+	return {
+		style,
+		...dataAttrs
+	} as HTMLAttributes
+})
+const innerInputProps = computed(() => {
+	const _type = isPassword.value && showPassword.value ? 'text' : props.type
+	const ariaAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
+		k.startsWith('aria-')
+	)
+
+	return {
+		id: inputTextId,
+		type: _type,
+		placeholder: inputTextPlaceholder.value,
+		name: props.name,
+		autocomplete: props.autocomplete,
+		disabled: props.disabled,
+		readonly: props.readonly,
+		minlength: props.minlength,
+		maxlength: props.maxlength,
+		min: props.min,
+		max: props.max,
+		step: props.step,
+		'aria-invalid': props.error,
+		'aria-valid': !props.valid,
+		'aria-labeledby': inputTextLabeledBy,
+		'aria-describedby': inputTextDescribedBy,
+		'aria-errormessage': inputTextDescribedBy,
+		...ariaAttrs
+	} as InputHTMLAttributes
+})
+
+//Slot props
+const iconSlotProps = computed(() => {
+	const { modelValue, valid, error } = props
+	return {
+		valid,
+		error,
+		modelValue
+	}
+})
+
+//Other components
+const HintSlot = HintSlotFactory(props, slots)
+const PasswordInputActions = VvInputTextActionsFactory(
+	INPUT.TYPES.PASSWORD,
+	props
+)
+const NumberInputActions = VvInputTextActionsFactory(INPUT.TYPES.NUMBER, props)
+
+//Methods
+function clearInputText() {
+	inputTextData.value = null
+}
+
+onMounted(() => {
+	if (props.autofocus) focused.value = true
+})
+</script>
+
+<script lang="ts">
+export default {
+	inheritAttrs: false
+}
+</script>