@volverjs/ui-vue 0.0.10-beta.9 → 0.0.10

package/src/props/index.ts

@@ -1,487 +0,0 @@
-import type { PropType } from 'vue'
-import type { Option } from '@/types/generic'
-import type { NavItem } from '@/types/nav'
-import type {
-	AutoPlacementOptions,
-	FlipOptions,
-	OffsetOptions,
-	ShiftOptions,
-	SizeOptions,
-} from '@/types/floating-ui'
-import {
-	Placement,
-	Strategy,
-	Position,
-	Side,
-	AnchorTarget,
-	ButtonType,
-	ActionTag,
-} from '@/constants'
-
-export const LinkProps = {
-	/**
-	 * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
-	 * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
-	 */
-	to: {
-		type: [String, Object],
-	},
-	/**
-	 * Anchor href
-	 */
-	href: String,
-	/**
-	 * Anchor target
-	 */
-	target: {
-		type: String as PropType<`${AnchorTarget}`>,
-		validator: (value: AnchorTarget) =>
-			Object.values(AnchorTarget).includes(value),
-	},
-	/**
-	 * Anchor rel
-	 */
-	rel: {
-		type: String,
-		default: 'noopener noreferrer',
-	},
-}
-
-export const ValidProps = {
-	/**
-	 * Valid status
-	 */
-	valid: Boolean,
-	/**
-	 * Valid label
-	 */
-	validLabel: [String, Array],
-}
-
-export const InvalidProps = {
-	/**
-	 * Invalid status
-	 */
-	invalid: Boolean,
-	/**
-	 * Invalid label
-	 */
-	invalidLabel: [String, Array],
-}
-
-export const LoadingProps = {
-	/**
-	 * Loading status
-	 */
-	loading: Boolean,
-	/**
-	 * Loading label
-	 */
-	loadingLabel: {
-		type: String,
-		default: 'Loading...',
-	},
-}
-
-export const DisabledProps = {
-	/**
-	 * Whether the form control is disabled
-	 */
-	disabled: Boolean,
-}
-
-export const SelectedProps = {
-	/**
-	 * Whether the item is selected
-	 */
-	selected: Boolean,
-}
-
-export const ActiveProps = {
-	/**
-	 * Whether the item is active
-	 */
-	active: Boolean,
-}
-
-export const CurrentProps = {
-	/**
-	 * Whether the item is current
-	 */
-	current: Boolean,
-}
-
-export const PressedProps = {
-	/**
-	 * Whether the item is pressed
-	 */
-	pressed: Boolean,
-}
-
-export const LabelProps = {
-	/**
-	 * The item label
-	 */
-	label: [String, Number],
-}
-
-export const ReadonlyProps = {
-	/**
-	 * The value is not editable
-	 */
-	readonly: Boolean,
-}
-
-export const ModifiersProps = {
-	/**
-	 * Component BEM modifiers
-	 */
-	modifiers: [String, Array] as PropType<string | string[]>,
-}
-
-export const HintProps = {
-	hintLabel: { type: String, default: '' },
-}
-
-export const OptionsProps = {
-	/**
-	 * List of options, can be string[] or object[]
-	 */
-	options: {
-		type: Array as PropType<(Option | string)[]>,
-		default: () => [],
-	},
-	/**
-	 * Used when options are objects: key to use for option label
-	 */
-	labelKey: { type: [String, Function], default: 'label' },
-	/**
-	 * Used when options are objects: key to use for option label
-	 */
-	valueKey: { type: [String, Function], default: 'value' },
-	/**
-	 * Used when options are objects: key to use for option disabled
-	 */
-	disabledKey: { type: [String, Function], default: 'disabled' },
-}
-
-export const CountProps = {
-	/**
-	 * Show character limit
-	 */
-	count: {
-		type: [Boolean, String],
-		default: false,
-		validator: (value: string) =>
-			[true, false, 'limit', 'countdown'].includes(value),
-	},
-}
-
-export const DebounceProps = {
-	/**
-	 * Milliseconds to wait before emitting the input event
-	 */
-	debounce: [Number, String],
-}
-
-export const IconProps = {
-	/**
-	 * VvIcon name or props
-	 * @see VVIcon
-	 */
-	icon: { type: [String, Object] },
-	/**
-	 * VvIcon position
-	 */
-	iconPosition: {
-		type: String as PropType<`${Position}`>,
-		default: Position.before,
-		validation: (value: Position) =>
-			Object.values(Position).includes(value),
-	},
-}
-
-export const TabindexProps = {
-	/**
-	 * Global attribute tabindex
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
-	 */
-	tabindex: { type: [String, Number], default: 0 },
-}
-
-export const FloatingLabelProps = {
-	/**
-	 * If true the label will be floating
-	 */
-	floating: Boolean,
-}
-
-export const UnselectableProps = {
-	/**
-	 * If true the input will be unselectable
-	 */
-	unselectable: { type: Boolean, default: true },
-}
-
-export const IdProps = {
-	/**
-	 * Global attribute id
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
-	 */
-	id: [String, Number],
-}
-
-export const DropdownProps = {
-	/**
-	 * Dropdown placement
-	 */
-	placement: {
-		type: String as PropType<`${Side}` | `${Placement}`>,
-		default: Side.bottom,
-		validator: (value: Side & Placement) =>
-			Object.values(Side).includes(value) ||
-			Object.values(Placement).includes(value),
-	},
-	/**
-	 * Dropdown strategy
-	 */
-	strategy: {
-		type: String as PropType<`${Strategy}`>,
-		default: undefined,
-		validator: (value: Strategy) => Object.values(Strategy).includes(value),
-	},
-	/**
-	 * Dropdown show / hide transition name
-	 */
-	transitionName: {
-		type: String,
-	},
-	/**
-	 * Offset of the dropdown from the trigger
-	 * @see https://floating-ui.com/docs/offset
-	 */
-	offset: {
-		type: [Number, String, Object] as PropType<
-			OffsetOptions | number | string
-		>,
-		default: 0,
-	},
-	/**
-	 * Move dropdown to the side if there is no space in the default position
-	 * @see https://floating-ui.com/docs/shift
-	 */
-	shift: {
-		type: [Boolean, Object] as PropType<ShiftOptions | boolean>,
-		default: false,
-	},
-	/**
-	 * Flip dropdown position if there is no space in the default position
-	 * @see https://floating-ui.com/docs/flip
-	 */
-	flip: {
-		type: [Boolean, Object] as PropType<FlipOptions | boolean>,
-		default: true,
-	},
-	/**
-	 * Size of the dropdown
-	 * @see https://floating-ui.com/docs/size
-	 */
-	size: {
-		type: [Boolean, Object] as PropType<SizeOptions | boolean>,
-		default: () => ({ padding: 10 }),
-	},
-	/**
-	 * Automatically change the position of the dropdown
-	 * @see https://floating-ui.com/docs/autoPlacement
-	 */
-	autoPlacement: {
-		type: [Boolean, Object] as PropType<AutoPlacementOptions | boolean>,
-		default: false,
-	},
-	/**
-	 * Add arrow to the dropdown
-	 * @see https://floating-ui.com/docs/arrow
-	 */
-	arrow: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * Keep open dropdown on click outside
-	 */
-	keepOpen: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * Autofocus first item on dropdown open
-	 */
-	autofocusFirst: {
-		type: Boolean,
-		default: true,
-	},
-	/**
-	 * Set dropdown width to the same as the trigger
-	 */
-	triggerWidth: {
-		type: Boolean,
-	},
-}
-
-export const IdNameProps = {
-	...IdProps,
-	/**
-	 * Input / Textarea name
-	 * Name of the form control. Submitted with the form as part of a name/value pair
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
-	 */
-	name: { type: String, required: true },
-}
-
-export const AutofocusProps = {
-	/**
-	 * Global attribute autofocus
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
-	 */
-	autofocus: Boolean,
-}
-
-export const AutocompleteProps = {
-	/**
-	 * Global attribute autocomplete
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
-	 */
-	autocomplete: { type: String, default: 'off' },
-}
-
-export const InputTextareaProps = {
-	...IdNameProps,
-	...AutofocusProps,
-	...AutocompleteProps,
-	...TabindexProps,
-	...DisabledProps,
-	...ReadonlyProps,
-	...ValidProps,
-	...InvalidProps,
-	...HintProps,
-	...LoadingProps,
-	...ModifiersProps,
-	...CountProps,
-	...DebounceProps,
-	...IconProps,
-	...FloatingLabelProps,
-	...LabelProps,
-	/**
-	 * Input / Textarea minlength
-	 * Minimum 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#minlength
-	 */
-	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: [String, Number],
-	/**
-	 * 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,
-	/**
-	 * 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,
-}
-
-export const CheckboxRadioProps = {
-	...IdNameProps,
-	...TabindexProps,
-	...ValidProps,
-	...InvalidProps,
-	...HintProps,
-	...DisabledProps,
-	...ReadonlyProps,
-	...ModifiersProps,
-	...LabelProps,
-	...LoadingProps,
-	/**
-	 * Input value
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
-	 */
-	value: [String, Number, Boolean],
-	/**
-	 * Input value
-	 */
-	modelValue: [Object, Number, Boolean, String],
-}
-
-export const CheckboxRadioGroupProps = {
-	...ValidProps,
-	...InvalidProps,
-	...OptionsProps,
-	...HintProps,
-	...DisabledProps,
-	...ReadonlyProps,
-	...ModifiersProps,
-	...LabelProps,
-	...LoadingProps,
-	/**
-	 * Input value
-	 */
-	modelValue: [String, Array, Boolean, Number, Symbol],
-	/**
-	 * Input name
-	 */
-	name: { type: String, required: true },
-	/**
-	 * If true, the group will be displayed in a vertical column
-	 */
-	vertical: Boolean,
-}
-
-export const ActionProps = {
-	...DisabledProps,
-	...LabelProps,
-	...PressedProps,
-	...ActiveProps,
-	...CurrentProps,
-	...LinkProps,
-	/**
-	 * Button type
-	 */
-	type: {
-		type: String as PropType<`${ButtonType}`>,
-		default: ButtonType.button,
-		validator: (value: ButtonType) =>
-			Object.values(ButtonType).includes(value),
-	},
-	/**
-	 * Button aria-label
-	 */
-	ariaLabel: {
-		type: String,
-		default: undefined,
-	},
-	/**
-	 * Default tag for the action
-	 */
-	defaultTag: {
-		type: String,
-		default: ActionTag.button,
-	},
-}
-
-export const NavProps = {
-	items: {
-		type: Array as PropType<NavItem[]>,
-		default: () => [],
-	},
-}

package/src/resolvers/unplugin.ts

@@ -1,169 +0,0 @@
-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()
-}
-
-type ImportStyle = boolean | 'css' | 'scss'
-
-export interface VolverResolverOptions {
-	/**
-	 * import style along with components
-	 * @default undefined
-	 */
-	importStyle?: ImportStyle
-	/**
-	 * enable/disable directives
-	 * @default undefined
-	 */
-	directives?: boolean
-	/**
-	 * prefix for components (e.g. 'vv' to resolve Button from VvButton)
-	 *
-	 * @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']
-
-export const getStyleNames = function (kebabName: string) {
-	if (STYLE_EXCLUDE.includes(kebabName)) {
-		return undefined
-	}
-	if (kebabName === 'vv-dropdown') {
-		return ['vv-dropdown', 'vv-dropdown-option', 'vv-dropdown-action']
-	}
-	if (kebabName === 'vv-combobox') {
-		return [
-			'vv-select',
-			'vv-dropdown-option',
-			'vv-dropdown-optgroup',
-			'vv-dropdown',
-			'vv-dropdown-action',
-		]
-	}
-	if (kebabName === 'vv-button-group') {
-		return ['vv-button', 'vv-button-group']
-	}
-	if (kebabName === 'vv-accordion-group') {
-		return ['vv-accordion', 'vv-accordion-group']
-	}
-	if (kebabName === 'vv-checkbox-group') {
-		return ['vv-checkbox', 'vv-checkbox-group']
-	}
-	if (kebabName === 'vv-radio-group') {
-		return ['vv-radio', 'vv-radio-group']
-	}
-	if (kebabName === 'vv-alert-group') {
-		return ['vv-alert', 'vv-alert-group']
-	}
-	if (kebabName === 'v-tooltip') {
-		return ['vv-tooltip']
-	}
-	return [kebabName]
-}
-
-const getSideEffects = function (kebabName: string, importStyle?: ImportStyle) {
-	const sideEffects: SideEffectsInfo = []
-
-	if (!importStyle) {
-		return sideEffects
-	}
-
-	// import component style
-	const styleNames = getStyleNames(kebabName)
-	if (styleNames) {
-		styleNames.forEach((name) => {
-			sideEffects.push(
-				`@volverjs/style/${
-					importStyle === 'scss' ? 'scss/' : ''
-				}components/${name}`,
-			)
-		})
-	}
-
-	return sideEffects
-}
-
-/**
- * Resolver for @volverjs/ui-vue
- *
- * @link https://github.com/volverjs/ui-vue
- */
-export function VolverResolver({
-	prefix = VOLVER_PREFIX,
-	importStyle,
-	directives,
-	ignore,
-}: VolverResolverOptions = {}): ComponentResolver[] {
-	return [
-		{
-			type: 'component',
-			resolve: (name: string) => {
-				if (
-					!prefix ||
-					!name.toLowerCase().startsWith(prefix.toLowerCase())
-				) {
-					return
-				}
-				const kebabName = kebabCase(name).replace(
-					`${prefix}-`,
-					`${VOLVER_PREFIX}-`,
-				)
-
-				if (ignore && ignore.includes(kebabName)) {
-					return
-				}
-
-				// import component
-				return {
-					from: `@volverjs/ui-vue/${kebabName}`,
-					sideEffects: getSideEffects(kebabName, importStyle),
-				}
-			},
-		},
-		{
-			type: 'directive',
-			resolve: (name: string) => {
-				if (!directives) {
-					return
-				}
-
-				const kebabName = `v-${kebabCase(name)}`
-
-				// filter directive
-				if (!DIRECTIVES.includes(kebabName)) {
-					return
-				}
-
-				if (ignore && ignore.includes(kebabName)) {
-					return
-				}
-
-				// import directive
-				return {
-					from: `@volverjs/ui-vue/${kebabName}`,
-					sideEffects: getSideEffects(kebabName, importStyle),
-				}
-			},
-		},
-	]
-}

package/src/shims.d.ts

@@ -1,13 +0,0 @@
-// eslint-disable-next-line
-declare interface Window {
-	// extend the window
-}
-
-declare module '*.vue' {
-	import type { DefineComponent } from 'vue'
-	// eslint-disable-next-line
-	const component: DefineComponent<{}, {}, any>
-	export default component
-}
-
-type ValueOf<T> = T[keyof T]

package/src/stories/Accordion/Accordion.settings.ts

@@ -1,57 +0,0 @@
-import { DisabledArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
-
-export const defaultArgs = {
-	title: 'Lorem Ipsum',
-	content:
-		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-	modifiers: [],
-	disabled: false,
-	not: false,
-}
-
-export const argTypes = {
-	summary: {
-		description: 'The title slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	default: {
-		description: 'The content slot',
-		control: {
-			type: 'text',
-		},
-		table: {
-			category: 'Slots',
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	title: {
-		description: 'The accordion title',
-	},
-	content: {
-		description: 'The accordion content',
-	},
-	modifiers: {
-		...ModifiersArgTypes.modifiers,
-		options: ['marker-right', 'bordered'],
-	},
-	not: {
-		description: 'Inverts the accordion state',
-		control: 'boolean',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	...DisabledArgTypes,
-}