@volverjs/ui-vue 0.0.10-beta.43 → 0.0.10-beta.45

package/src/components/VvCombobox/VvCombobox.vue

@@ -146,15 +146,15 @@ const hasTabindex = computed(() => {
 const localModelValue = computed({
     get: () => {
         if (Array.isArray(props.modelValue)) {
-            return new Set(props.modelValue)
+            return props.modelValue
         }
-        return props.modelValue !== undefined && props.modelValue !== null ? new Set([props.modelValue]) : new Set()
+        return props.modelValue !== undefined && props.modelValue !== null ? [props.modelValue] : []
     },
-    set: (value: Set<unknown>) => {
-        emit('update:modelValue', props.multiple || Array.isArray(props.modelValue) ? [...value] : [...value].pop())
+    set: (value: unknown[]) => {
+        emit('update:modelValue', props.multiple || Array.isArray(props.modelValue) ? value : value.pop())
     },
 })
-const sizeOfModelValue = computed(() => localModelValue.value.size)
+const sizeOfModelValue = computed(() => localModelValue.value.length)
 const isDirty = computed(() => sizeOfModelValue.value > 0)
 const hasMaxValues = computed(() => {
     if (!props.multiple) {
@@ -173,7 +173,7 @@ const isUnselectable = computed(() => {
     if (!props.unselectable) {
         return false
     }
-    return sizeOfModelValue.value > Number(props.minValues)
+    return Number(props.minValues) === 0 || (sizeOfModelValue.value > Number(props.minValues))
 })
 const isSelectable = computed(() => {
     if (isDisabledOrReadonly.value) {
@@ -247,7 +247,16 @@ const filteredOptions = computedAsync(async () => {
  * @param {T} option
  */
 function isOptionSelected(option: T) {
-    return localModelValue.value.has(getOptionValue(option))
+    const optionValue = getOptionValue(option)
+    if (typeof optionValue === 'object') {
+        return localModelValue.value.some((item) => {
+            if (typeof item === 'object') {
+                return JSON.stringify(item) === JSON.stringify(optionValue)
+            }
+            return false
+        })
+    }
+    return localModelValue.value.includes(optionValue)
 }
 
 /**
@@ -288,17 +297,21 @@ function onClickInput() {
  */
 function onInput(option: T) {
     const isSelected = isOptionSelected(option)
+    const optionValue = getOptionValue(option)
     if (isSelected && isUnselectable.value) {
-        localModelValue.value.delete(getOptionValue(option))
+        localModelValue.value = localModelValue.value.filter((item) => {
+            if (typeof optionValue === 'object' && typeof item === 'object') {
+                return JSON.stringify(item) !== JSON.stringify(optionValue)
+            }
+            return item !== optionValue
+        })
     }
     else if (!isSelected && isSelectable.value) {
         if (!props.multiple) {
-            localModelValue.value.clear()
+            localModelValue.value = []
         }
-        localModelValue.value.add(getOptionValue(option))
+        localModelValue.value = [...localModelValue.value, optionValue]
     }
-    // force reactivity
-    localModelValue.value = new Set(localModelValue.value)
     if (!props.multiple && !props.keepOpen) {
         collapse()
     }

package/src/components/VvIcon/VvIcon.vue

@@ -61,7 +61,7 @@ function getSvgContent(svg: string): SVGSVGElement | undefined {
     let dom
     if (typeof window === 'undefined') {
         // SSR
-        // eslint-disable-next-line ts/no-var-requires, ts/no-require-imports
+        // eslint-disable-next-line ts/no-require-imports, ts/no-var-requires
         const { JSDOM } = require('jsdom')
         dom = new JSDOM().window
     }

package/src/components/VvInputFile/VvInputFile.vue

@@ -19,7 +19,7 @@ const propsDefaults = useDefaults<typeof VvInputFileProps>(
     VvInputFileProps,
     props,
 )
-const { modifiers, id, readonly, icon, iconPosition, iconDownload }
+const { modifiers, id, readonly, disabled, icon, iconPosition, iconDownload }
 		= toRefs(props)
 const hasId = useUniqueId(id)
 const hasHintId = computed(() => `${hasId.value}-hint`)
@@ -83,12 +83,14 @@ const files = computed({
     },
 })
 
+const isDisabledOrReadonly = computed(() => props.disabled || props.readonly)
+
 const hasMax = computed(() => {
     return typeof props.max === 'string' ? Number.parseInt(props.max) : props.max
 })
 
 const hasDropArea = computed(() => {
-    return props.dropArea && !readonly.value
+    return props.dropArea && !isDisabledOrReadonly.value
 })
 
 const isMultiple = computed(() => {
@@ -161,7 +163,7 @@ function onClickDropArea() {
     if (!inputEl.value) {
         return
     }
-    if (!readonly.value) {
+    if (!isDisabledOrReadonly.value) {
         inputEl.value.click()
     }
 }
@@ -302,6 +304,7 @@ export default {
                     modifiers="action"
                     :label="!previewSrc ? dropdAreaActionLabel : undefined"
                     :title="previewSrc ? dropdAreaActionLabel : undefined"
+                    :disabled="disabled"
                     :class="{
                         'vv-input-file__drop-area-action': previewSrc,
                     }"
@@ -317,6 +320,7 @@ export default {
                 ref="inputEl"
                 type="file"
                 :readonly="readonly"
+                :disabled="disabled"
                 :placeholder="placeholder"
                 :aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
                 :aria-invalid="invalid"
@@ -379,6 +383,7 @@ export default {
                         type="button"
                         class="vv-input-file__item-remove"
                         :title="labelRemove"
+                        :disabled="disabled"
                         @click.stop="onClickRemoveFile(index)"
                     />
                 </li>

package/src/components/VvInputFile/index.ts

@@ -7,6 +7,7 @@ import {
     LabelProps,
     LoadingProps,
     ReadonlyProps,
+    DisabledProps,
     IconProps,
 } from '../../props'
 import { type VvIconProps, ACTION_ICONS } from '../VvIcon'
@@ -33,6 +34,7 @@ export const VvInputFileProps = {
     ...LabelProps,
     ...LoadingProps,
     ...ReadonlyProps,
+    ...DisabledProps,
     ...IconProps,
     /**
      * Input value

package/src/stories/InputFile/InputFile.stories.ts

@@ -44,6 +44,14 @@ export const Readonly: Story = {
     },
 }
 
+export const Disabled: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        disabled: true,
+    },
+}
+
 export const Valid: Story = {
     ...Default,
     args: {