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

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

@@ -2,6 +2,11 @@
 import type { MaskedNumberOptions } from 'imask'
 import type { InputHTMLAttributes } from 'vue'
 import { useIMask } from 'vue-imask'
+import {
+    getDateFromInputValue,
+    getInputValueFromDate,
+    isDateIsoString,
+} from '../../utils/DateUtilities'
 import HintSlotFactory from '../common/HintSlot'
 import VvDropdown from '../VvDropdown/VvDropdown.vue'
 import VvDropdownOption from '../VvDropdown/VvDropdownOption.vue'
@@ -62,9 +67,20 @@ const localModelValue = useDebouncedInput(
     debounce?.value ?? 0,
 )
 
+// seconds
+const hasSeconds = computed(() => {
+    const stepValue = typeof step.value === 'number' ? step.value : Number.parseInt(step.value)
+    if (Number.isNaN(stepValue)) {
+        return false
+    }
+    return stepValue % 60 !== 0
+})
+
 // mask
 const NEGATIVE_ZERO_REGEX = /^-0?[.,]?[0*]?$/
 const maskReady = ref(false)
+const modelValueDate = ref<Date>()
+const modelValueDateIsoString = ref<string>()
 const { el, mask, typed, masked, unmasked } = useIMask(
     computed(
         () => {
@@ -115,56 +131,62 @@ const { el, mask, typed, masked, unmasked } = useIMask(
                 localModelValue.value = typed.value
                 return
             }
-            if (type.value === INPUT_TYPES.DATE) {
-                if (
-                    el.value instanceof HTMLInputElement
-                    && el.value.type === 'date'
-                ) {
-                    localModelValue.value = el.value.value
-                    return
-                }
-                let date = typed.value
-                if (date === null || date === '') {
+            if (type.value === INPUT_TYPES.DATETIME_LOCAL
+                || type.value === INPUT_TYPES.DATE
+                || type.value === INPUT_TYPES.TIME
+                || type.value === INPUT_TYPES.MONTH
+            ) {
+                if (!typed.value) {
                     if (!localModelValue.value) {
                         return
                     }
+                    if (modelValueDate.value) {
+                        localModelValue.value = undefined
+                        return
+                    }
                     localModelValue.value = ''
                     return
                 }
-                if (!(date instanceof Date)) {
-                    date = new Date(date)
-                }
-                localModelValue.value = `${date.getFullYear()}-${(
-                    `0${
-                        date.getMonth() + 1}`
-                ).slice(-2)}-${(`0${date.getDate()}`).slice(-2)}`
-                return
-            }
-            if (type.value === INPUT_TYPES.DATETIME_LOCAL) {
-                if (
-                    el.value instanceof HTMLInputElement
-                    && el.value.type === 'datetime-local'
-                ) {
-                    localModelValue.value = el.value.value
+                if (!(typed.value instanceof Date) && !modelValueDate.value && !modelValueDateIsoString.value) {
+                    localModelValue.value = typed.value
                     return
                 }
+
                 let date = typed.value
-                if (date === null || date === '') {
-                    if (!localModelValue.value) {
+                if (!(date instanceof Date)) {
+                    date = getDateFromInputValue(typed.value, type.value)
+                }
+                if (modelValueDate.value || modelValueDateIsoString.value) {
+                    const toReturn = new Date(modelValueDate.value || modelValueDateIsoString.value as string)
+                    if (type.value === INPUT_TYPES.DATETIME_LOCAL
+                        || type.value === INPUT_TYPES.DATE
+                        || type.value === INPUT_TYPES.MONTH
+                    ) {
+                        toReturn.setFullYear(date.getFullYear())
+                        toReturn.setMonth(date.getMonth())
+                    }
+                    if (type.value === INPUT_TYPES.DATETIME_LOCAL
+                        || type.value === INPUT_TYPES.DATE
+                    ) {
+                        toReturn.setDate(date.getDate())
+                    }
+                    if (type.value === INPUT_TYPES.DATETIME_LOCAL
+                        || type.value === INPUT_TYPES.TIME) {
+                        toReturn.setHours(date.getHours())
+                        toReturn.setMinutes(date.getMinutes())
+                        toReturn.setSeconds(date.getSeconds())
+                    }
+                    if (modelValueDate.value instanceof Date) {
+                        if (localModelValue.value?.getTime() === toReturn.getTime()) {
+                            return
+                        }
+                        localModelValue.value = toReturn
                         return
                     }
-                    localModelValue.value = ''
+                    localModelValue.value = toReturn.toISOString()
                     return
                 }
-                if (!(typed.value instanceof Date)) {
-                    date = new Date(date)
-                }
-                localModelValue.value = `${date.getFullYear()}-${(
-                    `0${
-                        date.getMonth() + 1}`
-                ).slice(-2)}-${(`0${date.getDate()}`).slice(-2)}T${(
-                    `0${date.getHours()}`
-                ).slice(-2)}:${(`0${date.getMinutes()}`).slice(-2)}`
+                localModelValue.value = getInputValueFromDate(date, type.value, hasSeconds.value)
                 return
             }
             if (!localModelValue.value && !unmasked.value) {
@@ -174,14 +196,14 @@ const { el, mask, typed, masked, unmasked } = useIMask(
         },
     },
 )
-function updateMaskValue(newValue: string | number | undefined | null) {
+function updateMaskValue(newValue: string | number | Date | undefined | null) {
     if (newValue === undefined || newValue === null) {
         typed.value = ''
         unmasked.value = ''
         return
     }
     if (props.iMask?.mask === Date) {
-        typed.value = new Date(newValue)
+        typed.value = newValue instanceof Date ? newValue : new Date(newValue)
         return
     }
     if (
@@ -191,6 +213,27 @@ function updateMaskValue(newValue: string | number | undefined | null) {
     ) {
         return
     }
+    if (type.value === INPUT_TYPES.DATE
+        || type.value === INPUT_TYPES.MONTH
+        || type.value === INPUT_TYPES.DATETIME_LOCAL
+        || type.value === INPUT_TYPES.TIME) {
+        if (newValue instanceof Date || isDateIsoString(newValue)) {
+            if (newValue instanceof Date) {
+                modelValueDate.value = newValue
+                modelValueDateIsoString.value = undefined
+            }
+            else {
+                modelValueDateIsoString.value = newValue as string
+                modelValueDate.value = undefined
+            }
+            const newDate = new Date(newValue)
+            typed.value = getInputValueFromDate(newDate, type.value, hasSeconds.value)
+            unmasked.value = typed.value
+            return
+        }
+        modelValueDate.value = undefined
+        modelValueDateIsoString.value = undefined
+    }
     typed.value = newValue
     unmasked.value = `${typed.value}`
 }
@@ -219,7 +262,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 +275,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 +427,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)
@@ -531,10 +572,9 @@ const hasStyle = computed(() => {
         return undefined
     }
     return {
-        width:
-				localModelValue.value !== undefined
-				    ? `${String(localModelValue.value).length + 1}ch`
-				    : undefined,
+        width: localModelValue.value !== undefined
+            ? `${String(localModelValue.value).length + 1}ch`
+            : undefined,
     }
 })
 
@@ -651,7 +691,7 @@ export default {
         </HintSlot>
         <VvDropdown
             v-if="hasSuggestions"
-            ref="dropdownEl"
+            ref="suggestionsDropdownEl"
             :reference="wrapperEl"
             :autofocus-first="false"
             :trigger-width="true"

package/src/components/VvInputText/index.ts

@@ -45,7 +45,7 @@ export const VvInputTextProps = {
      * Input value
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
      */
-    modelValue: [String, Number],
+    modelValue: [String, Number, Date],
     /**
      * Type of form control
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type

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
      */

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

@@ -157,3 +157,28 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
     // check accessibility
     await expect(element).toHaveNoViolations()
 }
+
+export async function isoTest({ canvasElement, args }: PlayAttributes) {
+    const element = await within(canvasElement).findByTestId('element')
+    const input = element.getElementsByTagName('input')[0] as HTMLInputElement
+    const value = await within(canvasElement).findByTestId('value')
+
+    const inputDate = getDateFromInputValue(input.value, args.type)
+    if (!inputDate) {
+        await expect(value.innerHTML).toEqual('null')
+        return
+    }
+    const valueDate = new Date(value.innerHTML)
+
+    if (args.type === INPUT_TYPES.TIME || args.type === INPUT_TYPES.DATETIME_LOCAL) {
+        expect(inputDate.getHours()).toEqual(valueDate.getHours())
+        expect(inputDate.getMinutes()).toEqual(valueDate.getMinutes())
+    }
+    if (args.type === INPUT_TYPES.MONTH || args.type === INPUT_TYPES.DATE || args.type === INPUT_TYPES.DATETIME_LOCAL) {
+        expect(inputDate.getMonth()).toEqual(valueDate.getMonth())
+        expect(inputDate.getFullYear()).toEqual(valueDate.getFullYear())
+    }
+    if (args.type === INPUT_TYPES.DATE || args.type === INPUT_TYPES.DATETIME_LOCAL) {
+        expect(inputDate.getDate()).toEqual(valueDate.getDate())
+    }
+}

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

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { argTypes, defaultArgs } from './InputText.settings'
+import { isoTest } from './InputText.test'
+
+const meta: Meta<typeof VvInputText> = {
+    title: 'Components/InputText/Iso',
+    component: VvInputText,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputText>
+
+export const TypeDate: Story = {
+    args: {
+        ...defaultArgs,
+        type: 'date',
+    },
+    render: args => ({
+        components: { VvInputText },
+        setup() {
+            return { args }
+        },
+        data: () => ({
+            inputValue: `2024-12-31T23:00:00.000Z`,
+        }),
+        template: /* html */ `
+			<vv-input-text v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element" />
+			<div>Value: <span data-testId="value">{{ inputValue }}</span></div>
+		`,
+    }),
+    play: isoTest,
+}
+
+export const TypeTime: Story = {
+    ...TypeDate,
+    args: {
+        ...defaultArgs,
+        type: 'time',
+    },
+}
+
+export const TypeTimeMinute: Story = {
+    ...TypeDate,
+    args: {
+        ...defaultArgs,
+        type: 'time',
+        step: 60,
+    },
+}
+
+export const TypeMonth: Story = {
+    ...TypeDate,
+    args: {
+        ...defaultArgs,
+        type: 'month',
+    },
+}
+
+export const TypeDateTime: Story = {
+    ...TypeDate,
+    args: {
+        ...defaultArgs,
+        type: 'datetime-local',
+    },
+}