🔨 refactor(setting): 重构了Svelte设置的模板

- 将 SettingPanel 作为基本模板
- 更改了 settingitem 的类型定义

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"),
         });
     }

src/libs/index.d.ts

@@ -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;

src/libs/setting-item.svelte

@@ -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

src/libs/setting-panel.svelte

@@ -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>
-    <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>
+<div class="config__tab-container {fn__none}" data-name={group}>
+    <slot />
+    {#each settingItems as item (item.key)}
+        <SettingItem
+            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>

src/libs/setting-utils.ts

@@ -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;

src/setting-example.svelte

@@ -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>