@volverjs/ui-vue 0.0.10-beta.53 → 0.0.10-beta.55

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -170,10 +170,10 @@ export default {
             v-model="localModelValue"
             type="checkbox"
             class="vv-checkbox__input"
-            :name="name"
+            :name
             :disabled="isDisabled"
             :value="hasValue"
-            :tabindex="tabindex"
+            :tabindex
             :aria-invalid="isInvalid"
             :aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
             :aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -43,6 +43,7 @@ const bemCssClasses = useModifiers(
     computed(() => ({
         disabled: disabled.value,
         readonly: readonly.value,
+        required: props.required,
         horizontal: !vertical.value,
         valid: valid.value,
         invalid: invalid.value,
@@ -56,6 +57,7 @@ function getOptionProps(option: string | Option, index: number) {
         name: props.name,
         label: getOptionLabel(option),
         value: getOptionValue(option),
+        required: props.required,
     }
 }
 const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots)

package/src/components/VvCombobox/VvCombobox.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts" generic="T extends string | Option">
 import type { Ref } from 'vue'
-import { toRefs } from 'vue'
 import type { Option } from '../../types/generic'
+import { toRefs } from 'vue'
+import { useVvComboboxProps, type VvComboboxEvents } from '.'
 import { DropdownRole } from '../../constants'
 import HintSlotFactory from '../common/HintSlot'
 import VvBadge from '../VvBadge/VvBadge.vue'
@@ -11,7 +12,6 @@ import VvDropdownOptgroup from '../VvDropdown/VvDropdownOptgroup.vue'
 import VvDropdownOption from '../VvDropdown/VvDropdownOption.vue'
 import VvIcon from '../VvIcon/VvIcon.vue'
 import VvSelect from '../VvSelect/VvSelect.vue'
-import { type VvComboboxEvents, useVvComboboxProps } from '.'
 
 // props, emit and slots
 // WARNING: This is a provisiaonal implementation, it may change in the future
@@ -31,7 +31,7 @@ const propsDefaults = useDefaults<typeof VvComboboxProps>(
 const inputEl: Ref<HTMLElement | null> = ref(null)
 const inputSearchEl: Ref<HTMLElement | null> = ref(null)
 const wrapperEl: Ref<HTMLElement | null> = ref(null)
-const dropdownEl = ref<typeof VvDropdown>()
+const dropdownEl = ref<InstanceType<typeof VvDropdown>>()
 
 // hint slot
 const {

package/src/components/VvInputFile/VvInputFile.vue

@@ -43,10 +43,13 @@ const bemCssClasses = useModifiers(
     'vv-input-file',
     modifiers,
     computed(() => ({
-        'dragging': isDragging.value,
-        'loading': props.loading && !hasProgress.value,
         'valid': props.valid === true,
         'invalid': props.invalid === true,
+        'loading': props.loading && !hasProgress.value,
+        'disabled': props.disabled,
+        'required': props.required,
+        'readonly': props.readonly,
+        'dragging': isDragging.value,
         'icon-before': !!hasIconBefore.value,
         'icon-after': !!hasIconAfter.value,
         'drop-area': hasDropArea.value,
@@ -325,18 +328,19 @@ export default {
                 :id="hasId"
                 ref="inputEl"
                 type="file"
-                :readonly="readonly"
-                :disabled="disabled"
-                :placeholder="placeholder"
+                :readonly
+                :disabled
+                :required
+                :placeholder
                 :aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
                 :aria-invalid="invalid"
                 :aria-errormessage="
                     hasInvalidLabelOrSlot ? hasHintId : undefined
                 "
                 :multiple="isMultiple"
-                :accept="accept"
-                :capture="capture"
-                :name="name"
+                :accept
+                :capture
+                :name
                 @change="onChange"
             >
             <progress

package/src/components/VvInputFile/index.ts

@@ -9,6 +9,7 @@ import {
     LoadingProps,
     ModifiersProps,
     ReadonlyProps,
+    RequiredProps,
     ValidProps,
 } from '../../props'
 import { ACTION_ICONS, type VvIconProps } from '../VvIcon'
@@ -35,6 +36,7 @@ export const VvInputFileProps = {
     ...LoadingProps,
     ...ReadonlyProps,
     ...DisabledProps,
+    ...RequiredProps,
     ...IconProps,
     /**
      * Input value

package/src/components/VvInputText/VvInputText.vue

@@ -174,8 +174,8 @@ const { el, mask, typed, masked, unmasked } = useIMask(
         },
     },
 )
-function updateMaskValue(newValue: string | number | undefined) {
-    if (newValue === undefined) {
+function updateMaskValue(newValue: string | number | undefined | null) {
+    if (newValue === undefined || newValue === null) {
         typed.value = ''
         unmasked.value = ''
         return
@@ -219,7 +219,7 @@ watch(
 const inputEl = el as Ref<HTMLInputElement>
 const innerEl = ref<HTMLInputElement>()
 const wrapperEl = ref<HTMLDivElement>()
-const dropdownEl = ref<typeof VvDropdown>()
+const suggestionsDropdownEl = ref<InstanceType<typeof VvDropdown>>()
 
 defineExpose({ $inner: innerEl })
 
@@ -232,26 +232,24 @@ watch(isFocused, (newValue) => {
     if (newValue && propsDefaults.value.selectOnFocus && inputEl.value) {
         inputEl.value.select()
     }
-    if (newValue) {
-        dropdownEl.value?.show()
+    if (newValue && suggestions.value?.size) {
+        suggestionsDropdownEl.value?.show()
         return
     }
-    setTimeout(() => {
-        if (isDirty.value && suggestions.value) {
-            const suggestionsLimit = props.maxSuggestions - 1
-            if (
-                suggestions.value.size > suggestionsLimit
-                && !suggestions.value.has(localModelValue.value)
-            ) {
-                suggestions.value = new Set(
-                    [...suggestions.value].slice(
-                        suggestions.value.size - suggestionsLimit,
-                    ),
-                )
-            }
-            suggestions.value.add(localModelValue.value)
+    if (isDirty.value && suggestions.value) {
+        const suggestionsLimit = props.maxSuggestions
+        if (
+            suggestions.value.size >= suggestionsLimit
+            && !suggestions.value.has(localModelValue.value)
+        ) {
+            suggestions.value = new Set(
+                [...suggestions.value].slice(
+                    suggestions.value.size - suggestionsLimit + 1,
+                ),
+            )
         }
-    }, 300)
+        suggestions.value.add(localModelValue.value)
+    }
 })
 
 // visibility
@@ -386,7 +384,7 @@ const hasSuggestions = computed(
 )
 function onSuggestionSelect(suggestion: string) {
     localModelValue.value = suggestion
-    dropdownEl.value?.hide()
+    suggestionsDropdownEl.value?.hide()
 }
 function onSuggestionRemove(suggestion: string) {
     suggestions.value?.delete(suggestion)
@@ -651,7 +649,7 @@ export default {
         </HintSlot>
         <VvDropdown
             v-if="hasSuggestions"
-            ref="dropdownEl"
+            ref="suggestionsDropdownEl"
             :reference="wrapperEl"
             :autofocus-first="false"
             :trigger-width="true"

package/src/components/VvRadio/VvRadio.vue

@@ -98,10 +98,10 @@ export default {
             v-model="localModelValue"
             type="radio"
             class="vv-radio__input"
-            :name="name"
+            :name
             :disabled="isDisabled"
             :value="hasValue"
-            :tabindex="tabindex"
+            :tabindex
             :aria-invalid="isInvalid"
             :aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
             :aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -43,6 +43,7 @@ const bemCssClasses = useModifiers(
     computed(() => ({
         disabled: disabled.value,
         readonly: readonly.value,
+        required: props.required,
         horizontal: !vertical.value,
         valid: valid.value,
         invalid: invalid.value,
@@ -56,6 +57,7 @@ function getOptionProps(option: string | Option, index: number) {
         name: props.name,
         label: getOptionLabel(option),
         value: getOptionValue(option),
+        required: props.required,
     }
 }
 

package/src/components/VvTextarea/VvTextarea.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { TextareaHTMLAttributes } from 'vue'
+import { VvTextareaEvents, VvTextareaProps } from '.'
 import HintSlotFactory from '../common/HintSlot'
+import VvDropdown from '../VvDropdown/VvDropdown.vue'
+import VvDropdownOption from '../VvDropdown/VvDropdownOption.vue'
 import VvIcon from '../VvIcon/VvIcon.vue'
-import { VvTextareaEvents, VvTextareaProps } from '.'
 
 // props, emit and slots
 const props = defineProps(VvTextareaProps)
@@ -19,13 +21,17 @@ const propsDefaults = useDefaults<typeof VvTextareaProps>(
 )
 
 // template refs
-const textarea = ref()
+const textareaEl = ref<HTMLTextAreaElement>()
+const wrapperEl = ref<HTMLDivElement>()
+const suggestionsDropdownEl = ref<InstanceType<typeof VvDropdown>>()
 
 // data
 const {
     id,
     icon,
     iconPosition,
+    iconRemoveSuggestion,
+    labelRemoveSuggestion,
     label,
     modelValue,
     count,
@@ -36,6 +42,8 @@ const {
     debounce,
     minlength,
     maxlength,
+    storageKey,
+    storageType,
 } = toRefs(props)
 const hasId = useUniqueId(id)
 const hasHintId = computed(() => `${hasId.value}-hint`)
@@ -49,12 +57,41 @@ const localModelValue = useDebouncedInput(modelValue, emit, debounce?.value)
 
 // icons
 const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
+const { hasIcon: hasIconRemoveSuggestion }
+		= useComponentIcon(iconRemoveSuggestion)
 
 // focus
-const { focused } = useComponentFocus(textarea, emit)
+const { focused } = useComponentFocus(textareaEl, emit)
+const isFocused = computed(
+    () => focused.value && !props.disabled && !props.readonly,
+)
+watch(isFocused, (newValue) => {
+    if (newValue && propsDefaults.value.selectOnFocus && textareaEl.value) {
+        textareaEl.value.select()
+    }
+    if (newValue && suggestions.value?.size) {
+        suggestionsDropdownEl.value?.show()
+        return
+    }
+    if (isDirty.value && suggestions.value) {
+        const suggestionsLimit = props.maxSuggestions
+
+        if (
+            suggestions.value.size >= suggestionsLimit
+            && !suggestions.value.has(localModelValue.value)
+        ) {
+            suggestions.value = new Set(
+                [...suggestions.value].slice(
+                    suggestions.value.size - suggestionsLimit + 1,
+                ),
+            )
+        }
+        suggestions.value.add(localModelValue.value)
+    }
+})
 
 // visibility
-const isVisible = useElementVisibility(textarea)
+const isVisible = useElementVisibility(textareaEl)
 watch(isVisible, (newValue) => {
     if (newValue && props.autofocus) {
         focused.value = true
@@ -88,6 +125,41 @@ const isInvalid = computed(() => {
     return undefined
 })
 
+// suggestions
+const suggestions = usePersistence<Set<string>>(
+    storageKey,
+    storageType,
+    new Set(),
+)
+const filteredSuggestions = computed(() => {
+    if (!suggestions.value) {
+        return []
+    }
+    return [...suggestions.value]
+        .filter(
+            suggestion =>
+                isEmpty(localModelValue.value)
+                || (`${suggestion}`
+                    .toLowerCase()
+                    .includes(`${localModelValue.value}`.toLowerCase())
+                    && suggestion !== localModelValue.value),
+        )
+        .reverse()
+})
+const hasSuggestions = computed(
+    () =>
+        storageKey?.value
+        && suggestions.value
+        && suggestions.value.size > 0,
+)
+function onSuggestionSelect(suggestion: string) {
+    localModelValue.value = suggestion
+    suggestionsDropdownEl.value?.hide()
+}
+function onSuggestionRemove(suggestion: string) {
+    suggestions.value?.delete(suggestion)
+}
+
 // hint
 const {
     HintSlot,
@@ -171,7 +243,7 @@ export default {
         <label v-if="label" :for="hasId" class="vv-textarea__label">
             {{ label }}
         </label>
-        <div class="vv-textarea__wrapper">
+        <div ref="wrapperEl" class="vv-textarea__wrapper">
             <!-- @slot Slot to replace icon before textarea -->
             <div v-if="$slots.before" class="vv-textarea__input-before">
                 <!-- @slot Slot before input -->
@@ -185,7 +257,7 @@ export default {
                 />
                 <textarea
                     :id="hasId"
-                    ref="textarea"
+                    ref="textareaEl"
                     v-model="localModelValue"
                     v-bind="hasAttrs"
                     @keyup="emit('keyup', $event)"
@@ -221,5 +293,36 @@ export default {
                 <slot name="invalid" v-bind="hintSlotScope" />
             </template>
         </HintSlot>
+        <VvDropdown
+            v-if="hasSuggestions"
+            ref="suggestionsDropdownEl"
+            :reference="wrapperEl"
+            :autofocus-first="false"
+            :trigger-width="true"
+        >
+            <template #items>
+                <VvDropdownOption
+                    v-for="value in filteredSuggestions"
+                    :key="value"
+                    @click.stop="onSuggestionSelect(value)"
+                >
+                    <div class="flex-1">
+                        <slot name="suggestion" v-bind="{ value }">
+                            {{ value }}
+                        </slot>
+                    </div>
+                    <button
+                        v-if="suggestions && hasIconRemoveSuggestion"
+                        type="button"
+                        tabindex="-1"
+                        class="cursor-pointer"
+                        :title="labelRemoveSuggestion"
+                        @click.stop="onSuggestionRemove(value)"
+                    >
+                        <VvIcon v-bind="hasIconRemoveSuggestion" />
+                    </button>
+                </VvDropdownOption>
+            </template>
+        </VvDropdown>
     </div>
 </template>

package/src/components/VvTextarea/index.ts

@@ -1,5 +1,6 @@
 import type { ExtractPropTypes } from 'vue'
-import { InputTextareaProps } from '../../props'
+import { InputTextareaProps, StorageProps } from '../../props'
+import { ACTION_ICONS, type VvIconProps } from '../VvIcon'
 
 export const WRAP = {
     hard: 'hard',
@@ -16,6 +17,7 @@ export const VvTextareaEvents = ['update:modelValue', 'focus', 'blur', 'keyup']
 
 export const VvTextareaProps = {
     ...InputTextareaProps,
+    ...StorageProps,
     /**
      * Textarea value
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#value
@@ -41,6 +43,35 @@ export const VvTextareaProps = {
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
      */
     spellcheck: { type: [Boolean, String], default: SPELLCHECK.default },
+    /**
+     * VvIcon name for remove suggestion button
+     * @see VVIcon
+     */
+    iconRemoveSuggestion: {
+        type: [String, Object] as PropType<string | VvIconProps>,
+        default: ACTION_ICONS.remove,
+    },
+    /**
+     * Label for remove suggestion button
+     */
+    labelRemoveSuggestion: {
+        type: String,
+        default: 'Remove suggestion',
+    },
+    /**
+     * Maximum number of suggestions
+     */
+    maxSuggestions: {
+        type: Number,
+        default: 5,
+    },
+    /**
+     * Select input text on focus
+     */
+    selectOnFocus: {
+        type: Boolean,
+        default: false,
+    },
     /**
      * If true, the textarea will be resizable
      */

package/src/props/index.ts

@@ -1,4 +1,3 @@
-import type { PropType } from 'vue'
 import type { VvIconProps } from '@/components/VvIcon'
 import type {
     AutoPlacementOptions,
@@ -9,6 +8,7 @@ import type {
 } from '@/types/floating-ui'
 import type { Option } from '@/types/generic'
 import type { NavItem } from '@/types/nav'
+import type { PropType } from 'vue'
 import {
     ActionTag,
     ButtonType,
@@ -493,6 +493,7 @@ export const CheckboxRadioGroupProps = {
     ...ModifiersProps,
     ...LabelProps,
     ...LoadingProps,
+    ...RequiredProps,
     /**
      * Input value
      */

package/src/stories/InputText/InputText.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import VvInputText from '@/components/VvInputText/VvInputText.vue'
 import { Position } from '@/constants'
 import { argTypes, defaultArgs } from './InputText.settings'
-import { defaultTest } from './InputText.test'
+import { checkNullTest, checkUndefinedTest, defaultTest } from './InputText.test'
 
 const meta: Meta<typeof VvInputText> = {
     title: 'Components/InputText',
@@ -39,6 +39,42 @@ export const Default: Story = {
     play: defaultTest,
 }
 
+export const Null: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvInputText },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: null, maskedInputValue: undefined }),
+        template: /* html */ `
+			<vv-input-text v-bind="args" v-model="inputValue" v-model:masked="maskedInputValue" :data-testData="inputValue" data-testId="element" />
+			<div>Value: <span data-testId="value">{{ JSON.stringify(inputValue) }}</span></div>
+		`,
+    }),
+    play: checkNullTest,
+}
+
+export const Undefined: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvInputText },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined, maskedInputValue: undefined }),
+        template: /* html */ `
+			<vv-input-text v-bind="args" v-model="inputValue" v-model:masked="maskedInputValue" :data-testData="inputValue" data-testId="element" />
+			<div>Value: <span data-testId="value">{{ inputValue === undefined ? 'undefined' : inputValue }}</span></div>
+		`,
+    }),
+    play: checkUndefinedTest,
+}
+
 export const Disabled: Story = {
     ...Default,
     args: {

package/src/stories/InputText/InputText.test.ts

@@ -49,6 +49,24 @@ function valueByType(type: InputType, mask?: string, id?: string) {
     }
 }
 
+export async function checkNullTest({ canvasElement }: PlayAttributes) {
+    const element = await within(canvasElement).findByTestId('element')
+    const value = await within(canvasElement).findByTestId('value')
+    const input = element.getElementsByTagName('input')[0]
+
+    await expect(input).toHaveProperty('value', '')
+    await expect(value.innerHTML).toEqual('null')
+}
+
+export async function checkUndefinedTest({ canvasElement }: PlayAttributes) {
+    const element = await within(canvasElement).findByTestId('element')
+    const value = await within(canvasElement).findByTestId('value')
+    const input = element.getElementsByTagName('input')[0]
+
+    await expect(input).toHaveProperty('value', '')
+    await expect(value.innerHTML).toEqual('undefined')
+}
+
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
     const element = await within(canvasElement).findByTestId('element')
     const value = await within(canvasElement).findByTestId('value')

package/src/stories/Textarea/Textarea.stories.ts

@@ -31,7 +31,7 @@ export const Default: Story = {
 				<template #after v-if="args.after"><div class="flex" v-html="args.after"></div></template>
 				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
 			</vv-textarea>
-			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+			<div>Value: <span data-testId="value">{{ inputValue }}</span></div> 
 		`,
     }),
     play: defaultTest,