@volverjs/ui-vue 0.0.1-beta.2

package/src/components/VvIcon/VvIcon.vue

@@ -0,0 +1,123 @@
+<template>
+	<Icon
+		v-if="show"
+		:class="iconClass"
+		v-bind="{
+			...$props,
+			provider: currentProvider,
+			icon
+		}" />
+</template>
+
+<script setup lang="ts">
+import type { IDesignSystem } from '../../DesignSystem'
+
+import { inject, toRefs } from 'vue'
+
+import { ref, computed } from 'vue'
+import { Icon, addIcon, iconExists } 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<IDesignSystem>('ds')
+
+//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) => {
+				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,49 @@
+import { ValidProps, ErrorProps, HintProps, LoadingProps } from '../../props'
+import { TYPES, ICON_POSITIONS } from './constants'
+
+export const VvInputTextEvents = ['update:modelValue', 'focus', 'blur']
+
+export const VvInputTextProps = {
+	...ValidProps,
+	...ErrorProps,
+	...HintProps,
+	...LoadingProps,
+	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
+}

package/src/components/VvInputText/VvInputText.vue

@@ -0,0 +1,276 @@
+<template>
+	<div v-bind="vvInputTextProps" :class="vvInputInputClass">
+		<label v-if="label" :for="innerInputProps.id">{{ 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)" />
+			<!-- @slot icon-right to replace icon right -->
+			<slot name="icon-right" v-bind="iconSlotProps">
+				<!-- default password icon -->
+				<template v-if="isPassword">
+					<div class="vv-input-text__actions-group">
+						<button
+							class="vv-input-text__action"
+							:disabled="isActionsDisabled"
+							@click.prevent="toggleShowHidePassword">
+							<vv-icon :name="inputRightIcon" />
+						</button>
+					</div>
+				</template>
+				<!-- default number icon -->
+				<template v-else-if="isNumber">
+					<div class="vv-input-text__actions-group">
+						<button
+							type="button"
+							class="vv-input-text__action-chevron vv-input-text__action-chevron-up"
+							:disabled="isActionsDisabled"
+							@click.prevent="stepUp()"></button>
+						<button
+							type="button"
+							class="vv-input-text__action-chevron"
+							:disabled="isActionsDisabled"
+							@click.prevent="stepDown()"></button>
+					</div>
+				</template>
+				<!-- default icon -->
+				<template v-else>
+					<vv-icon :name="inputRightIcon" />
+				</template>
+			</slot>
+		</div>
+		<HintSlot
+			:id="inputAriaAttrs['aria-describedby']"
+			class="vv-input-text__hint" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	computed,
+	useAttrs,
+	useSlots,
+	ref,
+	toRefs,
+	onMounted,
+	watch,
+	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'
+
+//Constanti
+import INPUT from './constants'
+
+//Composables
+import { refDebounced } from '@vueuse/core'
+import { useInputPassword } from './useInputPassword'
+import { useInputNumber } from './useInputNumber'
+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(VvInputTextProps)
+const emit = defineEmits(VvInputTextEvents)
+const slots = useSlots()
+const attrs = useAttrs()
+
+//Template References
+const input = ref()
+
+//Data
+const inputTextData = ref(props.modelValue)
+const {
+	disabled,
+	readonly,
+	type,
+	icon,
+	iconPosition,
+	valid,
+	error,
+	loading,
+	floating,
+	label,
+	modelValue
+} = toRefs(props)
+
+//Component computed
+const isActionsDisabled = computed(() => disabled.value || readonly.value)
+
+//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)
+const inputRightIcon = computed(() => {
+	if (hasIconRight.value) return props.icon
+
+	switch (props.type) {
+		case INPUT.TYPES.PASSWORD:
+			return passwordButtonIcon.value
+		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 ''
+	}
+})
+
+//Gestione input tipo password
+const inputPswProps = {
+	type,
+	disabled,
+	readonly
+}
+const {
+	isPassword,
+	isPasswordVisible,
+	passwordButtonIcon,
+	toggleShowHidePassword
+} = useInputPassword(inputPswProps)
+
+//Gestione input tipo NUMBER
+const inputNumberProps = {
+	disabled,
+	readonly,
+	type,
+	inputTemplateRef: input
+}
+const { isNumber, stepUp, stepDown } = useInputNumber(
+	inputTextData,
+	inputNumberProps
+)
+
+//Input FOCUS
+const { focused } = useComponentFocus(input, emit)
+
+//Styles & Bindings
+const { bemCssClasses: bemInputClass } = useBemModifiers('vv-input-text', {
+	readonly,
+	valid,
+	invalid: error,
+	loading,
+	iconLeft: hasIconLeft,
+	iconRight: computed(() => ObjectUtilities.isNotEmpty(inputRightIcon.value)),
+	floating: computed(
+		() => floating.value && ObjectUtilities.isNotEmpty(label?.value)
+	),
+	dirty: computed(() => ObjectUtilities.isNotEmpty(modelValue))
+})
+const vvInputInputClass = computed(() => {
+	const { class: cssClass } = attrs
+	return {
+		class: cssClass,
+		...bemInputClass.value
+	}
+})
+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 {
+		id,
+		name,
+		type,
+		autocomplete,
+		minlength,
+		maxlength,
+		min,
+		max,
+		step,
+		disabled,
+		readonly,
+		floating,
+		placeholder
+	} = props
+
+	const _id = id || name
+	const _type = isPassword.value && isPasswordVisible.value ? 'text' : type
+	//BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
+	const _placeholder =
+		floating && ObjectUtilities.isEmpty(placeholder) ? ' ' : placeholder
+
+	return {
+		id: _id,
+		type: _type,
+		placeholder: _placeholder,
+		name,
+		autocomplete,
+		disabled,
+		readonly,
+		minlength,
+		maxlength,
+		min,
+		max,
+		step,
+		...inputAriaAttrs.value
+	} as InputHTMLAttributes
+})
+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/VvInputText/constants.ts

@@ -0,0 +1,34 @@
+export const TYPES = {
+	TEXT: 'text',
+	PASSWORD: 'password',
+	DATE: 'date',
+	DATETIME_LOCAL: 'datetime-local',
+	NUMBER: 'number',
+	TIME: 'time',
+	EMAIL: 'email',
+	TEL: 'tel',
+	URL: 'url',
+	COLOR: 'color',
+	SEARCH: 'search',
+	FILE: 'file'
+}
+
+export const ICON_POSITIONS = {
+	LEFT: 'left',
+	RIGHT: 'right'
+}
+
+export const TYPES_ICON = {
+	PASSWORD_ON: 'eye-on',
+	PASSWORD_OFF: 'eye-off',
+	DATE: 'calendar',
+	TIME: 'time',
+	COLOR: 'color',
+	SEARCH: 'search'
+}
+
+export default {
+	TYPES,
+	ICON_POSITIONS,
+	TYPES_ICON
+}

package/src/components/VvInputText/useInputNumber.ts

@@ -0,0 +1,40 @@
+import type { Ref } from 'vue'
+import { computed, unref } from 'vue'
+import INPUT from './constants'
+
+interface useVvInputNumberProps {
+	type: Ref<string>
+	disabled: Ref<boolean>
+	readonly: Ref<boolean>
+	inputTemplateRef: Ref<HTMLInputElement>
+}
+
+/**
+ * Funzionalità input number
+ */
+export function useInputNumber(
+	inputModelValue: Ref<any>,
+	options: useVvInputNumberProps
+) {
+	const { type, disabled, readonly, inputTemplateRef } = options
+	const isNumber = computed(() => type.value === INPUT.TYPES.NUMBER)
+
+	function stepUp() {
+		if (!disabled.value && !readonly.value) {
+			inputTemplateRef.value.stepUp()
+			inputModelValue.value = unref(inputTemplateRef.value).value
+		}
+	}
+	function stepDown() {
+		if (!disabled.value && !readonly.value) {
+			inputTemplateRef.value.stepDown()
+			inputModelValue.value = unref(inputTemplateRef.value).value
+		}
+	}
+
+	return {
+		isNumber,
+		stepUp,
+		stepDown
+	}
+}

package/src/components/VvInputText/useInputPassword.ts

@@ -0,0 +1,38 @@
+import type { Ref } from 'vue'
+import { ref, computed } from 'vue'
+import INPUT from './constants'
+
+interface useVvInputPasswordProps {
+	type: Ref<string>
+	disabled: Ref<boolean>
+	readonly: Ref<boolean>
+}
+
+/**
+ * Funzionalità input password.
+ */
+export function useInputPassword(props: useVvInputPasswordProps) {
+	const { type, disabled, readonly } = props
+	const bHidePassword = ref(true)
+
+	const isPassword = computed(() => type.value === INPUT.TYPES.PASSWORD)
+	const isPasswordVisible = computed(() => !bHidePassword.value)
+	const passwordButtonIcon = computed(() =>
+		isPasswordVisible.value
+			? INPUT.TYPES_ICON.PASSWORD_OFF
+			: INPUT.TYPES_ICON.PASSWORD_ON
+	)
+
+	function toggleShowHidePassword() {
+		if (!disabled.value && !readonly.value) {
+			bHidePassword.value = !bHidePassword.value
+		}
+	}
+
+	return {
+		isPassword,
+		isPasswordVisible,
+		passwordButtonIcon,
+		toggleShowHidePassword
+	}
+}

package/src/components/VvNativeSelect/VvNativeSelect.ts

@@ -0,0 +1,70 @@
+import type { PropType } from 'vue'
+import {
+	ValidProps,
+	ErrorProps,
+	HintProps,
+	LoadingProps,
+	DisabledProps,
+	ReadonlyProps,
+	ModifiersProps
+} from '../../props'
+
+export interface Option {
+	[key: string]: any
+}
+
+export const VvNativeSelectProps = {
+	...ValidProps,
+	...ErrorProps,
+	...HintProps,
+	...LoadingProps,
+	...DisabledProps,
+	...ReadonlyProps,
+	...ModifiersProps,
+	/**
+	 * modelValue can be an Object, a String or an Array of Object/String
+	 */
+	modelValue: {
+		type: [String, Object],
+		required: true
+	},
+	/**
+	 * Select input label
+	 */
+	label: String,
+	/**
+	 * Select input placeholder
+	 */
+	placeholder: String,
+	/**
+	 * Select options, can be an Array of string or an array of objects
+	 */
+	options: {
+		type: Array as PropType<Array<Option | string>>,
+		required: true
+	},
+	/**
+	 * Use objects as modelValue (object or object[])
+	 */
+	useObject: Boolean,
+	/**
+	 * 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,
+	/**
+	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-native-select--'
+	 */
+	modifiers: [String, Array]
+}