Improved slot fill UI

Added custom button
Prop insert form disabled +child
No backdrop close creation forms

app/imports/client/ui/creature/character/CharacterSheetFab.vue

@@ -153,12 +153,13 @@
         }
 
         this.$store.commit('pushDialogStack', {
-          component: 'add-creature-property-dialog',
+          component: 'insert-property-dialog',
           elementId: 'insert-creature-property-type-' + forcedType,
           data: {
             parentDoc: forcedType ? undefined : parent,
             forcedType,
             creatureId: this.creatureId,
+            noBackdropClose: true,
           },
           callback(result){
             if (!result){

app/imports/client/ui/creature/character/CreatureRootDialog.vue

@@ -150,11 +150,12 @@ export default {
     addProperty(){
       let parentPropertyId = this._id;
       this.$store.commit('pushDialogStack', {
-        component: 'add-creature-property-dialog',
+        component: 'insert-property-dialog',
         elementId: 'insert-creature-property-btn',
         data: {
           parentDoc: this.creature,
           creatureId: this._id,
+          noBackdropClose: true,
         },
         callback(result){
           if (!result) return;

app/imports/client/ui/creature/creatureProperties/CreaturePropertyDialog.vue

@@ -261,12 +261,13 @@ export default {
     addProperty({elementId, suggestedType}){
       let parentPropertyId = this.model._id;
       this.$store.commit('pushDialogStack', {
-        component: 'add-creature-property-dialog',
+        component: 'insert-property-dialog',
         elementId,
         data: {
           parentDoc: this.model,
           creatureId: this.creatureId,
           suggestedType,
+          noBackdropClose: true,
         },
         callback(result){
           if (!result) return;

app/imports/client/ui/creature/slots/SlotFillDialog.vue

@@ -146,6 +146,22 @@
         Load More
       </v-btn>
     </v-layout>
+    <v-layout
+      column
+      align-center
+      justify-center
+      class="ma-4"
+    >
+      <v-btn
+        text
+        color="accent"
+        :disabled="!model"
+        data-id="custom-button"
+        @click="insertCustomFiller"
+      >
+        Create custom
+      </v-btn>
+    </v-layout>
     <template v-if="!showDisabled && disabledNodeCount">
       <v-layout
         column
@@ -208,6 +224,9 @@ import LibraryNodeExpansionContent from '/imports/client/ui/library/LibraryNodeE
 import PropertyTags from '/imports/client/ui/properties/viewers/shared/PropertyTags.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import { clone } from 'lodash';
+import getDefaultSlotFiller from '/imports/api/library/methods/getDefaultSlotFiller.js';
+import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js';
+import insertProperty from '/imports/api/creature/creatureProperties/methods/insertProperty.js';
 
 export default {
   components: {
@@ -292,6 +311,49 @@ export default {
           !this.selectedNodeIds.includes(node._id)
         )
     },
+    insertCustomFiller() {
+      if (!this.model) return;
+      const prop = getDefaultSlotFiller(this.model);
+      const parentRef = { id: this.slotId, collection: 'creatureProperties' };
+      const order = this.model.order + 0.5;
+      const $store = this.$store;
+      $store.commit('pushDialogStack', {
+        component: 'insert-property-dialog',
+        elementId: 'custom-button',
+        data: {
+          parentDoc: this.model,
+          creatureId: this.creatureId,
+          prop,
+          noBackdropClose: true,
+        },
+        callback(result) {
+          if (!result) return;
+          if (Array.isArray(result)){
+            let nodeIds = result;
+            insertPropertyFromLibraryNode.call({ nodeIds, parentRef, order });
+            setTimeout(() => $store.dispatch('popDialogStack'), 200);
+          } else if (typeof result === 'object') {
+            let creatureProperty = result;
+            creatureProperty.order = order;
+            insertProperty.call({ creatureProperty, parentRef });
+            setTimeout(() => $store.dispatch('popDialogStack'), 200);
+
+            /* Maybe replace the dialog with the edit version? 
+             * It's a bit jank, but a common use case
+            $store.commit('replaceDialog', {
+              component: 'creature-property-dialog',
+              //elementId: `?`,
+              data: {
+                _id,
+                startInEditTab: true,
+              },
+            });
+            */
+           
+          }
+        }
+      });
+    },
   },
   meteor: {
     $subscribe: {

app/imports/client/ui/dialogStack/DialogComponentIndex.js

@@ -1,5 +1,5 @@
 // Load commonly used dialogs immediately
-import AddCreaturePropertyDialog from '/imports/client/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue';
+import InsertPropertyDialog from '/imports/client/ui/properties/InsertPropertyDialog.vue';
 import CharacterCreationDialog from '/imports/client/ui/creature/character/CharacterCreationDialog.vue';
 import CastSpellWithSlotDialog from '/imports/client/ui/properties/components/spells/CastSpellWithSlotDialog.vue';
 import CreatureFormDialog from '/imports/client/ui/creature/CreatureFormDialog.vue';
@@ -34,7 +34,7 @@ const ShareDialog = () => import('/imports/client/ui/sharing/ShareDialog.vue');
 const UsernameDialog = () => import('/imports/client/ui/user/UsernameDialog.vue');
 
 export default {
-  AddCreaturePropertyDialog,
+  InsertPropertyDialog,
   ArchiveDialog,
   CastSpellWithSlotDialog,
   CharacterCreationDialog,

app/imports/client/ui/library/LibraryNodeDialog.vue

@@ -299,7 +299,7 @@ export default {
       }
       let parentPropertyId = this.model._id;
       this.$store.commit('pushDialogStack', {
-        component: 'add-creature-property-dialog',
+        component: 'insert-property-dialog',
         elementId,
         data: {
           parentDoc: this.model,

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

@@ -16,7 +16,7 @@
           flat
           @change="propertyHelpChanged"
         />
-        <v-btn 
+        <v-btn
           v-if="tab === 1"
           icon
           data-id="help-button"
@@ -61,16 +61,23 @@
         <property-selector
           :no-library-only-props="!showLibraryOnlyProps"
           :parent-type="parentDoc && parentDoc.type"
+          :current-type="type"
           @select="e => type = e"
         />
       </v-tab-item>
-      <v-tab-item :disabled="!type">
+      <v-tab-item
+        :disabled="!type"
+        class="dialog-background"
+        style="min-height: 100%;"
+      >
         <v-card-text
           v-if="!$slots['unwrapped-content']"
+          class="dialog-background"
         >
           <property-form
             v-if="type"
             class="creature-property-form"
+            no-child-insert
             :model="model"
             :errors="errors"
             @change="change"
@@ -84,8 +91,10 @@
         :disabled="!type"
       >
         <v-expansion-panels
+          accordion
+          tile
           multiple
-          inset
+          hover
         >
           <v-expansion-panel
             v-for="libraryNode in libraryNodes"
@@ -196,6 +205,7 @@ import getThemeColor from '/imports/client/ui/utility/getThemeColor.js';
 import PropertySelector from '/imports/client/ui/properties/shared/PropertySelector.vue';
 import {snackbar} from '/imports/client/ui/components/snackbars/SnackbarQueue.js';
 import PropertyForm from '/imports/client/ui/properties/PropertyForm.vue';
+import SimpleSchema from 'simpl-schema';
 
 export default {
   components: {
@@ -227,6 +237,14 @@ export default {
       type: Object,
       default: undefined,
     },
+    prop: {
+      type: Object,
+      default: undefined,
+    },
+    children: {
+      type: Array,
+      default: () => [],
+    },
     hideLibraryTab: Boolean,
     showLibraryOnlyProps: Boolean,
   },
@@ -236,9 +254,10 @@ export default {
   },
   data(){return {
     selectedNodeIds: [],
-    type: this.forcedType || this.suggestedType,
-    model: {
+    type: this.forcedType || this.suggestedType || this.prop?.type || undefined,
+    model: this.prop || {
       type: this.type,
+      children: [],
     },
     searchValue: undefined,
     debounceTime: 0,
@@ -260,6 +279,9 @@ export default {
     type(newType){
       this.changeType(newType);
     },
+    prop(newProp) {
+      this.model = newProp
+    },
   },
   mounted(){
     this.changeType(this.type);
@@ -298,12 +320,16 @@ export default {
       this._subs.searchLibraryNodes.setData('limit', this.currentLimit + 32);
     },
     changeType(type){
+      if (type == 'slotFiller') {
+        type = 'folder';
+        this.type = 'folder';
+      }
       this._subs.searchLibraryNodes.setData('type', type);
       if (!type) return;
       this.tab = 1;
       this.schema = propertySchemasIndex[type];
       this.validationContext = this.schema.newContext();
-      let model = this.schema.clean({});
+      let model = this.schema.clean(this.model || {});
       model.type = type;
       this.model = model;
     },
@@ -357,4 +383,11 @@ export default {
 </script>
 
 <style lang="css" scoped>
+.dialog-background {
+  background-color: #fafafa;
+}
+
+.theme--dark .dialog-background {
+  background-color: #303030;
+}
 </style>

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

@@ -147,6 +147,7 @@
           <v-btn
             v-for="suggestion in suggestedChildren"
             :key="suggestion.type"
+            :disabled="noChildInsert"
             tile
             plain
             :data-id="`insert-${suggestion.type}-property-btn`"
@@ -158,6 +159,7 @@
             {{ suggestion.details.name }}
           </v-btn>
           <v-btn
+            :disabled="noChildInsert"
             tile
             plain
             data-id="insert-any-property-btn"
@@ -171,6 +173,12 @@
             </v-icon>
             {{ suggestedChildren.length ? '...Other' : 'Child' }}
           </v-btn>
+          <div
+            v-if="noChildInsert"
+            class="ma-2 text--disabled"
+          >
+            Children can be added after this property is created
+          </div>
         </outlined-input>
       </v-col>
     </v-row>
@@ -222,6 +230,7 @@ export default {
       default: 'creatureProperties'
     },
     embedded: Boolean, // This dialog is embedded in a page
+    noChildInsert: Boolean, // Don't allow inserting of children in this form
   },
   data() {
     return {

app/imports/client/ui/properties/shared/PropertySelectCard.vue

@@ -2,6 +2,8 @@
   <v-card
     hover
     style="height: 100%; overflow: hidden;"
+    :class="{'accent--text': disabled}"
+    :disabled="disabled"
     @click="e => $emit('click', e)"
   >
     <v-card-title
@@ -42,7 +44,8 @@ export default {
     property: {
       type: Object,
       required: true,
-    }
+    },
+    disabled: Boolean,
   },
   meteor: {
     showPropertyHelp(){

app/imports/client/ui/properties/shared/PropertySelector.vue

@@ -23,6 +23,7 @@
             >
               <property-select-card
                 :property="property"
+                :disabled="type === currentType"
                 @click="$emit('select', type)"
               />
             </v-col>
@@ -46,6 +47,7 @@
           >
             <property-select-card
               :property="property"
+              :disabled="type === currentType"
               @click="$emit('select', type)"
             />
           </v-col>
@@ -72,6 +74,10 @@ export default {
       type: Array,
       default: undefined,
     },
+    currentType: {
+      type: String,
+      default: undefined,
+    }
   },
   data() {
     return {