@volverjs/ui-vue 0.0.1-beta.8 → 0.0.1

package/src/components/VvButton/VvButton.vue

@@ -1,18 +1,182 @@
+<script lang="ts">
+	export default {
+		name: 'VvButton',
+	}
+</script>
+
+<script setup lang="ts">
+	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 VvIcon from '@/components/VvIcon/VvIcon.vue'
+	import {
+		ButtonIconPosition,
+		VvButtonEvents,
+		ButtonTag,
+		VvButtonProps,
+		useGroupProps,
+	} from '@/components/VvButton'
+
+	// props, attrs, slots and emit
+	const props = defineProps(VvButtonProps)
+	const attrs = useAttrs()
+	const slots = useSlots()
+	const emit = defineEmits(VvButtonEvents)
+
+	// data
+	const name = (attrs?.name as string) || nanoid()
+	const {
+		modifiers,
+		iconPosition,
+		icon,
+		label,
+		modelValue,
+		disabled,
+		toggle,
+		unselectable,
+	} = useGroupProps(props, emit)
+
+	// inject Volver
+	const ds = inject<IVolver>(VOLVER_PREFIX)
+
+	/**
+	 * @description The tag defined by props.
+	 * @returns {string} The tag.
+	 */
+	const hasTag = computed(() => {
+		switch (true) {
+			case disabled.value:
+				return ButtonTag.button
+			case props.to !== undefined:
+				return ds?.nuxt ? ButtonTag.nuxtLink : ButtonTag.routerLink
+			case props.href !== undefined:
+				return ButtonTag.a
+			default:
+				return ButtonTag.button
+		}
+	})
+
+	/**
+	 * @description The component pressed state by prop or group.
+	 * @returns {string} The component tag.
+	 */
+	const isPressed = computed(() => {
+		if (!toggle.value) return props.pressed
+
+		return Array.isArray(modelValue.value)
+			? contains(name, modelValue.value)
+			: equals(name, modelValue.value)
+	})
+
+	/**
+	 * @description Define component classes with BEM style.
+	 * @returns {Array} The component classes.
+	 */
+	const { bemCssClasses } = useBemModifiers('vv-button', {
+		modifiers,
+		active: props.active,
+		pressed: isPressed,
+		disabled,
+		reverse: computed(() =>
+			[ButtonIconPosition.right, ButtonIconPosition.bottom].includes(
+				iconPosition.value,
+			),
+		),
+		column: computed(() =>
+			[ButtonIconPosition.top, ButtonIconPosition.bottom].includes(
+				iconPosition.value,
+			),
+		),
+		iconOnly: computed(
+			() => icon?.value && !label?.value && !slots['default'],
+		),
+	})
+
+	/**
+	 * @description Define icon attributes.
+	 * @returns {Object} The icon attributes.
+	 */
+	const hasIconProps = computed(() =>
+		typeof icon?.value === 'string' ? { name: icon?.value } : icon?.value,
+	)
+
+	/**
+	 * @description Define component attributes.
+	 * @returns {Object} The component attributes.
+	 */
+	const hasProps = computed(() => {
+		const toReturn = {
+			class: bemCssClasses.value,
+			'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,
+				}
+		}
+	})
+
+	/**
+	 * @description Catch click event in a group.
+	 */
+	const onClick = () => {
+		if (toggle.value) {
+			if (Array.isArray(modelValue.value)) {
+				if (contains(name, modelValue.value)) {
+					if (unselectable.value) {
+						modelValue.value = modelValue.value.filter(
+							(n) => n !== name,
+						)
+					}
+					return
+				}
+				modelValue.value.push(name)
+				return
+			}
+			if (equals(name, modelValue.value) && unselectable.value) {
+				modelValue.value = undefined
+				return
+			}
+			modelValue.value = name
+		}
+	}
+</script>
+
 <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 -->
+	<component v-bind="hasProps" :is="hasTag" @click.passive="onClick">
+		<!-- @slot Replace all button content -->
 		<slot>
 			<!-- #region loading -->
 			<template v-if="loading">
+				<!-- @slot Replace all button content on loading -->
 				<slot name="loading">
-					<vv-icon
+					<VvIcon
 						v-if="loadingIcon"
 						class="vv-button__loading-icon"
-						:name="loadingIcon" />
+						:name="loadingIcon"
+					/>
 					<span v-if="loadingLabel" class="vv-button__label">
 						{{ loadingLabel }}
 					</span>
@@ -21,11 +185,11 @@
 			<!-- #endregion loading -->
 			<!-- #region button -->
 			<template v-else>
-				<!-- @slot before -->
+				<!-- @slot Before label and icon -->
 				<slot name="before" />
 				<!-- #region icon -->
 				<template v-if="icon">
-					<vv-icon class="vv-button__icon" :name="icon" />
+					<VvIcon class="vv-button__icon" v-bind="hasIconProps" />
 				</template>
 				<!-- #endregion icon -->
 				<!-- #region label  -->
@@ -36,7 +200,7 @@
 					</slot>
 				</span>
 				<!-- #endregion label  -->
-				<!-- @slot after -->
+				<!-- @slot After label and icon -->
 				<slot name="after" />
 			</template>
 			<!-- #endregion button -->
@@ -44,146 +208,3 @@
 	</component>
 	<!-- #endregion component: button | a | router-link | nuxt-link -->
 </template>
-
-<script setup lang="ts">
-import { useAttrs } 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 { useBemModifiers } from '@/composables/useModifiers'
-import { toButtonRefs } from './useButtonGroupProps'
-
-//Props, emits, attrs, slots
-const props = defineProps(VvButtonProps)
-const attrs = useAttrs()
-
-//Data
-const btnName = attrs?.name || uuidv4()
-const {
-	modifiers,
-	action,
-	actionQuiet,
-	block,
-	rounded,
-	fullBleed,
-	iconPosition,
-	icon,
-	label,
-	modelValue,
-	disabled,
-	toggle,
-	isInGroup
-} = toButtonRefs(props)
-
-/**
- * @description Select the tag type in based on the props before.
- * @returns {string} The type of component
- */
-const isComponent = computed(() => {
-	switch (true) {
-		case disabled.value:
-			return ButtonTag.button
-		case props.to !== undefined:
-			return ButtonTag.routerLink
-		case props.href !== undefined:
-			return ButtonTag.a
-		default:
-			return ButtonTag.button
-	}
-})
-
-/**
- * Stato active del pulsante.
- * Se in un button group toggle, forza l'active in base al valore selezionato
- */
-const active = computed(() => {
-	if (!toggle.value) return props.active
-
-	return Array.isArray(modelValue.value)
-		? ObjectUtilities.contains(btnName, modelValue.value)
-		: ObjectUtilities.equals(btnName, modelValue.value)
-})
-
-/**
- * Selected button state
- * If on button "toggle" and "action" GROUP force the selected state
- */
-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', {
-	modifiers,
-	active,
-	action,
-	actionQuiet,
-	selected,
-	block,
-	rounded,
-	fullBleed,
-	disabled,
-	reverse: computed(() =>
-		[ButtonIconPosition.right, ButtonIconPosition.bottom].includes(
-			iconPosition.value
-		)
-	),
-	column: computed(() =>
-		[ButtonIconPosition.top, ButtonIconPosition.bottom].includes(
-			iconPosition.value
-		)
-	),
-	iconOnly: computed(() => icon?.value && !label?.value)
-})
-/**
- * Compute component properties
- */
-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
-	}
-})
-/**
- * Compute link props (target, href)
- */
-const linkProps = computed(() => {
-	const isLink = isComponent.value === ButtonTag.a
-	let toReturn = {}
-	if (isLink) {
-		toReturn = disabled.value
-			? {
-					href: 'javascript:;'
-			  }
-			: {
-					target: props.target,
-					href: props.href
-			  }
-	}
-	return toReturn
-})
-
-//Methods
-function onBtnClick() {
-	// set group modelValue
-	if (isInGroup.value) {
-		modelValue.value = btnName
-	}
-}
-</script>

package/src/components/VvButton/index.ts

@@ -0,0 +1,171 @@
+import {
+	type Ref,
+	type PropType,
+	type ExtractPropTypes,
+	toRefs,
+	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,
+	},
+	toggle: {
+		type: Boolean,
+		default: false,
+	},
+	modelValue: String,
+	unselectable: { type: Boolean, default: true },
+}
+
+export type VvButtonPropsTypes = ExtractPropTypes<typeof VvButtonProps>
+
+/**
+ * Merges local and group props
+ */
+export function useGroupProps(
+	props: VvButtonPropsTypes,
+	emit: (event: (typeof VvButtonEvents)[number], value: unknown) => void,
+) {
+	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, emit) as Ref<
+		string | Array<string> | undefined
+	>
+	const disabled = getGroupOrLocalRef('disabled', props) as Ref<boolean>
+	const toggle = getGroupOrLocalRef('toggle', props) as Ref<boolean>
+	const unselectable = getGroupOrLocalRef(
+		'unselectable',
+		props,
+	) as Ref<boolean>
+	const modifiers = getGroupOrLocalRef('modifiers', props) as Ref<
+		string[] | string
+	>
+	const multiple = group?.value?.multiple ?? ref(false)
+
+	return {
+		// group props
+		modelValue,
+		disabled,
+		toggle,
+		isInGroup,
+		group,
+		modifiers,
+		multiple,
+		unselectable,
+		// local props
+		pressed,
+		iconPosition,
+		icon,
+		label,
+	}
+}

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -1,55 +1,83 @@
-<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 { toRefs } from 'vue'
-import { VvButtonGroupProps, VvButtonGroupEvents } from './VvButtonGroup'
-import { VV_BUTTON_GROUP } from '../../constants'
+	import type IButtonGroupState from '@/composables/group/types/IButtonGroupState'
+	import { toRefs, watchEffect, computed } from 'vue'
+	import { VV_BUTTON_GROUP } from '@/constants'
+	import { useProvideGroupState } from '@/composables/group/useProvideGroupState'
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import {
+		VvButtonGroupProps,
+		VvButtonGroupEvents,
+	} from '@/components/VvButtonGroup'
 
-//Composables
-import { useVModel } from '@vueuse/core'
-import { useProvideGroupState } from '../../composables/group/useProvideGroupState'
-import { useBemModifiers } from '@/composables/useModifiers'
+	// emit and props
+	const emit = defineEmits(VvButtonGroupEvents)
+	const props = defineProps(VvButtonGroupProps)
 
-//Emits, props, attrs, slots
-const emit = defineEmits(VvButtonGroupEvents)
-const props = defineProps(VvButtonGroupProps)
+	// data
+	const {
+		disabled,
+		toggle,
+		modifiers,
+		multiple,
+		unselectable,
+		itemModifiers,
+	} = toRefs(props)
+	watchEffect(() => {
+		if (typeof props.modelValue === 'string' && multiple.value) {
+			// eslint-disable-next-line
+			console.warn(
+				`[VvButtonGroup]: modelValue is a string but multiple is true.`,
+			)
+		}
+	})
+	const modelValue = computed({
+		get: () => {
+			if (!multiple.value) {
+				return Array.isArray(props.modelValue)
+					? props.modelValue[0]
+					: props.modelValue
+			}
+			return props.modelValue
+		},
+		set: (newValue) => {
+			if (
+				newValue !== undefined &&
+				(Array.isArray(props.modelValue) || multiple.value) &&
+				!Array.isArray(newValue)
+			) {
+				newValue = [newValue]
+			}
+			return emit('update:modelValue', newValue)
+		},
+	})
 
-//Data
-const modelValue = useVModel(props, 'modelValue', emit)
-const {
-	disabled,
-	vertical,
-	compact,
-	block,
-	rounded,
-	toggle,
-	action,
-	actionQuiet
-} = toRefs(props)
+	// provide
+	const groupState: IButtonGroupState = {
+		key: VV_BUTTON_GROUP,
+		modelValue,
+		disabled,
+		toggle,
+		multiple,
+		unselectable,
+		modifiers: itemModifiers,
+	}
+	useProvideGroupState(groupState)
 
-//Computed
-const { bemCssClasses: btnGroupClass } = useBemModifiers('vv-button-group', {
-	vertical,
-	compact,
-	block
-})
-
-// #region group
-const groupState: IButtonGroupState = {
-	key: VV_BUTTON_GROUP,
-	modelValue,
-	disabled,
-	toggle,
-	rounded,
-	action,
-	actionQuiet
-}
-useProvideGroupState(groupState)
-// #endregion group
+	// style
+	const { bemCssClasses } = useBemModifiers('vv-button-group', {
+		modifiers,
+	})
 </script>
+
+<template>
+	<div :class="bemCssClasses" role="group">
+		<!-- @slot Buttons slot -->
+		<slot />
+	</div>
+</template>

package/src/components/VvButtonGroup/index.ts

@@ -0,0 +1,19 @@
+import { DisabledProps, ModifiersProps } from '@/props'
+
+export const VvButtonGroupProps = {
+	...ModifiersProps,
+	...DisabledProps,
+	/**
+	 * String or String[] of css classes (modifiers) that will be provided to each button'
+	 */
+	itemModifiers: {
+		type: [String, Array<string>],
+		default: '',
+	},
+	toggle: { type: Boolean, default: false },
+	multiple: { type: Boolean, default: false },
+	unselectable: { type: Boolean, default: true },
+	modelValue: { type: [String, Array<string>], default: undefined },
+}
+
+export const VvButtonGroupEvents = ['update:modelValue']