@volverjs/ui-vue 0.0.6-beta.5 → 0.0.6-beta.7

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 string[] to string errors separated from new line (\n)
- * @param {string[] | string} errors
+ * Merge array of string
+ * @param {string[] | string} items
  * @returns {string}
  */
-function joinLines(errors: 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/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/props/index.ts

@@ -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
 	 */