@volverjs/ui-vue 0.0.1-beta.12 → 0.0.1-beta.16

package/src/components/VvCheckbox/index.ts

@@ -0,0 +1,94 @@
+import { type ExtractPropTypes, type Ref, toRefs } from 'vue'
+import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
+import { useInjectedGroupState } from '@/composables/group/useInjectedGroupState'
+import { ValidProps, ErrorProps, HintProps } from '@/props'
+import { VV_CHECK_GROUP } from '@/constants'
+
+export const VvCheckboxProps = {
+	...ValidProps,
+	...ErrorProps,
+	...HintProps,
+	/**
+	 * Input id
+	 */
+	id: [String, Number],
+	/**
+	 * Input name
+	 */
+	name: { type: String, required: true },
+	/**
+	 * Input value
+	 */
+	value: [String, Number, Boolean],
+	/**
+	 * Input value
+	 * @description
+	 * If binary the input value can be an Object, a Boolean or a Number
+	 * If not binary the input value must be an Array
+	 */
+	modelValue: [Object, Number, Boolean, String],
+	/**
+	 * Input name
+	 */
+	label: String,
+	/**
+	 * If true, the input will be disabled
+	 */
+	disabled: Boolean,
+	/**
+	 * If true, the input will be readonly
+	 */
+	readonly: Boolean,
+	/**
+	 * Value associated with the checked state (returned instead of TRUE)
+	 */
+	trueValue: { type: [String, Number, Boolean], default: undefined },
+	/**
+	 * Value associated with the unchecked state (returned instead of FALSE)
+	 */
+	falseValue: { type: [String, Number, Boolean], default: undefined },
+	/**
+	 * If true, the input will be displayed as a switch
+	 */
+	switch: Boolean,
+	/**
+	 * Sequential keyboard navigation
+	 */
+	tabindex: { type: [String, Number], default: 0 }
+}
+
+export const VvCheckboxEvents = ['click', 'update:modelValue', 'change', 'blur']
+
+export type VvCheckboxPropsTypes = ExtractPropTypes<typeof VvCheckboxProps>
+
+/**
+ * Merges local and group props
+ */
+export function useGroupProps(
+	props: VvCheckboxPropsTypes,
+	emit: (event: typeof VvCheckboxEvents[number], value: unknown) => 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) as Ref<boolean>
+	const disabled = getGroupOrLocalRef('disabled', props) as Ref<boolean>
+
+	return {
+		// local props
+		valid,
+		error,
+		propsSwitch,
+		// global props
+		group,
+		isInGroup,
+		modelValue,
+		readonly,
+		disabled
+	}
+}

package/src/components/{VvCheckGroup/VvCheckGroup.vue → VvCheckboxGroup/VvCheckboxGroup.vue}

@@ -1,53 +1,33 @@
-<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 lang="ts">
+export default {
+	name: 'VvCheckboxGroup'
+}
+</script>
 
 <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 type { IInputGroupState } from '@/composables/group/types/IInputGroup'
+import { VV_CHECK_GROUP } from '@/constants'
 import { useVModel } from '@vueuse/core'
-import { useProvideGroupState } from '../../composables/group/useProvideGroupState'
-import { useOptions } from '../../composables/options/useOptions'
+import { useProvideGroupState } from '@/composables/group/useProvideGroupState'
+import { useOptions } from '@/composables/options/useOptions'
 import { useBemModifiers } from '@/composables/useModifiers'
+import { HintSlotFactory } from '@/components/common/HintSlot'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import {
+	VvCheckboxGroupProps,
+	VvCheckboxGroupEvents
+} from '@/components/VvCheckboxGroup'
 
-//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)
+// props, emit and slots
+const props = defineProps(VvCheckboxGroupProps)
+const emit = defineEmits(VvCheckboxGroupEvents)
 const slots = useSlots()
 
-//Data
+// data
 const modelValue = useVModel(props, 'modelValue', emit)
 const { disabled, readonly, error, valid } = toRefs(props)
 
-// #region group
 const groupState: IInputGroupState = {
 	key: VV_CHECK_GROUP,
 	modelValue,
@@ -55,23 +35,19 @@ const groupState: IInputGroupState = {
 	readonly
 }
 useProvideGroupState(groupState)
-// #endregion group
 
-// OPTIONS
+// options
 const { getOptionLabel, getOptionValue } = useOptions(props)
 
-//Styles & Bindings
-const { bemCssClasses: groupClass } = useBemModifiers(
-	'vv-input-checkbox-group',
-	{
-		horizontal: computed(() => !props.vertical),
-		valid,
-		invalid: error
-	}
-)
+// stypes
+const { bemCssClasses: hasClass } = useBemModifiers('vv-checkbox-group', {
+	horizontal: computed(() => !props.vertical),
+	valid,
+	invalid: error
+})
 
-//Methods
-const getOptionProps = (option: any, oIndex: number) => {
+// methods
+const getOptionProps = (option: unknown, oIndex: number) => {
 	return {
 		id: `${props.name}_opt${oIndex}`,
 		name: props.name,
@@ -79,6 +55,25 @@ const getOptionProps = (option: any, oIndex: number) => {
 		value: getOptionValue(option)
 	}
 }
-
-const HintSlot = HintSlotFactory(props, slots)
+const { HintSlot } = HintSlotFactory(props, slots)
 </script>
+
+<template>
+	<fieldset :class="hasClass">
+		<legend v-if="label" v-text="label" />
+		<div class="vv-checkbox-group__wrapper">
+			<!-- #region options set up -->
+			<template v-if="options.length > 0">
+				<vv-checkbox
+					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>
+		<HintSlot class="vv-checkbox-group__hint" />
+	</fieldset>
+</template>

package/src/components/{VvCheckGroup/VvCheckGroup.ts → VvCheckboxGroup/index.ts}

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

package/src/components/VvDialog/VvDialog.vue

@@ -1,56 +1,27 @@
-<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 lang="ts">
+export default {
+	name: 'VvDialog'
+}
+</script>
 
 <script setup lang="ts">
-import type { DialogHTMLAttributes } from 'vue'
-
-import { computed, ref } from 'vue'
+import { type DialogHTMLAttributes, computed, ref } from 'vue'
 import { useVModel, onClickOutside } from '@vueuse/core'
-import { VvDialogEvents, VvDialogProps } from './VvDialog'
-
-//Components
-import VvIcon from '../VvIcon/VvIcon.vue'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { VvDialogEvents, VvDialogProps } from '@/components/VvDialog'
 
-//Constants
-import { VV_DIALOG_SIZES } from './constants'
-
-//Props, emits, slots, attrs
+// props, emit
 const props = defineProps(VvDialogProps)
 const emit = defineEmits(VvDialogEvents)
 
-//Data
-const openDialog = useVModel(props, 'open', emit)
+// data
+const openDialog = useVModel(props, 'modelValue', emit)
 const htmlAttrIsOpen = ref(true)
 
-//Template reference
+// template ref
 const modalWrapper = ref(null)
 
-//Style e binding
+// styles
 const dialogAttrs = computed(() => {
 	const { id } = props
 	return {
@@ -59,17 +30,16 @@ const dialogAttrs = computed(() => {
 	} 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
+	if (!props.size) {
+		return 'vv-dialog'
 	}
+	return ['vv-dialog', `vv-dialog--${props.size}`]
 })
 
-//Transitions
+// transitions
 const transitioName = computed(() => `vv-dialog--${props.transition}`)
 const dialogTransitionHandlers = {
-	'after-enter': () => {
+	'before-enter': () => {
 		htmlAttrIsOpen.value = true
 		emit('open')
 	},
@@ -79,13 +49,40 @@ const dialogTransitionHandlers = {
 	}
 }
 
-//Click outside
+// methods
 onClickOutside(modalWrapper, () => {
 	if (props.autoClose) openDialog.value = false
 })
 
-//Methods
 function closeDialog() {
 	openDialog.value = false
 }
 </script>
+
+<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>

package/src/components/VvDialog/index.ts

@@ -0,0 +1,10 @@
+export const VvDialogEvents = ['open', 'close', 'update:modelValue']
+
+export const VvDialogProps = {
+	id: { type: String, required: true },
+	title: String,
+	modelValue: Boolean,
+	transition: { type: String, default: 'fade-block' },
+	size: String,
+	autoClose: { type: Boolean, default: true }
+}

package/src/components/VvDropdown/VvDropdown.vue

@@ -1,44 +1,25 @@
-<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 lang="ts">
+export default {
+	name: 'VvDropdown'
+}
+</script>
 
 <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'
+import { nanoid } from 'nanoid'
+import { useBemModifiers } from '@/composables/useModifiers'
+import { contains, equals, removeFromList } from '@/utils/ObjectUtilities'
+import { VvDropdownProps, type Option } from '@/components/VvDropdown'
 
+// props, emit
 const props = defineProps(VvDropdownProps)
 const emit = defineEmits(['update:modelValue'])
 
 // data
-const id = uuidv4()
+const id = nanoid()
 const { modifiers, disabled } = toRefs(props)
 
-//Styles & css classes modifiers
+// styles
 const { bemCssClasses: dropdownClasses } = useBemModifiers('vv-dropdown', {
 	modifiers,
 	disabled
@@ -48,18 +29,18 @@ const { bemCssClasses: dropdownClasses } = useBemModifiers('vv-dropdown', {
  * Check if an option exist into modelValue array (multiple) or is equal to modelValue (single)
  * @param {String | Option} option
  */
-function isSelected(option: string | Option) {
+function getChecked(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)
+			contains(option, props.modelValue) ||
+			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)
+		equals(option, props.modelValue) ||
+		equals(getValue(option), props.modelValue)
 	)
 }
 
@@ -79,6 +60,17 @@ function getLabel(option: string | Option) {
 	return typeof option === 'string' ? option : option[props.labelKey]
 }
 
+/**
+ * Retrieve the disabled state of an option based on prop "disabled" or the disabled attribute
+ * @param {String | Option} option
+ */
+function getDisabled(option: string | Option): boolean {
+	if (typeof option === 'string' || option.disabled === undefined) {
+		return disabled.value
+	}
+	return option.disabled
+}
+
 /**
  * Function triggered on input of checkbox or radio (multple or single mode)
  * @param event on input event (checkbox or radio input)
@@ -105,11 +97,12 @@ function onInput(event: Event) {
 		if (
 			typeof props.maxValues !== 'undefined' &&
 			props.maxValues >= 0 &&
+			Array.isArray(props.modelValue) &&
 			props.modelValue?.length >= props.maxValues
 		) {
 			if (
 				(Array.isArray(props.modelValue) &&
-					!ObjectUtilities.contains(value, props.modelValue)) ||
+					!contains(value, props.modelValue)) ||
 				props.maxValues == 0
 			) {
 				target.checked = false
@@ -118,13 +111,41 @@ function onInput(event: Event) {
 			}
 		}
 		if (Array.isArray(props.modelValue)) {
-			value = ObjectUtilities.contains(value, props.modelValue)
-				? ObjectUtilities.removeFromList(value, props.modelValue)
+			value = contains(value, props.modelValue)
+				? removeFromList(value, props.modelValue)
 				: [...props.modelValue, value]
 		} else {
-			value = [value]
+			value = [value as Option]
 		}
 	}
 	emit('update:modelValue', value)
 }
 </script>
+
+<template>
+	<ul :class="dropdownClasses" role="listbox">
+		<li v-if="!options?.length" role="option">
+			<label>
+				{{ labelNoResult }}
+			</label>
+		</li>
+		<li
+			v-for="(option, index) in options"
+			:key="index"
+			role="option"
+			:aria-selected="getChecked(option)">
+			<label :for="`dropdown-${index}-${id}`">
+				<input
+					:id="`dropdown-${index}-${id}`"
+					:type="multiple ? 'checkbox' : 'radio'"
+					:value="getValue(option)"
+					:checked="getChecked(option)"
+					:disabled="getDisabled(option)"
+					tabindex="-1"
+					aria-hidden="true"
+					@input="onInput" />
+				{{ getLabel(option) }}
+			</label>
+		</li>
+	</ul>
+</template>

package/src/components/VvDropdown/{VvDropdown.ts → index.ts}

@@ -1,17 +1,21 @@
 import type { PropType } from 'vue'
-import { DisabledProps, ModifiersProps } from '../../props'
+import { DisabledProps, ModifiersProps } from '@/props'
 
 export interface Option {
-	[key: string]: any
+	[key: string]: unknown
+	disabled?: boolean
 }
 
 export const VvDropdownProps = {
 	...DisabledProps,
 	...ModifiersProps,
 	/**
-	 * modelValue can be an Object, a String or an Array of Object/String
+	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
 	 */
-	modelValue: [String, Array, Object],
+	modelValue: {
+		type: [String, Number, Boolean, Object, Array],
+		required: true
+	},
 	/**
 	 * Label of "no results" options
 	 */

package/src/components/VvIcon/VvIcon.vue

@@ -1,42 +1,34 @@
-<template>
-	<Icon
-		v-if="show"
-		:class="iconClass"
-		v-bind="{
-			...$props,
-			provider: currentProvider,
-			icon
-		}" />
-</template>
+<script lang="ts">
+export default {
+	name: 'VvIcon'
+}
+</script>
 
 <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 { inject, toRefs, ref, computed } from 'vue'
 import { Icon, addIcon, iconExists, type IconifyJSON } from '@iconify/vue'
-import { VvIconProps } from './VvIcon'
-
-//Composables
+import { type IVolver, VOLVER_PREFIX } from '@/Volver'
+import { VvIconProps } from '@/components/VvIcon'
 import { useBemModifiers } from '@/composables/useModifiers'
 
-//Props,emits,slots
+// props
 const props = defineProps(VvIconProps)
 
-//Data
+// data
 const show = ref(true)
 const { modifiers } = toRefs(props)
 
-//Inject
+// inject
 const ds = inject<IVolver>(VOLVER_PREFIX)
 
-//Styles & bindings
-const { bemCssClasses: iconClass } = useBemModifiers('vv-icon', {
+// classes
+const { bemCssClasses } = useBemModifiers('vv-icon', {
 	modifiers
 })
 
+/**
+ * Provider name
+ */
 const currentProvider = computed(() => {
 	return props.provider || ds?.provider
 })
@@ -105,7 +97,10 @@ function addIconFromSvg(svg: string) {
 }
 
 if (ds) {
-	if (props.src) {
+	if (
+		props.src &&
+		!iconExists(`@${currentProvider.value}:${props.prefix}:${props.name}`)
+	) {
 		show.value = false
 		ds.fetchIcon(props.src)
 			.then((svg?: string) => {
@@ -122,3 +117,14 @@ if (ds) {
 	}
 }
 </script>
+
+<template>
+	<Icon
+		v-if="show"
+		:class="bemCssClasses"
+		v-bind="{
+			...$props,
+			provider: currentProvider,
+			icon
+		}" />
+</template>