diff --git a/examples/01_Widgets/app.py b/examples/01_Widgets/app.py index 7924f60..dea9bbe 100644 --- a/examples/01_Widgets/app.py +++ b/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 diff --git a/examples/01_Widgets/definitions/model.yaml b/examples/01_Widgets/definitions/model.yaml index 763648a..a93b26d 100644 --- a/examples/01_Widgets/definitions/model.yaml +++ b/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 diff --git a/examples/01_Widgets/definitions/ui.xml b/examples/01_Widgets/definitions/ui.xml index ffe8214..8c04958 100644 --- a/examples/01_Widgets/definitions/ui.xml +++ b/examples/01_Widgets/definitions/ui.xml @@ -11,4 +11,16 @@ + + + + + + + + + + + + diff --git a/vue3-components/src/widgets/Show/script.js b/vue3-components/src/widgets/Show/script.js index dfec72d..2af6fae 100644 --- a/vue3-components/src/widgets/Show/script.js +++ b/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,