major refactor of web store into vue setup style declaration; reactivity debugging; order view has known refresh issues

src/components/Tranches.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-text-field label="Tranches" type="number" variant="outlined" aria-valuemin="1" min="1" max="255"
+                v-model="os.tranches" :rules="[validateRequired,validateTranches]" v-auto-select>
+    <template v-slot:append-inner>tranches</template>
+  </v-text-field>
+  <v-text-field type="number" variant="outlined" :min="1" v-model="os.interval" class="interval"
+                :label="os.intervalIsTotal ? 'Completion time' : 'Time between tranches'" v-auto-select>
+    <template v-slot:prepend-inner>
+      <v-btn variant="outlined" :text="os.intervalIsTotal ? 'Within' : 'Spaced apart'" class="within mr-2"
+             @click="os.intervalIsTotal=!os.intervalIsTotal"/>
+    </template>
+    <template v-slot:append-inner>
+      <v-btn variant="outlined" :text="timeUnitsStr" @click="toggleTimeUnits" class="time-units"/>
+    </template>
+  </v-text-field>
+</template>
+
+<script setup>
+import {useOrderStore, useStore} from "@/store/store.js";
+import {validateRequired, validateTranches} from "@/validate.js";
+// noinspection ES6UnusedImports
+import {vAutoSelect} from "@/misc.js";
+import {computed} from "vue";
+
+const os = useOrderStore()
+
+const timeUnits = ['minutes', 'hours', 'days']
+const timeUnitsStr = computed(()=>timeUnits[os.timeUnitIndex])
+
+function toggleTimeUnits() {
+  os.timeUnitIndex++
+  if (os.timeUnitIndex >= timeUnits.length)
+    os.timeUnitIndex = 0
+}
+
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/vars" as *;
+.interval {
+  //width: 18em;
+}
+
+.within {
+  width: 10em;
+}
+
+.time-units {
+  width: 8em;
+}
+</style>