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

package/src/components/VvRadio/index.ts

@@ -0,0 +1,40 @@
+import type { ExtractPropTypes, Ref } from 'vue'
+import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
+import { CheckboxRadioProps } from '@/props'
+import { useInjectedGroupState } from '@/composables/group/useInjectedGroupState'
+import { VV_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 { group, isInGroup, getGroupOrLocalRef } =
+		useInjectedGroupState<IInputGroupState>(VV_RADIO_GROUP)
+
+	// global props
+	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
+	const readonly = getGroupOrLocalRef('readonly', props) as Ref<boolean>
+	const disabled = getGroupOrLocalRef('disabled', props) as Ref<boolean>
+	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
+	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
+
+	return {
+		// global props
+		group,
+		isInGroup,
+		modelValue,
+		readonly,
+		disabled,
+		valid,
+		invalid,
+	}
+}

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -1,80 +1,87 @@
-<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 { useBemModifiers } from '@/composables/useModifiers'
-
-//Constants
-import { VV_RADIO_GROUP } from '../../constants'
+	import type { Option } from '@/types/generic'
+	import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
+	import { useSlots, computed, toRefs } from 'vue'
+	import { useVModel } from '@vueuse/core'
+	import { useProvideGroupState } from '@/composables/group/useProvideGroupState'
+	import { useOptions } from '@/composables/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'
 
-//Components
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-import { HintSlotFactory } from '../common/HintSlot'
+	// props, emit and slots
+	const props = defineProps(VvRadioGroupProps)
+	const emit = defineEmits(VvRadioGroupEvents)
+	const slots = useSlots()
 
-//Props, Emits, Slots e Attrs
-const emit = defineEmits(VvRadioGroupEvents)
-const props = defineProps(VvRadioGroupProps)
-const slots = useSlots()
+	// data
+	const modelValue = useVModel(props, 'modelValue', emit)
+	const { disabled, readonly, vertical, valid, invalid } = toRefs(props)
 
-//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,
-	disabled,
-	readonly
-}
-useProvideGroupState(groupState)
-// #endregion group
+	const groupState: IInputGroupState = {
+		key: VV_RADIO_GROUP,
+		modelValue,
+		disabled,
+		readonly,
+		valid,
+		invalid,
+	}
+	useProvideGroupState(groupState)
 
-//OPTIONS
-const { getOptionLabel, getOptionValue } = useOptions(props)
+	// options
+	const { getOptionLabel, getOptionValue } = useOptions(props)
 
-//Styles & Bindings
-const { bemCssClasses: groupClass } = useBemModifiers('vv-input-radio-group', {
-	horizontal: computed(() => !vertical.value),
-	valid,
-	invalid: error
-})
+	// styles
+	const { bemCssClasses: groupClass } = useBemModifiers('vv-radio-group', {
+		disabled,
+		readonly,
+		horizontal: computed(() => !vertical.value),
+		valid,
+		invalid,
+	})
 
-//Methods
-function getOptionProps(option: any, oIndex: number) {
-	return {
-		id: `${props.name}_opt${oIndex}`,
-		name: props.name,
-		label: getOptionLabel(option),
-		value: getOptionValue(option)
+	// methods
+	const getOptionProps = (option: string | Option, index: number) => {
+		return {
+			id: `${props.name}_opt${index}`,
+			name: props.name,
+			label: getOptionLabel(option),
+			value: getOptionValue(option),
+		}
 	}
-}
 
-const HintSlot = HintSlotFactory(props, slots)
+	// hint
+	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="(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" />
+	</fieldset>
+</template>

package/src/components/VvRadioGroup/index.ts

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

package/src/components/VvSelect/VvSelect.vue

@@ -1,194 +1,195 @@
-<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 { 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'
-
-const props = defineProps(VvSelectProps)
-const slots = useSlots()
-const emit = defineEmits(['update:modelValue', 'change:search'])
-
-//Hint component
-const HintSlot = HintSlotFactory(props, slots)
-
-// html ref
-const dropdown = ref()
-const inputSearch = ref()
-// autofocus input search
-useFocus(inputSearch, { initialValue: true })
-
-// data
-const id = uuidv4()
-const searchText = ref('')
-const debouncedSearchText = refDebounced(
-	searchText,
-	Number(props.debounceSearch)
-)
-const dropdownOpen = ref(false)
-const {
-	modifiers,
-	disabled,
-	readonly,
-	loading,
-	iconLeft,
-	iconRight,
-	valid,
-	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', {
-	modifiers,
-	disabled,
-	loading,
-	readonly,
-	iconLeft,
-	iconRight,
-	valid,
-	invalid: error,
-	dirty: computed(() => ObjectUtilities.isNotEmpty(props.modelValue))
-})
-
-// computed
-
-// Check if options are objects
-const isOptionsObjects = computed(() =>
-	props.options?.every((option) => typeof option === 'object')
-)
-
-// current options, filtered or prop options
-const currentOptions = computed(() =>
-	props.searchable ? filteredOptions.value : props.options
-)
-
-// options filtered by search text
-const filteredOptions = computed(() => {
-	return props.options?.filter((option) => {
-		if (typeof option === 'string') {
-			return option
-				.toLowerCase()
-				.includes(debouncedSearchText.value.toLowerCase().trim())
+	import type { Option } from '@/types/generic'
+	import {
+		computed,
+		toRefs,
+		useSlots,
+		ref,
+		watch,
+		type SelectHTMLAttributes,
+	} from 'vue'
+	import { nanoid } from 'nanoid'
+	import { isEmpty } from '@/utils/ObjectUtilities'
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import { useComponentIcon } from '@/composables/useComponentIcons'
+	import { useOptions } from '@/composables/useOptions'
+	import { useComponentFocus } from '@/composables/useComponentFocus'
+	import VvIcon from '@/components/VvIcon/VvIcon.vue'
+	import HintSlotFactory from '@/components/common/HintSlot'
+	import { VvSelectProps, VvSelectEmits } from '@/components/VvSelect'
+	import { useElementVisibility } from '@vueuse/core'
+
+	// props, emit and slots
+	const props = defineProps(VvSelectProps)
+	const emit = defineEmits(VvSelectEmits)
+	const slots = useSlots()
+
+	// template refs
+	const select = ref()
+
+	// hint
+	const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots)
+
+	// data
+	const {
+		modifiers,
+		disabled,
+		readonly,
+		loading,
+		icon,
+		iconPosition,
+		invalid,
+		valid,
+		floating,
+		multiple,
+	} = toRefs(props)
+
+	// computed
+	const hasId = computed(() => String(props.id || nanoid()))
+	const hasDescribedBy = computed(() => `${hasId.value}-hint`)
+
+	// focus
+	const { focused } = useComponentFocus(select, emit)
+
+	// visibility
+	const isVisible = useElementVisibility(select)
+	watch(isVisible, (newValue) => {
+		if (newValue && props.autofocus) {
+			focused.value = true
 		}
-		return option[props.labelKey]
-			.toLowerCase()
-			.includes(debouncedSearchText.value.toLowerCase().trim())
 	})
-})
-
-/**
- * Compute the label to show to the user
- * Check if is multiple mode, object mode or "string" mode
- */
-const labelValue = computed(() => {
-	// #region multiple mode
-	if (
-		props.multiple &&
-		props.modelValue?.length &&
-		Array.isArray(props.modelValue)
-	) {
-		if (isOptionsObjects.value) {
-			// filter options by selected values
-			return ObjectUtilities.filterArray<Option>(
-				props.options as Option[],
-				props.modelValue,
-				props.valueKey
-			)
-				.map((option) => option[props.labelKey])
-				.join(props.separator)
-		} else {
-			return props.modelValue.join(props.separator)
+
+	// icons
+	const { hasIcon, hasIconLeft, hasIconRight } = useComponentIcon(
+		icon,
+		iconPosition,
+	)
+
+	// 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.invalid === true) {
+			return true
 		}
-	}
-	// #endregion multiple mode
-
-	// #region single mode
-	const selectedOption = props.useObject
-		? props.modelValue
-		: props.options?.find((option) =>
-				typeof option === 'object'
-					? option[props.valueKey] == props.modelValue
-					: option == props.modelValue
-		  )
-
-	return typeof selectedOption === 'object'
-		? selectedOption?.[props.labelKey]
-		: selectedOption
-	// #endregion single mode
-})
-
-// methods
-
-// close dropdown on click outside
-onClickOutside(dropdown, () => {
-	dropdown.value.open = false
-})
-
-// Function triggered on toggle dropdown (open/close)
-function onToggle(event: Event) {
-	const target = event.target as HTMLDetailsElement
-	dropdownOpen.value = target.open
-}
-
-/**
- * Function triggered on input of checkbox or radio (multple or single mode)
- * @param event on input event (checkbox or radio input)
- */
-function onInput(value: typeof props.modelValue) {
-	// close dropdown in single mode
-	if (dropdown.value && !props.multiple) {
-		dropdown.value.open = false
+		if (props.valid === true) {
+			return false
+		}
+		return undefined
+	})
+
+	// styles
+	const { bemCssClasses } = useBemModifiers('vv-select', {
+		modifiers,
+		valid,
+		invalid,
+		loading,
+		disabled,
+		readonly,
+		iconLeft: hasIconLeft,
+		iconRight: hasIconRight,
+		dirty: isDirty,
+		focus: focused,
+		floating,
+		multiple,
+	})
+
+	// attrs
+	const hasAttrs: SelectHTMLAttributes = computed(() => {
+		return {
+			name: props.name,
+			tabindex: hasTabindex.value,
+			disabled: isDisabled.value,
+			required: props.required,
+			size: props.size,
+			autocomplete: props.autocomplete,
+			multiple: props.multiple,
+			'aria-invalid': isInvalid.value,
+			'aria-describedby':
+				!hasInvalid.value && hasHint.value
+					? hasDescribedBy.value
+					: undefined,
+			'aria-errormessage': hasInvalid.value
+				? hasDescribedBy.value
+				: undefined,
+		}
+	})
+
+	const { getOptionLabel, getOptionValue } = useOptions(props)
+
+	/**
+	 * 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
 	}
 
-	emit('update:modelValue', value)
-}
+	const localModelValue = computed({
+		get: () => {
+			return props.modelValue
+		},
+		set: (newValue) => {
+			if (Array.isArray(newValue)) {
+				newValue = newValue.filter((item) => item !== undefined)
+			}
+			emit('update:modelValue', newValue)
+		},
+	})
 </script>
+
+<template>
+	<div :class="bemCssClasses">
+		<label v-if="label" :for="hasId">{{ label }}</label>
+		<!-- #region native select -->
+		<div class="vv-select__wrapper">
+			<slot name="before">
+				<vv-icon v-if="hasIconLeft" v-bind="hasIcon" />
+			</slot>
+			<select
+				:id="hasId"
+				ref="select"
+				v-model="localModelValue"
+				v-bind="hasAttrs"
+			>
+				<option
+					v-if="placeholder"
+					:value="undefined"
+					:disabled="!unselectable"
+					:hidden="!unselectable"
+				>
+					{{ placeholder }}
+				</option>
+				<option
+					v-for="(option, index) in options"
+					:key="index"
+					:disabled="getDisabled(option)"
+					:value="getOptionValue(option)"
+				>
+					{{ getOptionLabel(option) }}
+				</option>
+			</select>
+			<slot name="after">
+				<vv-icon v-if="hasIconRight" v-bind="hasIcon" />
+			</slot>
+		</div>
+		<!-- #endregion native select -->
+		<HintSlot :id="hasDescribedBy" class="vv-select__hint" />
+	</div>
+</template>

package/src/components/VvSelect/index.ts

@@ -0,0 +1,71 @@
+import {
+	ValidProps,
+	InvalidProps,
+	HintProps,
+	LoadingProps,
+	DisabledProps,
+	ReadonlyProps,
+	ModifiersProps,
+	TabindexProps,
+	OptionsProps,
+	IconProps,
+	IdNameProps,
+	FloatingProps,
+	UnselectableProps,
+	AutofocusProps,
+	AutocompleteProps,
+} from '@/props'
+
+export const VvSelectProps = {
+	...IdNameProps,
+	...AutofocusProps,
+	...AutocompleteProps,
+	...TabindexProps,
+	...ValidProps,
+	...InvalidProps,
+	...HintProps,
+	...LoadingProps,
+	...DisabledProps,
+	...ReadonlyProps,
+	...ModifiersProps,
+	...OptionsProps,
+	...IconProps,
+	...FloatingProps,
+	...UnselectableProps,
+	/**
+	 * This Boolean attribute indicates that multiple options can be selected in the list.
+	 * If it is not specified, then only one option can be selected at a time.
+	 * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
+	 */
+	multiple: Boolean,
+	/**
+	 * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
+	 */
+	required: Boolean,
+	/**
+	 * If the control is presented as a scrolling list box (e.g. when multiple is specified),
+	 * this attribute represents the number of rows in the list that should be visible at one time.
+	 * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
+	 */
+	size: [String, Number],
+	/**
+	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+	 */
+	modelValue: {
+		type: [String, Number, Boolean, Object, Array],
+		default: undefined,
+	},
+	/**
+	 * <label> value for the select
+	 */
+	label: String,
+	/**
+	 * Select placeholder
+	 */
+	placeholder: String,
+}
+
+export const VvSelectEmits = ['update:modelValue', 'focus', 'blur']