Dev (#2)

* feat: svelte example for setting pannel

* Must destroy svelte

* onDestroy

* Make hello easy

* 拷贝官方的代码功能

* Use hello both in tab and dialog

* fix: destroy dock

src/libs/b3-list.svelte

@@ -0,0 +1,8 @@
+<ul class="b3-list b3-list--background">
+    <li class="b3-list-item">
+        <svg class="b3-list-item__graphic"><use xlink:href="#iconEdit"></use></svg>
+        <span class="b3-list-item__text">
+            <slot></slot>
+        </span>
+    </li>
+</ul>

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,99 @@
+<script>
+    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");
+    });
+</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>