@volverjs/ui-vue 0.0.1-beta.11

package/src/components/VvAccordion/VvAccordion.vue

@@ -0,0 +1,92 @@
+<template>
+	<details
+		:class="accordionClass"
+		:open="isOpen"
+		@toggle="onToggle"
+		@click="onClick">
+		<summary
+			:aria-controls="`#${accordionName}`"
+			:aria-expanded="isOpen"
+			class="vv-collapse__summary">
+			<slot name="header">
+				{{ title }}
+			</slot>
+		</summary>
+		<div :aria-hidden="!isOpen" class="vv-collapse__content">
+			<slot name="details">
+				{{ content }}
+			</slot>
+		</div>
+	</details>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, ref } from 'vue'
+import { v4 as uuidv4 } from 'uuid'
+import { VvAccordionProps, VvAccordionEvents } from './VvAccordion'
+
+//Composables
+import { toAccordionRefs } from './useAccordionProps'
+import { useBemModifiers } from '@/composables/useModifiers'
+import ObjectUtilities from '@/utils/ObjectUtilities'
+
+// Define component props, attributes and events emitted
+const props = defineProps(VvAccordionProps)
+const attrs = useAttrs()
+const emit = defineEmits(VvAccordionEvents)
+
+//Data
+const accordionName = attrs?.name || uuidv4()
+const {
+	modelValue,
+	modifiers,
+	bordered,
+	disabled = ref(false),
+	iconRight,
+	isInGroup,
+	accordion
+} = toAccordionRefs(props, emit)
+
+const isOpen = computed(() => {
+	if (!isInGroup.value) return props.open
+
+	return accordion.value
+		? ObjectUtilities.equals(accordionName, modelValue.value)
+		: ObjectUtilities.contains(accordionName, modelValue.value)
+})
+
+//Styles & bindings
+const { bemCssClasses: accordionClass } = useBemModifiers('vv-accordion', {
+	modifiers,
+	disabled,
+	markerRight: computed(() => iconRight.value),
+	bordered
+})
+
+// methods
+// Toggle is used for accordion single element
+const onToggle = (e: Event) => {
+	const target = e.target as HTMLDetailsElement
+	// Emit toggle opened value
+	emit('update:open', target.open)
+}
+
+// Click is handled for toggleElement from group modelValue (array or single string value)
+const onClick = (e: Event) => {
+	// Update modelValue watched from group provider
+	if (isInGroup.value) {
+		if (accordion.value) {
+			modelValue.value = isOpen.value ? null : accordionName
+		} else {
+			modelValue.value = isOpen.value
+				? ObjectUtilities.removeFromList(
+						accordionName,
+						modelValue.value
+				  )
+				: [...modelValue.value, accordionName]
+		}
+		// prevent auto-toggle in group mode
+		e.preventDefault()
+	}
+}
+</script>

package/src/components/VvAccordion/useAccordionProps.ts

@@ -0,0 +1,45 @@
+import type { VvAccordionPropsTypes } from './VvAccordion'
+import type IAccordionGroupState from '@/composables/group/types/IAccordionGroupState'
+
+import { toRefs } from 'vue'
+
+//Composables
+import { useInjectedGroupState } from '../../composables/group/useInjectedGroupState'
+
+//Constasts
+import { VV_ACCORDION_GROUP } from '../../constants'
+
+/**
+ * Estreae tutte le prop del componente VvButton che possono essere
+ * "sovrascritte" quando il buttone si trova in un gruppo.
+ */
+export function toAccordionRefs(
+	props: VvAccordionPropsTypes,
+	emit: (event: any, ...args: any[]) => void
+) {
+	const { group, isInGroup, getGroupOrLocalRef } =
+		useInjectedGroupState<IAccordionGroupState>(VV_ACCORDION_GROUP)
+
+	//Local props
+	const { modifiers } = toRefs(props)
+
+	//Group based props
+	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
+	const bordered = getGroupOrLocalRef('bordered', props)
+	const disabled = getGroupOrLocalRef('disabled', props)
+	const iconRight = getGroupOrLocalRef('iconRight', props)
+	const accordion = getGroupOrLocalRef('accordion', props)
+
+	return {
+		//Group based props
+		modelValue,
+		disabled,
+		bordered,
+		iconRight,
+		isInGroup,
+		group,
+		accordion,
+		//Local props
+		modifiers
+	}
+}

package/src/components/VvAccordionGroup/VvAccordionGroup.ts

@@ -0,0 +1,36 @@
+export interface VvAccordionGroupItem {
+	name?: string
+	title: string
+	content: string
+}
+
+export const VvAccordionGroupProps = {
+	/**
+	 * VModel
+	 */
+	modelValue: [String, Array],
+	/**
+	 * Change icon position to right side
+	 */
+	iconRight: Boolean,
+	/**
+	 * Add border to accordion item
+	 */
+	bordered: Boolean,
+	/**
+	 * Accordion items
+	 * @type VvAccordionGroupItem
+	 */
+	items: { type: Array<VvAccordionGroupItem>, default: () => [] },
+	/**
+	 * If true, close others accordion when an item is open
+	 */
+	accordion: Boolean,
+	/**
+	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+	 */
+	modifiers: [String, Array],
+	disabled: Boolean
+}
+
+export const VvAccordionGroupEvents = ['update:open']

package/src/components/VvAccordionGroup/VvAccordionGroup.vue

@@ -0,0 +1,63 @@
+<template>
+	<div :class="accGroupClass">
+		<template v-if="props.items?.length > 0">
+			<vv-accordion
+				v-for="item in items"
+				:key="item.title"
+				v-bind="{
+					name: item.name,
+					title: item.title,
+					content: item.content,
+					...props
+				}" />
+		</template>
+		<slot v-else />
+	</div>
+</template>
+
+<script setup lang="ts">
+import type IAccordionGroupState from '@/composables/group/types/IAccordionGroupState'
+
+import { toRefs } from 'vue'
+import { VV_ACCORDION_GROUP } from './../../constants'
+
+//Components
+import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
+
+//Composables
+import { useVModel } from '@vueuse/core'
+import { useProvideGroupState } from '../../composables/group/useProvideGroupState'
+import { useBemModifiers } from '../../composables/useModifiers'
+
+import {
+	VvAccordionGroupProps,
+	VvAccordionGroupEvents
+} from './VvAccordionGroup'
+
+// Define component props, attributes and events emitted
+const props = defineProps(VvAccordionGroupProps)
+const emit = defineEmits(VvAccordionGroupEvents)
+
+//Data
+const modelValue = useVModel(props, 'modelValue', emit)
+const { disabled, bordered, iconRight, accordion, modifiers, items } =
+	toRefs(props)
+
+// #region group
+const accordionGroupState: IAccordionGroupState = {
+	key: VV_ACCORDION_GROUP,
+	modelValue,
+	disabled,
+	bordered,
+	iconRight,
+	accordion
+}
+useProvideGroupState(accordionGroupState)
+// #endregion group
+
+//Styles & bindings
+const { bemCssClasses: accGroupClass } = useBemModifiers('vv-accordion-group', {
+	modifiers,
+	disabled
+})
+</script>

package/src/components/VvBadge/VvBadge.ts

@@ -0,0 +1,4 @@
+export const VvBadgeProps = {
+	value: [String, Number],
+	color: String
+}

package/src/components/VvBadge/VvBadge.vue

@@ -0,0 +1,12 @@
+<template>
+	<span class="vv-badge" :class="hasClass" role="status">{{ value }}</span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { VvBadgeProps } from './VvBadge'
+
+const props = defineProps(VvBadgeProps)
+
+const hasClass = computed(() => (props.color ? `vv-badge--${props.color}` : ''))
+</script>

package/src/components/VvBreadcrumb/VvBreadcrumb.ts

@@ -0,0 +1,14 @@
+import { ModifiersProps } from '../../props'
+
+export interface Route {
+	label: string
+	to?: string | { [key: string]: any }
+	title?: string
+	href?: string
+}
+
+export const VvBreadcrumbProps = {
+	...ModifiersProps,
+	routes: Array<Route>,
+	multiline: Boolean
+}

package/src/components/VvBreadcrumb/VvBreadcrumb.vue

@@ -0,0 +1,52 @@
+<template>
+	<nav :class="breadcrumbClass" aria-label="breadcrumbs">
+		<ol class="vv-breadcrumb__list">
+			<li
+				v-for="(route, index) in routes"
+				:key="`${route.label}-${index}`"
+				:class="{
+					'vv-breadcrumb__item': index < Number(routes?.length) - 1,
+					'vv-breadcrumb__item-active':
+						index === Number(routes?.length) - 1
+				}"
+				itemprop="itemListElement"
+				itemtype="https://schema.org/ListItem"
+				itemscope>
+				<component
+					:is="route.to ? 'router-link' : route.href ? 'a' : 'span'"
+					v-bind="route"
+					:class="{
+						'vv-breadcrumb__link':
+							index < Number(routes?.length) - 1
+					}"
+					:aria-current="
+						index === Number(routes?.length) - 1
+							? 'page'
+							: undefined
+					"
+					itemprop="item">
+					<!-- <span itemprop="name"> -->
+					{{ route.label }}
+					<!-- </span> -->
+				</component>
+				<meta itemprop="position" :content="`${index + 1}`" />
+			</li>
+		</ol>
+	</nav>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import { useBemModifiers } from '../../composables/useModifiers'
+import { VvBreadcrumbProps } from './VvBreadcrumb'
+
+const props = defineProps(VvBreadcrumbProps)
+
+//Data
+const { modifiers, multiline } = toRefs(props)
+
+const { bemCssClasses: breadcrumbClass } = useBemModifiers('vv-breadcrumb', {
+	modifiers,
+	multiline
+})
+</script>

package/src/components/VvButton/VvButton.ts

@@ -0,0 +1,117 @@
+import type { PropType, ExtractPropTypes } from 'vue'
+
+export enum ButtonIconPosition {
+	left = 'left',
+	right = 'right',
+	top = 'top',
+	bottom = 'bottom'
+}
+
+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 = {
+	/**
+	 * Button icon
+	 */
+	icon: String,
+	/**
+	 * Button icon position
+	 */
+	iconPosition: {
+		type: String as PropType<ButtonIconPosition>,
+		default: ButtonIconPosition.left,
+		validator: (value: string) => value in ButtonIconPosition
+	},
+	/**
+	 * Button label
+	 */
+	label: String,
+	/**
+	 * 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
+	},
+	/**
+	 * Create block level button that span the full width of a parent.
+	 */
+	block: Boolean,
+	/**
+	 * Button active state.
+	 */
+	active: Boolean,
+	/**
+	 * Button rounded.
+	 */
+	rounded: Boolean,
+	/**
+	 * Button disabled
+	 */
+	disabled: Boolean,
+	/**
+	 * Button with min-width
+	 */
+	fullBleed: Boolean,
+	/**
+	 * Button action mode
+	 */
+	action: Boolean,
+	/**
+	 * Button action mode
+	 */
+	actionQuiet: Boolean,
+	/**
+	 * Button selected mode
+	 */
+	selected: Boolean,
+	/**
+	 * The variant of the button
+	 * @values
+	 * @defaultvalue default
+	 */
+	modifiers: [Array, String]
+}
+
+type _VvButtonPropsType = typeof VvButtonProps
+export type VvButtonPropsTypes = ExtractPropTypes<_VvButtonPropsType>

package/src/components/VvButton/VvButton.vue

@@ -0,0 +1,189 @@
+<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 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/useButtonGroupProps.ts

@@ -0,0 +1,51 @@
+import { toRefs } from 'vue'
+import type IButtonGroupState from '../../composables/group/types/IButtonGroupState'
+
+//Composables
+import { useInjectedGroupState } from '../../composables/group/useInjectedGroupState'
+
+//Constasts
+import { VV_BUTTON_GROUP } from '../../constants'
+
+import type { VvButtonPropsTypes } from './VvButton'
+
+/**
+ * Estreae tutte le prop del componente VvButton che possono essere
+ * "sovrascritte" quando il buttone si trova in un gruppo.
+ */
+export function toButtonRefs(props: VvButtonPropsTypes) {
+	const { group, isInGroup, getGroupOrLocalRef } =
+		useInjectedGroupState<IButtonGroupState>(VV_BUTTON_GROUP)
+
+	//Local props
+	const { modifiers, fullBleed, iconPosition, icon, label, block, selected } =
+		toRefs(props)
+
+	//Group based props
+	const modelValue = getGroupOrLocalRef('modelValue', props)
+	const disabled = getGroupOrLocalRef('disabled', props)
+	const toggle = getGroupOrLocalRef('toggle', props)
+	const rounded = getGroupOrLocalRef('rounded', props)
+	const action = getGroupOrLocalRef('action', props)
+	const actionQuiet = getGroupOrLocalRef('actionQuiet', props)
+
+	return {
+		//Group based props
+		modelValue,
+		disabled,
+		toggle,
+		isInGroup,
+		group,
+		//Local props
+		modifiers,
+		action,
+		actionQuiet,
+		selected,
+		block,
+		rounded,
+		fullBleed,
+		iconPosition,
+		icon,
+		label
+	}
+}