@volverjs/ui-vue 0.0.8 → 0.0.9-beta.10

package/src/components/common/HintSlot.ts

@@ -1,4 +1,5 @@
 import type { ExtractPropTypes, Slots } from 'vue'
+import type { Ref } from 'vue'
 
 /**
  * Merge array of string
@@ -19,7 +20,7 @@ export type HintSlotProps = Readonly<
 			default: ''
 			required: true
 		}
-		modelValue: null
+		modelValue: unknown
 		valid: BooleanConstructor
 		validLabel: (StringConstructor | ArrayConstructor)[]
 		invalid: BooleanConstructor
@@ -35,27 +36,39 @@ export type HintSlotProps = Readonly<
  * @param {Slots} parentSlots vue slots
  * @returns {Component} vue component
  */
-export function HintSlotFactory(props: HintSlotProps, slots: Slots) {
+export function HintSlotFactory(
+	propsOrRef: HintSlotProps | Ref<HintSlotProps>,
+	slots: Slots,
+) {
+	const props = computed(() => {
+		if (isRef(propsOrRef)) {
+			return propsOrRef.value
+		}
+		return propsOrRef
+	})
+
 	// label
-	const invalidLabel = computed(() => joinLines(props.invalidLabel))
-	const validLabel = computed(() => joinLines(props.validLabel))
-	const loadingLabel = computed(() => props.loadingLabel)
-	const hintLabel = computed(() => props.hintLabel)
+	const invalidLabel = computed(() => joinLines(props.value.invalidLabel))
+	const validLabel = computed(() => joinLines(props.value.validLabel))
+	const loadingLabel = computed(() => props.value.loadingLabel)
+	const hintLabel = computed(() => props.value.hintLabel)
 
 	// type
 	const hasLoadingLabelOrSlot = computed(() =>
-		Boolean(props.loading && (slots.loading || loadingLabel.value)),
+		Boolean(props.value.loading && (slots.loading || loadingLabel.value)),
 	)
 	const hasInvalidLabelOrSlot = computed(
 		() =>
 			!hasLoadingLabelOrSlot.value &&
-			Boolean(props.invalid && (slots.invalid || invalidLabel.value)),
+			Boolean(
+				props.value.invalid && (slots.invalid || invalidLabel.value),
+			),
 	)
 	const hasValidLabelOrSlot = computed(
 		() =>
 			!hasLoadingLabelOrSlot.value &&
 			!hasInvalidLabelOrSlot.value &&
-			Boolean(props.valid && (slots.valid || validLabel.value)),
+			Boolean(props.value.valid && (slots.valid || validLabel.value)),
 	)
 	const hasHintLabelOrSlot = computed(
 		() =>
@@ -72,10 +85,10 @@ export function HintSlotFactory(props: HintSlotProps, slots: Slots) {
 			hasHintLabelOrSlot.value,
 	)
 	const hintSlotScope = computed(() => ({
-		modelValue: props.modelValue,
-		valid: props.valid,
-		invalid: props.invalid,
-		loading: props.loading,
+		modelValue: props.value.modelValue,
+		valid: props.value.valid,
+		invalid: props.value.invalid,
+		loading: props.value.loading,
 	}))
 	// component
 	const HintSlot = defineComponent({

package/src/components/index.ts

@@ -1,5 +1,7 @@
 export { default as VvAccordion } from './VvAccordion/VvAccordion.vue'
 export { default as VvAccordionGroup } from './VvAccordionGroup/VvAccordionGroup.vue'
+export { default as VvAction } from './VvAction/VvAction.vue'
+export { default as VvAlert } from './VvAlert/VvAlert.vue'
 export { default as VvBadge } from './VvBadge/VvBadge.vue'
 export { default as VvBreadcrumb } from './VvBreadcrumb/VvBreadcrumb.vue'
 export { default as VvButton } from './VvButton/VvButton.vue'
@@ -12,8 +14,11 @@ export { default as VvDialog } from './VvDialog/VvDialog.vue'
 export { default as VvDropdown } from './VvDropdown/VvDropdown.vue'
 export { default as VvIcon } from './VvIcon/VvIcon.vue'
 export { default as VvInputText } from './VvInputText/VvInputText.vue'
+export { default as VvNav } from './VvNav/VvNav.vue'
 export { default as VvProgress } from './VvProgress/VvProgress.vue'
 export { default as VvRadio } from './VvRadio/VvRadio.vue'
 export { default as VvRadioGroup } from './VvRadioGroup/VvRadioGroup.vue'
 export { default as VvSelect } from './VvSelect/VvSelect.vue'
+export { default as VvTab } from './VvTab/VvTab.vue'
 export { default as VvTextarea } from './VvTextarea/VvTextarea.vue'
+export { default as VvTooltip } from './VvTooltip/VvTooltip.vue'

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,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/props/index.ts

@@ -457,4 +457,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/Nav/Nav.settings.ts

@@ -1,7 +1,9 @@
+import type { Meta } from '@storybook/vue3'
+import type { VvNav } from '@/components'
 import { VvNavProps } from '@/components/VvNav'
 import { ModifiersArgTypes } from '@/stories/argTypes'
 
-export const defaultArgs = {
+export const defaultArgs: Meta<typeof VvNav>['args'] = {
 	...propsToObject(VvNavProps),
 	items: [
 		{

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

@@ -20,9 +20,9 @@ export const Default: Story = {
 		...defaultArgs,
 	},
 	render: (args) => ({
-		components: {VvTab},
+		components: { VvTab },
 		setup() {
-			return {args}
+			return { args }
 		},
 		template: /* html */ `
 			<div class="m-md w-1/2">
@@ -64,7 +64,7 @@ export const Default: Story = {
 						</p>
 					</template>
 				</vv-tab>
-			</div>`
+			</div>`,
 	}),
 	play: defaultTest,
 }

package/src/stories/Textarea/TextareaLength.stories.ts

@@ -35,7 +35,7 @@ export const Count: Story = {
 	args: {
 		...Default.args,
 		count: true,
-		minLength: 100,
+		minlength: 100,
 	},
 }