cleanup

guiapp/src/components/CompositionComponent.vue

@@ -12,18 +12,16 @@
         >
           {{ title }}
         </div>
-        <div
-            @mousemove="setTooltipVisibility"
-        >
+        <div>
 
         <q-tooltip
             v-model = "isShowingTooltip"
                    anchor="top middle"
                    self="center middle"
         >
-          = {{format_number(localTooltipText,2)}}
+          {{format_number(localTooltipText,2)}}
         </q-tooltip>
-          <q-tooltip
+          <q-tooltip v-if="isShowingHelp"
               v-model = "isShowingHelpLocal"
               anchor="bottom middle"
               self="top middle"
@@ -35,7 +33,6 @@
             :model-value="localQSelectValue"
             :options="options"
             bg-color="white"
-            class="q-py-none"
             dense
             fill-input
             hide-selected
@@ -46,6 +43,7 @@
             behavior="menu"
             @filter="filterFn"
             @blur="handleQSelectBlur"
+            @keydown.enter="handleQSelectBlur"
             @input-value="localQSelectValue=$event"
         >
           <template
@@ -54,10 +52,21 @@
           >
             <div
                 style="font-size: 12px"
+                class="q-py-xl"
             >
-              ={{format_number(localTooltipText,1)}}
+              {{format_number(localTooltipText,1)}}
             </div>
           </template>
+          <template #option="scope">
+            <q-item v-bind="scope.itemProps">
+              <q-item-section>
+                {{scope.opt}}
+              </q-item-section>
+              <q-item-section side>
+                {{format_number(evalString(scope.opt),1)}}
+              </q-item-section>
+            </q-item>
+          </template>
 <!--          <template #no-option>-->
 <!--            <q-item>-->
 <!--              <q-item-section class="text-grey">-->
@@ -133,7 +142,8 @@ export default defineComponent({
     let optionsHistory = ref(['a','b'])
     let evaluatedValue = ref(0)
 
-    function filterFn (val:any, update:any, abort:any) {
+    function filterFn (val:string,
+                       update:(data: ()=>void) => void) {
       update(() => {
         // To remove the selection from previously
         // selection option - we recreate the options list
@@ -148,19 +158,22 @@ export default defineComponent({
       } catch { }
     }
 
+    function evalString(val:string):string {
+      try {
+        const tryEvaluate = Number(evaluate(val))
+        if (!isNaN(tryEvaluate) && tryEvaluate != Number(val)) {
+          return tryEvaluate.toString()
+        }
+      } catch { }
+      return ''
+    }
+
     onMounted(()=>{
       isShowingTooltip.value = false
     });
 
 
-    function setTooltipValue(){
-      localTooltipText.value = evaluatedValue.value.toString()
-    }
-
-
     function setTooltipVisibility(){
-      isShowingHelpLocal.value = props.isShowingHelp
-      if (options.value.length>0) isShowingHelpLocal.value = false
       if (evaluatedValue.value != Number(localQSelectValue.value)) {
         isShowingTooltip.value = true
         isShowingTooltipAppend.value = true
@@ -170,8 +183,27 @@ export default defineComponent({
       }
     }
 
+    watch(isShowingTooltip, ()=>{
+      // For a trivial case we would like to switch off showing tooltip
+      if (isShowingTooltip.value) setTooltipVisibility()
+    })
+
+    watch(isShowingHelpLocal, ()=>{
+      // isShowingHelpLocal.value is set to be
+      // true on hover. Disable it if needed.
+      if (isShowingHelpLocal.value) {
+        if (options.value.length>0) isShowingHelpLocal.value = false
+      }
+    })
+
+
+    watch(options, ()=>{
+      if (options.value.length>0) isShowingHelpLocal.value = false
+    })
+
+
     function setTooltip(){
-      setTooltipValue()
+      localTooltipText.value = evaluatedValue.value.toString()
       setTooltipVisibility()
     }
 
@@ -186,12 +218,13 @@ export default defineComponent({
 
 
     function format_number (value:string, digits:number):string {
+      if (value==='') return ''
       // const help_string = 'text\n text'
       const num = parseFloat(value)
       if ( num < Math.pow(10, -digits) ||
            num > 5*Math.pow(10,  digits+2)
-         ) return num.toExponential(digits)
-      return Number(Math.round(
+         ) return '='+num.toExponential(digits)
+      return '='+Number(Math.round(
           parseFloat(value + 'e' + digits.toString())).toString()
           + 'e-' + digits.toString()).toString()
     }
@@ -202,9 +235,6 @@ export default defineComponent({
     })
 
 
-    // watch(options, ()=>{
-    //   if (options.value.length>0)
-    // })
 
 
     watch(evaluatedValue, () => {
@@ -213,8 +243,8 @@ export default defineComponent({
     })
 
 
-
-    localQSelectValue.value = props.evalExpr
+    // eslint-disable-next-line vue/no-setup-props-destructure
+    localQSelectValue.value = props.evalExpr // TODO do we need reactivity from props.evalExpr?
     runEvaluate()
     localTooltipText.value = localQSelectValue.value
     setTooltip()
@@ -222,12 +252,13 @@ export default defineComponent({
     options.value.pop()
     optionsHistory.value.pop()
     optionsHistory.value.pop()
+    optionsHistory.value.unshift(localQSelectValue.value)
 
     return {
       options,  localQSelectValue, localTooltipText, isShowingTooltip,
       isShowingHelpLocal, isShowingTooltipAppend,
       setTooltip, handleQSelectBlur, format_number,
-      setTooltipVisibility, filterFn
+      filterFn, evalString
     };
   },
 });

guiapp/src/css/quasar.variables.scss

@@ -13,6 +13,7 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
 $primary   : #1976D2;
+//$primary   : #2e5399;
 $secondary : #26A69A;
 $accent    : #9C27B0;
 

guiapp/src/pages/Index.vue

@@ -32,8 +32,9 @@ export default defineComponent({
   components: {InputWithUnits },
   setup() {
     let someValue = ref(10);
-    let someExpr = ref('10');
-    let isShowingHelp = ref(false)
+    let someExpr = ref('10+2');
+    // let isShowingHelp = ref(false)
+    let isShowingHelp = ref(true)
     return { someValue, someExpr, isShowingHelp };
   }
 });