@volverjs/ui-vue 0.0.10-beta.34 → 0.0.10-beta.36

package/src/components/common/HintSlot.ts

@@ -1,175 +1,174 @@
-import type { ExtractPropTypes, Slots } from 'vue'
-import type { Ref } from 'vue'
+import type { ExtractPropTypes, Slots, Ref } from 'vue'
 
 /**
  * Merge array of string
  * @param {string[] | string} items
- * @returns {string}
+ * @returns {string} merged string
  */
 function joinLines(items: string[] | string | unknown[] | undefined) {
-	if (Array.isArray(items)) {
-		return items.filter((item) => isString(item)).join(' ')
-	}
-	return items
+    if (Array.isArray(items)) {
+        return items.filter(item => isString(item)).join(' ')
+    }
+    return items
 }
 
 export type HintSlotProps = Readonly<
 	ExtractPropTypes<{
-		hintLabel: {
-			type: StringConstructor
-			default: ''
-			required: true
-		}
-		modelValue: unknown
-		valid: BooleanConstructor
-		validLabel: (StringConstructor | ArrayConstructor)[]
-		invalid: BooleanConstructor
-		invalidLabel: (StringConstructor | ArrayConstructor)[]
-		loading: BooleanConstructor
-		loadingLabel: StringConstructor
+	    hintLabel: {
+	        type: StringConstructor
+	        default: ''
+	        required: true
+	    }
+	    modelValue: unknown
+	    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 {HintSlotProps} parentProps vue props
- * @param {Slots} parentSlots vue slots
+ * @param {HintSlotProps} propsOrRef vue props
+ * @param {Slots} slots vue slots
  * @returns {Component} vue component
  */
 export function HintSlotFactory(
-	propsOrRef: HintSlotProps | Ref<HintSlotProps>,
-	slots: Slots,
+    propsOrRef: HintSlotProps | Ref<HintSlotProps>,
+    slots: Slots,
 ) {
-	const props = computed(() => {
-		if (isRef(propsOrRef)) {
-			return propsOrRef.value
-		}
-		return propsOrRef
-	})
+    const props = computed(() => {
+        if (isRef(propsOrRef)) {
+            return propsOrRef.value
+        }
+        return propsOrRef
+    })
 
-	// label
-	const invalidLabel = computed(() => joinLines(props.value.invalidLabel))
-	const validLabel = computed(() => joinLines(props.value.validLabel))
-	const loadingLabel = computed(() => props.value.loadingLabel)
-	const hintLabel = computed(() => props.value.hintLabel)
+    // label
+    const invalidLabel = computed(() => joinLines(props.value.invalidLabel))
+    const validLabel = computed(() => joinLines(props.value.validLabel))
+    const loadingLabel = computed(() => props.value.loadingLabel)
+    const hintLabel = computed(() => props.value.hintLabel)
 
-	// type
-	const hasLoadingLabelOrSlot = computed(() =>
-		Boolean(props.value.loading && (slots.loading || loadingLabel.value)),
-	)
-	const hasInvalidLabelOrSlot = computed(
-		() =>
-			!hasLoadingLabelOrSlot.value &&
-			Boolean(
-				props.value.invalid && (slots.invalid || invalidLabel.value),
-			),
-	)
-	const hasValidLabelOrSlot = computed(
-		() =>
-			!hasLoadingLabelOrSlot.value &&
-			!hasInvalidLabelOrSlot.value &&
-			Boolean(props.value.valid && (slots.valid || validLabel.value)),
-	)
-	const hasHintLabelOrSlot = computed(
-		() =>
-			!hasLoadingLabelOrSlot.value &&
-			!hasInvalidLabelOrSlot.value &&
-			!hasValidLabelOrSlot.value &&
-			Boolean(slots.hint || hintLabel.value),
-	)
-	const isVisible = computed(
-		() =>
-			hasInvalidLabelOrSlot.value ||
-			hasValidLabelOrSlot.value ||
-			hasLoadingLabelOrSlot.value ||
-			hasHintLabelOrSlot.value,
-	)
-	const hintSlotScope = computed(() => ({
-		modelValue: props.value.modelValue,
-		valid: props.value.valid,
-		invalid: props.value.invalid,
-		loading: props.value.loading,
-	}))
-	// component
-	const HintSlot = defineComponent({
-		name: 'HintSlot',
-		props: {
-			tag: {
-				type: String,
-				default: 'small',
-			},
-		},
-		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,
-					)
-				}
-				if (this.hasInvalidLabelOrSlot) {
-					return h(
-						this.tag,
-						{
-							role,
-						},
-						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
-		},
-	})
+    // type
+    const hasLoadingLabelOrSlot = computed(() =>
+        Boolean(props.value.loading && (slots.loading || loadingLabel.value)),
+    )
+    const hasInvalidLabelOrSlot = computed(
+        () =>
+            !hasLoadingLabelOrSlot.value
+            && Boolean(
+			    props.value.invalid && (slots.invalid || invalidLabel.value),
+            ),
+    )
+    const hasValidLabelOrSlot = computed(
+        () =>
+            !hasLoadingLabelOrSlot.value
+            && !hasInvalidLabelOrSlot.value
+            && Boolean(props.value.valid && (slots.valid || validLabel.value)),
+    )
+    const hasHintLabelOrSlot = computed(
+        () =>
+            !hasLoadingLabelOrSlot.value
+            && !hasInvalidLabelOrSlot.value
+            && !hasValidLabelOrSlot.value
+            && Boolean(slots.hint || hintLabel.value),
+    )
+    const isVisible = computed(
+        () =>
+            hasInvalidLabelOrSlot.value
+            || hasValidLabelOrSlot.value
+            || hasLoadingLabelOrSlot.value
+            || hasHintLabelOrSlot.value,
+    )
+    const hintSlotScope = computed(() => ({
+        modelValue: props.value.modelValue,
+        valid: props.value.valid,
+        invalid: props.value.invalid,
+        loading: props.value.loading,
+    }))
+    // component
+    const HintSlot = defineComponent({
+        name: 'HintSlot',
+        props: {
+            tag: {
+                type: String,
+                default: 'small',
+            },
+        },
+        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,
+                    )
+                }
+                if (this.hasInvalidLabelOrSlot) {
+                    return h(
+                        this.tag,
+                        {
+                            role,
+                        },
+                        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,
-	}
+    return {
+        hasInvalidLabelOrSlot,
+        hasHintLabelOrSlot,
+        hasValidLabelOrSlot,
+        hasLoadingLabelOrSlot,
+        hintSlotScope,
+        HintSlot,
+    }
 }
 
 export default HintSlotFactory

package/src/composables/alert/useAlert.ts

@@ -1,19 +1,19 @@
 import {
-	DEFAULT_ALERT_AUTO_CLOSE,
-	DEFAULT_ALERT_DISMISSABLE,
-	DEFAULT_ALERT_GROUP,
-	DEFAULT_ALERT_MODIFIERS,
-	DEFAULT_ALERT_INFO_ICON,
-	DefaultAlertIconMap,
+    DEFAULT_ALERT_AUTO_CLOSE,
+    DEFAULT_ALERT_DISMISSABLE,
+    DEFAULT_ALERT_GROUP,
+    DEFAULT_ALERT_MODIFIERS,
+    DEFAULT_ALERT_INFO_ICON,
+    DefaultAlertIconMap,
 } from '@/constants'
 import type { Alert } from '@/types/alert'
 
-type AlertInGroup = Alert & { timestamp: number; group: string }
+type AlertInGroup = Alert & { timestamp: number, group: string }
 
 const groups = reactive(
-	new Map<string, Map<string, AlertInGroup>>([
-		[DEFAULT_ALERT_GROUP, new Map<string, AlertInGroup>()],
-	]),
+    new Map<string, Map<string, AlertInGroup>>([
+        [DEFAULT_ALERT_GROUP, new Map<string, AlertInGroup>()],
+    ]),
 )
 
 /**
@@ -33,74 +33,74 @@ const groups = reactive(
  *      addAlert: Function to add alert,
  *      removeAlert: Function to remove alert,
  *      getAlerts: Function to get alerts by group
- *  }
+ *  } the reactive list of alerts, groups, addAlert, removeAlert and getAlerts functions
  */
-export const useAlert = () => {
-	const addAlert = (
-		{
-			id = crypto.randomUUID(),
-			group = DEFAULT_ALERT_GROUP,
-			title,
-			icon = DEFAULT_ALERT_INFO_ICON,
-			content,
-			footer,
-			modifiers = DEFAULT_ALERT_MODIFIERS,
-			dismissable = DEFAULT_ALERT_DISMISSABLE,
-			autoClose = DEFAULT_ALERT_AUTO_CLOSE,
-			timestamp = Date.now(),
-		} = {} as Partial<AlertInGroup>,
-	) => {
-		if (!groups.has(group)) {
-			groups.set(group, new Map<string, AlertInGroup>())
-		}
-		const groupMap = groups.get(group)
-		const normalizedModifiers =
-			typeof modifiers === 'string' ? modifiers.split(' ') : modifiers
+export function useAlert() {
+    const addAlert = (
+        {
+            id = crypto.randomUUID(),
+            group = DEFAULT_ALERT_GROUP,
+            title,
+            icon = DEFAULT_ALERT_INFO_ICON,
+            content,
+            footer,
+            modifiers = DEFAULT_ALERT_MODIFIERS,
+            dismissable = DEFAULT_ALERT_DISMISSABLE,
+            autoClose = DEFAULT_ALERT_AUTO_CLOSE,
+            timestamp = Date.now(),
+        } = {} as Partial<AlertInGroup>,
+    ) => {
+        if (!groups.has(group)) {
+            groups.set(group, new Map<string, AlertInGroup>())
+        }
+        const groupMap = groups.get(group)
+        const normalizedModifiers
+			= typeof modifiers === 'string' ? modifiers.split(' ') : modifiers
 
-		if (!icon) {
-			const alertModifier = normalizedModifiers.find((modifier) =>
-				DefaultAlertIconMap.has(modifier),
-			)
+        if (!icon) {
+            const alertModifier = normalizedModifiers.find(modifier =>
+                DefaultAlertIconMap.has(modifier),
+            )
 
-			if (alertModifier) {
-				icon = DefaultAlertIconMap.get(alertModifier) as string
-			}
-		}
-		groupMap?.set(id.toString(), {
-			id,
-			group,
-			title,
-			icon,
-			content,
-			footer,
-			modifiers,
-			dismissable,
-			autoClose,
-			timestamp,
-		})
-	}
+            if (alertModifier) {
+                icon = DefaultAlertIconMap.get(alertModifier) as string
+            }
+        }
+        groupMap?.set(id.toString(), {
+            id,
+            group,
+            title,
+            icon,
+            content,
+            footer,
+            modifiers,
+            dismissable,
+            autoClose,
+            timestamp,
+        })
+    }
 
-	const removeAlert = (id: string | number, group = DEFAULT_ALERT_GROUP) => {
-		const groupMap = groups.get(group)
-		groupMap?.delete(id.toString())
-	}
+    const removeAlert = (id: string | number, group = DEFAULT_ALERT_GROUP) => {
+        const groupMap = groups.get(group)
+        groupMap?.delete(id.toString())
+    }
 
-	const getAlerts = (group = DEFAULT_ALERT_GROUP) => {
-		return computed(() => {
-			const groupMap = groups.get(group)
-			return groupMap && groupMap instanceof Map
-				? Array.from(groupMap?.values()).sort(
-						(a, b) => a.timestamp - b.timestamp,
-					)
-				: []
-		})
-	}
+    const getAlerts = (group = DEFAULT_ALERT_GROUP) => {
+        return computed(() => {
+            const groupMap = groups.get(group)
+            return groupMap && groupMap instanceof Map
+                ? Array.from(groupMap?.values()).sort(
+                    (a, b) => a.timestamp - b.timestamp,
+                )
+                : []
+        })
+    }
 
-	return {
-		groups,
-		alerts: getAlerts(),
-		addAlert,
-		removeAlert,
-		getAlerts,
-	}
+    return {
+        groups,
+        alerts: getAlerts(),
+        addAlert,
+        removeAlert,
+        getAlerts,
+    }
 }

package/src/composables/alert/useInjectAlert.ts

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

package/src/composables/alert/useProvideAlert.ts

@@ -7,17 +7,17 @@ import { INJECTION_KEY_ALERT_GROUP } from '@/constants'
  * @param {Ref<string | undefined>} name the alert group name
  */
 export function useProvideAlertGroup({
-	name,
+    name,
 }: {
-	name: Ref<string | undefined>
+    name: Ref<string | undefined>
 }) {
-	const bus = mitt<{
-		close: string
-	}>()
-	provide(INJECTION_KEY_ALERT_GROUP, {
-		name,
-		bus,
-	})
+    const bus = mitt<{
+        close: string
+    }>()
+    provide(INJECTION_KEY_ALERT_GROUP, {
+        name,
+        bus,
+    })
 
-	return bus
+    return bus
 }

package/src/composables/dropdown/useInjectDropdown.ts

@@ -1,26 +1,26 @@
 import {
-	INJECTION_KEY_DROPDOWN_TRIGGER,
-	INJECTION_KEY_DROPDOWN_ACTION,
-	INJECTION_KEY_DROPDOWN_ITEM,
+    INJECTION_KEY_DROPDOWN_TRIGGER,
+    INJECTION_KEY_DROPDOWN_ACTION,
+    INJECTION_KEY_DROPDOWN_ITEM,
 } from '../../constants'
 
 /**
  * Injects dropdown reference and the event bus
  */
 export function useInjectedDropdownTrigger() {
-	return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {})
+    return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {})
 }
 
 /**
  * Injects dropdown item role
  */
 export function useInjectedDropdownItem() {
-	return inject(INJECTION_KEY_DROPDOWN_ITEM, {})
+    return inject(INJECTION_KEY_DROPDOWN_ITEM, {})
 }
 
 /**
  * Injects dropdown action role
  */
 export function useInjectedDropdownAction() {
-	return inject(INJECTION_KEY_DROPDOWN_ACTION, {})
+    return inject(INJECTION_KEY_DROPDOWN_ACTION, {})
 }