@volverjs/ui-vue 0.0.4 → 0.0.5-beta.2

package/src/composables/useDefaults.ts

@@ -0,0 +1,89 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+
+type VueProp =
+	| StringConstructor
+	| NumberConstructor
+	| ObjectConstructor
+	| FunctionConstructor
+	| SymbolConstructor
+	| ArrayConstructor
+	| BooleanConstructor
+	| PropType<unknown>
+
+export function useDefaults<Definition>(
+	componentName: string,
+	propsDefinition: Definition,
+	props: Readonly<ExtractPropTypes<Definition>>,
+) {
+	const volver = useVolver()
+
+	const volverComponentDefaults = computed(() => {
+		if (!volver || !volver.defaults.value?.[componentName]) {
+			return undefined
+		}
+		return volver.defaults.value[componentName]
+	})
+
+	return computed(() => {
+		if (volverComponentDefaults.value === undefined) {
+			return props
+		}
+		const componentDefaults = volverComponentDefaults.value
+		const simplifiedPropsDefinition = propsDefinition as {
+			[key: string]:
+				| VueProp
+				| VueProp[]
+				| { type: VueProp | VueProp[]; default?: unknown }
+		}
+		const simplifiedProps = props as Record<string, unknown>
+		return Object.keys(simplifiedPropsDefinition).reduce((acc, key) => {
+			const propValue = simplifiedProps[key]
+			acc[key] = propValue
+			if (key in componentDefaults) {
+				// array of types
+				if (Array.isArray(simplifiedPropsDefinition[key])) {
+					const typeArray = simplifiedPropsDefinition[
+						key
+					] as VueProp[]
+					if (typeArray.length) {
+						const typeFunction = typeArray[0] as <T>() => T
+						if (typeFunction === propValue) {
+							acc[key] = componentDefaults[key]
+						}
+					}
+				}
+				// single type
+				if (typeof simplifiedPropsDefinition[key] === 'function') {
+					const typeFunction = simplifiedPropsDefinition[key] as <
+						T,
+					>() => T
+					if (typeFunction() === propValue) {
+						acc[key] = componentDefaults[key]
+					}
+				}
+				// object with type and default
+				if (typeof simplifiedPropsDefinition[key] === 'object') {
+					let defaultValue = (
+						simplifiedPropsDefinition[key] as { default: unknown }
+					).default
+					if (typeof defaultValue === 'function') {
+						defaultValue = defaultValue()
+					}
+					if (typeof defaultValue === 'object') {
+						if (
+							JSON.stringify(defaultValue) ===
+							JSON.stringify(propValue)
+						) {
+							acc[key] = componentDefaults[key]
+						}
+					} else if (defaultValue === propValue) {
+						acc[key] = componentDefaults[key]
+					}
+				}
+			}
+			return acc
+		}, {} as Record<string, unknown>) as Readonly<
+			ExtractPropTypes<Definition>
+		>
+	})
+}

package/src/composables/useModifiers.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 
-export function useBemModifiers(
+export function useModifiers(
 	prefix: string,
 	modifiers?: Ref<string | string[] | unknown | unknown[] | undefined>,
 	others?: Ref<Record<string, boolean>>,
@@ -17,7 +17,9 @@ export function useBemModifiers(
 		if (modifiersArray) {
 			if (Array.isArray(modifiersArray)) {
 				modifiersArray.forEach((modifier) => {
-					toReturn[`${prefix}--${modifier}`] = true
+					if (modifier) {
+						toReturn[`${prefix}--${modifier}`] = true
+					}
 				})
 			}
 		}

package/src/composables/useOptions.ts

@@ -1,4 +1,4 @@
-import type { Option } from '@/types/generic'
+import type { Option } from '../types/generic'
 
 // eslint-disable-next-line
 export function useOptions(props: any) {

package/src/composables/useVolver.ts

@@ -1,5 +1,5 @@
-import { INJECTION_KEY_VOLVER } from '@/constants'
-import type { VolverInterface } from '@/Volver'
+import { INJECTION_KEY_VOLVER } from '../constants'
+import type { VolverInterface } from '../Volver'
 
 export function useVolver() {
 	return inject<VolverInterface>(INJECTION_KEY_VOLVER)

package/src/directives/index.ts

@@ -1,5 +1,7 @@
-import tooltip from '@/directives/v-tooltip'
+import tooltip from '../directives/v-tooltip'
+import contextmenu from '../directives/v-contextmenu'
 
 export default {
 	tooltip,
+	contextmenu,
 }

package/src/directives/v-contextmenu.ts

@@ -0,0 +1,40 @@
+import type { Directive, DirectiveBinding } from 'vue'
+
+const contextmenu: Directive = {
+	beforeUpdate(el: HTMLElement, binding: DirectiveBinding) {
+		const clientX = ref(0)
+		const clientY = ref(0)
+		const virtualEl = {
+			getBoundingClientRect() {
+				return {
+					width: 0,
+					height: 0,
+					x: clientX.value,
+					y: clientY.value,
+					top: clientY.value,
+					left: clientX.value,
+					right: clientX.value,
+					bottom: clientY.value,
+				}
+			},
+		}
+		if (binding.value?.init) {
+			binding.value.init?.(virtualEl)
+		}
+		el.addEventListener(
+			'contextmenu',
+			function (ev) {
+				if (binding.value?.show) {
+					ev.preventDefault()
+					clientX.value = ev.clientX
+					clientY.value = ev.clientY
+					binding.value.show?.()
+					return false
+				}
+			},
+			false,
+		)
+	},
+}
+
+export default contextmenu

package/src/directives/v-tooltip.ts

@@ -1,6 +1,6 @@
 import { render, type Directive, type DirectiveBinding } from 'vue'
-import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
-import type { Side } from '@/constants'
+import VvTooltip from '../components/VvTooltip/VvTooltip.vue'
+import type { Side } from '../constants'
 
 const tooltip: Directive = {
 	beforeMount(el: HTMLElement, binding: DirectiveBinding) {

package/src/icons.ts

@@ -4,4 +4,4 @@ import simple from './assets/icons/simple.json'
 
 export default [normal, detailed, simple]
 
-export { normal }
+export { normal, detailed, simple }

package/src/index.ts

@@ -1,8 +1,6 @@
 import VolverPlugin from './Volver'
 import type { Volver } from './Volver'
 
-// export all components as vue plugin
-export * from './components/index'
 export { VolverPlugin }
 
 // https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties

package/src/props/index.ts

@@ -1,19 +1,19 @@
 import type { PropType } from 'vue'
-import type { Option } from '@/types/generic'
+import type { Option } from '../types/generic'
 import type {
 	AutoPlacementOptions,
 	FlipOptions,
 	OffsetOptions,
 	ShiftOptions,
 	SizeOptions,
-} from '@/types/floating-ui'
+} from '../types/floating-ui'
 import {
 	Placement,
 	Position,
 	Side,
 	AnchorTarget,
 	ButtonType,
-} from '@/constants'
+} from '../constants'
 
 export const LinkProps = {
 	/**
@@ -31,7 +31,7 @@ export const LinkProps = {
 	 * Anchor target
 	 */
 	target: {
-		type: String as PropType<AnchorTarget>,
+		type: String as PropType<`${AnchorTarget}`>,
 		validator: (value: AnchorTarget) =>
 			Object.values(AnchorTarget).includes(value),
 	},
@@ -184,7 +184,7 @@ export const IconProps = {
 	 * VvIcon position
 	 */
 	iconPosition: {
-		type: String as PropType<Position>,
+		type: String as PropType<`${Position}`>,
 		default: Position.before,
 		validation: (value: Position) =>
 			Object.values(Position).includes(value),
@@ -226,7 +226,7 @@ export const DropdownProps = {
 	 * Dropdown placement
 	 */
 	placement: {
-		type: String as PropType<Side | Placement>,
+		type: String as PropType<`${Side}` | `${Placement}`>,
 		default: Side.bottom,
 		validator: (value: Side & Placement) => {
 			return (
@@ -235,6 +235,16 @@ export const DropdownProps = {
 			)
 		},
 	},
+	/**
+	 * Dropdown strategy
+	 */
+	strategy: {
+		type: String as PropType<'fixed' | 'absolute'>,
+		default: 'absolute',
+		validator: (value: 'fixed' | 'absolute') => {
+			return ['fixed', 'absolute'].includes(value)
+		},
+	},
 	/**
 	 * Dropdown show / hide transition name
 	 */
@@ -362,14 +372,14 @@ 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: Number,
+	minlength: [String, Number],
 	/**
 	 * 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: Number,
+	maxlength: [String, Number],
 	/**
 	 * Input / Textarea placeholder
 	 * Text that appears in the form control when it has no value set
@@ -419,7 +429,7 @@ export const CheckboxRadioGroupProps = {
 	/**
 	 * Input value
 	 */
-	modelValue: [String, Array],
+	modelValue: [String, Array, Boolean, Number, Symbol],
 	/**
 	 * Input name
 	 */
@@ -440,7 +450,7 @@ export const ActionProps = {
 	 * Button type
 	 */
 	type: {
-		type: String,
+		type: String as PropType<`${ButtonType}`>,
 		default: ButtonType.button,
 		validator: (value: ButtonType) =>
 			Object.values(ButtonType).includes(value),

package/src/resolvers/unplugin.ts

@@ -33,13 +33,18 @@ export interface VolverResolverOptions {
 	 * @default 'vv'
 	 */
 	prefix?: string
+	/**
+	 * ignore components (kebab-case)
+	 * @default undefined
+	 */
+	ignore?: string[]
 }
 
 const STYLE_EXCLUDE = ['vv-icon', 'vv-action']
 const VOLVER_PREFIX = 'vv'
 const DIRECTIVES = ['v-tooltip']
 
-const getStyleNames = function (kebabName: string) {
+export const getStyleNames = function (kebabName: string) {
 	if (STYLE_EXCLUDE.includes(kebabName)) {
 		return undefined
 	}
@@ -100,6 +105,7 @@ export function VolverResolver({
 	prefix = VOLVER_PREFIX,
 	importStyle,
 	directives,
+	ignore,
 }: VolverResolverOptions = {}): ComponentResolver[] {
 	return [
 		{
@@ -116,6 +122,10 @@ export function VolverResolver({
 					`${VOLVER_PREFIX}-`,
 				)
 
+				if (ignore && ignore.includes(kebabName)) {
+					return
+				}
+
 				// import component
 				return {
 					from: `@volverjs/ui-vue/${kebabName}`,
@@ -137,6 +147,10 @@ export function VolverResolver({
 					return
 				}
 
+				if (ignore && ignore.includes(kebabName)) {
+					return
+				}
+
 				// import directive
 				return {
 					from: `@volverjs/ui-vue/${kebabName}`,

package/src/stories/Accordion/Accordion.stories.mdx

@@ -24,10 +24,10 @@ export const Template = (args, { argTypes }) => ({
 	template: /*html*/ `
 		<vv-accordion data-testId="element" v-bind="args" v-model="open">
 			<template #summary v-if="args.summary"><div v-html="args.summary"></div></template>
-			<template #details v-if="args.details"><div v-html="args.details"></div></template>
+			<template #default v-if="args.default"><div v-html="args.default"></div></template>
 		</vv-accordion>
 		<div class="mt-24">
-			Open: <span data-testId="value">{{ open }}</span>
+			{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ open }}</span>
 		</div>
 	`,
 })
@@ -37,3 +37,9 @@ export const Template = (args, { argTypes }) => ({
 		{Template.bind()}
 	</Story>
 </Canvas>
+
+<Canvas>
+	<Story name="Not" play={defaultTest} args={{ not: true }}>
+		{Template.bind()}
+	</Story>
+</Canvas>

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

@@ -9,7 +9,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	)) as HTMLDetailsElement
 	const summary = element.getElementsByTagName('summary')[0]
 	const content = element.getElementsByClassName(
-		'vv-collapse__content',
+		'vv-accordion__content',
 	)[0] as HTMLElement
 
 	const modifiers =
@@ -30,30 +30,36 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	if (args.summary) {
 		const div = document.createElement('div')
 		div.innerHTML = args.summary
-		expect(summary).toHaveClass('vv-collapse__summary')
+		expect(summary).toHaveClass('vv-accordion__summary')
 		expect(summary.innerText).toEqual(div.innerText)
 	} else if (args.title) {
-		expect(summary).toHaveClass('vv-collapse__summary')
+		expect(summary).toHaveClass('vv-accordion__summary')
 		expect(summary.innerText).toEqual(args.title)
 	}
 
 	// open
 	if (!args.disabled) {
-		expect(element.open).toBe(false)
-		expect(element).toBeClicked()
+		expect(element.open).toBe(args.not ? true : false)
+		expect(summary).toBeClicked()
 		await sleep()
-		expect(element.open).toBeTruthy()
-		expect(summary.getAttribute('aria-expanded')).toBe('true')
-		expect(content.getAttribute('aria-hidden')).toBe('false')
+		expect(element.open).toBe(args.not ? false : true)
+		expect(summary.getAttribute('aria-expanded')).toBe(
+			args.not ? 'false' : 'true',
+		)
+		expect(content.getAttribute('aria-hidden')).toBe(
+			args.not ? 'true' : 'false',
+		)
 	}
 
-	// details slot / content
-	if (args.details) {
-		const div = document.createElement('div')
-		div.innerHTML = args.details
-		expect(content.innerText).toEqual(div.innerText)
-	} else if (args.content) {
-		expect(content.innerText).toEqual(args.content)
+	// default slot / content
+	if (element.open) {
+		if (args.default) {
+			const div = document.createElement('div')
+			div.innerHTML = args.default
+			expect(content.innerText).toEqual(div.innerText)
+		} else if (args.content) {
+			expect(content.innerText).toEqual(args.content)
+		}
 	}
 
 	// accessibility

package/src/stories/Accordion/AccordionSlots.stories.mdx

@@ -11,18 +11,18 @@ import { defaultArgs, argTypes } from './Accordion.settings'
 
 <Canvas>
 	<Story
-		name="Summary"
+		name="Default"
 		play={defaultTest}
 		args={{
-			summary: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Summary</strong>`,
+			default: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Details</strong>`,
 		}}
 		argTypes={{
-			title: {
+			content: {
 				control: {
 					disable: true,
 				},
 			},
-			details: {
+			summary: {
 				control: {
 					disable: true,
 				},
@@ -35,18 +35,18 @@ import { defaultArgs, argTypes } from './Accordion.settings'
 
 <Canvas>
 	<Story
-		name="Details"
+		name="Summary"
 		play={defaultTest}
 		args={{
-			details: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Details</strong>`,
+			summary: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Summary</strong>`,
 		}}
 		argTypes={{
-			content: {
+			title: {
 				control: {
 					disable: true,
 				},
 			},
-			summary: {
+			details: {
 				control: {
 					disable: true,
 				},

package/src/stories/AccordionGroup/AccordionGroup.stories.mdx

@@ -24,7 +24,7 @@ export const Template = (args, { argTypes }) => ({
 	template: /*html*/ `
 		<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
 		<div class="mt-24">
-			Selected: <span data-testId="value">{{ selected }}</span>
+			{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ selected }}</span>
 		</div>
 	`,
 })
@@ -35,8 +35,24 @@ export const Template = (args, { argTypes }) => ({
 	</Story>
 </Canvas>
 
+<Canvas>
+	<Story name="Not" play={defaultTest} args={{ not: true }}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
 <Canvas>
 	<Story name="Collapse" play={defaultTest} args={{ collapse: true }}>
 		{Template.bind()}
 	</Story>
 </Canvas>
+
+<Canvas>
+	<Story
+		name="Collapse Not"
+		play={defaultTest}
+		args={{ collapse: true, not: true }}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

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

@@ -8,6 +8,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 		'element',
 	)) as HTMLElement
 	const firstChild = element.children[0] as HTMLDetailsElement
+	const firstChildSummary = firstChild.getElementsByTagName('summary')[0]
 	const value = (await within(canvasElement).findByTestId(
 		'value',
 	)) as HTMLElement
@@ -28,21 +29,26 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 
 	// open
 	if (!args.disabled && args.items && args.items.length > 0) {
-		expect(firstChild.open).toBe(false)
-		expect(firstChild).toBeClicked()
+		expect(firstChild.open).toBe(args.not ? true : false)
+		expect(firstChildSummary).toBeClicked()
 		await sleep()
-		expect(firstChild.open).toBeTruthy()
-		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(firstChild.open).toBe(args.not ? false : true)
+		if (firstChild.open) {
+			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)
+			}
 		}
-		const summary = firstChild.firstChild as HTMLElement
+		expect(firstChildSummary.getAttribute('aria-expanded')).toBe(
+			args.not ? 'false' : 'true',
+		)
 		const content = firstChild.lastChild as HTMLElement
-		expect(summary.getAttribute('aria-expanded')).toBe('true')
-		expect(content.getAttribute('aria-hidden')).toBe('false')
+		expect(content.getAttribute('aria-hidden')).toBe(
+			args.not ? 'true' : 'false',
+		)
 	}
 
 	// accessibility

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.mdx

@@ -50,7 +50,7 @@ import { defaultArgs, argTypes } from './AccordionGroup.settings'
 						<vv-accordion name="a-3" title="Details 3" :content="content" />
 					</vv-accordion-group>
 					<div class="mt-24"  >
-						Selected: <span data-testId="value">{{ selected }}</span>
+						Opened: <span data-testId="value">{{ selected }}</span>
 					</div>
 				`,
 			}

package/src/stories/Dropdown/DropdownContextmenuDirective.stories.mdx

@@ -0,0 +1,41 @@
+import { ref } from 'vue'
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import { defaultArgs, argTypes } from './Dropdown.settings'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import VvDropdownAction from '@/components/VvDropdown/VvDropdownAction.vue'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+
+<Meta title="Directives/Contextmenu" args={defaultArgs} argTypes={argTypes} />
+
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvDropdown, VvDropdownAction, VvIcon },
+	setup() {
+		const dropdownEl = ref(null)
+		return { args, dropdownEl }
+	},
+	template: /* html */ `
+		<div v-contextmenu="dropdownEl" class="w-full h-320 bg-surface-1 flex items-center justify-center">
+			<div class="text-word-2 text-18 uppercase w-150 text-center">Right click context menu</div>
+		</div>
+		<vv-dropdown v-bind="args" ref="dropdownEl">
+			<template #items>
+				<vv-dropdown-action>
+					<vv-icon name="add" /> Create
+				</vv-dropdown-action>
+				<vv-dropdown-action>
+					<vv-icon name="edit" /> Update
+				</vv-dropdown-action>
+				<vv-dropdown-action>
+					<vv-icon name="trash" /> Delete
+				</vv-dropdown-action>
+			</template>
+		</vv-dropdown>
+	`,
+})
+
+<Canvas>
+	<Story name="Default" args={{ placement: 'bottom-start' }}>
+		{Template.bind()}
+	</Story>
+</Canvas>

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

@@ -196,6 +196,59 @@ export const argTypes = {
 			},
 		},
 	},
+	mask: {
+		description: 'Input mask, only for text type',
+		type: {
+			summary: 'string',
+		},
+		control: {
+			type: 'text',
+		},
+	},
+	maskEager: {
+		description: 'Show mask before typing',
+		type: {
+			summary: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	maskReversed: {
+		description: 'Write typing reverse (ex. for numbers)',
+		type: {
+			summary: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	maskTokens: {
+		description: 'Add mask custom tokens',
+		type: {
+			summary: 'Object',
+		},
+		table: {
+			defaultValue: {
+				summary: 'undefined',
+			},
+		},
+	},
+	maskTokensReplace: {
+		description: 'Replace default tokens',
+		type: {
+			summary: 'boolean',
+		},
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
 	before: {
 		control: {
 			type: 'text',