initial v-model for InputWithUnits component

guiapp/.eslintrc.js

@@ -38,9 +38,9 @@ module.exports = {
     // Uncomment any of the lines below to choose desired strictness,
     // but leave only one uncommented!
     // See https://eslint.vuejs.org/rules/#available-rules
-    'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
+    // 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
     // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
-    // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+    'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
 
     // https://github.com/prettier/eslint-config-prettier#installation
     // usage with Prettier, provided by 'eslint-config-prettier'.

guiapp/src/components/CompositionComponent.vue

@@ -1,64 +1,114 @@
 <template>
   <div>
-    <p>{{ title }}</p>
-    <ul>
-      <li v-for="todo in todos" :key="todo.id" @click="increment">
-        {{ todo.id }} - {{ todo.content }}
-      </li>
-    </ul>
-    <p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
-    <p>Active: {{ active ? 'yes' : 'no' }}</p>
-    <p>Clicks on todos: {{ clickCount }}</p>
+    <q-card
+            flat
+            bordered
+    >
+      <q-tooltip v-if="tooltipText">
+        {{tooltip_text}}
+      </q-tooltip>
+      <q-card-section
+          horizontal
+          class="items-center bg-grey-2">
+        <div class="side_note text-grey-9 q-px-xs"
+             style="width: 4rem"
+        >
+          {{title}}
+        </div>
+
+        <q-select
+            :model-value="name"
+            @input-value="$emit('update:name', $event)"
+            use-input
+            hide-selected
+            fill-input
+            input-debounce="0"
+            :options="options"
+            style="width: 10rem"
+            options-dense
+            dense
+            bg-color="white"
+            class="q-py-none"
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey">
+                No results
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+
+        <div
+            class="side_note text-grey-9 q-px-xs"
+            style="width: 3rem"
+        >
+          {{ units}}
+        </div>
+      </q-card-section>
+    </q-card>
+    local options: {{name}}
   </div>
 </template>
 
 <script lang="ts">
+// import { useModelWrapper } from 'components/modelWrapper'
 import {
   defineComponent,
-  PropType,
-  computed,
+  //   watch,
+  // PropType,
+  // computed,
   ref,
-  toRef,
-  Ref,
+  // toRef,
+  // Ref,
 } from 'vue';
-import { Todo, Meta } from './models';
-
-function useClickCount() {
-  const clickCount = ref(0);
-  function increment() {
-    clickCount.value += 1
-    return clickCount.value;
-  }
+// import { Todo, Meta } from './models';
 
-  return { clickCount, increment };
-}
-
-function useDisplayTodo(todos: Ref<Todo[]>) {
-  const todoCount = computed(() => todos.value.length);
-  return { todoCount };
-}
+// function useModelWrapper(props, emit, name = 'modelValue') {
+//   return computed({
+//     get: () => props[name],
+//     set: (value) => emit(`update:${name}`, value)
+//   })
+// }
+const stringOptions = [
+  'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
+]
 
 export default defineComponent({
-  name: 'CompositionComponent',
+  name: 'InputWithUnits',
   props: {
-    title: {
+    name: {
       type: String,
-      required: true
+      default: ''
     },
-    todos: {
-      type: Array as PropType<Todo[]>,
-      default: () => []
+    title: {
+      type: String,
+      required: true,
+      default: ''
     },
-    meta: {
-      type: Object as PropType<Meta>,
-      required: true
+    units: {
+      type:String,
+      default: ''
     },
-    active: {
-      type: Boolean
+    tooltipText: {
+      type: String,
+      default: ''
     }
   },
-  setup(props) {
-    return { ...useClickCount(), ...useDisplayTodo(toRef(props, 'todos')) };
+  emits : [
+    'update:name'
+  ],
+  setup(props, {emit}) {
+  //   // import { ref } from 'vue'
+  //   // const return_value = ref(0)
+  //   // var options = ref([3, 2])
+    const options = ref(stringOptions)
+  //   // var return_value = ref(null)
+  //   var model = ref(null)
+    return {
+  //     model,
+      options
+    }
   },
 });
 </script>

guiapp/src/components/modelWrapper.ts

@@ -0,0 +1,7 @@
+// import { computed } from 'vue'
+// export function useModelWrapper(props, emit, name = 'modelValue') {
+//     return computed({
+//         get: () => props[name],
+//         set: (value) => emit(`update:${name}`, value)
+//     })
+// }

guiapp/src/components/models.ts

@@ -1,8 +0,0 @@
-export interface Todo {
-  id: number;
-  content: string;
-}
-
-export interface Meta {
-  totalCount: number;
-}

guiapp/src/layouts/MainLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
+  <q-layout view="hHh Lpr lFf">
     <q-header elevated>
       <q-toolbar>
         <q-btn

guiapp/src/pages/Index.vue

@@ -1,49 +1,29 @@
 <template>
   <q-page class="row items-center justify-evenly">
-    <example-component
-      title="Example component"
-      active
-      :todos="todos"
-      :meta="meta"
-    ></example-component>
+
+    <input-with-units
+        v-model:name="name"
+        title="Re(n)"
+        units="nm"
+        tooltip_text="help text"
+        active
+    ></input-with-units>
+    Input result: {{name}}
+<!--    tooltip_text="help text"-->
   </q-page>
 </template>
 
 <script lang="ts">
-import { Todo, Meta } from 'components/models';
-import ExampleComponent from 'components/CompositionComponent.vue';
+// import { Todo, Meta } from 'components/models';
 import { defineComponent, ref } from 'vue';
+import InputWithUnits from 'components/CompositionComponent.vue';
 
 export default defineComponent({
   name: 'PageIndex',
-  components: { ExampleComponent },
+  components: {InputWithUnits },
   setup() {
-    const todos = ref<Todo[]>([
-      {
-        id: 1,
-        content: 'ct1'
-      },
-      {
-        id: 2,
-        content: 'ct2'
-      },
-      {
-        id: 3,
-        content: 'ct3'
-      },
-      {
-        id: 4,
-        content: 'ct4'
-      },
-      {
-        id: 5,
-        content: 'ct5'
-      }
-    ]);
-    const meta = ref<Meta>({
-      totalCount: 1200
-    });
-    return { todos, meta };
+    let name = ref('')
+    return {name};
   }
 });
 </script>