@volverjs/ui-vue 0.0.1-beta.12 → 0.0.1-beta.16

package/src/components/VvInputText/VvInputTextActions.ts

@@ -1,88 +1,9 @@
-/* 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, 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,
@@ -93,7 +14,8 @@ export default function VvInputTextActionsFactory(
 		components: {
 			VvIcon,
 			VvInputPasswordAction,
-			VvInputStepAction
+			VvInputStepAction,
+			VvInputClearAction
 		},
 		setup() {
 			const isDisabled = computed(() => {
@@ -101,51 +23,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.SEARCH: {
+					const { onClear } = this.$attrs
+					actions = [
+						h(VvInputClearAction, {
+							disabled: this.isDisabled,
+							label: this.labelShowPassword,
+							onClear
+						})
+					]
+					break
+				}
 				case TYPES.PASSWORD: {
-					const { onActionPasswordOn, onActionPasswordOff } =
-						this.$attrs
-					_actions = [
+					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 = [
+					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,135 @@
+import type { ExtractPropTypes } from 'vue'
+import {
+	ValidProps,
+	ErrorProps,
+	HintProps,
+	LoadingProps,
+	ModifiersProps,
+	LimitProps,
+	InputProps
+} from '@/props'
+
+export const TYPES = {
+	TEXT: 'text',
+	PASSWORD: 'password',
+	DATE: 'date',
+	DATETIME_LOCAL: 'datetime-local',
+	NUMBER: 'number',
+	TIME: 'time',
+	EMAIL: 'email',
+	TEL: 'tel',
+	URL: 'url',
+	COLOR: 'color',
+	SEARCH: 'search',
+	FILE: 'file'
+}
+
+export const ICON_POSITIONS = {
+	LEFT: 'left',
+	RIGHT: 'right'
+}
+
+export const TYPES_ICON = {
+	PASSWORD_SHOW: 'eye-on',
+	PASSWORD_HIDE: 'eye-off',
+	DATE: 'calendar',
+	TIME: 'time',
+	COLOR: 'color',
+	SEARCH: 'close'
+}
+
+export const INPUT = {
+	TYPES,
+	ICON_POSITIONS,
+	TYPES_ICON
+}
+
+export const VvInputTextEvents = ['update:modelValue', 'focus', 'blur', 'keyup']
+
+export const VvInputTextProps = {
+	...ValidProps,
+	...ErrorProps,
+	...HintProps,
+	...LoadingProps,
+	...ModifiersProps,
+	...LimitProps,
+	...InputProps,
+	/**
+	 * Input value
+	 */
+	modelValue: {
+		type: [String, Number],
+		default: undefined
+	},
+	/**
+	 * Input type
+	 */
+	type: {
+		type: String,
+		default: TYPES.TEXT,
+		validator: (value: string) => Object.values(TYPES).includes(value)
+	},
+	min: [Number, Date],
+	max: [Number, Date],
+	step: { type: Number, default: 1 },
+	labelStepUp: {
+		type: String,
+		default: 'Increase value'
+	},
+	labelStepDown: {
+		type: String,
+		default: 'Decrease value'
+	},
+	labelShowPassword: {
+		type: String,
+		default: 'Show password'
+	},
+	labelHidePassword: {
+		type: String,
+		default: 'Hide password'
+	},
+	labelClear: {
+		type: String,
+		default: 'Clear'
+	},
+	iconShowPassword: {
+		type: String,
+		default: TYPES_ICON.PASSWORD_SHOW
+	},
+	iconHidePassword: {
+		type: String,
+		default: TYPES_ICON.PASSWORD_HIDE
+	},
+	iconClear: {
+		type: String,
+		default: TYPES_ICON.SEARCH
+	},
+	/**
+	 * Icon name
+	 * @see DsIcon
+	 */
+	icon: {
+		type: [String, Object],
+		default: ''
+	},
+	/**
+	 * Icon position
+	 */
+	iconPosition: {
+		type: String,
+		validation: (value: string) =>
+			Object.values(ICON_POSITIONS).includes(value),
+		default: ICON_POSITIONS.RIGHT
+	},
+	/**
+	 * If true the label will be floating
+	 */
+	floating: Boolean,
+	debounce: [String, Number],
+	/**
+	 * Sequential keyboard navigation
+	 */
+	tabindex: { type: [String, Number], default: 0 }
+}
+
+export type VvInputTextPropsTypes = ExtractPropTypes<typeof VvInputTextProps>

package/src/components/VvNativeSelect/VvNativeSelect.vue

@@ -1,58 +1,29 @@
-<template>
-	<div :class="selectClasses">
-		<label v-if="label" :for="id">{{ label }}</label>
-		<!-- #region native select -->
-		<div class="vv-select__wrapper">
-			<slot name="icon-left">
-				<vv-icon v-if="iconLeft" :name="iconLeft" />
-			</slot>
-			<select
-				:id="id"
-				:value="
-					typeof modelValue === 'string'
-						? modelValue
-						: modelValue?.[valueKey]
-				"
-				:disabled="disabled || readonly"
-				@input="onInput">
-				<option v-if="placeholder" value="" disabled selected>
-					{{ placeholder }}
-				</option>
-				<option
-					v-for="(option, index) in options"
-					:key="index"
-					:disabled="
-						typeof option === 'object'
-							? option.disabled ?? disabled
-							: disabled
-					"
-					:value="getValue(option)">
-					{{ getLabel(option) }}
-				</option>
-			</select>
-			<slot name="icon-right">
-				<vv-icon v-if="iconRight" :name="iconRight" />
-			</slot>
-		</div>
-		<!-- #endregion native select -->
-		<HintSlot class="vv-select__hint" />
-	</div>
-</template>
+<script lang="ts">
+export default {
+	name: 'VvNativeSelect'
+}
+</script>
 
 <script setup lang="ts">
-import { computed, toRefs, useSlots } from 'vue'
-import { v4 as uuidv4 } from 'uuid'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import { VvNativeSelectProps, type Option } from './VvNativeSelect'
-import VvIcon from '../VvIcon/VvIcon.vue'
-import HintSlotFactory from '../common/HintSlot'
-import { useBemModifiers } from '../../composables/useModifiers'
+import { computed, toRefs, useSlots, type InputHTMLAttributes } from 'vue'
+import { nanoid } from 'nanoid'
+import { isEmpty } from '@/utils/ObjectUtilities'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import HintSlotFactory from '@/components/common/HintSlot'
+import { useBemModifiers } from '@/composables/useModifiers'
+import {
+	type Option,
+	VvNativeSelectProps,
+	VvNativeSelectEmits
+} from '@/components/VvNativeSelect'
 
+// props, emit and slots
 const props = defineProps(VvNativeSelectProps)
+const emit = defineEmits(VvNativeSelectEmits)
 const slots = useSlots()
-const emit = defineEmits(['update:modelValue'])
-//Hint component
-const HintSlot = HintSlotFactory(props, slots)
+
+// hint
+const { HintSlot, hasHint, hasErrors } = HintSlotFactory(props, slots)
 
 // data
 const {
@@ -66,10 +37,32 @@ const {
 	valid
 } = toRefs(props)
 
-const id = uuidv4()
+// computed
+const hasId = computed(() => String(props.id || nanoid()))
+const hasDescribedBy = computed(() => `${hasId.value}-hint`)
+
+// dirty
+const isDirty = computed(() => !isEmpty(props.modelValue))
+
+// disabled
+const isDisabled = computed(() => props.disabled || props.readonly)
+const hasTabindex = computed(() => {
+	return isDisabled.value ? -1 : props.tabindex
+})
+
+// invalid
+const isInvalid = computed(() => {
+	if (props.error === true) {
+		return true
+	}
+	if (props.valid === true) {
+		return false
+	}
+	return undefined
+})
 
-//Styles & css classes modifiers
-const { bemCssClasses: selectClasses } = useBemModifiers('vv-select', {
+// styles
+const { bemCssClasses } = useBemModifiers('vv-select', {
 	modifiers,
 	loading,
 	readonly,
@@ -77,30 +70,99 @@ const { bemCssClasses: selectClasses } = useBemModifiers('vv-select', {
 	iconRight,
 	valid,
 	invalid: error,
-	dirty: computed(() => ObjectUtilities.isNotEmpty(props.modelValue))
+	dirty: isDirty
 })
 
+// attrs
+const hasAttrs = computed(() => {
+	return {
+		name: props.name,
+		tabindex: hasTabindex.value,
+		'aria-invalid': isInvalid.value,
+		'aria-describedby':
+			!hasErrors.value && hasHint.value
+				? hasDescribedBy.value
+				: undefined,
+		'aria-errormessage': hasErrors.value ? hasDescribedBy.value : undefined
+	} as InputHTMLAttributes
+})
+
+/**
+ * Retrieve the option value based on prop "valueKey" or the option if it is a string
+ * @param {String | Option} option
+ */
 function getValue(option: string | Option) {
 	return typeof option === 'string' ? option : option[props.valueKey]
 }
 
+/**
+ * Retrieve the option label based on prop "labelKey" or the option if it is a string
+ * @param {String | Option} option
+ */
 function getLabel(option: string | Option) {
 	return typeof option === 'string' ? option : option[props.labelKey]
 }
 
-function onInput(event: Event) {
-	const target = event.target as HTMLSelectElement
-
-	// Find option object if useObject prop is true
-	const valueObject = props.useObject
-		? props.options?.find(
-				(option) => (option as Option)[props.valueKey] == target.value
-		  )
-		: null
-
-	// use valueObject if exist or the target value
-	const value = valueObject || target.value
-
-	emit('update:modelValue', value)
+/**
+ * Retrieve the disabled state of an option based on prop "disabled" or the disabled attribute
+ * @param {String | Option} option
+ */
+function getDisabled(option: string | Option): boolean {
+	if (typeof option === 'string' || option.disabled === undefined) {
+		return disabled.value
+	}
+	return option.disabled
 }
+
+const localModelValue = computed({
+	get: () => {
+		return typeof props.modelValue === 'object'
+			? (props.modelValue as Record<string, unknown>)?.[props.valueKey]
+			: props.modelValue
+	},
+	set: (newValue) => {
+		// find option object if useObject prop is true
+		const valueObject = props.useObject
+			? props.options?.find(
+					(option) => (option as Option)[props.valueKey] === newValue
+			  )
+			: undefined
+		// use valueObject if exist or the target value
+		emit('update:modelValue', valueObject ?? newValue)
+	}
+})
 </script>
+
+<template>
+	<div :class="bemCssClasses">
+		<label v-if="label" :for="hasId">{{ label }}</label>
+		<!-- #region native select -->
+		<div class="vv-select__wrapper">
+			<slot name="icon-left">
+				<vv-icon v-if="iconLeft" :name="iconLeft" />
+			</slot>
+			<select
+				:id="hasId"
+				v-model="localModelValue"
+				v-bind="hasAttrs"
+				:disabled="isDisabled"
+				:required="required">
+				<option v-if="placeholder" :value="undefined" disabled>
+					{{ placeholder }}
+				</option>
+				<option
+					v-for="(option, index) in options"
+					:key="index"
+					:disabled="getDisabled(option)"
+					:value="getValue(option)">
+					{{ getLabel(option) }}
+				</option>
+			</select>
+			<slot name="icon-right">
+				<vv-icon v-if="iconRight" :name="iconRight" />
+			</slot>
+		</div>
+		<!-- #endregion native select -->
+		<HintSlot :id="hasDescribedBy" class="vv-select__hint" />
+	</div>
+</template>

package/src/components/VvNativeSelect/{VvNativeSelect.ts → index.ts}

@@ -7,10 +7,11 @@ import {
 	DisabledProps,
 	ReadonlyProps,
 	ModifiersProps
-} from '../../props'
+} from '@/props'
 
 export interface Option {
-	[key: string]: any
+	[key: string]: unknown
+	disabled?: boolean
 }
 
 export const VvNativeSelectProps = {
@@ -22,16 +23,28 @@ export const VvNativeSelectProps = {
 	...ReadonlyProps,
 	...ModifiersProps,
 	/**
-	 * modelValue can be an Object, a String or an Array of Object/String
+	 * Select id
+	 */
+	id: [String, Number],
+	/**
+	 * Select name
+	 */
+	name: { type: String, required: true },
+	/**
+	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
 	 */
 	modelValue: {
-		type: [String, Object],
-		required: true
+		type: [String, Number, Boolean, Object, Array],
+		default: undefined
 	},
 	/**
-	 * Select input label
+	 * Select label
 	 */
 	label: String,
+	/**
+	 * Select required
+	 */
+	required: Boolean,
 	/**
 	 * Select input placeholder
 	 */
@@ -66,5 +79,11 @@ export const VvNativeSelectProps = {
 	/**
 	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-native-select--'
 	 */
-	modifiers: [String, Array]
+	modifiers: [String, Array],
+	/**
+	 * Sequential keyboard navigation
+	 */
+	tabindex: { type: [String, Number], default: 0 }
 }
+
+export const VvNativeSelectEmits = ['update:modelValue']

package/src/components/VvProgress/VvProgress.vue

@@ -1,34 +1,33 @@
-<template>
-	<progress ref="progress" aria-label="progressbar" 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'
+import { useBemModifiers } from '@/composables/useModifiers'
+import { VvProgressProps } from '@/components/VvProgress'
 
-//Props, emits, slots, attrs
+// props
 const props = defineProps(VvProgressProps)
+const { value, max, ariaLabel } = toRefs(props)
+const indeterminate = computed(() => props.value === undefined)
 
-// data
-const { modifiers } = toRefs(props)
-
-//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>