✅ test: setting panel

src/index.ts

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

src/libs/index.d.ts

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

src/libs/setting-panel.svelte

@@ -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}
+            placeholder={item?.placeholder}
-            options={item?.select.options}
+            options={item?.options}
             slider={item?.slider}
             on:click={onClick}
             on:changed={onChanged}

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

src/setting-example.svelte

@@ -1,99 +1,101 @@
-<script>
+<script lang="ts">
-    import SettingItem from "@/libs/setting-item.svelte";
+    import SettingPanel from "./libs/setting-panel.svelte";
-    import { showMessage } from "siyuan";
-    import { onMount, onDestroy } from 'svelte';
-    onMount(() => {
-        showMessage("Setting panel opened");
-    });
-    onDestroy(() => {
-        showMessage("Setting panel closed");
-    });
-</script>
 
-<!--
+    let groups: string[] = ["🌈 Default"];
-You can use this template to quickly create a setting panel,
+    let focusGroup = groups[0];
-with the same UI style in SiYuan
--->
 
-<div class="config__tab-container">
+    const SettingItems: ISettingItem[] = [
-    <div data-type="Header" class="fn__flex b3-label">
+        {
-        <div class="fn_flex-1">
+            type: 'checkbox',
-            <h4>This setting panel is provided by a svelte component</h4>
+            title: 'checkbox',
-            <div class="b3-label__text">
+            description: 'checkbox',
-                <span class="fn__flex-1">
+            key: 'a',
-                    See:
+            value: true
-                    <pre style="display: inline">/lib/setting-pannel.svelte</pre>
+        },
-                </span>
+        {
-            </div>
+            type: 'textinput',
-        </div>
+            title: 'text',
-    </div>
+            description: 'This is a text',
-    <SettingItem
+            key: 'b',
-        type="checkbox"
+            value: 'This is a text',
-        title="Checkbox"
+            placeholder: 'placeholder'
-        description="This is a <b>checkbox</b>"
+        },
-        settingKey="Checkbox"
+        {
-        settingValue={true}
+            type: 'select',
-        on:changed={(event) => {
+            title: 'select',
-            showMessage(
+            description: 'select',
-                `Checkbox changed: ${event.detail.key} = ${event.detail.value}`
+            key: 'c',
-            );
+            value: 'x',
-        }}
+            options: {
-    />
+                x: 'x',
-    <SettingItem
+                y: 'y',
-        type="input"
+                z: 'z'
-        title="Input"
+            }
-        description="This is an input"
+        },
-        settingKey="Input"
+        {
-        settingValue=""
+            type: 'slider',
-        placeholder="Input something"
+            title: 'slider',
-        on:changed={(event) => {
+            description: 'slider',
-            showMessage(
+            key: 'd',
-                `Input changed: ${event.detail.key} = ${event.detail.value}`
+            value: 50,
-            );
+            slider: {
-        }}
-    />
-    <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,
+                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) => {
+                on:keydown={() => {}}
-            showMessage(
+            >
-                `Slide changed: ${event.detail.key} = ${event.detail.value}`
+                <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>
+