Added children properties to prop edit dialog

2022-06-08 12:22:51 +02:00
parent 11f373ddd8
commit 9b1ec46064
31 changed files with 413 additions and 254 deletions
--- a/app/imports/ui/components/global/IconPicker.vue
+++ b/app/imports/ui/components/global/IconPicker.vue
@@ -7,28 +7,28 @@
    style="overflow-y: auto;"
  >
    <template #activator="{ on }">
-      <div class="layout align-center">
-        <v-btn
-          :loading="loading"
-          outlined
-          :min-width="108"
-          v-on="on"
+      <v-btn
+        :loading="loading"
+        outlined
+        :min-width="108"
+        v-bind="$attrs"
+        :style="buttonStyle"
+        v-on="on"
+      >
+        {{ label }}
+        <svg-icon
+          v-if="safeValue && safeValue.shape"
+          right
+          class="ml-2"
+          :shape="safeValue.shape"
+        />
+        <v-icon
+          v-else
+          right
        >
-          {{ label }}
-          <svg-icon
-            v-if="safeValue && safeValue.shape"
-            right
-            class="ml-2"
-            :shape="safeValue.shape"
-          />
-          <v-icon
-            v-else
-            right
-          >
-            mdi-select-search
-          </v-icon>
-        </v-btn>
-      </div>
+          mdi-select-search
+        </v-icon>
+      </v-btn>
    </template>
    <v-card>
      <v-card-text>
@@ -91,6 +91,10 @@ export default {
    label: {
      type: String,
      default: 'Icon',
+    },
+    buttonStyle: {
+      type: String,
+      default: undefined,
    },
 	},
 	data(){return {
--- a/app/imports/ui/creature/buildTree/FillSlotButton.vue
+++ b/app/imports/ui/creature/buildTree/FillSlotButton.vue
@@ -1,12 +1,15 @@
 <template functional>
  <v-btn
    v-if="!model.quantityExpected || !model.quantityExpected.value || model.spaceLeft"
-    icon
+    :icon="!$slots.default"
+    v-bind="$attrs"
    :data-id="`slot-add-button-${model._id}`"
    class="slot-add-button accent--text"
    @click.stop="fillSlot()"
  >
-    <v-icon>mdi-plus</v-icon>
+    <slot>
+      <v-icon>mdi-plus</v-icon>
+    </slot>
  </v-btn>
 </template>

--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
@@ -17,19 +17,40 @@
      <v-fade-transition
        mode="out-in"
      >
-        <component
-          :is="model.type + 'Form'"
-          v-if="editing"
-          :key="_id"
-          class="creature-property-form"
-          :model="model"
-          @change="change"
-          @push="push"
-          @pull="pull"
-        />
-        <div
-          v-else-if="!editing && $options.components[model.type + 'Viewer']"
-        >
+        <div v-if="editing">
+          <component
+            :is="model.type + 'Form'"
+            :key="_id"
+            class="creature-property-form"
+            :model="model"
+            @change="change"
+            @push="push"
+            @pull="pull"
+          >
+            <template #children>
+              <creature-properties-tree
+                style="width: 100%;"
+                class="mb-2"
+                organize
+                :root="{collection: 'creatureProperties', id: model._id}"
+                @length="childrenLength = $event"
+                @selected="selectSubProperty"
+              />
+              <v-btn
+                icon
+                outlined
+                color="accent"
+                data-id="insert-creature-property-btn"
+                @click="addProperty"
+              >
+                <v-icon>
+                  mdi-plus
+                </v-icon>
+              </v-btn>
+            </template>
+          </component>
+        </div>
+        <div v-else>
          <div
            class="layout mb-4"
          >
@@ -65,9 +86,6 @@
            </property-field>
          </v-row>
        </div>
-        <p v-else>
-          This property can't be viewed yet.
-        </p>
      </v-fade-transition>
    </template>
    <div
@@ -75,17 +93,6 @@
      slot="actions"
      class="layout"
    >
-      <v-btn
-        v-if="!editing && !embedded"
-        text
-        data-id="insert-creature-property-btn"
-        @click="addProperty"
-      >
-        <v-icon left>
-          mdi-plus
-        </v-icon>
-        Child Property
-      </v-btn>
      <v-spacer />
      <v-btn
        text
@@ -256,7 +263,10 @@ export default {
      this.$store.commit('pushDialogStack', {
        component: 'creature-property-dialog',
        elementId: `tree-node-${_id}`,
-        data: {_id},
+        data: {
+          _id,
+          startInEditTab: this.editing,
+        },
      });
    },
    addProperty(){
--- a/app/imports/ui/properties/forms/ActionForm.vue
+++ b/app/imports/ui/properties/forms/ActionForm.vue
@@ -79,7 +79,10 @@
    />

    <form-sections>
-      <form-section name="Resources">
+      <form-section name="Children">
+        <slot name="children" />
+      </form-section>
+      <form-section name="Resources Consumed">
        <resources-form
          :model="model.resources"
          @change="({path, value, ack}) => $emit('change', {path: ['resources', ...path], value, ack})"
@@ -153,15 +156,12 @@
 </template>

 <script lang="js">
-  import FormSection, {FormSections} from '/imports/ui/properties/forms/shared/FormSection.vue';
  import ResourcesForm from '/imports/ui/properties/forms/ResourcesForm.vue';
  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
  import IconColorMenu from '/imports/ui/properties/forms/shared/IconColorMenu.vue';

  export default {
    components: {
-      FormSection,
-      FormSections,
      ResourcesForm,
      IconColorMenu,
    },
--- a/app/imports/ui/properties/forms/AdjustmentForm.vue
+++ b/app/imports/ui/properties/forms/AdjustmentForm.vue
@@ -59,6 +59,12 @@
      :value="model.tags"
      @change="change('tags', ...arguments)"
    />
+    <form-section
+      name="Children"
+      standalone
+    >
+      <slot name="children" />
+    </form-section>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/AttackForm.vue
+++ b/app/imports/ui/properties/forms/AttackForm.vue
@@ -1,16 +0,0 @@
-<template lang="html">
-  <action-form
-    attack-form
-    v-bind="$attrs"
-    v-on="$listeners"
-  />
-</template>
-
-<script lang="js">
-	import ActionForm from '/imports/ui/properties/forms/ActionForm.vue';
-	export default {
-		components: {
-			ActionForm,
-		},
-	};
-</script>
--- a/app/imports/ui/properties/forms/AttributeForm.vue
+++ b/app/imports/ui/properties/forms/AttributeForm.vue
@@ -93,6 +93,10 @@
        </form-section>
      </v-expand-transition>

+      <form-section name="Children">
+        <slot name="children" />
+      </form-section>
+
      <form-section
        name="Advanced"
      >
--- a/app/imports/ui/properties/forms/BranchForm.vue
+++ b/app/imports/ui/properties/forms/BranchForm.vue
@@ -38,6 +38,12 @@
      :value="model.tags"
      @change="change('tags', ...arguments)"
    />
+    <form-section
+      name="Children"
+      standalone
+    >
+      <slot name="children" />
+    </form-section>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/BuffForm.vue
+++ b/app/imports/ui/properties/forms/BuffForm.vue
@@ -45,6 +45,12 @@
      :value="model.tags"
      @change="change('tags', ...arguments)"
    />
+    <form-section
+      name="Children"
+      standalone
+    >
+      <slot name="children" />
+    </form-section>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/ClassLevelForm.vue
+++ b/app/imports/ui/properties/forms/ClassLevelForm.vue
@@ -55,6 +55,12 @@
      :error-messages="errors.tags"
      @change="change('tags', ...arguments)"
    />
+    <form-section
+      name="Children"
+      standalone
+    >
+      <slot name="children" />
+    </form-section>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/ConstantForm.vue
+++ b/app/imports/ui/properties/forms/ConstantForm.vue
@@ -24,6 +24,12 @@
      @change="change('calculation', ...arguments)"
    />
    <calculation-error-list :errors="clientErrors" />
+    <form-section
+      name="Children"
+      standalone
+    >
+      <slot name="children" />
+    </form-section>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/ContainerForm.vue
+++ b/app/imports/ui/properties/forms/ContainerForm.vue
@@ -55,30 +55,35 @@
        $emit('change', {path: ['description', ...path], value, ack})"
    />

-    <form-section
-      name="Advanced"
-      standalone
-    >
-      <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)"
-          />
+    <form-sections>
+      <form-section 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>
-      </div>
-    </form-section>
+      </form-section>
+    </form-sections>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/DamageForm.vue
+++ b/app/imports/ui/properties/forms/DamageForm.vue
@@ -53,6 +53,12 @@
      :error-messages="errors.tags"
      @change="change('tags', ...arguments)"
    />
+    <form-section
+      name="Children"
+      standalone
+    >
+      <slot name="children" />
+    </form-section>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/DamageMultiplierForm.vue
+++ b/app/imports/ui/properties/forms/DamageMultiplierForm.vue
@@ -46,6 +46,9 @@
      </v-col>
    </v-row>
    <form-sections>
+      <form-section name="Children">
+        <slot name="children" />
+      </form-section>
      <form-section
        name="Advanced"
      >
--- a/app/imports/ui/properties/forms/EffectForm.vue
+++ b/app/imports/ui/properties/forms/EffectForm.vue
@@ -149,30 +149,38 @@
        </v-btn>
      </div>
    </v-slide-x-transition>
-    <form-section
-      name="Advanced"
-      standalone
-    >
-      <v-expand-transition>
-        <text-field
-          v-if="model.targetByTags"
-          label="Target field"
-          :value="model.targetField"
-          hint="Target a specific calculation field on the affected properties"
-          :error-messages="errors.targetField"
-          @change="change('targetField', ...arguments)"
+    <form-sections>
+      <form-section
+        name="Children"
+        standalone
+      >
+        <slot name="children" />
+      </form-section>
+
+      <form-section
+        name="Advanced"
+      >
+        <v-expand-transition>
+          <text-field
+            v-if="model.targetByTags"
+            label="Target field"
+            :value="model.targetField"
+            hint="Target a specific calculation field on the affected properties"
+            :error-messages="errors.targetField"
+            @change="change('targetField', ...arguments)"
+          />
+        </v-expand-transition>
+        <smart-combobox
+          label="Tags"
+          multiple
+          chips
+          deletable-chips
+          :value="model.tags"
+          :error-messages="errors.tags"
+          @change="change('tags', ...arguments)"
        />
-      </v-expand-transition>
-      <smart-combobox
-        label="Tags"
-        multiple
-        chips
-        deletable-chips
-        :value="model.tags"
-        :error-messages="errors.tags"
-        @change="change('tags', ...arguments)"
-      />
-    </form-section>
+      </form-section>
+    </form-sections>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/FeatureForm.vue
+++ b/app/imports/ui/properties/forms/FeatureForm.vue
@@ -35,6 +35,12 @@
      :error-messages="errors.tags"
      @change="change('tags', ...arguments)"
    />
+    <form-section
+      name="Children"
+      standalone
+    >
+      <slot name="children" />
+    </form-section>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/FolderForm.vue
+++ b/app/imports/ui/properties/forms/FolderForm.vue
@@ -9,19 +9,27 @@
        :error-messages="errors.name"
        @change="change('name', ...arguments)"
      />
-      <form-section
-        name="Advanced"
-        standalone
-      >
-        <smart-combobox
-          label="Tags"
-          multiple
-          chips
-          deletable-chips
-          :value="model.tags"
-          @change="change('tags', ...arguments)"
-        />
-      </form-section>
+      <form-sections>
+        <form-section
+          name="Children"
+          standalone
+        >
+          <slot name="children" />
+        </form-section>
+
+        <form-section
+          name="Advanced"
+        >
+          <smart-combobox
+            label="Tags"
+            multiple
+            chips
+            deletable-chips
+            :value="model.tags"
+            @change="change('tags', ...arguments)"
+          />
+        </form-section>
+      </form-sections>
    </div>
  </div>
 </template>
--- a/app/imports/ui/properties/forms/ItemForm.vue
+++ b/app/imports/ui/properties/forms/ItemForm.vue
@@ -100,47 +100,53 @@
        $emit('change', {path: ['description', ...path], value, ack})"
    />

-    <form-section
-      name="Advanced"
-      standalone
-    >
-      <smart-combobox
-        label="Tags"
-        class="mr-2"
-        multiple
-        chips
-        deletable-chips
-        hint="Used to let slots find this property in a library, should otherwise be left blank"
-        :value="model.tags"
-        :error-messages="errors.tags"
-        @change="change('tags', ...arguments)"
-      />
-      <smart-switch
-        label="Show increment button"
-        :value="model.showIncrement"
-        :error-messages="errors.showIncrement"
-        @change="change('showIncrement', ...arguments)"
-      />
-      <smart-switch
-        label="Requires attunement"
-        :value="model.requiresAttunement"
-        :error-messages="errors.requiresAttunement"
-        @change="change('requiresAttunement', ...arguments)"
-      />
-      <v-expand-transition>
-        <div
-          v-show="model.requiresAttunement"
-          style="padding-top: 0.1px;"
-        >
-          <smart-switch
-            label="Attuned"
-            :value="model.attuned"
-            :error-messages="errors.attuned"
-            @change="change('attuned', ...arguments)"
-          />
-        </div>
-      </v-expand-transition>
-    </form-section>
+    <form-sections>
+      <form-section name="Children">
+        <slot name="children" />
+      </form-section>
+
+      <form-section
+        name="Advanced"
+        standalone
+      >
+        <smart-combobox
+          label="Tags"
+          class="mr-2"
+          multiple
+          chips
+          deletable-chips
+          hint="Used to let slots find this property in a library, should otherwise be left blank"
+          :value="model.tags"
+          :error-messages="errors.tags"
+          @change="change('tags', ...arguments)"
+        />
+        <smart-switch
+          label="Show increment button"
+          :value="model.showIncrement"
+          :error-messages="errors.showIncrement"
+          @change="change('showIncrement', ...arguments)"
+        />
+        <smart-switch
+          label="Requires attunement"
+          :value="model.requiresAttunement"
+          :error-messages="errors.requiresAttunement"
+          @change="change('requiresAttunement', ...arguments)"
+        />
+        <v-expand-transition>
+          <div
+            v-show="model.requiresAttunement"
+            style="padding-top: 0.1px;"
+          >
+            <smart-switch
+              label="Attuned"
+              :value="model.attuned"
+              :error-messages="errors.attuned"
+              @change="change('attuned', ...arguments)"
+            />
+          </div>
+        </v-expand-transition>
+      </form-section>
+    </form-sections>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/NoteForm.vue
+++ b/app/imports/ui/properties/forms/NoteForm.vue
@@ -35,6 +35,12 @@
      :value="model.tags"
      @change="change('tags', ...arguments)"
    />
+    <form-section
+      name="Children"
+      standalone
+    >
+      <slot name="children" />
+    </form-section>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/ProficiencyForm.vue
+++ b/app/imports/ui/properties/forms/ProficiencyForm.vue
@@ -37,6 +37,12 @@
      :value="model.tags"
      @change="change('tags', ...arguments)"
    />
+    <form-section
+      name="Children"
+      standalone
+    >
+      <slot name="children" />
+    </form-section>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/ResourcesForm.vue
+++ b/app/imports/ui/properties/forms/ResourcesForm.vue
@@ -24,35 +24,33 @@
      @push="({path, value, ack}) => $emit('push', {path: ['itemsConsumed', ...path], value, ack})"
      @pull="({path, ack}) => $emit('pull', {path: ['itemsConsumed', ...path], ack})"
    />
-    <div class="layout justify-center">
-      <v-menu
-        origin="center center"
-        transition="scale-transition"
-        nudge-top="50%"
-        nudge-left="50%"
-      >
-        <template #activator="{ on }">
-          <v-btn
-            :loading="addResourceLoading"
-            :disabled="addResourceLoading || context.editPermission === false"
-            icon
-            large
-            outlined
-            v-on="on"
-          >
-            <v-icon>mdi-plus</v-icon>
-          </v-btn>
-        </template>
-        <v-list>
-          <v-list-item @click="addAttributesConsumed">
-            <v-list-item-title>Add Resource</v-list-item-title>
-          </v-list-item>
-          <v-list-item @click="addItemsConsumed">
-            <v-list-item-title>Add Ammo</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-    </div>
+    <v-menu
+      origin="center center"
+      transition="scale-transition"
+      nudge-top="50%"
+      nudge-left="50%"
+    >
+      <template #activator="{ on }">
+        <v-btn
+          :loading="addResourceLoading"
+          :disabled="addResourceLoading || context.editPermission === false"
+          icon
+          outlined
+          color="accent"
+          v-on="on"
+        >
+          <v-icon>mdi-plus</v-icon>
+        </v-btn>
+      </template>
+      <v-list>
+        <v-list-item @click="addAttributesConsumed">
+          <v-list-item-title>Add Resource</v-list-item-title>
+        </v-list-item>
+        <v-list-item @click="addItemsConsumed">
+          <v-list-item-title>Add Ammo</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/RollForm.vue
+++ b/app/imports/ui/properties/forms/RollForm.vue
@@ -35,6 +35,10 @@
        $emit('change', {path: ['roll', ...path], value, ack})"
    />
    <form-sections>
+      <form-section name="Children">
+        <slot name="children" />
+      </form-section>
+      
      <form-section name="Advanced">
        <v-row dense>
          <v-col
--- a/app/imports/ui/properties/forms/SavingThrowForm.vue
+++ b/app/imports/ui/properties/forms/SavingThrowForm.vue
@@ -65,6 +65,12 @@
      :error-messages="errors.tags"
      @change="change('tags', ...arguments)"
    />
+    <form-section
+      name="Children"
+      standalone
+    >
+      <slot name="children" />
+    </form-section>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/SlotFillerForm.vue
+++ b/app/imports/ui/properties/forms/SlotFillerForm.vue
@@ -1,20 +1,37 @@
 <template lang="html">
  <div class="slot-filler-form">
-    <div class="layout column align-center">
-      <icon-picker
-        label="Icon"
-        :value="model.icon"
-        :error-messages="errors.icon"
-        @change="change('icon', ...arguments)"
-      />
-    </div>
-    <text-field
-      ref="focusFirst"
-      label="Name"
-      :value="model.name"
-      :error-messages="errors.name"
-      @change="change('name', ...arguments)"
-    />
+    <v-row
+      dense
+      align="start"
+    >
+      <v-col
+        cols="12"
+        sm="9"
+        md="10"
+      >
+        <text-field
+          ref="focusFirst"
+          label="Name"
+          :value="model.name"
+          :error-messages="errors.name"
+          @change="change('name', ...arguments)"
+        />
+      </v-col>
+      <v-col
+        cols="12"
+        sm="3"
+        md="2"
+      >
+        <icon-picker
+          :value="model.icon"
+          :error-messages="errors.icon"
+          height="56"
+          width="100%"
+          button-style="margin-bottom: 30px;"
+          @change="change('icon', ...arguments)"
+        />
+      </v-col>
+    </v-row>
    <text-area
      label="Description"
      :value="model.description"
@@ -67,6 +84,12 @@
      :error-messages="errors.tags"
      @change="change('tags', ...arguments)"
    />
+    <form-section
+      name="Children"
+      standalone
+    >
+      <slot name="children" />
+    </form-section>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/SlotForm.vue
+++ b/app/imports/ui/properties/forms/SlotForm.vue
@@ -157,38 +157,43 @@
        $emit('change', {path: ['description', ...path], value, ack})"
    />

-    <form-section
-      name="Advanced"
-      standalone
-    >
-      <div class="layout wrap justify-space-between">
-        <smart-switch
-          label="Hide when full"
-          style="width: 200px; flex-grow: 0;"
-          class="mx-2"
-          :value="model.hideWhenFull"
-          :error-messages="errors.hideWhenFull"
-          @change="change('hideWhenFull', ...arguments)"
+    <form-sections>
+      <form-section name="Children">
+        <slot name="children" />
+      </form-section>
+
+      <form-section
+        name="Advanced"
+      >
+        <div class="layout wrap justify-space-between">
+          <smart-switch
+            label="Hide when full"
+            style="width: 200px; flex-grow: 0;"
+            class="mx-2"
+            :value="model.hideWhenFull"
+            :error-messages="errors.hideWhenFull"
+            @change="change('hideWhenFull', ...arguments)"
+          />
+          <smart-switch
+            label="Ignored"
+            style="width: 200px; flex-grow: 0;"
+            class="mx-2"
+            :value="model.ignored"
+            :error-messages="errors.ignored"
+            @change="change('ignored', ...arguments)"
+          />
+        </div>
+        <smart-combobox
+          label="Tags"
+          hint="This slot's own tags which will be used to fill other slots"
+          multiple
+          chips
+          deletable-chips
+          :value="model.tags"
+          @change="change('tags', ...arguments)"
        />
-        <smart-switch
-          label="Ignored"
-          style="width: 200px; flex-grow: 0;"
-          class="mx-2"
-          :value="model.ignored"
-          :error-messages="errors.ignored"
-          @change="change('ignored', ...arguments)"
-        />
-      </div>
-      <smart-combobox
-        label="Tags"
-        hint="This slot's own tags which will be used to fill other slots"
-        multiple
-        chips
-        deletable-chips
-        :value="model.tags"
-        @change="change('tags', ...arguments)"
-      />
-    </form-section>
+      </form-section>
+    </form-sections>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/SpellForm.vue
+++ b/app/imports/ui/properties/forms/SpellForm.vue
@@ -238,7 +238,7 @@
        $emit('change', {path: ['description', ...path], value, ack})"
    />
    <form-sections>
-      <form-section name="Resources">
+      <form-section name="Resources Consumed">
        <resources-form
          :model="model.resources"
          @change="({path, value, ack}) => $emit('change', {path: ['resources', ...path], value, ack})"
@@ -246,6 +246,7 @@
          @pull="({path, ack}) => $emit('pull', {path: ['resources', ...path], ack})"
        />
      </form-section>
+
      <form-section
        name="Limit Uses"
      >
@@ -291,6 +292,11 @@
          @change="change('reset', ...arguments)"
        />
      </form-section>
+
+      <form-section name="Children">
+        <slot name="children" />
+      </form-section>
+
      <form-section name="Advanced">
        <smart-combobox
          label="Tags"
--- a/app/imports/ui/properties/forms/SpellListForm.vue
+++ b/app/imports/ui/properties/forms/SpellListForm.vue
@@ -54,6 +54,13 @@
      :value="model.tags"
      @change="change('tags', ...arguments)"
    />
+
+    <form-section
+      name="Children"
+      standalone
+    >
+      <slot name="children" />
+    </form-section>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/ToggleForm.vue
+++ b/app/imports/ui/properties/forms/ToggleForm.vue
@@ -84,6 +84,13 @@
      :value="model.tags"
      @change="change('tags', ...arguments)"
    />
+    
+    <form-section
+      name="Children"
+      standalone
+    >
+      <slot name="children" />
+    </form-section>
  </div>
 </template>

--- a/app/imports/ui/properties/forms/shared/propertyFormIndex.js
+++ b/app/imports/ui/properties/forms/shared/propertyFormIndex.js
@@ -1,6 +1,5 @@
 const ActionForm = () => import('/imports/ui/properties/forms/ActionForm.vue');
 const AdjustmentForm = () => import('/imports/ui/properties/forms/AdjustmentForm.vue');
-const AttackForm = () => import('/imports/ui/properties/forms/AttackForm.vue');
 const AttributeForm = () => import('/imports/ui/properties/forms/AttributeForm.vue');
 const BuffForm = () => import('/imports/ui/properties/forms/BuffForm.vue');
 const BranchForm = () => import('/imports/ui/properties/forms/BranchForm.vue');
@@ -28,7 +27,6 @@ const ToggleForm = () => import('/imports/ui/properties/forms/ToggleForm.vue');
 export default {
  action: ActionForm,
  adjustment: AdjustmentForm,
-  attack: AttackForm,
  attribute: AttributeForm,
  buff: BuffForm,
  branch: BranchForm,
--- a/app/imports/ui/properties/forms/shared/propertyFormMixin.js
+++ b/app/imports/ui/properties/forms/shared/propertyFormMixin.js
@@ -1,10 +1,13 @@
 import ComputedField from '/imports/ui/properties/forms/shared/ComputedField.vue';
 import InlineComputationField from '/imports/ui/properties/forms/shared/InlineComputationField.vue';
+import FormSection, { FormSections } from '/imports/ui/properties/forms/shared/FormSection.vue';

 export default {
  components: {
    ComputedField,
    InlineComputationField,
+    FormSection,
+    FormSections,
  },
  props: {
    model: {
--- a/app/imports/ui/properties/viewers/SlotViewer.vue
+++ b/app/imports/ui/properties/viewers/SlotViewer.vue
@@ -39,18 +39,28 @@
          </div>
        </div>
      </property-field>
+      <property-description
+        name="Description"
+        :model="model.description"
+      />
+      <property-field
+        v-if="!model.quantityExpected || !model.quantityExpected.value || model.spaceLeft"
+        name="Fill"
+        :cols="{cols: 12}"
+      >
+        <fill-slot-button :model="model">
+          <v-icon left>mdi-plus</v-icon>
+          Fill Slot
+        </fill-slot-button>
+      </property-field>
    </v-row>
-    <property-description
-      :string="model.description"
-      :calculations="model.descriptionCalculations"
-      :inactive="model.inactive"
-    />
  </div>
 </template>

 <script lang="js">
 	import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js'
  import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+  import FillSlotButton from '/imports/ui/creature/buildTree/FillSlotButton.vue';

  const uniqueText = {
    uniqueInSlot: 'Each property inside this slot should be unique',
@@ -59,6 +69,9 @@

 	export default {
 		mixins: [propertyViewerMixin],
+    components: {
+      FillSlotButton,
+    },
    computed: {
      slotTypeName(){
        if (!this.model.slotType) return;