@volverjs/ui-vue 0.0.10-beta.37 → 0.0.10-beta.39

package/src/components/VvAlertGroup/VvAlertGroup.vue

@@ -49,6 +49,7 @@ export default {
         <slot name="before" />
         <TransitionGroup
             tag="div"
+            role="group"
             :name="hasTransition"
             class="vv-alert-group__list"
             v-on="alertGroupTransitionHandlers"

package/src/components/VvCombobox/VvCombobox.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string | Option">
 import type { Ref } from 'vue'
 import { toRefs } from 'vue'
 import VvIcon from '../VvIcon/VvIcon.vue'
@@ -11,16 +11,16 @@ import VvButton from '../VvButton/VvButton.vue'
 import HintSlotFactory from '../common/HintSlot'
 import type { Option } from '../../types/generic'
 import { DropdownRole } from '../../constants'
-import { VvComboboxProps, VvComboboxEvents } from '.'
+import { type VvComboboxEvents, useVvComboboxProps } from '.'
 
 // props, emit and slots
-const props = defineProps(VvComboboxProps)
-
-const emit = defineEmits(VvComboboxEvents)
-
+// WARNING: This is a provisiaonal implementation, it may change in the future
+const props = defineProps(useVvComboboxProps<T>())
+const emit = defineEmits<VvComboboxEvents>()
 const slots = useSlots()
 
 // props merged with volver defaults (now only for labels)
+const VvComboboxProps = useVvComboboxProps<T>()
 const propsDefaults = useDefaults<typeof VvComboboxProps>(
     'VvCombobox',
     VvComboboxProps,
@@ -28,11 +28,11 @@ const propsDefaults = useDefaults<typeof VvComboboxProps>(
 )
 
 // Grouped options
-function isGroup(option: string | Option) {
+function isGroup(option: T) {
     if (typeof option === 'string') {
         return false
     }
-    return option.options && option.options.length > 0
+    return option.options?.length
 }
 
 // hint slot
@@ -79,9 +79,7 @@ const debouncedSearchText = refDebounced(
 )
 watch(debouncedSearchText, () => {
     emit('update:search', debouncedSearchText.value)
-    /**
-     * @deprecated change:search should not be used, use update:search instead
-     */
+    // DEPRECATED: Must be removed in the future
     // eslint-disable-next-line vue/custom-event-name-casing
     emit('change:search', debouncedSearchText.value)
 })
@@ -203,9 +201,9 @@ const filteredOptions = computedAsync(async () => {
 
 /**
  * Check if an option exist into modelValue array (multiple) or is equal to modelValue (single)
- * @param {string | Option} option
+ * @param {T} option
  */
-function isOptionSelected(option: string | Option) {
+function isOptionSelected(option: T) {
     if (Array.isArray(props.modelValue)) {
         // check if contain whole option or option value
         return (
@@ -225,7 +223,7 @@ function isOptionSelected(option: string | Option) {
  * Check if is multiple mode, object mode or "string" mode
  */
 const selectedOptions = computed(() => {
-    const options = props.options.reduce<Array<Option | string>>(
+    const options = props.options.reduce<T[]>(
         (acc, value) => {
             if (isGroup(value)) {
                 return [...acc, ...getOptionGrouped(value)]
@@ -241,7 +239,7 @@ const selectedOptions = computed(() => {
 
 const hasValue = computed(() => {
     return selectedOptions.value
-        .map((option: string | Option) => getOptionLabel(option))
+        .map((option: T) => getOptionLabel(option))
         .join(props.separator)
 })
 
@@ -254,16 +252,16 @@ function onClickInput() {
 
 /**
  * Function triggered on input of checkbox or radio (multple or single mode)
- * @param option {string | Option} option value
+ * @param option {T} option value
  */
-function onInput(option: string | Option) {
+function onInput(option: T) {
     if (props.disabled || props.readonly) {
         return
     }
 
     // get option value
     const value = getOptionValue(option)
-    let toReturn: string | string[] | Option | Option[] | undefined = value
+    let toReturn = value
 
     // check multiple prop, override value with array and remove or add the value
     if (props.multiple) {
@@ -285,7 +283,7 @@ function onInput(option: string | Option) {
                 : [...props.modelValue, value]
         }
         else {
-            toReturn = [value as Option]
+            toReturn = [value]
         }
     }
     else {

package/src/components/VvCombobox/index.ts

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue'
+import type { MaybeElement } from '@vueuse/core'
 import {
     ValidProps,
     InvalidProps,
@@ -18,16 +19,16 @@ import {
 } from '../../props'
 import type { Option } from '../../types/generic'
 
-export const VvComboboxEvents = [
-    'update:modelValue',
-    'update:search',
+export type VvComboboxEvents = {
+    'update:modelValue': [any]
+    'update:search': [string]
     /**
-     * @deprecated change:search should not be used, use update:search instead
+     * @deprecated use update:search instead
      */
-    'change:search',
-    'focus',
-    'blur',
-]
+    'change:search': [string]
+    'focus': [MaybeElement]
+    'blur': [MaybeElement]
+}
 
 export const VvComboboxProps = {
     ...IdNameProps,
@@ -177,3 +178,23 @@ export const VvComboboxProps = {
         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

@@ -27,19 +27,29 @@ const isOpened = computed({
 // template ref
 const modalWrapper = ref(null)
 
-// styles
+/**
+ * @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 {}
+    }),
+)
+
 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}`]
-})
 
 // transitions
 const transitioName = computed(() => `vv-dialog--${props.transition}`)
@@ -114,7 +124,7 @@ export default {
             v-show="isOpened"
             v-bind="dialogAttrs"
             ref="dialogEl"
-            :class="dialogClass"
+            :class="bemCssClasses"
             @cancel.stop.prevent="onCancel"
         >
             <article ref="modalWrapper" class="vv-dialog__wrapper">

package/src/components/VvDialog/index.ts

@@ -1,4 +1,4 @@
-import { IdProps } from '../../props'
+import { IdProps, ModifiersProps } from '@/props'
 
 export const VvDialogEvents = [
     'open',
@@ -15,6 +15,7 @@ export const VvDialogEvents = [
 ]
 
 export const VvDialogProps = {
+    ...ModifiersProps,
     ...IdProps,
     /**
      * Dialog title
@@ -33,6 +34,7 @@ export const VvDialogProps = {
     transition: { type: String, default: 'fade-block' },
     /**
      * Dialog size
+     * @deprecated use modifiers instead
      */
     size: String,
     /**

package/src/components/VvInputFile/VvInputFile.vue

@@ -6,13 +6,11 @@ import type { UploadedFile } from '../../types'
 import VvButton from '../VvButton/VvButton.vue'
 import VvIcon from '../VvIcon/VvIcon.vue'
 import HintSlotFactory from '../common/HintSlot'
-import { VvInputFileProps, type VvInputFileEvents } from '.'
+import { type VvInputFileEvents, VvInputFileProps } from '.'
 
 // props, emit, slots and attrs
 const props = defineProps(VvInputFileProps)
-
 const emit = defineEmits<VvInputFileEvents>()
-
 const slots = useSlots()
 
 // props merged with volver defaults (now only for labels)
@@ -169,6 +167,11 @@ function onClickDropArea() {
 }
 
 function onClickRemoveFile(index: number) {
+    const toRemove = !Array.isArray(localModelValue.value) ? localModelValue.value : localModelValue.value[index]
+    if (!toRemove) {
+        return
+    }
+    emit('remove', toRemove)
     if (!Array.isArray(localModelValue.value)) {
         localModelValue.value = undefined
         return
@@ -176,9 +179,9 @@ function onClickRemoveFile(index: number) {
     if (selectedFileIndex.value === index) {
         selectedFileIndex.value = 0
     }
-    const toReturn = [...localModelValue.value]
-    toReturn.splice(index, 1)
-    localModelValue.value = toReturn
+    const newModelValue = [...localModelValue.value]
+    newModelValue.splice(index, 1)
+    localModelValue.value = newModelValue
 }
 
 const selectedFileIndex = ref(0)
@@ -227,13 +230,13 @@ function sizeInKiB(size?: number) {
 }
 
 function onClickDownloadFile(file: File | UploadedFile) {
-    const link = document.createElement('a')
-    if (file instanceof File) {
-        link.href = URL.createObjectURL(file)
-    }
-    else if (file.url) {
-        link.href = file.url
+    emit('download', file)
+    const href = file instanceof File ? URL.createObjectURL(file) : file.url
+    if (!href) {
+        return
     }
+    const link = document.createElement('a')
+    link.href = href
     link.setAttribute('download', file.name)
     document.body.appendChild(link)
     link.click()

package/src/components/VvInputFile/index.ts

@@ -13,6 +13,12 @@ import { type VvIconProps, ACTION_ICONS } from '../VvIcon'
 import type { UploadedFile } from '@/types'
 
 export type VvInputFileEvents = {
+    'remove': [
+        File | UploadedFile,
+    ]
+    'download': [
+        File | UploadedFile,
+    ]
     'update:modelValue': [
 		File | UploadedFile | (File | UploadedFile)[] | undefined,
     ]

package/src/components/VvSelect/VvSelect.vue

@@ -1,18 +1,18 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string | Option">
 import type { SelectHTMLAttributes } from 'vue'
 import VvIcon from '../VvIcon/VvIcon.vue'
 import HintSlotFactory from '../common/HintSlot'
-import { VvSelectProps, VvSelectEmits } from '.'
-import type { Option } from '@/types/generic'
+import type { Option } from '../../types/generic'
+import { type VvSelectEmits, useVvSelectProps } from '.'
 
 // props, emit and slots
-const props = defineProps(VvSelectProps)
-
-const emit = defineEmits(VvSelectEmits)
-
+// WARNING: This is a provisiaonal implementation, it may change in the future
+const props = defineProps(useVvSelectProps<T>())
+const emit = defineEmits<VvSelectEmits>()
 const slots = useSlots()
 
 // props merged with volver defaults (now only for labels)
+const VvSelectProps = useVvSelectProps<T>()
 const propsDefaults = useDefaults<typeof VvSelectProps>(
     'VvSelect',
     VvSelectProps,
@@ -149,10 +149,11 @@ const localModelValue = computed({
 })
 
 // Grouped options
-function isGroup(option: string | Option) {
-    if (typeof option === 'string')
+function isGroup(option: T) {
+    if (typeof option === 'string') {
         return false
-    return option && option.options && option.options.length > 0
+    }
+    return option.options?.length
 }
 </script>
 

package/src/components/VvSelect/index.ts

@@ -1,3 +1,4 @@
+import type { MaybeElement } from '@vueuse/core'
 import {
     ValidProps,
     InvalidProps,
@@ -16,6 +17,13 @@ import {
     AutocompleteProps,
     LabelProps,
 } from '../../props'
+import type { Option } from '../../types/generic'
+
+export type VvSelectEmits = {
+    'update:modelValue': [any]
+    'focus': [MaybeElement]
+    'blur': [MaybeElement]
+}
 
 export const VvSelectProps = {
     ...IdNameProps,
@@ -66,4 +74,14 @@ export const VvSelectProps = {
     placeholder: String,
 }
 
-export const VvSelectEmits = ['update:modelValue', 'focus', 'blur']
+// WARNING: This is a provisiaonal implementation, it may change in the future
+export function useVvSelectProps<T extends Option | string>() {
+    return {
+        ...VvSelectProps,
+        options: {
+            ...VvSelectProps.options,
+            type: Array as PropType<T[]>,
+            default: () => [],
+        },
+    }
+}

package/src/composables/useComponentFocus.ts

@@ -2,7 +2,7 @@ import type { MaybeElement, MaybeElementRef } from '@vueuse/core'
 
 export function useComponentFocus(
     inputTemplateRef: MaybeElementRef<MaybeElement>,
-    emit: (event: 'focus' | 'blur', value: unknown) => void,
+    emit: ((name: 'blur', ...args: any[]) => void) & ((name: 'focus', ...args: any[]) => void) & ((name: any, ...args: any[]) => void),
 ) {
     const { focused } = useFocus(inputTemplateRef)
 

package/src/composables/useOptions.ts

@@ -4,39 +4,45 @@ import type { Option } from '../types/generic'
 export function useOptions(props: any) {
     const { options, labelKey, valueKey, disabledKey } = toRefs(props)
 
-    const getOptionLabel = (option: string | Option): string => {
-        if (typeof option !== 'object' && option !== null)
+    const getOptionLabel = <T extends string | Option>(option: T): string => {
+        if (typeof option === 'string') {
             return option
-
+        }
         return String(
             typeof labelKey.value === 'function'
                 ? labelKey.value(option)
-                : get(option, labelKey.value),
+                : get(option as object, labelKey.value),
         )
     }
 
-    const getOptionValue = (option: string | Option) => {
-        if (typeof option !== 'object' && option !== null)
+    const getOptionValue = <T extends string | Option>(option: T) => {
+        if (typeof option === 'string') {
             return option
+        }
 
         return typeof valueKey.value === 'function'
             ? valueKey.value(option)
-            : get(option, valueKey.value)
+            : get(option as object, valueKey.value)
     }
 
-    const isOptionDisabled = (option: string | Option): boolean => {
-        if (typeof option !== 'object' && option !== null)
+    const isOptionDisabled = <T extends string | Option>(option: T): boolean => {
+        if (typeof option === 'string') {
             return false
+        }
 
         return typeof disabledKey.value === 'function'
             ? disabledKey.value(option)
-            : get(option, disabledKey.value)
+            : get(option as object, disabledKey.value)
     }
 
-    const getOptionGrouped = (option: string | Option) => {
-        if (typeof option !== 'object' && option !== null)
+    const getOptionGrouped = <T extends string | Option>(option: T) => {
+        if (typeof option == 'string') {
             return []
-        return option.options || []
+        }
+        if (typeof option === 'object' && option && 'options' in option) {
+            return option.options as T[]
+        }
+        return []
     }
 
     return {

package/src/stories/Combobox/Combobox.stories.ts

@@ -5,6 +5,7 @@ import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
 
 const meta: Meta<typeof VvCombobox> = {
     title: 'Components/Combobox',
+    // @ts-expect-error missing generic components support
     component: VvCombobox,
     args: defaultArgs,
     argTypes,

package/src/stories/Combobox/ComboboxIconPosition.stories.ts

@@ -5,6 +5,7 @@ import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
 
 const meta: Meta<typeof VvCombobox> = {
     title: 'Components/Combobox/Icon',
+    // @ts-expect-error missing generic components support
     component: VvCombobox,
     args: defaultArgs,
     argTypes,

package/src/stories/Combobox/ComboboxMultiple.stories.ts

@@ -5,6 +5,7 @@ import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
 
 const meta: Meta<typeof VvCombobox> = {
     title: 'Components/Combobox/Multiple',
+    // @ts-expect-error missing generic components support
     component: VvCombobox,
     args: defaultArgs,
     argTypes,

package/src/stories/Combobox/ComboboxOptions.stories.ts

@@ -5,6 +5,7 @@ import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
 
 const meta: Meta<typeof VvCombobox> = {
     title: 'Components/Combobox/Options',
+    // @ts-expect-error missing generic components support
     component: VvCombobox,
     args: defaultArgs,
     argTypes,

package/src/stories/Combobox/ComboboxSlots.stories.ts

@@ -7,6 +7,7 @@ import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
 
 const meta: Meta<typeof VvCombobox> = {
     title: 'Components/Combobox/Slots',
+    // @ts-expect-error missing generic components support
     component: VvCombobox,
     args: defaultArgs,
     argTypes,

package/src/stories/Dialog/Dialog.settings.ts

@@ -1,5 +1,5 @@
 import type { ArgTypes } from '@storybook/vue3'
-import { DefaultSlotArgTypes } from '@/stories/argTypes'
+import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
 
 export const defaultArgs = {
     id: 'dialog',
@@ -16,6 +16,14 @@ export const argTypes: ArgTypes = {
         control: 'radio',
         options: ['fade-block', 'fade-inline', 'scale'],
     },
+    modifiers: {
+        ...ModifiersArgTypes.modifiers,
+        options: [
+            'standard',
+            'small',
+            'fullscreen',
+        ],
+    },
     size: {
         control: 'radio',
         options: ['standard', 'small', 'fullscreen'],

package/src/stories/Dialog/DialogModifiers.stories.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { Default } from './Dialog.stories'
+import { argTypes, defaultArgs } from './Dialog.settings'
+import VvDialog from '@/components/VvDialog/VvDialog.vue'
+
+const meta: Meta<typeof VvDialog> = {
+    title: 'Components/Dialog/Modifiers',
+    component: VvDialog,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvDialog>
+
+export const Standard: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        title: 'Standard',
+        modifiers: 'standard',
+    },
+}
+
+export const Small: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        title: 'Small',
+        modifiers: 'small',
+    },
+}
+
+export const Fullscreen: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        title: 'Fullscreen',
+        modifiers: 'fullscreen',
+    },
+}

package/src/stories/Select/Select.stories.ts

@@ -5,6 +5,7 @@ import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 const meta: Meta<typeof VvSelect> = {
     title: 'Components/Select',
+    // @ts-expect-error missing generic components support
     component: VvSelect,
     args: defaultArgs,
     argTypes,

package/src/stories/Select/SelectIconPosition.stories.ts

@@ -5,6 +5,7 @@ import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 const meta: Meta<typeof VvSelect> = {
     title: 'Components/Select/Icon',
+    // @ts-expect-error missing generic components support
     component: VvSelect,
     args: defaultArgs,
     argTypes,

package/src/stories/Select/SelectOptions.stories.ts

@@ -5,6 +5,7 @@ import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 const meta: Meta<typeof VvSelect> = {
     title: 'Components/Select/Options',
+    // @ts-expect-error missing generic components support
     component: VvSelect,
     args: defaultArgs,
     argTypes,

package/src/stories/Select/SelectSlots.stories.ts

@@ -5,6 +5,7 @@ import VvSelect from '@/components/VvSelect/VvSelect.vue'
 
 const meta: Meta<typeof VvSelect> = {
     title: 'Components/Select/Slots',
+    // @ts-expect-error missing generic components support
     component: VvSelect,
     args: defaultArgs,
     argTypes,

package/src/types/input-file.ts

@@ -3,7 +3,7 @@ export type UploadedFile<Source = undefined> = Source extends undefined
             name: string
             size: number
             type: string
-            url: string
+            url?: string
             thumbnailUrl?: string
             lastModified?: number
         }
@@ -11,7 +11,7 @@ export type UploadedFile<Source = undefined> = Source extends undefined
             name: string
             size: number
             type: string
-            url: string
+            url?: string
             thumbnailUrl?: string
             lastModified?: number
             source: Source