From 16179a0e884d08d3610a91c524dd53a43958a11a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 1 Oct 2024 13:32:39 +0200
Subject: [PATCH] fix: refs #7404 inputs

---
 src/components/VnTable/VnFilter.vue |   1 +
 src/components/VnTable/VnOrder.vue  |   2 +-
 src/components/VnTable/VnTable.vue  |   2 +-
 src/components/common/VnInput.vue   |   2 +-
 src/components/common/VnSelect.vue  | 109 +++++++++++++---------------
 src/components/ui/VnSearchbar.vue   |   1 +
 src/pages/Item/ItemFixedPrice.vue   |  56 +++++++-------
 7 files changed, 80 insertions(+), 93 deletions(-)

diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index b17fd4407..784833402 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -86,6 +86,7 @@ const components = {
         component: markRaw(VnInputDate),
         event: updateEvent,
         attrs: {
+            showEvent: false,
             ...defaultAttrs,
             style: 'min-width: 150px',
         },
diff --git a/src/components/VnTable/VnOrder.vue b/src/components/VnTable/VnOrder.vue
index 7fdd23b78..20cfc71dc 100644
--- a/src/components/VnTable/VnOrder.vue
+++ b/src/components/VnTable/VnOrder.vue
@@ -71,7 +71,7 @@ defineExpose({ orderBy });
             ]"
             class="no-box-shadow"
             :clickable="true"
-            style="min-width: 40px"
+            style="min-width: 20px; padding: 0 0.9.em"
         >
             <div
                 class="column flex-center"
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 3bcd91b1f..83f6ea166 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -453,7 +453,7 @@ function handleOnDataSaved(_, res) {
                 <template #header-cell="{ col }">
                     <QTh v-if="col.visible ?? true">
                         <div
-                            class="column self-start q-ml-xs ellipsis"
+                            class="column self-start ellipsis"
                             :class="`text-${col?.align ?? 'left'}`"
                             :style="$props.columnSearch ? 'height: 75px' : ''"
                         >
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index e7982c50e..3abcaaf2b 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -142,7 +142,7 @@ const mixinRules = [
     align-items: flex-end;
 }
 .q-field__append.q-field__marginal.row.no-wrap.items-center.row {
-    // height: 30px;
+    height: 30px;
     // background-color: green;
     align-items: flex-end;
 }
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 84ab4b4b6..9545c0498 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -1,8 +1,7 @@
 <script setup>
-import { ref, toRefs, computed, watch, onMounted, useAttrs } from 'vue';
+import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
-import { useValidator } from 'src/composables/useValidator';
 const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
 
 const $props = defineProps({
@@ -38,10 +37,6 @@ const $props = defineProps({
         type: [Array],
         default: () => [],
     },
-    exprBuilder: {
-        type: Function,
-        default: null,
-    },
     isClearable: {
         type: Boolean,
         default: true,
@@ -87,11 +82,10 @@ const $props = defineProps({
         default: false,
     },
 });
-const { validations } = useValidator();
-const requiredFieldRule = (val) => validations().required($attrs.required, val);
-const $attrs = useAttrs();
+
 const { t } = useI18n();
-const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
+const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
+
 const { optionLabel, optionValue, optionFilter, optionFilterValue, options, modelValue } =
     toRefs($props);
 const myOptions = ref([]);
@@ -183,7 +177,6 @@ async function fetchFilter(val) {
         }, {});
     } else defaultWhere = { [key]: getVal(val) };
     const where = { ...(val ? defaultWhere : {}), ...$props.where };
-    $props.exprBuilder && Object.assign(where, $props.exprBuilder(key, val));
     const fetchOptions = { where, include, limit };
     if (fields) fetchOptions.fields = fields;
     if (sortBy) fetchOptions.order = sortBy;
@@ -227,6 +220,7 @@ function nullishToTrue(value) {
 }
 
 const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
+const hover = ref(false);
 </script>
 
 <template>
@@ -240,58 +234,55 @@ const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
         :fields="fields"
         :params="params"
     />
-    <QSelect
-        v-model="value"
-        :options="myOptions"
-        :option-label="optionLabel"
-        :option-value="optionValue"
-        v-bind="$attrs"
-        @filter="filterHandler"
-        :emit-value="nullishToTrue($attrs['emit-value'])"
-        :map-options="nullishToTrue($attrs['map-options'])"
-        :use-input="nullishToTrue($attrs['use-input'])"
-        :hide-selected="nullishToTrue($attrs['hide-selected'])"
-        :fill-input="nullishToTrue($attrs['fill-input'])"
-        ref="vnSelectRef"
-        lazy-rules
-        :class="{ required: $attrs.required }"
-        :rules="mixinRules"
-        virtual-scroll-slice-size="options.length"
-        hide-bottom-space
-    >
-        <template v-if="isClearable" #append>
-            <QIcon
-                v-show="value"
-                name="close"
-                @click.stop="
-                    () => {
-                        value = null;
-                        emit('remove');
-                    }
-                "
-                class="cursor-pointer"
-                size="xs"
-            />
-        </template>
-        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
-            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
-        </template>
-    </QSelect>
+    <div @mouseover="hover = true" @mouseleave="hover = false">
+        <QSelect
+            v-model="value"
+            :options="myOptions"
+            :option-label="optionLabel"
+            :option-value="optionValue"
+            v-bind="$attrs"
+            @filter="filterHandler"
+            :emit-value="nullishToTrue($attrs['emit-value'])"
+            :map-options="nullishToTrue($attrs['map-options'])"
+            :use-input="nullishToTrue($attrs['use-input'])"
+            :hide-selected="nullishToTrue($attrs['hide-selected'])"
+            :fill-input="nullishToTrue($attrs['fill-input'])"
+            ref="vnSelectRef"
+            lazy-rules
+            :class="{ required: $attrs.required }"
+            :rules="$attrs.required ? [requiredFieldRule] : null"
+            virtual-scroll-slice-size="options.length"
+        >
+            <template
+                v-if="hover && value && !$attrs.disabled && $props.isClearable"
+                #append
+            >
+                <QIcon
+                    v-show="value"
+                    name="close"
+                    @click.stop="
+                        () => {
+                            value = null;
+                            emit('remove');
+                        }
+                    "
+                    class="cursor-pointer"
+                    size="xs"
+                />
+            </template>
+            <template
+                v-for="(_, slotName) in $slots"
+                #[slotName]="slotData"
+                :key="slotName"
+            >
+                <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+            </template>
+        </QSelect>
+    </div>
 </template>
 
 <style scoped lang="scss">
 .q-field--outlined {
     max-width: 100%;
 }
-.q-field__inner {
-    .q-field__control {
-        min-height: auto !important;
-
-        display: flex;
-        align-items: flex-end;
-        .q-field__native.row {
-            min-height: auto !important;
-        }
-    }
-}
 </style>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 183312660..a4a3c1b9c 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -171,6 +171,7 @@ async function search() {
 #searchbar {
     .q-field > .q-field__inner > .q-field__control {
         height: 40px;
+        align-items: flex-start;
     }
     .q-field--standout.q-field--highlighted .q-field__control {
         align-items: center;
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 7d4d6b896..85e04dc6d 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -489,28 +489,24 @@ function handleOnDataSave({ CrudModelRef }) {
                 <FetchedTags :item="row" />
             </template>
             <template #column-rate2="props">
-                <QTd class="col">
-                    <VnInput
-                        type="currency"
-                        style="width: 75px"
-                        v-model.number="props.row.rate2"
-                        v-on="getRowUpdateInputEvents(props)"
-                    >
-                        <template #append>€</template>
-                    </VnInput>
-                </QTd>
+                <VnInput
+                    type="currency"
+                    style="width: 75px"
+                    v-model.number="props.row.rate2"
+                    v-on="getRowUpdateInputEvents(props)"
+                >
+                    <template #append>€</template>
+                </VnInput>
             </template>
             <template #column-rate3="props">
-                <QTd class="col">
-                    <VnInput
-                        style="width: 75px"
-                        type="currency"
-                        v-model.number="props.row.rate3"
-                        v-on="getRowUpdateInputEvents(props)"
-                    >
-                        <template #append>€</template>
-                    </VnInput>
-                </QTd>
+                <VnInput
+                    style="width: 75px"
+                    type="currency"
+                    v-model.number="props.row.rate3"
+                    v-on="getRowUpdateInputEvents(props)"
+                >
+                    <template #append>€</template>
+                </VnInput>
             </template>
             <template #column-minPrice="props">
                 <QTd class="col">
@@ -553,17 +549,15 @@ function handleOnDataSave({ CrudModelRef }) {
                 />
             </template>
             <template #column-warehouseFk="props">
-                <QTd class="col">
-                    <VnSelect
-                        style="max-width: 150px"
-                        :options="warehousesOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="props.row.warehouseFk"
-                        v-on="getRowUpdateInputEvents(props, false, 'select')"
-                    />
-                </QTd>
+                <VnSelect
+                    style="max-width: 150px"
+                    :options="warehousesOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="props.row.warehouseFk"
+                    v-on="getRowUpdateInputEvents(props, false, 'select')"
+                />
             </template>
             <template #column-deleteAction="{ row, rowIndex }">
                 <QIcon