From edf6de25106fe591633f7b60f793852b94841fff Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Thu, 19 Oct 2023 14:51:22 +0200
Subject: [PATCH] feat(app.scss): vn-horizontal flex direction column refs
 #6118

---
 src/components/ui/VnRow.vue                   | 12 ------------
 src/css/app.scss                              |  8 ++++++++
 src/pages/Claim/Card/ClaimBasicData.vue       | 17 ++++++++---------
 src/pages/Customer/Card/CustomerBasicData.vue | 18 +++++++++---------
 4 files changed, 25 insertions(+), 30 deletions(-)
 delete mode 100644 src/components/ui/VnRow.vue

diff --git a/src/components/ui/VnRow.vue b/src/components/ui/VnRow.vue
deleted file mode 100644
index c3c951528..000000000
--- a/src/components/ui/VnRow.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-    <div id="row">
-        <slot></slot>
-    </div>
-</template>
-<style lang="scss" scopped>
-@media screen and (max-width: 800px) {
-    #row {
-        flex-direction: column;
-    }
-}
-</style>
diff --git a/src/css/app.scss b/src/css/app.scss
index 3c8cc50b6..92bddc304 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -39,3 +39,11 @@ body.body--dark {
     --vn-gray: #313131;
     --vn-label: #a8a8a8;
 }
+
+html [vn-horizontal],
+vn-horizontal,
+.vn-horizontal {
+    @media screen and (max-width: 800px) {
+        flex-direction: column;
+    }
+}
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index dd4fe2f88..4a7f61930 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -6,7 +6,6 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -100,7 +99,7 @@ const statesFilter = {
             model="claim"
         >
             <template #form="{ data, validate, filter }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.client.name"
@@ -137,8 +136,8 @@ const statesFilter = {
                             </template>
                         </QInput>
                     </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                </vn-horizontal>
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QSelect
                             v-model="data.workerFk"
@@ -184,8 +183,8 @@ const statesFilter = {
                         >
                         </QSelect>
                     </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                </vn-horizontal>
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model.number="data.packages"
@@ -201,15 +200,15 @@ const statesFilter = {
                             :rules="validate('claim.rma')"
                         />
                     </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                </vn-horizontal>
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QCheckbox
                             v-model="data.hasToPickUp"
                             :label="t('claim.basicData.picked')"
                         />
                     </div>
-                </VnRow>
+                </vn-horizontal>
             </template>
         </FormModel>
     </div>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 952020a82..230ebc8db 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -6,7 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import vn-horizontal from 'components/ui/vn-horizontal.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -62,7 +62,7 @@ const filterOptions = {
     <div class="column items-center">
         <FormModel :url="`Clients/${route.params.id}`" model="customer">
             <template #form="{ data, validate, filter }">
-                <VnRow class="row q-gutter-md q-mb-md">
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.socialName"
@@ -84,8 +84,8 @@ const filterOptions = {
                             :input-debounce="0"
                         />
                     </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                </vn-horizontal>
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.contact"
@@ -103,8 +103,8 @@ const filterOptions = {
                             clearable
                         />
                     </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                </vn-horizontal>
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.phone"
@@ -121,8 +121,8 @@ const filterOptions = {
                             clearable
                         />
                     </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
+                </vn-horizontal>
+                <vn-horizontal class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QSelect
                             v-model="data.salesPersonFk"
@@ -163,7 +163,7 @@ const filterOptions = {
                             :input-debounce="0"
                         />
                     </div>
-                </VnRow>
+                </vn-horizontal>
             </template>
         </FormModel>
     </div>