@volverjs/ui-vue 0.0.9-beta.1 → 0.0.9-beta.3

package/src/components/VvAction/VvAction.vue

@@ -66,7 +66,8 @@
 	const hasProps = computed(() => {
 		const toReturn = {
 			...dropdownAria?.value,
-			'aria-pressed': pressed.value ? true : undefined,
+			ariaPressed: pressed.value ? true : undefined,
+			ariaLabel: props.ariaLabel,
 			role: role?.value,
 		}
 		switch (hasTag.value) {

package/src/components/VvButton/VvButton.vue

@@ -118,6 +118,7 @@
 			href,
 			target,
 			rel,
+			ariaLabel,
 		}"
 		:id="hasId"
 		ref="element"

package/src/components/VvDropdown/VvDropdown.vue

@@ -161,7 +161,11 @@
 		referenceEl,
 		floatingEl,
 		{
-			whileElementsMounted: autoUpdate,
+			whileElementsMounted: (...args) => {
+				return autoUpdate(...args, {
+					animationFrame: props.strategy === 'fixed',
+				})
+			},
 			placement: computed(() => props.placement),
 			strategy: computed(() => props.strategy),
 			middleware,

package/src/components/VvDropdown/index.ts

@@ -1,17 +1,11 @@
 import type { PropType } from 'vue'
-import { DropdownProps, IdProps } from '../../props'
+import { DropdownProps, IdProps, ModifiersProps } from '../../props'
 import { DropdownRole } from '../../constants'
 
 export const VvDropdownProps = {
 	...IdProps,
 	...DropdownProps,
-	/**
-	 * Component BEM modifiers
-	 */
-	modifiers: {
-		type: [String, Array] as PropType<string | string[]>,
-		default: 'mobile',
-	},
+	...ModifiersProps,
 	/**
 	 * Show / hide dropdown programmatically
 	 */

package/src/components/VvNav/VvNav.vue

@@ -55,7 +55,7 @@
 						disabled: navItem.disabled,
 					}"
 					class="vv-nav__item-label"
-					v-on="navItem.on || {}"
+					v-on="navItem.on"
 					@click="onClick(navItem)"
 				>
 					{{ navItem.title }}

package/src/components/VvNav/index.ts

@@ -6,7 +6,7 @@ export type NavItem = {
 	to?: string | { [key: string]: unknown }
 	href?: string
 	disabled?: boolean
-	on: () => void
+	on?: Record<string, () => void>
 }
 
 export const VvNavProps = {

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

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,
 	},
 }