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

package/src/components/VvRadio/VvRadio.vue

@@ -1,130 +1,103 @@
-<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 { computed, ref, useSlots } from 'vue'
+import { contains, equals, removeFromList } 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
+// props, emit and slots
 const props = defineProps(VvRadioProps)
 const emit = defineEmits(VvRadioEvents)
-const attrs = useAttrs()
+const slots = useSlots()
 
-//Data
-const { disabled, readonly, modelValue, valid, error } = toRadioInputRefs(
+// data
+const { disabled, readonly, modelValue, valid, error } = useGroupProps(
 	props,
 	emit
 )
 
-//Template References
+// template refs
 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)
-})
-
-// #region FOCUS
-const { focused } = useComponentFocus(input, emit)
-// #endregion FOCUS
-
-//Styles & Bindings
-const { bemCssClasses: bemRadioClass } = useBemModifiers('vv-input-radio', {
-	valid,
-	invalid: error
-})
-const { bemCssClasses: bemInputRadioClass } = useBemModifiers(
-	'vv-input-radio__input',
-	{
-		checked: isChecked,
-		disabled,
-		readonly
-	}
+// computed
+const hasId = computed(() =>
+	props.id !== undefined ? String(props.id) : undefined
 )
-const radioClass = computed(() => {
-	const { class: cssClass } = attrs
-	return {
-		class: cssClass,
-		...bemRadioClass.value
+const isDisabled = computed(() => disabled.value || readonly.value)
+const hasTabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
+const isInvalid = computed(() => {
+	if (props.error === true) {
+		return true
 	}
-})
-const radioInputClass = computed(() => {
-	return {
-		'focus-visible': focused.value,
-		...bemInputRadioClass.value
+	if (props.valid === true) {
+		return false
 	}
+	return undefined
 })
-const radioAttrs = computed(() => {
-	const { id, name, style } = attrs
-	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
-		k.startsWith('data-')
-	)
-	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-')
-	)
-	return {
-		'aria-label': name,
-		'aria-checked': isChecked.value,
-		...dataAttrs
+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 = newValue
+				? [...modelValue.value, props.value]
+				: removeFromList(props.value, modelValue.value)
+			return
+		}
+		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: error,
+	disabled,
+	readonly
+})
 
-<script lang="ts">
-export default {
-	inheritAttrs: false
-}
+// hint
+const { HintSlot } = HintSlotFactory(props, 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="hasTabindex"
+			:aria-invalid="isInvalid" />
+		<slot :value="modelValue">
+			{{ label }}
+		</slot>
+		<HintSlot class="vv-radio__hint" :params="{ value: modelValue }" />
+	</label>
+</template>

package/src/components/VvRadio/index.ts

@@ -0,0 +1,78 @@
+import { type ExtractPropTypes, type Ref, toRefs } from 'vue'
+import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
+import { ValidProps, ErrorProps, HintProps } from '@/props'
+import { useInjectedGroupState } from '@/composables/group/useInjectedGroupState'
+import { VV_RADIO_GROUP } from '@/constants'
+
+export const VvRadioProps = {
+	...ValidProps,
+	...ErrorProps,
+	...HintProps,
+	/**
+	 * Input id
+	 */
+	id: [String, Number],
+	/**
+	 * Input name
+	 */
+	name: { type: String, required: true },
+	/**
+	 * Input value
+	 */
+	value: [String, Number, Boolean],
+	/**
+	 * Input value
+	 */
+	modelValue: [Object, Number, Boolean, String],
+	/**
+	 * Input name
+	 */
+	label: String,
+	/**
+	 * If true, the input will be disabled
+	 */
+	disabled: Boolean,
+	/**
+	 * If true, the input will be readonly
+	 */
+	readonly: Boolean,
+	/**
+	 * Sequential keyboard navigation
+	 */
+	tabindex: { type: [String, Number], default: 0 }
+}
+
+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 { group, isInGroup, getGroupOrLocalRef } =
+		useInjectedGroupState<IInputGroupState>(VV_RADIO_GROUP)
+
+	// local props
+	const { valid, error } = toRefs(props)
+
+	// global props
+	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
+	const readonly = getGroupOrLocalRef('readonly', props) as Ref<boolean>
+	const disabled = getGroupOrLocalRef('disabled', props) as Ref<boolean>
+
+	return {
+		// local props
+		valid,
+		error,
+		// global props
+		group,
+		isInGroup,
+		modelValue,
+		readonly,
+		disabled
+	}
+}

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -1,52 +1,36 @@
-<template>
-	<fieldset :class="groupClass">
-		<legend v-if="label" v-text="label" />
-		<div class="vv-input-radio-group__wrapper">
-			<!-- #region options set up -->
-			<template v-if="options.length > 0">
-				<vv-radio
-					v-for="(o, oIndex) in options"
-					:key="oIndex"
-					v-bind="getOptionProps(o, oIndex)" />
-			</template>
-			<!-- #endregion options set up -->
-			<!-- #region default -->
-			<slot v-else />
-			<!-- #endregion default -->
-		</div>
-		<!-- @slot error,valid,hint,loading vanno vanno qua -->
-		<HintSlot class="vv-input-radio-group__hint" />
-	</fieldset>
-</template>
+<script lang="ts">
+export default {
+	name: 'VvRadioGroup'
+}
+</script>
 
 <script setup lang="ts">
 import { useSlots, computed, toRefs } from 'vue'
 import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
-import { VvRadioGroupProps, VvRadioGroupEvents } from './VvRadioGroup'
-
-//Composables
 import { useVModel } from '@vueuse/core'
-import { useProvideGroupState } from '../../composables/group/useProvideGroupState'
-import { useOptions } from '../../composables/options/useOptions'
+import { useProvideGroupState } from '@/composables/group/useProvideGroupState'
+import { useOptions } from '@/composables/options/useOptions'
 import { useBemModifiers } from '@/composables/useModifiers'
+import { VV_RADIO_GROUP } from '@/constants'
+import { HintSlotFactory } from '@/components/common/HintSlot'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import {
+	VvRadioGroupProps,
+	VvRadioGroupEvents
+} from '@/components/VvRadioGroup'
 
-//Constants
-import { VV_RADIO_GROUP } from '../../constants'
-
-//Components
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-import { HintSlotFactory } from '../common/HintSlot'
-
-//Props, Emits, Slots e Attrs
-const emit = defineEmits(VvRadioGroupEvents)
+// props, emit and slots
 const props = defineProps(VvRadioGroupProps)
+const emit = defineEmits(VvRadioGroupEvents)
 const slots = useSlots()
 
-//Data
+// hint
+const { HintSlot } = HintSlotFactory(props, slots)
+
+// data
 const modelValue = useVModel(props, 'modelValue', emit)
 const { disabled, readonly, vertical, valid, error } = toRefs(props)
 
-// #region group
 const groupState: IInputGroupState = {
 	key: VV_RADIO_GROUP,
 	modelValue,
@@ -54,27 +38,43 @@ const groupState: IInputGroupState = {
 	readonly
 }
 useProvideGroupState(groupState)
-// #endregion group
 
-//OPTIONS
 const { getOptionLabel, getOptionValue } = useOptions(props)
 
-//Styles & Bindings
-const { bemCssClasses: groupClass } = useBemModifiers('vv-input-radio-group', {
+// styles
+const { bemCssClasses: groupClass } = useBemModifiers('vv-radio-group', {
 	horizontal: computed(() => !vertical.value),
 	valid,
 	invalid: error
 })
 
-//Methods
-function getOptionProps(option: any, oIndex: number) {
+// methods
+const getOptionProps = (option: unknown, index: number) => {
 	return {
-		id: `${props.name}_opt${oIndex}`,
+		id: `${props.name}_opt${index}`,
 		name: props.name,
 		label: getOptionLabel(option),
 		value: getOptionValue(option)
 	}
 }
-
-const HintSlot = HintSlotFactory(props, slots)
 </script>
+
+<template>
+	<fieldset :class="groupClass">
+		<legend v-if="label" v-text="label" />
+		<div class="vv-radio-group__wrapper">
+			<!-- #region options -->
+			<template v-if="options.length > 0">
+				<vv-radio
+					v-for="(o, oIndex) in options"
+					:key="oIndex"
+					v-bind="getOptionProps(o, oIndex)" />
+			</template>
+			<!-- #endregion -->
+			<!-- #region default -->
+			<slot v-else />
+			<!-- #endregion -->
+		</div>
+		<HintSlot class="vv-radio-group__hint" />
+	</fieldset>
+</template>

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

@@ -1,4 +1,4 @@
-import { ValidProps, ErrorProps, OptionsProps, HintProps } from '../../props'
+import { ValidProps, ErrorProps, OptionsProps, HintProps } from '@/props'
 
 export const VvRadioGroupEvents = ['update:modelValue']
 

package/src/components/VvSelect/VvSelect.vue

@@ -1,68 +1,38 @@
-<template>
-	<div :id="id" :class="selectClasses">
-		<label v-if="label" for="select">{{ label }}</label>
-		<details
-			ref="dropdown"
-			role="list"
-			class="vv-select__wrapper"
-			@click="disabled || readonly ? $event.preventDefault() : null"
-			@keyup.esc="dropdown.open = false"
-			@toggle="onToggle">
-			<summary
-				class="vv-select__input"
-				aria-haspopup="listbox"
-				@keyup.space="searchable ? $event.preventDefault() : null">
-				<!-- #region search input -->
-				<template v-if="searchable && dropdownOpen">
-					<input
-						ref="inputSearch"
-						v-model="searchText"
-						:placeholder="searchPlaceholder" />
-				</template>
-				<!-- #endregion search input -->
-				<!-- #region label of selected value/s -->
-				<template v-else>
-					{{ labelValue || placeholder }}
-				</template>
-				<!-- #endregion label of selected value/s -->
-			</summary>
-			<VvDropdown
-				v-bind="{
-					...props,
-					options: currentOptions
-				}"
-				@update:model-value="onInput" />
-		</details>
-		<HintSlot class="vv-select__hint" />
-	</div>
-</template>
+<script lang="ts">
+export default {
+	name: 'VvSelect'
+}
+</script>
 
 <script setup lang="ts">
-import type { Option } from '../VvDropdown/VvDropdown'
 import { computed, ref, toRefs, useSlots, watch } from 'vue'
+import { nanoid } from 'nanoid'
 import { onClickOutside, refDebounced, useFocus } from '@vueuse/core'
-import { v4 as uuidv4 } from 'uuid'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import { VvSelectProps } from './VvSelect'
-import HintSlotFactory from '../common/HintSlot'
-import VvDropdown from '../VvDropdown/VvDropdown.vue'
-import { useBemModifiers } from '../../composables/useModifiers'
+import type { Option } from '@/components/VvDropdown'
+import { isEmpty, filterArray } from '@/utils/ObjectUtilities'
+import { useBemModifiers } from '@/composables/useModifiers'
+import HintSlotFactory from '@/components/common/HintSlot'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import VvNativeSelect from '@/components/VvNativeSelect/VvNativeSelect.vue'
+import { VvSelectProps } from '@/components/VvSelect'
 
 const props = defineProps(VvSelectProps)
 const slots = useSlots()
+
 const emit = defineEmits(['update:modelValue', 'change:search'])
 
-//Hint component
-const HintSlot = HintSlotFactory(props, slots)
+// hint slot
+const { HintSlot } = HintSlotFactory(props, slots)
 
-// html ref
+// template ref
 const dropdown = ref()
 const inputSearch = ref()
-// autofocus input search
+
+// focus state
 useFocus(inputSearch, { initialValue: true })
 
 // data
-const id = uuidv4()
+const id = nanoid()
 const searchText = ref('')
 const debouncedSearchText = refDebounced(
 	searchText,
@@ -80,14 +50,21 @@ const {
 	error
 } = toRefs(props)
 
-// watch
 // emit on change search text
 watch(debouncedSearchText, () =>
 	emit('change:search', debouncedSearchText.value)
 )
 
-//Styles & css classes modifiers
-const { bemCssClasses: selectClasses } = useBemModifiers('vv-select', {
+// dirty
+const isDirty = computed(() => !isEmpty(props.modelValue))
+
+// tabindex
+const hasTabindex = computed(() => {
+	return disabled.value || readonly.value ? -1 : props.tabindex
+})
+
+// styles
+const { bemCssClasses } = useBemModifiers('vv-select', {
 	modifiers,
 	disabled,
 	loading,
@@ -96,12 +73,10 @@ const { bemCssClasses: selectClasses } = useBemModifiers('vv-select', {
 	iconRight,
 	valid,
 	invalid: error,
-	dirty: computed(() => ObjectUtilities.isNotEmpty(props.modelValue))
+	dirty: isDirty
 })
 
-// computed
-
-// Check if options are objects
+// check if options are objects
 const isOptionsObjects = computed(() =>
 	props.options?.every((option) => typeof option === 'object')
 )
@@ -119,9 +94,12 @@ const filteredOptions = computed(() => {
 				.toLowerCase()
 				.includes(debouncedSearchText.value.toLowerCase().trim())
 		}
-		return option[props.labelKey]
-			.toLowerCase()
-			.includes(debouncedSearchText.value.toLowerCase().trim())
+		if (typeof option[props.labelKey] === 'string') {
+			return (option[props.labelKey] as string)
+				.toLowerCase()
+				.includes(debouncedSearchText.value.toLowerCase().trim())
+		}
+		return false
 	})
 })
 
@@ -133,12 +111,12 @@ const labelValue = computed(() => {
 	// #region multiple mode
 	if (
 		props.multiple &&
-		props.modelValue?.length &&
-		Array.isArray(props.modelValue)
+		Array.isArray(props.modelValue) &&
+		props.modelValue?.length
 	) {
 		if (isOptionsObjects.value) {
 			// filter options by selected values
-			return ObjectUtilities.filterArray<Option>(
+			return filterArray<Option>(
 				props.options as Option[],
 				props.modelValue,
 				props.valueKey
@@ -188,7 +166,56 @@ function onInput(value: typeof props.modelValue) {
 	if (dropdown.value && !props.multiple) {
 		dropdown.value.open = false
 	}
-
 	emit('update:modelValue', value)
 }
 </script>
+
+<template>
+	<div v-if="!native" :id="id" :class="bemCssClasses">
+		<label
+			v-if="label"
+			:id="`${id}-label`"
+			:for="searchable && dropdownOpen ? `${id}-input` : undefined"
+			>{{ label }}</label
+		>
+		<details
+			ref="dropdown"
+			class="vv-select__wrapper"
+			@click="disabled || readonly ? $event.preventDefault() : null"
+			@keyup.esc="dropdown.open = false"
+			@toggle="onToggle">
+			<summary
+				class="vv-select__input"
+				:tabindex="hasTabindex"
+				@keyup.space="searchable ? $event.preventDefault() : null">
+				<!-- #region search input -->
+				<template v-if="searchable && dropdownOpen">
+					<input
+						:id="`${id}-input`"
+						ref="inputSearch"
+						v-model="searchText"
+						role="combobox"
+						:placeholder="searchPlaceholder" />
+				</template>
+				<!-- #endregion search input -->
+				<!-- #region label of selected value/s -->
+				<template v-else>
+					{{ labelValue || placeholder }}
+				</template>
+				<!-- #endregion label of selected value/s -->
+			</summary>
+			<VvDropdown
+				:id="`${id}-dropdown`"
+				v-bind="{
+					...props,
+					options: currentOptions
+				}"
+				@update:model-value="onInput" />
+		</details>
+		<HintSlot class="vv-select__hint" />
+	</div>
+	<VvNativeSelect
+		v-else
+		v-bind="props"
+		@update:model-value="emit('update:modelValue', $event)" />
+</template>

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue'
-import type { Option } from '../VvDropdown/VvDropdown'
+import type { Option } from '@/components/VvDropdown'
 import {
 	ValidProps,
 	ErrorProps,
@@ -8,7 +8,7 @@ import {
 	DisabledProps,
 	ReadonlyProps,
 	ModifiersProps
-} from '../../props'
+} from '@/props'
 
 export const VvSelectProps = {
 	...ValidProps,
@@ -19,9 +19,12 @@ export const VvSelectProps = {
 	...ReadonlyProps,
 	...ModifiersProps,
 	/**
-	 * modelValue can be an Object, a String or an Array of Object/String
+	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
 	 */
-	modelValue: [String, Array, Object],
+	modelValue: {
+		type: [String, Number, Boolean, Object, Array],
+		default: undefined
+	},
 	/**
 	 * Select input label
 	 */
@@ -87,5 +90,13 @@ export const VvSelectProps = {
 	/**
 	 * Icon name of icon in right position
 	 */
-	iconRight: String
+	iconRight: String,
+	/**
+	 * Icon name of icon in right position
+	 */
+	native: Boolean,
+	tabindex: {
+		type: [Number, String],
+		default: 0
+	}
 }