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

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -0,0 +1,124 @@
+<script lang="ts">
+export default {
+	name: 'VvCheckbox'
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, useSlots, watchEffect } from 'vue'
+import { contains, equals, removeFromList } from '@/utils/ObjectUtilities'
+import { useBemModifiers } from '@/composables/useModifiers'
+import {
+	VvCheckboxProps,
+	VvCheckboxEvents,
+	useGroupProps
+} from '@/components/VvCheckbox'
+import { HintSlotFactory } from '@/components/common/HintSlot'
+
+// props, emits and slots
+const props = defineProps(VvCheckboxProps)
+const emit = defineEmits(VvCheckboxEvents)
+const slots = useSlots()
+
+// data
+const { disabled, readonly, valid, error, propsSwitch, modelValue } =
+	useGroupProps(props, emit)
+// template ref
+const input = ref()
+
+// computed
+const hasId = computed(() =>
+	props.id !== undefined ? String(props.id) : undefined
+)
+const isBinary = computed(
+	() => props.trueValue !== undefined && props.falseValue !== undefined
+)
+const isDisabled = computed(() => disabled.value || readonly.value)
+const hasTabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
+const isInvalid = computed(() => {
+	if (props.error === true) {
+		return true
+	}
+	if (props.valid === true) {
+		return false
+	}
+	return undefined
+})
+const isChecked = computed(() => {
+	if (isBinary.value) {
+		return modelValue.value === props.trueValue
+	}
+	return Array.isArray(modelValue.value)
+		? contains(props.value, modelValue.value)
+		: equals(props.value, modelValue.value)
+})
+const hasValue = computed(() => {
+	if (isBinary.value) {
+		return undefined
+	}
+	return ['string', 'number', 'boolean'].includes(typeof props.value)
+		? props.value
+		: true
+})
+const localModelValue = computed({
+	get() {
+		return isChecked.value
+	},
+	set(newValue) {
+		if (isBinary.value) {
+			modelValue.value = newValue ? props.trueValue : props.falseValue
+			return
+		}
+		if (Array.isArray(modelValue.value)) {
+			modelValue.value = newValue
+				? [...modelValue.value, props.value]
+				: removeFromList(props.value, modelValue.value)
+			return
+		}
+		modelValue.value = newValue ? props.value : null
+		emit('change', newValue)
+	}
+})
+
+// styles
+const { bemCssClasses } = useBemModifiers('vv-checkbox', {
+	switch: propsSwitch,
+	valid,
+	invalid: error,
+	disabled,
+	readonly
+})
+
+watchEffect(() => {
+	if (isBinary.value && Array.isArray(modelValue.value)) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			`[VvCheckbox] The model value is an array but the component is in binary mode.`
+		)
+	}
+})
+
+// hint
+const { HintSlot } = HintSlotFactory(props, slots)
+</script>
+
+<template>
+	<label :class="bemCssClasses" :for="hasId">
+		<input
+			:id="hasId"
+			ref="input"
+			v-model="localModelValue"
+			type="checkbox"
+			class="vv-checkbox__input"
+			:name="name"
+			:disabled="isDisabled"
+			:value="hasValue"
+			:tabindex="hasTabindex"
+			:aria-invalid="isInvalid" />
+		<!-- @slot Use this slot for check label -->
+		<slot :value="modelValue">
+			{{ label }}
+		</slot>
+		<HintSlot class="vv-checkbox__hint" :params="{ value: modelValue }" />
+	</label>
+</template>

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