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

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/VvDialog/VvDialog.vue

@@ -15,16 +15,16 @@
 	const dialogEl: Ref<HTMLDialogElement | undefined> = ref()
 
 	// data
+	const modelValue = useVModel(props, 'modelValue', emit)
 	const localModelValue = ref(false)
-	const modelValue = computed({
-		get() {
-			return props.modelValue ?? localModelValue.value
-		},
-		set(value) {
-			if (props.modelValue === undefined) {
-				localModelValue.value = value
+	const opened = computed({
+		get: () => modelValue.value ?? localModelValue.value,
+		set: (newValue) => {
+			if (modelValue.value === undefined) {
+				localModelValue.value = newValue
+				return
 			}
-			emit('update:modelValue', value)
+			modelValue.value = newValue
 		},
 	})
 
@@ -80,24 +80,24 @@
 
 	// methods
 	onClickOutside(modalWrapper, () => {
-		if (!props.keepOpen) {
-			modelValue.value = false
+		if (!props.keepOpen && opened.value) {
+			opened.value = false
 		}
 	})
 
 	function close() {
-		modelValue.value = false
+		opened.value = false
 	}
 
 	function open() {
-		modelValue.value = true
+		opened.value = true
 	}
 
 	defineExpose({ close, open })
 
 	// keyboard
 	onKeyStroke('Escape', (e) => {
-		if (modelValue.value) {
+		if (opened.value) {
 			e.preventDefault()
 			close()
 		}
@@ -107,7 +107,7 @@
 <template>
 	<Transition :name="transitioName" v-on="dialogTransitionHandlers">
 		<dialog
-			v-show="modelValue"
+			v-show="opened"
 			v-bind="dialogAttrs"
 			ref="dialogEl"
 			:class="dialogClass"

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,
@@ -266,7 +270,7 @@
 	onClickOutside(
 		floatingEl,
 		() => {
-			if (!props.keepOpen) {
+			if (!props.keepOpen && expanded.value) {
 				expanded.value = false
 			}
 		},

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