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

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>

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

@@ -1,4 +1,4 @@
-import { ModifiersProps } from '../../props'
+import { ModifiersProps } from '@/props'
 
 export const VvProgressProps = {
 	...ModifiersProps,
@@ -6,7 +6,8 @@ export const VvProgressProps = {
 	 * Progress value
 	 */
 	value: {
-		type: [Number, String]
+		type: [Number, String],
+		default: undefined
 	},
 	/**
 	 * Progress max value
@@ -20,9 +21,5 @@ export const VvProgressProps = {
 	ariaLabel: {
 		type: String,
 		default: 'progress-bar'
-	},
-	/**
-	 * determinate attribute
-	 */
-	determinate: { type: Boolean, default: false }
+	}
 }