Forms try to hold your place better

Expanding form sections keeps them expanded when
changing property viewed or opening a new prop
Disabled auto-focus, because it forces scroll

app/imports/client/ui/properties/PropertyForm.vue

@@ -283,6 +283,7 @@ export default {
     }
   },
   mounted() {
+    /** Disable auto-focus, it gets in the way more than it helps
     // Don't autofocus on mobile, it brings up the on-screen keyboard
     if (this.$vuetify.breakpoint.smAndDown) return;
 
@@ -291,6 +292,7 @@ export default {
         this.$refs.focusFirst.focus()
       }
     }, 300);
+    */
   },
   methods: {
     selectSubProperty(_id){

app/imports/client/ui/properties/forms/ActionForm.vue

@@ -93,7 +93,7 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections>
+    <form-sections type="action">
       <form-section name="Resources Consumed">
         <resources-form
           :model="model.resources"

app/imports/client/ui/properties/forms/AdjustmentForm.vue

@@ -62,7 +62,7 @@
         />
       </v-col>
     </v-row>
-    <form-sections>
+    <form-sections type="adjustment">
       <form-section name="Log">
         <smart-switch
           label="Don't show in log"
@@ -71,12 +71,6 @@
           @change="change('silent', ...arguments)"
         />
       </form-section>
-      <form-section
-        v-if="$slots.children"
-        name="Children"
-      >
-        <slot name="children" />
-      </form-section>
       <slot />
     </form-sections>
   </div>

app/imports/client/ui/properties/forms/AttributeForm.vue

@@ -74,7 +74,7 @@
       @change="({path, value, ack}) =>
         $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <form-sections>
+    <form-sections type="attribute">
       <v-expand-transition>
         <form-section
           v-if="model.attributeType === 'healthBar'"

app/imports/client/ui/properties/forms/BranchForm.vue

@@ -29,7 +29,7 @@
           $emit('change', {path: ['condition', ...path], value, ack})"
       />
     </v-expand-transition>
-    <form-sections>
+    <form-sections type="branch">
       <form-section name="Log">
         <smart-switch
           label="Don't show in log"

app/imports/client/ui/properties/forms/BuffForm.vue

@@ -29,7 +29,7 @@
       :error-messages="errors.target"
       @change="change('target', ...arguments)"
     />
-    <form-sections>
+    <form-sections type="buff">
       <form-section
         v-if="$slots.children"
         name="Children"

app/imports/client/ui/properties/forms/BuffRemoverForm.vue

@@ -52,7 +52,7 @@
         </v-row>
       </div>
     </v-expand-transition>
-    <form-sections>
+    <form-sections type="buffRemover">
       <form-section
         v-if="$slots.children"
         name="Children"

app/imports/client/ui/properties/forms/ClassForm.vue

@@ -22,7 +22,7 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections>
+    <form-sections type="class">
       <form-section name="Class levels from libraries">
         <tag-targeting
           :model="model"

app/imports/client/ui/properties/forms/ClassLevelForm.vue

@@ -39,6 +39,7 @@
     />
     <form-sections
       v-if="$slots.default"
+      type="classLevel"
     >
       <slot />
     </form-sections>

app/imports/client/ui/properties/forms/ConstantForm.vue

@@ -24,6 +24,7 @@
     </v-row>
     <form-sections
       v-if="$slots.default"
+      type="constant"
     >
       <slot />
     </form-sections>

app/imports/client/ui/properties/forms/ContainerForm.vue

@@ -71,7 +71,10 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections v-if="$slots.default">
+    <form-sections
+      v-if="$slots.default"
+      type="container"
+    >
       <slot />
     </form-sections>
   </div>

app/imports/client/ui/properties/forms/DamageForm.vue

@@ -42,7 +42,7 @@
       :error-messages="errors.target"
       @change="change('target', ...arguments)"
     />
-    <form-sections>
+    <form-sections type="damage">
       <form-section name="Log">
         <smart-switch
           label="Don't show in log"

app/imports/client/ui/properties/forms/DamageMultiplierForm.vue

@@ -39,7 +39,7 @@
         />
       </v-col>
     </v-row>
-    <form-sections>
+    <form-sections type="damageMultiplier">
       <form-section
         v-if="$slots.children"
         name="Children"

app/imports/client/ui/properties/forms/EffectForm.vue

@@ -111,6 +111,7 @@
     </v-expand-transition>
     <form-sections
       v-if="$slots.default"
+      type="effect"
     >
       <slot />
     </form-sections>

app/imports/client/ui/properties/forms/FeatureForm.vue

@@ -21,6 +21,7 @@
 
     <form-sections
       v-if="$slots.default"
+      type="feature"
     >
       <slot />
     </form-sections>

app/imports/client/ui/properties/forms/FolderForm.vue

@@ -1,7 +1,7 @@
 <template lang="html">
   <div class="folder-form">
     <div class="layout wrap">
-      <form-sections>
+      <form-sections type="folder">
         <form-section name="Grouping">
           <smart-switch
             label="Group children on a card"

app/imports/client/ui/properties/forms/ItemForm.vue

@@ -80,7 +80,7 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections>
+    <form-sections type="item">
       <form-section
         name="Behavior"
       >

app/imports/client/ui/properties/forms/NoteForm.vue

@@ -20,6 +20,7 @@
 
     <form-sections
       v-if="$slots.default"
+      type="note"
     >
       <slot />
     </form-sections>

app/imports/client/ui/properties/forms/PointBuyForm.vue

@@ -5,7 +5,7 @@
       :model="model"
       @change="e => $emit('change', e)"
     />
-    <form-sections>
+    <form-sections type="pointBuy">
       <form-section name="Point buy settings">
         <v-row dense>
           <v-col

app/imports/client/ui/properties/forms/ProficiencyForm.vue

@@ -77,6 +77,7 @@
     </v-row>
     <form-sections
       v-if="$slots.default"
+      type="proficiency"
     >
       <slot />
     </form-sections>

app/imports/client/ui/properties/forms/ReferenceForm.vue

@@ -57,6 +57,7 @@
     </v-row>
     <form-sections
       v-if="$slots.default"
+      type="reference"
     >
       <slot />
     </form-sections>

app/imports/client/ui/properties/forms/RollForm.vue

@@ -28,7 +28,7 @@
         />
       </v-col>
     </v-row>
-    <form-sections>
+    <form-sections type="roll">
       <form-section name="Log">
         <smart-switch
           label="Don't show in log"

app/imports/client/ui/properties/forms/SavingThrowForm.vue

@@ -43,7 +43,7 @@
         />
       </v-col>
     </v-row>
-    <form-sections>
+    <form-sections type="savingThrow">
       <form-section name="Log">
         <smart-switch
           label="Don't show in log"

app/imports/client/ui/properties/forms/SkillForm.vue

@@ -52,7 +52,7 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections>
+    <form-sections type="skill">
       <form-section name="Base Values">
         <v-row dense>
           <v-col

app/imports/client/ui/properties/forms/SlotFillerForm.vue

@@ -8,6 +8,7 @@
     />
     <form-sections
       v-if="$slots.default"
+      type="slotFiller"
     >
       <slot />
     </form-sections>

app/imports/client/ui/properties/forms/SlotForm.vue

@@ -105,14 +105,7 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections>
-      <form-section
-        v-if="$slots.children"
-        name="Children"
-      >
-        <slot name="children" />
-      </form-section>
-
+    <form-sections type="slot">
       <form-section name="Behavior">
         <v-row dense>
           <!--

app/imports/client/ui/properties/forms/SpellForm.vue

@@ -231,7 +231,7 @@
       @change="({path, value, ack}) =>
         $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <form-sections>
+    <form-sections type="spell">
       <form-section name="Resources Consumed">
         <resources-form
           :model="model.resources"

app/imports/client/ui/properties/forms/SpellListForm.vue

@@ -65,6 +65,7 @@
 
     <form-sections
       v-if="$slots.default"
+      type="spellList"
     >
       <slot />
     </form-sections>

app/imports/client/ui/properties/forms/ToggleForm.vue

@@ -47,7 +47,7 @@
       </v-expand-transition>
     </v-row>
 
-    <form-sections>
+    <form-sections type="toggle">
       <form-section name="Behavior">
         <v-col
           cols="12"

app/imports/client/ui/properties/forms/TriggerForm.vue

@@ -82,7 +82,7 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections>
+    <form-sections type="trigger">
       <form-section
         name="Log"
       >

app/imports/client/ui/properties/forms/shared/FormSections.vue

@@ -1,5 +1,6 @@
 <template lang="html">
   <v-expansion-panels
+    v-model="expand"
     accordion
     tile
     multiple
@@ -10,5 +11,23 @@
 </template>
 
 <script lang="js">
-export default {}
+export default {
+  props: {
+    type: {
+      type: String,
+      default: undefined,
+    }
+  },
+  data() {
+    return {
+      expand: this.$store.getters.formExpansionByType(this.type),
+    };
+  },
+  watch: {
+    expand(value) {
+      if (!this.type) return;
+      this.$store.commit('setFormExpansion', {type: this.type, value});
+    }
+  }
+}
 </script>

app/imports/client/ui/vuexStore.js

@@ -17,6 +17,7 @@ const store = new Vuex.Store({
     pageTitle: undefined,
     characterSheetTabs: {},
     showDetailsDialog: false,
+    formExpansions: {},
   },
   getters: {
     tabById: (state) => (id) => {
@@ -30,7 +31,10 @@ const store = new Vuex.Store({
       } else {
         return tabs[tabNumber]
       }
-    }
+    },
+    formExpansionByType: (state) => (type) => {
+      return state.formExpansions[type] || [];
+    },
   },
   mutations: {
     toggleDrawer(state) {
@@ -68,6 +72,9 @@ const store = new Vuex.Store({
     setShowDetailsDialog(state, value) {
       state.showDetailsDialog = value;
     },
+    setFormExpansion(state, { type, value }) {
+      state.formExpansions[type] = value;
+    },
   },
 });