Form overhaul: Damage Multiplier Form

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

@@ -70,6 +70,7 @@
           @change="change('silent', ...arguments)"
         />
       </form-section>
+      <slot />
     </form-sections>
   </div>
 </template>

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

@@ -1,29 +1,23 @@
 <template lang="html">
-  <div class="attribute-form">
+  <div class="damage-multiplier-form">
     <v-row dense>
       <v-col
         cols="12"
-        md="6"
       >
-        <text-field
+        <smart-toggle
-          ref="focusFirst"
+          label="Multiplier"
-          label="Name"
-          :value="model.name"
-          :error-messages="errors.name"
-          @change="change('name', ...arguments)"
-        />
-      </v-col>
-      <v-col
-        cols="12"
-        md="6"
-      >
-        <smart-select
-          label="Value"
-          style="flex-basis: 300px;"
-          :items="values"
           :value="model.value"
+          :options="[{
+            value: 2,
+            name: 'Vulnerability',
+          },{
+            value: 0.5,
+            name: 'Resistance',
+          }, {
+            value: 0,
+            name: 'Immunity',
+          }]"
           :error-messages="errors.value"
-          :menu-props="{auto: true, lazy: true}"
           @change="change('value', ...arguments)"
         />
       </v-col>
@@ -52,37 +46,37 @@
       >
         <slot name="children" />
       </form-section>
-      <form-section name="Advanced">
+      <form-section name="Apply by tag">
-        <smart-combobox
+        <v-row dense>
-          label="Damage tags required"
+          <v-col cols="12">
-          hint="This damage multiplier will only apply to damage that has all of these tags"
+            <smart-combobox
-          multiple
+              label="Tags required"
-          chips
+              hint="Only apply to damage that has all of these tags"
-          deletable-chips
+              multiple
-          :items="['magical', 'silvered']"
+              small-chips
-          :value="model.includeTags"
+              deletable-chips
-          @change="change('includeTags', ...arguments)"
+              persistent-hint
-        />
+              :items="['magical', 'silvered']"
-        <smart-combobox
+              :value="model.includeTags"
-          label="Damage tags excluded"
+              @change="change('includeTags', ...arguments)"
-          hint="Damage that includes any of these tags will bypass this damage multiplier"
+            />
-          multiple
+          </v-col>
-          chips
+          <v-col cols="12">
-          deletable-chips
+            <smart-combobox
-          :items="['magical', 'silvered']"
+              label="Tags excluded"
-          :value="model.excludeTags"
+              hint="Don't apply to damage that has any of these tags"
-          @change="change('excludeTags', ...arguments)"
+              multiple
-        />
+              small-chips
-        <smart-combobox
+              deletable-chips
-          label="Tags"
+              persistent-hint
-          multiple
+              :items="['magical', 'silvered']"
-          chips
+              :value="model.excludeTags"
-          deletable-chips
+              @change="change('excludeTags', ...arguments)"
-          hint=""
+            />
-          :value="model.tags"
+          </v-col>
-          @change="change('tags', ...arguments)"
+        </v-row>
-        />
       </form-section>
+      <slot />
     </form-sections>
   </div>
 </template>
@@ -102,18 +96,6 @@ export default {
   data() {
     return {
       DAMAGE_TYPES,
-      values: [
-        {
-          value: 0,
-          text: 'Immunity',
-        }, {
-          value: 0.5,
-          text: 'Resistance',
-        }, {
-          value: 2,
-          text: 'Vulnerability',
-        },
-      ],
       damageTypeRules: [
         value => {
           if (value && value.length) {