@volverjs/ui-vue 0.0.1-beta.8 → 0.0.2

package/src/components/VvInputText/VvInputTextActions.ts

@@ -1,99 +1,24 @@
-/* eslint-disable vue/one-component-per-file */
-import type { VvInputTextPropsTypes } from './VvInputText'
-import { computed, type Component } from 'vue'
-
-import { h, ref, defineComponent } from 'vue'
-import VvIcon from '../VvIcon/VvIcon.vue'
-import { TYPES, TYPES_ICON } from './constants'
-
-const VvInputPasswordAction = defineComponent({
-	components: {
-		VvIcon
-	},
-	props: {
-		disabled: Boolean
-	},
-	setup(props, { emit }) {
-		const active = ref(false)
-		const activeIcon = computed(() =>
-			active.value ? TYPES_ICON.PASSWORD_OFF : TYPES_ICON.PASSWORD_ON
-		)
-
-		function onClick() {
-			if (!props.disabled) {
-				active.value = !active.value
-				emit(
-					active.value ? 'action-password-on' : 'action-password-off'
-				)
-			}
-		}
-
-		return {
-			activeIcon,
-			onClick
-		}
-	},
-	render() {
-		const icon = h(VvIcon, { name: this.activeIcon })
-
-		return h(
-			'button',
-			{
-				disabled: this.disabled,
-				class: ['vv-input-text__action'],
-				onClick: this.onClick
-			},
-			icon
-		)
-	}
-})
-const VvInputStepAction = defineComponent({
-	components: {
-		VvIcon
-	},
-	props: {
-		disabled: Boolean,
-		mode: {
-			type: String,
-			validator: (v: string) => ['up', 'down'].includes(v),
-			default: 'up'
-		}
-	},
-	setup(props, { emit }) {
-		function onClick() {
-			if (!props.disabled) {
-				emit(
-					props.mode === 'up' ? 'action-step-up' : 'action-step-down'
-				)
-			}
-		}
-
-		return {
-			onClick
-		}
-	},
-	render() {
-		return h('button', {
-			class: [
-				'vv-input-text__action-chevron',
-				this.mode === 'up' && 'vv-input-text__action-chevron-up'
-			],
-			disabled: this.disabled,
-			onClick: this.onClick
-		})
-	}
-})
+import { type Component, h, computed } from 'vue'
+import {
+	type VvInputTextPropsTypes,
+	INPUT_TYPES,
+} from '@/components/VvInputText'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import VvInputPasswordAction from '@/components/VvInputText/VvInputPasswordAction'
+import VvInputStepAction from '@/components/VvInputText/VvInputStepAction'
+import VvInputClearAction from '@/components/VvInputText/VvInputClearAction'
 
 export default function VvInputTextActionsFactory(
 	type: string,
-	parentProps: VvInputTextPropsTypes
+	parentProps: VvInputTextPropsTypes,
 ): Component {
 	return {
 		name: 'VvInputTextActions',
 		components: {
 			VvIcon,
 			VvInputPasswordAction,
-			VvInputStepAction
+			VvInputStepAction,
+			VvInputClearAction,
 		},
 		setup() {
 			const isDisabled = computed(() => {
@@ -101,51 +26,75 @@ export default function VvInputTextActionsFactory(
 			})
 
 			return {
-				isDisabled
+				isDisabled,
+				labelStepUp: parentProps.labelStepUp,
+				labelStepDown: parentProps.labelStepDown,
+				labelShowPassword: parentProps.labelShowPassword,
+				labelHidePassword: parentProps.labelHidePassword,
+				labelClear: parentProps.labelClear,
+				iconShowPassword: parentProps.iconShowPassword,
+				iconHidePassword: parentProps.iconHidePassword,
 			}
 		},
 		render() {
-			let _actions = null
+			let actions = null
 			switch (type) {
-				case TYPES.PASSWORD: {
-					const { onActionPasswordOn, onActionPasswordOff } =
-						this.$attrs
-					_actions = [
+				case INPUT_TYPES.SEARCH: {
+					const { onClear } = this.$attrs
+					actions = [
+						h(VvInputClearAction, {
+							disabled: this.isDisabled,
+							label: this.labelShowPassword,
+							onClear,
+						}),
+					]
+					break
+				}
+				case INPUT_TYPES.PASSWORD: {
+					const { onTogglePassword } = this.$attrs
+					actions = [
 						h(VvInputPasswordAction, {
 							disabled: this.isDisabled,
-							onActionPasswordOn,
-							onActionPasswordOff
-						})
+							onTogglePassword,
+							labelShow: this.labelShowPassword,
+							labelHide: this.labelHidePassword,
+							iconShow: this.iconShowPassword,
+							iconHide: this.iconHidePassword,
+						}),
 					]
 					break
 				}
-				case TYPES.NUMBER: {
-					const { onActionStepUp, onActionStepDown } = this.$attrs
-					_actions = [
+				case INPUT_TYPES.NUMBER: {
+					const { onStepUp, onStepDown } = this.$attrs
+					actions = [
 						h(VvInputStepAction, {
 							mode: 'up',
-							disabled: this.isDisabled,
-							onActionStepUp,
-							onActionStepDown
+							disabled:
+								this.isDisabled ||
+								(parentProps.max !== undefined &&
+									parentProps.modelValue === parentProps.max),
+							label: this.labelStepUp,
+							onStepUp,
+							onStepDown,
 						}),
 						h(VvInputStepAction, {
 							mode: 'down',
-							disabled: this.isDisabled,
-							onActionStepUp,
-							onActionStepDown
-						})
+							disabled:
+								this.isDisabled ||
+								(parentProps.min !== undefined &&
+									parentProps.modelValue === parentProps.min),
+							label: this.labelStepDown,
+							onStepUp,
+							onStepDown,
+						}),
 					]
 					break
 				}
-				default: {
-					_actions = null
-					break
-				}
 			}
 
-			return Array.isArray(_actions)
-				? h('div', { class: 'vv-input-text__actions-group' }, _actions)
-				: _actions
-		}
+			return Array.isArray(actions)
+				? h('div', { class: 'vv-input-text__actions-group' }, actions)
+				: actions
+		},
 	}
 }

package/src/components/VvInputText/index.ts

@@ -0,0 +1,140 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+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', 'focus', 'blur', 'keyup']
+
+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',
+	},
+}
+
+export type VvInputTextPropsTypes = ExtractPropTypes<typeof VvInputTextProps>

package/src/components/VvProgress/VvProgress.vue

@@ -1,34 +1,34 @@
-<template>
-	<progress v-bind="properties" />
-</template>
+<script lang="ts">
+	export default {
+		name: 'VvProgress',
+	}
+</script>
 
 <script setup lang="ts">
-import { useBemModifiers } from '../../composables/useModifiers'
-import { computed, toRefs } from 'vue'
-import { VvProgressProps } from './VvProgress'
-
-//Props, emits, slots, attrs
-const props = defineProps(VvProgressProps)
+	import { computed, toRefs } from 'vue'
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import { VvProgressProps } from '@/components/VvProgress'
 
-// data
-const { modifiers } = toRefs(props)
+	// props
+	const props = defineProps(VvProgressProps)
+	const { value, max, label: ariaLabel } = toRefs(props)
+	const indeterminate = computed(() => props.value === undefined)
 
-//Styles & bindings
-const { bemCssClasses: progressClass } = useBemModifiers('vv-progress', {
-	modifiers,
-	indeterminate: computed(() => !props.determinate)
-})
-
-/**
- * Compute component properties
- */
-const properties = computed(() => {
-	return {
-		'aria-label': props.ariaLabel,
-		role: 'progressbar',
-		class: progressClass.value,
-		value: props.value,
-		max: props.max
-	}
-})
+	// styles
+	const { bemCssClasses: hasClass } = useBemModifiers('vv-progress', {
+		modifiers: props.modifiers,
+		indeterminate,
+	})
 </script>
+
+<template>
+	<progress
+		role="progressbar"
+		v-bind="{
+			class: hasClass,
+			ariaLabel,
+			max,
+			value,
+		}"
+	/>
+</template>

package/src/components/VvProgress/index.ts

@@ -0,0 +1,32 @@
+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,130 +1,101 @@
-<template>
-	<label :class="radioClass" v-bind="radioAttrs" @click="onClick">
-		<input
-			ref="input"
-			:class="radioInputClass"
-			v-bind="radioInputAttrs"
-			@input="onChange" />
-		<slot :value="modelValue">
-			{{ label }}
-		</slot>
-	</label>
-</template>
+<script lang="ts">
+	export default {
+		name: 'VvRadio',
+	}
+</script>
 
 <script setup lang="ts">
-import type { InputHTMLAttributes, LabelHTMLAttributes } from 'vue'
-
-import { computed, useAttrs, ref } from 'vue'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import { VvRadioProps, VvRadioEvents } from './VvRadio'
-
-//Composables
-import { toRadioInputRefs } from './useRadioProps'
-import { useComponentFocus } from '../../composables/focus/useComponentFocus'
-import { useBemModifiers } from '@/composables/useModifiers'
+	import { computed, ref, useSlots } from 'vue'
+	import { nanoid } from 'nanoid'
+	import { contains, equals } from '@/utils/ObjectUtilities'
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import {
+		VvRadioProps,
+		VvRadioEvents,
+		useGroupProps,
+	} from '@/components/VvRadio'
+	import { HintSlotFactory } from '@/components/common/HintSlot'
 
-//Props, Emits, Slots e Attrs
-const props = defineProps(VvRadioProps)
-const emit = defineEmits(VvRadioEvents)
-const attrs = useAttrs()
+	// props, emit and slots
+	const props = defineProps(VvRadioProps)
+	const emit = defineEmits(VvRadioEvents)
+	const slots = useSlots()
 
-//Data
-const { disabled, readonly, modelValue, valid, error } = toRadioInputRefs(
-	props,
-	emit
-)
-
-//Template References
-const input = ref()
-
-//Component computed
-const isChecked = computed(() => {
-	return Array.isArray(modelValue.value)
-		? ObjectUtilities.contains(props.value, modelValue.value)
-		: ObjectUtilities.equals(props.value, modelValue.value)
-})
+	// data
+	const { disabled, readonly, modelValue, valid, invalid } = useGroupProps(
+		props,
+		emit,
+	)
+	const id = computed(() => String(props.id || nanoid()))
+	const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
 
-// #region FOCUS
-const { focused } = useComponentFocus(input, emit)
-// #endregion FOCUS
+	// template refs
+	const input = ref()
 
-//Styles & Bindings
-const { bemCssClasses: bemRadioClass } = useBemModifiers('vv-input-radio', {
-	valid,
-	invalid: error
-})
-const { bemCssClasses: bemInputRadioClass } = useBemModifiers(
-	'vv-input-radio__input',
-	{
-		checked: isChecked,
-		disabled,
-		readonly
-	}
-)
-const radioClass = computed(() => {
-	const { class: cssClass } = attrs
-	return {
-		class: cssClass,
-		...bemRadioClass.value
-	}
-})
-const radioInputClass = computed(() => {
-	return {
-		'focus-visible': focused.value,
-		...bemInputRadioClass.value
-	}
-})
-const radioAttrs = computed(() => {
-	const { id, name, style } = attrs
-	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
-		k.startsWith('data-')
+	// 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),
 	)
-	return {
-		for: (id || name) as string,
-		style,
-		...dataAttrs
-	} as LabelHTMLAttributes
-})
-const radioInputAttrs = computed(() => {
-	const { id = '', name = '' } = attrs as InputHTMLAttributes
-	return {
-		type: 'radio',
-		id: id || name,
-		name,
-		value: props.value,
-		disabled: disabled.value,
-		readonly: readonly.value,
-		checked: isChecked.value,
-		...radioInputAriaAttrs.value
-	} as InputHTMLAttributes
-})
-const radioInputAriaAttrs = computed(() => {
-	const { name } = attrs
-	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
-		k.startsWith('aria-')
+	const hasValue = computed(() =>
+		['string', 'number', 'boolean'].includes(typeof props.value)
+			? props.value
+			: true,
 	)
-	return {
-		'aria-label': name,
-		'aria-checked': isChecked.value,
-		...dataAttrs
-	}
-})
+	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)
+		},
+	})
 
-//Methods
-function onChange() {
-	if (!isChecked.value) emit('change', props.value)
-	modelValue.value = props.value
-}
-function onClick(event: Event) {
-	if (!disabled.value) {
-		emit('click', event)
-		focused.value = true
-	}
-}
-</script>
+	// styles
+	const { bemCssClasses } = useBemModifiers('vv-radio', {
+		valid,
+		invalid,
+		disabled,
+		readonly,
+	})
 
-<script lang="ts">
-export default {
-	inheritAttrs: false
-}
+	// hint
+	const { HintSlot } = HintSlotFactory(props, slots)
 </script>
+
+<template>
+	<label :class="bemCssClasses" :for="id">
+		<input
+			:id="id"
+			ref="input"
+			v-model="localModelValue"
+			type="radio"
+			class="vv-radio__input"
+			:name="name"
+			:disabled="isDisabled"
+			:value="hasValue"
+			:tabindex="tabindex"
+			:aria-invalid="isInvalid"
+		/>
+		<slot :value="modelValue">
+			{{ label }}
+		</slot>
+		<HintSlot class="vv-radio__hint" :params="{ value: modelValue }" />
+	</label>
+</template>