@volverjs/ui-vue 0.0.5 → 0.0.6-beta.15

package/src/components/VvAccordion/index.ts

@@ -1,8 +1,10 @@
 import type { ExtractPropTypes, Ref } from 'vue'
 import type { AccordionGroupState } from '../../types/group'
 import { INJECTION_KEY_ACCORDION_GROUP } from '../../constants'
+import { ModifiersProps } from '@/props'
 
 export const VvAccordionProps = {
+	...ModifiersProps,
 	/**
 	 * Accordion name
 	 */
@@ -22,10 +24,6 @@ export const VvAccordionProps = {
 		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
 	 */
@@ -58,12 +56,29 @@ export function useGroupProps(
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
 	const not = getGroupOrLocalRef('not', props) as Ref<boolean>
 	const collapse = getGroupOrLocalRef('collapse', props) as Ref<boolean>
-	const modifiers = getGroupOrLocalRef('modifiers', props) as Ref<
-		Array<string> | string
-	>
 	const disabled = computed(() =>
 		Boolean(props.disabled || group?.value?.disabled.value),
 	)
+	// merge local and group modifiers
+	const modifiers = computed(() => {
+		let localModifiers = props.modifiers
+		let groupModifiers = group?.value.modifiers.value
+
+		const toReturn = new Set<string>()
+		if (localModifiers) {
+			if (!Array.isArray(localModifiers)) {
+				localModifiers = localModifiers.split(' ')
+			}
+			localModifiers.forEach((modifier) => toReturn.add(modifier))
+		}
+		if (groupModifiers) {
+			if (!Array.isArray(groupModifiers)) {
+				groupModifiers = groupModifiers.split(' ')
+			}
+			groupModifiers.forEach((modifier) => toReturn.add(modifier))
+		}
+		return Array.from(toReturn)
+	})
 
 	return {
 		// group props

package/src/components/VvAccordionGroup/index.ts

@@ -1,3 +1,5 @@
+import { ModifiersProps } from '@/props'
+
 export interface VvAccordionGroupItem {
 	title: string
 	content: string
@@ -7,6 +9,7 @@ export interface VvAccordionGroupItem {
 }
 
 export const VvAccordionGroupProps = {
+	...ModifiersProps,
 	/**
 	 * VModel
 	 */
@@ -15,20 +18,19 @@ export const VvAccordionGroupProps = {
 	 * Accordion items
 	 * @type VvAccordionGroupItem
 	 */
-	items: { type: Array<VvAccordionGroupItem>, default: () => [] },
+	items: {
+		type: Array as PropType<VvAccordionGroupItem[]>,
+		default: () => [],
+	},
 	/**
 	 * If true, accordion items stay open when another item is opened
 	 */
 	collapse: Boolean,
-	/**
-	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion-group--'
-	 */
-	modifiers: [String, Array],
 	/**
 	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
 	 */
 	itemModifiers: {
-		type: [String, Array<string>],
+		type: [String, Array] as PropType<string | string[]>,
 		default: '',
 	},
 	/**

package/src/components/VvAction/VvAction.vue

@@ -67,7 +67,7 @@
 		const toReturn = {
 			...dropdownAria?.value,
 			'aria-pressed': pressed.value ? true : undefined,
-			role,
+			role: role?.value,
 		}
 		switch (hasTag.value) {
 			case ActionTag.a:

package/src/components/VvAlert/VvAlert.vue

@@ -0,0 +1,54 @@
+<script lang="ts">
+	export default {
+		name: 'VvAlert',
+	}
+</script>
+
+<script setup lang="ts">
+	import VvIcon from '../VvIcon/VvIcon.vue'
+	import { useVvAlert, VvAlertEvents, VvAlertProps } from '.'
+
+	const props = defineProps(VvAlertProps)
+	const emit = defineEmits(VvAlertEvents)
+	const { hasProps, hasTitleId, hasIcon, close } = useVvAlert(props, emit)
+	defineExpose({ close })
+</script>
+
+<template>
+	<div v-bind="hasProps">
+		<div class="vv-alert__header">
+			<VvIcon v-if="hasIcon" v-bind="hasIcon" class="vv-alert__icon" />
+			<!-- @slot Header slot -->
+			<slot name="header">
+				<!-- @slot Before title slot -->
+				<slot name="title::before" />
+				<strong :id="hasTitleId" class="vv-alert__title">
+					{{ title }}
+				</strong>
+				<!-- @slot After title slot -->
+				<slot name="title::after" />
+			</slot>
+			<button
+				v-if="dismissable || autoClose"
+				class="vv-alert__close"
+				type="button"
+				:aria-label="closeLabel"
+				@click.stop="close"
+			>
+				<div class="vv-alert__close-mask"></div>
+			</button>
+		</div>
+		<div v-if="$slots.default || content" class="vv-alert__content">
+			<!-- @slot Content slot -->
+			<slot>
+				{{ content }}
+			</slot>
+		</div>
+		<div v-if="$slots.footer || footer" class="vv-alert__footer">
+			<!-- @slot Footer slot -->
+			<slot name="footer">
+				{{ footer }}
+			</slot>
+		</div>
+	</div>
+</template>

package/src/components/VvAlert/index.ts

@@ -0,0 +1,162 @@
+import { IconProps, IdProps, ModifiersProps } from '@/props'
+import type { ExtractPropTypes, PropType } from 'vue'
+import { withModifiers } from 'vue'
+
+export const VvAlertProps = {
+	...IdProps,
+	...ModifiersProps,
+	...IconProps,
+	/**
+	 * The alert is dismissable
+	 * @default false
+	 * @type boolean
+	 */
+	dismissable: {
+		type: Boolean,
+		default: false,
+	},
+	/**
+	 * The alert auto close after the specified time in milliseconds
+	 * @default 0
+	 * @type number
+	 */
+	autoClose: {
+		type: Number,
+		default: 0,
+	},
+	/**
+	 * The alert close label
+	 * @default 'Close'
+	 * @type string
+	 */
+	closeLabel: {
+		type: String,
+		default: 'Close',
+	},
+	/**
+	 * The alert title
+	 * @default ''
+	 * @type string
+	 */
+	title: {
+		type: String,
+		default: '',
+	},
+	/**
+	 * The alert content
+	 * @default ''
+	 * @type string
+	 */
+	content: {
+		type: String,
+		default: '',
+	},
+	/**
+	 * The alert footer
+	 * @default ''
+	 * @type string
+	 */
+	footer: {
+		type: String,
+		default: '',
+	},
+	/**
+	 * The alert role
+	 * @default 'alert'
+	 * @type string
+	 * @values 'alert', 'alertdialog'
+	 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role
+	 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_role
+	 */
+	role: {
+		type: String as PropType<'alert' | 'alertdialog'>,
+		default: 'alert',
+	},
+}
+
+export const VvAlertEvents = ['close']
+
+export const useVvAlert = (
+	props: Readonly<ExtractPropTypes<typeof VvAlertProps>>,
+	emit: (event: string, ...args: unknown[]) => void,
+) => {
+	const { bus } = useInjectedAlertGroup()
+
+	const hasId = useUniqueId(computed(() => props.id))
+	const hasTitleId = computed(() => `${hasId.value}-title`)
+
+	// icon
+	const hasIcon = computed(() =>
+		typeof props.icon === 'string' ? { name: props.icon } : props.icon,
+	)
+
+	// props
+	const hasClass = useModifiers(
+		'vv-alert',
+		computed(() => props.modifiers),
+		computed(() => ({
+			dismissable: props.autoClose > 0 || props.dismissable,
+			'auto-close': props.autoClose > 0,
+			hover: isMouseover.value,
+		})),
+	)
+	const hasStyle = computed(() => ({
+		'--alert-duration': `${props.autoClose}ms`,
+	}))
+
+	// close
+	const close = () => {
+		if (timeout) {
+			clearTimeout(timeout)
+		}
+		emit('close', hasId.value)
+		bus?.emit('close', hasId.value)
+	}
+
+	// auto close
+	let timeout: ReturnType<typeof setTimeout>
+	watch(
+		() => props.autoClose,
+		(value) => {
+			if (value > 0) {
+				timeout = setTimeout(close, value)
+				return
+			}
+			if (timeout) {
+				clearTimeout(timeout)
+			}
+		},
+		{
+			immediate: true,
+		},
+	)
+
+	// listeners
+	const isMouseover = ref(false)
+	const onMouseover = withModifiers(() => {
+		isMouseover.value = true
+		if (timeout) {
+			clearTimeout(timeout)
+		}
+	}, ['passive'])
+	const onMouseleave = withModifiers(() => {
+		isMouseover.value = false
+		if (props.autoClose > 0) {
+			timeout = setTimeout(close, props.autoClose)
+		}
+	}, ['passive'])
+
+	return {
+		close,
+		hasIcon,
+		hasTitleId,
+		hasProps: computed(() => ({
+			onMouseover,
+			onMouseleave,
+			class: hasClass.value,
+			style: hasStyle.value,
+			role: props.role,
+			'aria-labelledby': hasTitleId.value,
+		})),
+	}
+}

package/src/components/VvAlertGroup/VvAlertGroup.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+	export default {
+		name: 'VvAlertGroup',
+	}
+</script>
+
+<script setup lang="ts">
+	import { useVvAlertGroup, VvAlertGroupEvents, VvAlertGroupProps } from '.'
+	import VvAlert from '../VvAlert/VvAlert.vue'
+
+	const props = defineProps(VvAlertGroupProps)
+	const emit = defineEmits(VvAlertGroupEvents)
+	const { hasProps, hasTransition } = useVvAlertGroup(props, emit)
+</script>
+
+<template>
+	<div v-bind="hasProps">
+		<!-- @slot The slot before alert list  -->
+		<slot name="before" />
+		<TransitionGroup
+			tag="div"
+			role="group"
+			:name="hasTransition"
+			class="vv-alert-group__list"
+		>
+			<!-- @slot The slot for alert list  -->
+			<slot>
+				<VvAlert v-for="item in items" v-bind="item" :key="item.id" />
+			</slot>
+		</TransitionGroup>
+		<!-- @slot The slot after alert list  -->
+		<slot name="after" />
+	</div>
+</template>

package/src/components/VvAlertGroup/index.ts

@@ -0,0 +1,122 @@
+import { ModifiersProps } from '@/props'
+import type { ExtractPropTypes } from 'vue'
+
+export type AlertItem = {
+	id: string | number
+	title?: string
+	icon?: string | Record<string, unknown>
+	content?: string
+	footer?: string
+	modifiers?: string | string[]
+	dismissable?: boolean
+	autoClose?: number
+	closeLabel?: string
+	role?: 'alert' | 'alertdialog'
+}
+
+export const VvAlertGroupProps = {
+	...ModifiersProps,
+	name: {
+		type: String,
+		required: true,
+	},
+	items: {
+		type: Array as PropType<AlertItem[]>,
+		default: () => [],
+	},
+	stack: {
+		type: Boolean,
+		default: false,
+	},
+	reverse: {
+		type: Boolean,
+		default: false,
+	},
+	inline: {
+		type: String as PropType<'start' | 'middle' | 'end'>,
+		default: undefined,
+	},
+	block: {
+		type: String as PropType<'top' | 'center' | 'bottom'>,
+		default: undefined,
+	},
+	position: {
+		type: String as PropType<'absolute' | 'fixed'>,
+		default: undefined,
+	},
+	transition: {
+		type: String,
+		default: undefined,
+	},
+}
+
+export const VvAlertGroupEvents = ['close']
+
+export const useVvAlertGroup = (
+	props: Readonly<ExtractPropTypes<typeof VvAlertGroupProps>>,
+	emit: (event: string, ...args: unknown[]) => void,
+) => {
+	const bus = useProvideAlertGroup({ name: computed(() => props.name) })
+
+	// check props block and inline coexist
+	if ((props.block && !props.inline) || (!props.block && props.inline)) {
+		// eslint-disable-next-line
+		console.warn(
+			`[VvAlertGroup]: block and inline props must coexist at the same time.`,
+		)
+	}
+
+	// props
+	const hasClass = computed(() => {
+		const toReturn: (string | Record<string, boolean>)[] = [
+			useModifiers(
+				'vv-alert-group',
+				computed(() => props.modifiers),
+				computed(() => ({
+					stack: props.stack,
+					reverse: props.reverse,
+					absolute: props.position === 'absolute',
+					fixed: props.position === 'fixed',
+				})),
+			).value,
+		]
+		if (props.inline && props.block) {
+			toReturn.push(`vv-alert-group--${props.block}-${props.inline}`)
+		}
+		return toReturn
+	})
+
+	const hasTransition = computed(() => {
+		if (props.transition) {
+			return props.transition
+		}
+		if (!props.position) {
+			return 'vv-alert--fade'
+		}
+		if (props.inline === 'start') {
+			return 'vv-alert--fade-inline-start'
+		}
+		if (props.inline === 'end') {
+			return 'vv-alert--fade-inline-end'
+		}
+		if (props.block === 'top') {
+			return 'vv-alert--fade-block-top'
+		}
+		if (props.block === 'bottom') {
+			return 'vv-alert--fade-block-bottom'
+		}
+		return 'vv-alert--fade'
+	})
+
+	// listeners
+	bus.on('close', (id: string) => {
+		emit('close', id)
+	})
+
+	return {
+		hasTransition,
+		hasProps: computed(() => ({
+			class: hasClass.value,
+		})),
+	}
+}

package/src/components/VvAvatar/VvAvatar.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+	import { VvAvatarProps } from '@/components/VvAvatar'
+
+	const props = defineProps(VvAvatarProps)
+	const { modifiers } = toRefs(props)
+
+	// bem css classes
+	const bemCssClasses = useModifiers('vv-avatar', modifiers)
+</script>
+
+<template>
+	<span
+		:class="bemCssClasses"
+		:role="imgSrc ? undefined : 'img'"
+		:aria-label="imgSrc ? undefined : 'avatar'"
+	>
+		<slot name="default">
+			<img v-if="imgSrc" :src="imgSrc" alt="avatar" />
+		</slot>
+	</span>
+</template>

package/src/components/VvAvatar/index.ts

@@ -0,0 +1,9 @@
+import { ModifiersProps } from '@/props'
+
+export const VvAvatarProps = {
+	...ModifiersProps,
+	/**
+	 * Image src for avatar
+	 */
+	imgSrc: String,
+}

package/src/components/VvAvatarGroup/VvAvatarGroup.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+	import { VvAvatarGroupProps } from '@/components/VvAvatarGroup'
+	import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+
+	const props = defineProps(VvAvatarGroupProps)
+	const { modifiers, items, toShow, totalItems, avatarModifiers } =
+		toRefs(props)
+
+	// bem css classes
+	const bemCssClasses = useModifiers('vv-avatar-group', modifiers)
+
+	const stringModifiers = computed(() => {
+		if (avatarModifiers?.value && Array.isArray(avatarModifiers?.value)) {
+			return avatarModifiers.value.join(' ')
+		}
+		return avatarModifiers?.value || ''
+	})
+
+	const avatarItems = computed(() => {
+		return items.value.slice(0, toShow.value).map((item) => {
+			let modifiers: string[] = []
+			let itemModifiers: string[] = []
+
+			if (avatarModifiers?.value) {
+				modifiers = Array.isArray(avatarModifiers?.value)
+					? avatarModifiers?.value
+					: [avatarModifiers?.value]
+			}
+
+			if (item.modifiers) {
+				itemModifiers = Array.isArray(item.modifiers)
+					? item.modifiers
+					: [item.modifiers]
+			}
+
+			return {
+				...item,
+				key: item.key || useUniqueId().value,
+				modifiers: [...modifiers, ...itemModifiers],
+			}
+		})
+	})
+</script>
+
+<template>
+	<span :class="bemCssClasses">
+		<slot name="default">
+			<VvAvatar
+				v-for="avatarItem in avatarItems"
+				:key="avatarItem.key"
+				v-bind="{
+					modifiers: avatarItem.modifiers,
+					imgSrc: avatarItem.imgSrc,
+				}"
+			>
+				<span v-if="avatarItem.text">{{ avatarItem.text }}</span>
+			</VvAvatar>
+			<VvAvatar
+				v-if="(totalItems || items.length) > toShow"
+				:modifiers="`${stringModifiers} surface bordered`"
+				>{{ `+${(totalItems || items.length) - toShow}` }}</VvAvatar
+			>
+		</slot>
+	</span>
+</template>

package/src/components/VvAvatarGroup/index.ts

@@ -0,0 +1,28 @@
+import { ModifiersProps } from '@/props'
+
+export type AvatarItem = {
+	key?: string
+	text?: string
+	imgSrc?: string
+	modifiers?: string | string[]
+}
+
+export const VvAvatarGroupProps = {
+	...ModifiersProps,
+	/**
+	 * avatar items
+	 */
+	items: {
+		type: Array as PropType<AvatarItem[]>,
+		default: () => [],
+		required: true,
+	},
+	toShow: {
+		type: Number,
+		default: 3,
+	},
+	totalItems: {
+		type: Number,
+	},
+	avatarModifiers: [String, Array] as PropType<string | string[]>,
+}

package/src/components/VvBreadcrumb/index.ts

@@ -9,5 +9,5 @@ export interface Route {
 
 export const VvBreadcrumbProps = {
 	...ModifiersProps,
-	routes: Array<Route>,
+	routes: Array as PropType<Route[]>,
 }

package/src/components/VvButton/VvButton.vue

@@ -81,25 +81,28 @@
 	/**
 	 * @description Catch click event
 	 */
+	const toggleValue = computed(() => {
+		return props.value !== undefined ? props.value : name.value
+	})
 	const onClick = () => {
 		if (toggle.value) {
 			if (Array.isArray(modelValue.value)) {
-				if (contains(name.value, modelValue.value)) {
+				if (contains(toggleValue.value, modelValue.value)) {
 					if (unselectable.value) {
 						modelValue.value = modelValue.value.filter(
-							(n) => n !== name.value,
+							(n) => n !== toggleValue.value,
 						)
 					}
 					return
 				}
-				modelValue.value.push(name.value)
+				modelValue.value.push(toggleValue.value)
 				return
 			}
-			if (equals(name.value, modelValue.value) && unselectable.value) {
-				modelValue.value = undefined
+			if (toggleValue.value === modelValue.value && unselectable.value) {
+				modelValue.value = props.uncheckedValue
 				return
 			}
-			modelValue.value = name.value
+			modelValue.value = toggleValue.value
 		}
 	}
 </script>