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

package/src/components/VvButton/VvButton.vue

@@ -1,73 +1,30 @@
-<template>
-	<!-- #region component: "button" | "a" | "router-link" | "nuxt-link" -->
-	<component
-		v-bind="properties"
-		:is="isComponent"
-		@click.passive="onBtnClick">
-		<!-- @slot default to replace all button content -->
-		<slot>
-			<!-- #region loading -->
-			<template v-if="loading">
-				<slot name="loading">
-					<vv-icon
-						v-if="loadingIcon"
-						class="vv-button__loading-icon"
-						:name="loadingIcon" />
-					<span v-if="loadingLabel" class="vv-button__label">
-						{{ loadingLabel }}
-					</span>
-				</slot>
-			</template>
-			<!-- #endregion loading -->
-			<!-- #region button -->
-			<template v-else>
-				<!-- @slot before -->
-				<slot name="before" />
-				<!-- #region icon -->
-				<template v-if="icon">
-					<vv-icon class="vv-button__icon" :name="icon" />
-				</template>
-				<!-- #endregion icon -->
-				<!-- #region label  -->
-				<span v-if="label" class="vv-button__label">
-					<!-- @slot Use this slot for button label -->
-					<slot name="label">
-						{{ label }}
-					</slot>
-				</span>
-				<!-- #endregion label  -->
-				<!-- @slot after -->
-				<slot name="after" />
-			</template>
-			<!-- #endregion button -->
-		</slot>
-	</component>
-	<!-- #endregion component: button | a | router-link | nuxt-link -->
-</template>
+<script lang="ts">
+export default {
+	name: 'VvButton'
+}
+</script>
 
 <script setup lang="ts">
-import { useAttrs, useSlots } from 'vue'
-
-import { computed } from 'vue'
-import { v4 as uuidv4 } from 'uuid'
-import { ButtonIconPosition, ButtonTag } from './VvButton'
-import { VvButtonProps } from './VvButton'
-import ObjectUtilities from '@/utils/ObjectUtilities'
-
-//Components
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-
-//Composables
+import { inject, useAttrs, useSlots, computed } from 'vue'
+import { nanoid } from 'nanoid'
+import { contains, equals } from '@/utils/ObjectUtilities'
+import { type IVolver, VOLVER_PREFIX } from '@/Volver'
 import { useBemModifiers } from '@/composables/useModifiers'
-import { toButtonRefs } from './useButtonGroupProps'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import {
+	ButtonIconPosition,
+	ButtonTag,
+	VvButtonProps,
+	useGroupProps
+} from '@/components/VvButton'
 
-//Props, emits, attrs, slots
+// props, attrs and slots
 const props = defineProps(VvButtonProps)
 const attrs = useAttrs()
 const slots = useSlots()
 
-//Data
-const btnName = attrs?.name || uuidv4()
+// data
+const btnName = attrs?.name || nanoid()
 const {
 	modifiers,
 	iconPosition,
@@ -77,18 +34,21 @@ const {
 	disabled,
 	toggle,
 	isInGroup
-} = toButtonRefs(props)
+} = useGroupProps(props)
+
+// inject Volver
+const ds = inject<IVolver>(VOLVER_PREFIX)
 
 /**
- * @description Select the tag type in based on the props before.
- * @returns {string} The type of component
+ * @description The tag defined by props.
+ * @returns {string} The tag.
  */
-const isComponent = computed(() => {
+const hasTag = computed(() => {
 	switch (true) {
 		case disabled.value:
 			return ButtonTag.button
 		case props.to !== undefined:
-			return ButtonTag.routerLink
+			return ds?.nuxt ? ButtonTag.nuxtLink : ButtonTag.routerLink
 		case props.href !== undefined:
 			return ButtonTag.a
 		default:
@@ -97,34 +57,25 @@ const isComponent = computed(() => {
 })
 
 /**
- * Stato active del pulsante.
- * Se in un button group toggle, forza l'active in base al valore selezionato
+ * @description The component pressed state by prop or group.
+ * @returns {string} The component tag.
  */
-const active = computed(() => {
-	if (!toggle.value) return props.active
+const isPressed = computed(() => {
+	if (!toggle.value) return props.pressed
 
 	return Array.isArray(modelValue.value)
-		? ObjectUtilities.contains(btnName, modelValue.value)
-		: ObjectUtilities.equals(btnName, modelValue.value)
+		? contains(btnName, modelValue.value)
+		: equals(btnName, modelValue.value)
 })
 
 /**
- * Selected button state
- * If on button "toggle" and "action" GROUP force the selected state
+ * @description Define component classes with BEM style.
+ * @returns {Array} The component classes.
  */
-const selected = computed(() => {
-	if (!toggle.value) return props.selected
-
-	return Array.isArray(modelValue.value)
-		? ObjectUtilities.contains(btnName, modelValue.value)
-		: ObjectUtilities.equals(btnName, modelValue.value)
-})
-
-//Styles & bindings
-const { bemCssClasses: btnClass } = useBemModifiers('vv-button', {
+const { bemCssClasses } = useBemModifiers('vv-button', {
 	modifiers,
-	active,
-	selected,
+	active: props.active,
+	pressed: isPressed,
 	disabled,
 	reverse: computed(() =>
 		[ButtonIconPosition.right, ButtonIconPosition.bottom].includes(
@@ -138,39 +89,54 @@ const { bemCssClasses: btnClass } = useBemModifiers('vv-button', {
 	),
 	iconOnly: computed(() => icon?.value && !label?.value && !slots['default'])
 })
+
 /**
- * Compute component properties
+ * @description Define icon attributes.
+ * @returns {Object} The icon attributes.
  */
-const properties = computed(() => {
-	return {
-		...linkProps.value,
-		'aria-label': props.label || attrs['aria-label'],
-		'aria-disabled': disabled.value,
-		role: 'button',
-		class: btnClass.value,
-		to: props.to
-	}
-})
+const hasIconProps = computed(() =>
+	typeof icon?.value === 'string' ? { name: icon?.value } : icon?.value
+)
+
 /**
- * Compute link props (target, href)
+ * @description Define component attributes.
+ * @returns {Object} The component attributes.
  */
-const linkProps = computed(() => {
-	const isLink = isComponent.value === ButtonTag.a
-	let toReturn = {}
-	if (isLink) {
-		toReturn = disabled.value
-			? {
-					href: 'javascript:;'
-			  }
-			: {
-					target: props.target,
-					href: props.href
-			  }
+const hasProps = computed(() => {
+	const toReturn = {
+		class: bemCssClasses.value,
+		'aria-label': attrs['aria-label'],
+		'aria-pressed': isPressed.value ? true : undefined
+	}
+	switch (hasTag.value) {
+		case ButtonTag.a:
+			return {
+				...toReturn,
+				role: 'button',
+				href: props.href,
+				target: props.target,
+				rel: props.rel
+			}
+		case ButtonTag.routerLink:
+		case ButtonTag.nuxtLink:
+			return {
+				...toReturn,
+				role: 'button',
+				to: props.to,
+				target: props.target
+			}
+		default:
+			return {
+				...toReturn,
+				type: props.type,
+				disabled: disabled.value
+			}
 	}
-	return toReturn
 })
 
-//Methods
+/**
+ * @description Catch click event in a group.
+ */
 function onBtnClick() {
 	// set group modelValue
 	if (isInGroup.value) {
@@ -178,3 +144,47 @@ function onBtnClick() {
 	}
 }
 </script>
+
+<template>
+	<!-- #region component: "button" | "a" | "router-link" | "nuxt-link" -->
+	<component v-bind="hasProps" :is="hasTag" @click.passive="onBtnClick">
+		<!-- @slot default to replace all button content -->
+		<slot>
+			<!-- #region loading -->
+			<template v-if="loading">
+				<slot name="loading">
+					<VvIcon
+						v-if="loadingIcon"
+						class="vv-button__loading-icon"
+						:name="loadingIcon" />
+					<span v-if="loadingLabel" class="vv-button__label">
+						{{ loadingLabel }}
+					</span>
+				</slot>
+			</template>
+			<!-- #endregion loading -->
+			<!-- #region button -->
+			<template v-else>
+				<!-- @slot before -->
+				<slot name="before" />
+				<!-- #region icon -->
+				<template v-if="icon">
+					<VvIcon class="vv-button__icon" v-bind="hasIconProps" />
+				</template>
+				<!-- #endregion icon -->
+				<!-- #region label  -->
+				<span v-if="label" class="vv-button__label">
+					<!-- @slot Use this slot for button label -->
+					<slot name="label">
+						{{ label }}
+					</slot>
+				</span>
+				<!-- #endregion label  -->
+				<!-- @slot after -->
+				<slot name="after" />
+			</template>
+			<!-- #endregion button -->
+		</slot>
+	</component>
+	<!-- #endregion component: button | a | router-link | nuxt-link -->
+</template>

package/src/components/VvButton/index.ts

@@ -0,0 +1,147 @@
+import { type PropType, type ExtractPropTypes, toRefs, type Ref } from 'vue'
+import { DisabledProps, ModifiersProps } from '@/props'
+import type IButtonGroupState from '@/composables/group/types/IButtonGroupState'
+import { useInjectedGroupState } from '@/composables/group/useInjectedGroupState'
+import { VV_BUTTON_GROUP } from '@/constants'
+
+export enum ButtonIconPosition {
+	left = 'left',
+	right = 'right',
+	top = 'top',
+	bottom = 'bottom'
+}
+
+export enum ButtonType {
+	button = 'button',
+	submit = 'submit',
+	reset = 'reset'
+}
+
+export enum ButtonTag {
+	nuxtLink = 'nuxt-link',
+	routerLink = 'router-link',
+	a = 'a',
+	button = 'button'
+}
+
+export enum ButtonTarget {
+	_blank = '_blank',
+	_self = '_self',
+	_parent = '_parent',
+	_top = '_top'
+}
+
+export const VvButtonEvents = ['update:modelValue']
+
+export const VvButtonProps = {
+	...ModifiersProps,
+	...DisabledProps,
+	/**
+	 * Button icon
+	 */
+	icon: {
+		type: [String, Object],
+		default: ''
+	},
+	/**
+	 * Button icon position
+	 */
+	iconPosition: {
+		type: String as PropType<ButtonIconPosition>,
+		default: ButtonIconPosition.left,
+		validator: (value: string) => value in ButtonIconPosition
+	},
+	/**
+	 * Button label
+	 */
+	label: [String, Number],
+	/**
+	 * Loading status
+	 */
+	loading: Boolean,
+	/**
+	 * Loading icon
+	 */
+	loadingIcon: { type: String, default: 'eos-icons:bubble-loading' },
+	/**
+	 * Loading label
+	 */
+	loadingLabel: {
+		type: String,
+		default: 'Loading...'
+	},
+	/**
+	 * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+	 * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+	 */
+	to: {
+		type: [String, Object]
+	},
+	/**
+	 * Link href
+	 */
+	href: String,
+	/**
+	 * Link target
+	 */
+	target: {
+		type: String as PropType<ButtonTarget>,
+		validator: (value: string) => value in ButtonTarget
+	},
+	active: Boolean,
+	/**
+	 * Button pressed mode
+	 */
+	pressed: Boolean,
+	/**
+	 * Link rel
+	 */
+	rel: {
+		type: String,
+		default: 'noopener noreferrer'
+	},
+	/**
+	 * Button type
+	 */
+	type: {
+		type: String,
+		default: ButtonType.button,
+		validator: (value: string) => value in ButtonType
+	}
+}
+
+export type VvButtonPropsTypes = ExtractPropTypes<typeof VvButtonProps>
+
+/**
+ * Merges local and group props
+ */
+export function useGroupProps(props: VvButtonPropsTypes) {
+	const { group, isInGroup, getGroupOrLocalRef } =
+		useInjectedGroupState<IButtonGroupState>(VV_BUTTON_GROUP)
+
+	// local props
+	const { iconPosition, icon, label, pressed } = toRefs(props)
+
+	// group props
+	const modelValue = getGroupOrLocalRef('modelValue', props)
+	const disabled = getGroupOrLocalRef('disabled', props) as Ref<boolean>
+	const toggle = getGroupOrLocalRef('toggle', props) as Ref<boolean>
+	const modifiers = getGroupOrLocalRef('modifiers', props) as Ref<
+		string[] | string
+	>
+
+	return {
+		// group props
+		modelValue,
+		disabled,
+		toggle,
+		isInGroup,
+		group,
+		modifiers,
+		// local props
+		pressed,
+		iconPosition,
+		icon,
+		label
+	}
+}

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -1,37 +1,36 @@
-<template>
-	<div :class="btnGroupClass" role="group">
-		<slot />
-	</div>
-</template>
+<script lang="ts">
+export default {
+	name: 'VvButtonGroup'
+}
+</script>
 
 <script setup lang="ts">
 import type IButtonGroupState from '@/composables/group/types/IButtonGroupState'
-
 import { ref, toRefs } from 'vue'
-import { VvButtonGroupProps, VvButtonGroupEvents } from './VvButtonGroup'
-import { VV_BUTTON_GROUP } from '../../constants'
-
-//Composables
+import { VV_BUTTON_GROUP } from '@/constants'
 import { useVModel } from '@vueuse/core'
-import { useProvideGroupState } from '../../composables/group/useProvideGroupState'
+import { useProvideGroupState } from '@/composables/group/useProvideGroupState'
 import { useBemModifiers } from '@/composables/useModifiers'
+import {
+	VvButtonGroupProps,
+	VvButtonGroupEvents
+} from '@/components/VvButtonGroup'
 
-//Emits, props, attrs, slots
+// emit and props
 const emit = defineEmits(VvButtonGroupEvents)
 const props = defineProps(VvButtonGroupProps)
 
-//Data
+// data
 const modelValue = useVModel(props, 'modelValue', emit)
 const { disabled, vertical, compact, toggle, modifiers } = toRefs(props)
 
-//Computed
-const { bemCssClasses: btnGroupClass } = useBemModifiers('vv-button-group', {
+// style
+const { bemCssClasses } = useBemModifiers('vv-button-group', {
 	modifiers,
 	vertical,
 	compact
 })
 
-// #region group
 const groupState: IButtonGroupState = {
 	key: VV_BUTTON_GROUP,
 	modelValue,
@@ -40,5 +39,10 @@ const groupState: IButtonGroupState = {
 	modifiers: modifiers?.value ? modifiers : ref([])
 }
 useProvideGroupState(groupState)
-// #endregion group
 </script>
+
+<template>
+	<div :class="bemCssClasses" role="group">
+		<slot />
+	</div>
+</template>

package/src/components/VvCard/VvCard.vue

@@ -1,5 +1,24 @@
+<script lang="ts">
+export default {
+	name: 'VvCard'
+}
+</script>
+
+<script setup lang="ts">
+import { useBemModifiers } from '@/composables/useModifiers'
+import { VvCardProps } from '@/components/VvCard'
+
+// props and attrs
+const props = defineProps(VvCardProps)
+
+// styles
+const { bemCssClasses } = useBemModifiers('vv-card', {
+	modifiers: props.modifiers
+})
+</script>
+
 <template>
-	<article :class="cardClass" v-bind="cardAttrs">
+	<article :class="bemCssClasses">
 		<header v-if="$slots.header || title" class="vv-card__header">
 			<slot name="header">
 				{{ title }}
@@ -14,24 +33,3 @@
 		</footer>
 	</article>
 </template>
-
-<script setup lang="ts">
-import { toRefs, computed, useAttrs } from 'vue'
-import { VvCardProps } from './VvCard'
-
-//Components
-import { useBemModifiers } from '../../composables/useModifiers'
-
-//Props, Emits, attrs ...
-const props = defineProps(VvCardProps)
-const attrs = useAttrs()
-
-//Styles & bindings
-const { modifiers } = toRefs(props)
-const { bemCssClasses: cardClass } = useBemModifiers('vv-card', {
-	modifiers
-})
-const cardAttrs = computed(() => {
-	return attrs
-})
-</script>

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>