@volverjs/ui-vue 0.0.3 → 0.0.5-beta.1

package/src/components/VvButton/index.ts

@@ -1,40 +1,22 @@
 import type { Ref, PropType, ExtractPropTypes } from 'vue'
-import type { ButtonGroupState } from '@/types/group'
+import type { ButtonGroupState } from '../../types/group'
 import {
-	DisabledProps,
+	ActionProps,
 	IdProps,
+	LoadingProps,
 	ModifiersProps,
 	UnselectableProps,
-} from '@/props'
-import { INJECTION_KEY_BUTTON_GROUP, Side } from '@/constants'
-
-export enum ButtonType {
-	button = 'button',
-	submit = 'submit',
-	reset = 'reset',
-}
-
-export enum ButtonTag {
-	nuxtLink = 'nuxt-link',
-	routerLink = 'router-link',
-	a = 'a',
-	button = 'button',
-}
-
-export enum ButtonTarget {
-	_blank = '_blank',
-	_self = '_self',
-	_parent = '_parent',
-	_top = '_top',
-}
+} from '../../props'
+import { INJECTION_KEY_BUTTON_GROUP, Side } from '../../constants'
 
 export const VvButtonEvents = ['update:modelValue']
 
 export const VvButtonProps = {
+	...ActionProps,
 	...IdProps,
 	...ModifiersProps,
-	...DisabledProps,
 	...UnselectableProps,
+	...LoadingProps,
 	/**
 	 * Button icon
 	 */
@@ -43,69 +25,14 @@ export const VvButtonProps = {
 	 * Button icon position
 	 */
 	iconPosition: {
-		type: String as PropType<Side>,
+		type: String as PropType<`${Side}`>,
 		default: Side.left,
 		validator: (value: Side) => Object.values(Side).includes(value),
 	},
-	/**
-	 * Button label
-	 */
-	label: [String, Number],
-	/**
-	 * Loading status
-	 */
-	loading: Boolean,
 	/**
 	 * Loading icon
 	 */
 	loadingIcon: { type: String, default: 'eos-icons:bubble-loading' },
-	/**
-	 * Loading label
-	 */
-	loadingLabel: {
-		type: String,
-		default: 'Loading...',
-	},
-	/**
-	 * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
-	 * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
-	 */
-	to: {
-		type: [String, Object],
-	},
-	/**
-	 * Link href
-	 */
-	href: String,
-	/**
-	 * Link target
-	 */
-	target: {
-		type: String as PropType<ButtonTarget>,
-		validator: (value: ButtonTarget) =>
-			Object.values(ButtonTarget).includes(value),
-	},
-	active: Boolean,
-	/**
-	 * Button pressed mode
-	 */
-	pressed: Boolean,
-	/**
-	 * Link rel
-	 */
-	rel: {
-		type: String,
-		default: 'noopener noreferrer',
-	},
-	/**
-	 * Button type
-	 */
-	type: {
-		type: String,
-		default: ButtonType.button,
-		validator: (value: ButtonType) =>
-			Object.values(ButtonType).includes(value),
-	},
 	toggle: {
 		type: Boolean,
 		default: false,
@@ -139,40 +66,41 @@ export function useGroupProps(
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit) as Ref<
 		string | Array<string> | undefined
 	>
-	const disabled = getGroupOrLocalRef('disabled', props) as Ref<boolean>
 	const toggle = getGroupOrLocalRef('toggle', props) as Ref<boolean>
 	const unselectable = getGroupOrLocalRef(
 		'unselectable',
 		props,
 	) as Ref<boolean>
-	const multiple = group?.value?.multiple ?? ref(false)
-
+	const multiple = computed(() => group?.value.multiple.value ?? false)
 	const modifiers = computed(() => {
 		const localValue = localModifiers?.value
 			? Array.isArray(localModifiers.value)
 				? localModifiers.value
-				: [localModifiers.value]
+				: localModifiers.value.split(' ')
 			: []
 		const groupValue = group?.value.itemModifiers?.value
 			? Array.isArray(group.value.itemModifiers.value)
 				? group.value.itemModifiers.value
-				: [group.value.itemModifiers.value]
+				: group.value.itemModifiers.value.split(' ')
 			: []
 		return [...localValue, ...groupValue]
 	})
+	const disabled = computed(() =>
+		Boolean(props.disabled || group?.value?.disabled.value),
+	)
 
 	return {
 		// group props
 		group,
 		isInGroup,
 		modelValue,
-		disabled,
 		toggle,
 		unselectable,
 		multiple,
+		modifiers,
+		disabled,
 		// local props
 		id,
-		modifiers,
 		pressed,
 		iconPosition,
 		icon,

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -5,12 +5,9 @@
 </script>
 
 <script setup lang="ts">
-	import type { ButtonGroupState } from '@/types/group'
-	import { INJECTION_KEY_BUTTON_GROUP } from '@/constants'
-	import {
-		VvButtonGroupProps,
-		VvButtonGroupEvents,
-	} from '@/components/VvButtonGroup'
+	import type { ButtonGroupState } from '../../types/group'
+	import { INJECTION_KEY_BUTTON_GROUP } from '../../constants'
+	import { VvButtonGroupProps, VvButtonGroupEvents } from '.'
 
 	// emit and props
 	const emit = defineEmits(VvButtonGroupEvents)
@@ -66,7 +63,7 @@
 	})
 
 	// style
-	const bemCssClasses = useBemModifiers('vv-button-group', modifiers)
+	const bemCssClasses = useModifiers('vv-button-group', modifiers)
 </script>
 
 <template>

package/src/components/VvButtonGroup/index.ts

@@ -1,4 +1,4 @@
-import { DisabledProps, ModifiersProps, UnselectableProps } from '@/props'
+import { DisabledProps, ModifiersProps, UnselectableProps } from '../../props'
 
 export const VvButtonGroupProps = {
 	...ModifiersProps,

package/src/components/VvCard/VvCard.vue

@@ -5,14 +5,14 @@
 </script>
 
 <script setup lang="ts">
-	import { VvCardProps } from '@/components/VvCard'
+	import { VvCardProps } from '.'
 
 	// props and attrs
 	const props = defineProps(VvCardProps)
 
 	// styles
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers('vv-card', modifiers)
+	const bemCssClasses = useModifiers('vv-card', modifiers)
 </script>
 
 <template>

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -5,12 +5,8 @@
 </script>
 
 <script setup lang="ts">
-	import {
-		VvCheckboxProps,
-		VvCheckboxEvents,
-		useGroupProps,
-	} from '@/components/VvCheckbox'
-	import { HintSlotFactory } from '@/components/common/HintSlot'
+	import { VvCheckboxProps, VvCheckboxEvents, useGroupProps } from '.'
+	import { HintSlotFactory } from '../common/HintSlot'
 
 	// props, emits and slots
 	const props = defineProps(VvCheckboxProps)
@@ -108,7 +104,7 @@
 
 	// styles
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-checkbox',
 		modifiers,
 		computed(() => ({

package/src/components/VvCheckbox/index.ts

@@ -1,7 +1,7 @@
 import type { ExtractPropTypes, Ref } from 'vue'
-import type { InputGroupState } from '@/types/group'
-import { CheckboxRadioProps, ModifiersProps } from '@/props'
-import { INJECTION_KEY_CHECK_GROUP } from '@/constants'
+import type { InputGroupState } from '../../types/group'
+import { CheckboxRadioProps, ModifiersProps } from '../../props'
+import { INJECTION_KEY_CHECK_GROUP } from '../../constants'
 
 export const VvCheckboxProps = {
 	...CheckboxRadioProps,
@@ -39,10 +39,14 @@ export function useGroupProps(
 
 	// 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>
+	const readonly = computed(() =>
+		Boolean(props.readonly || group?.value?.disabled.value),
+	)
+	const disabled = computed(() =>
+		Boolean(props.disabled || group?.value?.disabled.value),
+	)
 
 	return {
 		// local props
@@ -53,9 +57,9 @@ export function useGroupProps(
 		group,
 		isInGroup,
 		modelValue,
-		readonly,
-		disabled,
 		valid,
 		invalid,
+		readonly,
+		disabled,
 	}
 }

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -5,15 +5,12 @@
 </script>
 
 <script setup lang="ts">
-	import type { Option } from '@/types/generic'
-	import type { InputGroupState } from '@/types/group'
-	import { INJECTION_KEY_CHECK_GROUP } from '@/constants'
-	import { HintSlotFactory } from '@/components/common/HintSlot'
-	import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
-	import {
-		VvCheckboxGroupProps,
-		VvCheckboxGroupEvents,
-	} from '@/components/VvCheckboxGroup'
+	import type { Option } from '../../types/generic'
+	import type { InputGroupState } from '../../types/group'
+	import { INJECTION_KEY_CHECK_GROUP } from '../../constants'
+	import { HintSlotFactory } from '../common/HintSlot'
+	import VvCheckbox from '../VvCheckbox/VvCheckbox.vue'
+	import { VvCheckboxGroupProps, VvCheckboxGroupEvents } from '.'
 
 	// props, emit and slots
 	const props = defineProps(VvCheckboxGroupProps)
@@ -38,7 +35,7 @@
 	const { getOptionLabel, getOptionValue } = useOptions(props)
 
 	// stypes
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-checkbox-group',
 		modifiers,
 		computed(() => ({

package/src/components/VvCheckboxGroup/index.ts

@@ -1,4 +1,4 @@
-import { CheckboxRadioGroupProps } from '@/props'
+import { CheckboxRadioGroupProps } from '../../props'
 
 export const VvCheckboxGroupProps = CheckboxRadioGroupProps
 

package/src/components/VvCombobox/VvCombobox.vue

@@ -1,26 +1,34 @@
 <script lang="ts">
 	export default {
 		name: 'VvCombobox',
-		components: { VvDropdown, VvDropdownItem },
+		components: { VvDropdown, VvDropdownOption },
 	}
 </script>
 
 <script setup lang="ts">
 	import type { Ref } from 'vue'
-	import { VvComboboxProps, VvComboboxEvents } from '@/components/VvCombobox'
-	import VvIcon from '@/components/VvIcon/VvIcon.vue'
-	import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
-	import VvDropdownItem from '@/components/VvDropdown/VvDropdownItem.vue'
-	import VvSelect from '@/components/VvSelect/VvSelect.vue'
-	import VvBadge from '@/components/VvBadge/VvBadge.vue'
-	import HintSlotFactory from '@/components/common/HintSlot'
-	import type { Option } from '@/types/generic'
+	import { VvComboboxProps, VvComboboxEvents } from '.'
+	import VvIcon from '../VvIcon/VvIcon.vue'
+	import VvDropdown from '../VvDropdown/VvDropdown.vue'
+	import VvDropdownOption from '../VvDropdown/VvDropdownOption.vue'
+	import VvSelect from '../VvSelect/VvSelect.vue'
+	import VvBadge from '../VvBadge/VvBadge.vue'
+	import HintSlotFactory from '../common/HintSlot'
+	import type { Option } from '../../types/generic'
+	import { DropdownRole } from '../../constants'
 
 	// props, emit and slots
 	const props = defineProps(VvComboboxProps)
 	const emit = defineEmits(VvComboboxEvents)
 	const slots = useSlots()
 
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvComboboxProps>(
+		'VvCombobox',
+		VvComboboxProps,
+		props,
+	)
+
 	// hint slot
 	const { HintSlot } = HintSlotFactory(props, slots)
 
@@ -125,7 +133,7 @@
 	})
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-select',
 		modifiers,
 		computed(() => ({
@@ -245,8 +253,13 @@
 			} else {
 				toReturn = [value as Option]
 			}
-		} else if (props.unselectable && value === props.modelValue) {
-			toReturn = undefined
+		} else {
+			if (props.autoClose) {
+				collapse()
+			}
+			if (props.unselectable && value === props.modelValue) {
+				toReturn = undefined
+			}
 		}
 		emit('update:modelValue', toReturn)
 	}
@@ -256,12 +269,12 @@
 		name: props.name,
 		tabindex: hasTabindex.value,
 		valid: valid.value,
-		validLabel: props.validLabel,
+		validLabel: propsDefaults.value.validLabel,
 		invalid: invalid.value,
-		invalidLabel: props.invalidLabel,
-		hintLabel: props.hintLabel,
+		invalidLabel: propsDefaults.value.invalidLabel,
+		hintLabel: propsDefaults.value.hintLabel,
 		loading: loading.value,
-		loadingLabel: props.loadingLabel,
+		loadingLabel: propsDefaults.value.loadingLabel,
 		disabled: disabled.value,
 		readonly: readonly.value,
 		modifiers: props.modifiers,
@@ -327,9 +340,14 @@
 			<VvDropdown
 				v-model="expanded"
 				v-bind="dropdownProps"
-				role="listbox"
+				:role="DropdownRole.listbox"
 			>
-				<template v-if="searchable" #before>
+				<template
+					v-if="searchable || $slots['dropdown::before']"
+					#before
+				>
+					<!-- @slot Slot before dropdown items -->
+					<slot name="dropdown::before" />
 					<input
 						v-if="searchable"
 						v-show="expanded"
@@ -344,7 +362,7 @@
 						spellcheck="false"
 						type="search"
 						class="vv-dropdown__search"
-						:placeholder="searchPlaceholder"
+						:placeholder="propsDefaults.searchPlaceholder"
 					/>
 				</template>
 				<template #default="{ aria }">
@@ -392,7 +410,9 @@
 												!readonly &&
 												!disabled
 											"
-											:aria-label="deselectLabel"
+											:aria-label="
+												propsDefaults.deselectActionLabel
+											"
 											@click.stop="onInput(option)"
 										>
 											<VvIcon name="close" />
@@ -416,48 +436,56 @@
 					</div>
 				</template>
 				<template #items>
-					<VvDropdownItem
-						v-for="(option, index) in filteredOptions"
-						:key="index"
-						class="vv-dropdown-action"
-						:tabindex="getOptionDisabled(option) ? -1 : 0"
-						:class="{
-							disabled: getOptionDisabled(option),
-							selected: getOptionSelected(option),
-							'vv-dropdown-action--unselectable':
-								unselectable && getOptionSelected(option),
-						}"
-						:aria-selected="getOptionSelected(option)"
-						:aria-disabled="getOptionDisabled(option)"
-						@click.passive="onInput(option)"
-					>
-						<!-- @slot Slot for option customization -->
-						<slot
-							name="option"
+					<template v-if="filteredOptions.length">
+						<VvDropdownOption
+							v-for="(option, index) in filteredOptions"
 							v-bind="{
-								option,
-								selectedOptions,
-								selected: getOptionSelected(option),
 								disabled: getOptionDisabled(option),
+								selected: getOptionSelected(option),
+								unselectable,
+								deselectHintLabel:
+									propsDefaults.deselectHintLabel,
+								selectHintLabel: propsDefaults.selectHintLabel,
+								selectedHintLabel:
+									propsDefaults.selectedHintLabel,
 							}"
+							:key="index"
+							class="vv-dropdown-option"
+							@click.passive="onInput(option)"
 						>
-							{{ getOptionLabel(option) }}
-							<span class="vv-dropdown-action__hint">
-								<template v-if="getOptionSelected(option)">
-									{{
-										unselectable
-											? pressToDeselectLabel
-											: selectedLabel
-									}}
-								</template>
-								<template
-									v-else-if="!getOptionDisabled(option)"
-								>
-									{{ pressToSelectLabel }}
-								</template>
-							</span>
+							<!-- @slot Slot for option customization -->
+							<slot
+								name="option"
+								v-bind="{
+									option,
+									selectedOptions,
+									selected: getOptionSelected(option),
+									disabled: getOptionDisabled(option),
+								}"
+							>
+								{{ getOptionLabel(option) }}
+							</slot>
+						</VvDropdownOption>
+					</template>
+					<VvDropdownOption
+						v-else-if="!options.length"
+						modifiers="inert"
+					>
+						<!-- @slot Slot for no options available -->
+						<slot name="no-options">
+							{{ propsDefaults.noOptionsLabel }}
 						</slot>
-					</VvDropdownItem>
+					</VvDropdownOption>
+					<VvDropdownOption v-else modifiers="inert">
+						<!-- @slot Slot for no results available -->
+						<slot name="no-results">
+							{{ propsDefaults.noResultsLabel }}
+						</slot>
+					</VvDropdownOption>
+				</template>
+				<template v-if="$slots['dropdown::after']" #after>
+					<!-- @slot Slot after dropdown items -->
+					<slot name="dropdown::after" />
 				</template>
 			</VvDropdown>
 		</div>

package/src/components/VvCombobox/index.ts

@@ -14,7 +14,8 @@ import {
 	UnselectableProps,
 	IdNameProps,
 	DropdownProps,
-} from '@/props'
+	LabelProps,
+} from '../../props'
 
 export const VvComboboxEvents = [
 	'update:modelValue',
@@ -38,6 +39,7 @@ export const VvComboboxProps = {
 	...FloatingLabelProps,
 	...UnselectableProps,
 	...DropdownProps,
+	...LabelProps,
 	/**
 	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
 	 */
@@ -45,30 +47,30 @@ export const VvComboboxProps = {
 		type: [String, Number, Boolean, Object, Array],
 		default: undefined,
 	},
-	/**
-	 * Select input label
-	 */
-	label: String,
 	/**
 	 * Label for no search results
 	 */
 	noResultsLabel: { type: String, default: 'No results' },
+	/**
+	 * Label for no options	available
+	 */
+	noOptionsLabel: { type: String, default: 'No options available' },
 	/**
 	 * Label for selected option hint
 	 */
-	selectedLabel: { type: String, default: 'Selected' },
+	selectedHintLabel: { type: String, default: 'Selected' },
 	/**
-	 * Label for deselect button
+	 * Label for deselect action button
 	 */
-	deselectLabel: { type: String, default: 'Deselect' },
+	deselectActionLabel: { type: String, default: 'Deselect' },
 	/**
 	 * Label for select option hint
 	 */
-	pressToSelectLabel: { type: String, default: 'Press enter to select' },
+	selectHintLabel: { type: String, default: 'Press enter to select' },
 	/**
 	 * Label for deselected option hint
 	 */
-	pressToDeselectLabel: { type: String, default: 'Press enter to remove' },
+	deselectHintLabel: { type: String, default: 'Press enter to remove' },
 	/**
 	 * Select input placeholder
 	 */

package/src/components/VvDialog/VvDialog.vue

@@ -6,15 +6,26 @@
 
 <script setup lang="ts">
 	import type { DialogHTMLAttributes } from 'vue'
-	import VvIcon from '@/components/VvIcon/VvIcon.vue'
-	import { VvDialogEvents, VvDialogProps } from '@/components/VvDialog'
+	import VvIcon from '../VvIcon/VvIcon.vue'
+	import { VvDialogEvents, VvDialogProps } from '.'
 
-	// props, emit
+	// props and emit
 	const props = defineProps(VvDialogProps)
 	const emit = defineEmits(VvDialogEvents)
 
 	// data
-	const isVisible = useVModel(props, 'modelValue', emit)
+	const localModelValue = ref(false)
+	const modelValue = computed({
+		get() {
+			return props.modelValue ?? localModelValue.value
+		},
+		set(value) {
+			if (props.modelValue === undefined) {
+				localModelValue.value = value
+			}
+			emit('update:modelValue', value)
+		},
+	})
 	const htmlAttrIsOpen = ref(true)
 
 	// template ref
@@ -51,26 +62,32 @@
 	// methods
 	onClickOutside(modalWrapper, () => {
 		if (props.autoClose) {
-			isVisible.value = false
+			modelValue.value = false
 		}
 	})
 
-	function closeDialog() {
-		isVisible.value = false
+	function close() {
+		modelValue.value = false
 	}
 
+	function open() {
+		modelValue.value = true
+	}
+
+	defineExpose({ close, open })
+
 	// keyboard
 	onKeyStroke('Escape', (e) => {
-		if (isVisible.value) {
+		if (modelValue.value) {
 			e.preventDefault()
-			closeDialog()
+			close()
 		}
 	})
 </script>
 
 <template>
 	<Transition :name="transitioName" v-on="dialogTransitionHandlers">
-		<dialog v-show="isVisible" v-bind="dialogAttrs" :class="dialogClass">
+		<dialog v-show="modelValue" v-bind="dialogAttrs" :class="dialogClass">
 			<article ref="modalWrapper" class="vv-dialog__wrapper">
 				<header v-if="$slots.header || title" class="vv-dialog__header">
 					<!-- @slot Header slot -->
@@ -80,7 +97,7 @@
 							type="button"
 							aria-label="Close"
 							class="vv-dialog__close"
-							@click.passive="closeDialog"
+							@click.passive="close"
 						>
 							<VvIcon name="close" />
 						</button>