Skip to content

Commit f358b3e

Browse files
luciemacluciemac
authored
Merge pull request #28 from luciemac/handle_proxies_list_with_vue3
Handle proxies list with vue3
2 parents f46a6d7 + 838d512 commit f358b3e

File tree

17 files changed

+254
-75
lines changed

17 files changed

+254
-75
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,5 @@ pnpm-debug.log*
2424
__pycache__
2525
*egg-info
2626
*pyc
27+
28+
*build/*

‎examples/01_Widgets/app.py‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
from pathlib import Path
22
from trame.app import get_server
3-
from trame.ui.vuetify3 import SinglePageLayout
4-
from trame.widgets import vuetify3 as vuetify, simput, html
3+
from trame.widgets import simput, html
54

65
from trame_simput import get_simput_manager
76

7+
client_type = "vue3"
8+
use_client2 = client_type == "vue2"
9+
10+
if use_client2:
11+
from trame.ui.vuetify2 import SinglePageLayout
12+
from trame.widgets import vuetify2 as vuetify
13+
else:
14+
from trame.ui.vuetify3 import SinglePageLayout
15+
from trame.widgets import vuetify3 as vuetify
16+
817
# -----------------------------------------------------------------------------
918
# Trame setup
1019
# -----------------------------------------------------------------------------
1120

12-
server = get_server()
21+
server = get_server(client_type=client_type)
1322
state, ctrl = server.state, server.controller
1423

1524
# -----------------------------------------------------------------------------
@@ -19,17 +28,27 @@
1928
DEF_DIR = Path(__file__).with_name("definitions")
2029

2130
simput_manager = get_simput_manager()
22-
simput_manager.load_model(yaml_file=DEF_DIR / "model.yaml")
2331

2432
# -----------------------------------------------------------------------------
2533
# Application state
2634
# -----------------------------------------------------------------------------
2735

2836
pxm = simput_manager.proxymanager
37+
38+
39+
def load_model():
40+
simput_manager.load_model(yaml_file=DEF_DIR / "model.yaml")
41+
42+
43+
load_model()
44+
2945
CHOICES = []
3046
for obj_type in pxm.types():
3147
item = pxm.create(obj_type)
32-
CHOICES.append({"text": obj_type, "value": item.id})
48+
if use_client2:
49+
CHOICES.append({"text": obj_type, "value": item.id})
50+
else:
51+
CHOICES.append({"title": obj_type, "value": item.id})
3352

3453
# -----------------------------------------------------------------------------
3554

@@ -40,9 +59,7 @@ def update_ui(use_xml_ui, **kwargs):
4059
simput_manager.load_ui(xml_file=DEF_DIR / "ui.xml")
4160
else:
4261
simput_manager.clear_ui()
43-
simput_manager.load_model(
44-
yaml_file=DEF_DIR / "model.yaml"
45-
) # Needed to generate UI
62+
load_model() # Needed to generate UI
4663

4764

4865
# -----------------------------------------------------------------------------
@@ -115,7 +132,7 @@ def update_ui(use_xml_ui, **kwargs):
115132
vuetify.VSelect(
116133
v_model=("active", CHOICES[0].get("value")),
117134
items=("choices", CHOICES),
118-
dense=True,
135+
variant="underlined",
119136
hide_details=True,
120137
style="max-width: 120px;",
121138
)

‎examples/01_Widgets/definitions/model.yaml‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,29 @@ Select:
205205
- text: Case 4
206206
value: 4
207207

208+
Section:
209+
_label: Drop Down with sub-sections
210+
_help: >-
211+
Example of a drop down with sub-sections
212+
type: string
213+
size: -1
214+
initial:
215+
- A
216+
- '1'
217+
domains:
218+
- type: LabelList
219+
values:
220+
- header: Letter cases
221+
- text: Case A
222+
value: A
223+
- text: Case B
224+
value: B
225+
- header: Number cases
226+
- text: Case 1
227+
value: '1'
228+
- text: Case 2
229+
value: '2'
230+
208231
SelectDynamicList:
209232
_label: Dynamic available
210233
_help: Just to try remote domain list
@@ -361,7 +384,6 @@ Slider:
361384
value_range: [-10, 10]
362385
level: 2
363386

364-
365387
ManyDoubleFloat:
366388
_label: Many Double floats
367389
_help: >-
@@ -383,4 +405,4 @@ Slider:
383405
level: 2
384406
- type: UI
385407
properties:
386-
sizeControl: true
408+
sizeControl: true

‎examples/07_ProxyList/app.py‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,41 @@
11
from pathlib import Path
22
from trame.app import get_server
3-
from trame.ui.vuetify2 import SinglePageLayout
4-
from trame.widgets import vuetify2 as vuetify, simput
3+
from trame.widgets import simput
54

65
from trame_simput import get_simput_manager
76

7+
client_type = "vue3"
8+
use_client2 = client_type == "vue2"
89

10+
if use_client2:
11+
from trame.ui.vuetify2 import SinglePageLayout
12+
from trame.widgets import vuetify2 as vuetify
13+
else:
14+
from trame.ui.vuetify3 import SinglePageLayout
15+
from trame.widgets import vuetify3 as vuetify
916
# -----------------------------------------------------------------------------
1017
# Trame setup
1118
# -----------------------------------------------------------------------------
1219

13-
server = get_server(client_type="vue2")
20+
server = get_server(client_type=client_type)
1421
state, ctrl = server.state, server.controller
1522

1623
# -----------------------------------------------------------------------------
1724
# Simput initialization
1825
# -----------------------------------------------------------------------------
1926

2027
DEF_DIR = Path(__file__).with_name("definitions")
21-
2228
simput_manager = get_simput_manager()
2329
simput_manager.load_model(yaml_file=DEF_DIR / "model.yaml")
2430
simput_manager.load_ui(xml_file=DEF_DIR / "ui.xml")
2531
simput_widget = simput.Simput(simput_manager, prefix="simput", trame_server=server)
2632

2733
address_book = simput_manager.proxymanager.create("AddressBook")
2834

29-
3035
with SinglePageLayout(server) as layout:
3136
simput_widget.register_layout(layout)
32-
with layout.content:
33-
with vuetify.VContainer(fluid=True):
34-
simput.SimputItem(item_id=f"{address_book.id}")
37+
with layout.content, vuetify.VContainer(fluid=True):
38+
simput.SimputItem(item_id=f"{address_book.id}")
3539

3640

3741
if __name__ == "__main__":

‎examples/07_ProxyList/definitions/model.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
Person:
2-
_label: Personal Informations
2+
_label: Personal Information
33
FirstName:
44
_label: First Name
55
type: string

‎trame_simput/module/core.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,8 @@ def push(self, id=None, type=None, domains=None):
142142
)
143143

144144
def emit(self, topic, **kwargs):
145+
if not self._server.protocol:
146+
return
145147
logger.info("emit: %s", topic)
146148
self._server.protocol_call("simput.push.event", topic, **kwargs)
147149

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export default {
3838
() => emit("query", props.query?.toLowerCase() || ""),
3939
250
4040
),
41+
managerId,
4142
};
4243

4344
const updateManager = function updateManager() {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div v-if="available">
22
<v-runtime-template v-if="!noUi" :template="ui" :data="data" />
3-
<span style="display: none">{{ data }}</span>
3+
<!-- <span style="display: none">{{ data }}</span> -->
44
<slot name="default" v-bind="all" />
55
<slot name="properties" v-bind="properties" />
66
</div>

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

Lines changed: 88 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import SimputInput from "../../components/SimputItem/index.vue";
22
import { useDecorator } from "../../core/utils";
33

4-
const { computed, inject, toRef } = window.Vue;
4+
const { computed, inject, toRef, ref } = window.Vue;
55

66
export default {
77
name: "swProxy",
@@ -12,6 +12,17 @@ export default {
1212
mtime: {
1313
type: Number,
1414
},
15+
size: {
16+
type: Number,
17+
default: 1,
18+
},
19+
sizeControl: {
20+
type: Boolean,
21+
default: false,
22+
},
23+
proxyType: {
24+
type: String,
25+
},
1526
},
1627
components: {
1728
SimputInput,
@@ -28,15 +39,91 @@ export default {
2839
});
2940

3041
const properties = inject("properties");
42+
43+
const model = computed({
44+
get() {
45+
/* eslint-disable no-unused-expressions */
46+
props.mtime; // force refresh
47+
const value = properties() && properties()[props.name];
48+
if (!value && props.size > 1) {
49+
const emptyArray = [];
50+
emptyArray.length = props.size;
51+
return emptyArray;
52+
}
53+
return value;
54+
},
55+
set(v) {
56+
properties()[props.name] = v;
57+
},
58+
});
59+
3160
const itemId = computed(() => {
3261
/* eslint-disable no-unused-expressions */
3362
props.mtime; // force refresh
3463
return properties()[props.name];
3564
});
3665

66+
const computedLayout = computed(() => {
67+
/* eslint-disable no-unused-expressions */
68+
props.mtime; // force refresh
69+
return props.layout || domains()[props.name]?.UI?.layout || "vertical";
70+
});
71+
72+
const computedSize = computed(() => {
73+
if (Number(props.size) !== 1) {
74+
return Math.max(props.size || 1, model.value.length || 0);
75+
}
76+
return Number(props.size);
77+
});
78+
79+
const computedSizeControl = computed(() => {
80+
/* eslint-disable no-unused-expressions */
81+
props.mtime; // force refresh
82+
return props.sizeControl || domains()[props.name]?.UI?.sizeControl;
83+
});
84+
85+
const deleteEntry = function deleteEntry(index) {
86+
if (computedSize.value > Number(props.size)) {
87+
model.value.splice(index, 1);
88+
dirty(props.name);
89+
}
90+
};
91+
92+
const getComponentProps = function getComponentProps(index) {
93+
if (computedLayout.value === "vertical") {
94+
return { cols: 12 };
95+
}
96+
if (computedLayout.value === "l2") {
97+
return { cols: 6 };
98+
}
99+
if (computedLayout.value === "l3") {
100+
return { cols: 4 };
101+
}
102+
if (computedLayout.value === "l4") {
103+
return { cols: 3 };
104+
}
105+
if (computedLayout.value === "m3-half") {
106+
const attrs = { cols: 4 };
107+
if (index === 3) {
108+
attrs.offset = 4;
109+
}
110+
if (index === 5) {
111+
attrs.offset = 8;
112+
}
113+
return attrs;
114+
}
115+
return {};
116+
};
117+
37118
return {
38119
itemId,
39120
decorator,
121+
model,
122+
computedLayout,
123+
computedSize,
124+
computedSizeControl,
125+
deleteEntry,
126+
getComponentProps,
40127
};
41128
},
42129
};

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,26 @@
1-
<SimputInput :itemId="itemId" v-show="decorator.show" />
1+
<template v-if="size==1">
2+
<SimputInput :itemId="itemId" v-show="decorator.show" />
3+
</template>
4+
<template v-else>
5+
<v-col>
6+
<v-row
7+
class="py-1"
8+
v-for="i in computedSize"
9+
:key="i"
10+
v-bind="getComponentProps(i - 1)"
11+
>
12+
<v-col>
13+
<SimputInput :itemId="itemId[i-1]" v-show="decorator.show"/>
14+
</v-col>
15+
<v-col cols="1">
16+
<v-btn
17+
v-if="computedSizeControl"
18+
class="ml-2 elevation-0"
19+
icon="mdi-minus-circle-outline"
20+
size="x-small"
21+
@click="deleteEntry(i - 1)"
22+
/>
23+
</v-col>
24+
</v-row>
25+
</v-col>
26+
</template>

0 commit comments

Comments
 (0)