From 44703a5aa5c86c74acb8249d5b6949dd07e0f01f Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 16 May 2023 20:37:32 +0200
Subject: [PATCH] Form overhaul: Container Form

---
 .../ui/properties/forms/ContainerForm.vue     | 129 ++++++++----------
 1 file changed, 57 insertions(+), 72 deletions(-)

diff --git a/app/imports/client/ui/properties/forms/ContainerForm.vue b/app/imports/client/ui/properties/forms/ContainerForm.vue
index 5cef5978..6af54725 100644
--- a/app/imports/client/ui/properties/forms/ContainerForm.vue
+++ b/app/imports/client/ui/properties/forms/ContainerForm.vue
@@ -1,14 +1,45 @@
 <template lang="html">
-  <div class="attribute-form">
-    <div class="layout justify-space-between wrap">
-      <text-field
-        ref="focusFirst"
-        label="Name"
-        :value="model.name"
-        :error-messages="errors.name"
-        @change="change('name', ...arguments)"
-      />
-      <div>
+  <div class="container-form">
+    <v-row dense>
+      <v-col
+        cols="12"
+        md="6"
+      >
+        <text-field
+          label="Value"
+          suffix="gp"
+          type="number"
+          min="0"
+          hint="The value of the item in gold pieces, using decimals for values less than 1 gp"
+          class="mx-1"
+          style="flex-basis: 300px;"
+          prepend-inner-icon="$vuetify.icons.two_coins"
+          :value="model.value"
+          :error-messages="errors.value"
+          @change="change('value', ...arguments)"
+        />
+      </v-col>
+      <v-col
+        cols="12"
+        md="6"
+      >
+        <text-field
+          label="Weight"
+          suffix="lb"
+          type="number"
+          min="0"
+          class="mx-1"
+          style="flex-basis: 300px;"
+          prepend-inner-icon="$vuetify.icons.weight"
+          :value="model.weight"
+          :error-messages="errors.weight"
+          @change="change('weight', ...arguments)"
+        />
+      </v-col>
+      <v-col
+        cols="12"
+        sm="6"
+      >
         <smart-switch
           label="Carried"
           class="mx-3"
@@ -17,37 +48,22 @@
           :error-messages="errors.carried"
           @change="change('carried', ...arguments)"
         />
-      </div>
-    </div>
-    <div class="layout wrap">
-      <text-field
-        label="Value"
-        suffix="gp"
-        type="number"
-        min="0"
-        hint="The value of the item in gold pieces, using decimals for values less than 1 gp"
-        class="mx-1"
-        style="flex-basis: 300px;"
-        prepend-inner-icon="$vuetify.icons.two_coins"
-        :value="model.value"
-        :error-messages="errors.value"
-        @change="change('value', ...arguments)"
-      />
-      <text-field
-        label="Weight"
-        suffix="lb"
-        type="number"
-        min="0"
-        class="mx-1"
-        style="flex-basis: 300px;"
-        prepend-inner-icon="$vuetify.icons.weight"
-        :value="model.weight"
-        :error-messages="errors.weight"
-        @change="change('weight', ...arguments)"
-      />
-    </div>
+      </v-col>
+      <v-col
+        cols="12"
+        sm="6"
+      >
+        <smart-switch
+          label="Contents are weightless"
+          :value="model.contentsWeightless"
+          :error-messages="errors.contentsWeightless"
+          @change="change('contentsWeightless', ...arguments)"
+        />
+      </v-col>
+    </v-row>
 
     <inline-computation-field
+      class="mt-4"
       label="Description"
       :model="model.description"
       :error-messages="errors.description"
@@ -55,47 +71,16 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections>
-      <form-section
-        v-if="$slots.children"
-        name="Children"
-      >
-        <slot name="children" />
-      </form-section>
-
-      <form-section name="Advanced">
-        <smart-combobox
-          label="Tags"
-          multiple
-          chips
-          deletable-chips
-          hint="Used to let slots find this property in a library, should otherwise be left blank"
-          :value="model.tags"
-          @change="change('tags', ...arguments)"
-        />
-        <div class="layout justify-center">
-          <div>
-            <smart-switch
-              label="Contents are weightless"
-              :value="model.contentsWeightless"
-              :error-messages="errors.contentsWeightless"
-              @change="change('contentsWeightless', ...arguments)"
-            />
-          </div>
-        </div>
-      </form-section>
+    <form-sections v-if="$slots.default">
+      <slot />
     </form-sections>
   </div>
 </template>
 
 <script lang="js">
-import FormSection from '/imports/client/ui/properties/forms/shared/FormSection.vue';
 import propertyFormMixin from '/imports/client/ui/properties/forms/shared/propertyFormMixin.js';
 
 export default {
-  components: {
-    FormSection,
-  },
   mixins: [propertyFormMixin],
 }
 </script>