@volverjs/ui-vue 0.0.10-beta.3 → 0.0.10-beta.31

package/src/props/index.ts

@@ -13,9 +13,11 @@ import {
 	Strategy,
 	Position,
 	Side,
-	AnchorTarget,
 	ButtonType,
+	ActionTag,
+	StorageType,
 } from '@/constants'
+import type { VvIconProps } from '@/components/VvIcon'
 
 export const LinkProps = {
 	/**
@@ -32,11 +34,7 @@ export const LinkProps = {
 	/**
 	 * Anchor target
 	 */
-	target: {
-		type: String as PropType<`${AnchorTarget}`>,
-		validator: (value: AnchorTarget) =>
-			Object.values(AnchorTarget).includes(value),
-	},
+	target: String,
 	/**
 	 * Anchor rel
 	 */
@@ -50,29 +48,35 @@ export const ValidProps = {
 	/**
 	 * Valid status
 	 */
-	valid: Boolean,
+	valid: { type: Boolean, default: false },
 	/**
 	 * Valid label
 	 */
-	validLabel: [String, Array],
+	validLabel: { type: [String, Array], default: undefined },
 }
 
 export const InvalidProps = {
 	/**
 	 * Invalid status
 	 */
-	invalid: Boolean,
+	invalid: {
+		type: Boolean,
+		default: false,
+	},
 	/**
 	 * Invalid label
 	 */
-	invalidLabel: [String, Array],
+	invalidLabel: { type: [String, Array], default: undefined },
 }
 
 export const LoadingProps = {
 	/**
 	 * Loading status
 	 */
-	loading: Boolean,
+	loading: {
+		type: Boolean,
+		default: false,
+	},
 	/**
 	 * Loading label
 	 */
@@ -86,56 +90,80 @@ export const DisabledProps = {
 	/**
 	 * Whether the form control is disabled
 	 */
-	disabled: Boolean,
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const SelectedProps = {
 	/**
 	 * Whether the item is selected
 	 */
-	selected: Boolean,
+	selected: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const ActiveProps = {
 	/**
 	 * Whether the item is active
 	 */
-	active: Boolean,
+	active: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const CurrentProps = {
 	/**
 	 * Whether the item is current
 	 */
-	current: Boolean,
+	current: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const PressedProps = {
 	/**
 	 * Whether the item is pressed
 	 */
-	pressed: Boolean,
+	pressed: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const LabelProps = {
 	/**
 	 * The item label
 	 */
-	label: [String, Number],
+	label: {
+		type: [String, Number],
+		default: undefined,
+	},
 }
 
 export const ReadonlyProps = {
 	/**
 	 * The value is not editable
 	 */
-	readonly: Boolean,
+	readonly: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const ModifiersProps = {
 	/**
 	 * Component BEM modifiers
 	 */
-	modifiers: [String, Array] as PropType<string | string[]>,
+	modifiers: {
+		type: [String, Array] as PropType<string | string[]>,
+		default: undefined,
+	},
 }
 
 export const HintProps = {
@@ -180,7 +208,10 @@ export const DebounceProps = {
 	/**
 	 * Milliseconds to wait before emitting the input event
 	 */
-	debounce: [Number, String],
+	debounce: {
+		type: [Number, String],
+		default: undefined,
+	},
 }
 
 export const IconProps = {
@@ -188,7 +219,10 @@ export const IconProps = {
 	 * VvIcon name or props
 	 * @see VVIcon
 	 */
-	icon: { type: [String, Object] },
+	icon: {
+		type: [String, Object] as PropType<string | VvIconProps>,
+		default: undefined,
+	},
 	/**
 	 * VvIcon position
 	 */
@@ -212,7 +246,10 @@ export const FloatingLabelProps = {
 	/**
 	 * If true the label will be floating
 	 */
-	floating: Boolean,
+	floating: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const UnselectableProps = {
@@ -254,6 +291,7 @@ export const DropdownProps = {
 	 */
 	transitionName: {
 		type: String,
+		default: undefined,
 	},
 	/**
 	 * Offset of the dropdown from the trigger
@@ -324,6 +362,7 @@ export const DropdownProps = {
 	 */
 	triggerWidth: {
 		type: Boolean,
+		default: false,
 	},
 }
 
@@ -342,7 +381,10 @@ export const AutofocusProps = {
 	 * Global attribute autofocus
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
 	 */
-	autofocus: Boolean,
+	autofocus: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const AutocompleteProps = {
@@ -376,28 +418,34 @@ export const InputTextareaProps = {
 	 * Available for input types: text, search, url, tel, email, password
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
 	 */
-	minlength: [String, Number],
+	minlength: { type: [String, Number], default: undefined },
 	/**
 	 * Input / Textarea maxlength
 	 * Maximum length (number of characters) of value
 	 * Available for input types: text, search, url, tel, email, password
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
 	 */
-	maxlength: [String, Number],
+	maxlength: { type: [String, Number], default: undefined },
 	/**
 	 * Input / Textarea placeholder
 	 * Text that appears in the form control when it has no value set
 	 * Available for input types: text, search, url, tel, email, password, number
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
 	 */
-	placeholder: String,
+	placeholder: {
+		type: String,
+		default: undefined,
+	},
 	/**
 	 * Input / Textarea required
 	 * A value is required or must be check for the form to be submittable
 	 * Available for all input types except color
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
 	 */
-	required: Boolean,
+	required: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const CheckboxRadioProps = {
@@ -415,11 +463,17 @@ export const CheckboxRadioProps = {
 	 * Input value
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
 	 */
-	value: [String, Number, Boolean],
+	value: {
+		type: [String, Number, Boolean],
+		default: undefined,
+	},
 	/**
 	 * Input value
 	 */
-	modelValue: [Object, Number, Boolean, String],
+	modelValue: {
+		type: [Object, Number, Boolean, String],
+		default: undefined,
+	},
 }
 
 export const CheckboxRadioGroupProps = {
@@ -435,7 +489,10 @@ export const CheckboxRadioGroupProps = {
 	/**
 	 * Input value
 	 */
-	modelValue: [String, Array, Boolean, Number, Symbol],
+	modelValue: {
+		type: [String, Array, Boolean, Number, Symbol],
+		default: undefined,
+	},
 	/**
 	 * Input name
 	 */
@@ -443,7 +500,10 @@ export const CheckboxRadioGroupProps = {
 	/**
 	 * If true, the group will be displayed in a vertical column
 	 */
-	vertical: Boolean,
+	vertical: {
+		type: Boolean,
+		default: false,
+	},
 }
 
 export const ActionProps = {
@@ -469,6 +529,13 @@ export const ActionProps = {
 		type: String,
 		default: undefined,
 	},
+	/**
+	 * Default tag for the action
+	 */
+	defaultTag: {
+		type: String,
+		default: ActionTag.button,
+	},
 }
 
 export const NavProps = {
@@ -477,3 +544,13 @@ export const NavProps = {
 		default: () => [],
 	},
 }
+
+export const StorageProps = {
+	storageType: {
+		type: String as PropType<`${StorageType}`>,
+		default: StorageType.local,
+		validator: (value: StorageType) =>
+			Object.values(StorageType).includes(value),
+	},
+	storageKey: String,
+}

package/src/resolvers/unplugin.ts

@@ -2,17 +2,7 @@ import type {
 	ComponentResolver,
 	SideEffectsInfo,
 } from 'unplugin-vue-components/types'
-
-function kebabCase(str: string, options?: { condense: boolean }) {
-	if (typeof str !== 'string') throw new TypeError('expected a string')
-	return str
-		.trim()
-		.replace(/([a-z])([A-Z])/g, '$1-$2')
-		.replace(/\W/g, (m) => (/[À-ž]/.test(m) ? m : '-'))
-		.replace(/^-+|-+$/g, '')
-		.replace(/-{2,}/g, (m) => (options?.condense ? '-' : m))
-		.toLowerCase()
-}
+import { kebabCase } from 'change-case'
 
 type ImportStyle = boolean | 'css' | 'scss'
 
@@ -38,11 +28,16 @@ export interface VolverResolverOptions {
 	 * @default undefined
 	 */
 	ignore?: string[]
+	/**
+	 * cherry pick components from named exports
+	 * @default undefined
+	 */
+	cherryPick?: boolean
 }
 
 const STYLE_EXCLUDE = ['vv-icon', 'vv-action']
 const VOLVER_PREFIX = 'vv'
-const DIRECTIVES = ['v-tooltip']
+const DIRECTIVES = ['v-tooltip', 'v-contextmenu']
 
 export const getStyleNames = function (kebabName: string) {
 	if (STYLE_EXCLUDE.includes(kebabName)) {
@@ -113,6 +108,7 @@ export function VolverResolver({
 	importStyle,
 	directives,
 	ignore,
+	cherryPick,
 }: VolverResolverOptions = {}): ComponentResolver[] {
 	return [
 		{
@@ -134,9 +130,16 @@ export function VolverResolver({
 				}
 
 				// import component
+				if (cherryPick) {
+					return {
+						from: `@volverjs/ui-vue/${kebabName}`,
+						sideEffects: getSideEffects(kebabName, importStyle),
+					}
+				}
 				return {
-					from: `@volverjs/ui-vue/${kebabName}`,
+					from: '@volverjs/ui-vue/components',
 					sideEffects: getSideEffects(kebabName, importStyle),
+					name,
 				}
 			},
 		},
@@ -159,9 +162,16 @@ export function VolverResolver({
 				}
 
 				// import directive
+				if (cherryPick) {
+					return {
+						from: `@volverjs/ui-vue/${kebabName}`,
+						sideEffects: getSideEffects(kebabName, importStyle),
+					}
+				}
 				return {
-					from: `@volverjs/ui-vue/${kebabName}`,
+					from: '@volverjs/ui-vue/directives',
 					sideEffects: getSideEffects(kebabName, importStyle),
+					name: `v${name}`,
 				}
 			},
 		},

package/src/stories/Accordion/Accordion.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/AccordionGroup/AccordionGroup.settings.ts

@@ -65,12 +65,12 @@ export const argTypes = {
 	},
 	modifiers: {
 		...ModifiersArgTypes.modifiers,
-		options: ['compact', 'bordered'],
+		options: ['condensed'],
 	},
 	itemModifiers: {
 		description: 'Accordion items BEM modifiers',
 		control: 'check',
-		options: ['marker-right', 'bordered'],
+		options: ['marker-right', 'bordered', 'square'],
 	},
 	...DisabledArgTypes,
 	...DefaultSlotArgTypes,

package/src/stories/AccordionGroup/AccordionGroup.test.ts

@@ -1,7 +1,7 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(
@@ -29,26 +29,32 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 
 	// open
 	if (!args.disabled && args.items && args.items.length > 0) {
-		expect(firstChild.open).toBe(args.not ? true : false)
+		expect(firstChild.open).toBe(args.not ?? false)
 		expect(firstChildSummary).toBeClicked()
 		await sleep()
-		expect(firstChild.open).toBe(args.not ? false : true)
+		expect(firstChild.open).toBe(!args.not)
 		if (firstChild.open) {
-			if (args.collapse) {
+			if (args.not) {
+				expect(JSON.stringify(JSON.parse(value.innerText))).toBe(
+					JSON.stringify(
+						[
+							...args.items.map(
+								(item: { name: string }) => item.name,
+							),
+						].splice(1),
+					),
+				)
+			} else if (args.collapse) {
 				expect(JSON.stringify(JSON.parse(value.innerText))).toBe(
 					JSON.stringify([args.items[0].name]),
 				)
 			} else {
 				expect(value.innerText).toBe(args.items[0].name)
 			}
+			expect(firstChildSummary.getAttribute('aria-expanded')).toBe('true')
+			const content = firstChild.lastChild as HTMLElement
+			expect(content.getAttribute('aria-hidden')).toBe('false')
 		}
-		expect(firstChildSummary.getAttribute('aria-expanded')).toBe(
-			args.not ? 'false' : 'true',
-		)
-		const content = firstChild.lastChild as HTMLElement
-		expect(content.getAttribute('aria-hidden')).toBe(
-			args.not ? 'true' : 'false',
-		)
 	}
 
 	// accessibility

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.ts

@@ -46,7 +46,7 @@ export const Default: Story = {
 				<vv-accordion name="a-3" title="Details 3" :content="content" />
 			</vv-accordion-group>
 			<div class="mt-24"  >
-				Opened: <span data-testId="value">{{ selected }}</span>
+				{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ selected }}</span>
 			</div>
 		`,
 	}),

package/src/stories/Alert/Alert.test.ts

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

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

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

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

@@ -6,7 +6,7 @@ import { Default as DefaultStory, type Story } from './AlertGroup.stories'
 import { useAlert } from '@/composables/alert/useAlert'
 
 const meta: Meta<typeof VvAlertGroup> = {
-	title: 'Components/AlertGroup/UseComposable',
+	title: 'Composables/useAlert',
 	component: VvAlertGroup,
 	args: defaultArgs,
 	argTypes,
@@ -15,7 +15,7 @@ const meta: Meta<typeof VvAlertGroup> = {
 
 export default meta
 
-export const UseComposable: Story = {
+export const Default: Story = {
 	...DefaultStory,
 	parameters: {
 		docs: {

package/src/stories/Avatar/Avatar.test.ts

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/AvatarGroup/AvatarGroup.test.ts

@@ -1,6 +1,6 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(

package/src/stories/Badge/Badge.test.ts

@@ -1,5 +1,5 @@
 import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 import { expect } from '@/test/expect'
 
 export const defaultTest = async ({ canvasElement, args }: PlayAttributes) => {