@volverjs/ui-vue 0.0.9-beta.2 → 0.0.9-beta.21

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 @@
+export { useAlert } from './alert/useAlert'

package/src/constants.ts

@@ -1,9 +1,15 @@
 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'
 
+export enum Strategy {
+	absolute = 'absolute',
+	fixed = 'fixed',
+}
+
 export enum Side {
 	left = 'left',
 	right = 'right',
@@ -110,3 +116,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/props/index.ts

@@ -9,6 +9,7 @@ import type {
 } from '../types/floating-ui'
 import {
 	Placement,
+	Strategy,
 	Position,
 	Side,
 	AnchorTarget,
@@ -228,22 +229,17 @@ export const DropdownProps = {
 	placement: {
 		type: String as PropType<`${Side}` | `${Placement}`>,
 		default: Side.bottom,
-		validator: (value: Side & Placement) => {
-			return (
-				Object.values(Side).includes(value) ||
-				Object.values(Placement).includes(value)
-			)
-		},
+		validator: (value: Side & Placement) =>
+			Object.values(Side).includes(value) ||
+			Object.values(Placement).includes(value),
 	},
 	/**
 	 * Dropdown strategy
 	 */
 	strategy: {
-		type: String as PropType<'fixed' | 'absolute'>,
-		default: 'absolute',
-		validator: (value: 'fixed' | 'absolute') => {
-			return ['fixed', 'absolute'].includes(value)
-		},
+		type: String as PropType<`${Strategy}`>,
+		default: undefined,
+		validator: (value: Strategy) => Object.values(Strategy).includes(value),
 	},
 	/**
 	 * Dropdown show / hide transition name
@@ -457,4 +453,11 @@ export const ActionProps = {
 		validator: (value: ButtonType) =>
 			Object.values(ButtonType).includes(value),
 	},
+	/**
+	 * Button aria-label
+	 */
+	ariaLabel: {
+		type: String,
+		default: undefined,
+	},
 }

package/src/resolvers/unplugin.ts

@@ -60,6 +60,9 @@ export const getStyleNames = function (kebabName: string) {
 			'vv-dropdown-action',
 		]
 	}
+	if (kebabName === 'vv-button-group') {
+		return ['vv-button', 'vv-button-group']
+	}
 	if (kebabName === 'vv-accordion-group') {
 		return ['vv-accordion', 'vv-accordion-group']
 	}

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

@@ -1,7 +1,9 @@
+import type { Meta } from '@storybook/vue3'
+import type { VvAlert } from '@/components'
 import { IconArgTypes } from '../argTypes'
 import { ModifiersArgTypes } from '../argTypes'
 
-export const defaultArgs = {
+export const defaultArgs: Meta<typeof VvAlert>['args'] = {
 	title: 'Alert title!',
 	content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
 	dismissable: false,

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/Button/Button.settings.ts

@@ -1,3 +1,5 @@
+import type { Meta } from '@storybook/vue3'
+import type { VvButton } from '@/components'
 import {
 	DefaultSlotArgTypes,
 	ModifiersArgTypes,
@@ -7,7 +9,7 @@ import {
 } from '@/stories/argTypes'
 import normal from '@/assets/icons/normal.json'
 
-export const defaultArgs = {
+export const defaultArgs: Meta<typeof VvButton>['args'] = {
 	label: 'Button',
 	type: 'button',
 	toggle: false,
@@ -22,7 +24,7 @@ export const defaultArgs = {
 }
 
 export const argTypes = {
-	 modifiers: {
+	modifiers: {
 		...ModifiersArgTypes.modifiers,
 		options: [
 			'primary',
@@ -153,5 +155,5 @@ export const argTypes = {
 				summary: 'html',
 			},
 		},
-	}, 
+	},
 }

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

@@ -1,3 +1,5 @@
+import type { VvCombobox } from '@/components'
+import type { Meta } from '@storybook/vue3'
 import {
 	ValidArgTypes,
 	InvalidArgTypes,
@@ -15,7 +17,7 @@ import {
 } from '@/stories/argTypes'
 import { VvComboboxProps } from '@/components/VvCombobox'
 
-export const defaultArgs = {
+export const defaultArgs: Meta<typeof VvCombobox>['args'] = {
 	...propsToObject(VvComboboxProps),
 	name: 'vv-combobox',
 	maxValues: undefined,
@@ -43,6 +45,7 @@ export const defaultArgs = {
 	],
 	placeholder: 'Select an option',
 	label: 'Combobox label',
+	strategy: 'fixed',
 }
 
 export const argTypes = {
@@ -83,7 +86,7 @@ export const argTypes = {
 		},
 	},
 	noResultsLabel: {
-		description: 'Label of "no results" options',
+		description: 'Label for no search results',
 		control: {
 			type: 'text',
 		},
@@ -93,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: {
@@ -107,12 +187,25 @@ export const argTypes = {
 			},
 		},
 	},
+	searchFunction: {
+		description: 'Search function to filter options',
+		table: {
+			defaultValue: {
+				summary: undefined,
+			},
+		},
+	},
 	searchPlaceholder: {
 		description:
 			'Text that appears in the in the search input when it has no value set..',
 		control: {
 			type: 'text',
 		},
+		table: {
+			defaultValue: {
+				summary: 'Search...',
+			},
+		},
 	},
 	debounceSearch: {
 		description: 'Debounce milliseconds for search',
@@ -170,6 +263,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',
@@ -187,6 +296,14 @@ export const argTypes = {
 			},
 		},
 	},
+	autofocusFirst: {
+		description: 'Autofocus first option on open dropdown',
+		table: {
+			defaultValue: {
+				summary: true,
+			},
+		},
+	},
 	before: {
 		control: {
 			type: 'text',

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

@@ -62,7 +62,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 		}
 
 		// select second value
-		if (args.options.length > 1) {
+		if (args.options && args.options.length > 1) {
 			await expect(dropdownSecondItem).toBeClicked()
 			await sleep()
 			const secondValue = getOptionValue(

package/src/stories/InputText/InputText.settings.ts

@@ -174,43 +174,64 @@ export const argTypes = {
 			},
 		},
 	},
-	mask: {
-		description: 'Input mask, only for text type',
-
+	iMask: {
+		description: '[iMask](https://imask.js.org/guide.html) options',
+		control: {
+			type: 'object',
+		},
+	},
+	masked: {
+		description: 'Masked input',
 		control: {
 			type: 'text',
 		},
 	},
-	maskEager: {
-		description: 'Show mask before typing',
+	autoWidth: {
+		description: 'Adjust input width to content',
+		control: {
+			type: 'boolean',
+		},
 		table: {
 			defaultValue: {
 				summary: false,
 			},
+			type: {
+				summary: 'boolean',
+			},
 		},
 	},
-	maskReversed: {
-		description: 'Write typing reverse (ex. for numbers)',
+	hideActions: {
+		description: 'Hide type number, password and search actions',
+		control: {
+			type: 'boolean',
+		},
 		table: {
 			defaultValue: {
 				summary: false,
 			},
+			type: {
+				summary: 'boolean',
+			},
 		},
 	},
-	maskTokens: {
-		description: 'Add mask custom tokens',
-		table: {
-			defaultValue: {
-				summary: 'undefined',
-			},
+	unit: {
+		description: 'Add unit label to input',
+		control: {
+			type: 'text',
 		},
 	},
-	maskTokensReplace: {
-		description: 'Replace default tokens',
+	selectOnFocus: {
+		description: 'Select input text on focus',
+		control: {
+			type: 'boolean',
+		},
 		table: {
 			defaultValue: {
 				summary: false,
 			},
+			type: {
+				summary: 'boolean',
+			},
 		},
 	},
 	before: {