@volverjs/ui-vue 0.0.10-beta.27 → 0.0.10-beta.29

package/src/components/VvAction/VvAction.vue

@@ -11,6 +11,7 @@
 	// props and emit
 	const props = defineProps(VvActionProps)
 	const emit = defineEmits(VvActionEvents)
+	const instance = getCurrentInstance()
 
 	// inject plugin
 	const volver = useVolver()
@@ -104,24 +105,33 @@
 			e.preventDefault()
 			return
 		}
+		if (instance?.vnode.props?.onClick) {
+			emit('click', e)
+			return
+		}
 		dropdownEventBus?.emit('click', e)
-		emit('click', e)
 	}
 
 	/**
 	 * @description Catch mouseover event
 	 */
 	const onMouseover = (e: Event) => {
+		if (instance?.vnode.props?.onMouseover) {
+			emit('mouseover', e)
+			return
+		}
 		dropdownEventBus?.emit('mouseover', e)
-		emit('mouseover', e)
 	}
 
 	/**
 	 * @description Catch mouseleave event
 	 */
 	const onMouseleave = (e: Event) => {
+		if (instance?.vnode.props?.onMouseleave) {
+			emit('mouseleave', e)
+			return
+		}
 		dropdownEventBus?.emit('mouseleave', e)
-		emit('mouseleave', e)
 	}
 </script>
 

package/src/components/VvAlert/index.ts

@@ -1,11 +1,18 @@
-import { IconProps, IdProps, ModifiersProps } from '@/props'
-import type { ExtractPropTypes, PropType } from 'vue'
-import { withModifiers } from 'vue'
+import { type ExtractPropTypes, type PropType, withModifiers } from 'vue'
+import { AlertRole } from '@/constants'
+import { IconProps, IdProps } from '@/props'
+import type { AlertModifier } from '@/types'
 
 export const VvAlertProps = {
 	...IdProps,
-	...ModifiersProps,
 	...IconProps,
+	/**
+	 * Component BEM modifiers
+	 */
+	modifiers: {
+		type: [String, Array] as PropType<AlertModifier | AlertModifier[]>,
+		default: undefined,
+	},
 	/**
 	 * The alert is dismissable
 	 * @default false
@@ -69,8 +76,8 @@ export const VvAlertProps = {
 	 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_role
 	 */
 	role: {
-		type: String as PropType<'alert' | 'alertdialog'>,
-		default: 'alert',
+		type: String as PropType<`${AlertRole}`>,
+		default: AlertRole.alert,
 	},
 }
 

package/src/components/VvAlertGroup/index.ts

@@ -1,19 +1,6 @@
-import { ModifiersProps } from '@/props'
 import type { ExtractPropTypes } from 'vue'
-import type { VvIconProps } from '../VvIcon'
-
-export type AlertItem = {
-	id: string | number
-	title?: string
-	icon?: string | VvIconProps
-	content?: string
-	footer?: string
-	modifiers?: string | string[]
-	dismissable?: boolean
-	autoClose?: number
-	closeLabel?: string
-	role?: 'alert' | 'alertdialog'
-}
+import type { Alert } from '@/types'
+import { ModifiersProps } from '@/props'
 
 export const VvAlertGroupProps = {
 	...ModifiersProps,
@@ -22,7 +9,7 @@ export const VvAlertGroupProps = {
 		required: true,
 	},
 	items: {
-		type: Array as PropType<AlertItem[]>,
+		type: Array as PropType<Alert[]>,
 		default: () => [],
 	},
 	stack: {

package/src/components/VvButton/VvButton.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 	export default {
 		name: 'VvButton',
+		inheritAttrs: false,
 	}
 </script>
 
@@ -82,6 +83,14 @@
 	const toggleValue = computed(() => {
 		return props.value !== undefined ? props.value : name.value
 	})
+	const hasListeners = computed(() => {
+		if (!toggle.value) {
+			return undefined
+		}
+		return {
+			onClick,
+		}
+	})
 	const onClick = () => {
 		if (toggle.value) {
 			if (Array.isArray(modelValue.value)) {
@@ -108,6 +117,8 @@
 <template>
 	<VvAction
 		v-bind="{
+			...attrs,
+			...hasListeners,
 			disabled,
 			pressed,
 			active,
@@ -121,7 +132,6 @@
 		:id="hasId"
 		ref="element"
 		:class="bemCssClasses"
-		@click="onClick"
 	>
 		<!-- @slot Default slot -->
 		<slot>

package/src/components/VvDropdown/VvDropdownOption.vue

@@ -33,6 +33,7 @@
 		if (!props.disabled) {
 			return props.selectHintLabel
 		}
+		return ''
 	})
 </script>
 

package/src/composables/alert/useAlert.ts

@@ -6,11 +6,13 @@ import {
 	DEFAULT_ALERT_INFO_ICON,
 	DefaultAlertIconMap,
 } from '@/constants'
-import type { Alert, AlertModifiers } from '@/types/alert'
+import type { Alert, AlertModifier } from '@/types/alert'
+
+type AlertInGroup = Alert & { timestamp: number; group: string }
 
 const groups = reactive(
-	new Map<string, Map<string, Alert>>([
-		[DEFAULT_ALERT_GROUP, new Map<string, Alert>()],
+	new Map<string, Map<string, AlertInGroup>>([
+		[DEFAULT_ALERT_GROUP, new Map<string, AlertInGroup>()],
 	]),
 )
 
@@ -45,10 +47,11 @@ export const useAlert = () => {
 			modifiers = DEFAULT_ALERT_MODIFIERS,
 			dismissable = DEFAULT_ALERT_DISMISSABLE,
 			autoClose = DEFAULT_ALERT_AUTO_CLOSE,
-		} = {} as Partial<Alert>,
+			timestamp = Date.now(),
+		} = {} as Partial<AlertInGroup>,
 	) => {
 		if (!groups.has(group)) {
-			groups.set(group, new Map<string, Alert>())
+			groups.set(group, new Map<string, AlertInGroup>())
 		}
 		const groupMap = groups.get(group)
 		const normalizedModifiers =
@@ -56,8 +59,8 @@ export const useAlert = () => {
 
 		if (!icon) {
 			const alertModifier = normalizedModifiers.find((modifier) =>
-				DefaultAlertIconMap.has(modifier as AlertModifiers),
-			) as AlertModifiers | undefined
+				DefaultAlertIconMap.has(modifier as AlertModifier),
+			) as AlertModifier | undefined
 
 			if (alertModifier) {
 				icon = DefaultAlertIconMap.get(alertModifier) as string
@@ -73,7 +76,7 @@ export const useAlert = () => {
 			modifiers,
 			dismissable,
 			autoClose,
-			timestamp: Date.now(),
+			timestamp,
 		})
 	}
 
@@ -88,7 +91,7 @@ export const useAlert = () => {
 			return groupMap && groupMap instanceof Map
 				? Array.from(groupMap?.values()).sort(
 						(a, b) => a.timestamp - b.timestamp,
-				  )
+					)
 				: []
 		})
 	}

package/src/constants.ts

@@ -1,12 +1,12 @@
 import type { InjectionKey, Ref } from 'vue'
 import type { Emitter } from 'mitt'
 import type { Volver } from './Volver'
-import type { AlertModifiers } from './types/alert'
 import type {
 	AccordionGroupState,
 	InputGroupState,
 	ButtonGroupState,
 	AlertGroupState,
+	AlertModifier,
 } from './types'
 
 export const DEFAULT_ICONIFY_PROVIDER = 'vv'
@@ -73,6 +73,11 @@ export enum DropdownItemRole {
 	presentation = 'presentation',
 }
 
+export enum AlertRole {
+	alert = 'alert',
+	alertdialog = 'alertdialog',
+}
+
 // volver
 export const INJECTION_KEY_VOLVER = Symbol.for('volver') as InjectionKey<Volver>
 
@@ -140,7 +145,7 @@ export const DEFAULT_ALERT_INFO_ICON = 'information'
 export const DEFAULT_ALERT_SUCCESS_ICON = 'check-circle'
 export const DEFAULT_ALERT_WARNING_ICON = 'warning'
 export const DEFAULT_ALERT_DANGER_ICON = 'error'
-export const DefaultAlertIconMap = new Map<AlertModifiers, string>([
+export const DefaultAlertIconMap = new Map<AlertModifier, string>([
 	['success', DEFAULT_ALERT_SUCCESS_ICON],
 	['info', DEFAULT_ALERT_INFO_ICON],
 	['warning', DEFAULT_ALERT_WARNING_ICON],

package/src/stories/Accordion/Accordion.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/AccordionGroup/AccordionGroup.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/Alert/Alert.test.ts

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/AlertGroup/AlertGroup.test.ts

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/Avatar/Avatar.test.ts

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/AvatarGroup/AvatarGroup.test.ts

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/Badge/Badge.test.ts

@@ -1,5 +1,5 @@
 import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 import { expect } from '@/test/expect'
 
 export const defaultTest = async ({ canvasElement, args }: PlayAttributes) => {

package/src/stories/Button/Button.test.ts

@@ -1,5 +1,5 @@
 import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 import { expect } from '@/test/expect'
 
 export async function defaultTest(

package/src/stories/ButtonGroup/ButtonGroup.test.ts

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest(
 	{ canvasElement, args }: PlayAttributes = {} as PlayAttributes,

package/src/stories/Card/Card.test.ts

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaulTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/Checkbox/Checkbox.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/CheckboxGroup/CheckboxGroup.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 import { getOptionValue } from '@/test/options'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {

package/src/stories/Combobox/Combobox.test.ts

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 import { sleep } from '@/test/sleep'
 import { defaultTest as selectDefaultTest } from '@/stories/Select/Select.test'
 

package/src/stories/Dialog/Dialog.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { userEvent } from '@storybook/testing-library'
-import { within } from '@storybook/testing-library'
+import { userEvent } from '@storybook/test'
+import { within } from '@storybook/test'
 import { sleep } from '@/test/sleep'
 
 export async function defaultTest(

package/src/stories/Dropdown/Dropdown.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement }: PlayAttributes) {
 	const wrapper = (await within(canvasElement).findByTestId(

package/src/stories/InputText/InputText.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within, userEvent } from '@storybook/testing-library'
+import { within, userEvent } from '@storybook/test'
 import { INPUT_TYPES, type InputType } from '@/components/VvInputText'
 
 const valueByType = (type: InputType, mask?: string, id?: string) => {

package/src/stories/Nav/Nav.test.ts

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/Progress/Progress.test.ts

@@ -1,6 +1,6 @@
 import { expect } from '@/test/expect'
 import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement }: PlayAttributes) {
 	const progress = await within(canvasElement).findByRole('progressbar')

package/src/stories/Radio/Radio.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/RadioGroup/RadioGroup.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 import { getOptionValue } from '@/test/options'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {

package/src/stories/Select/Select.test.ts

@@ -1,5 +1,5 @@
 import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
 

package/src/stories/Tab/Tab.test.ts

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/Textarea/Textarea.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within, userEvent } from '@storybook/testing-library'
+import { within, userEvent } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/Tooltip/Tooltip.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const parentElement = (await within(canvasElement).findByTestId(

package/src/test/expect.ts

@@ -1,5 +1,4 @@
-import { expect } from '@storybook/jest'
-import { userEvent } from '@storybook/testing-library'
+import { userEvent, expect } from '@storybook/test'
 import { axe } from 'jest-axe'
 import { sleep } from '@/test/sleep'
 
@@ -79,8 +78,7 @@ expect.extend({
 		const img = element.getElementsByTagName(imgTag)
 		return {
 			pass: img.length === 1,
-			message: () =>
-				`${imgTag} not exist!`,
+			message: () => `${imgTag} not exist!`,
 		}
 	},
 })

package/src/types/alert.ts

@@ -1,20 +1,24 @@
-export type AlertModifiers =
+import type { VvIconProps } from '@/components/VvIcon'
+import { AlertRole } from '@/constants'
+
+export type AlertModifier =
 	| 'success'
 	| 'info'
 	| 'warning'
 	| 'danger'
 	| 'brand'
 	| 'accent'
+	| string
 
 export type Alert = {
 	id: string | number
-	group: string
 	title?: string
-	icon: string | Record<string, unknown>
+	icon?: string | VvIconProps
 	content?: string
 	footer?: string
-	modifiers: AlertModifiers
-	dismissable: boolean
-	autoClose: number
-	timestamp: number
+	modifiers?: AlertModifier | AlertModifier[]
+	dismissable?: boolean
+	autoClose?: number
+	closeLabel?: string
+	role?: AlertRole
 }