@volverjs/ui-vue 0.0.10-beta.7 → 0.0.10-beta.70

package/src/stories/argTypes.ts

@@ -1,562 +0,0 @@
-import normal from '../assets/icons/normal.json'
-import { Placement, Position, Side } from '../constants'
-
-export const ValidArgTypes = {
-	valid: {
-		description: 'Valid state',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	validLabel: {
-		description: 'Valid hint label',
-		control: {
-			type: 'text',
-		},
-	},
-}
-
-export const InvalidArgTypes = {
-	invalid: {
-		description: 'Invalid state',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	invalidLabel: {
-		description: 'Invalid hint label',
-		control: {
-			type: 'text',
-		},
-	},
-}
-
-export const LoadingArgTypes = {
-	loading: {
-		description: 'Loading state',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	loadingLabel: {
-		description: 'Loading label',
-		control: {
-			type: 'text',
-		},
-	},
-}
-
-export const DisabledArgTypes = {
-	disabled: {
-		control: 'boolean',
-		description: 'Whether the component is disabled',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-}
-
-export const ReadonlyArgTypes = {
-	readonly: {
-		description: 'The value is not editable',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-}
-
-export const ModifiersArgTypes = {
-	modifiers: {
-		description: 'Component BEM modifiers',
-		options: [],
-		control: {
-			type: 'check',
-		},
-	},
-}
-
-export const IconArgTypes = {
-	icon: {
-		description: 'VvIcon name or props',
-		options: ['', ...Object.keys(normal.icons)],
-		control: {
-			type: 'select',
-		},
-	},
-	iconPosition: {
-		description: 'VvIcon position',
-		options: ['', ...Object.values(Position)],
-		control: {
-			type: 'select',
-		},
-		table: {
-			defaultValue: { summary: Position.before },
-		},
-	},
-}
-
-export const OptionsArgTypes = {
-	options: {
-		description: 'List of options',
-		control: {
-			type: 'array',
-		},
-	},
-	labelKey: {
-		description: 'Key of label in option object',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'label',
-			},
-		},
-	},
-	valueKey: {
-		description: 'Key of value in option object',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'value',
-			},
-		},
-	},
-	disabledKey: {
-		description: 'Key of disabled in option object',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'disabled',
-			},
-		},
-	},
-}
-
-export const CountArgTypes = {
-	count: {
-		description: 'Show character limit',
-		options: [true, false, 'limit', 'countdown'],
-		control: {
-			type: 'radio',
-		},
-		table: {
-			category: null,
-			defaultValue: {
-				summary: false,
-			},
-			type: {
-				summary: ['boolean', 'string'],
-			},
-		},
-	},
-}
-
-export const DebounceArgTypes = {
-	debounce: {
-		description: 'Debounce milliseconds',
-		control: {
-			type: 'number',
-		},
-	},
-}
-
-export const DefaultSlotArgTypes = {
-	default: {
-		description: 'The default slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-}
-
-export const HintArgTypes = {
-	hintLabel: {
-		description: 'Hint label',
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'string',
-			},
-		},
-	},
-	hint: {
-		description: 'The hint slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-}
-
-export const TabindexArgTypes = {
-	tabindex: {
-		description: 'Global attribute tabindex',
-		control: {
-			type: 'number',
-		},
-		table: {
-			defaultValue: {
-				summary: 0,
-			},
-		},
-	},
-}
-
-export const IdNameArgTypes = {
-	id: {
-		description: 'Global attribute id.',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'uid',
-			},
-		},
-	},
-	name: {
-		description:
-			'Name of the form control. Submitted with the form as part of a name/value pair.',
-		control: {
-			type: 'text',
-		},
-	},
-}
-
-export const DropdownArgTypes = {
-	placement: {
-		description: 'Dropdown placement',
-		options: [...Object.values(Placement), ...Object.values(Side)],
-		control: {
-			type: 'select',
-		},
-		table: {
-			defaultValue: { summary: 'bottom' },
-		},
-	},
-	strategy: {
-		description: 'Dropdown strategy',
-		options: ['fixed', 'absolute'],
-		control: {
-			type: 'select',
-		},
-		table: {
-			defaultValue: { summary: 'absolute' },
-		},
-	},
-	transitionName: {
-		description: 'Dropdown show / hide transition name',
-		control: {
-			type: 'text',
-		},
-	},
-	offset: {
-		description: 'Offset of the dropdown from the trigger',
-		control: {
-			type: 'number',
-		},
-		table: {
-			defaultValue: {
-				summary: 0,
-			},
-			type: {
-				summary: ['number', 'string', 'object'],
-			},
-		},
-	},
-	shift: {
-		description:
-			'Move dropdown to the side if there is no space in the default position',
-		control: {
-			type: 'boolean',
-		},
-		table: {
-			defaultValue: {
-				summary: true,
-			},
-			type: {
-				summary: ['boolean', 'object'],
-			},
-		},
-	},
-	flip: {
-		description:
-			'Flip dropdown position if there is no space in the default position',
-		control: {
-			type: 'boolean',
-		},
-		table: {
-			defaultValue: {
-				summary: true,
-			},
-			type: {
-				summary: ['boolean', 'object'],
-			},
-		},
-	},
-	size: {
-		description:
-			'Change the size of the dropdown to not overflow the viewport',
-		control: {
-			type: 'object',
-		},
-		table: {
-			defaultValue: {
-				summary: '{ "padding": 10 }',
-			},
-			type: {
-				summary: ['boolean', 'object'],
-			},
-		},
-	},
-	autoPlacement: {
-		description: 'Automatically change the position of the dropdown',
-		control: {
-			type: 'boolean',
-		},
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-			type: {
-				summary: ['boolean', 'object'],
-			},
-		},
-	},
-	arrow: {
-		description: 'Add arrow to the dropdown',
-		control: {
-			type: 'boolean',
-		},
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-			type: {
-				summary: 'boolean',
-			},
-		},
-	},
-	keepOpen: {
-		description: 'Keep open dropdown on click outside',
-		control: {
-			type: 'boolean',
-		},
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-			type: {
-				summary: 'boolean',
-			},
-		},
-	},
-	triggerWidth: {
-		description: 'Set dropdown width to the same as the trigger',
-		control: {
-			type: 'boolean',
-		},
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-			type: {
-				summary: 'boolean',
-			},
-		},
-	},
-}
-
-export const UnselectableArgTypes = {
-	unselectable: {
-		description: 'If true the field will be unselectable',
-		table: {
-			defaultValue: {
-				summary: true,
-			},
-		},
-	},
-}
-
-export const FloatingLabelArgTypes = {
-	floating: {
-		description: 'If true the label will be floating',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-}
-
-export const AutofocusArgTypes = {
-	autofocus: {
-		description: 'Global attribute autofocus.',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-}
-
-export const AutocompleteArgTypes = {
-	autocomplete: {
-		description: 'Hint for for autofill feature.',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'off',
-			},
-		},
-	},
-}
-
-export const InputTextareaArgTypes = {
-	...IdNameArgTypes,
-	...AutofocusArgTypes,
-	...AutocompleteArgTypes,
-	...TabindexArgTypes,
-	...DisabledArgTypes,
-	...ReadonlyArgTypes,
-	...ValidArgTypes,
-	...InvalidArgTypes,
-	...HintArgTypes,
-	...LoadingArgTypes,
-	...ModifiersArgTypes,
-	...CountArgTypes,
-	...DebounceArgTypes,
-	...IconArgTypes,
-	...FloatingLabelArgTypes,
-	minlength: {
-		description:
-			'Minimum length (number of characters) of value. Available for input types: text, search, url, tel, email, password.',
-		control: {
-			type: 'number',
-		},
-	},
-	maxlength: {
-		description:
-			'Maximum length (number of characters) of value. Available for input types: text, search, url, tel, email, password, number.',
-		control: {
-			type: 'number',
-		},
-	},
-	placeholder: {
-		description:
-			'Text that appears in the form control when it has no value set. Available for input types: text, search, url, tel, email, password, number.',
-		control: {
-			type: 'text',
-		},
-	},
-	required: {
-		description:
-			'A value is required or must be check for the form to be submittable. Available for all input types except color.',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	label: {
-		description: 'Input label',
-		control: {
-			type: 'text',
-		},
-	},
-}
-
-export const CheckboxRadioArgTypes = {
-	...IdNameArgTypes,
-	...TabindexArgTypes,
-	...ValidArgTypes,
-	...InvalidArgTypes,
-	...HintArgTypes,
-	...DisabledArgTypes,
-	...ReadonlyArgTypes,
-	label: {
-		description: 'Input label',
-		control: {
-			type: 'text',
-		},
-	},
-	value: {
-		description: 'Input value',
-		control: {
-			type: 'text',
-		},
-	},
-}
-
-export const CheckboxRadioGroupArgTypes = {
-	...ValidArgTypes,
-	...InvalidArgTypes,
-	...OptionsArgTypes,
-	...HintArgTypes,
-	...DisabledArgTypes,
-	...ReadonlyArgTypes,
-	label: {
-		description: 'Input label',
-		control: {
-			type: 'text',
-		},
-	},
-	name: {
-		description:
-			'Name of the form control. Submitted with the form as part of a name/value pair.',
-		control: {
-			type: 'text',
-		},
-	},
-	vertical: {
-		description:
-			'If true the options will be displayed vertically instead of horizontally',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	default: {
-		description: 'Default slot for the options',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-}

package/src/test/expect.ts

@@ -1,88 +0,0 @@
-import { expect } from '@storybook/jest'
-import { userEvent } from '@storybook/testing-library'
-import { axe } from 'jest-axe'
-import { sleep } from '@/test/sleep'
-
-declare global {
-	// eslint-disable-next-line @typescript-eslint/no-namespace
-	namespace jest {
-		// eslint-disable-next-line
-		interface Matchers<R> {
-			toBeChecked: (expected?: HTMLElement) => CustomMatcherResult
-		}
-		// eslint-disable-next-line
-		interface Matchers<R> {
-			toBeClicked: (expected?: HTMLElement) => CustomMatcherResult
-		}
-		// eslint-disable-next-line
-		interface Matchers<R> {
-			toHaveClass: (
-				className: string | string[],
-				expected?: HTMLElement,
-			) => CustomMatcherResult
-		}
-		// eslint-disable-next-line
-		interface Matchers<R> {
-			toHaveImgChild: (
-				imgTag: string,
-				expected?: HTMLElement,
-			) => CustomMatcherResult
-		}
-	}
-}
-
-expect.extend({
-	async toBeChecked(checkbox: HTMLInputElement) {
-		await checkbox.click()
-		await sleep()
-		if (checkbox.checked) {
-			return {
-				pass: true,
-				message: () => `Checkbox is checked`,
-			}
-		}
-		return {
-			pass: false,
-			message: () => `Checkbox is not checked`,
-		}
-	},
-	async toBeClicked(element: HTMLElement) {
-		const result = {
-			pass: false,
-			message: () => "Click event don't works",
-		}
-		element.addEventListener('click', () => {
-			result.pass = true
-			result.message = () => `Click event works`
-		})
-		await userEvent.click(element)
-		return result
-	},
-	async toHaveNoViolations(element: HTMLElement) {
-		const results = await axe(element)
-		return {
-			pass: results.violations.length === 0,
-			message: () => 'Element has violations',
-		}
-	},
-	async toHaveClass(element: HTMLElement, className: string | string[]) {
-		const classes = !Array.isArray(className) ? [className] : className
-		return {
-			pass: classes.every((cssClass) =>
-				element.classList.contains(cssClass),
-			),
-			message: () =>
-				`One of these classes doesn't exist: ${classes.join(', ')}`,
-		}
-	},
-	async toHaveImgChild(element: HTMLElement, imgTag: string) {
-		const img = element.getElementsByTagName(imgTag)
-		return {
-			pass: img.length === 1,
-			message: () =>
-				`${imgTag} not exist!`,
-		}
-	},
-})
-
-export { expect }

package/src/test/options.ts

@@ -1,17 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const getOptionValue = (args: any, index: number) => {
-	if (args.options && args.options.length > index) {
-		let value = args.options[index]
-		if (args.valueKey) {
-			if (typeof args.valueKey === 'function') {
-				value = args.valueKey(value)
-			} else if (typeof value === 'object') {
-				value = value[args.valueKey]
-			}
-		} else if (typeof value === 'object') {
-			value = value.value
-		}
-		return value
-	}
-	return undefined
-}

package/src/test/sleep.ts

@@ -1,2 +0,0 @@
-export const sleep = async (ms = 300) =>
-	await new Promise((resolve) => setTimeout(resolve, ms))

package/src/test/types.d.ts

@@ -1,17 +0,0 @@
-export interface PlayAttributes {
-	canvasElement: HTMLElement
-	// eslint-disable-next-line
-	args: Record<string, any>
-	name?: string
-}
-
-interface ComponentConfig {
-	isClickDisabled?: boolean
-	className?: string | string[] | null
-	slotContent?: string | null
-	customText?: string | null
-	customElement?: HTMLElement | HTMLOrSVGElement | null
-	isVertical?: boolean
-	child?: number
-	propName?: string
-}

package/src/types/alert.ts

@@ -1,20 +0,0 @@
-export type AlertModifiers =
-	| 'success'
-	| 'info'
-	| 'warning'
-	| 'danger'
-	| 'brand'
-	| 'accent'
-
-export type Alert = {
-	id: string | number
-	group: string
-	title?: string
-	icon: string | Record<string, unknown>
-	content?: string
-	footer?: string
-	modifiers: AlertModifiers
-	dismissable: boolean
-	autoClose: number
-	timestamp: number
-}

package/src/types/floating-ui.ts

@@ -1,7 +0,0 @@
-import type { flip, autoPlacement, shift, offset, size } from '@floating-ui/vue'
-
-export type AutoPlacementOptions = Parameters<typeof autoPlacement>[0]
-export type FlipOptions = Parameters<typeof flip>[0]
-export type ShiftOptions = Parameters<typeof shift>[0]
-export type OffsetOptions = Parameters<typeof offset>[0]
-export type SizeOptions = Parameters<typeof size>[0]

package/src/types/generic.ts

@@ -1,5 +0,0 @@
-export type Nullable<T> = T | null | undefined
-
-export type Option = Record<string | number | symbol, unknown> & {
-	options?: Option[]
-}