⚡️ perf: 优化各个组件

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() {
+            constructor: (container: HTMLElement) => {
-                // hello.$destroy();
+                return new HelloExample({
-            },
+                    target: container,
-        });
+                    props: {
-        new HelloExample({
+                        app: this.app,
-            target: dialog.element.querySelector("#helloPanel"),
+                    }
-            props: {
+                });
-                app: this.app,
             }
         });
     }

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}

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
+ FilePath     : /src/libs/components/item-wrap.svelte
- LastEditTime : 2024-06-07 19:14:28
+ 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}

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;
+}