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

package/src/components/common/HintSlot.ts

@@ -1,202 +1,161 @@
-import type { Component, ExtractPropTypes, Slots, Ref } from 'vue'
+import type { ExtractPropTypes, Slots } from 'vue'
 
 /**
- * Merge errors from Array<string> to string errors separated from new line (\n)
- * @param {Array<string> | string} errors
+ * Merge array of string
+ * @param {string[] | string} items
  * @returns {string}
  */
-function joinLines(errors: Array<string> | string | unknown[] | undefined) {
-	if (Array.isArray(errors)) {
-		return errors.filter((e) => isString(e)).join(' ')
+function joinLines(items: string[] | string | unknown[] | undefined) {
+	if (Array.isArray(items)) {
+		return items.filter((item) => isString(item)).join(' ')
 	}
-	return errors
+	return items
 }
 
-interface HintSlotProps {
-	hintLabel: {
-		type: StringConstructor
-		default: ''
-		required: true
-	}
-	modelValue: null
-	valid: BooleanConstructor
-	validLabel: (StringConstructor | ArrayConstructor)[]
-	invalid: BooleanConstructor
-	invalidLabel: (StringConstructor | ArrayConstructor)[]
-}
-
-interface HintSlotPropsWithLoading extends HintSlotProps {
-	loading: BooleanConstructor
-	loadingLabel: StringConstructor
-}
+export type HintSlotProps = Readonly<
+	ExtractPropTypes<{
+		hintLabel: {
+			type: StringConstructor
+			default: ''
+			required: true
+		}
+		modelValue: null
+		valid: BooleanConstructor
+		validLabel: (StringConstructor | ArrayConstructor)[]
+		invalid: BooleanConstructor
+		invalidLabel: (StringConstructor | ArrayConstructor)[]
+		loading: BooleanConstructor
+		loadingLabel: StringConstructor
+	}>
+>
 
 /**
  * Return a vue component (HintSlot) to render and manage hint, errors, valid, loading state and messages
- * @param {Readonly<ExtractPropTypes<HintSlotProps | HintSlotPropsWithLoading>>} parentProps vue props
+ * @param {HintSlotProps} parentProps vue props
  * @param {Slots} parentSlots vue slots
  * @returns {Component} vue component
  */
-export function HintSlotFactory(
-	parentProps: Readonly<
-		ExtractPropTypes<HintSlotProps | HintSlotPropsWithLoading>
-	>,
-	parentSlots: Slots,
-): {
-	HintSlot: Component
-	hasHint: Ref<boolean>
-	hasInvalid: Ref<boolean>
-	hasValid: Ref<boolean>
-	hasLoading: Ref<boolean>
-} {
-	// slots
-	const {
-		invalid: invalidSlot,
-		valid: validSlot,
-		hint: hintSlot,
-		loading: loadingSlot,
-	} = parentSlots
-
-	// props
-	const {
-		hintLabel,
-		modelValue,
-		valid,
-		validLabel,
-		invalid,
-		invalidLabel,
-		...otherProps
-	} = toRefs(parentProps)
-
-	const loading = resolveFieldData(otherProps, 'loading') as
-		| Ref<boolean>
-		| undefined
-	const loadingLabel = resolveFieldData(otherProps, 'loadingLabel') as
-		| Ref<string>
-		| undefined
-
-	const hasInvalid = computed(() => {
-		if (!invalid.value) {
-			return false
-		}
-		if (invalid.value && invalidSlot) {
-			return true
-		}
-		if (
-			invalidLabel?.value &&
-			Array.isArray(invalidLabel.value) &&
-			invalidLabel.value.length > 0
-		) {
-			return true
-		}
-		if (invalidLabel?.value && !isEmpty(invalidLabel)) {
-			return true
-		}
-		return false
-	})
-
-	const hasHint = computed(
-		() => !!((hintLabel && hintLabel.value) || hintSlot),
+export function HintSlotFactory(props: HintSlotProps, slots: Slots) {
+	// label
+	const invalidLabel = computed(() => joinLines(props.invalidLabel))
+	const validLabel = computed(() => joinLines(props.validLabel))
+	const loadingLabel = computed(() => props.loadingLabel)
+	const hintLabel = computed(() => props.hintLabel)
+
+	// type
+	const hasLoadingLabelOrSlot = computed(() =>
+		Boolean(props.loading && (slots.loading || loadingLabel.value)),
 	)
-
-	const hasValid = computed(
-		() => !!((validLabel && validLabel.value) || validSlot),
+	const hasInvalidLabelOrSlot = computed(
+		() =>
+			!hasLoadingLabelOrSlot.value &&
+			Boolean(props.invalid && (slots.invalid || invalidLabel.value)),
 	)
-
-	const hasLoading = computed(
+	const hasValidLabelOrSlot = computed(
 		() =>
-			!!(
-				(loading?.value && loadingSlot) ||
-				(loading?.value && loadingLabel?.value)
-			),
+			!hasLoadingLabelOrSlot.value &&
+			!hasInvalidLabelOrSlot.value &&
+			Boolean(props.valid && (slots.valid || validLabel.value)),
+	)
+	const hasHintLabelOrSlot = computed(
+		() =>
+			!hasLoadingLabelOrSlot.value &&
+			!hasInvalidLabelOrSlot.value &&
+			!hasValidLabelOrSlot.value &&
+			Boolean(slots.hint || hintLabel.value),
 	)
-
 	const isVisible = computed(
 		() =>
-			hasHint.value ||
-			hasValid.value ||
-			hasInvalid.value ||
-			hasLoading.value,
+			hasInvalidLabelOrSlot.value ||
+			hasValidLabelOrSlot.value ||
+			hasLoadingLabelOrSlot.value ||
+			hasHintLabelOrSlot.value,
 	)
-
-	return {
-		hasInvalid,
-		hasHint,
-		hasValid,
-		hasLoading,
-		HintSlot: {
-			name: 'HintSlot',
-			props: {
-				params: {
-					type: Object,
-					default: () => ({}),
-				},
+	const hintSlotScope = computed(() => ({
+		modelValue: props.modelValue,
+		valid: props.valid,
+		invalid: props.invalid,
+		loading: props.loading,
+	}))
+	// component
+	const HintSlot = defineComponent({
+		name: 'HintSlot',
+		props: {
+			tag: {
+				type: String,
+				default: 'small',
 			},
-			setup(props) {
-				const hintContent = computed(() => {
-					const slotProps = toReactive({
-						hintLabel,
-						modelValue,
-						valid,
-						validLabel,
-						invalid,
-						invalidLabel,
-						loading,
-						loadingLabel,
-						...props.params,
-					})
-
-					if (invalid?.value) {
-						return (
-							invalidSlot?.(slotProps) ||
-							joinLines(invalidLabel?.value) ||
-							hintLabel?.value
-						)
-					}
-
-					if (valid?.value)
-						return (
-							validSlot?.(slotProps) ||
-							joinLines(validLabel?.value) ||
-							hintLabel?.value
-						)
-
-					if (loading?.value)
-						return (
-							loadingSlot?.(slotProps) ||
-							joinLines(loadingLabel?.value) ||
-							hintLabel?.value
-						)
-
-					return (
-						hintSlot?.(slotProps) ||
-						joinLines(hintLabel?.value) ||
-						hintLabel?.value
+		},
+		setup() {
+			return {
+				isVisible,
+				invalidLabel,
+				validLabel,
+				loadingLabel,
+				hintLabel,
+				hasInvalidLabelOrSlot,
+				hasValidLabelOrSlot,
+				hasLoadingLabelOrSlot,
+				hasHintLabelOrSlot,
+			}
+		},
+		render() {
+			if (this.isVisible) {
+				let role
+				if (this.hasInvalidLabelOrSlot) {
+					role = 'alert'
+				}
+				if (this.hasValidLabelOrSlot) {
+					role = 'status'
+				}
+				if (this.hasLoadingLabelOrSlot) {
+					return h(
+						this.tag,
+						{
+							role,
+						},
+						this.$slots.loading?.() ?? this.loadingLabel,
 					)
-				})
-
-				return {
-					isVisible,
-					hasInvalid,
-					hasValid,
-					hintContent,
 				}
-			},
-			render() {
-				if (this.isVisible) {
+				if (this.hasInvalidLabelOrSlot) {
 					return h(
-						'small',
+						this.tag,
 						{
-							role: this.hasInvalid
-								? 'alert'
-								: this.hasValid
-								? 'status'
-								: undefined,
+							role,
 						},
-						this.hintContent,
+						this.$slots.invalid?.() ??
+							this.$slots.invalid ??
+							this.invalidLabel,
 					)
 				}
-			},
+				if (this.hasValidLabelOrSlot) {
+					return h(
+						this.tag,
+						{
+							role,
+						},
+						this.$slots.valid?.() ?? this.validLabel,
+					)
+				}
+				return h(
+					this.tag,
+					{
+						role,
+					},
+					this.$slots.hint?.() ?? this.$slots.hint ?? this.hintLabel,
+				)
+			}
+			return null
 		},
+	})
+
+	return {
+		hasInvalidLabelOrSlot,
+		hasHintLabelOrSlot,
+		hasValidLabelOrSlot,
+		hasLoadingLabelOrSlot,
+		hintSlotScope,
+		HintSlot,
 	}
 }
 

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

package/src/composables/alert/useProvideAlert.ts

@@ -0,0 +1,23 @@
+import type { Ref } from 'vue'
+import mitt from 'mitt'
+import { INJECTION_KEY_ALERT_GROUP } from '@/constants'
+
+/**
+ * Share the alert group name with all its children.
+ * @param {Ref<string | undefined>} name the alert group name
+ */
+export function useProvideAlertGroup({
+	name,
+}: {
+	name: Ref<string | undefined>
+}) {
+	const bus = mitt<{
+		close: string
+	}>()
+	provide(INJECTION_KEY_ALERT_GROUP, {
+		name,
+		bus,
+	})
+
+	return bus
+}

package/src/composables/dropdown/useInjectDropdown.ts

@@ -1,7 +1,4 @@
-import type { Ref } from 'vue'
-import type { Emitter, EventType } from 'mitt'
 import {
-	type DropdownItemRole,
 	INJECTION_KEY_DROPDOWN_TRIGGER,
 	INJECTION_KEY_DROPDOWN_ACTION,
 	INJECTION_KEY_DROPDOWN_ITEM,
@@ -10,42 +7,20 @@ import {
 /**
  * Injects dropdown reference and the event bus
  */
-export function useInjectedDropdownTrigger():
-	| {
-			id: Ref<string | number>
-			reference: Ref<HTMLElement | null>
-			bus: Emitter<Record<EventType, unknown>>
-			expanded: Ref<boolean>
-			aria: Ref<{
-				'aria-controls': string
-				'aria-haspopup': boolean
-				'aria-expanded': boolean
-			}>
-	  }
-	| Record<string, never> {
+export function useInjectedDropdownTrigger() {
 	return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {})
 }
 
 /**
  * Injects dropdown item role
  */
-export function useInjectedDropdownItem():
-	| {
-			role: Ref<DropdownItemRole>
-			expanded: Ref<boolean>
-	  }
-	| Record<string, never> {
+export function useInjectedDropdownItem() {
 	return inject(INJECTION_KEY_DROPDOWN_ITEM, {})
 }
 
 /**
  * Injects dropdown action role
  */
-export function useInjectedDropdownAction():
-	| {
-			role: string
-			expanded: Ref<boolean>
-	  }
-	| Record<string, never> {
+export function useInjectedDropdownAction() {
 	return inject(INJECTION_KEY_DROPDOWN_ACTION, {})
 }

package/src/composables/dropdown/useProvideDropdown.ts

@@ -28,22 +28,21 @@ export function useProvideDropdownTrigger({
 		'aria-expanded': boolean
 	}>
 }) {
-	const bus = mitt()
+	const bus = mitt<{
+		click: Event
+		mouseover: Event
+		mouseleave: Event
+	}>()
 	const component = defineComponent({
 		name: 'VvDropdownTriggerProvider',
-		provide() {
-			return {
-				[INJECTION_KEY_DROPDOWN_TRIGGER]: {
-					reference,
-					id,
-					expanded,
-					aria,
-					bus,
-				},
-			}
-		},
 		setup() {
-			return {}
+			provide(INJECTION_KEY_DROPDOWN_TRIGGER, {
+				reference,
+				id,
+				expanded,
+				aria,
+				bus,
+			})
 		},
 		render() {
 			return h(Fragment, {}, this.$slots.default?.())
@@ -86,10 +85,10 @@ export function useProvideDropdownItem({
 export function useProvideDropdownAction({
 	expanded,
 }: {
-	expanded: Ref<boolean>
+	expanded?: Ref<boolean>
 }) {
 	provide(INJECTION_KEY_DROPDOWN_ACTION, {
-		role: ActionRoles.menuitem,
+		role: ref(ActionRoles.menuitem),
 		expanded,
 	})
 }

package/src/composables/useOptions.ts

@@ -5,12 +5,14 @@ export function useOptions(props: any) {
 	const { options, labelKey, valueKey, disabledKey } = toRefs(props)
 
 	// eslint-disable-next-line
-	const getOptionLabel = (option: string | Option) => {
+	const getOptionLabel = (option: string | Option): string => {
 		if (typeof option !== 'object' && option !== null) return option
 
-		return typeof labelKey.value === 'function'
-			? labelKey.value(option)
-			: option[labelKey.value]
+		return String(
+			typeof labelKey.value === 'function'
+				? labelKey.value(option)
+				: option[labelKey.value],
+		)
 	}
 
 	const getOptionValue = (option: string | Option) => {
@@ -21,7 +23,7 @@ export function useOptions(props: any) {
 			: option[valueKey.value]
 	}
 
-	const getOptionDisabled = (option: string | Option) => {
+	const getOptionDisabled = (option: string | Option): boolean => {
 		if (typeof option !== 'object' && option !== null) return false
 
 		return typeof disabledKey.value === 'function'
@@ -30,7 +32,7 @@ export function useOptions(props: any) {
 	}
 
 	const getOptionGrouped = (option: string | Option) => {
-	if (typeof option !== 'object' && option !== null) return []
+		if (typeof option !== 'object' && option !== null) return []
 		return option.options || []
 	}
 
@@ -39,6 +41,6 @@ export function useOptions(props: any) {
 		getOptionLabel,
 		getOptionValue,
 		getOptionDisabled,
-		getOptionGrouped
+		getOptionGrouped,
 	}
 }

package/src/composables/useVolver.ts

@@ -1,6 +1,5 @@
 import { INJECTION_KEY_VOLVER } from '../constants'
-import type { VolverInterface } from '../Volver'
 
 export function useVolver() {
-	return inject<VolverInterface>(INJECTION_KEY_VOLVER)
+	return inject(INJECTION_KEY_VOLVER)
 }

package/src/constants.ts

@@ -1,3 +1,7 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { Emitter } from 'mitt'
+import type { Volver } from './Volver'
+
 export const DEFAULT_ICONIFY_PROVIDER = 'vv'
 
 export enum Side {
@@ -60,7 +64,7 @@ export enum AnchorTarget {
 }
 
 // volver
-export const INJECTION_KEY_VOLVER = Symbol.for('volver')
+export const INJECTION_KEY_VOLVER = Symbol.for('volver') as InjectionKey<Volver>
 
 // groups
 export const INJECTION_KEY_BUTTON_GROUP = Symbol.for('buttonGroup')
@@ -69,6 +73,40 @@ export const INJECTION_KEY_CHECK_GROUP = Symbol.for('checkGroup')
 export const INJECTION_KEY_ACCORDION_GROUP = Symbol.for('accordionGroup')
 
 // dropdown
-export const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for('dropdownTrigger')
-export const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for('dropdownItem')
-export const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for('dropdownAction')
+export const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
+	'dropdownTrigger',
+) as InjectionKey<{
+	id?: Ref<string | number>
+	reference?: Ref<HTMLElement | null>
+	bus?: Emitter<{
+		click: Event
+		mouseover: Event
+		mouseleave: Event
+	}>
+	expanded?: Ref<boolean>
+	aria?: Ref<{
+		'aria-controls': string
+		'aria-haspopup': boolean
+		'aria-expanded': boolean
+	}>
+}>
+export const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
+	'dropdownItem',
+) as InjectionKey<{
+	role?: Ref<`${DropdownItemRole}`>
+	expanded?: Ref<boolean>
+}>
+export const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
+	'dropdownAction',
+) as InjectionKey<{
+	role?: Ref<`${ActionRoles}`>
+	expanded?: Ref<boolean>
+}>
+
+// alert
+export const INJECTION_KEY_ALERT_GROUP = Symbol.for(
+	'alertGroup',
+) as InjectionKey<{
+	name?: Ref<string | undefined>
+	bus?: Emitter<{ close: string }>
+}>

package/src/props/index.ts

@@ -126,7 +126,7 @@ export const ModifiersProps = {
 	/**
 	 * Component BEM modifiers
 	 */
-	modifiers: [String, Array] as PropType<string | Array<string>>,
+	modifiers: [String, Array] as PropType<string | string[]>,
 }
 
 export const HintProps = {
@@ -138,7 +138,7 @@ export const OptionsProps = {
 	 * List of options, can be string[] or object[]
 	 */
 	options: {
-		type: Array as PropType<Array<Option | string>>,
+		type: Array as PropType<(Option | string)[]>,
 		default: () => [],
 	},
 	/**
@@ -302,11 +302,11 @@ export const DropdownProps = {
 		default: false,
 	},
 	/**
-	 * Close dropdown on click outside
+	 * Keep open dropdown on click outside
 	 */
-	autoClose: {
+	keepOpen: {
 		type: Boolean,
-		default: true,
+		default: false,
 	},
 	/**
 	 * Autofocus first item on dropdown open
@@ -406,6 +406,7 @@ export const CheckboxRadioProps = {
 	...ReadonlyProps,
 	...ModifiersProps,
 	...LabelProps,
+	...LoadingProps,
 	/**
 	 * Input value
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
@@ -426,6 +427,7 @@ export const CheckboxRadioGroupProps = {
 	...ReadonlyProps,
 	...ModifiersProps,
 	...LabelProps,
+	...LoadingProps,
 	/**
 	 * Input value
 	 */

package/src/resolvers/unplugin.ts

@@ -61,13 +61,16 @@ export const getStyleNames = function (kebabName: string) {
 		]
 	}
 	if (kebabName === 'vv-accordion-group') {
-		return ['vv-accordion-group', 'vv-accordion']
+		return ['vv-accordion', 'vv-accordion-group']
 	}
 	if (kebabName === 'vv-checkbox-group') {
-		return ['vv-checkbox-group', 'vv-checkbox']
+		return ['vv-checkbox', 'vv-checkbox-group']
 	}
 	if (kebabName === 'vv-radio-group') {
-		return ['vv-radio-group', 'vv-radio']
+		return ['vv-radio', 'vv-radio-group']
+	}
+	if (kebabName === 'vv-alert-group') {
+		return ['vv-alert', 'vv-alert-group']
 	}
 	if (kebabName === 'v-tooltip') {
 		return ['vv-tooltip']