Handle proxies list with vue3

.gitignore

@@ -24,3 +24,5 @@ pnpm-debug.log*
 __pycache__
 *egg-info
 *pyc
+
+*build/*

examples/01_Widgets/app.py

@@ -1,15 +1,24 @@
 from pathlib import Path
 from trame.app import get_server
-from trame.ui.vuetify3 import SinglePageLayout
-from trame.widgets import vuetify3 as vuetify, simput, html
+from trame.widgets import simput, html
 
 from trame_simput import get_simput_manager
 
+client_type = "vue3"
+use_client2 = client_type == "vue2"
+
+if use_client2:
+    from trame.ui.vuetify2 import SinglePageLayout
+    from trame.widgets import vuetify2 as vuetify
+else:
+    from trame.ui.vuetify3 import SinglePageLayout
+    from trame.widgets import vuetify3 as vuetify
+
 # -----------------------------------------------------------------------------
 # Trame setup
 # -----------------------------------------------------------------------------
 
-server = get_server()
+server = get_server(client_type=client_type)
 state, ctrl = server.state, server.controller
 
 # -----------------------------------------------------------------------------
@@ -19,17 +28,27 @@
 DEF_DIR = Path(__file__).with_name("definitions")
 
 simput_manager = get_simput_manager()
-simput_manager.load_model(yaml_file=DEF_DIR / "model.yaml")
 
 # -----------------------------------------------------------------------------
 # Application state
 # -----------------------------------------------------------------------------
 
 pxm = simput_manager.proxymanager
+
+
+def load_model():
+    simput_manager.load_model(yaml_file=DEF_DIR / "model.yaml")
+
+
+load_model()
+
 CHOICES = []
 for obj_type in pxm.types():
     item = pxm.create(obj_type)
-    CHOICES.append({"text": obj_type, "value": item.id})
+    if use_client2:
+        CHOICES.append({"text": obj_type, "value": item.id})
+    else:
+        CHOICES.append({"title": obj_type, "value": item.id})
 
 # -----------------------------------------------------------------------------
 
@@ -40,9 +59,7 @@ def update_ui(use_xml_ui, **kwargs):
         simput_manager.load_ui(xml_file=DEF_DIR / "ui.xml")
     else:
         simput_manager.clear_ui()
-        simput_manager.load_model(
-            yaml_file=DEF_DIR / "model.yaml"
-        )  # Needed to generate UI
+        load_model()  # Needed to generate UI
 
 
 # -----------------------------------------------------------------------------
@@ -115,7 +132,7 @@ def update_ui(use_xml_ui, **kwargs):
         vuetify.VSelect(
             v_model=("active", CHOICES[0].get("value")),
             items=("choices", CHOICES),
-            dense=True,
+            variant="underlined",
             hide_details=True,
             style="max-width: 120px;",
         )

examples/01_Widgets/definitions/model.yaml

@@ -205,6 +205,29 @@ Select:
           - text: Case 4
             value: 4
 
+  Section:
+    _label: Drop Down with sub-sections
+    _help: >-
+      Example of a drop down with sub-sections
+    type: string
+    size: -1
+    initial:
+      - A
+      - '1'
+    domains:
+      - type: LabelList
+        values:
+          - header: Letter cases
+          - text: Case A
+            value: A
+          - text: Case B
+            value: B
+          - header: Number cases
+          - text: Case 1
+            value: '1'
+          - text: Case 2
+            value: '2'
+
   SelectDynamicList:
     _label: Dynamic available
     _help: Just to try remote domain list
@@ -361,7 +384,6 @@ Slider:
         value_range: [-10, 10]
         level: 2
 
-
   ManyDoubleFloat:
     _label: Many Double floats
     _help: >-
@@ -383,4 +405,4 @@ Slider:
         level: 2
       - type: UI
         properties:
-          sizeControl: true
+          sizeControl: true

examples/07_ProxyList/app.py

@@ -1,37 +1,41 @@
 from pathlib import Path
 from trame.app import get_server
-from trame.ui.vuetify2 import SinglePageLayout
-from trame.widgets import vuetify2 as vuetify, simput
+from trame.widgets import simput
 
 from trame_simput import get_simput_manager
 
+client_type = "vue3"
+use_client2 = client_type == "vue2"
 
+if use_client2:
+    from trame.ui.vuetify2 import SinglePageLayout
+    from trame.widgets import vuetify2 as vuetify
+else:
+    from trame.ui.vuetify3 import SinglePageLayout
+    from trame.widgets import vuetify3 as vuetify
 # -----------------------------------------------------------------------------
 # Trame setup
 # -----------------------------------------------------------------------------
 
-server = get_server(client_type="vue2")
+server = get_server(client_type=client_type)
 state, ctrl = server.state, server.controller
 
 # -----------------------------------------------------------------------------
 # Simput initialization
 # -----------------------------------------------------------------------------
 
 DEF_DIR = Path(__file__).with_name("definitions")
-
 simput_manager = get_simput_manager()
 simput_manager.load_model(yaml_file=DEF_DIR / "model.yaml")
 simput_manager.load_ui(xml_file=DEF_DIR / "ui.xml")
 simput_widget = simput.Simput(simput_manager, prefix="simput", trame_server=server)
 
 address_book = simput_manager.proxymanager.create("AddressBook")
 
-
 with SinglePageLayout(server) as layout:
     simput_widget.register_layout(layout)
-    with layout.content:
-        with vuetify.VContainer(fluid=True):
-            simput.SimputItem(item_id=f"{address_book.id}")
+    with layout.content, vuetify.VContainer(fluid=True):
+        simput.SimputItem(item_id=f"{address_book.id}")
 
 
 if __name__ == "__main__":

examples/07_ProxyList/definitions/model.yaml

@@ -1,5 +1,5 @@
 Person:
-  _label: Personal Informations
+  _label: Personal Information
   FirstName:
     _label: First Name
     type: string

trame_simput/module/core.py

@@ -142,6 +142,8 @@ def push(self, id=None, type=None, domains=None):
             )
 
     def emit(self, topic, **kwargs):
+        if not self._server.protocol:
+            return
         logger.info("emit: %s", topic)
         self._server.protocol_call("simput.push.event", topic, **kwargs)
 

vue3-components/src/components/Simput/script.js

@@ -38,6 +38,7 @@ export default {
         () => emit("query", props.query?.toLowerCase() || ""),
         250
       ),
+      managerId,
     };
 
     const updateManager = function updateManager() {

vue3-components/src/components/SimputItem/template.html

@@ -1,6 +1,6 @@
 <div v-if="available">
     <v-runtime-template v-if="!noUi" :template="ui" :data="data" />
-    <span style="display: none">{{ data }}</span>
+    <!-- <span style="display: none">{{ data }}</span> -->
     <slot name="default" v-bind="all" />
     <slot name="properties" v-bind="properties" />
 </div>

vue3-components/src/widgets/Proxy/script.js

@@ -1,7 +1,7 @@
 import SimputInput from "../../components/SimputItem/index.vue";
 import { useDecorator } from "../../core/utils";
 
-const { computed, inject, toRef } = window.Vue;
+const { computed, inject, toRef, ref } = window.Vue;
 
 export default {
   name: "swProxy",
@@ -12,6 +12,17 @@ export default {
     mtime: {
       type: Number,
     },
+    size: {
+      type: Number,
+      default: 1,
+    },
+    sizeControl: {
+      type: Boolean,
+      default: false,
+    },
+    proxyType: {
+      type: String,
+    },
   },
   components: {
     SimputInput,
@@ -28,15 +39,91 @@ export default {
     });
 
     const properties = inject("properties");
+
+    const model = computed({
+      get() {
+        /* eslint-disable no-unused-expressions */
+        props.mtime; // force refresh
+        const value = properties() && properties()[props.name];
+        if (!value && props.size > 1) {
+          const emptyArray = [];
+          emptyArray.length = props.size;
+          return emptyArray;
+        }
+        return value;
+      },
+      set(v) {
+        properties()[props.name] = v;
+      },
+    });
+
     const itemId = computed(() => {
       /* eslint-disable no-unused-expressions */
       props.mtime; // force refresh
       return properties()[props.name];
     });
 
+    const computedLayout = computed(() => {
+      /* eslint-disable no-unused-expressions */
+      props.mtime; // force refresh
+      return props.layout || domains()[props.name]?.UI?.layout || "vertical";
+    });
+
+    const computedSize = computed(() => {
+      if (Number(props.size) !== 1) {
+        return Math.max(props.size || 1, model.value.length || 0);
+      }
+      return Number(props.size);
+    });
+
+    const computedSizeControl = computed(() => {
+      /* eslint-disable no-unused-expressions */
+      props.mtime; // force refresh
+      return props.sizeControl || domains()[props.name]?.UI?.sizeControl;
+    });
+
+    const deleteEntry = function deleteEntry(index) {
+      if (computedSize.value > Number(props.size)) {
+        model.value.splice(index, 1);
+        dirty(props.name);
+      }
+    };
+
+    const getComponentProps = function getComponentProps(index) {
+      if (computedLayout.value === "vertical") {
+        return { cols: 12 };
+      }
+      if (computedLayout.value === "l2") {
+        return { cols: 6 };
+      }
+      if (computedLayout.value === "l3") {
+        return { cols: 4 };
+      }
+      if (computedLayout.value === "l4") {
+        return { cols: 3 };
+      }
+      if (computedLayout.value === "m3-half") {
+        const attrs = { cols: 4 };
+        if (index === 3) {
+          attrs.offset = 4;
+        }
+        if (index === 5) {
+          attrs.offset = 8;
+        }
+        return attrs;
+      }
+      return {};
+    };
+
     return {
       itemId,
       decorator,
+      model,
+      computedLayout,
+      computedSize,
+      computedSizeControl,
+      deleteEntry,
+      getComponentProps,
     };
   },
 };

vue3-components/src/widgets/Proxy/template.html

@@ -1 +1,26 @@
-<SimputInput :itemId="itemId" v-show="decorator.show" />
+<template v-if="size==1">
+    <SimputInput :itemId="itemId" v-show="decorator.show" />
+</template>
+<template v-else>
+    <v-col>
+        <v-row
+            class="py-1"
+            v-for="i in computedSize"
+            :key="i"
+            v-bind="getComponentProps(i - 1)"
+        >
+            <v-col>
+                <SimputInput :itemId="itemId[i-1]" v-show="decorator.show"/>
+            </v-col>
+            <v-col cols="1">
+                <v-btn
+                    v-if="computedSizeControl"
+                    class="ml-2 elevation-0"
+                    icon="mdi-minus-circle-outline"
+                    size="x-small"
+                    @click="deleteEntry(i - 1)"
+                />   
+            </v-col>         
+        </v-row>
+    </v-col>
+</template>

vue3-components/src/widgets/Select/script.js

@@ -203,4 +203,9 @@ export default {
       shouldShow,
     };
   },
+  methods: {
+    resolveItemTitle(item) {
+      return item.title ?? item.text ?? undefined;
+    }
+  },
 };

vue3-components/src/widgets/Select/template.html

@@ -2,14 +2,24 @@
   <v-select
     :key="tsKey"
     :label="label"
-    :hint="computedHelp"
     v-model="model"
-    density="compact"
+    variant="underlined"
     :items="computedItems"
+    :item-title="resolveItemTitle"
+    item-value="value"
     :multiple="multiple"
     @update:modelValue="validate"
+    :hint="computedHelp"
     :persistent-hint="!!(useRangeHelp || help)"
     :disabled="disabled || !decorator.enable"
     :readonly="readonly"
-  />
-</v-col>
+  >
+    <template #item="{ item, props }">
+      <v-list-subheader v-if="item.raw.header">
+        {{ item.raw.header }}
+      </v-list-subheader>
+
+      <v-list-item v-else v-bind="props" />
+    </template>
+  </v-select>
+ </v-col>