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

package/src/components/VvAccordion/VvAccordion.vue

@@ -1,92 +1,96 @@
-<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 lang="ts">
+export default {
+	name: 'VvAccordion'
+}
+</script>
 
 <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 { useToggle } from '@vueuse/core'
+import { nanoid } from 'nanoid'
 import { useBemModifiers } from '@/composables/useModifiers'
-import ObjectUtilities from '@/utils/ObjectUtilities'
+import {
+	VvAccordionEvents,
+	VvAccordionProps,
+	useGroupProps
+} from '@/components/VvAccordion'
 
-// Define component props, attributes and events emitted
+// props, attrs and emit
 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)
+// 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 & bindings
-const { bemCssClasses: accordionClass } = useBemModifiers('vv-accordion', {
+// styles
+const { bemCssClasses } = useBemModifiers('vv-accordion', {
 	modifiers,
-	disabled,
-	markerRight: computed(() => iconRight.value),
-	bordered
+	disabled
 })
 
 // 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()
-	}
-}
+const onClick = useToggle(isOpen)
 </script>
+
+<template>
+	<details
+		:id="accordionName"
+		:class="bemCssClasses"
+		:open="isOpen"
+		@click.prevent="onClick()">
+		<summary
+			:aria-controls="accordionName"
+			:aria-expanded="isOpen"
+			class="vv-collapse__summary">
+			<slot name="header" v-bind="{ open: isOpen }">
+				{{ title }}
+			</slot>
+		</summary>
+		<div :aria-hidden="!isOpen" class="vv-collapse__content">
+			<slot name="details" v-bind="{ open: isOpen }">
+				{{ content }}
+			</slot>
+		</div>
+	</details>
+</template>

package/src/components/VvAccordion/index.ts

@@ -0,0 +1,69 @@
+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 { modifiers, 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>
+
+	return {
+		// group props
+		modelValue,
+		disabled,
+		isInGroup,
+		group,
+		collapse,
+		// local props
+		modifiers,
+		title,
+		content
+	}
+}

package/src/components/VvAccordionGroup/VvAccordionGroup.vue

@@ -1,63 +1,99 @@
-<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 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 { 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 { 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 './VvAccordionGroup'
+} from '@/components/VvAccordionGroup/'
 
-// Define component props, attributes and events emitted
+// props and emit
 const props = defineProps(VvAccordionGroupProps)
 const emit = defineEmits(VvAccordionGroupEvents)
 
-//Data
-const modelValue = useVModel(props, 'modelValue', emit)
-const { disabled, bordered, iconRight, accordion, modifiers, items } =
-	toRefs(props)
+// data
+const { disabled, collapse, modifiers, items } = toRefs(props)
+const isCollapse = computed(
+	() =>
+		collapse.value &&
+		(props.modelValue === undefined || Array.isArray(props.modelValue))
+)
+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 (!isCollapse.value) {
+				return Array.isArray(props.modelValue)
+					? props.modelValue[0]
+					: props.modelValue
+			}
+			return props.modelValue
+		}
+		return !isCollapse.value
+			? localModelValue.value?.[0]
+			: localModelValue.value
+	},
+	set: (newValue) => {
+		if (props.modelValue !== undefined) {
+			return emit('update:modelValue', newValue)
+		}
+		localModelValue.value = Array.isArray(newValue) ? newValue : [newValue]
+	}
+})
 
-// #region group
 const accordionGroupState: IAccordionGroupState = {
 	key: VV_ACCORDION_GROUP,
 	modelValue,
 	disabled,
-	bordered,
-	iconRight,
-	accordion
+	collapse: isCollapse
 }
 useProvideGroupState(accordionGroupState)
-// #endregion group
 
-//Styles & bindings
-const { bemCssClasses: accGroupClass } = useBemModifiers('vv-accordion-group', {
+// styles
+const { bemCssClasses } = useBemModifiers('vv-accordion-group', {
 	modifiers,
 	disabled
 })
 </script>
+
+<template>
+	<div :class="bemCssClasses">
+		<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,
+					disabled: item.disabled,
+					modifiers
+				}">
+				<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>
+		</template>
+		<slot v-else />
+	</div>
+</template>

package/src/components/VvAccordionGroup/{VvAccordionGroup.ts → index.ts}

@@ -1,7 +1,8 @@
 export interface VvAccordionGroupItem {
-	name?: string
 	title: string
 	content: string
+	name?: string
+	disabled?: boolean
 }
 
 export const VvAccordionGroupProps = {
@@ -9,28 +10,23 @@ 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--'
 	 */
 	modifiers: [String, Array],
+	/**
+	 * 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'
+import { useBemModifiers } from '@/composables/useModifiers'
+import { VvBadgeProps } from '@/components/VvBadge'
 
 const props = defineProps(VvBadgeProps)
-
-const hasClass = computed(() => (props.color ? `vv-badge--${props.color}` : ''))
+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,22 @@
+<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,
+	multiline: props.multiline
+})
+</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"
@@ -25,28 +42,10 @@
 							: 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/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
 }