Skip to content

Commit 2051a2a

Browse files
frostimefrostime
committedNov 28, 2023
✅ test: setting panel
1 parent b0d28e2 commit 2051a2a

File tree

5 files changed

+107
-111
lines changed

5 files changed

+107
-111
lines changed
 

‎src/index.ts

+4-6
Original file line numberDiff line numberDiff line change
@@ -172,11 +172,9 @@ export default class PluginSample extends Plugin {
172172
type: "select",
173173
title: "Readonly text",
174174
description: "Select description",
175-
select: {
176-
options: {
177-
1: "Option 1",
178-
2: "Option 2"
179-
}
175+
options: {
176+
1: "Option 1",
177+
2: "Option 2"
180178
}
181179
});
182180
this.settingUtils.addItem({
@@ -256,7 +254,7 @@ export default class PluginSample extends Plugin {
256254
openDIYSetting(): void {
257255
let dialog = new Dialog({
258256
title: "SettingPannel",
259-
content: `<div id="SettingPanel"></div>`,
257+
content: `<div id="SettingPanel" style="height: 100%;"></div>`,
260258
width: "600px",
261259
destroyCallback: (options) => {
262260
console.log("destroyCallback", options);

‎src/libs/index.d.ts

+2-6
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,13 @@ interface ISettingItem {
55
type: TSettingItemType;
66
title: string;
77
description?: string;
8-
text?: {
9-
placeholder?: string;
10-
};
8+
placeholder?: string;
119
slider?: {
1210
min: number;
1311
max: number;
1412
step: number;
1513
};
16-
select?: {
17-
options: { [key: string | number]: string };
18-
};
14+
options?: { [key: string | number]: string };
1915
button?: {
2016
label: string;
2117
callback: () => void;

‎src/libs/setting-panel.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
Author : frostime
44
Date : 2023-07-01 19:23:50
55
FilePath : /src/libs/setting-panel.svelte
6-
LastEditTime : 2023-11-28 21:23:56
6+
LastEditTime : 2023-11-28 21:45:10
77
Description :
88
-->
99
<script lang="ts">
@@ -36,8 +36,8 @@
3636
description={item.description}
3737
settingKey={item.key}
3838
settingValue={item.value}
39-
placeholder={item?.text.placeholder}
40-
options={item?.select.options}
39+
placeholder={item?.placeholder}
40+
options={item?.options}
4141
slider={item?.slider}
4242
on:click={onClick}
4343
on:changed={onChanged}

‎src/libs/setting-utils.ts

+2-2
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-11-28 21:16:36
6+
* @LastEditTime : 2023-11-28 21:46:29
77
* @Description : A utility for siyuan plugin settings
88
*/
99

@@ -93,7 +93,7 @@ export class SettingUtils {
9393
case 'select':
9494
let selectElement: HTMLSelectElement = document.createElement('select');
9595
selectElement.className = "b3-select fn__flex-center fn__size200";
96-
let options = item.select?.options ?? {};
96+
let options = item?.options ?? {};
9797
for (let val in options) {
9898
let optionElement = document.createElement('option');
9999
let text = options[val];

‎src/setting-example.svelte

+96-94
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,101 @@
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>
1+
<script lang="ts">
2+
import SettingPanel from "./libs/setting-panel.svelte";
3+
4+
let groups: string[] = ["🌈 Default"];
5+
let focusGroup = groups[0];
126
13-
<!--
14-
You can use this template to quickly create a setting panel,
15-
with the same UI style in SiYuan
16-
-->
7+
const SettingItems: ISettingItem[] = [
8+
{
9+
type: 'checkbox',
10+
title: 'checkbox',
11+
description: 'checkbox',
12+
key: 'a',
13+
value: true
14+
},
15+
{
16+
type: 'textinput',
17+
title: 'text',
18+
description: 'This is a text',
19+
key: 'b',
20+
value: 'This is a text',
21+
placeholder: 'placeholder'
22+
},
23+
{
24+
type: 'select',
25+
title: 'select',
26+
description: 'select',
27+
key: 'c',
28+
value: 'x',
29+
options: {
30+
x: 'x',
31+
y: 'y',
32+
z: 'z'
33+
}
34+
},
35+
{
36+
type: 'slider',
37+
title: 'slider',
38+
description: 'slider',
39+
key: 'd',
40+
value: 50,
41+
slider: {
42+
min: 0,
43+
max: 100,
44+
step: 1
45+
}
46+
}
47+
];
1748
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>
49+
/********** Events **********/
50+
interface ChangeEvent {
51+
group: string;
52+
key: string;
53+
value: any;
54+
}
55+
56+
const onChanged = ({ detail }: CustomEvent<ChangeEvent>) => {
57+
if (detail.group === groups[0]) {
58+
// setting.set(detail.key, detail.value);
59+
}
60+
};
61+
</script>
62+
63+
<div class="fn__flex-1 fn__flex config__panel">
64+
<ul class="b3-tab-bar b3-list b3-list--background">
65+
{#each groups as group}
66+
<li
67+
data-name="editor"
68+
class:b3-list-item--focus={group === focusGroup}
69+
class="b3-list-item"
70+
on:click={() => {
71+
focusGroup = group;
72+
}}
73+
on:keydown={() => {}}
74+
>
75+
<span class="b3-list-item__text">{group}</span>
76+
</li>
77+
{/each}
78+
</ul>
79+
<div class="config__tab-wrap">
80+
<SettingPanel
81+
group={groups[0]}
82+
settingItems={SettingItems}
83+
display={focusGroup === groups[0]}
84+
on:changed={onChanged}
85+
>
86+
<div class="fn__flex b3-label">
87+
💡 This is our default settings.
2788
</div>
28-
</div>
89+
</SettingPanel>
2990
</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-
/>
9991
</div>
92+
93+
<style lang="scss">
94+
.config__panel {
95+
height: 100%;
96+
}
97+
.config__panel > ul > li {
98+
padding-left: 1rem;
99+
}
100+
</style>
101+

0 commit comments

Comments
 (0)
Please sign in to comment.