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

package/src/components/VvCard/VvCard.vue

@@ -1,5 +1,24 @@
+<script lang="ts">
+	export default {
+		name: 'VvCard',
+	}
+</script>
+
+<script setup lang="ts">
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import { VvCardProps } from '@/components/VvCard'
+
+	// props and attrs
+	const props = defineProps(VvCardProps)
+
+	// styles
+	const { bemCssClasses } = useBemModifiers('vv-card', {
+		modifiers: props.modifiers,
+	})
+</script>
+
 <template>
-	<article :class="cardClass" v-bind="cardAttrs">
+	<article :class="bemCssClasses">
 		<header v-if="$slots.header || title" class="vv-card__header">
 			<slot name="header">
 				{{ title }}
@@ -14,24 +33,3 @@
 		</footer>
 	</article>
 </template>
-
-<script setup lang="ts">
-import { toRefs, computed, useAttrs } from 'vue'
-import { VvCardProps } from './VvCard'
-
-//Components
-import { useBemModifiers } from '../../composables/useModifiers'
-
-//Props, Emits, attrs ...
-const props = defineProps(VvCardProps)
-const attrs = useAttrs()
-
-//Styles & bindings
-const { modifiers } = toRefs(props)
-const { bemCssClasses: cardClass } = useBemModifiers('vv-card', {
-	modifiers
-})
-const cardAttrs = computed(() => {
-	return attrs
-})
-</script>

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

@@ -1,4 +1,4 @@
 export const VvCardProps = {
 	title: String,
-	modifiers: [String, Array]
+	modifiers: [String, Array],
 }

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -0,0 +1,172 @@
+<script lang="ts">
+	export default {
+		name: 'VvCheckbox',
+	}
+</script>
+
+<script setup lang="ts">
+	import { computed, ref, useSlots, watchEffect, watch, onMounted } from 'vue'
+	import { nanoid } from 'nanoid'
+	import { contains, equals } from '@/utils/ObjectUtilities'
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import {
+		VvCheckboxProps,
+		VvCheckboxEvents,
+		useGroupProps,
+	} from '@/components/VvCheckbox'
+	import { HintSlotFactory } from '@/components/common/HintSlot'
+
+	// props, emits and slots
+	const props = defineProps(VvCheckboxProps)
+	const emit = defineEmits(VvCheckboxEvents)
+	const slots = useSlots()
+
+	// data
+	const {
+		disabled,
+		readonly,
+		valid,
+		invalid,
+		propsSwitch,
+		modelValue,
+		indeterminate,
+		isInGroup,
+	} = useGroupProps(props, emit)
+	const id = computed(() => String(props.id || nanoid()))
+	const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
+
+	// template ref
+	const input = ref()
+
+	// computed
+	const isBinary = computed(
+		() => props.uncheckedValue !== undefined && !isInGroup.value,
+	)
+	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(() => {
+		if (isBinary.value) {
+			return modelValue.value === props.value
+		}
+		return Array.isArray(modelValue.value)
+			? contains(props.value, modelValue.value)
+			: equals(props.value, modelValue.value)
+	})
+	const isIndeterminated = computed(() => {
+		if (indeterminate.value) {
+			return true
+		}
+		if (
+			!isChecked.value &&
+			isBinary.value &&
+			props.uncheckedValue !== modelValue.value
+		) {
+			return true
+		}
+		return false
+	})
+	const hasValue = computed(() => {
+		if (isBinary.value) {
+			return undefined
+		}
+		return ['string', 'number', 'boolean'].includes(typeof props.value)
+			? props.value
+			: true
+	})
+	const localModelValue = computed({
+		get() {
+			return isChecked.value
+		},
+		set(newValue) {
+			if (isBinary.value) {
+				modelValue.value = newValue ? props.value : props.uncheckedValue
+			} else if (Array.isArray(modelValue.value) || isInGroup.value) {
+				const toReturn = new Set(
+					Array.isArray(modelValue.value)
+						? modelValue.value
+						: modelValue.value !== undefined
+						? [modelValue.value]
+						: [],
+				)
+				if (newValue) {
+					toReturn.add(props.value)
+				} else {
+					toReturn.delete(props.value)
+				}
+				modelValue.value = [...toReturn]
+			} else {
+				modelValue.value = newValue ? props.value : undefined
+			}
+			emit('change', newValue)
+		},
+	})
+
+	// styles
+	const { bemCssClasses } = useBemModifiers('vv-checkbox', {
+		switch: propsSwitch,
+		valid,
+		invalid,
+		disabled,
+		readonly,
+		indeterminate,
+	})
+
+	watchEffect(() => {
+		if (isBinary.value && Array.isArray(modelValue.value)) {
+			// eslint-disable-next-line no-console
+			console.warn(
+				`[VvCheckbox] The model value is an array but the component is in binary mode.`,
+			)
+		}
+	})
+
+	// indeterminate
+	watch(
+		() => isIndeterminated.value,
+		(newValue) => {
+			if (newValue) {
+				input.value.indeterminate = true
+			} else {
+				input.value.indeterminate = false
+			}
+		},
+	)
+	onMounted(() => {
+		if (isIndeterminated.value) {
+			input.value.indeterminate = true
+		}
+	})
+
+	// hint
+	const { HintSlot } = HintSlotFactory(props, slots)
+</script>
+
+<template>
+	<label :class="bemCssClasses" :for="id">
+		<input
+			:id="id"
+			ref="input"
+			v-model="localModelValue"
+			type="checkbox"
+			class="vv-checkbox__input"
+			:name="name"
+			:disabled="isDisabled"
+			:value="hasValue"
+			:tabindex="tabindex"
+			:aria-invalid="isInvalid"
+		/>
+		<!-- @slot Use this slot for check label -->
+		<slot :value="modelValue">
+			{{ label }}
+		</slot>
+		<HintSlot class="vv-checkbox__hint" :params="{ value: modelValue }" />
+	</label>
+</template>

package/src/components/VvCheckbox/index.ts

@@ -0,0 +1,60 @@
+import { type ExtractPropTypes, type Ref, toRefs } from 'vue'
+import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
+import { useInjectedGroupState } from '@/composables/group/useInjectedGroupState'
+import { CheckboxRadioProps } from '@/props'
+import { VV_CHECK_GROUP } from '@/constants'
+
+export const VvCheckboxProps = {
+	...CheckboxRadioProps,
+	/**
+	 * If true, the input will be indeterminated
+	 */
+	indeterminate: Boolean,
+	/**
+	 * Value associated with the unchecked state
+	 */
+	uncheckedValue: [String, Number, Boolean],
+	/**
+	 * If true, the input will be displayed as a switch
+	 */
+	switch: Boolean,
+}
+
+export const VvCheckboxEvents = ['click', 'update:modelValue', 'change', 'blur']
+
+export type VvCheckboxPropsTypes = ExtractPropTypes<typeof VvCheckboxProps>
+
+/**
+ * Merges local and group props
+ */
+export function useGroupProps(
+	props: VvCheckboxPropsTypes,
+	emit: (event: (typeof VvCheckboxEvents)[number], value: unknown) => void,
+) {
+	const { group, isInGroup, getGroupOrLocalRef } =
+		useInjectedGroupState<IInputGroupState>(VV_CHECK_GROUP)
+
+	// local props
+	const { switch: propsSwitch, indeterminate } = 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>
+	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
+	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
+
+	return {
+		// local props
+		propsSwitch,
+		indeterminate,
+		// global props
+		group,
+		isInGroup,
+		modelValue,
+		readonly,
+		disabled,
+		valid,
+		invalid,
+	}
+}

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -0,0 +1,85 @@
+<script lang="ts">
+	export default {
+		name: 'VvCheckboxGroup',
+	}
+</script>
+
+<script setup lang="ts">
+	import type { Option } from '@/types/generic'
+	import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
+	import { useSlots, computed, toRefs } from 'vue'
+	import { VV_CHECK_GROUP } from '@/constants'
+	import { useVModel } from '@vueuse/core'
+	import { useProvideGroupState } from '@/composables/group/useProvideGroupState'
+	import { useOptions } from '@/composables/useOptions'
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import { HintSlotFactory } from '@/components/common/HintSlot'
+	import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+	import {
+		VvCheckboxGroupProps,
+		VvCheckboxGroupEvents,
+	} from '@/components/VvCheckboxGroup'
+
+	// props, emit and slots
+	const props = defineProps(VvCheckboxGroupProps)
+	const emit = defineEmits(VvCheckboxGroupEvents)
+	const slots = useSlots()
+
+	// data
+	const modelValue = useVModel(props, 'modelValue', emit)
+	const { disabled, readonly, vertical, valid, invalid } = toRefs(props)
+
+	const groupState: IInputGroupState = {
+		key: VV_CHECK_GROUP,
+		modelValue,
+		disabled,
+		readonly,
+		valid,
+		invalid,
+	}
+	useProvideGroupState(groupState)
+
+	// options
+	const { getOptionLabel, getOptionValue } = useOptions(props)
+
+	// stypes
+	const { bemCssClasses: hasClass } = useBemModifiers('vv-checkbox-group', {
+		disabled,
+		readonly,
+		horizontal: computed(() => !vertical.value),
+		valid,
+		invalid,
+	})
+
+	// 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)
+</script>
+
+<template>
+	<fieldset :class="hasClass">
+		<legend v-if="label" v-text="label" />
+		<div class="vv-checkbox-group__wrapper">
+			<!-- #region options set up -->
+			<template v-if="options.length > 0">
+				<vv-checkbox
+					v-for="(option, index) in options"
+					:key="index"
+					v-bind="getOptionProps(option, index)"
+				/>
+			</template>
+			<!-- #endregion options set up -->
+			<!-- #region default -->
+			<slot v-else />
+			<!-- #endregion default -->
+		</div>
+		<HintSlot class="vv-checkbox-group__hint" />
+	</fieldset>
+</template>

package/src/components/VvCheckboxGroup/index.ts

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

package/src/components/VvCombobox/VvCombobox.vue

@@ -0,0 +1,261 @@
+<script lang="ts">
+	export default {
+		name: 'VvCombobox',
+	}
+</script>
+
+<script setup lang="ts">
+	import { computed, ref, toRefs, useSlots, watch } from 'vue'
+	import { nanoid } from 'nanoid'
+	import { onClickOutside, refDebounced } from '@vueuse/core'
+	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 VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+	import VvIcon from '@/components/VvIcon/VvIcon.vue'
+	import VvSelect from '@/components/VvSelect/VvSelect.vue'
+	import HintSlotFactory from '@/components/common/HintSlot'
+	import { VvComboboxProps, VvComboboxEvents } from '@/components/VvCombobox'
+
+	// props, emit and slots
+	const props = defineProps(VvComboboxProps)
+	const emit = defineEmits(VvComboboxEvents)
+	const slots = useSlots()
+
+	// hint slot
+	const { HintSlot } = HintSlotFactory(props, slots)
+
+	// template ref
+	const dropdown = ref()
+	const inputSearch = ref()
+
+	// focus
+	const { focused } = useComponentFocus(dropdown, emit)
+
+	// data
+	const hasId = computed(() => String(props.id || nanoid()))
+	const searchText = ref('')
+	const debouncedSearchText = refDebounced(
+		searchText,
+		Number(props.debounceSearch),
+	)
+	const dropdownOpen = ref(false)
+	const {
+		icon,
+		iconPosition,
+		modifiers,
+		disabled,
+		readonly,
+		loading,
+		valid,
+		invalid,
+		floating,
+	} = toRefs(props)
+
+	// emit on change search text
+	watch(debouncedSearchText, () =>
+		emit('change:search', debouncedSearchText.value),
+	)
+
+	// icons
+	const { hasIcon, hasIconLeft, hasIconRight } = useComponentIcon(
+		icon,
+		iconPosition,
+	)
+
+	// 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,
+		readonly,
+		iconLeft: hasIconLeft,
+		iconRight: hasIconRight,
+		valid,
+		invalid,
+		dirty: isDirty,
+		focus: focused,
+		floating,
+	})
+
+	// current options, filtered or prop options
+	const hasOptions = computed(() =>
+		props.searchable ? filteredOptions.value : props.options,
+	)
+
+	const { getOptionLabel, getOptionValue } = useOptions(props)
+
+	// options filtered by search text
+	const filteredOptions = computed(() => {
+		return props.options?.filter((option) => {
+			return getOptionLabel(option)
+				.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 selectedOptions = computed(() => {
+		let selectedValues: Array<typeof props.modelValue> = []
+		if (Array.isArray(props.modelValue)) {
+			selectedValues = props.modelValue
+		} else if (props.modelValue) {
+			selectedValues = [props.modelValue]
+		}
+		return props.options.filter((option) =>
+			selectedValues.includes(getOptionValue(option)),
+		)
+	})
+
+	const hasLabel = computed(() => {
+		return selectedOptions.value
+			.map((option) => getOptionLabel(option))
+			.join(props.separator)
+	})
+
+	// 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
+		}
+		emit('update:modelValue', value)
+	}
+
+	const dropdownProps = computed(() => ({
+		name: props.name,
+		options: hasOptions.value,
+		labelKey: props.labelKey,
+		valueKey: props.valueKey,
+		disabled: props.disabled,
+		labelNoResults: props.labelNoResults,
+		multiple: props.multiple,
+		maxValues: props.maxValues,
+		modelValue: props.modelValue,
+		unselectable: props.unselectable,
+	}))
+
+	const selectProps = computed(() => ({
+		id: hasId.value,
+		name: props.name,
+		tabindex: hasTabindex.value,
+		valid: valid.value,
+		validLabel: props.validLabel,
+		invalid: invalid.value,
+		invalidLabel: props.invalidLabel,
+		hintLabel: props.hintLabel,
+		loading: loading.value,
+		loadingLabel: props.loadingLabel,
+		disabled: disabled.value,
+		readonly: readonly.value,
+		modifiers: props.modifiers,
+		options: hasOptions.value,
+		labelKey: props.labelKey,
+		valueKey: props.valueKey,
+		icon: props.icon,
+		iconPosition: props.iconPosition,
+		floating: props.floating,
+		unselectable: props.unselectable,
+		multiple: props.multiple,
+		label: props.label,
+		placeholder: props.placeholder,
+		modelValue: props.modelValue,
+	}))
+</script>
+
+<template>
+	<div v-if="!native" :id="hasId" :class="bemCssClasses">
+		<label
+			v-if="label"
+			:id="`${hasId}-label`"
+			:for="searchable && dropdownOpen ? `${hasId}-input` : undefined"
+		>
+			{{ label }}
+		</label>
+		<details
+			ref="dropdown"
+			class="vv-select__wrapper"
+			@click="disabled || readonly ? $event.preventDefault() : null"
+			@keyup.esc="dropdown.open = false"
+			@toggle="onToggle"
+		>
+			<!-- @slot Slot to replace left icon -->
+			<summary
+				class="vv-select__input"
+				:tabindex="hasTabindex"
+				@keyup.space="searchable ? $event.preventDefault() : null"
+			>
+				<slot name="before">
+					<VvIcon
+						v-if="hasIconLeft"
+						class="vv-select__icon-left"
+						v-bind="hasIcon"
+					/>
+				</slot>
+				<!-- #region search input -->
+				<template v-if="searchable && dropdownOpen">
+					<input
+						:id="`${hasId}-input`"
+						ref="inputSearch"
+						v-model="searchText"
+						role="combobox"
+						type="search"
+						:placeholder="searchPlaceholder"
+					/>
+				</template>
+				<!-- #endregion search input -->
+				<!-- #region label of selected value/s -->
+				<template v-else>
+					{{ hasLabel || placeholder }}
+				</template>
+				<!-- #endregion label of selected value/s -->
+				<slot name="after">
+					<VvIcon
+						v-if="hasIconRight"
+						class="vv-select__icon-right"
+						v-bind="hasIcon"
+					/>
+				</slot>
+			</summary>
+			<!-- @slot Slot to replace right icon -->
+			<VvDropdown
+				:id="`${hasId}-dropdown`"
+				v-bind="dropdownProps"
+				@update:model-value="onInput"
+			/>
+		</details>
+		<HintSlot class="vv-select__hint" />
+	</div>
+	<VvSelect
+		v-else
+		v-bind="selectProps"
+		@update:model-value="emit('update:modelValue', $event)"
+	/>
+</template>