@volverjs/ui-vue 0.0.1-beta.2

package/src/components/VvCheck/VvCheck.vue

@@ -0,0 +1,149 @@
+<template>
+	<label :class="checkClass" v-bind="checkAttrs" @click="onClick">
+		<input
+			ref="input"
+			:class="checkInputClass"
+			v-bind="checkInputAttrs"
+			@input="onChange" />
+		<!-- @slot Use this slot for check label -->
+		<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 { VvCheckProps, VvCheckEvents } from './VvCheck'
+
+//Composables
+import { toCheckInputRefs } from './useCheckProps'
+import { useComponentFocus } from '../../composables/focus/useComponentFocus'
+import { useBemModifiers } from '@/composables/useModifiers'
+
+//Props, Emits, Slots e Attrs
+const props = defineProps(VvCheckProps)
+const emit = defineEmits(VvCheckEvents)
+const attrs = useAttrs()
+
+//Data
+const { disabled, readonly, valid, error, propsSwitch, modelValue } =
+	toCheckInputRefs(props, emit)
+
+//Template References
+const input = ref()
+
+// FOCUS
+const { focused } = useComponentFocus(input, emit)
+
+//Component computed
+const isChecked = computed(() => {
+	if (props.binary)
+		return ObjectUtilities.equals(modelValue.value, props.trueValue)
+
+	return Array.isArray(modelValue.value)
+		? ObjectUtilities.contains(props.value, modelValue.value)
+		: ObjectUtilities.equals(props.value, modelValue.value)
+})
+
+// Styles & Bindings
+const { bemCssClasses: bemCheckClass } = useBemModifiers('vv-input-checkbox', {
+	switch: propsSwitch,
+	valid,
+	invalid: error
+})
+const { bemCssClasses: bemCheckInputClass } = useBemModifiers(
+	'vv-input-check__input',
+	{
+		checked: isChecked,
+		disabled,
+		readonly
+	}
+)
+const checkClass = computed(() => {
+	const cssClass = attrs.class as string
+	return {
+		[cssClass]: true,
+		...bemCheckClass.value
+	}
+})
+const checkInputClass = computed(() => {
+	return {
+		...bemCheckInputClass.value,
+		'focus-visible': focused.value
+	}
+})
+const checkAttrs = 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 checkInputAttrs = computed(() => {
+	const { id = '', name = '' } = attrs
+	return {
+		type: 'checkbox',
+		id: id || name,
+		name,
+		value: props.value,
+		disabled: disabled.value,
+		readonly: readonly.value,
+		checked: isChecked.value,
+		...checkInputAriaAttrs.value
+	} as InputHTMLAttributes
+})
+const checkInputAriaAttrs = 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 (props.binary) {
+		modelValue.value = isChecked.value ? props.falseValue : props.trueValue
+		return
+	}
+
+	if (modelValue.value === null) {
+		modelValue.value = [props.value]
+		return
+	}
+
+	if (Array.isArray(modelValue.value)) {
+		modelValue.value = !isChecked.value
+			? [...modelValue.value, props.value]
+			: ObjectUtilities.removeFromList(props.value, modelValue.value)
+		return
+	}
+
+	console.warn('Cannot change value - VvCheck modelValue is not an array')
+}
+function onClick(event: MouseEvent | undefined) {
+	if (!disabled.value) {
+		emit('click', event)
+		emit('change', isChecked.value ? props.value : null)
+		focused.value = true
+	}
+}
+</script>
+
+<script lang="ts">
+export default {
+	inheritAttrs: false
+}
+</script>

package/src/components/VvCheck/useCheckProps.ts

@@ -0,0 +1,41 @@
+import type { VvCheckPropsTypes } from './VvCheck'
+import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
+
+import { toRefs } from 'vue'
+
+//Composables
+import { useInjectedGroupState } from '../../composables/group/useInjectedGroupState'
+
+//Constasts
+import { VV_CHECK_GROUP } from '../../constants'
+
+/**
+ * Estreae tutte le prop del componente VvButton che possono essere
+ * "sovrascritte" quando il buttone si trova in un gruppo.
+ */
+export function toCheckInputRefs(
+	props: VvCheckPropsTypes,
+	emit: (event: any, ...args: any[]) => void
+) {
+	const { group, isInGroup, getGroupOrLocalRef } =
+		useInjectedGroupState<IInputGroupState>(VV_CHECK_GROUP)
+
+	//Local props
+	const { valid, error, switch: propsSwitch } = 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,
+		propsSwitch,
+		modelValue,
+		readonly,
+		disabled
+	}
+}

package/src/components/VvCheckGroup/VvCheckGroup.ts

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

package/src/components/VvCheckGroup/VvCheckGroup.vue

@@ -0,0 +1,84 @@
+<template>
+	<fieldset :class="groupClass">
+		<legend v-if="label" v-text="label" />
+		<div class="vv-input-checkbox-group__wrapper">
+			<!-- #region options set up -->
+			<template v-if="options.length > 0">
+				<vv-check
+					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-checkbox-group__hint" />
+	</fieldset>
+</template>
+
+<script setup lang="ts">
+import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
+
+import { useSlots, computed, toRefs } from 'vue'
+import { VvCheckGroupProps, VvCheckGroupEvents } from './VvCheckGroup'
+
+//Costanti
+import { VV_CHECK_GROUP } from '../../constants'
+
+//Composables
+import { useVModel } from '@vueuse/core'
+import { useProvideGroupState } from '../../composables/group/useProvideGroupState'
+import { useOptions } from '../../composables/options/useOptions'
+import { useBemModifiers } from '@/composables/useModifiers'
+
+//Components
+import VvCheck from '../../components/VvCheck/VvCheck.vue'
+import { HintSlotFactory } from '../common/HintSlot'
+
+//Props, Emits, Slots e Attrs
+const props = defineProps(VvCheckGroupProps)
+const emit = defineEmits(VvCheckGroupEvents)
+const slots = useSlots()
+
+//Data
+const modelValue = useVModel(props, 'modelValue', emit)
+const { disabled, readonly, error, valid } = toRefs(props)
+
+// #region group
+const groupState: IInputGroupState = {
+	key: VV_CHECK_GROUP,
+	modelValue,
+	disabled,
+	readonly
+}
+useProvideGroupState(groupState)
+// #endregion group
+
+// OPTIONS
+const { getOptionLabel, getOptionValue } = useOptions(props)
+
+//Styles & Bindings
+const { bemCssClasses: groupClass } = useBemModifiers(
+	'vv-input-checkbox-group',
+	{
+		horizontal: computed(() => !props.vertical),
+		valid,
+		invalid: error
+	}
+)
+
+//Methods
+const 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/VvDialog/VvDialog.ts

@@ -0,0 +1,17 @@
+import { VV_DIALOG_SIZES } from './constants'
+
+export const VvDialogEvents = ['open', 'close', 'update:open']
+
+export const VvDialogProps = {
+	id: { type: String, required: true },
+	title: String,
+	open: Boolean,
+	transition: { type: String, default: 'fade-block' },
+	size: {
+		type: String,
+		default: VV_DIALOG_SIZES.normal,
+		validator: (value: string) =>
+			Object.values(VV_DIALOG_SIZES).includes(value)
+	},
+	autoClose: { type: Boolean, default: true }
+}

package/src/components/VvDialog/VvDialog.vue

@@ -0,0 +1,91 @@
+<template>
+	<Transition :name="transitioName" v-on="dialogTransitionHandlers">
+		<dialog v-show="openDialog" v-bind="dialogAttrs" :class="dialogClass">
+			<article ref="modalWrapper" class="vv-dialog__wrapper">
+				<header v-if="$slots.header || title" class="vv-dialog__header">
+					<slot name="header">
+						{{ title }}
+						<button
+							type="button"
+							aria-label="Close"
+							class="vv-dialog__close"
+							@click.prevent="closeDialog">
+							<vv-icon name="close" />
+						</button>
+					</slot>
+				</header>
+				<div class="vv-dialog__content">
+					<!-- @slot default -->
+					<slot />
+				</div>
+				<footer v-if="$slots.footer" class="vv-dialog__footer">
+					<slot name="footer" />
+				</footer>
+			</article>
+		</dialog>
+	</Transition>
+</template>
+
+<script setup lang="ts">
+import type { DialogHTMLAttributes } from 'vue'
+
+import { computed, ref } from 'vue'
+import { useVModel, onClickOutside } from '@vueuse/core'
+import { VvDialogEvents, VvDialogProps } from './VvDialog'
+
+//Components
+import VvIcon from '../VvIcon/VvIcon.vue'
+
+//Constants
+import { VV_DIALOG_SIZES } from './constants'
+
+//Props, emits, slots, attrs
+const props = defineProps(VvDialogProps)
+const emit = defineEmits(VvDialogEvents)
+
+//Data
+const openDialog = useVModel(props, 'open', emit)
+const htmlAttrIsOpen = ref(true)
+
+//Template reference
+const modalWrapper = ref(null)
+
+//Style e binding
+const dialogAttrs = computed(() => {
+	const { id } = props
+	return {
+		id,
+		open: htmlAttrIsOpen.value
+	} as DialogHTMLAttributes
+})
+const dialogClass = computed(() => {
+	return {
+		'vv-dialog': true,
+		'vv-dialog--small': props.size === VV_DIALOG_SIZES.small,
+		'vv-dialog--fullscreen': props.size === VV_DIALOG_SIZES.fullscreen
+	}
+})
+
+//Transitions
+const transitioName = computed(() => `vv-dialog--${props.transition}`)
+const dialogTransitionHandlers = {
+	'after-enter': () => {
+		htmlAttrIsOpen.value = true
+		emit('open')
+	},
+	'after-leave': () => {
+		htmlAttrIsOpen.value = false
+		emit('close')
+	}
+}
+
+//Click outside
+onClickOutside(modalWrapper, () => {
+	if (props.autoClose) openDialog.value = false
+})
+
+//Methods
+function closeDialog() {
+	openDialog.value = false
+}
+</script>

package/src/components/VvDialog/constants.ts

@@ -0,0 +1,5 @@
+export const VV_DIALOG_SIZES = {
+	normal: '',
+	small: 'small',
+	fullscreen: 'fullscreen'
+}

package/src/components/VvDropdown/VvDropdown.ts

@@ -0,0 +1,46 @@
+import type { PropType } from 'vue'
+import { DisabledProps, ModifiersProps } from '../../props'
+
+export interface Option {
+	[key: string]: any
+}
+
+export const VvDropdownProps = {
+	...DisabledProps,
+	...ModifiersProps,
+	/**
+	 * modelValue can be an Object, a String or an Array of Object/String
+	 */
+	modelValue: [String, Array, Object],
+	/**
+	 * Label of "no results" options
+	 */
+	labelNoResult: { type: String, default: 'No results' },
+	/**
+	 * 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],
+	/**
+	 * 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' }
+}

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