@volverjs/ui-vue 0.0.6-beta.7 → 0.0.7-beta.1

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] as PropType<string | string[]>,
 	/**
 	 * If true, the accordion will be disabled
 	 */

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
 	 */
@@ -23,10 +26,6 @@ export const VvAccordionGroupProps = {
 	 * 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] as PropType<string | string[]>,
 	/**
 	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
 	 */

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/VvCard/index.ts

@@ -1,4 +1,6 @@
+import { ModifiersProps } from '@/props'
+
 export const VvCardProps = {
+	...ModifiersProps,
 	title: String,
-	modifiers: [String, Array] as PropType<string | string[]>,
 }

package/src/components/VvCombobox/VvCombobox.vue

@@ -160,14 +160,10 @@
 			dirty: isDirty.value,
 			focus: focused.value,
 			floating: floating.value,
+			badges: props.badges,
 		})),
 	)
 
-	// current options, filtered or prop options
-	const hasOptions = computed(() =>
-		props.searchable ? filteredOptions.value : props.options,
-	)
-
 	const {
 		getOptionLabel,
 		getOptionValue,
@@ -237,12 +233,6 @@
 			.join(props.separator)
 	})
 
-	watch(selectedOptions, () => {
-		if (!props.multiple && props.autoClose) {
-			collapse()
-		}
-	})
-
 	/**
 	 * Function triggered on click on input
 	 */
@@ -284,7 +274,7 @@
 				toReturn = [value as Option]
 			}
 		} else {
-			if (props.autoClose) {
+			if (!props.keepOpen) {
 				collapse()
 			}
 			if (props.unselectable && value === props.modelValue) {
@@ -308,7 +298,7 @@
 		disabled: disabled.value,
 		readonly: readonly.value,
 		modifiers: props.modifiers,
-		options: hasOptions.value,
+		options: props.options,
 		labelKey: props.labelKey,
 		valueKey: props.valueKey,
 		icon: props.icon,
@@ -332,7 +322,6 @@
 		flip: props.flip,
 		autoPlacement: props.autoPlacement,
 		arrow: props.arrow,
-		autoClose: props.autoClose,
 		autofocusFirst: searchable.value ? false : props.autofocusFirst,
 		triggerWidth: props.triggerWidth,
 		modifiers: props.dropdownModifiers,
@@ -346,16 +335,20 @@
 	}))
 
 	// computed
-	onKeyStroke([' ', 'Enter'], (e) => {
-		if (props.autoOpen) {
-			return
-		}
-		if (!expanded.value && focused.value) {
-			e.preventDefault()
-			e.stopImmediatePropagation()
-			toggleExpanded()
-		}
-	})
+	onKeyStroke(
+		[' ', 'Enter'],
+		(e) => {
+			if (props.autoOpen) {
+				return
+			}
+			if (!expanded.value && focused.value) {
+				e.preventDefault()
+				e.stopImmediatePropagation()
+				toggleExpanded()
+			}
+		},
+		{ target: inputEl },
+	)
 </script>
 
 <template>
@@ -429,9 +422,12 @@
 								v-bind="{ selectedOptions, onInput }"
 							>
 								<template v-if="hasValue">
-									<template v-if="!badges">
+									<div
+										v-if="!badges"
+										class="vv-select__value"
+									>
 										{{ hasValue }}
-									</template>
+									</div>
 									<VvBadge
 										v-for="(
 											option, index

package/src/components/VvCombobox/index.ts

@@ -136,9 +136,15 @@ export const VvComboboxProps = {
 	/**
 	 * Open dropdown on focus
 	 */
-	autoOpen: Boolean,
+	autoOpen: {
+		type: Boolean,
+		default: false,
+	},
 	/**
-	 * Close dropdown on select (not multiple)
+	 * Keep open dropdown on single select
 	 */
-	autoClose: Boolean,
+	keepOpen: {
+		type: Boolean,
+		default: false,
+	},
 }

package/src/components/VvDialog/VvDialog.vue

@@ -9,9 +9,10 @@
 	import VvIcon from '../VvIcon/VvIcon.vue'
 	import { VvDialogEvents, VvDialogProps } from '.'
 
-	// props and emit
+	// props, emit and template refs
 	const props = defineProps(VvDialogProps)
 	const emit = defineEmits(VvDialogEvents)
+	const dialogEl: Ref<HTMLDialogElement | undefined> = ref()
 
 	// data
 	const localModelValue = ref(false)
@@ -26,7 +27,6 @@
 			emit('update:modelValue', value)
 		},
 	})
-	const htmlAttrIsOpen = ref(true)
 
 	// template ref
 	const modalWrapper = ref(null)
@@ -36,7 +36,6 @@
 		const { id } = props
 		return {
 			id,
-			open: htmlAttrIsOpen.value,
 		} as DialogHTMLAttributes
 	})
 	const dialogClass = computed(() => {
@@ -50,18 +49,18 @@
 	const transitioName = computed(() => `vv-dialog--${props.transition}`)
 	const dialogTransitionHandlers = {
 		'before-enter': () => {
-			htmlAttrIsOpen.value = true
+			dialogEl.value?.showModal()
 			emit('open')
 		},
 		'after-leave': () => {
-			htmlAttrIsOpen.value = false
+			dialogEl.value?.close()
 			emit('close')
 		},
 	}
 
 	// methods
 	onClickOutside(modalWrapper, () => {
-		if (props.autoClose) {
+		if (!props.keepOpen) {
 			modelValue.value = false
 		}
 	})
@@ -87,7 +86,12 @@
 
 <template>
 	<Transition :name="transitioName" v-on="dialogTransitionHandlers">
-		<dialog v-show="modelValue" v-bind="dialogAttrs" :class="dialogClass">
+		<dialog
+			v-show="modelValue"
+			v-bind="dialogAttrs"
+			ref="dialogEl"
+			:class="dialogClass"
+		>
 			<article ref="modalWrapper" class="vv-dialog__wrapper">
 				<header v-if="$slots.header || title" class="vv-dialog__header">
 					<!-- @slot Header slot -->

package/src/components/VvDialog/index.ts

@@ -24,7 +24,7 @@ export const VvDialogProps = {
 	 */
 	size: String,
 	/**
-	 * Close dialog on click outside
+	 * Keep open dialog on click outside
 	 */
-	autoClose: { type: Boolean, default: true },
+	keepOpen: { type: Boolean, default: false },
 }

package/src/components/VvDropdown/VvDropdown.vue

@@ -218,7 +218,7 @@
 	onClickOutside(
 		floatingEl,
 		() => {
-			if (props.autoClose) {
+			if (!props.keepOpen) {
 				expanded.value = false
 			}
 		},
@@ -334,7 +334,11 @@
 		}
 	})
 	onKeyStroke([' ', 'Enter'], (e) => {
-		if (expanded.value && focused.value) {
+		if (
+			expanded.value &&
+			focused.value &&
+			e.target !== document.activeElement
+		) {
 			e.preventDefault()
 			const activeElement = document.activeElement as HTMLElement
 			activeElement.click()
@@ -374,7 +378,7 @@
 				class="vv-dropdown__arrow"
 			></div>
 			<slot name="before" v-bind="{ expanded }" />
-			<ul
+			<div
 				v-bind="attrs"
 				:id="hasId"
 				ref="listEl"
@@ -389,7 +393,7 @@
 						role: itemRole,
 					}"
 				/>
-			</ul>
+			</div>
 			<slot name="after" v-bind="{ expanded }" />
 		</div>
 	</Transition>

package/src/components/VvDropdown/VvDropdownItem.vue

@@ -21,12 +21,12 @@
 </script>
 
 <template>
-	<li
+	<div
 		v-bind="{ role }"
 		ref="element"
 		class="vv-dropdown__item"
 		:class="{ 'focus-visible': focused || focusedWithin }"
 	>
 		<slot />
-	</li>
+	</div>
 </template>

package/src/composables/alert/useInjectAlert.ts

@@ -0,0 +1,8 @@
+import { INJECTION_KEY_ALERT_GROUP } from '../../constants'
+
+/**
+ * Injects alert group name
+ */
+export function useInjectedAlertGroup() {
+	return inject(INJECTION_KEY_ALERT_GROUP, {})
+}