@volverjs/ui-vue 0.0.6-beta.7 → 0.0.7-beta.1

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

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

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']

package/src/stories/Accordion/Accordion.settings.ts

@@ -1,8 +1,4 @@
-import {
-	DefaultSlotArgTypes,
-	DisabledArgTypes,
-	ModifiersArgTypes,
-} from '@/stories/argTypes'
+import { DisabledArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
 	title: 'Lorem Ipsum',
@@ -10,6 +6,7 @@ export const defaultArgs = {
 		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
 	modifiers: [],
 	disabled: false,
+	not: false,
 }
 
 export const argTypes = {
@@ -25,7 +22,7 @@ export const argTypes = {
 			},
 		},
 	},
-	details: {
+	default: {
 		description: 'The content slot',
 		control: {
 			type: 'text',
@@ -37,10 +34,24 @@ export const argTypes = {
 			},
 		},
 	},
+	title: {
+		description: 'The accordion title',
+	},
+	content: {
+		description: 'The accordion content',
+	},
 	modifiers: {
 		...ModifiersArgTypes.modifiers,
 		options: ['marker-right', 'bordered'],
 	},
+	not: {
+		description: 'Inverts the accordion state',
+		control: 'boolean',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
 	...DisabledArgTypes,
-	...DefaultSlotArgTypes,
 }

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import { defaultTest } from './Accordion.test'
+import { defaultArgs, argTypes } from './Accordion.settings'
+
+const meta: Meta<typeof VvAccordion> = {
+	title: 'Components/Accordion',
+	component: VvAccordion,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAccordion>
+
+export const Default: Story = {
+	args: defaultArgs,
+	play: defaultTest,
+	render: (args) => ({
+		components: { VvAccordion },
+		setup() {
+			const open = ref(false)
+			return { args, open }
+		},
+		template: /* html */ `
+			<vv-accordion data-testId="element" v-bind="args" v-model="open">
+                <template #summary v-if="args.summary"><div v-html="args.summary"></div></template>
+                <template #default v-if="args.default"><div v-html="args.default"></div></template>
+            </vv-accordion>
+            <div class="mt-24">
+                {{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ open }}</span>
+            </div>
+    `,
+	}),
+}
+
+export const Not: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		not: true,
+	},
+}

package/src/stories/Accordion/AccordionSlots.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import { Default as AccordionDefault } from './Accordion.stories'
+import { defaultArgs } from './Accordion.settings'
+
+const meta: Meta<typeof VvAccordion> = {
+	title: 'Components/Accordion/Slots',
+	component: VvAccordion,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAccordion>
+
+export const Default: Story = {
+	...AccordionDefault,
+	args: {
+		...defaultArgs,
+		default: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Details</strong>`,
+	},
+}
+
+export const Summary: Story = {
+	...AccordionDefault,
+	args: {
+		...defaultArgs,
+		summary: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Summary</strong>`,
+	},
+}

package/src/stories/AccordionGroup/AccordionGroup.settings.ts

@@ -42,11 +42,33 @@ export const argTypes = {
 			disable: true,
 		},
 	},
+	items: {
+		description: 'Accordion group items',
+	},
+	collapse: {
+		description: 'Enables accordion group collapse',
+		control: 'boolean',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	not: {
+		description: 'Inverts the accordion group state',
+		control: 'boolean',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
 	modifiers: {
 		...ModifiersArgTypes.modifiers,
 		options: ['compact', 'bordered'],
 	},
 	itemModifiers: {
+		description: 'Accordion items BEM modifiers',
 		control: 'check',
 		options: ['marker-right', 'bordered'],
 	},

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
+import { defaultTest } from './AccordionGroup.test'
+import { defaultArgs, argTypes } from './AccordionGroup.settings'
+
+export default {
+	title: 'Components/AccordionGroup',
+	component: VvAccordionGroup,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+} as Meta<typeof VvAccordionGroup>
+
+export type Story = StoryObj<typeof VvAccordionGroup>
+
+export const Default: Story = {
+	args: defaultArgs,
+	play: defaultTest,
+	render: (args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { VvAccordionGroup },
+		setup() {
+			return { args }
+		},
+		data() {
+			return {
+				selected: null,
+			}
+		},
+		template: /*html*/ `
+		<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
+		<div class="mt-24">
+			{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ selected }}</span>
+		</div>
+	`,
+	}),
+}
+
+export const Not: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		not: true,
+	},
+}
+
+export const Collapse: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		collapse: true,
+	},
+}
+
+export const CollapseNot: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		collapse: true,
+		not: true,
+	},
+}

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.ts

@@ -0,0 +1,53 @@
+import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
+import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import { defaultTest } from './AccordionGroup.test'
+import { defaultArgs, argTypes } from './AccordionGroup.settings'
+import meta, { type Story } from './AccordionGroup.stories'
+
+export default {
+	...meta,
+	title: 'Components/AccordionGroup/Slots',
+}
+
+export const Default: Story = {
+	args: defaultArgs,
+	argTypes: {
+		...argTypes,
+		items: {
+			control: {
+				disable: true,
+			},
+		},
+		default: {
+			...argTypes.default,
+			control: {
+				disable: true,
+			},
+		},
+	},
+	play: defaultTest,
+	render: (args) => ({
+		props: Object.keys(argTypes),
+		components: { VvAccordionGroup, VvAccordion },
+		setup() {
+			return { args }
+		},
+		data() {
+			return {
+				selected: '',
+				content:
+					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
+			}
+		},
+		template: /*html*/ `
+			<vv-accordion-group data-testId="element" v-bind="args" v-model="selected">
+				<vv-accordion name="a-1" data-testId="a-1" title="Details 1" :content="content" />
+				<vv-accordion name="a-2" title="Details 2" :content="content" />
+				<vv-accordion name="a-3" title="Details 3" :content="content" />
+			</vv-accordion-group>
+			<div class="mt-24"  >
+				Opened: <span data-testId="value">{{ selected }}</span>
+			</div>
+		`,
+	}),
+}

package/src/stories/Alert/Alert.settings.ts

@@ -0,0 +1,110 @@
+import { IconArgTypes } from '../argTypes'
+import { ModifiersArgTypes } from '../argTypes'
+
+export const defaultArgs = {
+	title: 'Alert title!',
+	content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+	dismissable: false,
+	autoClose: 0,
+	role: 'alert',
+}
+
+export const argTypes = {
+	title: {
+		description: 'The alert title',
+	},
+	content: {
+		description: 'The alert content',
+	},
+	dismissable: {
+		description: 'Dismissable by clicking on the close button',
+		control: 'boolean',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	autoClose: {
+		description: 'Auto close after the specified time in milliseconds',
+		control: 'number',
+		table: {
+			defaultValue: {
+				summary: 0,
+			},
+		},
+	},
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: [
+			'success',
+			'warning',
+			'danger',
+			'info',
+			'brand',
+			'notification',
+			'accent',
+			'callout',
+		],
+	},
+	icon: IconArgTypes.icon,
+	role: {
+		description: 'The alert role',
+		control: 'radio',
+		options: ['alert', 'alertdialog'],
+		table: {
+			defaultValue: 'alert',
+		},
+	},
+	// slots
+	header: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	'title::before': {
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	'title::after': {
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	default: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	footer: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+}

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvAlert from '@/components/VvAlert/VvAlert.vue'
+import { defaultTest } from './Alert.test'
+import { defaultArgs, argTypes } from './Alert.settings'
+
+const meta: Meta<typeof VvAlert> = {
+	title: 'Components/Alert',
+	component: VvAlert,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+export type Story = StoryObj<typeof VvAlert>
+
+export const Default: Story = {
+	args: defaultArgs,
+	play: defaultTest,
+	render: (args) => ({
+		components: { VvAlert },
+		setup() {
+			return { args }
+		},
+		template: /* html */ `
+			<vv-alert v-bind="args" data-testId="element">
+				<template #header v-if="args.header"><div v-html="args.header"></div></template>
+				<template #title::before v-if="args['title::before']"><div v-html="args['title::before']"></div></template>
+				<template #title::after v-if="args['title::after']"><div v-html="args['title::after']"></div></template>
+				<template #default v-if="args.default"><div v-html="args.default"></div></template>
+				<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
+			</vv-alert>
+        `,
+	}),
+}
+
+export const Dismissable: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		dismissable: true,
+	},
+}
+
+export const AutoClose: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		autoClose: 8000,
+	},
+}
+
+export const Icon: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		icon: 'warning',
+	},
+}