Skip to content

Commit b0d28e2

Browse files
frostimefrostime
committed
🔨 refactor(setting): 重构了Svelte设置的模板
- 将 SettingPanel 作为基本模板 - 更改了 settingitem 的类型定义
1 parent f1fcf77 commit b0d28e2

File tree

6 files changed

+169
-116
lines changed

6 files changed

+169
-116
lines changed

‎src/index.ts‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
import "@/index.scss";
1818

1919
import HelloExample from "@/hello.svelte";
20-
import SettingPannel from "@/libs/setting-panel.svelte";
20+
import SettingExample from "@/setting-example.svelte";
2121

2222
import { SettingUtils } from "./libs/setting-utils";
2323

@@ -173,16 +173,10 @@ export default class PluginSample extends Plugin {
173173
title: "Readonly text",
174174
description: "Select description",
175175
select: {
176-
options: [
177-
{
178-
val: 1,
179-
text: "Option 1"
180-
},
181-
{
182-
val: 2,
183-
text: "Option 2"
184-
}
185-
]
176+
options: {
177+
1: "Option 1",
178+
2: "Option 2"
179+
}
186180
}
187181
});
188182
this.settingUtils.addItem({
@@ -270,7 +264,7 @@ export default class PluginSample extends Plugin {
270264
pannel.$destroy();
271265
}
272266
});
273-
let pannel = new SettingPannel({
267+
let pannel = new SettingExample({
274268
target: dialog.element.querySelector("#SettingPanel"),
275269
});
276270
}

‎src/libs/index.d.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,16 @@ interface ISettingItem {
55
type: TSettingItemType;
66
title: string;
77
description?: string;
8+
text?: {
9+
placeholder?: string;
10+
};
811
slider?: {
912
min: number;
1013
max: number;
1114
step: number;
1215
};
1316
select?: {
14-
options: {val: any; text: string}[];
17+
options: { [key: string | number]: string };
1518
};
1619
button?: {
1720
label: string;

‎src/libs/setting-item.svelte‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
import { createEventDispatcher } from "svelte";
33
export let type: string; // Setting Type
44
export let title: string; // Displayint Setting Title
5-
export let text: string; // Displaying Setting Text
5+
export let description: string; // Displaying Setting Text
66
export let settingKey: string;
77
export let settingValue: any;
88
99
//Optional
1010
export let placeholder: string = ""; // Use it if type is input
11-
export let options: { [key: string]: string } = {}; // Use it if type is select
11+
export let options: { [key: string | number]: string } = {}; // Use it if type is select
1212
export let slider: {
1313
min: number;
1414
max: number;
@@ -30,7 +30,7 @@
3030
<div class="fn__flex-1">
3131
{title}
3232
<div class="b3-label__text">
33-
{text}
33+
{@html description}
3434
</div>
3535
</div>
3636
<span class="fn__space" />
@@ -53,6 +53,14 @@
5353
bind:value={settingValue}
5454
on:change={changed}
5555
/>
56+
{:else if type === "number"}
57+
<input
58+
class="b3-text-field fn__flex-center fn__size200"
59+
id={settingKey}
60+
type="number"
61+
bind:value={settingValue}
62+
on:change={changed}
63+
/>
5664
{:else if type === "button"}
5765
<!-- Button Input -->
5866
<button

‎src/libs/setting-panel.svelte‎

Lines changed: 43 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,46 @@
1-
<script>
2-
import SettingItem from "./setting-item.svelte";
3-
import { showMessage } from "siyuan";
4-
import { onMount, onDestroy } from 'svelte';
5-
onMount(() => {
6-
showMessage("Setting panel opened");
7-
});
8-
onDestroy(() => {
9-
showMessage("Setting panel closed");
10-
});
11-
</script>
12-
131
<!--
14-
You can use this template to quickly create a setting panel,
15-
with the same UI style in SiYuan
2+
Copyright (c) 2023 by frostime All Rights Reserved.
3+
Author : frostime
4+
Date : 2023-07-01 19:23:50
5+
FilePath : /src/libs/setting-panel.svelte
6+
LastEditTime : 2023-11-28 21:23:56
7+
Description :
168
-->
9+
<script lang="ts">
10+
import { createEventDispatcher } from "svelte";
11+
import SettingItem from "./setting-item.svelte";
12+
13+
export let group: string;
14+
export let settingItems: ISettingItem[];
15+
export let display: boolean = true;
16+
17+
const dispatch = createEventDispatcher();
18+
19+
function onClick( {detail}) {
20+
dispatch("click", { key: detail.key });
21+
}
22+
function onChanged( {detail}) {
23+
dispatch("changed", {group: group, ...detail});
24+
}
25+
26+
$: fn__none = display ? "" : "fn__none";
27+
28+
</script>
1729

18-
<div class="config__tab-container">
19-
<div data-type="Header" class="fn__flex b3-label">
20-
<div class="fn_flex-1">
21-
<h4>This setting panel is provided by a svelte component</h4>
22-
<div class="b3-label__text">
23-
<span class="fn__flex-1">
24-
See:
25-
<pre style="display: inline">/lib/setting-pannel.svelte</pre>
26-
</span>
27-
</div>
28-
</div>
29-
</div>
30-
<SettingItem
31-
type="checkbox"
32-
title="Checkbox"
33-
text="This is a checkbox"
34-
settingKey="Checkbox"
35-
settingValue={true}
36-
on:changed={(event) => {
37-
showMessage(
38-
`Checkbox changed: ${event.detail.key} = ${event.detail.value}`
39-
);
40-
}}
41-
/>
42-
<SettingItem
43-
type="input"
44-
title="Input"
45-
text="This is an input"
46-
settingKey="Input"
47-
settingValue=""
48-
placeholder="Input something"
49-
on:changed={(event) => {
50-
showMessage(
51-
`Input changed: ${event.detail.key} = ${event.detail.value}`
52-
);
53-
}}
54-
/>
55-
<SettingItem
56-
type="button"
57-
title="Button"
58-
text="This is a button"
59-
settingKey="Button"
60-
settingValue="Click me"
61-
on:clicked={() => {
62-
showMessage("Button clicked");
63-
}}
64-
/>
65-
<SettingItem
66-
type="select"
67-
title="Select"
68-
text="This is a select"
69-
settingKey="Select"
70-
settingValue="left"
71-
options={{
72-
left: "Left",
73-
center: "Center",
74-
right: "Right",
75-
}}
76-
on:changed={(event) => {
77-
showMessage(
78-
`Select changed: ${event.detail.key} = ${event.detail.value}`
79-
);
80-
}}
81-
/>
82-
<SettingItem
83-
type="slider"
84-
title="Slide"
85-
text="This is a slide"
86-
settingKey="Slide"
87-
settingValue={50}
88-
slider={{
89-
min: 0,
90-
max: 100,
91-
step: 1,
92-
}}
93-
on:changed={(event) => {
94-
showMessage(
95-
`Slide changed: ${event.detail.key} = ${event.detail.value}`
96-
);
97-
}}
98-
/>
99-
</div>
30+
<div class="config__tab-container {fn__none}" data-name={group}>
31+
<slot />
32+
{#each settingItems as item (item.key)}
33+
<SettingItem
34+
type={item.type}
35+
title={item.title}
36+
description={item.description}
37+
settingKey={item.key}
38+
settingValue={item.value}
39+
placeholder={item?.text.placeholder}
40+
options={item?.select.options}
41+
slider={item?.slider}
42+
on:click={onClick}
43+
on:changed={onChanged}
44+
/>
45+
{/each}
46+
</div>

‎src/libs/setting-utils.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @Author : frostime
44
* @Date : 2023-09-16 18:05:00
55
* @FilePath : /src/libs/setting-utils.ts
6-
* @LastEditTime : 2023-10-28 16:52:01
6+
* @LastEditTime : 2023-11-28 21:16:36
77
* @Description : A utility for siyuan plugin settings
88
*/
99

@@ -93,10 +93,12 @@ export class SettingUtils {
9393
case 'select':
9494
let selectElement: HTMLSelectElement = document.createElement('select');
9595
selectElement.className = "b3-select fn__flex-center fn__size200";
96-
for (let option of item.select?.options ?? []) {
96+
let options = item.select?.options ?? {};
97+
for (let val in options) {
9798
let optionElement = document.createElement('option');
98-
optionElement.value = option.val;
99-
optionElement.text = option.text;
99+
let text = options[val];
100+
optionElement.value = val;
101+
optionElement.text = text;
100102
selectElement.appendChild(optionElement);
101103
}
102104
selectElement.value = item.value;

‎src/setting-example.svelte‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<script>
2+
import SettingItem from "@/libs/setting-item.svelte";
3+
import { showMessage } from "siyuan";
4+
import { onMount, onDestroy } from 'svelte';
5+
onMount(() => {
6+
showMessage("Setting panel opened");
7+
});
8+
onDestroy(() => {
9+
showMessage("Setting panel closed");
10+
});
11+
</script>
12+
13+
<!--
14+
You can use this template to quickly create a setting panel,
15+
with the same UI style in SiYuan
16+
-->
17+
18+
<div class="config__tab-container">
19+
<div data-type="Header" class="fn__flex b3-label">
20+
<div class="fn_flex-1">
21+
<h4>This setting panel is provided by a svelte component</h4>
22+
<div class="b3-label__text">
23+
<span class="fn__flex-1">
24+
See:
25+
<pre style="display: inline">/lib/setting-pannel.svelte</pre>
26+
</span>
27+
</div>
28+
</div>
29+
</div>
30+
<SettingItem
31+
type="checkbox"
32+
title="Checkbox"
33+
description="This is a <b>checkbox</b>"
34+
settingKey="Checkbox"
35+
settingValue={true}
36+
on:changed={(event) => {
37+
showMessage(
38+
`Checkbox changed: ${event.detail.key} = ${event.detail.value}`
39+
);
40+
}}
41+
/>
42+
<SettingItem
43+
type="input"
44+
title="Input"
45+
description="This is an input"
46+
settingKey="Input"
47+
settingValue=""
48+
placeholder="Input something"
49+
on:changed={(event) => {
50+
showMessage(
51+
`Input changed: ${event.detail.key} = ${event.detail.value}`
52+
);
53+
}}
54+
/>
55+
<SettingItem
56+
type="button"
57+
title="Button"
58+
description="This is a button"
59+
settingKey="Button"
60+
settingValue="Click me"
61+
on:clicked={() => {
62+
showMessage("Button clicked");
63+
}}
64+
/>
65+
<SettingItem
66+
type="select"
67+
title="Select"
68+
description="This is a select"
69+
settingKey="Select"
70+
settingValue="left"
71+
options={{
72+
left: "Left",
73+
center: "Center",
74+
right: "Right",
75+
}}
76+
on:changed={(event) => {
77+
showMessage(
78+
`Select changed: ${event.detail.key} = ${event.detail.value}`
79+
);
80+
}}
81+
/>
82+
<SettingItem
83+
type="slider"
84+
title="Slide"
85+
description="This is a slide"
86+
settingKey="Slide"
87+
settingValue={50}
88+
slider={{
89+
min: 0,
90+
max: 100,
91+
step: 1,
92+
}}
93+
on:changed={(event) => {
94+
showMessage(
95+
`Slide changed: ${event.detail.key} = ${event.detail.value}`
96+
);
97+
}}
98+
/>
99+
</div>

0 commit comments

Comments
 (0)