[FIX] customer form implemented for details

src/assets/_variables.sass

@@ -1,4 +1,5 @@
 $app-main-color: #7c7bad
 $app-bg-color: #fff
 $app-border-color: #d3d3d3
-$app-title-color: #d3d3d3
+$app-title-color: #d3d3d3
+$app-separator-color: #9e9e9e

src/components/forms/CustomerForm.vue

@@ -1,33 +1,33 @@
 <template lang="pug">
-    .customer-form(:style='{ width, height }')
+    .customer-form
         .form-header(v-if='!!title')
             h2 {{ title }}
             hr
-        form.form-display
+        form.form-display(:style='{ width, height }')
             .form-separator
                 h3 Detalles Generales
                 hr
             .form-item
                 label.form-label Nombre
-                input.form-input(readonly)
+                input.form-input(:value="customer.name || ''" readonly)
             .form-item
                 label.form-label R.U.C/C.I.Nº
-                input.form-input(readonly)
+                input.form-input(:value="customer.ruc || ''" readonly)
             .form-item
                 label.form-label Celular
-                input.form-input(readonly)
+                input.form-input(:value="customer.phone || ''" readonly)
             .form-item
                 label.form-label Teléfono
-                input.form-input(readonly)
+                input.form-input(:value="customer.mobile || ''" readonly)
             .form-item
                 label.form-label Email
-                input.form-input(readonly)
+                input.form-input(:value="customer.email || ''" readonly)
             .form-separator
                 h3 Créditos
                 hr
             .form-item
                 label.form-label Créditos
-                input.form-input(readonly)
+                input.form-input(:value="customer.credit || 0" readonly)
             .form-actions(v-if="mode === 'form'")
                 button.form-action(@click='onAccept') Aceptar
                 button.form-action(@click='onCancel') Cancelar
@@ -40,13 +40,24 @@
                 type: String,
                 default: ''
             },
+            customer: {
+                type: Object,
+                default: {
+                    name: '',
+                    ruc: '',
+                    phone: '',
+                    mobile: '',
+                    email: '',
+                    credit: 0
+                }
+            },
             mode: {
                 type: String,
                 default: 'form'
             },
             width: {
                 type: String,
-                default: '350px'
+                default: '320px'
             },
             height: {
                 type: String,
@@ -76,6 +87,12 @@
                 margin: 0 15px
         .form-display
             padding: 15px
+            .form-separator
+                h3
+                    color: $app-separator-color
+                    font-size: 8pt
+                hr
+                    margin-top: 5px
             .form-item
                 width: 100%
                 margin-bottom: 10px

src/components/steps/Customer.vue

@@ -6,7 +6,7 @@
                 card-grid(:items='customers' :loading='loadingCustomers' canAdd @onAdd='showCustomerForm' @onSelect='selectCustomer')
                 customer-modal(:show='showingCustomerForm' @onAccept='submitCustomer')
             transition(name='slide-fade')
-                customer-form(v-if='!!selectedCustomer' mode='details')
+                customer-form(v-if='!!selectedCustomer' :customer='selectedCustomer' mode='details')
 </template>
 
 <script>