@staging-apiplus/essentials 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -3
- package/dist/{derive_logic_editor_panel-D_bgZnMq.js → derive_logic_editor_panel-CpdUm43a.js} +4 -1
- package/dist/{design_time-hqGakP97.js → design_time-CtAJMDnD.js} +19 -13
- package/dist/gallery.js +1 -1
- package/dist/npm-package.json +1 -1
- package/dist/qp-package.json +6 -10
- package/dist/slider.editor.js +475 -12
- package/dist/slider.js +267 -268
- package/dist/slider.schema.json +7 -1
- package/dist/tab.editor.js +1 -1
- package/package.json +24 -24
package/README.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
# `@staging-apiplus/essentials`
|
|
2
2
|
|
|
3
|
-
First-party QuickPage code package: **gallery** (code component) and **slider** / **tab** (logic). Source for the **System library** snapshot (`@staging-apiplus/essentials`).
|
|
3
|
+
First-party QuickPage code package: **gallery** (code component) and **slider** / **tab** (logic; `slider` never writes layout styles at runtime). Source for the **System library** snapshot (`@staging-apiplus/essentials`).
|
|
4
4
|
|
|
5
5
|
## Tooling dependencies
|
|
6
6
|
|
|
7
7
|
| Context | `@packages/qp-sdk` / `@packages/qp-cli` |
|
|
8
8
|
| --- | --- |
|
|
9
|
-
| **Monorepo root** `pnpm install` | `workspace:@packages/qp-*@^0.0.
|
|
10
|
-
| **Registry-shaped** (same as external authors) | `make publish-qp-tooling-dev` with mock-registry up, then `pnpm install` in this folder — resolves via [`.npmrc`](../.npmrc) at `^0.0.
|
|
9
|
+
| **Monorepo root** `pnpm install` | `workspace:@packages/qp-*@^0.0.3` — links in-tree packages (no Verdaccio required) |
|
|
10
|
+
| **Registry-shaped** (same as external authors) | `make publish-qp-tooling-dev` with mock-registry up, then `pnpm install` in this folder — resolves via [`.npmrc`](../.npmrc) at `^0.0.3` |
|
|
11
11
|
|
|
12
12
|
No Node `imports` map to `packages/qp_sdk/src` — builds use published SDK layout like third-party packages.
|
|
13
13
|
|
|
@@ -20,6 +20,36 @@ pnpm run validate # qp validate
|
|
|
20
20
|
pnpm run test:unit # schema + DOM helper tests
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
+
## Slider
|
|
24
|
+
|
|
25
|
+
| Prop | Default | Behavior |
|
|
26
|
+
| --- | --- | --- |
|
|
27
|
+
| `loop` | `true` | Infinite loop in preview and on published pages. Next on the last slide moves on to the first one in the same direction, and Previous on the first moves back to the last. No slides are cloned: each slide is moved to the end of the track that is nearest to the active slide. The track needs at least two slides. Prev/next stay enabled at both ends. When `false`, the index clamps and prev/next are disabled at the ends. The editor canvas shows the chosen slide with no wrap animation. |
|
|
28
|
+
| `speed` | `400` | Transition time in ms. |
|
|
29
|
+
| `autoplay` / `autoplayDelay` | `false` / `3000` | Advances one slide per delay; follows `loop` at the last slide. |
|
|
30
|
+
|
|
31
|
+
The runtime treats a missing `loop` as `true`, so attachments saved before the prop existed also loop. Designers toggle **Loop** in the slide settings panel; it writes `loop` through `libraryLogic.updateProps`.
|
|
32
|
+
|
|
33
|
+
Designers toggle **Autoplay** and set **Speed** in the same panel. Autoplay writes `autoplay`; Speed writes `autoplayDelay` (the time between slides, not the `speed` transition time), clamped to a minimum of 500 ms, and is disabled while Autoplay is off.
|
|
34
|
+
|
|
35
|
+
Swipe: in preview and published pages, dragging a slide along the slide axis (horizontal or vertical, from the wrapper's `flexDirection`) follows the pointer and settles on the next or previous slide when released past ~40px (a third of the slide for small slides); respects `loop`, pauses autoplay while dragging, and swallows the click that ends a drag. Starting across the axis scrolls the page (`touch-action` is set to `pan-y` / `pan-x`). Prev/next/pagination controls are not swipe handles. The editor canvas has no swipe, so selection and layer drags are unaffected.
|
|
36
|
+
|
|
37
|
+
### Slide settings modal
|
|
38
|
+
|
|
39
|
+
Opened from the slider's header button on the slider host. The slider declares it in `slider/editor/editor.ts` (`editorPanel.dialog`); QuickPage renders the generic logic editor dialog (`interaction/logic/editor_dialog/`), so its button, controls and slide list come from that declaration.
|
|
40
|
+
|
|
41
|
+
| Behavior | Rule |
|
|
42
|
+
| --- | --- |
|
|
43
|
+
| Source | The top card shows the repeat source bound to the **first slide** (the repeated template), or **Non-sourced** when none. Clicking opens the Source picker (Variables / Components); the slide count follows the source. Shown even with no slides, but inert until a slide exists. |
|
|
44
|
+
| Slides | List, reorder, rename, duplicate, set default, delete, and add run through the slider editor plugin actions; clicking a slide previews it on the canvas (cleared on close). |
|
|
45
|
+
| Direction | The `setDirection` action writes `flexDirection` on the `wrapper` role node. |
|
|
46
|
+
| Dragging | Drag by the title bar; clamped to the viewport; resets to the anchored position on reopen. |
|
|
47
|
+
| Closing | The close button, or any selection change whose primary node is neither the slider host nor a descendant (slides keep it open; clearing the selection closes it). Wired in `SelectionState.#dismissSelectionScopedUi` through `logicEditorDialog`. |
|
|
48
|
+
|
|
49
|
+
### Binding wires (Connect panel)
|
|
50
|
+
|
|
51
|
+
The **Connect** button on a Logic row opens the Connect sub-panel (`interaction/logic/connect/logic_connect.svelte`), laid out like Repeater Connect (title "Connect <logic>", an Output count, then one row per wire). Each wiring key from the logic's wiring schema (e.g. slider wrapper, pagination) is a row showing the bound layer or **Not bound**. **Connect** / **Rebind** starts a canvas pick (button turns **Cancel** while picking; the next click on a layer inside the slider host binds it). The panel closes with the back button, or when the selection leaves the slider host (`closeSubPanelIfInvalid`); closing cancels any running pick. The old "Bind nodes" rows in the expanded Logic row were removed.
|
|
52
|
+
|
|
23
53
|
## Author documentation
|
|
24
54
|
|
|
25
55
|
Lifecycle (editor / preview / published), SDK APIs, and logic tiers — applies to **all** code packages:
|
package/dist/{derive_logic_editor_panel-D_bgZnMq.js → derive_logic_editor_panel-CpdUm43a.js}
RENAMED
|
@@ -4,7 +4,9 @@ function e(e) {
|
|
|
4
4
|
kind: "logic-editor",
|
|
5
5
|
editorPanel: e.editorPanel,
|
|
6
6
|
mount: e.mount ?? (() => {}),
|
|
7
|
-
onAction: e.onAction
|
|
7
|
+
onAction: e.onAction,
|
|
8
|
+
onWireBound: e.onWireBound,
|
|
9
|
+
insert: e.insert
|
|
8
10
|
};
|
|
9
11
|
}
|
|
10
12
|
//#endregion
|
|
@@ -38,6 +40,7 @@ function t(e, t, n) {
|
|
|
38
40
|
id: "content-items",
|
|
39
41
|
label: e.items.add?.label ?? "Items",
|
|
40
42
|
role: t.contentRole,
|
|
43
|
+
parentRole: e.items.content.list,
|
|
41
44
|
activeStateKey: r,
|
|
42
45
|
suggestClass: n?.suggestClass,
|
|
43
46
|
actions: a
|
|
@@ -8,22 +8,27 @@ var t = {
|
|
|
8
8
|
PaginationDot: "paginationDot",
|
|
9
9
|
Prev: "prev",
|
|
10
10
|
Next: "next"
|
|
11
|
-
}
|
|
12
|
-
t.Wrapper
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
}, n = {
|
|
12
|
+
[t.Wrapper]: {
|
|
13
|
+
kind: e.Container,
|
|
14
|
+
owns: [t.Slide]
|
|
15
|
+
},
|
|
16
|
+
[t.Slide]: { kind: e.Repeatable },
|
|
17
|
+
[t.Pagination]: {
|
|
18
|
+
kind: e.Control,
|
|
19
|
+
owns: [t.PaginationDot]
|
|
20
|
+
},
|
|
21
|
+
[t.PaginationDot]: { kind: e.Repeatable },
|
|
22
|
+
[t.Prev]: { kind: e.Control },
|
|
23
|
+
[t.Next]: { kind: e.Control }
|
|
24
|
+
}, r = {
|
|
16
25
|
mode: "active-item",
|
|
17
26
|
activeIndexStateKey: "activeSlideIndex",
|
|
18
27
|
items: {
|
|
19
28
|
content: {
|
|
20
29
|
list: t.Wrapper,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
markers: {
|
|
24
|
-
list: t.Pagination,
|
|
25
|
-
template: t.PaginationDot,
|
|
26
|
-
variables: ["slideIndex", "slideNumber"]
|
|
30
|
+
item: t.Slide,
|
|
31
|
+
shiftToActive: !0
|
|
27
32
|
},
|
|
28
33
|
add: {
|
|
29
34
|
label: "Add slide",
|
|
@@ -41,7 +46,8 @@ var n = {
|
|
|
41
46
|
chromeNavigation: {
|
|
42
47
|
prevRole: t.Prev,
|
|
43
48
|
nextRole: t.Next
|
|
44
|
-
}
|
|
49
|
+
},
|
|
50
|
+
unboundRoleParents: { [t.PaginationDot]: t.Pagination }
|
|
45
51
|
};
|
|
46
52
|
//#endregion
|
|
47
|
-
export { t as
|
|
53
|
+
export { n, t as r, r as t };
|
package/dist/gallery.js
CHANGED
package/dist/npm-package.json
CHANGED
package/dist/qp-package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"id": "@staging-apiplus/essentials",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"engine": "^1.0.0",
|
|
5
5
|
"framework": "svelte",
|
|
6
6
|
"capabilities": [
|
|
@@ -38,15 +38,8 @@
|
|
|
38
38
|
"items": {
|
|
39
39
|
"content": {
|
|
40
40
|
"list": "wrapper",
|
|
41
|
-
"
|
|
42
|
-
|
|
43
|
-
"markers": {
|
|
44
|
-
"list": "pagination",
|
|
45
|
-
"template": "paginationDot",
|
|
46
|
-
"variables": [
|
|
47
|
-
"slideIndex",
|
|
48
|
-
"slideNumber"
|
|
49
|
-
]
|
|
41
|
+
"item": "slide",
|
|
42
|
+
"shiftToActive": true
|
|
50
43
|
},
|
|
51
44
|
"add": {
|
|
52
45
|
"label": "Add slide",
|
|
@@ -76,6 +69,9 @@
|
|
|
76
69
|
"chromeNavigation": {
|
|
77
70
|
"prevRole": "prev",
|
|
78
71
|
"nextRole": "next"
|
|
72
|
+
},
|
|
73
|
+
"unboundRoleParents": {
|
|
74
|
+
"paginationDot": "pagination"
|
|
79
75
|
}
|
|
80
76
|
},
|
|
81
77
|
"schema": "./dist/slider.schema.json",
|
package/dist/slider.editor.js
CHANGED
|
@@ -1,33 +1,496 @@
|
|
|
1
|
-
import { n as e, t } from "./derive_logic_editor_panel-
|
|
2
|
-
import { n, t as
|
|
1
|
+
import { n as e, t } from "./derive_logic_editor_panel-CpdUm43a.js";
|
|
2
|
+
import { n, r, t as i } from "./design_time-CtAJMDnD.js";
|
|
3
|
+
//#region ../../packages/qp_sdk/src/editor/bridge/editor_panel.ts
|
|
4
|
+
var a = {
|
|
5
|
+
Setting: "setting",
|
|
6
|
+
Slide: "slide",
|
|
7
|
+
Vertical: "vertical",
|
|
8
|
+
Horizontal: "horizontal"
|
|
9
|
+
}, o = 30, s = 334, c = "#0099FF26", l = "#38b6ff80", u = [
|
|
10
|
+
"#ff66c426",
|
|
11
|
+
"#ff313126",
|
|
12
|
+
"#ff751f26"
|
|
13
|
+
], d = {
|
|
14
|
+
fontFamily: "system-ui",
|
|
15
|
+
fontSize: "48px",
|
|
16
|
+
fontWeight: "700",
|
|
17
|
+
color: "#000000"
|
|
18
|
+
}, f = {
|
|
19
|
+
page: "95bc79e3-2ffc-4f0e-bc3b-59772d40b5dd",
|
|
20
|
+
host: "72fe81e8-1821-4e65-9d40-f3ed990c81ae",
|
|
21
|
+
wrapper: "b0b1b6f1-5f20-46f2-80c8-3f2482a18095",
|
|
22
|
+
slides: [
|
|
23
|
+
"65e9e881-6038-4aac-ac85-846defc4382f",
|
|
24
|
+
"a9c45552-e9ce-4750-93f8-ff44fe98767b",
|
|
25
|
+
"115bb039-6113-4f53-827d-28c5bad38a31"
|
|
26
|
+
],
|
|
27
|
+
pagination: "e5c43906-ca4a-4cd7-a9a0-cd90b3b562a1",
|
|
28
|
+
dot: "e0f3ebf7-ae36-4cf1-9add-c54af889fe0e",
|
|
29
|
+
nav: "3746c8c1-56d4-4b0f-8694-26dc940366b0",
|
|
30
|
+
prev: "b382ce4c-346c-41bc-8825-80f29c883348",
|
|
31
|
+
prevText: "9cb450ae-9399-4950-b19c-de0b02991ff3",
|
|
32
|
+
next: "0acdcb04-00f4-4d13-ba60-19c0e415fe57",
|
|
33
|
+
nextText: "6cc69b23-2b5f-4e34-8112-509dcf5a635e"
|
|
34
|
+
}, p = f.pagination, m = f.dot, h = (e) => `${e}px`;
|
|
35
|
+
function g(e, t = e) {
|
|
36
|
+
return {
|
|
37
|
+
paddingTop: h(e),
|
|
38
|
+
paddingRight: h(t),
|
|
39
|
+
paddingBottom: h(e),
|
|
40
|
+
paddingLeft: h(t)
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
function _(e) {
|
|
44
|
+
return {
|
|
45
|
+
borderTopLeftRadius: h(e),
|
|
46
|
+
borderTopRightRadius: h(e),
|
|
47
|
+
borderBottomRightRadius: h(e),
|
|
48
|
+
borderBottomLeftRadius: h(e)
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
function v(e) {
|
|
52
|
+
return { background: { bg1: { css: e } } };
|
|
53
|
+
}
|
|
54
|
+
function y(e, t) {
|
|
55
|
+
return [e.nodes.frame({
|
|
56
|
+
id: t.frameId,
|
|
57
|
+
parentId: f.nav,
|
|
58
|
+
indexKey: t.indexKey,
|
|
59
|
+
title: t.title,
|
|
60
|
+
props: { style: {
|
|
61
|
+
display: "flex",
|
|
62
|
+
overflow: "hidden",
|
|
63
|
+
flexDirection: "column",
|
|
64
|
+
justifyContent: "center",
|
|
65
|
+
alignItems: "center",
|
|
66
|
+
...g(10),
|
|
67
|
+
rowGap: h(10),
|
|
68
|
+
columnGap: h(10),
|
|
69
|
+
position: "relative",
|
|
70
|
+
width: "fit-content",
|
|
71
|
+
height: "fit-content",
|
|
72
|
+
aspectRatio: "1",
|
|
73
|
+
flexGrow: "0",
|
|
74
|
+
flexShrink: "0",
|
|
75
|
+
...v(c)
|
|
76
|
+
} }
|
|
77
|
+
}), e.nodes.text({
|
|
78
|
+
id: t.textId,
|
|
79
|
+
parentId: t.frameId,
|
|
80
|
+
indexKey: "a0",
|
|
81
|
+
title: `${t.title} icon`,
|
|
82
|
+
text: t.text,
|
|
83
|
+
textStyle: d,
|
|
84
|
+
props: { style: {
|
|
85
|
+
display: "flex",
|
|
86
|
+
width: "fit-content",
|
|
87
|
+
height: "fit-content",
|
|
88
|
+
flexGrow: "0",
|
|
89
|
+
flexShrink: "0"
|
|
90
|
+
} }
|
|
91
|
+
})];
|
|
92
|
+
}
|
|
93
|
+
function b(e) {
|
|
94
|
+
return [e.nodes.frame({
|
|
95
|
+
id: p,
|
|
96
|
+
parentId: f.host,
|
|
97
|
+
indexKey: "a1",
|
|
98
|
+
title: "Pagination",
|
|
99
|
+
props: { style: {
|
|
100
|
+
display: "flex",
|
|
101
|
+
overflow: "hidden",
|
|
102
|
+
flexDirection: "row",
|
|
103
|
+
justifyContent: "center",
|
|
104
|
+
alignItems: "center",
|
|
105
|
+
...g(10),
|
|
106
|
+
rowGap: h(10),
|
|
107
|
+
columnGap: h(10),
|
|
108
|
+
position: "relative",
|
|
109
|
+
width: h(400),
|
|
110
|
+
height: h(40),
|
|
111
|
+
flexGrow: "0",
|
|
112
|
+
flexShrink: "0",
|
|
113
|
+
borderTopWidth: h(2),
|
|
114
|
+
borderRightWidth: h(2),
|
|
115
|
+
borderBottomWidth: h(2),
|
|
116
|
+
borderLeftWidth: h(2),
|
|
117
|
+
borderColor: "#000000",
|
|
118
|
+
borderStyle: "solid",
|
|
119
|
+
..._(20)
|
|
120
|
+
} }
|
|
121
|
+
}), e.nodes.frame({
|
|
122
|
+
id: m,
|
|
123
|
+
parentId: p,
|
|
124
|
+
indexKey: "a0",
|
|
125
|
+
title: "Dot",
|
|
126
|
+
props: {
|
|
127
|
+
style: {
|
|
128
|
+
display: "flex",
|
|
129
|
+
overflow: "hidden",
|
|
130
|
+
flexDirection: "column",
|
|
131
|
+
alignItems: "start",
|
|
132
|
+
rowGap: h(10),
|
|
133
|
+
columnGap: h(10),
|
|
134
|
+
position: "relative",
|
|
135
|
+
width: h(20),
|
|
136
|
+
height: "100%",
|
|
137
|
+
flexGrow: "0",
|
|
138
|
+
flexShrink: "0",
|
|
139
|
+
..._(20),
|
|
140
|
+
...v(c)
|
|
141
|
+
},
|
|
142
|
+
interaction: { pseudoStates: { "dot-selected": {
|
|
143
|
+
state: "[aria-current=\"true\"]",
|
|
144
|
+
title: "aria-current",
|
|
145
|
+
indexKey: "a0",
|
|
146
|
+
targets: { [`node=${m}`]: { props: { style: {
|
|
147
|
+
...v(l),
|
|
148
|
+
width: h(50)
|
|
149
|
+
} } } }
|
|
150
|
+
} } }
|
|
151
|
+
}
|
|
152
|
+
})];
|
|
153
|
+
}
|
|
154
|
+
function x(e) {
|
|
155
|
+
return {
|
|
156
|
+
flatNodes: b(e),
|
|
157
|
+
rootNodeId: p,
|
|
158
|
+
roleNodes: {
|
|
159
|
+
[r.Pagination]: p,
|
|
160
|
+
[r.PaginationDot]: m
|
|
161
|
+
},
|
|
162
|
+
wiring: { [r.Pagination]: r.Pagination },
|
|
163
|
+
roleDefinitions: n
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
function S(e) {
|
|
167
|
+
let t = [
|
|
168
|
+
e.nodes.frame({
|
|
169
|
+
id: f.host,
|
|
170
|
+
parentId: f.page,
|
|
171
|
+
indexKey: "a0",
|
|
172
|
+
title: "Slider",
|
|
173
|
+
props: { style: {
|
|
174
|
+
display: "flex",
|
|
175
|
+
overflow: "hidden",
|
|
176
|
+
flexDirection: "column",
|
|
177
|
+
justifyContent: "center",
|
|
178
|
+
alignItems: "center",
|
|
179
|
+
...g(20, 50),
|
|
180
|
+
rowGap: h(20),
|
|
181
|
+
columnGap: h(10),
|
|
182
|
+
position: "relative",
|
|
183
|
+
width: "stretch",
|
|
184
|
+
height: "fit-content",
|
|
185
|
+
flexGrow: "0",
|
|
186
|
+
flexShrink: "0"
|
|
187
|
+
} }
|
|
188
|
+
}),
|
|
189
|
+
e.nodes.frame({
|
|
190
|
+
id: f.wrapper,
|
|
191
|
+
parentId: f.host,
|
|
192
|
+
indexKey: "a0",
|
|
193
|
+
title: "Slides",
|
|
194
|
+
props: { style: {
|
|
195
|
+
display: "flex",
|
|
196
|
+
overflow: "hidden",
|
|
197
|
+
flexDirection: "row",
|
|
198
|
+
alignItems: "start",
|
|
199
|
+
...g(o),
|
|
200
|
+
rowGap: h(10),
|
|
201
|
+
columnGap: h(10),
|
|
202
|
+
position: "relative",
|
|
203
|
+
width: "100%",
|
|
204
|
+
height: h(s),
|
|
205
|
+
flexGrow: "0",
|
|
206
|
+
flexShrink: "0",
|
|
207
|
+
...v(c)
|
|
208
|
+
} }
|
|
209
|
+
}),
|
|
210
|
+
...u.map((t, n) => e.nodes.frame({
|
|
211
|
+
id: f.slides[n],
|
|
212
|
+
parentId: f.wrapper,
|
|
213
|
+
indexKey: `a${n}`,
|
|
214
|
+
title: `Slide ${n + 1}`,
|
|
215
|
+
props: { style: {
|
|
216
|
+
display: "flex",
|
|
217
|
+
overflow: "hidden",
|
|
218
|
+
flexDirection: "column",
|
|
219
|
+
alignItems: "start",
|
|
220
|
+
rowGap: h(10),
|
|
221
|
+
columnGap: h(10),
|
|
222
|
+
position: "relative",
|
|
223
|
+
width: "100%",
|
|
224
|
+
height: "100%",
|
|
225
|
+
flexGrow: "0",
|
|
226
|
+
flexShrink: "0",
|
|
227
|
+
...v(t)
|
|
228
|
+
} }
|
|
229
|
+
})),
|
|
230
|
+
...b(e),
|
|
231
|
+
e.nodes.frame({
|
|
232
|
+
id: f.nav,
|
|
233
|
+
parentId: f.host,
|
|
234
|
+
indexKey: "a2",
|
|
235
|
+
title: "Navigation",
|
|
236
|
+
props: { style: {
|
|
237
|
+
display: "flex",
|
|
238
|
+
overflow: "hidden",
|
|
239
|
+
flexDirection: "row",
|
|
240
|
+
justifyContent: "center",
|
|
241
|
+
alignItems: "center",
|
|
242
|
+
...g(10),
|
|
243
|
+
rowGap: h(10),
|
|
244
|
+
columnGap: h(10),
|
|
245
|
+
position: "relative",
|
|
246
|
+
width: "fit-content",
|
|
247
|
+
height: "fit-content",
|
|
248
|
+
flexGrow: "0",
|
|
249
|
+
flexShrink: "0"
|
|
250
|
+
} }
|
|
251
|
+
}),
|
|
252
|
+
...y(e, {
|
|
253
|
+
frameId: f.prev,
|
|
254
|
+
textId: f.prevText,
|
|
255
|
+
title: "Previous",
|
|
256
|
+
text: "<",
|
|
257
|
+
indexKey: "a0"
|
|
258
|
+
}),
|
|
259
|
+
...y(e, {
|
|
260
|
+
frameId: f.next,
|
|
261
|
+
textId: f.nextText,
|
|
262
|
+
title: "Next",
|
|
263
|
+
text: ">",
|
|
264
|
+
indexKey: "a1"
|
|
265
|
+
})
|
|
266
|
+
];
|
|
267
|
+
return {
|
|
268
|
+
version: 1,
|
|
269
|
+
hostNodeId: f.host,
|
|
270
|
+
flatNodes: t,
|
|
271
|
+
roleNodes: {
|
|
272
|
+
[r.Wrapper]: f.wrapper,
|
|
273
|
+
[r.Slide]: f.slides[0],
|
|
274
|
+
[r.Pagination]: p,
|
|
275
|
+
[r.PaginationDot]: m,
|
|
276
|
+
[r.Prev]: f.prev,
|
|
277
|
+
[r.Next]: f.next
|
|
278
|
+
},
|
|
279
|
+
attach: {
|
|
280
|
+
repeatRoles: [{
|
|
281
|
+
role: r.PaginationDot,
|
|
282
|
+
sourceRole: r.Wrapper
|
|
283
|
+
}],
|
|
284
|
+
editorState: { activeSlideIndex: 0 },
|
|
285
|
+
wiring: {
|
|
286
|
+
wrapper: `@role:${r.Wrapper}`,
|
|
287
|
+
pagination: `@role:${r.Pagination}`,
|
|
288
|
+
prevButton: `@role:${r.Prev}`,
|
|
289
|
+
nextButton: `@role:${r.Next}`
|
|
290
|
+
},
|
|
291
|
+
roleDefinitions: n
|
|
292
|
+
}
|
|
293
|
+
};
|
|
294
|
+
}
|
|
295
|
+
//#endregion
|
|
3
296
|
//#region src/slider/editor/editor.ts
|
|
4
|
-
var
|
|
297
|
+
var C = 3e3, w = 500, T = {
|
|
298
|
+
vertical: "vertical",
|
|
299
|
+
horizontal: "horizontal"
|
|
300
|
+
}, E = t(i, { contentRole: r.Slide }, {
|
|
5
301
|
includeSettings: !1,
|
|
6
302
|
suggestClass: "qp-slider-slide",
|
|
7
303
|
contentActions: {
|
|
8
304
|
reorder: "reorderSlide",
|
|
9
305
|
remove: "removeSlide",
|
|
10
306
|
add: "addSlide",
|
|
11
|
-
setActive: "setActiveSlide"
|
|
307
|
+
setActive: "setActiveSlide",
|
|
308
|
+
duplicate: "duplicateSlide",
|
|
309
|
+
rename: "renameSlide"
|
|
12
310
|
}
|
|
13
|
-
}),
|
|
311
|
+
}), D = E.find((e) => e.type === "collection"), O = E.filter((e) => e.type === "logic-states");
|
|
312
|
+
function k(e) {
|
|
313
|
+
return e.tree.getRoleStyle(r.Wrapper, "flexDirection") === "column" ? "rowGap" : "columnGap";
|
|
314
|
+
}
|
|
315
|
+
function A(e) {
|
|
316
|
+
return e.tree.hasRole(r.Wrapper);
|
|
317
|
+
}
|
|
318
|
+
function j(e) {
|
|
319
|
+
return e.logic.getProps().autoplay === !0;
|
|
320
|
+
}
|
|
321
|
+
function M(e) {
|
|
322
|
+
return e.tree.isRoleVisible(r.Pagination);
|
|
323
|
+
}
|
|
324
|
+
function N(e, t) {
|
|
325
|
+
return e.tree.setRoleRepeated(r.PaginationDot, {
|
|
326
|
+
sourceRole: r.Wrapper,
|
|
327
|
+
enabled: t
|
|
328
|
+
});
|
|
329
|
+
}
|
|
330
|
+
var P = {
|
|
331
|
+
type: "controls",
|
|
332
|
+
id: "slider-settings",
|
|
333
|
+
label: "Settings",
|
|
334
|
+
controls: [
|
|
335
|
+
{
|
|
336
|
+
id: "default-slide",
|
|
337
|
+
kind: "select",
|
|
338
|
+
label: "Default",
|
|
339
|
+
value: {
|
|
340
|
+
editorState: i.activeIndexStateKey,
|
|
341
|
+
fallback: 0
|
|
342
|
+
},
|
|
343
|
+
options: (e) => e.host.listByRole(r.Slide).map((e, t) => ({
|
|
344
|
+
value: t,
|
|
345
|
+
label: e.name
|
|
346
|
+
}))
|
|
347
|
+
},
|
|
348
|
+
{
|
|
349
|
+
id: "autoplay",
|
|
350
|
+
kind: "toggle",
|
|
351
|
+
label: "Autoplay",
|
|
352
|
+
value: {
|
|
353
|
+
prop: "autoplay",
|
|
354
|
+
fallback: !1
|
|
355
|
+
}
|
|
356
|
+
},
|
|
357
|
+
{
|
|
358
|
+
id: "autoplay-delay",
|
|
359
|
+
kind: "number",
|
|
360
|
+
label: "Speed",
|
|
361
|
+
value: {
|
|
362
|
+
prop: "autoplayDelay",
|
|
363
|
+
fallback: C
|
|
364
|
+
},
|
|
365
|
+
min: w,
|
|
366
|
+
step: 100,
|
|
367
|
+
unit: "ms",
|
|
368
|
+
isDisabled: (e) => !j(e)
|
|
369
|
+
},
|
|
370
|
+
{
|
|
371
|
+
id: "loop",
|
|
372
|
+
kind: "toggle",
|
|
373
|
+
label: "Loop",
|
|
374
|
+
value: {
|
|
375
|
+
prop: "loop",
|
|
376
|
+
fallback: !0
|
|
377
|
+
}
|
|
378
|
+
},
|
|
379
|
+
{
|
|
380
|
+
id: "space-between",
|
|
381
|
+
kind: "style-input",
|
|
382
|
+
label: "Space between",
|
|
383
|
+
role: r.Wrapper,
|
|
384
|
+
property: k,
|
|
385
|
+
cssProperty: "gap",
|
|
386
|
+
isVisible: A
|
|
387
|
+
},
|
|
388
|
+
{
|
|
389
|
+
id: "pagination",
|
|
390
|
+
kind: "toggle",
|
|
391
|
+
label: "Pagination",
|
|
392
|
+
value: {
|
|
393
|
+
read: M,
|
|
394
|
+
action: "setPagination"
|
|
395
|
+
}
|
|
396
|
+
},
|
|
397
|
+
{
|
|
398
|
+
id: "pagination-dot",
|
|
399
|
+
kind: "toggle",
|
|
400
|
+
label: "Pagination dot",
|
|
401
|
+
description: "Pagination dots automatically repeat based on the number of slides.",
|
|
402
|
+
value: {
|
|
403
|
+
read: (e) => e.tree.isRoleRepeated(r.PaginationDot),
|
|
404
|
+
action: "setPaginationDot"
|
|
405
|
+
},
|
|
406
|
+
isDisabled: (e) => !M(e) || !e.tree.hasRole(r.PaginationDot),
|
|
407
|
+
devOnly: !0
|
|
408
|
+
}
|
|
409
|
+
]
|
|
410
|
+
}, F = [
|
|
411
|
+
{
|
|
412
|
+
type: "repeat-source",
|
|
413
|
+
role: r.Slide,
|
|
414
|
+
parentRole: r.Wrapper,
|
|
415
|
+
addAction: "addSlide"
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
type: "controls",
|
|
419
|
+
id: "slider-direction",
|
|
420
|
+
controls: [{
|
|
421
|
+
id: "direction",
|
|
422
|
+
kind: "segmented",
|
|
423
|
+
label: "Direction",
|
|
424
|
+
description: "Specifies the direction in which the slider moves during transition.",
|
|
425
|
+
options: [{
|
|
426
|
+
value: T.vertical,
|
|
427
|
+
label: "column (vertical)",
|
|
428
|
+
icon: a.Vertical
|
|
429
|
+
}, {
|
|
430
|
+
value: T.horizontal,
|
|
431
|
+
label: "row (horizontal)",
|
|
432
|
+
icon: a.Horizontal
|
|
433
|
+
}],
|
|
434
|
+
value: {
|
|
435
|
+
read: (e) => e.tree.getRoleStyle(r.Wrapper, "flexDirection") === "column" ? T.vertical : T.horizontal,
|
|
436
|
+
action: "setDirection"
|
|
437
|
+
},
|
|
438
|
+
isVisible: A
|
|
439
|
+
}]
|
|
440
|
+
},
|
|
441
|
+
...D ? [{
|
|
442
|
+
...D,
|
|
443
|
+
label: "Slide"
|
|
444
|
+
}] : []
|
|
445
|
+
], I = e({
|
|
14
446
|
editorPanel: {
|
|
15
447
|
profile: { label: "Slider" },
|
|
16
|
-
sections:
|
|
448
|
+
sections: [...O, P],
|
|
449
|
+
dialog: {
|
|
450
|
+
label: "Slide settings",
|
|
451
|
+
icon: a.Slide,
|
|
452
|
+
sections: F
|
|
453
|
+
}
|
|
454
|
+
},
|
|
455
|
+
insert: {
|
|
456
|
+
label: "Slider",
|
|
457
|
+
snapshot: S,
|
|
458
|
+
roleSubtrees: { [r.Pagination]: x }
|
|
459
|
+
},
|
|
460
|
+
async onWireBound(e, t) {
|
|
461
|
+
let { bridge: n } = e;
|
|
462
|
+
return t !== r.Pagination || !n.tree.hasRole(r.PaginationDot) ? { success: !0 } : N(n, !0);
|
|
17
463
|
},
|
|
18
|
-
async onAction(e, t,
|
|
464
|
+
async onAction(e, t, n) {
|
|
19
465
|
let { bridge: i } = e;
|
|
20
466
|
switch (t) {
|
|
21
467
|
case "reorderSlide": {
|
|
22
|
-
let e = String(
|
|
468
|
+
let e = String(n.nodeId ?? ""), t = Number(n.offset ?? 0);
|
|
23
469
|
return i.tree.reorderChild(e, t);
|
|
24
470
|
}
|
|
25
471
|
case "removeSlide": {
|
|
26
|
-
let e = String(
|
|
472
|
+
let e = String(n.nodeId ?? "");
|
|
27
473
|
return i.tree.removeRole(e);
|
|
28
474
|
}
|
|
29
|
-
case "addSlide": return i.tree.addRole(
|
|
30
|
-
case "setActiveSlide": return i.logic.setEditorState({ activeSlideIndex: Number(
|
|
475
|
+
case "addSlide": return i.tree.addRole(r.Slide, { parentRole: r.Wrapper });
|
|
476
|
+
case "setActiveSlide": return i.logic.setEditorState({ activeSlideIndex: Number(n.index ?? 0) });
|
|
477
|
+
case "duplicateSlide": {
|
|
478
|
+
let e = String(n.nodeId ?? ""), t = i.host.listByRole(r.Slide).findIndex((t) => t.nodeId === e), a = Number(i.logic.getEditorState().activeSlideIndex ?? 0), o = await i.tree.duplicateRole(e);
|
|
479
|
+
return o.success && t >= 0 && a > t ? i.logic.setEditorState({ activeSlideIndex: a + 1 }) : o;
|
|
480
|
+
}
|
|
481
|
+
case "setDirection": return i.tree.setRoleStyle(r.Wrapper, "flexDirection", n.value === T.vertical ? "column" : "row");
|
|
482
|
+
case "setPagination": {
|
|
483
|
+
let e = n.value === !0;
|
|
484
|
+
if (i.tree.hasRole(r.Pagination)) return i.tree.setRoleVisible(r.Pagination, e);
|
|
485
|
+
if (!e) return { success: !0 };
|
|
486
|
+
let t = await i.tree.insertRoleSubtree(r.Pagination, { afterRole: r.Wrapper });
|
|
487
|
+
return t.success ? N(i, !0) : t;
|
|
488
|
+
}
|
|
489
|
+
case "setPaginationDot": return N(i, n.value === !0);
|
|
490
|
+
case "renameSlide": {
|
|
491
|
+
let e = String(n.nodeId ?? ""), t = String(n.label ?? "");
|
|
492
|
+
return i.tree.renameRoleNode(e, t);
|
|
493
|
+
}
|
|
31
494
|
default: return {
|
|
32
495
|
success: !1,
|
|
33
496
|
message: `Unsupported slider editor action: ${t}`
|
|
@@ -36,4 +499,4 @@ var i = t(r, { contentRole: n.Slide }, {
|
|
|
36
499
|
}
|
|
37
500
|
});
|
|
38
501
|
//#endregion
|
|
39
|
-
export {
|
|
502
|
+
export { I as default };
|