(visible = false)}
167 | />
168 | {/if}
169 |
170 |
192 |
--------------------------------------------------------------------------------
/svelte/demos/cases/RequiredFields.svelte:
--------------------------------------------------------------------------------
1 |
61 |
62 |
63 |
Editor with required fields
64 |
65 |
81 |
82 |
(visible = true)} class:active={visible}>
27 | {#each Object.values(values) as value}
28 | {value}
29 | {/each}
30 |
31 |
32 | {#if visible}
33 |
41 | {/if}
42 |
43 |
60 |
--------------------------------------------------------------------------------
/svelte/demos/cases/Scheduler.svelte:
--------------------------------------------------------------------------------
1 |
227 |
228 | Imitation of scheduler events
229 |
230 |
231 | {#each events as data}
232 |
233 |
234 |
selectActive(data)}
237 | class:active={activeEvent?.id === data.id}
238 | >
239 |
{data.text}
240 |
241 | {/each}
242 |
{message}
22 |
23 |
63 |
64 | {#if visible}
65 |
73 | {/if}
74 |
75 |
92 |
--------------------------------------------------------------------------------
/svelte/demos/cases/SubPanels.svelte:
--------------------------------------------------------------------------------
1 |
18 |
19 |
20 |
21 |
Normal sections
22 |
23 |
24 |
25 |
Exclusive mode
26 |
27 |
28 |
29 |
Normal sections
30 |
31 |
32 |
33 |
Accordion mode
34 |
35 |
36 |
{message}
41 |
42 |
43 | {#each listData as data}
44 |
45 |
46 |
select(data.id)}
49 | class:active={selected?.id === data.id}
50 | >
51 |
{data.label}
52 |
{data.description || ""}
53 |
starts on: {data.start_date.toLocaleDateString()}
54 |
55 | {/each}
56 |
{message}
44 |
45 |
46 | {#each listData as data}
47 |
48 |
49 |
select(data.id)}
52 | class:active={selected?.id === data.id}
53 | >
54 |
{data.label}
55 |
{data.description || ""}
56 | {#if data.state}
57 |
State: {data.state}
58 | {/if}
59 |
60 | {/each}
61 |
9 |
Editor with validation and error messages
10 |
11 |
12 |
13 |
80 |
81 |
82 |
83 |
120 |
121 |
(show = false)}
127 | >
128 |
129 |
130 |
131 |
132 |
133 |
134 |
7 | {#each routes as route}
8 | {'"' + route + '",\n'}
9 | {/each}
10 |
29 |
30 |
31 |
32 |
33 | {#each links.data as obj}
34 |
35 |
36 | |
37 |
38 | {obj.task.text || ""}
39 |
40 | |
41 |
42 |
43 |
44 |
49 | handleChange(e, obj.link.id)}
50 | >
51 | {#snippet children({ option })}
52 | {option.label}
53 | {/snippet}
54 |
55 |
56 | |
57 |
58 |
59 |
64 | |
65 |
66 | {/each}
67 |
68 |
69 |
11 | {#if option.color}
12 |
13 | {:else if option.avatar || option.avatarColor}
14 |
15 | {/if}
16 | {option.label}
17 |
25 | {#if data.avatar}
26 |
27 | {:else if noTransform}{data.label}{:else}{firstLetters}{/if}
28 |
12 |
13 |
14 | {option.label}
15 |
16 |
17 | {/snippet}
18 |
19 |
20 |
30 |
--------------------------------------------------------------------------------
/svelte/demos/custom/scheduler/ColorPickerSchema.svelte:
--------------------------------------------------------------------------------
1 |
27 |
28 |
34 |
--------------------------------------------------------------------------------
/svelte/demos/custom/scheduler/Combo.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | {#snippet children({ option })}
9 | {@const Component = template}
10 |
11 | {/snippet}
12 |
13 |
--------------------------------------------------------------------------------
/svelte/demos/custom/scheduler/DateTimePicker.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 |
11 | {#if time}
12 |
13 | {/if}
14 |
11 |
12 |
13 | {/snippet}
14 |
15 |
--------------------------------------------------------------------------------
/svelte/demos/custom/scheduler/Uploader.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
39 |
--------------------------------------------------------------------------------
/svelte/demos/custom/scheduler/templates/ComboOption.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
{option.label}
7 | {#if option.color}
8 |
12 | {/if}
13 |
6 |
7 | {option.label}
8 |
2 |
3 | # SVAR Svelte Editor
4 |
5 | [](https://www.npmjs.com/package/wx-svelte-editor)
6 | [](https://github.com/svar-widgets/editor/blob/main/license.txt)
7 | [](https://www.npmjs.com/package/wx-svelte-editor)
8 |
9 |
10 |
11 |
12 |
13 | [Documentation](https://docs.svar.dev/svelte/editor/) • [Demos](https://docs.svar.dev/svelte/editor/samples/#/base/willow)
14 |
15 |
16 |
17 | An intuitive Svelte component for creating content editing forms to manage data within UI elements on a page. You can use it for editing structured data like table rows, informational cards, blocks with text, etc.
18 |
19 | ### Key features:
20 |
21 | - **Flexible display options**: open the editor in a modal popup or as a seamless sidebar for convenient access.
22 | - **Multiple input types**: Use various input fields like text inputs, checkboxes, date pickers, sliders, and more controls from [SVAR Svelte Core](https://svar.dev/svelte/core/) library.
23 | - **Built-in validation**: Includes basic validation for required fields and supports custom validation rules for advanced scenarios.
24 | - **Flexible save options**: Choose between manual saves, auto-save, or custom saving logic adjusted to your needs.
25 | - **Compact layout**: Organize forms into expandable sections or a 2-column layout for efficient use of screen space.
26 |
27 | ### How to Use
28 |
29 | To use the widget, simply import the package and include the component in your Svelte file:
30 |
31 | ```svelte
32 |
37 |
38 |
39 | ```
40 |
41 | ### How to Modify
42 |
43 | Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:
44 |
45 | 1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work
46 | 2. Start the project in development mode with `yarn start`
47 |
48 | ### Run Tests
49 |
50 | To run the test:
51 |
52 | 1. Start the test examples with:
53 | ```sh
54 | yarn start:tests
55 | ```
56 | 2. In a separate console, run the end-to-end tests with:
57 | ```sh
58 | yarn test:cypress
59 | ```
60 |
--------------------------------------------------------------------------------
/svelte/src/components/Columns.svelte:
--------------------------------------------------------------------------------
1 |
32 |
33 | {#if layout === "columns"}
34 |
35 |
36 |
37 |
38 |
39 |
47 |
48 |
45 |
56 | {#if children}{@render children()}{/if}
57 |
58 |
59 |
60 |
61 |
67 |
--------------------------------------------------------------------------------
/svelte/src/components/FormEditor.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 | {#if children}{@render children()}{/if}
19 | {#each editors.config as editor}
20 | {#if !editor.hidden}
21 | {#if editor.comp === "readonly" || editor.comp === "section"}
22 | {@const Component = getItemHandler(editor.comp)}
23 |
29 | {:else}
30 |
31 |
37 | {#snippet children({ id })}
38 | {@const Component2 = getItemHandler(editor.comp)}
39 |
41 | onchange &&
42 | onchange({
43 | value: ev.value,
44 | key: editor.key,
45 | })}
46 | {...editor}
47 | {id}
48 | label={undefined}
49 | error={errors && errors[editor.key]}
50 | value={data[editor.key]}
51 | />
52 | {/snippet}
53 |
54 | {#if errors && errors[editor.key] && editor.validationMessage}
55 |
{editor.validationMessage}
56 | {/if}
57 |
58 | {/if}
59 | {/if}
60 | {/each}
61 |
80 |
87 |
91 | {#if children}{@render children()}{/if}
92 |
101 |
109 |
110 |
115 |
122 |
126 | {#if children}{@render children()}{/if}
127 |
136 |
144 |
145 |
18 |
24 |
25 | {/if}
26 |
27 |
48 |
--------------------------------------------------------------------------------
/svelte/src/components/buttons/buttons.js:
--------------------------------------------------------------------------------
1 | export const Spacer = () => ({ comp: "spacer" });
2 | export const CancelButton = _ => ({
3 | comp: "button",
4 | text: _("Cancel"),
5 | id: "cancel",
6 | });
7 | export const SaveButton = _ => ({
8 | type: "primary",
9 | comp: "button",
10 | text: _("Save"),
11 | id: "save",
12 | });
13 | export const CloseIcon = () => ({
14 | comp: "icon",
15 | icon: "wxi-close",
16 | id: "close",
17 | });
18 |
--------------------------------------------------------------------------------
/svelte/src/components/sections/ReadOnly.svelte:
--------------------------------------------------------------------------------
1 |
25 |
26 | {#if text}
27 | {text}
28 | {/if}
29 |
--------------------------------------------------------------------------------
/svelte/src/components/sections/Section.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
11 | onclick &&
12 | onclick({ item: { id: "toggle-section", key: active ? null : key } })}
13 | >
14 |
{label}
15 |
16 |
17 |
18 |
37 |
--------------------------------------------------------------------------------
/svelte/src/editor.js:
--------------------------------------------------------------------------------
1 | import { uid, isSame } from "wx-lib-state";
2 |
3 | function rawGetter(key) {
4 | if (typeof key === "string" && key.includes(".")) {
5 | const parts = key.split(".");
6 | return obj => {
7 | let out = obj;
8 | parts.forEach(p => {
9 | out = out[p];
10 | });
11 | return out;
12 | };
13 | }
14 |
15 | return obj => obj[key];
16 | }
17 | function rawSetter(key) {
18 | if (typeof key === "string" && key.includes(".")) {
19 | const parts = key.split(".");
20 | return (obj, v) => {
21 | let out = obj;
22 | parts.forEach((p, i) => {
23 | if (i === parts.length - 1) out[p] = v;
24 | else out = out[p];
25 | });
26 | };
27 | }
28 |
29 | return (obj, v) => (obj[key] = v);
30 | }
31 |
32 | export function itemsToEditors(sections) {
33 | const config = sections.map(s => {
34 | const obj = { ...s };
35 | if (s.config) Object.assign(obj, s.config);
36 |
37 | obj.key = s.key || uid();
38 | obj.setter = s.setter || rawSetter(s.key);
39 | obj.getter = s.getter || rawGetter(s.key);
40 | return obj;
41 | });
42 |
43 | const getValues = raw => {
44 | const out = {};
45 | config.forEach(ed => {
46 | if (ed.comp === "section") return;
47 | if (ed.getter) out[ed.key] = ed.getter(raw);
48 | else out[ed.key] = raw[ed.key];
49 | });
50 | return out;
51 | };
52 |
53 | const setValues = (out, values, changes) => {
54 | const fields = changes.length
55 | ? changes.map(key => config.find(a => a.key === key))
56 | : config;
57 | fields.forEach(ed => {
58 | if (ed.setter) ed.setter(out, values[ed.key]);
59 | else out[ed.key] = values[ed.key];
60 | });
61 |
62 | return out;
63 | };
64 |
65 | const diff = (raw, values) => {
66 | const initial = getValues(raw);
67 | const changes = [];
68 | config.forEach(ed => {
69 | const a = initial[ed.key];
70 | const b = values[ed.key];
71 | // we can have a situation when initial value is undefined
72 | // but empty editor will return empty value instead of undefined
73 | // this behavior is correct, but we need to ignore this case
74 | if (!isSame(a, b) && (a !== undefined || !!b)) {
75 | changes.push(ed.key);
76 | }
77 | });
78 |
79 | return changes;
80 | };
81 |
82 | const validateValues = (values, _) => {
83 | let any = 0;
84 | const errors = {};
85 |
86 | config.forEach(ed => {
87 | if (ed.required && !values[ed.key]) {
88 | errors[ed.key] = {
89 | errorType: "required",
90 | };
91 | ed.validationMessage =
92 | ed.validationMessage || _("This field is required");
93 | any++;
94 | } else if (ed.validation && !ed.validation(values[ed.key])) {
95 | errors[ed.key] = {
96 | errorType: "validation",
97 | };
98 | ed.validationMessage =
99 | ed.validationMessage || _("Invalid value");
100 | any++;
101 | }
102 | });
103 |
104 | return any > 0 ? errors : null;
105 | };
106 |
107 | return {
108 | config: config.filter(x => x.comp !== "hidden"),
109 | getValues,
110 | setValues,
111 | diff,
112 | validateValues,
113 | };
114 | }
115 |
--------------------------------------------------------------------------------
/svelte/src/en.js:
--------------------------------------------------------------------------------
1 | export default {
2 | editor: {},
3 | };
4 |
--------------------------------------------------------------------------------
/svelte/src/helpers.js:
--------------------------------------------------------------------------------
1 | const handlers = {};
2 | export function getItemHandler(type) {
3 | return handlers[type] || handlers["text"];
4 | }
5 | export function registerEditorItem(type, handler) {
6 | handlers[type] = handler;
7 | }
8 |
--------------------------------------------------------------------------------
/svelte/src/index.js:
--------------------------------------------------------------------------------
1 | import { registerEditorItem } from "./helpers";
2 | import Form from "./components/Form.svelte";
3 | import Editor from "./components/Editor.svelte";
4 |
5 | import Material from "./themes/Material.svelte";
6 | import Willow from "./themes/Willow.svelte";
7 | import WillowDark from "./themes/WillowDark.svelte";
8 |
9 | import ReadOnly from "./components/sections/ReadOnly.svelte";
10 | import Section from "./components/sections/Section.svelte";
11 | import { Text } from "wx-svelte-core";
12 | import { TextArea } from "wx-svelte-core";
13 | import { Checkbox } from "wx-svelte-core";
14 |
15 | registerEditorItem("text", Text);
16 | registerEditorItem("textarea", TextArea);
17 | registerEditorItem("checkbox", Checkbox);
18 |
19 | registerEditorItem("readonly", ReadOnly);
20 | registerEditorItem("section", Section);
21 |
22 | import { setEnv } from "wx-lib-dom";
23 | import { env } from "wx-lib-svelte";
24 | setEnv(env);
25 |
26 | export { registerEditorItem, Form, Editor, Material, Willow, WillowDark };
27 |
--------------------------------------------------------------------------------
/svelte/src/themes/Material.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 | {#if children}
7 | {@render children()}
8 | {:else}
9 |
10 | {/if}
11 |
12 |
17 |
--------------------------------------------------------------------------------
/svelte/src/themes/Willow.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 | {#if children}
7 | {@render children()}
8 | {:else}
9 |
10 | {/if}
11 |
12 |
17 |
--------------------------------------------------------------------------------
/svelte/src/themes/WillowDark.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 | {#if children}
7 | {@render children()}
8 | {:else}
9 |
10 | {/if}
11 |
12 |
17 |
--------------------------------------------------------------------------------
/svelte/svelte.config.js:
--------------------------------------------------------------------------------
1 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
2 |
3 | export default {
4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
5 | // for more information about preprocessors
6 | preprocess: vitePreprocess(),
7 | };
8 |
--------------------------------------------------------------------------------
/svelte/tests/Index.svelte:
--------------------------------------------------------------------------------
1 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
98 |
--------------------------------------------------------------------------------
/svelte/tests/cases/LocalData.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/svelte/tests/data.js:
--------------------------------------------------------------------------------
1 | export function getData() {
2 | return {};
3 | }
4 |
--------------------------------------------------------------------------------
/svelte/tests/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Svelte Widgets
7 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/svelte/tests/index.js:
--------------------------------------------------------------------------------
1 | import Demos from "./Index.svelte";
2 | import { mount } from "svelte";
3 |
4 | mount(Demos, {
5 | target: document.querySelector("#wx_demo_area") || document.body,
6 | });
7 |
--------------------------------------------------------------------------------
/svelte/tests/routes.js:
--------------------------------------------------------------------------------
1 | import LocalData from "./cases/LocalData.svelte";
2 |
3 | export const links = [["/local-data", "", LocalData]];
4 |
--------------------------------------------------------------------------------
/svelte/vite.config.js:
--------------------------------------------------------------------------------
1 | import { loadEnv } from "vite";
2 | import { resolve } from "path";
3 | import { existsSync } from "fs";
4 | import { svelte } from "@sveltejs/vite-plugin-svelte";
5 | import { visualizer } from "rollup-plugin-visualizer";
6 | import { waitChanges, waitOn } from "wx-vite-tools";
7 | import conditionalCompile from "vite-plugin-conditional-compile";
8 | import pkg from "./package.json" with { type: "json" };
9 |
10 | export default async ({ mode }) => {
11 | process.env = { ...process.env, ...loadEnv(mode, process.cwd(), "WX") };
12 | const files = [];
13 |
14 | if (mode !== "production") {
15 | const paths = [
16 | resolve(__dirname, "../store/dist/index.js"),
17 | resolve(__dirname, "../provider/dist/index.js"),
18 | ];
19 |
20 | paths.forEach(path => {
21 | if (existsSync(path)) {
22 | files.push(path);
23 | }
24 | });
25 | }
26 |
27 | const plugins = [];
28 |
29 | if (files.length) plugins.push(waitChanges({ files }));
30 | if (mode !== "development") plugins.push(conditionalCompile());
31 | plugins.push(svelte({}));
32 |
33 | const name = pkg.productTag;
34 |
35 | let build,
36 | publicDir = resolve(__dirname, "public"),
37 | server = {},
38 | base = "";
39 |
40 | if (mode === "test") {
41 | build = {
42 | rollupOptions: {
43 | input: { tests: resolve(__dirname, "tests/index.html") },
44 | },
45 | };
46 | server.port = 5100;
47 | } else {
48 | build = {
49 | rollupOptions: {
50 | input: { index: resolve(__dirname, "index.html") },
51 | },
52 | };
53 | }
54 |
55 | if (process.env.WX_BUILD_STATS) {
56 | build = {
57 | lib: {
58 | entry: resolve(__dirname, "src/index.js"),
59 | name,
60 | formats: ["es"],
61 | fileName: format => `${name}.${format}.js`,
62 | },
63 | outDir: "./dist",
64 | sourcemap: true,
65 | minify: true,
66 | target: "esnext",
67 | };
68 | publicDir = false;
69 | plugins.push(visualizer({ filename: "dist/stats.html" }));
70 | }
71 |
72 | if (files.length) await waitOn({ files });
73 |
74 | return {
75 | base,
76 | build,
77 | publicDir,
78 | resolve: { dedupe: ["svelte"] },
79 | plugins,
80 | server,
81 | watch: {
82 | persistent: true,
83 | include: ["src/**/*.ts", "src/**/*.js"],
84 | },
85 | };
86 | };
87 |
--------------------------------------------------------------------------------
/svelte/whatsnew.md:
--------------------------------------------------------------------------------
1 | ## 2.1.2
2 |
3 | ### Fixes
4 |
5 | - Editor en-US locale is not applied by default
6 |
7 | ## 2.1.1
8 |
9 | ### Fixes
10 |
11 | - Section bars have light styling in WillowDark skin
12 | - Section bars are not clickable for inline Editor
13 | - Content overflow for inline Editor
14 |
15 | ## 2.1.0
16 |
17 | ### New features
18 |
19 | - TextArea and Checkbox as built-in types
20 |
21 | ### Fixes
22 |
23 | - values are not changed until recreated
24 |
25 | ## 2.0.1
26 |
27 | - Public release
28 |
29 | ### New features
30 |
31 | - Svelte 5 support
32 | - Comments and TaskList sections
33 |
34 | ## 0.6.0
35 |
36 | ### New features
37 |
38 | - Validation
39 |
40 | ## 0.5.0
41 |
42 | ### New features
43 |
44 | - Ability to define collapsible sections
45 | - Ability to bind values to toolbar controls
46 |
47 | ### Updates
48 |
49 | - `section:left|right` changed to `column:left|right`
50 |
51 | ## 0.2.0
52 |
53 | - Initial version
54 |
--------------------------------------------------------------------------------
22 |
23 |