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

src/components/TimedOrder.vue

@@ -0,0 +1,63 @@
+<template>
+  <order title="DCA / TWAP" subtitle="Multiple tranches over a time range" :tranches="buildTranches" :valid="validOrder">
+    <Tranches/>
+    <LimitPrice/>
+  </order>
+</template>
+
+<script setup>
+// noinspection ES6UnusedImports
+import {routeInverted, SingletonCoroutine, vAutoSelect} from "@/misc.js";
+import Order from "@/components/Order.vue";
+import LimitPrice from "@/components/LimitPrice.vue";
+import {timesliceTranches, limitConstraint} from "@/orderbuild.js";
+import Tranches from "@/components/Tranches.vue";
+import {useOrderStore} from "@/store/store.js";
+
+const os = useOrderStore()
+
+function buildTranches() {
+  const ts = timesliceTranches();
+  const priceConstraint = limitConstraint();
+  if( priceConstraint !== null )
+    for( let i=0; i<ts.length; i++)
+      ts[i][1].push(priceConstraint)
+  return ts
+}
+
+function validOrder() {
+  return os.validOrder
+}
+
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/vars" as *;
+
+.tordercard {
+  max-width: $card-maxw;
+}
+.token-choice {
+  width: 16em;
+}
+.bs-button {
+  width: 6em;
+}
+.amount {
+  width: 23em;
+}
+
+.total {
+  width: 9em;
+}
+
+.split-into {
+  width: 8em;
+}
+
+.v-input {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+</style>