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

package/src/components/VvInputText/index.ts

@@ -1,199 +0,0 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-import type { FactoryOpts } from 'imask'
-import { InputTextareaProps } from '../../props'
-
-export const INPUT_TYPES = {
-	TEXT: 'text',
-	PASSWORD: 'password',
-	NUMBER: 'number',
-	EMAIL: 'email',
-	TEL: 'tel',
-	URL: 'url',
-	COLOR: 'color',
-	SEARCH: 'search',
-	DATE: 'date',
-	TIME: 'time',
-	DATETIME_LOCAL: 'datetime-local',
-	MONTH: 'month',
-	WEEK: 'week',
-} as const
-export type InputType = ValueOf<typeof INPUT_TYPES>
-
-export const TYPES_ICON = {
-	PASSWORD_SHOW: 'eye-on',
-	PASSWORD_HIDE: 'eye-off',
-	DATE: 'calendar',
-	TIME: 'time',
-	COLOR: 'color',
-	SEARCH: 'close',
-} as const
-
-export const VvInputTextEvents = [
-	'update:modelValue',
-	'update:masked',
-	'accept',
-	'accept:typed',
-	'accept:masked',
-	'accept:unmasked',
-	'complete',
-	'complete:typed',
-	'complete:masked',
-	'complete:unmasked',
-	'focus',
-	'blur',
-	'keyup',
-	'keydown',
-	'keypress',
-]
-
-export const VvInputTextProps = {
-	...InputTextareaProps,
-	/**
-	 * Input value
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
-	 */
-	modelValue: [String, Number],
-	/**
-	 * Type of form control
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type
-	 */
-	type: {
-		type: String as PropType<InputType>,
-		default: INPUT_TYPES.TEXT,
-		validator: (value: InputType) =>
-			Object.values(INPUT_TYPES).includes(value),
-	},
-	/**
-	 * Minimum value
-	 * Available for input types: date, month, week, time, datetime-local, number, range.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
-	 */
-	min: [Number, Date, String],
-	/**
-	 * Maximum value
-	 * Available for input types: date, month, week, time, datetime-local, number, range.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
-	 */
-	max: [Number, Date, String],
-	/**
-	 * Incremental values that are valid
-	 * Available for input types: date, month, week, time, datetime-local and number
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
-	 */
-	step: { type: [String, Number], default: 1 },
-	/**
-	 * Pattern the value must match to be valid
-	 * Available for input types: text, search, url, tel, email and password
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
-	 */
-	pattern: String,
-	/**
-	 * Whether to allow multiple values
-	 * Available for input type email
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple
-	 */
-	multiple: Boolean,
-	/**
-	 * VvIcon name for show password button
-	 * @see VVIcon
-	 */
-	iconShowPassword: {
-		type: String,
-		default: TYPES_ICON.PASSWORD_SHOW,
-	},
-	/**
-	 * VvIcon name for hide password button
-	 * @see VVIcon
-	 */
-	iconHidePassword: {
-		type: String,
-		default: TYPES_ICON.PASSWORD_HIDE,
-	},
-	/**
-	 * VvIcon name for clear button
-	 * @see VVIcon
-	 */
-	iconClear: {
-		type: String,
-		default: TYPES_ICON.SEARCH,
-	},
-	/**
-	 * Label for step up button
-	 */
-	labelStepUp: {
-		type: String,
-		default: 'Increase value',
-	},
-	/**
-	 * Label for step down button
-	 */
-	labelStepDown: {
-		type: String,
-		default: 'Decrease value',
-	},
-	/**
-	 * Label for show password button
-	 */
-	labelShowPassword: {
-		type: String,
-		default: 'Show password',
-	},
-	/**
-	 * Label for hide password button
-	 */
-	labelHidePassword: {
-		type: String,
-		default: 'Hide password',
-	},
-	/**
-	 * Label for clear button
-	 */
-	labelClear: {
-		type: String,
-		default: 'Clear',
-	},
-	/**
-	 * iMask options
-	 * @see https://imask.js.org/guide.html
-	 */
-	iMask: {
-		type: Object as PropType<FactoryOpts>,
-		default: undefined,
-	},
-	/**
-	 * Masked value
-	 */
-	masked: {
-		type: String,
-		default: undefined,
-	},
-	/**
-	 * Adjust input width to content
-	 */
-	autoWidth: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * Hide type number, password and search actions
-	 */
-	hideActions: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * Add unit label to input
-	 */
-	unit: {
-		type: String,
-	},
-	/**
-	 * Select input text on focus
-	 */
-	selectOnFocus: {
-		type: Boolean,
-		default: false,
-	},
-}
-
-export type VvInputTextPropsTypes = ExtractPropTypes<typeof VvInputTextProps>

package/src/components/VvNav/VvNav.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-	import { VvNavProps, VvNavEvents } from '@/components/VvNav'
-	import VvNavItem from './VvNavItem.vue'
-
-	const props = defineProps(VvNavProps)
-	const { modifiers } = toRefs(props)
-
-	const emit = defineEmits(VvNavEvents)
-	const onClick = (event: Event) => {
-		const target = event.target as HTMLElement
-		if (target?.dataset.index) {
-			const index = parseInt(target.dataset.index)
-			const item = props.items?.[index]
-			if (!item || item?.disabled) {
-				return
-			}
-			emit('click', item)
-		}
-	}
-
-	// bem css classes
-	const bemCssClasses = useModifiers('vv-nav', modifiers)
-</script>
-
-<template>
-	<nav :class="bemCssClasses">
-		<ul
-			class="vv-nav__menu"
-			role="menu"
-			aria-busy="true"
-			@click.stop="onClick"
-		>
-			<slot>
-				<VvNavItem
-					v-for="({ on = {}, ...item }, index) in items"
-					:key="index"
-					:data-index="index"
-					v-bind="item"
-					v-on="on"
-				/>
-			</slot>
-		</ul>
-	</nav>
-</template>

package/src/components/VvNav/VvNavItem.vue

@@ -1,18 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvNavItem',
-		inheritAttrs: false,
-	}
-</script>
-
-<script setup lang="ts">
-	import VvAction from '@/components/VvAction/VvAction.vue'
-</script>
-
-<template>
-	<li class="vv-nav__item" role="presentation">
-		<VvAction v-bind="$attrs" class="vv-nav__item-label">
-			<slot />
-		</VvAction>
-	</li>
-</template>

package/src/components/VvNav/VvNavSeparator.vue

@@ -1,11 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvNavSeparator',
-	}
-</script>
-
-<template>
-	<li class="vv-nav__separator" role="separator">
-		<slot />
-	</li>
-</template>

package/src/components/VvNav/index.ts

@@ -1,8 +0,0 @@
-import { ModifiersProps, NavProps } from '@/props'
-
-export const VvNavProps = {
-	...ModifiersProps,
-	...NavProps,
-}
-
-export const VvNavEvents = ['click']

package/src/components/VvProgress/VvProgress.vue

@@ -1,34 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvProgress',
-	}
-</script>
-
-<script setup lang="ts">
-	import { VvProgressProps } from '.'
-
-	// props
-	const props = defineProps(VvProgressProps)
-	const { value, max, label: ariaLabel } = toRefs(props)
-	const indeterminate = computed(() => props.value === undefined)
-
-	// styles
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers(
-		'vv-progress',
-		modifiers,
-		computed(() => ({ indeterminate: indeterminate.value })),
-	)
-</script>
-
-<template>
-	<progress
-		role="progressbar"
-		v-bind="{
-			class: bemCssClasses,
-			ariaLabel,
-			max,
-			value,
-		}"
-	/>
-</template>

package/src/components/VvProgress/index.ts

@@ -1,32 +0,0 @@
-import { ModifiersProps } from '../../props'
-
-export const VvProgressProps = {
-	...ModifiersProps,
-	/**
-	 * Progress value
-	 * This attribute specifies how much of the task that has been completed.
-	 * It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted.
-	 * If there is no value attribute, the progress bar is indeterminate.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max
-	 */
-	value: {
-		type: [Number, String],
-		default: undefined,
-	},
-	/**
-	 * Progress max
-	 * This attribute describes how much work the task indicated by the progress element requires.
-	 * The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max
-	 */
-	max: {
-		type: [Number, String],
-	},
-	/**
-	 * Progress aria-label
-	 */
-	label: {
-		type: String,
-		required: true,
-	},
-}

package/src/components/VvRadio/VvRadio.vue

@@ -1,124 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvRadio',
-	}
-</script>
-
-<script setup lang="ts">
-	import { VvRadioProps, VvRadioEvents, useGroupProps } from '.'
-	import { HintSlotFactory } from '../common/HintSlot'
-
-	// props, emit and slots
-	const props = defineProps(VvRadioProps)
-	const emit = defineEmits(VvRadioEvents)
-	const slots = useSlots()
-
-	// props merged with volver defaults (now only for labels)
-	const propsDefaults = useDefaults<typeof VvRadioProps>(
-		'VvRadio',
-		VvRadioProps,
-		props,
-	)
-
-	// data
-	const { id, disabled, readonly, modelValue, valid, invalid } =
-		useGroupProps(props, emit)
-	const hasId = useUniqueId(id)
-	const hasHintId = computed(() => `${hasId.value}-hint`)
-	const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
-
-	// template refs
-	const input = ref()
-
-	// computed
-	const isDisabled = computed(() => disabled.value || readonly.value)
-	const isInvalid = computed(() => {
-		if (invalid.value === true) {
-			return true
-		}
-		if (valid.value === true) {
-			return false
-		}
-		return undefined
-	})
-	const isChecked = computed(() =>
-		Array.isArray(modelValue.value)
-			? contains(props.value, modelValue.value)
-			: equals(props.value, modelValue.value),
-	)
-	const hasValue = computed(() =>
-		['string', 'number', 'boolean'].includes(typeof props.value)
-			? props.value
-			: true,
-	)
-	const localModelValue = computed({
-		get() {
-			return isChecked.value ? hasValue.value : null
-		},
-		set(newValue) {
-			if (Array.isArray(modelValue.value)) {
-				modelValue.value = [props.value]
-			} else {
-				modelValue.value = props.value
-			}
-			emit('change', newValue)
-		},
-	})
-
-	// styles
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers(
-		'vv-radio',
-		modifiers,
-		computed(() => ({
-			valid: valid.value,
-			invalid: invalid.value,
-			disabled: disabled.value,
-			readonly: readonly.value,
-		})),
-	)
-
-	// hint
-	const {
-		HintSlot,
-		hasHintLabelOrSlot,
-		hasInvalidLabelOrSlot,
-		hintSlotScope,
-	} = HintSlotFactory(propsDefaults, slots)
-</script>
-
-<template>
-	<label :class="bemCssClasses" :for="hasId">
-		<input
-			:id="hasId"
-			ref="input"
-			v-model="localModelValue"
-			type="radio"
-			class="vv-radio__input"
-			:name="name"
-			:disabled="isDisabled"
-			:value="hasValue"
-			:tabindex="tabindex"
-			:aria-invalid="isInvalid"
-			:aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
-			:aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"
-		/>
-		<slot :value="modelValue">
-			{{ label }}
-		</slot>
-		<HintSlot :id="hasHintId" class="vv-radio__hint">
-			<template v-if="$slots.hint" #hint>
-				<slot name="hint" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.loading" #loading>
-				<slot name="loading" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.valid" #valid>
-				<slot name="valid" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.invalid" #invalid>
-				<slot name="invalid" v-bind="hintSlotScope" />
-			</template>
-		</HintSlot>
-	</label>
-</template>

package/src/components/VvRadio/index.ts

@@ -1,46 +0,0 @@
-import type { ExtractPropTypes, Ref } from 'vue'
-import type { InputGroupState } from '../../types/group'
-import { CheckboxRadioProps } from '../../props'
-import { INJECTION_KEY_RADIO_GROUP } from '../../constants'
-
-export const VvRadioProps = CheckboxRadioProps
-
-export const VvRadioEvents = ['click', 'update:modelValue', 'change', 'blur']
-
-export type VvRadioPropsType = ExtractPropTypes<typeof VvRadioProps>
-
-/**
- * Merges local and group props
- */
-export function useGroupProps(
-	props: VvRadioPropsType,
-	emit: (event: (typeof VvRadioEvents)[number], value: unknown) => void,
-) {
-	const { id } = toRefs(props)
-	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<InputGroupState>(INJECTION_KEY_RADIO_GROUP)
-
-	// global props
-	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
-	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
-	const readonly = computed(() =>
-		Boolean(props.readonly || group?.value?.readonly.value),
-	)
-	const disabled = computed(() =>
-		Boolean(props.disabled || group?.value?.disabled.value),
-	)
-
-	return {
-		// local props
-		id,
-		// global props
-		group,
-		isInGroup,
-		modelValue,
-		valid,
-		invalid,
-		readonly,
-		disabled,
-	}
-}

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -1,103 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvRadioGroup',
-	}
-</script>
-
-<script setup lang="ts">
-	import type { Option } from '../../types/generic'
-	import type { InputGroupState } from '../../types/group'
-	import { INJECTION_KEY_RADIO_GROUP } from '../../constants'
-	import { HintSlotFactory } from '../common/HintSlot'
-	import VvRadio from '../VvRadio/VvRadio.vue'
-	import { VvRadioGroupProps, VvRadioGroupEvents } from '.'
-
-	// props, emit and slots
-	const props = defineProps(VvRadioGroupProps)
-	const emit = defineEmits(VvRadioGroupEvents)
-	const slots = useSlots()
-
-	// props merged with volver defaults (now only for labels)
-	const propsDefaults = useDefaults<typeof VvRadioGroupProps>(
-		'VvRadioGroup',
-		VvRadioGroupProps,
-		props,
-	)
-
-	// data
-	const modelValue = useVModel(props, 'modelValue', emit)
-	const { disabled, readonly, vertical, valid, invalid, modifiers } =
-		toRefs(props)
-
-	useProvideGroupState<InputGroupState>({
-		key: INJECTION_KEY_RADIO_GROUP,
-		modelValue,
-		disabled,
-		readonly,
-		valid,
-		invalid,
-	})
-
-	// options
-	const { getOptionLabel, getOptionValue } = useOptions(props)
-
-	// styles
-	const bemCssClasses = useModifiers(
-		'vv-radio-group',
-		modifiers,
-		computed(() => ({
-			disabled: disabled.value,
-			readonly: readonly.value,
-			horizontal: !vertical.value,
-			valid: valid.value,
-			invalid: invalid.value,
-		})),
-	)
-
-	// methods
-	const getOptionProps = (option: string | Option, index: number) => {
-		return {
-			id: `${props.name}_opt${index}`,
-			name: props.name,
-			label: getOptionLabel(option),
-			value: getOptionValue(option),
-		}
-	}
-
-	// hint
-	const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots)
-</script>
-
-<template>
-	<fieldset :class="bemCssClasses">
-		<legend v-if="label" v-text="label" />
-		<div class="vv-radio-group__wrapper">
-			<!-- #region options -->
-			<template v-if="options.length > 0">
-				<VvRadio
-					v-for="(option, index) in options"
-					:key="index"
-					v-bind="getOptionProps(option, index)"
-				/>
-			</template>
-			<!-- #endregion -->
-			<!-- #region default -->
-			<slot v-else />
-			<!-- #endregion -->
-		</div>
-		<HintSlot class="vv-radio-group__hint">
-			<template v-if="$slots.hint" #hint>
-				<slot name="hint" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.loading" #loading>
-				<slot name="loading" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.valid" #valid>
-				<slot name="valid" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.invalid" #invalid>
-				<slot name="invalid" v-bind="hintSlotScope" />
-			</template>
-		</HintSlot>
-	</fieldset>
-</template>

package/src/components/VvRadioGroup/index.ts

@@ -1,5 +0,0 @@
-import { CheckboxRadioGroupProps } from '../../props'
-
-export const VvRadioGroupProps = CheckboxRadioGroupProps
-
-export const VvRadioGroupEvents = ['update:modelValue', 'change']