@ticatec/uniface-element 0.3.23 → 5.0.0

package/README.md

@@ -315,8 +315,7 @@ Comprehensive component documentation is available in the `/docs` directory:
 ### Form Components
 - [Form Controls](./docs/form/en/README.md) | [中文](./docs/form/cn/README.md) - Comprehensive form input components including TextEditor, NumberEditor, CheckBox, OptionsSelect, and more
 
-### Global Components
-- [Global Components](./docs/global/en/README.md) | [中文](./docs/global/cn/README.md) - Application-wide components including ToastBoard, DialogBoard, IndicatorBoard, and MessageBoxBoard
+- Overlay Controllers: `indicator`, `toast`, `messageBox`, `Dialog`, `Drawer`
 
 ### Miscellaneous Components
 - [Utility Components](./docs/misc/en/README.md) | [中文](./docs/misc/cn/README.md) - Additional components including Split, Drawer, Tag, and Card

package/README_CN.md

@@ -90,72 +90,70 @@ import '@ticatec/uniface-element/ticatec-uniface-web.css';
 - **数据传输**: `Transfer`
 - **搜索组件**: `SearchBox`、`CriteriaField`
 
-## 页面全局组件
+## 页面 Overlay 控制器
 
-页面全局组件直接加载在 body 上，使用时不需要单独引入，可通过全局方法直接使用。通常在系统主页面直接加载：
+Overlay 控制器（`indicator`、`toast`、`messageBox`）在首次使用时会自动挂载至 `document.body`，应用内任何位置的代码均可直接导入并使用，无需在根节点手动挂载 Board 组件。
 
 ```svelte
 <script lang="ts">
-  import ToastBoard from "@ticatec/uniface-element/ToastBoard";
-  import { DialogBoard } from "@ticatec/uniface-element/DialogBoard";
-  import IndicatorBoard from "@ticatec/uniface-element/IndicatorBoard";
-  import MessageBoxBoard from "@ticatec/uniface-element/MessageBoxBoard";
+  import indicator from "@ticatec/uniface-element/Indicator";
+  import toast from "@ticatec/uniface-element/Toast";
+  import messageBox, { ModalResult } from "@ticatec/uniface-element/MessageBox";
 </script>
-
-<div>
-  <!-- 主页面内容 -->
-</div>
-
-<IndicatorBoard/>
-<DialogBoard/>
-<ToastBoard/>
-<MessageBoxBoard/>
 ```
 
 ### 异步操作指示器 `Indicator`
 
-用于异步操作时遮罩页面并显示操作信息，避免用户异常操作：
+用于异步操作时遮罩页面并显示操作信息，避免用户重复或异常操作：
 
 ```typescript
+import indicator from "@ticatec/uniface-element/Indicator";
+
 try {
-  window.Indicator.show('正在加载数据...');
+  indicator.show('正在加载数据...');
   // 异步调用 await service.search();
 } finally {
-  window.Indicator.hide();
+  indicator.hide();
 }
 ```
 
 ### 弹出消息 `Toast`
 
-用于显示操作结果和提示信息：
+用于显示操作结果和轻量提示信息：
 
 ```typescript
-// 显示错误消息（默认3秒）
-window.Toast.show("无法删除活跃用户", "error", 2);
+import toast from "@ticatec/uniface-element/Toast";
+
+// 显示错误消息（持续2秒）
+toast.error("无法删除活跃用户", 2);
 
 // 显示成功消息
-window.Toast.show("操作成功", "success");
+toast.success("操作成功");
 
 // 显示信息提示
-window.Toast.show("这是一条信息", "info");
+toast.info("这是一条提示信息");
 ```
 
 ### 消息提示框 `MessageBox`
 
-用于确认操作和信息提示：
+用于确认操作和模态信息提示：
 
 ```typescript
-import ModalResult from '@ticatec/uniface-element/ModalResult';
+import messageBox, { ModalResult } from "@ticatec/uniface-element/MessageBox";
 
 const deleteConfirm = async (user: any) => {
-  const result = await window.MessageBox.showConfirm(`确定要删除用户[${user.name}]吗？`);
+  const result = await messageBox.showConfirm(`确定要删除用户[${user.name}]吗？`, {
+    title: "删除确认",
+    type: "warning"
+  });
   if (result === ModalResult.MR_OK) {
     // 执行删除操作
+    toast.success("删除成功");
   }
 }
 
 // 显示信息提示
-await window.MessageBox.showInfo("操作完成", "提示");
+await messageBox.showInfo("操作完成", { title: "提示" });
 ```
 
 ## 使用示例
@@ -245,8 +243,8 @@ await window.MessageBox.showInfo("操作完成", "提示");
 ### 表单组件
 - [表单控件](./docs/form/cn/README.md) | [English](./docs/form/en/README.md) - 全面的表单输入组件，包括 TextEditor、NumberEditor、CheckBox、OptionsSelect 等
 
-### 全局组件
-- [全局组件](./docs/global/cn/README.md) | [English](./docs/global/en/README.md) - 应用程序级组件，包括 ToastBoard、DialogBoard、IndicatorBoard 和 MessageBoxBoard
+### Overlay 组件
+- 应用程序级 Overlay 控制器，包括 Indicator、Toast、MessageBox、ContextMenu、Dialog
 
 ### 杂项组件
 - [实用组件](./docs/misc/cn/README.md) | [English](./docs/misc/en/README.md) - 其他组件，包括 Split、Drawer、Tag 和 Card

package/dist/app_layout/ClassicLayout.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import Split from "../general/split";
+
+    interface Props {
+        headerHeight?: string;
+        sidebarWidth?: string;
+        statusHeight?: string;
+        rightBarWidth?: string;
+        sidebarResize?: boolean;
+        sidebarMaxWidth?: string | null;
+        sidebarMinWidth?: string | null;
+        rightBarResize?: boolean;
+        rightBarMaxWidth?: string | null;
+        rightBarMinWidth?: string | null;
+        header?: Snippet;
+        sidebar?: Snippet;
+        children?: Snippet;
+        rightSidebar?: Snippet;
+        bottom?: Snippet;
+    }
+
+    let {
+        headerHeight = "48px",
+        sidebarWidth = '300px',
+        statusHeight = "22px",
+        rightBarWidth = '240px',
+        sidebarResize = false,
+        sidebarMaxWidth = null,
+        sidebarMinWidth = null,
+        rightBarResize = false,
+        rightBarMaxWidth = null,
+        rightBarMinWidth = null,
+        header,
+        sidebar,
+        children,
+        rightSidebar,
+        bottom
+    }: Props = $props();
+
+    let sidebarPanel: HTMLElement;
+    let rightBarPanel: HTMLElement;
+    let maxWidth = '';
+    let minWidth = '';
+    let rightMaxWidth = '';
+    let rightMinWidth = '';
+
+    $effect(() => {
+        if (sidebarResize && sidebarMaxWidth) {
+            maxWidth = `max-width: ${sidebarMaxWidth};`;
+        } else {
+            maxWidth = '';
+        }
+    });
+
+    $effect(() => {
+        if (sidebarResize && sidebarMinWidth) {
+            minWidth = `min-width: ${sidebarMinWidth};`;
+        } else {
+            minWidth = '';
+        }
+    });
+
+    $effect(() => {
+        if (rightBarResize && rightBarMaxWidth) {
+            rightMaxWidth = `max-width: ${rightBarMaxWidth};`;
+        } else {
+            rightMaxWidth = '';
+        }
+    });
+
+    $effect(() => {
+        if (rightBarResize && rightBarMinWidth) {
+            rightMinWidth = `min-width: ${rightBarMinWidth};`;
+        } else {
+            rightMinWidth = '';
+        }
+    });
+</script>
+
+<div class="uniface-classic-layout">
+    {#if header}
+        <div class="header-area" style="height: {headerHeight}">
+            {@render header()}
+        </div>
+    {/if}
+    <div class="middle-area">
+        {#if sidebar}
+            <div bind:this={sidebarPanel} class="sidebar" style="width: {sidebarWidth}; {maxWidth} {minWidth}">
+                {#if sidebar}
+                    {@render sidebar()}
+                {/if}
+            </div>
+        {/if}
+        {#if sidebarResize}
+            <Split direction="vertical" bindingPanel={sidebarPanel}/>
+        {/if}
+        <div class="content-area">
+            {#if children}
+                {@render children()}
+            {/if}
+        </div>
+        {#if rightSidebar}
+            {#if sidebarResize}
+                <Split direction="vertical" bindingPanel={rightBarPanel} reverse/>
+            {/if}
+            <div bind:this={rightBarPanel} class="right-sidebar" style="width: {rightBarWidth}; {rightMinWidth} {rightMaxWidth}">
+                {#if rightSidebar}
+                    {@render rightSidebar()}
+                {/if}
+            </div>
+        {/if}
+    </div>
+    {#if bottom}
+        <div class="bottom-area" style="height: {statusHeight}">
+            {@render bottom()}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .uniface-classic-layout {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+
+    .header-area {
+        flex: 0 0 auto;
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+    }
+
+    .middle-area {
+        flex: 1 1 auto;
+        overflow: hidden;
+        display: flex;
+        flex-direction: row;
+        position: relative;
+    }
+
+    .sidebar {
+        flex: 0 0 auto;
+        overflow: auto;
+        width: 100%;
+        border-right: 1px solid var(--uniface-color-border-secondary);
+    }
+
+    .content-area {
+        flex: 1 1 auto;
+        overflow: auto;
+    }
+
+    .right-sidebar {
+        flex: 0 0 auto;
+        overflow: auto;
+        width: 100%;
+        border-left: 1px solid var(--uniface-color-border-secondary);
+    }
+
+    .bottom-area {
+        flex: 0 0 auto;
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+        border-top: 1px solid var(--uniface-color-border-secondary);
+    }
+</style>

package/dist/app_layout/ClassicLayout.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    headerHeight?: string;
+    sidebarWidth?: string;
+    statusHeight?: string;
+    rightBarWidth?: string;
+    sidebarResize?: boolean;
+    sidebarMaxWidth?: string | null;
+    sidebarMinWidth?: string | null;
+    rightBarResize?: boolean;
+    rightBarMaxWidth?: string | null;
+    rightBarMinWidth?: string | null;
+    header?: Snippet;
+    sidebar?: Snippet;
+    children?: Snippet;
+    rightSidebar?: Snippet;
+    bottom?: Snippet;
+}
+declare const ClassicLayout: import("svelte").Component<Props, {}, "">;
+type ClassicLayout = ReturnType<typeof ClassicLayout>;
+export default ClassicLayout;

package/dist/app_layout/ColumnsLayout.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import Split from "../general/split";
+
+    interface Props {
+        width?: string;
+        height?: string;
+        leftWidth?: string | null;
+        rightWidth?: string | null;
+        leftMin?: string | null;
+        leftMax?: string | null;
+        rightMin?: string | null;
+        rightMax?: string | null;
+        leftResize?: boolean;
+        rightResize?: boolean;
+        left?: Snippet;
+        children?: Snippet;
+        right?: Snippet;
+    }
+
+    let {
+        width = '100%',
+        height = '100%',
+        leftWidth = null,
+        rightWidth = null,
+        leftMin = null,
+        leftMax = null,
+        rightMin = null,
+        rightMax = null,
+        leftResize = false,
+        rightResize = false,
+        left,
+        children,
+        right
+    }: Props = $props();
+
+    let leftPanel: HTMLElement;
+    let rightPanel: HTMLElement;
+
+    let colWidth = $derived(right ? '25%' : '50%');
+
+    const generateStyle = (attr: string, v: string | null): string => {
+        return v ? `${attr}: ${v};` : ''
+    }
+
+    let leftStyle = $derived(`${generateStyle('min-width', leftMin)} ${generateStyle('max-width', leftMax)} ${generateStyle('width', leftWidth ?? colWidth)}`);
+    let rightStyle = $derived(`${generateStyle('min-width', rightMin)} ${generateStyle('max-width', rightMax)} ${generateStyle('width', rightWidth ?? colWidth)}`);
+</script>
+
+<div class="uniface-columns-layout" style="width: {width}; height: {height}">
+    <div bind:this={leftPanel} class="left-panel" style={leftStyle}>
+        {#if left}
+            {@render left()}
+        {/if}
+    </div>
+    {#if leftResize}
+        <Split bindingPanel={leftPanel}/>
+    {/if}
+    <div class="center-panel">
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+    {#if right}
+        {#if rightResize}
+            <Split bindingPanel={rightPanel} reverse/>
+        {/if}
+        <div bind:this={rightPanel} class="right-panel" style={rightStyle}>
+            {@render right()}
+        </div>
+    {/if}
+</div>
+
+<style>
+    .uniface-columns-layout {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+    }
+
+    .left-panel,
+    .right-panel {
+        flex: 0 0 auto;
+        overflow: auto;
+    }
+
+    .center-panel {
+        flex: 1 1 auto;
+        overflow: auto;
+    }
+</style>

package/dist/app_layout/ColumnsLayout.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    width?: string;
+    height?: string;
+    leftWidth?: string | null;
+    rightWidth?: string | null;
+    leftMin?: string | null;
+    leftMax?: string | null;
+    rightMin?: string | null;
+    rightMax?: string | null;
+    leftResize?: boolean;
+    rightResize?: boolean;
+    left?: Snippet;
+    children?: Snippet;
+    right?: Snippet;
+}
+declare const ColumnsLayout: import("svelte").Component<Props, {}, "">;
+type ColumnsLayout = ReturnType<typeof ColumnsLayout>;
+export default ColumnsLayout;

package/dist/app_layout/HeaderLayout.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import Split from "../general/split";
+
+    interface Props {
+        headerHeight?: string;
+        sidebarWidth?: string;
+        sidebarResize?: boolean;
+        sidebarMaxWidth?: string | null;
+        sidebarMinWidth?: string | null;
+        header?: Snippet;
+        sidebar?: Snippet;
+        children?: Snippet;
+    }
+
+    let {
+        headerHeight = "48px",
+        sidebarWidth = '300px',
+        sidebarResize = false,
+        sidebarMaxWidth = null,
+        sidebarMinWidth = null,
+        header,
+        sidebar,
+        children
+    }: Props = $props();
+
+    let sidebarPanel: HTMLElement;
+    let maxWidth = '';
+    let minWidth = '';
+
+    $effect(() => {
+        if (sidebarResize && sidebarMaxWidth) {
+            maxWidth = `max-width: ${sidebarMaxWidth};`;
+        } else {
+            maxWidth = '';
+        }
+    });
+
+    $effect(() => {
+        if (sidebarResize && sidebarMinWidth) {
+            minWidth = `min-width: ${sidebarMinWidth};`;
+        } else {
+            minWidth = '';
+        }
+    });
+</script>
+
+<div class="uniface-header-layout">
+    {#if header}
+        <div class="header-area" style="height: {headerHeight}">
+            {@render header()}
+        </div>
+    {/if}
+    <div class="content-wrapper">
+        {#if sidebar}
+            <div bind:this={sidebarPanel} class="sidebar" style="width: {sidebarWidth}; {maxWidth} {minWidth}">
+                {#if sidebar}
+                    {@render sidebar()}
+                {/if}
+            </div>
+            {#if sidebarResize}
+                <Split direction="vertical" bindingPanel={sidebarPanel}/>
+            {/if}
+        {/if}
+        <div class="main-content">
+            {#if children}
+                {@render children()}
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style>
+    .uniface-header-layout {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+
+    .header-area {
+        width: 100%;
+        flex: 0 0 auto;
+        overflow: hidden;
+    }
+
+    .content-wrapper {
+        width: 100%;
+        flex: 1 1 auto;
+        overflow: hidden;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .sidebar {
+        height: 100%;
+        flex: 0 0 auto;
+        overflow: auto;
+        border-right: 1px solid var(--uniface-color-border-secondary);
+    }
+
+    .main-content {
+        height: 100%;
+        flex: 1 1 auto;
+        overflow: hidden;
+    }
+</style>

package/dist/app_layout/HeaderLayout.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    headerHeight?: string;
+    sidebarWidth?: string;
+    sidebarResize?: boolean;
+    sidebarMaxWidth?: string | null;
+    sidebarMinWidth?: string | null;
+    header?: Snippet;
+    sidebar?: Snippet;
+    children?: Snippet;
+}
+declare const HeaderLayout: import("svelte").Component<Props, {}, "">;
+type HeaderLayout = ReturnType<typeof HeaderLayout>;
+export default HeaderLayout;