Continued work on point buy UI

app/imports/ui/components/global/SmartBtn.vue

@@ -0,0 +1,72 @@
+<template lang="html">
+  <v-btn 
+    v-bind="$attrs"
+    :disabled="isDisabled"
+    :loading="loading"
+    @click="click"
+  >
+    <slot />
+  </v-btn>
+</template>
+
+<script lang="js">
+import { debounce } from 'lodash';
+import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
+
+export default {
+  inject: {
+    context: { default: {} }
+  },
+  props: {
+    disabled: Boolean,
+    debounce: {
+      type: Number,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      timesClicked: 0,
+    };
+  },
+  computed: {
+    isDisabled(){
+      return this.context.editPermission === false || this.disabled;
+    },
+    debounceTime() {
+      if (Number.isFinite(this.debounce)){
+        return this.debounce;
+      } else if (Number.isFinite(this.context.debounceTime)){
+        return this.context.debounceTime;
+      } else {
+        return 750;
+      }
+    },
+  },
+  created(){
+    this.debounceClicks = debounce(this.clicks, this.debounceTime);
+  },
+  beforeDestroy(){
+    this.debounceClicks.flush();
+  },
+  methods: {
+    click() {
+      this.timesClicked += 1;
+      this.debounceClicks();
+      this.$emit('click', this.acknowledgeChange);
+    },
+    clicks() {
+      this.$emit('clicks', this.timesClicked, this.acknowledgeChange);
+      this.loading = true;
+      this.timesClicked = 0;
+    },
+    acknowledgeChange(error){
+      this.loading = false;
+      if (error) {
+        snackbar({ text: error.reason || error.message || error.toString() });
+      }
+    },
+  },
+};
+</script>

app/imports/ui/components/global/SmartInputMixin.js

@@ -115,7 +115,7 @@ export default {
     },
     change(val){
       this.dirty = true;
-      if (this.hasChangeListener) this.loading = true;
+      if (this.hasChangeListener()) this.loading = true;
       this.$emit('change', val, this.acknowledgeChange);
     },
     hasChangeListener(){

app/imports/ui/components/global/SmartSlider.vue

@@ -0,0 +1,34 @@
+<template lang="html">
+  <v-slider
+    ref="input"
+    v-bind="$attrs"
+    class="dc-text-field"
+    :hide-details="!(errors && errors.length)"
+    :loading="loading"
+    :error-messages="errors"
+    :value="safeValue"
+    :disabled="isDisabled"
+    :outlined="!regular"
+    @change="change"
+    @focus="focused = true"
+    @blur="focused = false"
+  >
+    <template #prepend>
+      <slot name="prepend" />
+    </template>
+    <template #append>
+      <slot name="append" />
+    </template>
+  </v-slider>
+</template>
+
+<script lang="js">
+  import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
+
+  export default {
+    mixins: [SmartInput],
+    props: {
+      regular: Boolean,
+    },
+  };
+</script>

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

@@ -5,17 +5,21 @@ import IconPicker from '/imports/ui/components/global/IconPicker.vue';
 import TextField from '/imports/ui/components/global/TextField.vue';
 import TextArea from '/imports/ui/components/global/TextArea.vue';
 import SmartSelect from '/imports/ui/components/global/SmartSelect.vue';
+import SmartBtn from '/imports/ui/components/global/SmartBtn.vue';
 import SmartCombobox from '/imports/ui/components/global/SmartCombobox.vue';
 import SmartCheckbox from '/imports/ui/components/global/SmartCheckbox.vue';
 import SmartSwitch from '/imports/ui/components/global/SmartSwitch.vue';
 import SvgIcon from '/imports/ui/components/global/SvgIcon.vue';
+import SmartSlider from '/imports/ui/components/global/SmartSlider.vue';
 
 Vue.component('DatePicker', DatePicker);
 Vue.component('IconPicker', IconPicker);
 Vue.component('TextField', TextField);
 Vue.component('TextArea', TextArea);
 Vue.component('SmartSelect', SmartSelect);
+Vue.component('SmartBtn', SmartBtn);
 Vue.component('SmartCombobox', SmartCombobox);
 Vue.component('SmartCheckbox', SmartCheckbox);
+Vue.component('SmartSlider', SmartSlider);
 Vue.component('SmartSwitch', SmartSwitch);
 Vue.component('SvgIcon', SvgIcon);