@ticatec/topside-elements 1.0.0

package/dist/overlay/dialog/Dialog.svelte

@@ -0,0 +1,255 @@
+<script lang="ts">
+    import {getContext, hasContext, onMount} from "svelte";
+    import type {BeforeClose} from "./BeforeClose";
+    import ActionBar from "../../layouts/action_bar";
+    import type {ButtonAction, ButtonActions} from "../../types";
+    import dialogManager from "./DialogManager.svelte";
+    import {ModalResult, type OnClose} from "./IDialog";
+    import i18nRes from "../../i18nRes";
+    import type {Snippet} from "svelte";
+    import {acquireScrollLock} from "../common/scrollLock";
+    import {registerEscapeHandler} from "../common/escapeClose";
+    import {focusTrap} from "../common/focusTrap";
+
+    interface Props {
+        title: string;
+        width?: string;
+        height?: string;
+        actions?: ButtonActions | null;
+        /** 关闭前的否决钩子：结果为 MR_CANCEL / MR_CLOSE 时调用，返回 false 阻止关闭 */
+        beforeClose?: BeforeClose | null;
+        content$style?: string;
+        /**
+         * 是否允许用户不经过显式动作直接关闭：控制标题栏 X、Escape 键和自动追加的"关闭"动作。
+         * 为 false 时用户必须点击 actions 中的某个动作。
+         */
+        closable?: boolean;
+        /** 自动追加的"关闭"动作的文字 */
+        closeText?: string;
+        /** 关闭后的通知回调，参数为 ModalResult */
+        onclose?: OnClose | null;
+        dialog$style?: string;
+        children?: Snippet;
+    }
+
+    let {
+        title,
+        width = 'unset',
+        height = 'unset',
+        actions = null,
+        beforeClose = null,
+        content$style = '',
+        closeText = i18nRes.common.btnClose(),
+        onclose = null,
+        closable = true,
+        dialog$style = "",
+        children
+    }: Props = $props();
+
+
+    const dialogId = (function() {
+        try { return hasContext('dialogId') ? getContext<string | undefined>('dialogId') : undefined; } catch { return undefined; }
+    })();
+
+    export async function close(result: ModalResult) {
+        const isCancelLike = result === ModalResult.MR_CANCEL || result === ModalResult.MR_CLOSE;
+        const confirm = beforeClose && isCancelLike ? (await beforeClose()) !== false : true;
+        if (!confirm) return;
+        if (dialogId) {
+            // stack 模式：onclose 由 manager 统一调用
+            dialogManager.resolveWith(dialogId, result);
+        } else {
+            // 直接渲染模式：自己调 onclose
+            onclose?.(result);
+        }
+    }
+
+    // Dialog is modal — the page behind it should not scroll (regression fix:
+    // this was previously entirely missing, unlike Popover). Escape now goes
+    // through the shared, stack-aware registry instead of a hand-rolled
+    // ".topside-popover-wrapper:not(.hidden)" DOM query — a Popover opened
+    // from within this dialog (e.g. a picker dropdown) registers later and so
+    // is topmost, closing first, with no special-casing needed here.
+    onMount(() => {
+        const releaseScrollLock = acquireScrollLock();
+        const unregisterEscape = registerEscapeHandler(() => {
+            if (closable) void close(ModalResult.MR_CANCEL);
+        });
+        return () => {
+            releaseScrollLock();
+            unregisterEscape();
+        };
+    });
+
+    const closeAction = $derived<ButtonAction>({
+        label: closeText,
+        type: 'secondary',
+        handler: () => close(ModalResult.MR_CANCEL)
+    });
+
+    let top = $state(0);
+    let left = $state(0);
+    let startMove = $state(false);
+
+    const handleMouseDown = () => {
+        startMove = true;
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+        if (startMove) {
+            top += e.movementY;
+            left += e.movementX;
+        }
+    };
+
+    const handleMouseUp = () => {
+        startMove = false;
+    };
+
+    const wrapActions = (acts: ButtonActions): ButtonActions => {
+        let wa: ButtonActions = [];
+        acts.forEach(action => {
+            if (action == null) {
+                wa.push(null);
+            } else {
+                wa.push({
+                    ...action,
+                    handler: async (event: MouseEvent) => {
+                        let result = await action.handler?.(event);
+                        if (result) {
+                            await close(ModalResult.MR_OK);
+                        }
+                    }
+                });
+            }
+        });
+        if (closable) {
+            wa.push(closeAction)
+        }
+        return wa;
+    };
+
+    const dialogActions = $derived<ButtonActions>(
+        actions ? wrapActions(actions) : [closeAction]
+    );
+</script>
+
+<svelte:window onmousemove={handleMouseMove} onmouseup={handleMouseUp}/>
+
+<div class="topside-dialog" data-dialog-id={dialogId}
+     style="{startMove ? 'cursor: move' : ''}">
+    <div class="topside-dialog-box" use:focusTrap={{enabled: !!dialogId}}
+         style="{dialog$style}; top: {top}px; left: {left}px; width: {width}; height: {height};">
+        <!-- Drag handle for repositioning the dialog, not a semantic control; the
+             close action inside it is its own focusable <button>. -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="title-bar" onmousedown={handleMouseDown} onmouseup={handleMouseUp}>
+            <div style="flex: 1 1 auto"><span>{title ?? 'New window'}</span></div>
+            {#if closable}
+                <div style="flex: 0 0 auto; padding-left: 12px">
+                    <button type="button" class="dialog-action-button" aria-label="Close"
+                            onclick={() => close(ModalResult.MR_CANCEL)}>
+                        <i class="icon_google_clear" aria-hidden="true"></i>
+                    </button>
+                </div>
+            {/if}
+        </div>
+        <div class="dialog-content" style={content$style}>
+            {@render children?.()}
+        </div>
+        <div class="control-bar">
+            <ActionBar actions={dialogActions}/>
+        </div>
+    </div>
+</div>
+
+<style>:global(:root) {
+  --topside-dialog-border-color: #0000000D;
+  --topside-dialog-action-button-hover-background-color: #E2E8F0;
+  --topside-dialog-action-button-color: #6B7280;
+}
+
+.topside-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--topside-color-dialog-mask-surface, rgba(255, 255, 255, 0.1254901961));
+  /* Must stay below --topside-z-popover so a picker dropdown opened inside
+     a dialog floats above the dialog itself. See topside-root.scss for the
+     full stacking scale. */
+  z-index: var(--topside-z-dialog, 20);
+  user-select: none;
+}
+.topside-dialog .topside-dialog-box {
+  margin: 0;
+  background-color: #ffffff;
+  position: relative;
+  border-radius: 4px;
+  border: 1px solid var(--topside-dialog-border-color, rgba(0, 0, 0, 0.0509803922));
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.topside-dialog .topside-dialog-box .title-bar {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 24px;
+  font-size: 1.25em;
+  height: 54px;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  user-select: none;
+  border-bottom: 1px solid var(--topside-dialog-divider-color, #F0F0F0);
+  color: var(--topside-dialog-header-color, #07123C);
+}
+.topside-dialog .topside-dialog-box .title-bar .dialog-action-button {
+  cursor: pointer;
+  color: var(--topside-dialog-action-button-color, #B3BCCA);
+  background: none;
+  border: none;
+  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
+}
+.topside-dialog .topside-dialog-box .title-bar .dialog-action-button:hover {
+  background-color: var(--topside-dialog-action-button-hover-background-color, #E2E8F0);
+  border-radius: 4px;
+}
+.topside-dialog .topside-dialog-box .title-bar .dialog-action-button:active {
+  position: relative;
+  top: 1px;
+}
+.topside-dialog .topside-dialog-box .title-bar .dialog-action-button:focus-visible {
+  outline: 2px solid var(--topside-primary-border-color, #298DFF);
+  outline-offset: 1px;
+}
+.topside-dialog .topside-dialog-box .dialog-content {
+  flex: 1 1 auto;
+  overflow: auto;
+  box-sizing: border-box;
+}
+.topside-dialog .topside-dialog-box .control-bar {
+  height: 54px;
+  flex: 0 0 auto;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+  user-select: none;
+  display: flex;
+  flex-direction: row;
+  padding: 0 24px;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: 1px solid var(--topside-dialog-divider-color, #F0F0F0);
+}</style>

package/dist/overlay/dialog/Dialog.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { BeforeClose } from "./BeforeClose";
+import type { ButtonActions } from "../../types";
+import { ModalResult, type OnClose } from "./IDialog";
+import type { Snippet } from "svelte";
+interface Props {
+    title: string;
+    width?: string;
+    height?: string;
+    actions?: ButtonActions | null;
+    /** 关闭前的否决钩子：结果为 MR_CANCEL / MR_CLOSE 时调用，返回 false 阻止关闭 */
+    beforeClose?: BeforeClose | null;
+    content$style?: string;
+    /**
+     * 是否允许用户不经过显式动作直接关闭：控制标题栏 X、Escape 键和自动追加的"关闭"动作。
+     * 为 false 时用户必须点击 actions 中的某个动作。
+     */
+    closable?: boolean;
+    /** 自动追加的"关闭"动作的文字 */
+    closeText?: string;
+    /** 关闭后的通知回调，参数为 ModalResult */
+    onclose?: OnClose | null;
+    dialog$style?: string;
+    children?: Snippet;
+}
+declare const Dialog: import("svelte").Component<Props, {
+    close: (result: ModalResult) => Promise<void>;
+}, "">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/overlay/dialog/DialogBoard.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import dialogManager, {_isBoardMounted, _markBoardMounted} from "./DialogManager.svelte";
+    import DialogWrapper from "./DialogWrapper.svelte";
+
+    // 幂等保护：多个 <DialogBoard/> 同时存在（用户手动放 + controller 自动 mount）时，
+    // 只有第一个真正渲染 stack，其余静默 no-op，避免 dialog 重复显示。
+    const active = !_isBoardMounted();
+    if (active) _markBoardMounted();
+</script>
+
+{#if active}
+    {#each dialogManager.stack as entry (entry.id)}
+        <DialogWrapper id={entry.id} component={entry.component} params={entry.params}/>
+    {/each}
+{/if}

package/dist/overlay/dialog/DialogBoard.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DialogBoard: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DialogBoard = InstanceType<typeof DialogBoard>;
+export default DialogBoard;

package/dist/overlay/dialog/DialogManager.svelte.d.ts

@@ -0,0 +1,24 @@
+import { ModalResult, type OnClose } from './IDialog';
+export interface DialogEntry {
+    id: string;
+    component: any;
+    params: Record<string, any>;
+    resolve: ((value: ModalResult) => void) | null;
+    onClose: OnClose | null;
+}
+/**
+ * 内部使用：DialogBoard 在组件初始化时检查并标记，确保全局只有一个 board 实际渲染 stack。
+ * 防止"用户在 app 根放了 <DialogBoard/> + manager 自动 mount"导致的重复渲染。
+ */
+export declare function _isBoardMounted(): boolean;
+export declare function _markBoardMounted(): void;
+declare class DialogManager {
+    stack: DialogEntry[];
+    show(component: any, params?: Record<string, any>): Promise<ModalResult>;
+    /**
+     * 内部使用：由 Dialog / CommonDialog 调用，触发对应 entry 的 Promise resolve 并出栈。
+     */
+    resolveWith(id: string, result: ModalResult): void;
+}
+declare const dialogManager: DialogManager;
+export default dialogManager;

package/dist/overlay/dialog/DialogManager.svelte.js

@@ -0,0 +1,58 @@
+import DialogBoard from './DialogBoard.svelte';
+import { ModalResult } from './IDialog';
+import { mountToBody } from '../common/mountSingleton';
+let boardMounted = false;
+/**
+ * 内部使用：DialogBoard 在组件初始化时检查并标记，确保全局只有一个 board 实际渲染 stack。
+ * 防止"用户在 app 根放了 <DialogBoard/> + manager 自动 mount"导致的重复渲染。
+ */
+export function _isBoardMounted() {
+    return boardMounted;
+}
+export function _markBoardMounted() {
+    boardMounted = true;
+}
+function ensureMounted() {
+    if (boardMounted)
+        return;
+    // Note: unlike the other overlay controllers, this deliberately does not
+    // set boardMounted here — DialogBoard.svelte itself calls
+    // _markBoardMounted() on init, since a board the consumer placed manually
+    // in their app root also needs to mark it mounted, not just this
+    // auto-mount path.
+    mountToBody(DialogBoard);
+}
+class DialogManager {
+    stack = $state([]);
+    show(component, params = {}) {
+        ensureMounted();
+        const id = Math.floor((Date.now() + Math.random()) * 100).toString(36);
+        // onclose 为规范名；onClose 为 5.x 兼容别名（NAMING R1）
+        const onClose = (params.onclose ?? params.onClose) ?? null;
+        return new Promise(resolve => {
+            this.stack = [...this.stack, { id, component, params, resolve, onClose }];
+        });
+    }
+    /**
+     * 内部使用：由 Dialog / CommonDialog 调用，触发对应 entry 的 Promise resolve 并出栈。
+     */
+    resolveWith(id, result) {
+        const entry = this.stack.find(e => e.id === id);
+        if (!entry)
+            return;
+        this.stack = this.stack.filter(e => e.id !== id);
+        entry.onClose?.(result);
+        entry.resolve?.(result);
+        entry.resolve = null;
+    }
+}
+const dialogManager = new DialogManager();
+if (typeof window !== 'undefined') {
+    window.Dialog = {
+        show: (component, params) => dialogManager.show(component, params),
+        showModal: (component, params) => {
+            void dialogManager.show(component, params);
+        }
+    };
+}
+export default dialogManager;

package/dist/overlay/dialog/DialogWrapper.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import {setContext} from 'svelte';
+
+    let {id, component: Comp, params}: {id: string, component: any, params: Record<string, any>} = $props();
+
+    // Context identity is fixed for the lifetime of this wrapper; later prop changes
+    // must not replace the dialog registration used by its descendants.
+    const getInitialDialogId = () => id;
+    setContext('dialogId', getInitialDialogId());
+</script>
+
+<Comp {...params}/>

package/dist/overlay/dialog/DialogWrapper.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    id: string;
+    component: any;
+    params: Record<string, any>;
+};
+declare const DialogWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogWrapper = ReturnType<typeof DialogWrapper>;
+export default DialogWrapper;

package/dist/overlay/dialog/IDialog.d.ts

@@ -0,0 +1,14 @@
+import { ModalResult } from "../message-box/IMessageBox";
+export { ModalResult };
+export type OnClose = (result: ModalResult) => void;
+export default interface IDialog {
+    /**
+     * 打开一个对话框，返回 Promise<ModalResult>。
+     * 调用者可 await 获取用户的关闭结果（MR_OK / MR_CANCEL / MR_CLOSE）。
+     */
+    show: (component: any, params: any) => Promise<ModalResult>;
+    /**
+     * @deprecated 兼容旧调用，内部委托给 show，丢弃 Promise 返回值。
+     */
+    showModal: (component: any, params: any) => void;
+}

package/dist/overlay/dialog/IDialog.js

@@ -0,0 +1,2 @@
+import { ModalResult } from "../message-box/IMessageBox";
+export { ModalResult };