@volverjs/ui-vue 0.0.4 → 0.0.5-beta.2

package/src/components/VvCombobox/VvCombobox.vue

@@ -7,21 +7,28 @@
 
 <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 VvDropdownOption from '@/components/VvDropdown/VvDropdownOption.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 { DropdownRole } from '@/constants'
+	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)
 
@@ -126,7 +133,7 @@
 	})
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-select',
 		modifiers,
 		computed(() => ({
@@ -186,7 +193,7 @@
 	const selectedOptions = computed(() => {
 		let selectedValues: Array<typeof props.modelValue> = []
 		if (Array.isArray(props.modelValue)) {
-			selectedValues = props.modelValue
+			selectedValues = props.modelValue as Array<typeof props.modelValue>
 		} else if (props.modelValue) {
 			selectedValues = [props.modelValue]
 		}
@@ -230,10 +237,11 @@
 		if (props.multiple) {
 			// check maxValues prop and block check new values
 			if (Array.isArray(props.modelValue)) {
+				const maxValues = Number(props.maxValues)
 				if (
 					props.maxValues !== undefined &&
-					props.maxValues >= 0 &&
-					props.modelValue?.length >= props.maxValues
+					maxValues >= 0 &&
+					props.modelValue?.length >= maxValues
 				) {
 					if (!contains(value, props.modelValue)) {
 						// maxValues reached
@@ -246,8 +254,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)
 	}
@@ -257,12 +270,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,
@@ -283,6 +296,7 @@
 		id: hasDropdownId.value,
 		reference: wrapperEl.value,
 		placement: props.placement,
+		strategy: props.strategy,
 		transitionName: props.transitionName,
 		offset: props.offset,
 		shift: props.shift,
@@ -350,7 +364,7 @@
 						spellcheck="false"
 						type="search"
 						class="vv-dropdown__search"
-						:placeholder="searchPlaceholder"
+						:placeholder="propsDefaults.searchPlaceholder"
 					/>
 				</template>
 				<template #default="{ aria }">
@@ -398,7 +412,9 @@
 												!readonly &&
 												!disabled
 											"
-											:aria-label="deselectActionLabel"
+											:aria-label="
+												propsDefaults.deselectActionLabel
+											"
 											@click.stop="onInput(option)"
 										>
 											<VvIcon name="close" />
@@ -429,9 +445,11 @@
 								disabled: getOptionDisabled(option),
 								selected: getOptionSelected(option),
 								unselectable,
-								deselectHintLabel,
-								selectHintLabel,
-								selectedHintLabel,
+								deselectHintLabel:
+									propsDefaults.deselectHintLabel,
+								selectHintLabel: propsDefaults.selectHintLabel,
+								selectedHintLabel:
+									propsDefaults.selectedHintLabel,
 							}"
 							:key="index"
 							class="vv-dropdown-option"
@@ -457,13 +475,13 @@
 					>
 						<!-- @slot Slot for no options available -->
 						<slot name="no-options">
-							{{ noOptionsLabel }}
+							{{ propsDefaults.noOptionsLabel }}
 						</slot>
 					</VvDropdownOption>
 					<VvDropdownOption v-else modifiers="inert">
 						<!-- @slot Slot for no results available -->
 						<slot name="no-results">
-							{{ noResultsLabel }}
+							{{ propsDefaults.noResultsLabel }}
 						</slot>
 					</VvDropdownOption>
 				</template>

package/src/components/VvCombobox/index.ts

@@ -15,7 +15,7 @@ import {
 	IdNameProps,
 	DropdownProps,
 	LabelProps,
-} from '@/props'
+} from '../../props'
 
 export const VvComboboxEvents = [
 	'update:modelValue',

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>

package/src/components/VvDialog/index.ts

@@ -1,4 +1,4 @@
-import { IdProps } from '@/props'
+import { IdProps } from '../../props'
 
 export const VvDialogEvents = ['open', 'close', 'update:modelValue']
 
@@ -11,7 +11,10 @@ export const VvDialogProps = {
 	/**
 	 * Show / hide dialog programmatically
 	 */
-	modelValue: Boolean,
+	modelValue: {
+		type: Boolean,
+		default: undefined,
+	},
 	/**
 	 * Dialog transition
 	 */

package/src/components/VvDropdown/VvDropdown.vue

@@ -17,14 +17,14 @@
 		arrow,
 		size,
 	} from '@floating-ui/vue'
-	import { VvDropdownProps } from '@/components/VvDropdown'
+	import { VvDropdownProps } from '.'
 	import type {
 		AutoPlacementOptions,
 		FlipOptions,
 		OffsetOptions,
 		ShiftOptions,
 		SizeOptions,
-	} from '@/types/floating-ui'
+	} from '../../types/floating-ui'
 
 	// props, emit and attrs
 	const props = defineProps(VvDropdownProps)
@@ -127,7 +127,8 @@
 		floatingEl,
 		{
 			whileElementsMounted: autoUpdate,
-			placement: props.placement,
+			placement: computed(() => props.placement),
+			strategy: computed(() => props.strategy),
 			middleware,
 		},
 	)
@@ -194,6 +195,7 @@
 	const init = (el: HTMLElement) => {
 		referenceEl.value = el
 	}
+	defineExpose({ toggle, show, hide, init })
 	watch(expanded, (newValue) => {
 		if (newValue && props.autofocusFirst) {
 			nextTick(() => {
@@ -219,7 +221,7 @@
 
 	// aria
 	const hasAriaLabelledby = computed(() => {
-		return referenceEl.value?.getAttribute('id') ?? undefined
+		return referenceEl.value?.getAttribute?.('id') ?? undefined
 	})
 	const referenceAria = computed(() => ({
 		'aria-controls': hasId.value,
@@ -242,7 +244,7 @@
 	const { itemRole } = useProvideDropdownItem({ role, expanded })
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-dropdown',
 		modifiers,
 		computed(() => ({

package/src/components/VvDropdown/VvDropdownAction.vue

@@ -5,9 +5,9 @@
 </script>
 
 <script setup lang="ts">
-	import VvAction from '@/components/VvAction/VvAction.vue'
-	import VvDropdownItem from '@/components/VvDropdown/VvDropdownItem.vue'
-	import { ActionProps, ModifiersProps } from '@/props'
+	import VvAction from '../VvAction/VvAction.vue'
+	import VvDropdownItem from '../VvDropdown/VvDropdownItem.vue'
+	import { ActionProps, ModifiersProps } from '../../props'
 
 	// props
 	const props = defineProps({
@@ -20,7 +20,7 @@
 	 * @returns {Array} The component classes.
 	 */
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers('vv-dropdown-action', modifiers)
+	const bemCssClasses = useModifiers('vv-dropdown-action', modifiers)
 </script>
 
 <template>
@@ -38,7 +38,9 @@
 			}"
 			:class="bemCssClasses"
 		>
-			<slot />
+			<slot>
+				{{ label }}
+			</slot>
 		</VvAction>
 	</VvDropdownItem>
 </template>

package/src/components/VvDropdown/VvDropdownOption.vue

@@ -5,13 +5,13 @@
 </script>
 
 <script setup lang="ts">
-	import VvDropdownItem from '@/components/VvDropdown/VvDropdownItem.vue'
+	import VvDropdownItem from './VvDropdownItem.vue'
 	import {
 		DisabledProps,
 		ModifiersProps,
 		SelectedProps,
 		UnselectableProps,
-	} from '@/props'
+	} from '../../props'
 
 	// props
 	const props = defineProps({
@@ -32,7 +32,7 @@
 
 	// style
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-dropdown-option',
 		modifiers,
 		computed(() => ({
@@ -41,6 +41,18 @@
 			unselectable: props.unselectable && props.selected,
 		})),
 	)
+
+	// hint
+	const hintLabel = computed(() => {
+		if (props.selected) {
+			return props.unselectable
+				? props.deselectHintLabel
+				: props.selectedHintLabel
+		}
+		if (!props.disabled) {
+			return props.selectHintLabel
+		}
+	})
 </script>
 
 <template>
@@ -51,14 +63,9 @@
 		:aria-disabled="disabled"
 	>
 		<slot />
-		<span class="vv-dropdown-option__hint">
+		<span class="vv-dropdown-option__hint" :title="hintLabel">
 			<slot name="hint" v-bind="{ disabled, selected, unselectable }">
-				<template v-if="selected">
-					{{ unselectable ? deselectHintLabel : selectedHintLabel }}
-				</template>
-				<template v-else-if="!disabled">
-					{{ selectHintLabel }}
-				</template>
+				{{ hintLabel }}
 			</slot>
 		</span>
 	</VvDropdownItem>

package/src/components/VvDropdown/index.ts

@@ -1,6 +1,6 @@
-import { DropdownProps, IdProps, ModifiersProps } from '@/props'
 import type { PropType } from 'vue'
-import { DropdownRole } from '@/constants'
+import { DropdownProps, IdProps, ModifiersProps } from '../../props'
+import { DropdownRole } from '../../constants'
 
 export const VvDropdownProps = {
 	...IdProps,
@@ -24,7 +24,7 @@ export const VvDropdownProps = {
 	 * Dropdown role
 	 */
 	role: {
-		type: String as PropType<DropdownRole>,
+		type: String as PropType<`${DropdownRole}`>,
 		default: DropdownRole.menu,
 		validator: (value: DropdownRole) =>
 			Object.values(DropdownRole).includes(value),

package/src/components/VvIcon/VvIcon.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 	import { Icon, addIcon, iconExists, type IconifyJSON } from '@iconify/vue'
-	import { VvIconProps } from '@/components/VvIcon'
+	import { VvIconProps } from '.'
 
 	// props
 	const props = defineProps(VvIconProps)
@@ -19,13 +19,13 @@
 
 	// classes
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers('vv-icon', modifiers)
+	const bemCssClasses = useModifiers('vv-icon', modifiers)
 
 	/**
 	 * Provider name
 	 */
 	const provider = computed(() => {
-		return props.provider || volver?.provider
+		return props.provider || volver?.iconsProvider
 	})
 
 	/**

package/src/components/VvIcon/index.ts

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue'
 import type { IconifyRenderMode } from '@iconify/vue'
 
-export enum PREFIX {
+export enum IconPrefix {
 	simple = 'simple',
 	normal = 'normal',
 	detailed = 'detailed',
@@ -46,7 +46,7 @@ export const VvIconProps = {
 	 * Icon default options prefix: simple | normal | detailed
 	 */
 	prefix: {
-		type: String as PropType<PREFIX>,
+		type: String as PropType<`${IconPrefix}` | string>,
 		default: 'normal',
 	},
 	/**
@@ -74,7 +74,7 @@ export const VvIconProps = {
 	 * 'svg' = svg
 	 * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
 	 */
-	mode: String as PropType<IconifyRenderMode>,
+	mode: String as PropType<`${IconifyRenderMode}`>,
 	/**
 	 * Toggles inline or block mode
 	 * Example https://docs.iconify.design/icon-components/vue/inline.html

package/src/components/VvInputText/VvInputClearAction.ts

@@ -1,4 +1,4 @@
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import VvIcon from '../VvIcon/VvIcon.vue'
 
 export default defineComponent({
 	components: {
@@ -34,7 +34,7 @@ export default defineComponent({
 	render() {
 		const icon = h(VvIcon, {
 			name: this.icon,
-			class: 'vv-input-text__action-icon',
+			class: 'vv-input-text__icon',
 		})
 
 		return h(

package/src/components/VvInputText/VvInputPasswordAction.ts

@@ -1,5 +1,5 @@
-import { TYPES_ICON } from '@/components/VvInputText'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { TYPES_ICON } from '../VvInputText'
+import VvIcon from '../VvIcon/VvIcon.vue'
 
 export default defineComponent({
 	components: {
@@ -51,9 +51,8 @@ export default defineComponent({
 	render() {
 		const icon = h(VvIcon, {
 			name: this.activeIcon,
-			class: 'vv-input-text__action-icon',
+			class: 'vv-input-text__icon',
 		})
-
 		return h(
 			'button',
 			{

package/src/components/VvInputText/VvInputStepAction.ts

@@ -1,4 +1,4 @@
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import VvIcon from '../VvIcon/VvIcon.vue'
 
 export default defineComponent({
 	components: {
@@ -37,11 +37,12 @@ export default defineComponent({
 	render() {
 		return h('button', {
 			class: [
-				'vv-input-text__action-chevron',
+				'vv-input-text__action vv-input-text__action-chevron',
 				this.isUp && 'vv-input-text__action-chevron-up',
 			],
 			disabled: this.disabled,
 			ariaLabel: this.label,
+			type: 'button',
 			onClick: this.onClick,
 		})
 	},