refactor: consume Commonlib as a package

2026-08-29 14:57:05 +00:00 · 2026-07-17 11:13:16 +00:00
parent 6475d32769
commit a721d3b602
665 changed files with 3438 additions and 31592 deletions
@@ -0,0 +1,162 @@
+<script lang="ts">
+    import type { DialogHostProps } from "@vrtmrz/livesync-commonlib/compat/services/implements/base/SvelteDialog";
+    import { type DialogSvelteComponentBaseProps } from "./svelteDialog";
+    // type Props = DialogSvelteComponentBaseProps & {
+    //     /**
+    //      * The Svelte component to mount inside the dialog host
+    //      */
+    //     mountComponent: ComponentHasResult<any>;
+    //     /**
+    //      * Callback function to setup the dialog context
+    //      * @param props
+    //      */
+    //     onSetupContext?(props: DialogSvelteComponentBaseProps): void;
+    // };
+    const { setTitle, closeDialog, setResult, mountComponent, getInitialData, onSetupContext }: DialogHostProps =
+        $props();
+    const contextProps = {
+        setTitle,
+        closeDialog,
+        setResult,
+        getInitialData,
+    } satisfies DialogSvelteComponentBaseProps<any,any>
+
+    // Call the onSetupContext function to setup the dialog context
+    onSetupContext?.(contextProps);
+
+    /**
+     * Wrapper around setResult to also close the dialog
+     * @param result
+     */
+    const setResultWrapper = (result: any) => {
+        setResult(result);
+        closeDialog();
+    };
+
+    const Component = mountComponent;
+    let thisElement: HTMLElement;
+</script>
+
+<div class="dialog-host" bind:this={thisElement}>
+    <Component setResult={setResultWrapper} {getInitialData}></Component>
+</div>
+
+<style>
+    .dialog-host {
+        padding: 20px;
+        gap: 0.5em;
+        display: flex;
+        flex-direction: column;
+        padding-bottom: var(--keyboard-height, 0px);
+    }
+
+    .dialog-host :global(button) {
+        margin-left: 10px;
+    }
+
+    .dialog-host :global(.button-group) {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 20px;
+    }
+
+    .dialog-host :global(.row) {
+        display: flex;
+        flex-direction: row;
+        justify-items: center;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .dialog-host :global(.row > input[type="text"]),
+    .dialog-host :global(.row > input[type="password"]),
+    .dialog-host :global(.row > textarea),
+    .dialog-host :global(.row > select) {
+        flex: 1;
+        margin-left: 10px;
+        min-width: 10em;
+    }
+    .dialog-host :global(.row > input[type="password"]) {
+        -webkit-text-security: disc;
+    }
+
+    .dialog-host :global(.row > input[type="checkbox"]) {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+
+    .dialog-host :global(label > span) {
+        display: block;
+        width: 8em;
+    }
+
+    .dialog-host :global(.note),
+    .dialog-host :global(.note-important),
+    .dialog-host :global(.note-error) {
+        padding: 10px;
+        margin-top: 4px;
+        margin-bottom: 0.5lh;
+        border-left: 4px solid;
+    }
+
+    .dialog-host :global(.note) {
+        background-color: var(--interactive-hover);
+        border-left-color: var(--interactive-accent);
+    }
+    .dialog-host :global(.note-important) {
+        background-color: var(--interactive-hover);
+        border-left-color: var(--text-warning);
+    }
+    .dialog-host :global(.note-error) {
+        background-color: var(--interactive-hover);
+        border-left-color: var(--text-error);
+    }
+    .dialog-host :global(hr) {
+        margin: 0.7lh 0;
+    }
+    .dialog-host :global(details) {
+        gap: 0.5em;
+        padding-left: 0.5em;
+        border-left: 2px solid var(--interactive-accent);
+    }
+    .dialog-host :global(summary::marker) {
+        display: none;
+        content: "";
+    }
+
+    .dialog-host :global(summary) {
+        border-left: 4px solid var(--interactive-accent);
+        padding-left: 0.5em;
+        cursor: pointer;
+        outline: none;
+    }
+    .dialog-host :global(details > summary::after) {
+        content: "⏷";
+        float: right;
+        margin-right: 0.5em;
+    }
+    .dialog-host :global(details[open] > summary::after) {
+        content: "⏶";
+        float: right;
+        margin-right: 0.5em;
+    }
+
+    .dialog-host :global(input:invalid),
+    .dialog-host :global(textarea:invalid) {
+        border-color: var(--background-modifier-error);
+    }
+    .dialog-host :global(.sub-section) {
+        margin-left: 1em;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5em;
+    }
+
+    .dialog-host :global(.row > input[type="text"]:disabled),
+    .dialog-host :global(.row > input[type="password"]:disabled),
+    .dialog-host :global(.row > textarea:disabled),
+    .dialog-host :global(.row > select:disabled) {
+        background-color: var(--background-secondary);
+    }
+</style>