From b739c5ad54d288b4b088681cc5ef96f4fad2c19c Mon Sep 17 00:00:00 2001
From: frostime <frostime@foxmail.com>
Date: Fri, 19 Jul 2024 15:40:50 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20perf:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=90=84=E4=B8=AA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.ts                          | 33 +++++++++++++++-------
 src/libs/components/item-input.svelte | 40 +++++++++++++++++----------
 src/libs/components/item-wrap.svelte  |  8 ++++--
 src/libs/dialog.ts                    | 36 +++++++++++++++++++++++-
 4 files changed, 88 insertions(+), 29 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 62a09a7..5b50c49 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -24,6 +24,7 @@ import HelloExample from "@/hello.svelte";
 import SettingExample from "@/setting-example.svelte";
 
 import { SettingUtils } from "./libs/setting-utils";
+import { svelteDialog } from "./libs/dialog";
 
 const STORAGE_NAME = "menu-config";
 const TAB_TYPE = "custom_tab";
@@ -455,18 +456,30 @@ export default class PluginSample extends Plugin {
     }
 
     private showDialog() {
-        let dialog = new Dialog({
+        // let dialog = new Dialog({
+        //     title: `SiYuan ${Constants.SIYUAN_VERSION}`,
+        //     content: `<div id="helloPanel" class="b3-dialog__content"></div>`,
+        //     width: this.isMobile ? "92vw" : "720px",
+        //     destroyCallback() {
+        //         // hello.$destroy();
+        //     },
+        // });
+        // new HelloExample({
+        //     target: dialog.element.querySelector("#helloPanel"),
+        //     props: {
+        //         app: this.app,
+        //     }
+        // });
+        svelteDialog({
             title: `SiYuan ${Constants.SIYUAN_VERSION}`,
-            content: `<div id="helloPanel" class="b3-dialog__content"></div>`,
             width: this.isMobile ? "92vw" : "720px",
-            destroyCallback() {
-                // hello.$destroy();
-            },
-        });
-        new HelloExample({
-            target: dialog.element.querySelector("#helloPanel"),
-            props: {
-                app: this.app,
+            constructor: (container: HTMLElement) => {
+                return new HelloExample({
+                    target: container,
+                    props: {
+                        app: this.app,
+                    }
+                });
             }
         });
     }
diff --git a/src/libs/components/item-input.svelte b/src/libs/components/item-input.svelte
index 3a42b45..cbf5a7e 100644
--- a/src/libs/components/item-input.svelte
+++ b/src/libs/components/item-input.svelte
@@ -1,18 +1,10 @@
-<!--
- Copyright (c) 2024 by frostime. All Rights Reserved.
- Author       : frostime
- Date         : 2024-06-07 18:49:52
- FilePath     : /src/libs/components/input-item.svelte
- LastEditTime : 2024-06-07 20:07:58
- Description  : 
--->
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
     export let type: string; // Setting Type
     export let key: string;
     export let value: any;
 
-    //Optional
+    // Optional parameters
     export let placeholder: string = "";
     export let options: { [key: string | number]: string } = {};
     export let slider: {
@@ -24,6 +16,8 @@
         label: string;
         callback?: () => void;
     } = { label: value, callback: () => {} };
+    export let fnSize: boolean = true; // If the form input is used within setting panel context, it is usually given a fixed width by a class named "fn__size200".
+    export let style: string = ""; // Custom style
 
     const dispatch = createEventDispatcher();
 
@@ -45,47 +39,61 @@
         type="checkbox"
         bind:checked={value}
         on:change={changed}
+        style={style}
     />
 {:else if type === "textinput"}
     <!-- Text Input -->
     <input
-        class="b3-text-field fn__flex-center fn__size200"
+        class:b3-text-field={true}
+        class:fn__flex-center={true}
+        class:fn__size200={fnSize}
         id={key}
         {placeholder}
         bind:value={value}
         on:change={changed}
+        style={style}
     />
 {:else if type === "textarea"}
     <textarea
         class="b3-text-field fn__block"
-        style="resize: vertical; height: 10em; white-space: nowrap;"
+        style={`resize: vertical; height: 10em; white-space: nowrap; ${style}`}
         bind:value={value}
         on:change={changed}
     />
 {:else if type === "number"}
     <input
-        class="b3-text-field fn__flex-center fn__size200"
+        class:b3-text-field={true}
+        class:fn__flex-center={true}
+        class:fn__size200={fnSize}
         id={key}
         type="number"
         bind:value={value}
         on:change={changed}
+        style={style}
     />
 {:else if type === "button"}
     <!-- Button Input -->
     <button
-        class="b3-button b3-button--outline fn__flex-center fn__size200"
+        class:b3-button={true}
+        class:b3-button--outline={true}
+        class:fn__flex-center={true}
+        class:fn__size200={fnSize}
         id={key}
         on:click={click}
+        style={style}
     >
         {button.label}
     </button>
 {:else if type === "select"}
     <!-- Dropdown select -->
     <select
-        class="b3-select fn__flex-center fn__size200"
+        class:b3-select={true}
+        class:fn__flex-center={true}
+        class:fn__size200={fnSize}
         id="iconPosition"
         bind:value={value}
         on:change={changed}
+        style={style}
     >
         {#each Object.entries(options) as [value, text]}
             <option {value}>{text}</option>
@@ -95,7 +103,8 @@
     <!-- Slider -->
     <div class="b3-tooltips b3-tooltips__n" aria-label={value}>
         <input
-            class="b3-slider fn__size200"
+            class:b3-slider={true}
+            class:fn__size200={fnSize}
             id="fontSize"
             min={slider.min}
             max={slider.max}
@@ -103,6 +112,7 @@
             type="range"
             bind:value={value}
             on:change={changed}
+            style={style}
         />
     </div>
 {/if}
diff --git a/src/libs/components/item-wrap.svelte b/src/libs/components/item-wrap.svelte
index 0d839d5..4d8092e 100644
--- a/src/libs/components/item-wrap.svelte
+++ b/src/libs/components/item-wrap.svelte
@@ -2,8 +2,8 @@
  Copyright (c) 2024 by frostime. All Rights Reserved.
  Author       : frostime
  Date         : 2024-06-01 20:03:50
- FilePath     : /src/libs/setting-item-wrap.svelte
- LastEditTime : 2024-06-07 19:14:28
+ FilePath     : /src/libs/components/item-wrap.svelte
+ LastEditTime : 2024-07-19 15:28:57
  Description  : The setting item container
 -->
 <script lang="ts">
@@ -18,7 +18,9 @@
             <span class="title">{title}</span>
             <div class="b3-label__text">{@html description}</div>
             <div class="fn__hr"></div>
-            <slot />
+            <div style="display: flex; flex-direction: column; gap: 5px; position: relative;">
+                <slot />
+            </div>
         </div>
     </div>
 {:else}
diff --git a/src/libs/dialog.ts b/src/libs/dialog.ts
index ea2b187..7e86f21 100644
--- a/src/libs/dialog.ts
+++ b/src/libs/dialog.ts
@@ -3,10 +3,11 @@
  * @Author       : frostime
  * @Date         : 2024-03-23 21:37:33
  * @FilePath     : /src/libs/dialog.ts
- * @LastEditTime : 2024-06-01 16:28:30
+ * @LastEditTime : 2024-07-19 15:34:39
  * @Description  : Kits about dialogs
  */
 import { Dialog } from "siyuan";
+import { type SvelteComponent } from "svelte";
 
 export const inputDialog = (args: {
     title: string, placeholder?: string, defaultText?: string,
@@ -119,3 +120,36 @@ export const confirmDialogSync = async (args: IConfirmDialogArgs) => {
         confirmDialog(newargs);
     });
 };
+
+
+export const simpleDialog = (args: {
+    title: string, ele: HTMLElement | DocumentFragment,
+    width?: string, height?: string,
+    callback?: () => void;
+}) => {
+    const dialog = new Dialog({
+        title: args.title,
+        content: `<div class="dialog-content" style="display: flex; height: 100%;"/>`,
+        width: args.width,
+        height: args.height,
+        destroyCallback: args.callback
+    });
+    dialog.element.querySelector(".dialog-content").appendChild(args.ele);
+    return dialog;
+}
+
+
+export const svelteDialog = (args: {
+    title: string, constructor: (container: HTMLElement) => SvelteComponent,
+    width?: string, height?: string,
+    callback?: () => void;
+}) => {
+    let container = document.createElement('div')
+    container.style.display = 'contents';
+    let component = args.constructor(container);
+    simpleDialog({...args, ele: container, callback: () => {
+        component.$destroy();
+        if (args.callback) args.callback();;
+    }});
+    return component;
+}