@volverjs/ui-vue 0.0.1-beta.11

package/src/components/VvInputText/VvInputTextActions.ts

@@ -0,0 +1,151 @@
+/* eslint-disable vue/one-component-per-file */
+import type { VvInputTextPropsTypes } from './VvInputText'
+import { computed, type Component } from 'vue'
+
+import { h, ref, defineComponent } from 'vue'
+import VvIcon from '../VvIcon/VvIcon.vue'
+import { TYPES, TYPES_ICON } from './constants'
+
+const VvInputPasswordAction = defineComponent({
+	components: {
+		VvIcon
+	},
+	props: {
+		disabled: Boolean
+	},
+	setup(props, { emit }) {
+		const active = ref(false)
+		const activeIcon = computed(() =>
+			active.value ? TYPES_ICON.PASSWORD_OFF : TYPES_ICON.PASSWORD_ON
+		)
+
+		function onClick() {
+			if (!props.disabled) {
+				active.value = !active.value
+				emit(
+					active.value ? 'action-password-on' : 'action-password-off'
+				)
+			}
+		}
+
+		return {
+			activeIcon,
+			onClick
+		}
+	},
+	render() {
+		const icon = h(VvIcon, { name: this.activeIcon })
+
+		return h(
+			'button',
+			{
+				disabled: this.disabled,
+				class: ['vv-input-text__action'],
+				onClick: this.onClick
+			},
+			icon
+		)
+	}
+})
+const VvInputStepAction = defineComponent({
+	components: {
+		VvIcon
+	},
+	props: {
+		disabled: Boolean,
+		mode: {
+			type: String,
+			validator: (v: string) => ['up', 'down'].includes(v),
+			default: 'up'
+		}
+	},
+	setup(props, { emit }) {
+		function onClick() {
+			if (!props.disabled) {
+				emit(
+					props.mode === 'up' ? 'action-step-up' : 'action-step-down'
+				)
+			}
+		}
+
+		return {
+			onClick
+		}
+	},
+	render() {
+		return h('button', {
+			class: [
+				'vv-input-text__action-chevron',
+				this.mode === 'up' && 'vv-input-text__action-chevron-up'
+			],
+			disabled: this.disabled,
+			onClick: this.onClick
+		})
+	}
+})
+
+export default function VvInputTextActionsFactory(
+	type: string,
+	parentProps: VvInputTextPropsTypes
+): Component {
+	return {
+		name: 'VvInputTextActions',
+		components: {
+			VvIcon,
+			VvInputPasswordAction,
+			VvInputStepAction
+		},
+		setup() {
+			const isDisabled = computed(() => {
+				return parentProps.disabled || parentProps.readonly
+			})
+
+			return {
+				isDisabled
+			}
+		},
+		render() {
+			let _actions = null
+			switch (type) {
+				case TYPES.PASSWORD: {
+					const { onActionPasswordOn, onActionPasswordOff } =
+						this.$attrs
+					_actions = [
+						h(VvInputPasswordAction, {
+							disabled: this.isDisabled,
+							onActionPasswordOn,
+							onActionPasswordOff
+						})
+					]
+					break
+				}
+				case TYPES.NUMBER: {
+					const { onActionStepUp, onActionStepDown } = this.$attrs
+					_actions = [
+						h(VvInputStepAction, {
+							mode: 'up',
+							disabled: this.isDisabled,
+							onActionStepUp,
+							onActionStepDown
+						}),
+						h(VvInputStepAction, {
+							mode: 'down',
+							disabled: this.isDisabled,
+							onActionStepUp,
+							onActionStepDown
+						})
+					]
+					break
+				}
+				default: {
+					_actions = null
+					break
+				}
+			}
+
+			return Array.isArray(_actions)
+				? h('div', { class: 'vv-input-text__actions-group' }, _actions)
+				: _actions
+		}
+	}
+}

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/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]
+}

package/src/components/VvNativeSelect/VvNativeSelect.vue

@@ -0,0 +1,106 @@
+<template>
+	<div :class="selectClasses">
+		<label v-if="label" :for="id">{{ label }}</label>
+		<!-- #region native select -->
+		<div class="vv-select__wrapper">
+			<slot name="icon-left">
+				<vv-icon v-if="iconLeft" :name="iconLeft" />
+			</slot>
+			<select
+				:id="id"
+				:value="
+					typeof modelValue === 'string'
+						? modelValue
+						: modelValue?.[valueKey]
+				"
+				:disabled="disabled || readonly"
+				@input="onInput">
+				<option v-if="placeholder" value="" disabled selected>
+					{{ placeholder }}
+				</option>
+				<option
+					v-for="(option, index) in options"
+					:key="index"
+					:disabled="
+						typeof option === 'object'
+							? option.disabled ?? disabled
+							: disabled
+					"
+					:value="getValue(option)">
+					{{ getLabel(option) }}
+				</option>
+			</select>
+			<slot name="icon-right">
+				<vv-icon v-if="iconRight" :name="iconRight" />
+			</slot>
+		</div>
+		<!-- #endregion native select -->
+		<HintSlot class="vv-select__hint" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, toRefs, useSlots } from 'vue'
+import { v4 as uuidv4 } from 'uuid'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+import { VvNativeSelectProps, type Option } from './VvNativeSelect'
+import VvIcon from '../VvIcon/VvIcon.vue'
+import HintSlotFactory from '../common/HintSlot'
+import { useBemModifiers } from '../../composables/useModifiers'
+
+const props = defineProps(VvNativeSelectProps)
+const slots = useSlots()
+const emit = defineEmits(['update:modelValue'])
+//Hint component
+const HintSlot = HintSlotFactory(props, slots)
+
+// data
+const {
+	modifiers,
+	disabled,
+	readonly,
+	loading,
+	iconLeft,
+	iconRight,
+	error,
+	valid
+} = toRefs(props)
+
+const id = uuidv4()
+
+//Styles & css classes modifiers
+const { bemCssClasses: selectClasses } = useBemModifiers('vv-select', {
+	modifiers,
+	loading,
+	readonly,
+	iconLeft,
+	iconRight,
+	valid,
+	invalid: error,
+	dirty: computed(() => ObjectUtilities.isNotEmpty(props.modelValue))
+})
+
+function getValue(option: string | Option) {
+	return typeof option === 'string' ? option : option[props.valueKey]
+}
+
+function getLabel(option: string | Option) {
+	return typeof option === 'string' ? option : option[props.labelKey]
+}
+
+function onInput(event: Event) {
+	const target = event.target as HTMLSelectElement
+
+	// Find option object if useObject prop is true
+	const valueObject = props.useObject
+		? props.options?.find(
+				(option) => (option as Option)[props.valueKey] == target.value
+		  )
+		: null
+
+	// use valueObject if exist or the target value
+	const value = valueObject || target.value
+
+	emit('update:modelValue', value)
+}
+</script>

package/src/components/VvProgress/VvProgress.ts

@@ -0,0 +1,28 @@
+import { ModifiersProps } from '../../props'
+
+export const VvProgressProps = {
+	...ModifiersProps,
+	/**
+	 * Progress value
+	 */
+	value: {
+		type: [Number, String]
+	},
+	/**
+	 * Progress max value
+	 */
+	max: {
+		type: [Number, String]
+	},
+	/**
+	 * Progress label
+	 */
+	ariaLabel: {
+		type: String,
+		default: 'progress-bar'
+	},
+	/**
+	 * determinate attribute
+	 */
+	determinate: { type: Boolean, default: false }
+}

package/src/components/VvProgress/VvProgress.vue

@@ -0,0 +1,34 @@
+<template>
+	<progress ref="progress" aria-label="progressbar" v-bind="properties" />
+</template>
+
+<script setup lang="ts">
+import { useBemModifiers } from '../../composables/useModifiers'
+import { computed, toRefs } from 'vue'
+import { VvProgressProps } from './VvProgress'
+
+//Props, emits, slots, attrs
+const props = defineProps(VvProgressProps)
+
+// data
+const { modifiers } = toRefs(props)
+
+//Styles & bindings
+const { bemCssClasses: progressClass } = useBemModifiers('vv-progress', {
+	modifiers,
+	indeterminate: computed(() => !props.determinate)
+})
+
+/**
+ * Compute component properties
+ */
+const properties = computed(() => {
+	return {
+		'aria-label': props.ariaLabel,
+		role: 'progressbar',
+		class: progressClass.value,
+		value: props.value,
+		max: props.max
+	}
+})
+</script>

package/src/components/VvRadio/VvRadio.ts

@@ -0,0 +1,25 @@
+import type { ExtractPropTypes } from 'vue'
+import { ValidProps, ErrorProps } from '../../props'
+
+export const VvRadioProps = {
+	...ValidProps,
+	...ErrorProps,
+	/**
+	 * Valore del radio
+	 */
+	value: null,
+	modelValue: { type: [Object, Number, Boolean, String] },
+	label: { type: String, default: '' },
+	disabled: Boolean,
+	readonly: Boolean
+}
+
+export const VvRadioEvents = [
+	'click',
+	'update:modelValue',
+	'change',
+	'focus',
+	'blur'
+]
+
+export type VvRadioPropsType = ExtractPropTypes<typeof VvRadioProps>

package/src/components/VvRadio/VvRadio.vue

@@ -0,0 +1,130 @@
+<template>
+	<label :class="radioClass" v-bind="radioAttrs" @click="onClick">
+		<input
+			ref="input"
+			:class="radioInputClass"
+			v-bind="radioInputAttrs"
+			@input="onChange" />
+		<slot :value="modelValue">
+			{{ label }}
+		</slot>
+	</label>
+</template>
+
+<script setup lang="ts">
+import type { InputHTMLAttributes, LabelHTMLAttributes } from 'vue'
+
+import { computed, useAttrs, ref } from 'vue'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+import { VvRadioProps, VvRadioEvents } from './VvRadio'
+
+//Composables
+import { toRadioInputRefs } from './useRadioProps'
+import { useComponentFocus } from '../../composables/focus/useComponentFocus'
+import { useBemModifiers } from '@/composables/useModifiers'
+
+//Props, Emits, Slots e Attrs
+const props = defineProps(VvRadioProps)
+const emit = defineEmits(VvRadioEvents)
+const attrs = useAttrs()
+
+//Data
+const { disabled, readonly, modelValue, valid, error } = toRadioInputRefs(
+	props,
+	emit
+)
+
+//Template References
+const input = ref()
+
+//Component computed
+const isChecked = computed(() => {
+	return Array.isArray(modelValue.value)
+		? ObjectUtilities.contains(props.value, modelValue.value)
+		: ObjectUtilities.equals(props.value, modelValue.value)
+})
+
+// #region FOCUS
+const { focused } = useComponentFocus(input, emit)
+// #endregion FOCUS
+
+//Styles & Bindings
+const { bemCssClasses: bemRadioClass } = useBemModifiers('vv-input-radio', {
+	valid,
+	invalid: error
+})
+const { bemCssClasses: bemInputRadioClass } = useBemModifiers(
+	'vv-input-radio__input',
+	{
+		checked: isChecked,
+		disabled,
+		readonly
+	}
+)
+const radioClass = computed(() => {
+	const { class: cssClass } = attrs
+	return {
+		class: cssClass,
+		...bemRadioClass.value
+	}
+})
+const radioInputClass = computed(() => {
+	return {
+		'focus-visible': focused.value,
+		...bemInputRadioClass.value
+	}
+})
+const radioAttrs = computed(() => {
+	const { id, name, style } = attrs
+	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
+		k.startsWith('data-')
+	)
+	return {
+		for: (id || name) as string,
+		style,
+		...dataAttrs
+	} as LabelHTMLAttributes
+})
+const radioInputAttrs = computed(() => {
+	const { id = '', name = '' } = attrs as InputHTMLAttributes
+	return {
+		type: 'radio',
+		id: id || name,
+		name,
+		value: props.value,
+		disabled: disabled.value,
+		readonly: readonly.value,
+		checked: isChecked.value,
+		...radioInputAriaAttrs.value
+	} as InputHTMLAttributes
+})
+const radioInputAriaAttrs = computed(() => {
+	const { name } = attrs
+	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
+		k.startsWith('aria-')
+	)
+	return {
+		'aria-label': name,
+		'aria-checked': isChecked.value,
+		...dataAttrs
+	}
+})
+
+//Methods
+function onChange() {
+	if (!isChecked.value) emit('change', props.value)
+	modelValue.value = props.value
+}
+function onClick(event: Event) {
+	if (!disabled.value) {
+		emit('click', event)
+		focused.value = true
+	}
+}
+</script>
+
+<script lang="ts">
+export default {
+	inheritAttrs: false
+}
+</script>

package/src/components/VvRadio/useRadioProps.ts

@@ -0,0 +1,40 @@
+import type { VvRadioPropsType } from '../VvRadio/VvRadio'
+import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
+
+import { toRefs } from 'vue'
+
+//Composables
+import { useInjectedGroupState } from '../../composables/group/useInjectedGroupState'
+
+//Constasts
+import { VV_RADIO_GROUP } from '../../constants'
+
+/**
+ * Estreae tutte le prop del componente VvButton che possono essere
+ * "sovrascritte" quando il buttone si trova in un gruppo.
+ */
+export function toRadioInputRefs(
+	props: VvRadioPropsType,
+	emit: (event: any, ...args: any[]) => void
+) {
+	const { group, isInGroup, getGroupOrLocalRef } =
+		useInjectedGroupState<IInputGroupState>(VV_RADIO_GROUP)
+
+	//Local props
+	const { valid, error } = toRefs(props)
+
+	//Global props
+	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
+	const readonly = getGroupOrLocalRef('readonly', props)
+	const disabled = getGroupOrLocalRef('disabled', props)
+
+	return {
+		group,
+		isInGroup,
+		valid,
+		error,
+		modelValue,
+		readonly,
+		disabled
+	}
+}

package/src/components/VvRadioGroup/VvRadioGroup.ts

@@ -0,0 +1,25 @@
+import { ValidProps, ErrorProps, OptionsProps, HintProps } from '../../props'
+
+export const VvRadioGroupEvents = ['update:modelValue']
+
+export const VvRadioGroupProps = {
+	...ValidProps,
+	...ErrorProps,
+	...OptionsProps,
+	...HintProps,
+	/**
+	 * VModel
+	 */
+	modelValue: null,
+	label: { type: String, default: '' },
+	/**
+	 * Nome da utilizzare per il radio group
+	 */
+	name: { type: String, default: '', required: true },
+	disabled: { type: Boolean, default: false },
+	readonly: { type: Boolean, default: false },
+	/**
+	 * True = show buttons vertically
+	 */
+	vertical: { type: Boolean, default: false }
+}