diagonal order form

src/components/LimitPrice.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-text-field v-model="os[storeVar]" :label="getLabel" type="number"
+  <v-text-field v-model="mv" :label="getLabel" type="number"
                 variant="outlined" aria-valuemin="0" min="0"
-                clearable :rules="rules" v-auto-select>
+                :clearable="!required && clearable" :rules="rules" v-auto-select>
     <template v-slot:append-inner>
       <v-btn variant="outlined" @click="os.inverted=!os.inverted">
         {{ os.pairSymbol }}
@@ -26,10 +26,17 @@ import {vAutoSelect} from "@/misc.js";
 
 const os = useOrderStore()
 const props = defineProps({
+  modelValue: {required: true},
   required: {default: false},
   label: {default: null},
-  storeVar: {default: 'limitPrice'},
   showPrice: {default: true},
+  clearable: {default: true},
+})
+const emit = defineEmits(['update:modelValue'])
+
+const mv = computed({
+  get() {return props.modelValue},
+  set(v) {emit('update:modelValue', v)}
 })
 const rules = computed(()=>props.required ? [validateAmount, validateRequired] : [validateAmount])