Point buys can now guess cost while dragging slide

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

@@ -10,6 +10,9 @@
     :disabled="isDisabled"
     :outlined="!regular"
     @change="change"
+    @input="e => $emit('input', e)"
+    @end="e => $emit('end', e)"
+    @start="e => $emit('start', e)"
     @focus="focused = true"
     @blur="focused = false"
   >
@@ -23,12 +26,12 @@
 </template>
 
 <script lang="js">
-  import SmartInput from '/imports/client/ui/components/global/SmartInputMixin.js';
+import SmartInput from '/imports/client/ui/components/global/SmartInputMixin.js';
 
-  export default {
+export default {
-    mixins: [SmartInput],
+  mixins: [SmartInput],
-    props: {
+  props: {
-      regular: Boolean,
+    regular: Boolean,
-    },
+  },
-  };
+};
 </script>

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

@@ -47,7 +47,10 @@
           :max="max(row)"
           :value="row.value"
           :error-messages="errors.values && errors.values[i] && errors.values[i].value"
-          @change="(value, ack) => $emit('change', {path: ['values', i, 'value'], value, ack})"
+          @change="(value, ack) => releaseSlider(i, value, ack)"
+          @input="value => dragSlider(row, value)"
+          @end="endSlider"
+          @start="startSlider"
         />
       </v-col>
       <v-col
@@ -78,7 +81,7 @@
           'warning--text': model.spent < (model.total && model.total.value),
         }"
       >
-        {{ model.spent }}
+        {{ estimatedCost !== undefined ? estimatedCost : model.spent }}
         <template v-if="model.total && (typeof model.total.value === 'number')">
           / {{ model.total && model.total.value }}
         </template>
@@ -90,12 +93,20 @@
 <script lang="js">
 import propertyFormMixin from '/imports/client/ui/properties/forms/shared/propertyFormMixin.js';
 import CalculationErrorList from '/imports/client/ui/properties/forms/shared/CalculationErrorList.vue';
+import evaluateCalculation from '/imports/api/engine/computation/utility/evaluateCalculation.js';
+import { Tracker } from 'meteor/tracker'
 
 export default {
   components: {
     CalculationErrorList,
   },
   mixins: [propertyFormMixin],
+  data() {
+    return {
+      estimatedCost: undefined,
+      useEstimate: false,
+    };
+  },
   methods: {
     max(row) {
       return row.max ? row.max && row.max.value : this.model.max && this.model.max.value;
@@ -103,6 +114,36 @@ export default {
     min(row) {
       return row.min ? row.min && row.min.value : this.model.min && this.model.min.value;
     },
+    dragSlider(row, value) {
+      const currentSpent = this.model.spent;
+      let newSpent = currentSpent - row.spent;
+      const costFunction = EJSON.clone(row.cost || this.model.cost);
+      if (costFunction) costFunction.parseLevel = 'reduce';
+      evaluateCalculation(costFunction, { value });
+      if (Number.isFinite(costFunction.value)) {
+        newSpent += costFunction.value;
+        if (this.useEstimate) this.estimatedCost = newSpent;
+      }
+    },
+    startSlider() {
+      this.useEstimate = true;
+    },
+    endSlider() {
+      this.useEstimate = false;
+    },
+    releaseSlider(i, value, ack) {
+      const newAck = (error, result) => {
+        Tracker.afterFlush(() => {
+          this.estimatedCost = undefined;
+        });
+        ack?.(error, result);
+      }
+      this.$emit('change', {
+        path: ['values', i, 'value'],
+        value,
+        ack: newAck
+      });
+    },
   },
 };
 </script>