revert: refs #7404 #7404 VnSelect hover

src/components/VnTable/VnOrder.vue

@@ -71,7 +71,7 @@ defineExpose({ orderBy });
             ]"
             class="no-box-shadow"
             :clickable="true"
-            style="min-width: 20px; padding: 0 0.9.em"
+            style="min-width: 40px"
         >
             <div
                 class="column flex-center"

src/components/VnTable/VnTable.vue

@@ -453,7 +453,7 @@ function handleOnDataSaved(_) {
                 <template #header-cell="{ col }">
                     <QTh v-if="col.visible ?? true">
                         <div
-                            class="column self-start ellipsis"
+                            class="column self-start q-ml-xs ellipsis"
                             :class="`text-${col?.align ?? 'left'}`"
                             :style="$props.columnSearch ? 'height: 75px' : ''"
                         >

src/components/common/VnSelect.vue

@@ -104,8 +104,7 @@ const noOneOpt = ref({
     [optionValue.value]: false,
     [optionLabel.value]: noOneText,
 });
-const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
+
-const hover = ref(false);
 const value = computed({
     get() {
         return $props.modelValue;
@@ -226,6 +225,8 @@ async function filterHandler(val, update) {
 function nullishToTrue(value) {
     return value ?? true;
 }
+
+const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
 </script>
 
 <template>
@@ -239,53 +240,58 @@ function nullishToTrue(value) {
         :fields="fields"
         :params="params"
     />
-    <div @mouseover="hover = true" @mouseleave="hover = false">
+    <QSelect
-        <QSelect
+        v-model="value"
-            v-model="value"
+        :options="myOptions"
-            :options="myOptions"
+        :option-label="optionLabel"
-            :option-label="optionLabel"
+        :option-value="optionValue"
-            :option-value="optionValue"
+        v-bind="$attrs"
-            v-bind="$attrs"
+        @filter="filterHandler"
-            @filter="filterHandler"
+        :emit-value="nullishToTrue($attrs['emit-value'])"
-            :emit-value="nullishToTrue($attrs['emit-value'])"
+        :map-options="nullishToTrue($attrs['map-options'])"
-            :map-options="nullishToTrue($attrs['map-options'])"
+        :use-input="nullishToTrue($attrs['use-input'])"
-            :use-input="nullishToTrue($attrs['use-input'])"
+        :hide-selected="nullishToTrue($attrs['hide-selected'])"
-            :hide-selected="nullishToTrue($attrs['hide-selected'])"
+        :fill-input="nullishToTrue($attrs['fill-input'])"
-            :fill-input="nullishToTrue($attrs['fill-input'])"
+        ref="vnSelectRef"
-            ref="vnSelectRef"
+        lazy-rules
-            lazy-rules
+        :class="{ required: $attrs.required }"
-            :class="{ required: $attrs.required }"
+        :rules="mixinRules"
-            :rules="mixinRules"
+        virtual-scroll-slice-size="options.length"
-            virtual-scroll-slice-size="options.length"
+        hide-bottom-space
-            hide-bottom-space
+    >
-        >
+        <template v-if="isClearable" #append>
-            <template v-if="hover && value && !$attrs.disabled && isClearable" #append>
+            <QIcon
-                <QIcon
+                v-show="value"
-                    v-show="value"
+                name="close"
-                    name="close"
+                @click.stop="
-                    @click.stop="
+                    () => {
-                        () => {
+                        value = null;
-                            value = null;
+                        emit('remove');
-                            emit('remove');
+                    }
-                        }
+                "
-                    "
+                class="cursor-pointer"
-                    class="cursor-pointer"
+                size="xs"
-                    size="xs"
+            />
-                />
+        </template>
-            </template>
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
-            <template
+            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
-                v-for="(_, slotName) in $slots"
+        </template>
-                #[slotName]="slotData"
+    </QSelect>
-                :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>

src/pages/Route/RouteExtendedList.vue

@@ -87,7 +87,6 @@ const columns = computed(() => [
             },
         },
         columnClass: 'expand',
-        style: 'min-width: 210px;',
     },
     {
         align: 'left',