Form overhaul: Buff Remover Form

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

@@ -1,34 +1,16 @@
 <template lang="html">
   <div class="buff-remover-form">
-    <text-field
+    <smart-toggle
-      ref="focusFirst"
+      label="Target buffs"
-      label="Name"
+      :value="model.targetParentBuff ? 'parent' : 'tag'"
-      :value="model.name"
+      :options="[
-      :error-messages="errors.name"
+        {name: 'Remove tagged buffs', value: 'tag'},
-      @change="change('name', ...arguments)"
+        {name: 'Remove parent buff', value: 'parent'},
-    />
+      ]"
-    <smart-switch
+      @change="(value, ack) => change('targetParentBuff', value === 'parent' ? true : undefined, ack)"
-      label="Remove parent buff"
-      :value="model.targetParentBuff"
-      :error-messages="errors.targetParentBuff"
-      @change="change('targetParentBuff', ...arguments)"
     />
     <v-expand-transition>
       <div v-if="!model.targetParentBuff">
-        <smart-switch
-          :label="model.removeAll ? 'Remove All. All matching buffs will be removed' : 'Remove All. Only 1 matching buff will be removed'"
-          :value="model.removeAll"
-          :error-messages="errors.removeAll"
-          @change="change('removeAll', ...arguments)"
-        />
-        <smart-select
-          label="Target"
-          :items="targetOptions"
-          :value="model.target"
-          :error-messages="errors.target"
-          :menu-props="{auto: true, lazy: true}"
-          @change="change('target', ...arguments)"
-        />
         <v-layout
           align-center
         >
@@ -93,6 +75,38 @@
             </v-btn>
           </div>
         </v-slide-x-transition>
+        <div class="mb-8" />
+        <v-row dense>
+          <v-col
+            cols="12"
+            md="6"
+          >
+            <smart-toggle
+              label="Remove matching buffs"
+              :value="model.removeAll ? 'all' : 'one'"
+              :options="[
+                {name: 'Remove 1 buff', value: 'one'},
+                {name: 'Remove all buffs', value: 'all'},
+              ]"
+              @change="(value, ack) => change('removeAll', value === 'all' ? true : undefined, ack)"
+            />
+          </v-col>
+          <v-col
+            cols="12"
+            md="6"
+          >
+            <smart-toggle
+              label="Target creature"
+              :value="model.target"
+              :options="[
+                {name: 'Action Target', value: 'target'},
+                {name: 'Self', value: 'self'},
+              ]"
+              :error-messages="errors.target"
+              @change="change('target', ...arguments)"
+            />
+          </v-col>
+        </v-row>
       </div>
     </v-expand-transition>
     <form-sections>
@@ -104,31 +118,14 @@
         <slot name="children" />
       </form-section>
       <form-section
-        name="Advanced"
+        name="Log"
       >
-        <smart-combobox
+        <smart-switch
-          label="Tags"
+          label="Don't show in log"
-          multiple
+          :value="model.silent"
-          chips
+          :error-messages="errors.silent"
-          deletable-chips
+          @change="change('silent', ...arguments)"
-          hint="Used to let slots find this property in a library, should otherwise be left blank"
-          :value="model.tags"
-          @change="change('tags', ...arguments)"
         />
-        <v-row dense>
-          <v-col
-            cols="12"
-            sm="6"
-            md="4"
-          >
-            <smart-switch
-              label="Don't show in log"
-              :value="model.silent"
-              :error-messages="errors.silent"
-              @change="change('silent', ...arguments)"
-            />
-          </v-col>
-        </v-row>
       </form-section>
     </form-sections>
   </div>
@@ -145,15 +142,6 @@ export default {
   data(){return {
     addExtraTagsLoading: false,
     extraTagOperations: ['OR', 'NOT'],
-    targetOptions: [
-      {
-        text: 'Self',
-        value: 'self',
-      }, {
-        text: 'Target',
-        value: 'target',
-      },
-    ],
   }},
   computed: {
     extraTagsFull(){