🔨 refactor(setting): 重构了Svelte设置的模板
- 将 SettingPanel 作为基本模板 - 更改了 settingitem 的类型定义
This commit is contained in:
frostime
parent
f1fcf77500
commit
b0d28e2513
6 changed files with 169 additions and 116 deletions
16
src/index.ts
16
src/index.ts
|
|
@ -17,7 +17,7 @@ import {
|
|||
import "@/index.scss";
|
||||
|
||||
import HelloExample from "@/hello.svelte";
|
||||
import SettingPannel from "@/libs/setting-panel.svelte";
|
||||
import SettingExample from "@/setting-example.svelte";
|
||||
|
||||
import { SettingUtils } from "./libs/setting-utils";
|
||||
|
||||
|
|
@ -173,16 +173,10 @@ export default class PluginSample extends Plugin {
|
|||
title: "Readonly text",
|
||||
description: "Select description",
|
||||
select: {
|
||||
options: [
|
||||
{
|
||||
val: 1,
|
||||
text: "Option 1"
|
||||
},
|
||||
{
|
||||
val: 2,
|
||||
text: "Option 2"
|
||||
options: {
|
||||
1: "Option 1",
|
||||
2: "Option 2"
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
this.settingUtils.addItem({
|
||||
|
|
@ -270,7 +264,7 @@ export default class PluginSample extends Plugin {
|
|||
pannel.$destroy();
|
||||
}
|
||||
});
|
||||
let pannel = new SettingPannel({
|
||||
let pannel = new SettingExample({
|
||||
target: dialog.element.querySelector("#SettingPanel"),
|
||||
});
|
||||
}
|
||||
|
|
|
|||
5
src/libs/index.d.ts
vendored
5
src/libs/index.d.ts
vendored
|
|
@ -5,13 +5,16 @@ interface ISettingItem {
|
|||
type: TSettingItemType;
|
||||
title: string;
|
||||
description?: string;
|
||||
text?: {
|
||||
placeholder?: string;
|
||||
};
|
||||
slider?: {
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
};
|
||||
select?: {
|
||||
options: {val: any; text: string}[];
|
||||
options: { [key: string | number]: string };
|
||||
};
|
||||
button?: {
|
||||
label: string;
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
import { createEventDispatcher } from "svelte";
|
||||
export let type: string; // Setting Type
|
||||
export let title: string; // Displayint Setting Title
|
||||
export let text: string; // Displaying Setting Text
|
||||
export let description: string; // Displaying Setting Text
|
||||
export let settingKey: string;
|
||||
export let settingValue: any;
|
||||
|
||||
//Optional
|
||||
export let placeholder: string = ""; // Use it if type is input
|
||||
export let options: { [key: string]: string } = {}; // Use it if type is select
|
||||
export let options: { [key: string | number]: string } = {}; // Use it if type is select
|
||||
export let slider: {
|
||||
min: number;
|
||||
max: number;
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<div class="fn__flex-1">
|
||||
{title}
|
||||
<div class="b3-label__text">
|
||||
{text}
|
||||
{@html description}
|
||||
</div>
|
||||
</div>
|
||||
<span class="fn__space" />
|
||||
|
|
@ -53,6 +53,14 @@
|
|||
bind:value={settingValue}
|
||||
on:change={changed}
|
||||
/>
|
||||
{:else if type === "number"}
|
||||
<input
|
||||
class="b3-text-field fn__flex-center fn__size200"
|
||||
id={settingKey}
|
||||
type="number"
|
||||
bind:value={settingValue}
|
||||
on:change={changed}
|
||||
/>
|
||||
{:else if type === "button"}
|
||||
<!-- Button Input -->
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -1,99 +1,46 @@
|
|||
<script>
|
||||
<!--
|
||||
Copyright (c) 2023 by frostime All Rights Reserved.
|
||||
Author : frostime
|
||||
Date : 2023-07-01 19:23:50
|
||||
FilePath : /src/libs/setting-panel.svelte
|
||||
LastEditTime : 2023-11-28 21:23:56
|
||||
Description :
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import SettingItem from "./setting-item.svelte";
|
||||
import { showMessage } from "siyuan";
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
onMount(() => {
|
||||
showMessage("Setting panel opened");
|
||||
});
|
||||
onDestroy(() => {
|
||||
showMessage("Setting panel closed");
|
||||
});
|
||||
|
||||
export let group: string;
|
||||
export let settingItems: ISettingItem[];
|
||||
export let display: boolean = true;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function onClick( {detail}) {
|
||||
dispatch("click", { key: detail.key });
|
||||
}
|
||||
function onChanged( {detail}) {
|
||||
dispatch("changed", {group: group, ...detail});
|
||||
}
|
||||
|
||||
$: fn__none = display ? "" : "fn__none";
|
||||
|
||||
</script>
|
||||
|
||||
<!--
|
||||
You can use this template to quickly create a setting panel,
|
||||
with the same UI style in SiYuan
|
||||
-->
|
||||
|
||||
<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>
|
||||
<div class="config__tab-container {fn__none}" data-name={group}>
|
||||
<slot />
|
||||
{#each settingItems as item (item.key)}
|
||||
<SettingItem
|
||||
type="checkbox"
|
||||
title="Checkbox"
|
||||
text="This is a checkbox"
|
||||
settingKey="Checkbox"
|
||||
settingValue={true}
|
||||
on:changed={(event) => {
|
||||
showMessage(
|
||||
`Checkbox changed: ${event.detail.key} = ${event.detail.value}`
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<SettingItem
|
||||
type="input"
|
||||
title="Input"
|
||||
text="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"
|
||||
text="This is a button"
|
||||
settingKey="Button"
|
||||
settingValue="Click me"
|
||||
on:clicked={() => {
|
||||
showMessage("Button clicked");
|
||||
}}
|
||||
/>
|
||||
<SettingItem
|
||||
type="select"
|
||||
title="Select"
|
||||
text="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"
|
||||
text="This is a slide"
|
||||
settingKey="Slide"
|
||||
settingValue={50}
|
||||
slider={{
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
}}
|
||||
on:changed={(event) => {
|
||||
showMessage(
|
||||
`Slide changed: ${event.detail.key} = ${event.detail.value}`
|
||||
);
|
||||
}}
|
||||
type={item.type}
|
||||
title={item.title}
|
||||
description={item.description}
|
||||
settingKey={item.key}
|
||||
settingValue={item.value}
|
||||
placeholder={item?.text.placeholder}
|
||||
options={item?.select.options}
|
||||
slider={item?.slider}
|
||||
on:click={onClick}
|
||||
on:changed={onChanged}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
* @Author : frostime
|
||||
* @Date : 2023-09-16 18:05:00
|
||||
* @FilePath : /src/libs/setting-utils.ts
|
||||
* @LastEditTime : 2023-10-28 16:52:01
|
||||
* @LastEditTime : 2023-11-28 21:16:36
|
||||
* @Description : A utility for siyuan plugin settings
|
||||
*/
|
||||
|
||||
|
|
@ -93,10 +93,12 @@ export class SettingUtils {
|
|||
case 'select':
|
||||
let selectElement: HTMLSelectElement = document.createElement('select');
|
||||
selectElement.className = "b3-select fn__flex-center fn__size200";
|
||||
for (let option of item.select?.options ?? []) {
|
||||
let options = item.select?.options ?? {};
|
||||
for (let val in options) {
|
||||
let optionElement = document.createElement('option');
|
||||
optionElement.value = option.val;
|
||||
optionElement.text = option.text;
|
||||
let text = options[val];
|
||||
optionElement.value = val;
|
||||
optionElement.text = text;
|
||||
selectElement.appendChild(optionElement);
|
||||
}
|
||||
selectElement.value = item.value;
|
||||
|
|
|
|||
99
src/setting-example.svelte
Normal file
99
src/setting-example.svelte
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<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>
|
||||
|
||||
<!--
|
||||
You can use this template to quickly create a setting panel,
|
||||
with the same UI style in SiYuan
|
||||
-->
|
||||
|
||||
<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={{
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
}}
|
||||
on:changed={(event) => {
|
||||
showMessage(
|
||||
`Slide changed: ${event.detail.key} = ${event.detail.value}`
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue