Created smart toggles for limited choice fields

app/imports/client/ui/components/global/SmartToggle.vue

@@ -0,0 +1,70 @@
+<template lang="html">
+  <outlined-input
+    :name="label"
+    class="mb-6 pt-1"
+  >
+    <v-btn-toggle
+      v-bind="$attrs"
+      mandatory
+      tile
+      group
+      :value="safeValue"
+      color="accent"
+      style="flex-wrap: wrap;"
+    >
+      <v-btn
+        v-for="(option, i) in options"
+        :key="`toggle-option-${i}`"
+        :value="option.value"
+        :disabled="isDisabled || (clickedValue != option.value && loading)"
+        :plain="clickedValue != option.value && loading"
+        :loading="clickedValue == option.value && loading"
+        height="42"
+        v-on="(value == option.value) ? {} : { click() { click(option.value) } }"
+      >
+        {{ option.name }}
+      </v-btn>
+    </v-btn-toggle>
+    <v-expand-transition>
+      <div
+        v-if="errors.length"
+        class="pa-2 error--text"
+      >
+        {{ errors.join('\n\n') }}
+      </div>
+    </v-expand-transition>
+  </outlined-input>
+</template>
+
+<script lang="js">
+import SmartInput from '/imports/client/ui/components/global/SmartInputMixin.js';
+import OutlinedInput from '/imports/client/ui/properties/viewers/shared/OutlinedInput.vue';
+
+export default {
+  components: {
+    OutlinedInput,
+  },
+  mixins: [SmartInput],
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    }
+  },
+  data() {
+    return {
+      clickedValue: undefined,
+    };
+  },
+  methods: {
+    click(val) {
+      this.clickedValue = val;
+      this.change(val);
+    },
+  }
+};
+</script>

app/imports/client/ui/components/global/globalIndex.js

@@ -10,6 +10,7 @@ import SmartBtn from '/imports/client/ui/components/global/SmartBtn.vue';
 import SmartCombobox from '/imports/client/ui/components/global/SmartCombobox.vue';
 import SmartCheckbox from '/imports/client/ui/components/global/SmartCheckbox.vue';
 import SmartSwitch from '/imports/client/ui/components/global/SmartSwitch.vue';
+import SmartToggle from '/imports/client/ui/components/global/SmartToggle.vue';
 import SvgIcon from '/imports/client/ui/components/global/SvgIcon.vue';
 import SmartSlider from '/imports/client/ui/components/global/SmartSlider.vue';
 
@@ -24,4 +25,5 @@ Vue.component('SmartCombobox', SmartCombobox);
 Vue.component('SmartCheckbox', SmartCheckbox);
 Vue.component('SmartSlider', SmartSlider);
 Vue.component('SmartSwitch', SmartSwitch);
+Vue.component('SmartToggle', SmartToggle);
 Vue.component('SvgIcon', SvgIcon);