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

package/src/components/VvAlert/index.ts

@@ -1,167 +1,164 @@
-import { type ExtractPropTypes, type PropType } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import { AlertRole } from '@/constants'
 import { IconProps, IdProps } from '@/props'
 import type { AlertModifier } from '@/types'
 
 export const VvAlertProps = {
-	...IdProps,
-	...IconProps,
-	/**
-	 * Component BEM modifiers
-	 */
-	modifiers: {
-		type: [String, Array] as PropType<AlertModifier | AlertModifier[]>,
-		default: undefined,
-	},
-	/**
-	 * 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: undefined,
-	},
-	/**
-	 * The alert content
-	 * @default ''
-	 * @type string
-	 */
-	content: {
-		type: String,
-		default: undefined,
-	},
-	/**
-	 * The alert footer
-	 * @default ''
-	 * @type string
-	 */
-	footer: {
-		type: String,
-		default: undefined,
-	},
-	/**
-	 * 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<`${AlertRole}`>,
-		default: AlertRole.alert,
-	},
+    ...IdProps,
+    ...IconProps,
+    /**
+     * Component BEM modifiers
+     */
+    modifiers: {
+        type: [String, Array] as PropType<AlertModifier | AlertModifier[]>,
+        default: undefined,
+    },
+    /**
+     * 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: undefined,
+    },
+    /**
+     * The alert content
+     * @default ''
+     * @type string
+     */
+    content: {
+        type: String,
+        default: undefined,
+    },
+    /**
+     * The alert footer
+     * @default ''
+     * @type string
+     */
+    footer: {
+        type: String,
+        default: undefined,
+    },
+    /**
+     * 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<`${AlertRole}`>,
+        default: AlertRole.alert,
+    },
 }
 
 export const VvAlertEvents = ['close']
 
-export const useVvAlert = (
-	props: Readonly<ExtractPropTypes<typeof VvAlertProps>>,
-	emit: (event: string, ...args: unknown[]) => void,
-) => {
-	const { bus } = useInjectedAlertGroup()
+export function 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`)
+    const hasId = useUniqueId(computed(() => props.id))
+    const hasTitleId = computed(() => `${hasId.value}-title`)
 
-	// icon
-	const { hasIcon } = useComponentIcon(computed(() => props.icon))
+    // auto close
+    let timeout: ReturnType<typeof setTimeout>
 
-	// 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)
+    }
+    watch(
+        () => props.autoClose,
+        (value) => {
+            if (value > 0) {
+                timeout = setTimeout(close, value)
+                return
+            }
+            if (timeout) {
+                clearTimeout(timeout)
+            }
+        },
+        {
+            immediate: true,
+        },
+    )
 
-	// close
-	const close = () => {
-		if (timeout) {
-			clearTimeout(timeout)
-		}
-		emit('close', hasId.value)
-		bus?.emit('close', hasId.value)
-	}
+    // listeners
+    const isMouseover = ref(false)
+    const onMouseover = () => {
+        isMouseover.value = true
+        if (timeout) {
+            clearTimeout(timeout)
+        }
+    }
+    const onMouseleave = () => {
+        isMouseover.value = false
+        if (props.autoClose > 0) {
+            timeout = setTimeout(close, props.autoClose)
+        }
+    }
 
-	// 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,
-		},
-	)
+    // icon
+    const { hasIcon } = useComponentIcon(computed(() => props.icon))
 
-	// listeners
-	const isMouseover = ref(false)
-	const onMouseover = () => {
-		isMouseover.value = true
-		if (timeout) {
-			clearTimeout(timeout)
-		}
-	}
-	const onMouseleave = () => {
-		isMouseover.value = false
-		if (props.autoClose > 0) {
-			timeout = setTimeout(close, props.autoClose)
-		}
-	}
+    // 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`,
+    }))
 
-	return {
-		close,
-		hasIcon,
-		hasTitleId,
-		hasProps: computed(() => ({
-			onMouseover,
-			onMouseleave,
-			class: hasClass.value,
-			style: hasStyle.value,
-			role: props.role,
-			'aria-labelledby': hasTitleId.value,
-		})),
-	}
+    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

@@ -1,63 +1,64 @@
-<script lang="ts">
-	export default {
-		name: 'VvAlertGroup',
-	}
-</script>
-
 <script setup lang="ts">
-	import { useVvAlertGroup, VvAlertGroupEvents, VvAlertGroupProps } from '.'
-	import VvAlert from '../VvAlert/VvAlert.vue'
+import VvAlert from '../VvAlert/VvAlert.vue'
+import { useVvAlertGroup, VvAlertGroupEvents, VvAlertGroupProps } from '.'
+
+// props and emit
+const props = defineProps(VvAlertGroupProps)
 
-	// props and emit
-	const props = defineProps(VvAlertGroupProps)
-	const emit = defineEmits(VvAlertGroupEvents)
+const emit = defineEmits(VvAlertGroupEvents)
 
-	const { hasProps, hasTransition } = useVvAlertGroup(props, emit)
+const { hasProps, hasTransition } = useVvAlertGroup(props, emit)
 
-	const alertGroupTransitionHandlers = {
-		'before-enter': () => {
-			emit('before-enter')
-		},
-		'after-leave': () => {
-			emit('after-leave')
-		},
-		enter: () => {
-			emit('enter')
-		},
-		'after-enter': () => {
-			emit('after-enter')
-		},
-		'enter-cancelled': () => {
-			emit('enter-cancelled')
-		},
-		'before-leave': () => {
-			emit('before-leave')
-		},
-		leave: () => {
-			emit('leave')
-		},
-		'leave-cancelled': () => {
-			emit('leave-cancelled')
-		},
-	}
+const alertGroupTransitionHandlers = {
+    'before-enter': () => {
+        emit('beforeEnter')
+    },
+    'after-leave': () => {
+        emit('afterLeave')
+    },
+    'enter': () => {
+        emit('enter')
+    },
+    'after-enter': () => {
+        emit('afterEnter')
+    },
+    'enter-cancelled': () => {
+        emit('enterCancelled')
+    },
+    'before-leave': () => {
+        emit('beforeLeave')
+    },
+    'leave': () => {
+        emit('leave')
+    },
+    'leave-cancelled': () => {
+        emit('leaveCancelled')
+    },
+}
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvAlertGroup',
+}
 </script>
 
 <template>
-	<div v-bind="hasProps">
-		<!-- @slot The slot before alert list  -->
-		<slot name="before" />
-		<TransitionGroup
-			tag="div"
-			:name="hasTransition"
-			class="vv-alert-group__list"
-			v-on="alertGroupTransitionHandlers"
-		>
-			<!-- @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>
+    <div v-bind="hasProps">
+        <!-- @slot The slot before alert list  -->
+        <slot name="before" />
+        <TransitionGroup
+            tag="div"
+            :name="hasTransition"
+            class="vv-alert-group__list"
+            v-on="alertGroupTransitionHandlers"
+        >
+            <!-- @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

@@ -3,118 +3,114 @@ import type { Alert } from '@/types'
 import { ModifiersProps } from '@/props'
 
 export const VvAlertGroupProps = {
-	...ModifiersProps,
-	name: {
-		type: String,
-		required: true,
-	},
-	items: {
-		type: Array as PropType<Alert[]>,
-		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,
-	},
+    ...ModifiersProps,
+    name: {
+        type: String,
+        required: true,
+    },
+    items: {
+        type: Array as PropType<Alert[]>,
+        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',
-	'before-enter',
-	'after-leave',
-	'enter',
-	'after-enter',
-	'enter-cancelled',
-	'before-leave',
-	'leave',
-	'leave-cancelled',
+    'close',
+    'before-enter',
+    'after-leave',
+    'enter',
+    'after-enter',
+    'enter-cancelled',
+    'before-leave',
+    'leave',
+    'leave-cancelled',
 ]
 
-export const useVvAlertGroup = (
-	props: Readonly<ExtractPropTypes<typeof VvAlertGroupProps>>,
-	emit: (event: string, ...args: unknown[]) => void,
-) => {
-	const bus = useProvideAlertGroup({ name: computed(() => props.name) })
+export function 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(
+    // check props block and inline coexist
+    if ((props.block && !props.inline) || (!props.block && props.inline)) {
+        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
-	})
+    // 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'
-	})
+    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)
-	})
+    // listeners
+    bus.on('close', (id: string) => {
+        emit('close', id)
+    })
 
-	return {
-		hasTransition,
-		hasProps: computed(() => ({
-			class: hasClass.value,
-		})),
-	}
+    return {
+        hasTransition,
+        hasProps: computed(() => ({
+            class: hasClass.value,
+        })),
+    }
 }