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

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/VvInputText/VvInputText.vue

@@ -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/VvTextarea/VvTextarea.vue

@@ -2,6 +2,8 @@
 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'
 
 // props, emit and slots
@@ -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
      */