@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.40

package/src/components/VvCombobox/index.ts

@@ -1,175 +1,200 @@
 import type { PropType } from 'vue'
+import type { MaybeElement } from '@vueuse/core'
 import {
-	ValidProps,
-	InvalidProps,
-	HintProps,
-	LoadingProps,
-	DisabledProps,
-	ReadonlyProps,
-	ModifiersProps,
-	OptionsProps,
-	IconProps,
-	TabindexProps,
-	FloatingLabelProps,
-	UnselectableProps,
-	IdNameProps,
-	DropdownProps,
-	LabelProps,
+    ValidProps,
+    InvalidProps,
+    HintProps,
+    LoadingProps,
+    DisabledProps,
+    ReadonlyProps,
+    ModifiersProps,
+    OptionsProps,
+    IconProps,
+    TabindexProps,
+    FloatingLabelProps,
+    UnselectableProps,
+    IdNameProps,
+    DropdownProps,
+    LabelProps,
 } from '../../props'
 import type { Option } from '../../types/generic'
 
-export const VvComboboxEvents = [
-	'update:modelValue',
-	'change:search',
-	'focus',
-	'blur',
-]
+export type VvComboboxEvents = {
+    'update:modelValue': [any]
+    'update:search': [string]
+    /**
+     * @deprecated use update:search instead
+     */
+    'change:search': [string]
+    'focus': [MaybeElement]
+    'blur': [MaybeElement]
+}
 
 export const VvComboboxProps = {
-	...IdNameProps,
-	...TabindexProps,
-	...ValidProps,
-	...InvalidProps,
-	...HintProps,
-	...LoadingProps,
-	...DisabledProps,
-	...ReadonlyProps,
-	...ModifiersProps,
-	...OptionsProps,
-	...IconProps,
-	...FloatingLabelProps,
-	...UnselectableProps,
-	...DropdownProps,
-	...LabelProps,
-	/**
-	 * Dropdown show / hide transition name
-	 */
-	transitionName: {
-		type: String,
-		default: 'vv-dropdown--mobile-fade-block',
-	},
-	/**
-	 * 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 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
-	 */
-	selectedHintLabel: { type: String, default: 'Selected' },
-	/**
-	 * Label for deselect action button
-	 */
-	deselectActionLabel: { type: String, default: 'Deselect' },
-	/**
-	 * Label for select option hint
-	 */
-	selectHintLabel: { type: String, default: 'Press enter to select' },
-	/**
-	 * Label for deselected option hint
-	 */
-	deselectHintLabel: { type: String, default: 'Press enter to remove' },
-	/**
-	 * Label close button
-	 */
-	closeLabel: { type: String, default: 'Close' },
-	/**
-	 * Select input placeholder
-	 */
-	placeholder: String,
-	/**
-	 * Use input text to search on options
-	 */
-	searchable: Boolean,
-	/**
-	 * Search function to filter options
-	 */
-	searchFunction: {
-		type: Function as PropType<
+    ...IdNameProps,
+    ...TabindexProps,
+    ...ValidProps,
+    ...InvalidProps,
+    ...HintProps,
+    ...LoadingProps,
+    ...DisabledProps,
+    ...ReadonlyProps,
+    ...ModifiersProps,
+    ...OptionsProps,
+    ...IconProps,
+    ...FloatingLabelProps,
+    ...UnselectableProps,
+    ...DropdownProps,
+    ...LabelProps,
+    /**
+     * Dropdown show / hide transition name
+     */
+    transitionName: {
+        type: String,
+        default: 'vv-dropdown--mobile-fade-block',
+    },
+    /**
+     * 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 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
+     */
+    selectedHintLabel: { type: String, default: 'Selected' },
+    /**
+     * Label for deselect action button
+     */
+    deselectActionLabel: { type: String, default: 'Deselect' },
+    /**
+     * Label for select option hint
+     */
+    selectHintLabel: { type: String, default: 'Press enter to select' },
+    /**
+     * Label for deselected option hint
+     */
+    deselectHintLabel: { type: String, default: 'Press enter to remove' },
+    /**
+     * Label close button
+     */
+    closeLabel: { type: String, default: 'Close' },
+    /**
+     * Select input placeholder
+     */
+    placeholder: String,
+    /**
+     * Use input text to search on options
+     */
+    searchable: Boolean,
+    /**
+     * Search function to filter options
+     */
+    searchFunction: {
+        type: Function as PropType<
 			(
-				search: string,
-				options: (Option | string)[],
+			    search: string,
+			    options: (Option | string)[],
 			) => (Option | string)[] | Promise<(Option | string)[]>
 		>,
-		default: undefined,
-	},
-	/**
-	 * On searchable select is the input search placeholder
-	 */
-	searchPlaceholder: {
-		type: String,
-		default: 'Search...',
-	},
-	/**
-	 * The input search debounce time in ms
-	 */
-	debounceSearch: {
-		type: [Number, String],
-		default: 0,
-	},
-	/**
-	 * Manage modelValue as string[] or object[]
-	 */
-	multiple: Boolean,
-	/**
-	 * The max number of selected values
-	 */
-	maxValues: [Number, String],
-	/**
-	 * The select label separator visible to the user
-	 */
-	separator: { type: String, default: ', ' },
-	/**
-	 * Show native select
-	 */
-	native: Boolean,
-	/**
-	 * Show badges
-	 */
-	badges: Boolean,
-	/**
-	 * Badge modifiers
-	 */
-	badgeModifiers: {
-		type: [String, Array] as PropType<string | string[]>,
-		default: 'action sm',
-	},
-	/**
-	 * Set dropdown width to the same as the trigger
-	 */
-	triggerWidth: {
-		...DropdownProps.triggerWidth,
-		default: true,
-	},
-	/**
-	 * Dropdown modifiers
-	 */
-	dropdownModifiers: {
-		type: [String, Array] as PropType<string | string[]>,
-		default: 'mobile',
-	},
-	/**
-	 * Open dropdown on focus
-	 */
-	autoOpen: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * Keep open dropdown on single select
-	 */
-	keepOpen: {
-		type: Boolean,
-		default: false,
-	},
+        default: undefined,
+    },
+    /**
+     * On searchable select is the input search placeholder
+     */
+    searchPlaceholder: {
+        type: String,
+        default: 'Search...',
+    },
+    /**
+     * The input search debounce time in ms
+     */
+    debounceSearch: {
+        type: [Number, String],
+        default: 0,
+    },
+    /**
+     * Manage modelValue as string[] or object[]
+     */
+    multiple: Boolean,
+    /**
+     * The max number of selected values
+     */
+    maxValues: [Number, String],
+    /**
+     * The select label separator visible to the user
+     */
+    separator: { type: String, default: ', ' },
+    /**
+     * Show native select
+     */
+    native: Boolean,
+    /**
+     * Show badges
+     */
+    badges: Boolean,
+    /**
+     * Badge modifiers
+     */
+    badgeModifiers: {
+        type: [String, Array] as PropType<string | string[]>,
+        default: 'action sm',
+    },
+    /**
+     * Set dropdown width to the same as the trigger
+     */
+    triggerWidth: {
+        ...DropdownProps.triggerWidth,
+        default: true,
+    },
+    /**
+     * Dropdown modifiers
+     */
+    dropdownModifiers: {
+        type: [String, Array] as PropType<string | string[]>,
+        default: 'mobile',
+    },
+    /**
+     * Open dropdown on focus
+     */
+    autoOpen: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Keep open dropdown on single select
+     */
+    keepOpen: {
+        type: Boolean,
+        default: false,
+    },
+}
+
+// WARNING: This is a provisiaonal implementation, it may change in the future
+export function useVvComboboxProps<T extends Option | string>() {
+    return {
+        ...VvComboboxProps,
+        options: {
+            ...VvComboboxProps.options,
+            type: Array as PropType<T[]>,
+        },
+        searchFunction: {
+            ...VvComboboxProps.searchFunction,
+            type: Function as PropType<
+			(
+			    search: string,
+			    options: T[],
+			) => T[] | Promise<T[]>
+		>,
+        },
+    }
 }

package/src/components/VvDialog/VvDialog.vue

@@ -1,144 +1,156 @@
-<script lang="ts">
-	export default {
-		name: 'VvDialog',
-	}
-</script>
-
 <script setup lang="ts">
-	import type { DialogHTMLAttributes } from 'vue'
-	import VvIcon from '../VvIcon/VvIcon.vue'
-	import { VvDialogEvents, VvDialogProps } from '.'
+import type { DialogHTMLAttributes } from 'vue'
+import VvIcon from '../VvIcon/VvIcon.vue'
+import { VvDialogEvents, VvDialogProps } from '.'
+
+// props, emit and template refs
+const props = defineProps(VvDialogProps)
+
+const emit = defineEmits(VvDialogEvents)
 
-	// props, emit and template refs
-	const props = defineProps(VvDialogProps)
-	const emit = defineEmits(VvDialogEvents)
-	const dialogEl: Ref<HTMLDialogElement | undefined> = ref()
+const dialogEl: Ref<HTMLDialogElement | undefined> = ref()
 
-	// data
-	const modelValue = useVModel(props, 'modelValue', emit)
-	const localModelValue = ref(false)
-	const isOpened = computed({
-		get: () => modelValue.value ?? localModelValue.value,
-		set: (newValue) => {
-			if (modelValue.value === undefined) {
-				localModelValue.value = newValue
-				return
-			}
-			modelValue.value = newValue
-		},
-	})
+// data
+const modelValue = useVModel(props, 'modelValue', emit)
+const localModelValue = ref(false)
+const isOpened = computed({
+    get: () => modelValue.value ?? localModelValue.value,
+    set: (newValue) => {
+        if (modelValue.value === undefined) {
+            localModelValue.value = newValue
+            return
+        }
+        modelValue.value = newValue
+    },
+})
 
-	// template ref
-	const modalWrapper = ref(null)
+// template ref
+const modalWrapper = ref(null)
 
-	// styles
-	const dialogAttrs = computed(() => {
-		const { id } = props
-		return {
-			id,
-		} as DialogHTMLAttributes
-	})
-	const dialogClass = computed(() => {
-		if (!props.size) {
-			return 'vv-dialog'
-		}
-		return ['vv-dialog', `vv-dialog--${props.size}`]
-	})
+/**
+ * @description Define component classes with BEM style.
+ * @returns {Array} The component classes.
+ */
+const { modifiers } = toRefs(props)
+const bemCssClasses = useModifiers(
+    'vv-dialog',
+    modifiers,
+    // DEPRECATED: Must be removed in the future
+    computed(() => {
+        if (props.size) {
+            return { [props.size]: !!props.size }
+        }
+        return {}
+    }),
+)
 
-	// transitions
-	const transitioName = computed(() => `vv-dialog--${props.transition}`)
-	const dialogTransitionHandlers = {
-		'before-enter': () => {
-			if (!dialogEl.value?.open) {
-				dialogEl.value?.showModal()
-			}
-			emit('open')
-			emit('before-enter')
-		},
-		'after-leave': () => {
-			if (dialogEl.value?.open) {
-				dialogEl.value?.close()
-			}
-			emit('close')
-			emit('after-leave')
-		},
-		enter: () => {
-			emit('enter')
-		},
-		'after-enter': () => {
-			emit('after-enter')
-		},
-		'enter-cancelled': () => {
-			emit('enter-cancelled')
-		},
-		'before-leave': () => {
-			emit('before-leave')
-		},
-		leave: () => {
-			emit('leave')
-		},
-		'leave-cancelled': () => {
-			emit('leave-cancelled')
-		},
-	}
+const dialogAttrs = computed(() => {
+    const { id } = props
+    return {
+        id,
+    } as DialogHTMLAttributes
+})
 
-	// methods
-	onClickOutside(modalWrapper, () => {
-		if (!props.keepOpen) {
-			close()
-		}
-	})
+// transitions
+const transitioName = computed(() => `vv-dialog--${props.transition}`)
+const dialogTransitionHandlers = {
+    'before-enter': () => {
+        if (!dialogEl.value?.open) {
+            dialogEl.value?.showModal()
+        }
+        emit('open')
+        emit('beforeEnter')
+    },
+    'after-leave': () => {
+        if (dialogEl.value?.open) {
+            dialogEl.value?.close()
+        }
+        emit('close')
+        emit('afterLeave')
+    },
+    'enter': () => {
+        emit('enter')
+    },
+    'after-enter': () => {
+        emit('afterEnter')
+    },
+    'enter-cancelled': () => {
+        emit('enterCancelled')
+    },
+    'before-leave': () => {
+        emit('beforeLeave')
+    },
+    'leave': () => {
+        emit('leave')
+    },
+    'leave-cancelled': () => {
+        emit('leaveCancelled')
+    },
+}
 
-	function close() {
-		isOpened.value = false
-	}
+// methods
+onClickOutside(modalWrapper, () => {
+    if (!props.keepOpen) {
+        close()
+    }
+})
 
-	function open() {
-		isOpened.value = true
-	}
+function close() {
+    isOpened.value = false
+}
 
-	defineExpose({ close, open })
+function open() {
+    isOpened.value = true
+}
 
-	const onCancel = () => {
-		if (!props.keepOpen) {
-			close()
-		}
-	}
+defineExpose({ close, open })
+
+function onCancel() {
+    if (!props.keepOpen) {
+        close()
+    }
+}
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvDialog',
+}
 </script>
 
 <template>
-	<Transition :name="transitioName" v-on="dialogTransitionHandlers">
-		<dialog
-			v-show="isOpened"
-			v-bind="dialogAttrs"
-			ref="dialogEl"
-			:class="dialogClass"
-			@cancel.stop.prevent="onCancel"
-		>
-			<article ref="modalWrapper" class="vv-dialog__wrapper">
-				<header v-if="$slots.header || title" class="vv-dialog__header">
-					<!-- @slot Header slot -->
-					<slot name="header">
-						{{ title }}
-						<button
-							type="button"
-							aria-label="Close"
-							class="vv-dialog__close"
-							@click.passive="close"
-						>
-							<VvIcon name="close" />
-						</button>
-					</slot>
-				</header>
-				<div class="vv-dialog__content">
-					<!-- @slot Content slot -->
-					<slot />
-				</div>
-				<footer v-if="$slots.footer" class="vv-dialog__footer">
-					<!-- @slot Footer slot -->
-					<slot name="footer" />
-				</footer>
-			</article>
-		</dialog>
-	</Transition>
+    <Transition :name="transitioName" v-on="dialogTransitionHandlers">
+        <dialog
+            v-show="isOpened"
+            v-bind="dialogAttrs"
+            ref="dialogEl"
+            :class="bemCssClasses"
+            @cancel.stop.prevent="onCancel"
+        >
+            <article ref="modalWrapper" class="vv-dialog__wrapper">
+                <header v-if="$slots.header || title" class="vv-dialog__header">
+                    <!-- @slot Header slot -->
+                    <slot name="header">
+                        {{ title }}
+                        <button
+                            type="button"
+                            aria-label="Close"
+                            class="vv-dialog__close"
+                            @click.passive="close"
+                        >
+                            <VvIcon name="close" />
+                        </button>
+                    </slot>
+                </header>
+                <div class="vv-dialog__content">
+                    <!-- @slot Content slot -->
+                    <slot />
+                </div>
+                <footer v-if="$slots.footer" class="vv-dialog__footer">
+                    <!-- @slot Footer slot -->
+                    <slot name="footer" />
+                </footer>
+            </article>
+        </dialog>
+    </Transition>
 </template>