feat: svelte example for setting pannel

src/index.ts

@@ -2,9 +2,10 @@
  * Copyright (c) 2023 frostime. All rights reserved.
  * https://github.com/frostime/sy-plugin-template-vite
  */
-import { Plugin, showMessage, Dialog } from "siyuan"
+import { Plugin, showMessage, Dialog } from "siyuan";
-import Hello from "./hello.svelte"
+import Hello from "./hello.svelte";
-import "./index.scss"
+import SettingPannel from "./libs/setting-panel.svelte";
+import "./index.scss";
 
 export default class SamplePlugin extends Plugin {
 
@@ -15,22 +16,35 @@ export default class SamplePlugin extends Plugin {
             {
                 icon: "iconEmoji",
                 "title": "Hello SiYuan",
-                "callback": () => {
+                "callback": () => this.openHelloDialog()
-                    let dialog = new Dialog({
-                        title: "Hello World",
-                        content: `<div id="helloPanel"></div>`,
-                    });
-                    new Hello({
-                        target: dialog.element.querySelector("#helloPanel"),
-                        props: {
-                            name: this.i18n.name,
-                        }
-                    });
-                }
             }
         )
     }
 
+    openSetting(): void {
+        let dialog = new Dialog({
+            title: "SettingPannel",
+            content: `<div id="SettingPanel"></div>`,
+            width: "600px"
+        });
+        new SettingPannel({
+            target: dialog.element.querySelector("#SettingPanel"),
+        });
+    }
+
+    private openHelloDialog() {
+        let dialog = new Dialog({
+            title: "Hello World",
+            content: `<div id="helloPanel"></div>`,
+        });
+        new Hello({
+            target: dialog.element.querySelector("#helloPanel"),
+            props: {
+                name: this.i18n.name,
+            }
+        });
+    }
+
     async onunload() {
         showMessage("Goodbye World");
         console.log("onunload");

src/libs/setting-item.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    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 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 slider: {
+        min: number;
+        max: number;
+        step: number;
+    } = {min: 0, max: 100, step: 1}; // Use it if type is slider
+
+    const dispatch = createEventDispatcher();
+
+    function clicked() {
+        dispatch("clicked");
+    }
+
+    function changed() {
+        dispatch("changed", { key: settingKey, value: settingValue });
+    }
+</script>
+
+<label class="fn__flex b3-label">
+    <div class="fn__flex-1">
+        {title}
+        <div class="b3-label__text">
+            {text}
+        </div>
+    </div>
+    <span class="fn__space" />
+    <!-- <slot /> -->
+    {#if type === "checkbox"}
+        <!-- Checkbox -->
+        <input
+            class="b3-switch fn__flex-center"
+            id={settingKey}
+            type="checkbox"
+            bind:checked={settingValue}
+            on:change={changed}
+        />
+    {:else if type === "input"}
+        <!-- Text Input -->
+        <input
+            class="b3-text-field fn__flex-center fn__size200"
+            id={settingKey}
+            {placeholder}
+            bind:value={settingValue}
+            on:change={changed}
+        />
+    {:else if type === "button"}
+        <!-- Button Input -->
+        <button
+            class="b3-button b3-button--outline fn__flex-center fn__size200"
+            id={settingKey}
+            on:click={clicked}
+        >
+            {settingValue}
+        </button>
+    {:else if type === "select"}
+        <!-- Dropdown select -->
+        <select
+            class="b3-select fn__flex-center fn__size200"
+            id="iconPosition"
+            bind:value={settingValue}
+            on:change={changed}
+        >
+            {#each Object.entries(options) as [value, text]}
+                <option {value}>{text}</option>
+            {/each}
+        </select>
+    {:else if type == "slider"}
+        <!-- Slider -->
+        <input
+            class="b3-slider fn__size200"
+            id="fontSize"
+            min="{slider.min}"
+            max="{slider.max}"
+            step="{slider.step}"
+            type="range"
+            bind:value={settingValue}
+            on:change={changed}
+        />
+    {/if}
+</label>

src/libs/setting-panel.svelte

@@ -0,0 +1,74 @@
+<script>
+    import { } from "os";
+import SettingItem from "./setting-item.svelte";
+    import { showMessage } from "siyuan";
+</script>
+
+<!--
+You can use this template to quickly create a setting panel,
+with the same UI style in SiYuan
+-->
+
+<div class="config__tab-container">
+    <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}`);
+        }}
+    />
+</div>

src/siyuan.d.ts

@@ -1,26 +1,5 @@
 /*
- * Copyright (c) 2023, Terwer . All rights reserved.
+ * Copyright (c) 2023, SiYuan, frostime, Terwer . All rights reserved.
- * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
- *
- * This code is free software; you can redistribute it and/or modify it
- * under the terms of the GNU General Public License version 2 only, as
- * published by the Free Software Foundation.  Terwer designates this
- * particular file as subject to the "Classpath" exception as provided
- * by Terwer in the LICENSE file that accompanied this code.
- *
- * This code is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
- * version 2 for more details (a copy is included in the LICENSE file that
- * accompanied this code).
- *
- * You should have received a copy of the GNU General Public License version
- * 2 along with this work; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
- *
- * Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
- * or visit www.terwer.space if you need additional information or have any
- * questions.
  */
 
 declare module "siyuan" {

src/sy-dtype.d.ts

@@ -4,7 +4,7 @@
  */
 
 /**
- * 思源内部常用的数据格式
+ * Frequently used data structures in SiYuan
  */
 declare module "sy-dtype" {