@volverjs/ui-vue 0.0.9-beta.4 → 0.0.9-beta.6

package/src/components/VvCombobox/VvCombobox.vue

@@ -334,7 +334,7 @@
 		autoPlacement: propsDefaults.value.autoPlacement,
 		arrow: propsDefaults.value.arrow,
 		autofocusFirst: searchable.value
-			? false
+			? true
 			: propsDefaults.value.autofocusFirst,
 		triggerWidth: propsDefaults.value.triggerWidth,
 		modifiers: propsDefaults.value.dropdownModifiers,
@@ -390,7 +390,6 @@
 					<slot name="dropdown::before" />
 					<input
 						v-if="searchable"
-						v-show="expanded"
 						:id="hasSearchId"
 						ref="inputSearchEl"
 						v-model="searchText"
@@ -579,7 +578,7 @@
 						<!-- Close button if dropdown custom position is enabled and floating-ui disabled -->
 						<VvButton
 							v-if="dropdownEl?.customPosition"
-							label="Close"
+							:label="closeLabel"
 							modifiers="secondary"
 							@click="dropdownEl.hide()"
 						/>

package/src/components/VvCombobox/index.ts

@@ -40,6 +40,13 @@ export const VvComboboxProps = {
 	...UnselectableProps,
 	...DropdownProps,
 	...LabelProps,
+	/**
+	 * Dropdown show / hide transition name
+	 */
+	transitionName: {
+		type: String,
+		default: 'vv-dropdown--mobile-fade-block',
+	},
 	/**
 	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
 	 */
@@ -71,6 +78,10 @@ export const VvComboboxProps = {
 	 * Label for deselected option hint
 	 */
 	deselectHintLabel: { type: String, default: 'Press enter to remove' },
+	/**
+	 * Label close button
+	 */
+	closeLabel: { type: String, default: 'Close' },
 	/**
 	 * Select input placeholder
 	 */

package/src/components/VvDropdown/VvDropdown.vue

@@ -318,7 +318,7 @@
 		}
 		return [
 			...element.querySelectorAll(
-				'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
+				'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
 			),
 		].filter(
 			(el) =>

package/src/composables/alert/useAlert.ts

@@ -0,0 +1,103 @@
+import {
+	DEFAULT_ALERT_AUTO_CLOSE,
+	DEFAULT_ALERT_DISMISSABLE,
+	DEFAULT_ALERT_GROUP,
+	DEFAULT_ALERT_MODIFIERS,
+	DEFAULT_ALERT_INFO_ICON,
+	DefaultAlertIconMap,
+} from '@/constants'
+import type { Alert, AlertModifiers } from '@/types/alert'
+
+const groups = reactive(
+	new Map<string, Map<string, Alert>>([
+		[DEFAULT_ALERT_GROUP, new Map<string, Alert>()],
+	]),
+)
+
+/**
+ * @description Composable to access alert groups, alerts and functions to add, remove and get alerts by group.
+ * @example
+ *  const { groups, alerts, addAlert, removeAlert, getAlerts } = useAlert()
+ *  addAlert({
+ *      title: 'Success!',
+ *      modifiers: 'success',
+ *  })
+ *
+ *  `<vv-alert-group :items="alerts" :onClose="removeAlert" />`
+ *
+ *  @returns  {
+ *      alerts: ComputedRef<Alert[]> reactive list of alerts default group,
+ *      groups: ReactiveRef<Map<string, Map<string, Alert>>>,
+ *      addAlert: Function to add alert,
+ *      removeAlert: Function to remove alert,
+ *      getAlerts: Function to get alerts by group
+ *  }
+ */
+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,
+		} = {} as Partial<Alert>,
+	) => {
+		if (!groups.has(group)) {
+			groups.set(group, new Map<string, Alert>())
+		}
+		const groupMap = groups.get(group)
+		const normalizedModifiers =
+			typeof modifiers === 'string' ? modifiers.split(' ') : modifiers
+
+		if (!icon) {
+			const alertModifier = normalizedModifiers.find((modifier) =>
+				DefaultAlertIconMap.has(modifier as AlertModifiers),
+			) as AlertModifiers | undefined
+
+			if (alertModifier) {
+				icon = DefaultAlertIconMap.get(alertModifier) as string
+			}
+		}
+		groupMap?.set(id.toString(), {
+			id,
+			group,
+			title,
+			icon,
+			content,
+			footer,
+			modifiers,
+			dismissable,
+			autoClose,
+			timestamp: Date.now(),
+		})
+	}
+
+	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,
+				  )
+				: []
+		})
+	}
+
+	return {
+		groups,
+		alerts: getAlerts(),
+		addAlert,
+		removeAlert,
+		getAlerts,
+	}
+}

package/src/composables/index.ts

@@ -0,0 +1,3 @@
+import { useAlert } from './alert/useAlert'
+
+export { useAlert }

package/src/constants.ts

@@ -1,6 +1,7 @@
 import type { InjectionKey, Ref } from 'vue'
 import type { Emitter } from 'mitt'
 import type { Volver } from './Volver'
+import type { AlertModifiers } from './types/alert'
 
 export const DEFAULT_ICONIFY_PROVIDER = 'vv'
 
@@ -110,3 +111,23 @@ export const INJECTION_KEY_ALERT_GROUP = Symbol.for(
 	name?: Ref<string | undefined>
 	bus?: Emitter<{ close: string }>
 }>
+export const DEFAULT_ALERT_AUTO_CLOSE = 10000
+export const DEFAULT_ALERT_MODIFIERS = 'info'
+export const DEFAULT_ALERT_DISMISSABLE = true
+export const DEFAULT_ALERT_GROUP = 'default'
+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>([
+	['success', DEFAULT_ALERT_SUCCESS_ICON],
+	['info', DEFAULT_ALERT_INFO_ICON],
+	['warning', DEFAULT_ALERT_WARNING_ICON],
+	['danger', DEFAULT_ALERT_DANGER_ICON],
+])
+// {
+// 	success: DEFAULT_ALERT_SUCCESS_ICON,
+// 	info: DEFAULT_ALERT_INFO_ICON,
+// 	warning: DEFAULT_ALERT_WARNING_ICON,
+// 	danger: DEFAULT_ALERT_DANGER_ICON,
+// }

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

@@ -6,6 +6,8 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(
 		'element',
 	)) as HTMLElement
+	const buttons =
+		canvasElement.getElementsByClassName('buttons-container')?.[0]
 
 	expect(element).toHaveClass('vv-alert-group')
 
@@ -71,6 +73,17 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 		expect(element.lastElementChild?.innerHTML).toEqual(div.innerHTML)
 	}
 
+	if (buttons) {
+		// click every button child and expect to have alert with correct css class
+		for (let i = 0; i < buttons.children.length; i++) {
+			const button = buttons.children[i] as HTMLElement
+			await button.click()
+			expect(alertGroupList.lastElementChild).toHaveClass(
+				`vv-alert--${button.id}`,
+			)
+		}
+	}
+
 	// check accessibility
 	await expect(element).toHaveNoViolations()
 }

package/src/stories/AlertGroup/AlertGroupSlots.stories.ts

@@ -1,11 +1,11 @@
 import type { Meta } from '@storybook/vue3'
-import VvAlert from '@/components/VvAlert/VvAlert.vue'
+import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
 import { defaultArgs, argTypes } from './AlertGroup.settings'
 import { Default as DefaultStory, type Story } from './AlertGroup.stories'
 
-const meta: Meta<typeof VvAlert> = {
+const meta: Meta<typeof VvAlertGroup> = {
 	title: 'Components/AlertGroup/Slots',
-	component: VvAlert,
+	component: VvAlertGroup,
 	args: defaultArgs,
 	argTypes,
 }

package/src/stories/AlertGroup/AlertGroupWithComposable.stories.ts

@@ -0,0 +1,118 @@
+import type { Meta } from '@storybook/vue3'
+import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { defaultArgs, argTypes } from './AlertGroup.settings'
+import { Default as DefaultStory, type Story } from './AlertGroup.stories'
+import { useAlert } from '@/composables/alert/useAlert'
+
+const meta: Meta<typeof VvAlertGroup> = {
+	title: 'Components/AlertGroup/UseComposable',
+	component: VvAlertGroup,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+export const UseComposable: Story = {
+	...DefaultStory,
+	parameters: {
+		docs: {
+			source: {
+				type: 'code',
+				language: 'html',
+				code: /* html */ `
+<div class="flex gap-md">
+	<vv-button label="Show success" modifiers="secondary" @click="showSuccess" class="mb-lg" />
+	<vv-button label="Show danger" modifiers="secondary" @click="showDanger" class="mb-lg" />
+	<vv-button label="Show warning" modifiers="secondary" @click="showWarning" class="mb-lg" />
+	<vv-button label="Show info" modifiers="secondary" @click="showInfo" class="mb-lg" />
+</div>
+<vv-alert-group v-bind="args" :items="alerts" :onClose="removeAlert" data-testId="element" />
+
+<script setup lang='ts'>
+	import { useAlert } from '@volverjs/ui-vue/composables'
+
+	const { addAlert, removeAlert, alerts } = useAlert()
+
+	function showSuccess() {
+		addAlert({
+			title: 'Success!',
+			modifiers: 'success',
+		})
+	}
+	function showDanger() {
+		addAlert({
+			title: 'Danger!',
+			modifiers: 'danger',
+		})
+	}
+	function showWarning() {
+		addAlert({
+			title: 'Warning!',
+			modifiers: 'warning',
+		})
+	}
+	function showInfo() {
+		addAlert({
+			title: 'Info!',
+			modifiers: 'info',
+		})
+	}
+</script>
+				`,
+			},
+		},
+	},
+	render: (args) => ({
+		components: { VvAlertGroup, VvButton },
+		setup() {
+			const { addAlert, removeAlert, alerts } = useAlert()
+
+			function showSuccess() {
+				addAlert({
+					title: 'Success!',
+					modifiers: 'success',
+				})
+			}
+			function showDanger() {
+				addAlert({
+					title: 'Danger!',
+					modifiers: 'danger',
+				})
+			}
+			function showWarning() {
+				addAlert({
+					title: 'Warning!',
+					modifiers: 'warning',
+				})
+			}
+			function showInfo() {
+				addAlert({
+					title: 'Info!',
+					modifiers: 'info',
+				})
+			}
+
+			return {
+				args,
+				alerts,
+				removeAlert,
+				showSuccess,
+				showDanger,
+				showWarning,
+				showInfo,
+			}
+		},
+		template: /* html */ `
+			<div class="buttons-container flex gap-md" >
+				<vv-button id="success" label="Show success" modifiers="secondary" @click="showSuccess" class="mb-lg" />
+				<vv-button id="danger" label="Show danger" modifiers="secondary" @click="showDanger" class="mb-lg" />
+				<vv-button id="warning" label="Show warning" modifiers="secondary" @click="showWarning" class="mb-lg" />
+				<vv-button id="info" label="Show info" modifiers="secondary" @click="showInfo" class="mb-lg" />
+			</div>
+			<vv-alert-group v-bind="args" :items="alerts" :onClose="removeAlert" data-testId="element" />
+        `,
+	}),
+}

package/src/stories/Combobox/Combobox.settings.ts

@@ -86,7 +86,7 @@ export const argTypes = {
 		},
 	},
 	noResultsLabel: {
-		description: 'Label of "no results" options',
+		description: 'Label for no search results',
 		control: {
 			type: 'text',
 		},
@@ -96,6 +96,83 @@ export const argTypes = {
 			},
 		},
 	},
+	noOptionsLabel: {
+		description: 'Label for no options available',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'No options available',
+			},
+		},
+	},
+	selectedHintLabel: {
+		description: 'Label for selected option hint',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Selected',
+			},
+		},
+	},
+	deselectActionLabel: {
+		description: 'Label for deselect action button',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Deselect',
+			},
+		},
+	},
+	selectHintLabel: {
+		description: 'Label for select option hint',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Press enter to select',
+			},
+		},
+	},
+	deselectHintLabel: {
+		description: 'Label for deselected option hint',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Press enter to remove',
+			},
+		},
+	},
+	closeLabel: {
+		description: 'Label for close button',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Close',
+			},
+		},
+	},
+	loadingLabel: {
+		description: 'Label for loading',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Loading...',
+			},
+		},
+	},
 	placeholder: {
 		description: 'Text that appears when it has no value set.',
 		control: {
@@ -116,6 +193,11 @@ export const argTypes = {
 		control: {
 			type: 'text',
 		},
+		table: {
+			defaultValue: {
+				summary: 'Search...',
+			},
+		},
 	},
 	debounceSearch: {
 		description: 'Debounce milliseconds for search',
@@ -173,6 +255,22 @@ export const argTypes = {
 			type: 'text',
 		},
 		description: 'Modifiers for dropdown',
+		table: {
+			defaultValue: {
+				summary: 'mobile',
+			},
+		},
+	},
+	transitionName: {
+		control: {
+			type: 'text',
+		},
+		description: 'Transition name for dropdown',
+		table: {
+			defaultValue: {
+				summary: 'vv-dropdown--mobile-fade-block',
+			},
+		},
 	},
 	autoOpen: {
 		description: 'Open dropdown on focus',
@@ -190,6 +288,14 @@ export const argTypes = {
 			},
 		},
 	},
+	autofocusFirst: {
+		description: 'Autofocus first option on open dropdown',
+		table: {
+			defaultValue: {
+				summary: true,
+			},
+		},
+	},
 	before: {
 		control: {
 			type: 'text',

package/src/types/alert.d.ts

@@ -0,0 +1,20 @@
+export type AlertModifiers =
+	| 'success'
+	| 'info'
+	| 'warning'
+	| 'danger'
+	| 'brand'
+	| 'accent'
+
+export type Alert = {
+	id: string | number
+	group: string
+	title?: string
+	icon: string | Record<string, unknown>
+	content?: string
+	footer?: string
+	modifiers: AlertModifiers
+	dismissable: boolean
+	autoClose: number
+	timestamp: number
+}