refactor(invoiceOutList): create dialog

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onUnmounted, ref, computed } from 'vue';
+import { onMounted, onUnmounted, ref, computed, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
@@ -12,7 +12,6 @@ import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
 import { toCurrency, toDate } from 'src/filters/index';
 import { useStateStore } from 'stores/useStateStore';
 import { QBtn } from 'quasar';
-import { watchEffect } from 'vue';
 import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
 
 const { t } = useI18n();
@@ -222,8 +221,7 @@ watchEffect(selectedRows);
             </span>
         </template>
         <template #more-create-dialog="{ data }">
-            <div class="create-dialog">
-                <div class="field-row">
+            <div class="flex no-wrap flex-center">
                 <VnSelect
                     url="Tickets"
                     v-model="data.ticketFk"
@@ -232,7 +230,8 @@ watchEffect(selectedRows);
                     option-label="nickname"
                     option-value="id"
                 />
-                    <span class="separator">O</span>
+                <span class="q-ml-md">O</span>
+            </div>
             <VnSelect
                 url="Clients"
                 v-model="data.clientFk"
@@ -241,8 +240,6 @@ watchEffect(selectedRows);
                 option-label="name"
                 option-value="id"
             />
-                </div>
-                <div class="field-row">
             <VnSelect
                 url="InvoiceOutSerials"
                 v-model="data.invoiceOutSerial"
@@ -255,8 +252,6 @@ watchEffect(selectedRows);
                 :label="t('invoiceOutList.tableVisibleColumns.dueDate')"
                 v-model="data.maxShipped"
             />
-                </div>
-                <div class="field-row">
             <VnSelect
                 url="TaxAreas"
                 v-model="data.area"
@@ -269,35 +264,10 @@ watchEffect(selectedRows);
                 v-model="data.reference"
                 :label="t('invoiceOutList.tableVisibleColumns.ref')"
             />
-                </div>
-            </div>
         </template>
     </VnTable>
 </template>
 
-<style scoped lang="scss">
-.create-dialog {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.field-row {
-    display: flex;
-    gap: 16px;
-    align-items: flex-end;
-
-    > * {
-        flex: 1;
-    }
-
-    .separator {
-        flex: 0 0 auto;
-        align-self: center;
-        padding: 0 8px;
-    }
-}
-</style>
 <i18n>
 en:
     searchInvoice: Search issued invoice