Fix show

examples/01_Widgets/app.py

@@ -3,6 +3,13 @@
 from trame.widgets import simput, html
 
 from trame_simput import get_simput_manager
+from trame_simput.core.domains import PropertyDomain, register_property_domain
+
+
+class ConditionalShowDomain(PropertyDomain):
+    def available(self):
+        return [{"text": "A", "value": "A"}, {"text": "B", "value": "B"}]
+
 
 client_type = "vue3"
 use_client2 = client_type == "vue2"
@@ -28,6 +35,7 @@
 DEF_DIR = Path(__file__).with_name("definitions")
 
 simput_manager = get_simput_manager()
+register_property_domain("ConditionalShowDomain", ConditionalShowDomain)
 
 # -----------------------------------------------------------------------------
 # Application state

examples/01_Widgets/definitions/model.yaml

@@ -406,3 +406,15 @@ Slider:
       - type: UI
         properties:
           sizeControl: true
+
+Show:
+  ConditionnalShowInUIMode:
+    _label: Show second TextField if 'A' or 'B' is typed here
+    type: string
+    domains:
+      - type: ConditionalShowDomain
+        name: ConditionalShowDomain
+
+  ConditionnalField:
+    _label: Conditionnal show (in UI mode only)
+    type: string

examples/01_Widgets/definitions/ui.xml

@@ -11,4 +11,16 @@
             </row>
         </col>
     </ui>
+    <ui id="Show">
+        <col>
+            <row class="mb-2">
+                <input name="ConditionnalShowInUIMode" />
+            </row>
+            <row>
+                <show property="ConditionnalShowInUIMode" domain="ConditionalShowDomain" style="width: 100%;">
+                    <input name="ConditionnalField" />
+                </show>
+            </row>
+        </col>
+    </ui>
 </layouts>

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

@@ -17,15 +17,18 @@ export default {
     const properties = inject("properties");
     const domains = inject("domains");
 
-    const visible = computed(() => {
+    const isVisible = function isVisible() {
       this.mtime; // eslint-disable-line
       const domain = domains()?.[props.property]?.[props.domain];
+      const propertyValue = properties()?.[props.property];
       if (!domain) {
         // no domain == valid
         return true;
       }
-      return domain.value.value;
-    });
+      return domain.available.map((v) => v.value).includes(propertyValue);
+    }
+
+    const visible = computed(isVisible);
 
     return {
       visible,