✅ test: setting panel
This commit is contained in:
frostime
parent
b0d28e2513
commit
2051a2a7d6
5 changed files with 107 additions and 111 deletions
|
|
@ -172,12 +172,10 @@ export default class PluginSample extends Plugin {
|
|||
type: "select",
|
||||
title: "Readonly text",
|
||||
description: "Select description",
|
||||
select: {
|
||||
options: {
|
||||
1: "Option 1",
|
||||
2: "Option 2"
|
||||
}
|
||||
}
|
||||
});
|
||||
this.settingUtils.addItem({
|
||||
key: "Slider",
|
||||
|
|
@ -256,7 +254,7 @@ export default class PluginSample extends Plugin {
|
|||
openDIYSetting(): void {
|
||||
let dialog = new Dialog({
|
||||
title: "SettingPannel",
|
||||
content: `<div id="SettingPanel"></div>`,
|
||||
content: `<div id="SettingPanel" style="height: 100%;"></div>`,
|
||||
width: "600px",
|
||||
destroyCallback: (options) => {
|
||||
console.log("destroyCallback", options);
|
||||
|
|
|
|||
6
src/libs/index.d.ts
vendored
6
src/libs/index.d.ts
vendored
|
|
@ -5,17 +5,13 @@ interface ISettingItem {
|
|||
type: TSettingItemType;
|
||||
title: string;
|
||||
description?: string;
|
||||
text?: {
|
||||
placeholder?: string;
|
||||
};
|
||||
slider?: {
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
};
|
||||
select?: {
|
||||
options: { [key: string | number]: string };
|
||||
};
|
||||
options?: { [key: string | number]: string };
|
||||
button?: {
|
||||
label: string;
|
||||
callback: () => void;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Author : frostime
|
||||
Date : 2023-07-01 19:23:50
|
||||
FilePath : /src/libs/setting-panel.svelte
|
||||
LastEditTime : 2023-11-28 21:23:56
|
||||
LastEditTime : 2023-11-28 21:45:10
|
||||
Description :
|
||||
-->
|
||||
<script lang="ts">
|
||||
|
|
@ -36,8 +36,8 @@
|
|||
description={item.description}
|
||||
settingKey={item.key}
|
||||
settingValue={item.value}
|
||||
placeholder={item?.text.placeholder}
|
||||
options={item?.select.options}
|
||||
placeholder={item?.placeholder}
|
||||
options={item?.options}
|
||||
slider={item?.slider}
|
||||
on:click={onClick}
|
||||
on:changed={onChanged}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @Author : frostime
|
||||
* @Date : 2023-09-16 18:05:00
|
||||
* @FilePath : /src/libs/setting-utils.ts
|
||||
* @LastEditTime : 2023-11-28 21:16:36
|
||||
* @LastEditTime : 2023-11-28 21:46:29
|
||||
* @Description : A utility for siyuan plugin settings
|
||||
*/
|
||||
|
||||
|
|
@ -93,7 +93,7 @@ export class SettingUtils {
|
|||
case 'select':
|
||||
let selectElement: HTMLSelectElement = document.createElement('select');
|
||||
selectElement.className = "b3-select fn__flex-center fn__size200";
|
||||
let options = item.select?.options ?? {};
|
||||
let options = item?.options ?? {};
|
||||
for (let val in options) {
|
||||
let optionElement = document.createElement('option');
|
||||
let text = options[val];
|
||||
|
|
|
|||
|
|
@ -1,99 +1,101 @@
|
|||
<script>
|
||||
import SettingItem from "@/libs/setting-item.svelte";
|
||||
import { showMessage } from "siyuan";
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
onMount(() => {
|
||||
showMessage("Setting panel opened");
|
||||
});
|
||||
onDestroy(() => {
|
||||
showMessage("Setting panel closed");
|
||||
});
|
||||
</script>
|
||||
<script lang="ts">
|
||||
import SettingPanel from "./libs/setting-panel.svelte";
|
||||
|
||||
<!--
|
||||
You can use this template to quickly create a setting panel,
|
||||
with the same UI style in SiYuan
|
||||
-->
|
||||
let groups: string[] = ["🌈 Default"];
|
||||
let focusGroup = groups[0];
|
||||
|
||||
<div class="config__tab-container">
|
||||
<div data-type="Header" class="fn__flex b3-label">
|
||||
<div class="fn_flex-1">
|
||||
<h4>This setting panel is provided by a svelte component</h4>
|
||||
<div class="b3-label__text">
|
||||
<span class="fn__flex-1">
|
||||
See:
|
||||
<pre style="display: inline">/lib/setting-pannel.svelte</pre>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SettingItem
|
||||
type="checkbox"
|
||||
title="Checkbox"
|
||||
description="This is a <b>checkbox</b>"
|
||||
settingKey="Checkbox"
|
||||
settingValue={true}
|
||||
on:changed={(event) => {
|
||||
showMessage(
|
||||
`Checkbox changed: ${event.detail.key} = ${event.detail.value}`
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<SettingItem
|
||||
type="input"
|
||||
title="Input"
|
||||
description="This is an input"
|
||||
settingKey="Input"
|
||||
settingValue=""
|
||||
placeholder="Input something"
|
||||
on:changed={(event) => {
|
||||
showMessage(
|
||||
`Input changed: ${event.detail.key} = ${event.detail.value}`
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<SettingItem
|
||||
type="button"
|
||||
title="Button"
|
||||
description="This is a button"
|
||||
settingKey="Button"
|
||||
settingValue="Click me"
|
||||
on:clicked={() => {
|
||||
showMessage("Button clicked");
|
||||
}}
|
||||
/>
|
||||
<SettingItem
|
||||
type="select"
|
||||
title="Select"
|
||||
description="This is a select"
|
||||
settingKey="Select"
|
||||
settingValue="left"
|
||||
options={{
|
||||
left: "Left",
|
||||
center: "Center",
|
||||
right: "Right",
|
||||
}}
|
||||
on:changed={(event) => {
|
||||
showMessage(
|
||||
`Select changed: ${event.detail.key} = ${event.detail.value}`
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<SettingItem
|
||||
type="slider"
|
||||
title="Slide"
|
||||
description="This is a slide"
|
||||
settingKey="Slide"
|
||||
settingValue={50}
|
||||
slider={{
|
||||
const SettingItems: ISettingItem[] = [
|
||||
{
|
||||
type: 'checkbox',
|
||||
title: 'checkbox',
|
||||
description: 'checkbox',
|
||||
key: 'a',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
type: 'textinput',
|
||||
title: 'text',
|
||||
description: 'This is a text',
|
||||
key: 'b',
|
||||
value: 'This is a text',
|
||||
placeholder: 'placeholder'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
title: 'select',
|
||||
description: 'select',
|
||||
key: 'c',
|
||||
value: 'x',
|
||||
options: {
|
||||
x: 'x',
|
||||
y: 'y',
|
||||
z: 'z'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'slider',
|
||||
title: 'slider',
|
||||
description: 'slider',
|
||||
key: 'd',
|
||||
value: 50,
|
||||
slider: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
step: 1
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
/********** Events **********/
|
||||
interface ChangeEvent {
|
||||
group: string;
|
||||
key: string;
|
||||
value: any;
|
||||
}
|
||||
|
||||
const onChanged = ({ detail }: CustomEvent<ChangeEvent>) => {
|
||||
if (detail.group === groups[0]) {
|
||||
// setting.set(detail.key, detail.value);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="fn__flex-1 fn__flex config__panel">
|
||||
<ul class="b3-tab-bar b3-list b3-list--background">
|
||||
{#each groups as group}
|
||||
<li
|
||||
data-name="editor"
|
||||
class:b3-list-item--focus={group === focusGroup}
|
||||
class="b3-list-item"
|
||||
on:click={() => {
|
||||
focusGroup = group;
|
||||
}}
|
||||
on:changed={(event) => {
|
||||
showMessage(
|
||||
`Slide changed: ${event.detail.key} = ${event.detail.value}`
|
||||
);
|
||||
}}
|
||||
/>
|
||||
on:keydown={() => {}}
|
||||
>
|
||||
<span class="b3-list-item__text">{group}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<div class="config__tab-wrap">
|
||||
<SettingPanel
|
||||
group={groups[0]}
|
||||
settingItems={SettingItems}
|
||||
display={focusGroup === groups[0]}
|
||||
on:changed={onChanged}
|
||||
>
|
||||
<div class="fn__flex b3-label">
|
||||
💡 This is our default settings.
|
||||
</div>
|
||||
</SettingPanel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.config__panel {
|
||||
height: 100%;
|
||||
}
|
||||
.config__panel > ul > li {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue