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

package/src/components/VvAccordion/VvAccordion.vue

@@ -1,92 +1,108 @@
+<script lang="ts">
+	export default {
+		name: 'VvAccordion',
+	}
+</script>
+
+<script setup lang="ts">
+	import { computed, useAttrs, ref } from 'vue'
+	import { useToggle } from '@vueuse/core'
+	import { nanoid } from 'nanoid'
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import {
+		VvAccordionEvents,
+		VvAccordionProps,
+		useGroupProps,
+	} from '@/components/VvAccordion'
+
+	// props, attrs and emit
+	const props = defineProps(VvAccordionProps)
+	const attrs = useAttrs()
+	const emit = defineEmits(VvAccordionEvents)
+
+	// data
+	const accordionName = props.name || (attrs?.id as string) || nanoid()
+	const {
+		modifiers,
+		title,
+		content,
+		disabled,
+		collapse,
+		modelValue,
+		isInGroup,
+	} = useGroupProps(props, emit)
+	const localModelValue = ref(false)
+	const isOpen = computed({
+		get: () => {
+			if (isInGroup.value) {
+				if (collapse.value && Array.isArray(modelValue.value)) {
+					return modelValue.value.includes(accordionName)
+				}
+				return modelValue.value === accordionName
+			}
+			// localModelValue is used when the accordion is not in a group
+			if (modelValue.value === undefined) {
+				return localModelValue.value
+			}
+			return modelValue.value as boolean
+		},
+		set: (newValue) => {
+			if (isInGroup.value) {
+				if (collapse.value && Array.isArray(modelValue.value)) {
+					if (newValue) {
+						modelValue.value.push(accordionName)
+						return
+					}
+					modelValue.value = modelValue.value.filter(
+						(name: string) => name !== accordionName,
+					)
+					return
+				}
+				modelValue.value = newValue ? accordionName : null
+				return
+			}
+			// localModelValue is used when the accordion is not in a group
+			if (
+				modelValue.value === undefined &&
+				typeof newValue === 'boolean'
+			) {
+				localModelValue.value = newValue
+				return
+			}
+			modelValue.value = newValue
+		},
+	})
+
+	// styles
+	const { bemCssClasses } = useBemModifiers('vv-accordion', {
+		modifiers,
+		disabled,
+	})
+
+	// methods
+	const onClick = useToggle(isOpen)
+</script>
+
 <template>
 	<details
-		:class="accordionClass"
+		:id="accordionName"
+		:class="bemCssClasses"
 		:open="isOpen"
-		@toggle="onToggle"
-		@click="onClick">
+		@click.prevent="onClick()"
+	>
 		<summary
-			:aria-controls="`#${accordionName}`"
+			:aria-controls="accordionName"
 			:aria-expanded="isOpen"
-			class="vv-collapse__summary">
-			<slot name="header">
+			class="vv-collapse__summary"
+		>
+			<slot name="summary" v-bind="{ open: isOpen }">
 				{{ title }}
 			</slot>
 		</summary>
 		<div :aria-hidden="!isOpen" class="vv-collapse__content">
-			<slot name="details">
+			<slot name="details" v-bind="{ open: isOpen }">
 				{{ 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/index.ts

@@ -0,0 +1,72 @@
+import { type ExtractPropTypes, toRefs, type Ref } from 'vue'
+import type IAccordionGroupState from '@/composables/group/types/IAccordionGroupState'
+import { useInjectedGroupState } from '@/composables/group/useInjectedGroupState'
+import { VV_ACCORDION_GROUP } from '@/constants'
+
+export const VvAccordionProps = {
+	/**
+	 * Accordion name
+	 */
+	name: String,
+	/**
+	 * Header title
+	 */
+	title: String,
+	/**
+	 * Content text
+	 */
+	content: String,
+	/**
+	 * (Optional) Defines if item is open. Event "update:modelValue" is emitted on accordion header click
+	 */
+	modelValue: {
+		type: Boolean,
+		default: undefined,
+	},
+	/**
+	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+	 */
+	modifiers: [String, Array],
+	/**
+	 * If true, the accordion will be disabled
+	 */
+	disabled: Boolean,
+}
+
+export const VvAccordionEvents = ['update:modelValue']
+export type VvAccordionPropsTypes = ExtractPropTypes<typeof VvAccordionProps>
+
+/**
+ * Merges local and group props
+ */
+export function useGroupProps(
+	props: VvAccordionPropsTypes,
+	emit: (event: string, value: unknown) => void,
+) {
+	const { group, isInGroup, getGroupOrLocalRef } =
+		useInjectedGroupState<IAccordionGroupState>(VV_ACCORDION_GROUP)
+
+	// local props
+	const { title, content } = toRefs(props)
+
+	// group props
+	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
+	const disabled = getGroupOrLocalRef('disabled', props) as Ref<boolean>
+	const collapse = getGroupOrLocalRef('collapse', props) as Ref<boolean>
+	const modifiers = getGroupOrLocalRef('modifiers', props) as Ref<
+		Array<string> | string
+	>
+
+	return {
+		// group props
+		modelValue,
+		disabled,
+		isInGroup,
+		group,
+		collapse,
+		modifiers,
+		// local props
+		title,
+		content,
+	}
+}

package/src/components/VvAccordionGroup/VvAccordionGroup.vue

@@ -1,6 +1,87 @@
+<script lang="ts">
+	export default {
+		name: 'VvAccordionGroup',
+	}
+</script>
+
+<script setup lang="ts">
+	import { type Ref, computed, ref, toRefs, watchEffect } from 'vue'
+	import type IAccordionGroupState from '@/composables/group/types/IAccordionGroupState'
+	import { VV_ACCORDION_GROUP } from '@/constants'
+	import { useProvideGroupState } from '@/composables/group/useProvideGroupState'
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+	import {
+		VvAccordionGroupProps,
+		VvAccordionGroupEvents,
+	} from '@/components/VvAccordionGroup/'
+
+	// props and emit
+	const props = defineProps(VvAccordionGroupProps)
+	const emit = defineEmits(VvAccordionGroupEvents)
+
+	// data
+	const { disabled, collapse, modifiers, itemModifiers, items } =
+		toRefs(props)
+	watchEffect(() => {
+		if (typeof props.modelValue === 'string' && collapse.value) {
+			// eslint-disable-next-line
+			console.warn(
+				`[VvAccordionGroup]: modelValue is a string but collapse is true.`,
+			)
+		}
+	})
+	const localModelValue: Ref<string[]> = ref([])
+	const modelValue = computed({
+		get: () => {
+			if (props.modelValue !== undefined) {
+				if (!collapse.value) {
+					return Array.isArray(props.modelValue)
+						? props.modelValue[0]
+						: props.modelValue
+				}
+				return props.modelValue
+			}
+			return !collapse.value
+				? localModelValue.value?.[0]
+				: localModelValue.value
+		},
+		set: (newValue) => {
+			if (props.modelValue !== undefined) {
+				if (
+					(Array.isArray(props.modelValue) || collapse.value) &&
+					!Array.isArray(newValue)
+				) {
+					newValue = [newValue]
+				}
+				return emit('update:modelValue', newValue)
+			}
+			localModelValue.value = Array.isArray(newValue)
+				? newValue
+				: [newValue]
+		},
+	})
+
+	// provide
+	const accordionGroupState: IAccordionGroupState = {
+		key: VV_ACCORDION_GROUP,
+		modelValue,
+		disabled,
+		collapse,
+		modifiers: itemModifiers,
+	}
+	useProvideGroupState(accordionGroupState)
+
+	// styles
+	const { bemCssClasses } = useBemModifiers('vv-accordion-group', {
+		modifiers,
+		disabled,
+	})
+</script>
+
 <template>
-	<div :class="accGroupClass">
-		<template v-if="props.items?.length > 0">
+	<div :class="bemCssClasses">
+		<slot>
 			<vv-accordion
 				v-for="item in items"
 				:key="item.title"
@@ -8,56 +89,15 @@
 					name: item.name,
 					title: item.title,
 					content: item.content,
-					...props
-				}" />
-		</template>
-		<slot v-else />
+				}"
+			>
+				<template #header="data">
+					<slot v-bind="data" :name="`header::${item.name}`" />
+				</template>
+				<template #details="data">
+					<slot v-bind="data" :name="`details::${item.name}`" />
+				</template>
+			</vv-accordion>
+		</slot>
 	</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/VvAccordionGroup/{VvAccordionGroup.ts → index.ts}

@@ -1,7 +1,9 @@
 export interface VvAccordionGroupItem {
-	name?: string
 	title: string
 	content: string
+	name?: string
+	disabled?: boolean
+	modifiers?: string | string[]
 }
 
 export const VvAccordionGroupProps = {
@@ -9,28 +11,30 @@ 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
+	 * If true, accordion items stay open when another item is opened
 	 */
-	accordion: Boolean,
+	collapse: Boolean,
 	/**
-	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion-group--'
 	 */
 	modifiers: [String, Array],
-	disabled: Boolean
+	/**
+	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
+	 */
+	itemModifiers: {
+		type: [String, Array<string>],
+		default: '',
+	},
+	/**
+	 * If true, the accordion items will be disabled
+	 */
+	disabled: Boolean,
 }
 
-export const VvAccordionGroupEvents = ['update:open']
+export const VvAccordionGroupEvents = ['update:modelValue']

package/src/components/VvBadge/VvBadge.vue

@@ -1,12 +1,21 @@
-<template>
-	<span class="vv-badge" :class="hasClass" role="status">{{ value }}</span>
-</template>
+<script lang="ts">
+	export default {
+		name: 'VvBadge',
+	}
+</script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { VvBadgeProps } from './VvBadge'
-
-const props = defineProps(VvBadgeProps)
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import { VvBadgeProps } from '@/components/VvBadge'
 
-const hasClass = computed(() => (props.color ? `vv-badge--${props.color}` : ''))
+	const props = defineProps(VvBadgeProps)
+	const { bemCssClasses } = useBemModifiers('vv-badge', {
+		modifiers: props.modifiers,
+	})
 </script>
+
+<template>
+	<span :class="bemCssClasses" role="status">
+		<slot>{{ value }}</slot>
+	</span>
+</template>

package/src/components/VvBadge/index.ts

@@ -0,0 +1,6 @@
+import { ModifiersProps } from '@/props'
+
+export const VvBadgeProps = {
+	...ModifiersProps,
+	value: [String, Number],
+}

package/src/components/VvBreadcrumb/VvBreadcrumb.vue

@@ -1,5 +1,21 @@
+<script lang="ts">
+	export default {
+		name: 'VvBreadcrumb',
+	}
+</script>
+
+<script setup lang="ts">
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import { VvBreadcrumbProps } from '@/components/VvBreadcrumb'
+
+	const props = defineProps(VvBreadcrumbProps)
+	const { bemCssClasses } = useBemModifiers('vv-breadcrumb', {
+		modifiers: props.modifiers,
+	})
+</script>
+
 <template>
-	<nav :class="breadcrumbClass" aria-label="breadcrumbs">
+	<nav :class="bemCssClasses" aria-label="breadcrumbs">
 		<ol class="vv-breadcrumb__list">
 			<li
 				v-for="(route, index) in routes"
@@ -7,46 +23,32 @@
 				:class="{
 					'vv-breadcrumb__item': index < Number(routes?.length) - 1,
 					'vv-breadcrumb__item-active':
-						index === Number(routes?.length) - 1
+						index === Number(routes?.length) - 1,
 				}"
 				itemprop="itemListElement"
 				itemtype="https://schema.org/ListItem"
-				itemscope>
+				itemscope
+			>
 				<component
 					:is="route.to ? 'router-link' : route.href ? 'a' : 'span'"
 					v-bind="route"
 					:class="{
 						'vv-breadcrumb__link':
-							index < Number(routes?.length) - 1
+							index < Number(routes?.length) - 1,
 					}"
 					:aria-current="
 						index === Number(routes?.length) - 1
 							? 'page'
 							: undefined
 					"
-					itemprop="item">
-					<!-- <span itemprop="name"> -->
-					{{ route.label }}
-					<!-- </span> -->
+					itemprop="item"
+				>
+					<slot name="label" v-bind="{ route, index }">
+						{{ route.label }}
+					</slot>
 				</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/VvBreadcrumb/{VvBreadcrumb.ts → index.ts}

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