revert: refs #7404 #7404 VnSelect hover

src/components/common/VnInput.vue

@@ -127,27 +127,31 @@ const mixinRules = [
         inputMax: Debe ser menor a {value}
 </i18n>
 <style lang="scss">
-.q-field__append {
+.q-field {
+    &__append {
         padding-inline: 0;
+
+        &.q-field__marginal.row.no-wrap.items-center.row {
+            height: 35px;
+        }
     }
 
-.q-field__append.q-field__marginal.row.no-wrap.items-center.row {
+    &--rounded > .q-field__inner > .q-field__control,
-    height: 20px;
+    &--labeled:not(&--outlined) > .q-field__inner > .q-field__control {
-}
+        height: 43px;
-.q-field--outlined .q-field__append.q-field__marginal.row.no-wrap.items-center.row {
+        align-items: baseline;
-    height: auto;
-}
-.q-field__control {
-    height: unset;
     }
 
-.q-field--labeled {
+    &--labeled {
         .q-field__native,
         .q-field__prefix,
         .q-field__suffix,
         .q-field__input {
             padding-bottom: 0;
-        min-height: 15px;
+            line-height: 20px;
+            min-height: fit-content;
+            align-items: flex-start;
+        }
     }
 }
 </style>

src/components/common/VnInputDate.vue

@@ -105,6 +105,7 @@ const styleAttrs = computed(() => {
             hide-bottom-space
         >
             <template #append>
+                <div style="align-items: flex-end; display: flex">
                     <QIcon
                         name="close"
                         size="xs"
@@ -120,6 +121,7 @@ const styleAttrs = computed(() => {
                             isPopupOpen = false;
                         "
                     />
+
                     <QIcon
                         v-if="showEvent"
                         name="event"
@@ -127,6 +129,7 @@ const styleAttrs = computed(() => {
                         @click="isPopupOpen = !isPopupOpen"
                         :title="t('Open date')"
                     />
+                </div>
             </template>
             <QMenu
                 transition-show="scale"

src/components/common/VnInputTime.vue

@@ -84,6 +84,7 @@ function dateToTime(newDate) {
             hide-bottom-space
         >
             <template #append>
+                <div style="align-items: flex-end; display: flex">
                     <QIcon
                         name="close"
                         size="xs"
@@ -105,6 +106,7 @@ function dateToTime(newDate) {
                         @click="isPopupOpen = !isPopupOpen"
                         :title="t('Open time')"
                     />
+                </div>
             </template>
             <QMenu
                 transition-show="scale"

src/components/ui/VnSearchbar.vue

@@ -170,7 +170,12 @@ async function search() {
     cursor: help;
 }
 #searchbar {
+    .q-field__append.q-field__marginal.row.no-wrap.items-center.row {
+        height: inherit;
+    }
+
     .q-field--standout.q-field--highlighted .q-field__control {
+        align-items: center;
         background-color: white;
         color: black;
         .q-field__native,

src/css/app.scss

@@ -288,14 +288,18 @@ input::-webkit-inner-spin-button {
         color: $info;
     }
 }
+
 .q-field__inner {
     .q-field__control {
         min-height: auto !important;
         display: flex;
-        align-items: flex-end;
+        align-items: self-start;
         padding-bottom: 2px;
         .q-field__native.row {
             min-height: auto !important;
         }
     }
 }
+.q-textarea.q-field--labeled .q-field__control-container {
+    padding-top: 23px;
+}

src/pages/Item/ItemFixedPrice.vue

@@ -102,17 +102,12 @@ const columns = computed(() => [
         label: t('item.fixedPrice.started'),
         field: 'started',
         name: 'started',
-        format: ({ started }) => toDate(started),
         cardVisible: true,
-        ...defaultColumnAttrs,
-        columnField: {
-            component: 'date',
-            class: 'shrink',
-        },
         columnFilter: {
             component: 'date',
         },
-        columnClass: 'expand',
+        style: ' max-width: 90px',
+        format: ({ started }) => toDate(started),
     },
     {
         label: t('item.fixedPrice.ended'),
@@ -120,14 +115,11 @@ const columns = computed(() => [
         name: 'ended',
         ...defaultColumnAttrs,
         cardVisible: true,
-        columnField: {
+
-            component: 'date',
-            class: 'shrink',
-        },
         columnFilter: {
             component: 'date',
         },
-        columnClass: 'expand',
+        style: ' max-width: 100px',
         format: (row) => toDate(row.ended),
     },
 
@@ -469,6 +461,7 @@ function handleOnDataSave({ CrudModelRef }) {
                     option-value="id"
                     v-model="props.row.itemFk"
                     v-on="getRowUpdateInputEvents(props, true, 'select')"
+                    :is-clearable="true"
                 >
                     <template #option="scope">
                         <QItem v-bind="scope.itemProps">
@@ -489,7 +482,6 @@ function handleOnDataSave({ CrudModelRef }) {
                 <FetchedTags :item="row" />
             </template>
             <template #column-rate2="props">
-                <QTd class="col">
                 <VnInput
                     type="currency"
                     style="width: 75px"
@@ -498,10 +490,8 @@ function handleOnDataSave({ CrudModelRef }) {
                 >
                     <template #append> € </template>
                 </VnInput>
-                </QTd>
             </template>
             <template #column-rate3="props">
-                <QTd class="col">
                 <VnInput
                     style="width: 75px"
                     type="currency"
@@ -510,7 +500,6 @@ function handleOnDataSave({ CrudModelRef }) {
                 >
                     <template #append> € </template>
                 </VnInput>
-                </QTd>
             </template>
             <template #column-minPrice="props">
                 <QTd class="col">
@@ -537,7 +526,7 @@ function handleOnDataSave({ CrudModelRef }) {
             <template #column-started="props">
                 <VnInputDate
                     class="vnInputDate"
-                    :show-event="true"
+                    :show-event="false"
                     v-model="props.row.started"
                     v-on="getRowUpdateInputEvents(props, false, 'date')"
                     v-bind="dateStyle(isBigger(props.row.started))"
@@ -546,14 +535,13 @@ function handleOnDataSave({ CrudModelRef }) {
             <template #column-ended="props">
                 <VnInputDate
                     class="vnInputDate"
-                    :show-event="true"
+                    :show-event="false"
                     v-model="props.row.ended"
                     v-on="getRowUpdateInputEvents(props, false, 'date')"
                     v-bind="dateStyle(isLower(props.row.ended))"
                 />
             </template>
             <template #column-warehouseFk="props">
-                <QTd class="col">
                 <VnSelect
                     style="max-width: 150px"
                     :options="warehousesOptions"
@@ -563,7 +551,6 @@ function handleOnDataSave({ CrudModelRef }) {
                     v-model="props.row.warehouseFk"
                     v-on="getRowUpdateInputEvents(props, false, 'select')"
                 />
-                </QTd>
             </template>
             <template #column-deleteAction="{ row, rowIndex }">
                 <QIcon
@@ -597,26 +584,32 @@ function handleOnDataSave({ CrudModelRef }) {
     </QPage>
 </template>
 <style lang="scss">
-.q-table th,
+.q-table {
-.q-table td {
+    th,
+    td {
         padding-inline: 5px !important;
     }
-.q-table tr td {
+
+    tr td {
         font-size: 10pt;
         border-top: none;
         border-collapse: collapse;
     }
-.q-table tbody td {
+
+    tbody td {
         max-width: none;
+
         .q-td.col {
-        & .vnInputDate {
+            .vnInputDate {
                 min-width: 90px;
             }
-        & div.row {
+
-            & .q-checkbox {
+            div.row {
-                & .q-checkbox__inner {
+                .q-checkbox {
+                    .q-checkbox__inner {
                         position: relative !important;
-                    &.q-checkbox__inner--truthy {
+
+                        &--truthy {
                             color: var(--q-primary);
                         }
                     }
@@ -624,6 +617,8 @@ function handleOnDataSave({ CrudModelRef }) {
             }
         }
     }
+}
+
 .q-field__after,
 .q-field__append {
     padding: 0;
@@ -632,6 +627,7 @@ function handleOnDataSave({ CrudModelRef }) {
 tbody tr.highlight .q-td {
     animation: highlight-animation 4s ease-in-out;
 }
+
 @keyframes highlight-animation {
     0% {
         background-color: $primary-light;
@@ -640,12 +636,38 @@ tbody tr.highlight .q-td {
         background-color: transparent;
     }
 }
+
 .subName {
     margin-left: 5%;
     font-size: 0.75rem;
     text-transform: uppercase;
     color: var(--vn-label-color);
 }
+
+.q-td .q-field__control.relative-position.row.no-wrap {
+    height: 25px;
+    display: flex;
+    align-items: center;
+
+    .q-icon:not(.q-select__dropdown-icon) {
+        padding-bottom: 7px;
+    }
+
+    .q-icon.q-select__dropdown-icon {
+        padding-bottom: 5px;
+    }
+
+    .q-field__native,
+    .q-field__prefix,
+    .q-field__suffix,
+    .q-field__input {
+        padding-bottom: 0;
+    }
+
+    .q-field__append.q-field__marginal.row.no-wrap.items-center {
+        align-items: flex-end;
+    }
+}
 </style>
 <i18n>
 es:

src/pages/Item/ItemListFilter.vue

@@ -365,6 +365,7 @@ onMounted(async () => {
             >
                 <QItemSection class="col">
                     <VnSelect
+                        style="max-width: 50%"
                         :label="t('params.tag')"
                         :model-value="fieldFilter.selectedField"
                         :options="moreFields"
@@ -392,6 +393,7 @@ onMounted(async () => {
                         @update:model-value="applyFieldFilters(params, searchFn)"
                     />
                     <VnInput
+                        style="max-width: 50%"
                         v-else
                         v-model="fieldFilter.value"
                         :label="t('params.value')"