@volverjs/ui-vue 0.0.6-beta.6 → 0.0.6

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/VvCheckbox/VvCheckbox.vue

@@ -26,6 +26,7 @@
 		isInGroup,
 	} = useGroupProps(props, emit)
 	const hasId = useUniqueId(id)
+	const hasHintId = computed(() => `${hasId.value}-hint`)
 	const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
 
 	// template ref
@@ -144,7 +145,12 @@
 	})
 
 	// hint
-	const { HintSlot } = HintSlotFactory(props, slots)
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(props, slots)
 </script>
 
 <template>
@@ -160,11 +166,26 @@
 			:value="hasValue"
 			:tabindex="tabindex"
 			:aria-invalid="isInvalid"
+			:aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
+			:aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"
 		/>
 		<!-- @slot Use this slot for check label -->
 		<slot :value="modelValue">
 			{{ label }}
 		</slot>
-		<HintSlot class="vv-checkbox__hint" :params="{ value: modelValue }" />
+		<HintSlot :id="hasHintId" class="vv-checkbox__hint">
+			<template v-if="$slots.hint" #hint>
+				<slot name="hint" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.loading" #loading>
+				<slot name="loading" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.valid" #valid>
+				<slot name="valid" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.invalid" #invalid>
+				<slot name="invalid" v-bind="hintSlotScope" />
+			</template>
+		</HintSlot>
 	</label>
 </template>

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -56,7 +56,7 @@
 			value: getOptionValue(option),
 		}
 	}
-	const { HintSlot } = HintSlotFactory(props, slots)
+	const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots)
 </script>
 
 <template>
@@ -74,6 +74,19 @@
 			<!-- #endregion -->
 			<slot v-else />
 		</div>
-		<HintSlot class="vv-checkbox-group__hint" />
+		<HintSlot class="vv-checkbox-group__hint">
+			<template v-if="$slots.hint" #hint>
+				<slot name="hint" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.loading" #loading>
+				<slot name="loading" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.valid" #valid>
+				<slot name="valid" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.invalid" #invalid>
+				<slot name="invalid" v-bind="hintSlotScope" />
+			</template>
+		</HintSlot>
 	</fieldset>
 </template>

package/src/components/VvCombobox/VvCombobox.vue

@@ -39,7 +39,12 @@
 	}
 
 	// hint slot
-	const { HintSlot } = HintSlotFactory(props, slots)
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(props, slots)
 
 	// template ref
 	const inputEl: Ref<HTMLElement | null> = ref(null)
@@ -93,19 +98,18 @@
 		if (props.disabled || props.readonly || !expanded.value) return
 		expanded.value = false
 	}
-	watch(expanded, (newValue) => {
+	const onAfterExpand = () => {
 		if (searchable.value) {
-			nextTick(() => {
-				if (newValue) {
-					if (inputSearchEl.value) {
-						inputSearchEl.value.focus()
-					}
-					return
-				}
-				searchText.value = ''
-			})
+			if (inputSearchEl.value) {
+				inputSearchEl.value.focus()
+			}
 		}
-	})
+	}
+	const onAfterCollapse = () => {
+		if (searchable.value) {
+			searchText.value = ''
+		}
+	}
 
 	// data
 	const {
@@ -233,12 +237,6 @@
 			.join(props.separator)
 	})
 
-	watch(selectedOptions, () => {
-		if (!props.multiple && props.autoClose) {
-			collapse()
-		}
-	})
-
 	/**
 	 * Function triggered on click on input
 	 */
@@ -280,7 +278,7 @@
 				toReturn = [value as Option]
 			}
 		} else {
-			if (props.autoClose) {
+			if (!props.keepOpen) {
 				collapse()
 			}
 			if (props.unselectable && value === props.modelValue) {
@@ -328,7 +326,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,
@@ -368,6 +365,8 @@
 				v-model="expanded"
 				v-bind="dropdownProps"
 				:role="DropdownRole.listbox"
+				@after-expand="onAfterExpand"
+				@after-collapse="onAfterCollapse"
 			>
 				<template
 					v-if="searchable || $slots['dropdown::before']"
@@ -383,8 +382,6 @@
 						v-model="searchText"
 						aria-autocomplete="list"
 						:aria-controls="hasDropdownId"
-						:aria-labelledby="hasLabelId"
-						:aria-describedby="hasHintId"
 						autocomplete="off"
 						spellcheck="false"
 						type="search"
@@ -406,9 +403,16 @@
 						<div
 							ref="inputEl"
 							v-bind="aria"
-							:aria-labelledby="hasLabelId"
 							class="vv-select__input"
 							role="combobox"
+							:aria-expanded="expanded"
+							:aria-labelledby="hasLabelId"
+							:aria-describedby="
+								hasHintLabelOrSlot ? hasHintId : undefined
+							"
+							:aria-errormessage="
+								hasInvalidLabelOrSlot ? hasHintId : undefined
+							"
 							:tabindex="hasTabindex"
 							@click.passive="onClickInput"
 						>
@@ -558,7 +562,20 @@
 				</template>
 			</VvDropdown>
 		</div>
-		<HintSlot :id="hasHintId" class="vv-select__hint" />
+		<HintSlot :id="hasHintId" class="vv-select__hint">
+			<template v-if="$slots.hint" #hint>
+				<slot name="hint" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.loading" #loading>
+				<slot name="loading" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.valid" #valid>
+				<slot name="valid" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.invalid" #invalid>
+				<slot name="invalid" v-bind="hintSlotScope" />
+			</template>
+		</HintSlot>
 	</div>
 	<VvSelect
 		v-else

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,
+	},
 }