@ticatec/uniface-element 0.3.22 → 5.0.0

package/dist/message-box/README_CN.md

@@ -1,398 +0,0 @@
-# MessageBox 消息框
-
-全局模态对话框系统，用于显示信息消息、确认对话框和用户交互，支持自定义按钮和样式。
-
-## 功能特性
-
-- **全局访问**: 通过 `window.MessageBox` 在整个应用中使用
-- **多种类型**: 支持信息、警告和自定义消息类型
-- **确认对话框**: 内置确认/取消功能
-- **可拖拽**: 用户可以在屏幕上拖动消息框
-- **自定义按钮**: 配置自定义按钮集合和不同操作
-- **HTML内容**: 支持纯文本和HTML内容
-- **基于Promise**: 返回Promise便于异步处理
-- **自动定位**: 自动居中显示并支持拖拽
-- **国际化**: 内置按钮标签的i18n支持
-
-## 安装
-
-```bash
-npm install @ticatec/uniface-element
-```
-
-## 设置
-
-首先，在你的根布局或应用组件中添加 MessageBoxBoard：
-
-```svelte
-<script>
-  import MessageBoxBoard from '@ticatec/uniface-element/MessageBox';
-</script>
-
-<!-- 应用内容 -->
-<main>
-  <!-- 你的组件 -->
-</main>
-
-<!-- MessageBox 面板 - 全局实例 -->
-<MessageBoxBoard appTitle="我的应用" />
-```
-
-## 基本用法
-
-一旦 MessageBoxBoard 被挂载，你就可以使用全局 MessageBox 实例：
-
-```javascript
-// 显示信息消息
-await window.MessageBox.showInfo('操作成功完成！', '成功');
-
-// 显示确认对话框
-const result = await window.MessageBox.showConfirm(
-  '确定要删除这个项目吗？', 
-  '确认删除'
-);
-
-if (result === ModalResult.MR_OK) {
-  // 用户确认
-  console.log('用户确认了操作');
-} else {
-  // 用户取消
-  console.log('用户取消了操作');
-}
-```
-
-## API 参考
-
-### MessageBoxBoard 属性
-
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|---------|-------------|
-| `appTitle` | `string` | `null` | 当未提供标题时的消息框默认标题 |
-
-### 全局方法
-
-#### `window.MessageBox.showInfo(message, title?, escapeHTML?)`
-
-显示带有关闭按钮的信息消息。
-
-**参数:**
-- `message` (string): 要显示的消息
-- `title` (string, 可选): 对话框标题
-- `escapeHTML` (boolean, 可选): 是否转义HTML内容 (默认: true)
-
-**返回:** `Promise<void>`
-
-#### `window.MessageBox.showConfirm(message, title?, escapeHTML?, type?)`
-
-显示带有确定/取消按钮的确认对话框。
-
-**参数:**
-- `message` (string): 要显示的消息
-- `title` (string, 可选): 对话框标题
-- `escapeHTML` (boolean, 可选): 是否转义HTML内容 (默认: true)
-- `type` ('info' | 'warning', 可选): 要显示的图标类型 (默认: 'info')
-
-**返回:** `Promise<ModalResult>`
-
-### ModalResult 枚举
-
-```typescript
-enum ModalResult {
-  MR_OK = 1,      // 用户点击确定/确认
-  MR_CANCEL = 2,  // 用户点击取消
-  MR_CLOSE = 3    // 用户点击关闭/X按钮
-}
-```
-
-## 示例
-
-### 基本信息消息
-
-```javascript
-// 简单信息消息
-await window.MessageBox.showInfo('您的更改已成功保存。');
-
-// 带自定义标题的信息消息
-await window.MessageBox.showInfo(
-  '操作完成，没有任何错误。',
-  '操作完成'
-);
-```
-
-### 确认对话框
-
-```javascript
-// 基本确认
-const result = await window.MessageBox.showConfirm(
-  '关闭前要保存更改吗？',
-  '未保存的更改'
-);
-
-if (result === ModalResult.MR_OK) {
-  // 保存更改
-  saveChanges();
-}
-
-// 警告确认
-const result = await window.MessageBox.showConfirm(
-  '此操作无法撤销。继续吗？',
-  '永久性操作',
-  false,
-  'warning'
-);
-```
-
-### HTML 内容
-
-```javascript
-// 显示HTML内容 (escapeHTML = false)
-await window.MessageBox.showInfo(
-  '<strong>重要：</strong>请检查您的<em>邮箱</em>进行验证。',
-  '邮箱验证',
-  false
-);
-
-// 安全HTML转义 (默认行为)
-await window.MessageBox.showInfo(
-  '用户输入: <script>alert("xss")</script>', // 将被转义
-  '用户数据'
-);
-```
-
-### 错误处理
-
-```javascript
-try {
-  const result = await window.MessageBox.showConfirm(
-    '删除所有选中的项目？',
-    '批量删除'
-  );
-  
-  if (result === ModalResult.MR_OK) {
-    await deleteItems();
-    await window.MessageBox.showInfo('项目删除成功。', '成功');
-  }
-} catch (error) {
-  await window.MessageBox.showInfo(
-    '发生错误，请重试。',
-    '错误',
-    false,
-    'warning'
-  );
-}
-```
-
-### 表单验证示例
-
-```svelte
-<script>
-  import { ModalResult } from '@ticatec/uniface-element/MessageBox';
-  
-  async function handleSubmit() {
-    if (!formData.name) {
-      await window.MessageBox.showInfo(
-        '提交前请输入您的姓名。',
-        '必填字段'
-      );
-      return;
-    }
-    
-    const result = await window.MessageBox.showConfirm(
-      '使用提供的信息提交表单？',
-      '确认提交'
-    );
-    
-    if (result === ModalResult.MR_OK) {
-      try {
-        await submitForm(formData);
-        await window.MessageBox.showInfo(
-          '表单提交成功！',
-          '成功'
-        );
-      } catch (error) {
-        await window.MessageBox.showInfo(
-          '表单提交失败，请重试。',
-          '提交错误',
-          false,
-          'warning'
-        );
-      }
-    }
-  }
-</script>
-```
-
-### 异步操作
-
-```javascript
-async function performAsyncOperation() {
-  // 显示加载状态 (可以用自定义对话框实现)
-  const confirmed = await window.MessageBox.showConfirm(
-    '此操作可能需要几分钟。继续吗？',
-    '长时间运行的操作'
-  );
-  
-  if (confirmed === ModalResult.MR_OK) {
-    try {
-      await longRunningTask();
-      await window.MessageBox.showInfo(
-        '操作成功完成！',
-        '成功'
-      );
-    } catch (error) {
-      await window.MessageBox.showInfo(
-        `操作失败: ${error.message}`,
-        '错误',
-        false,
-        'warning'
-      );
-    }
-  }
-}
-```
-
-### 对话框链式示例
-
-```javascript
-async function handleDataLoss() {
-  const saveFirst = await window.MessageBox.showConfirm(
-    '您有未保存的更改。要先保存它们吗？',
-    '未保存的更改'
-  );
-  
-  if (saveFirst === ModalResult.MR_OK) {
-    try {
-      await saveData();
-      await window.MessageBox.showInfo('数据保存成功。', '已保存');
-    } catch (error) {
-      const retry = await window.MessageBox.showConfirm(
-        '保存数据失败。重试吗？',
-        '保存错误',
-        false,
-        'warning'
-      );
-      
-      if (retry === ModalResult.MR_OK) {
-        return handleDataLoss(); // 递归重试
-      }
-    }
-  }
-  
-  // 继续原始操作
-  proceedWithAction();
-}
-```
-
-### 防止多个MessageBox
-
-```javascript
-let messageBoxActive = false;
-
-async function safeShowMessage(message, title) {
-  if (messageBoxActive) {
-    console.warn('MessageBox已激活');
-    return;
-  }
-  
-  messageBoxActive = true;
-  try {
-    await window.MessageBox.showInfo(message, title);
-  } finally {
-    messageBoxActive = false;
-  }
-}
-```
-
-## 样式
-
-MessageBox 使用可自定义的CSS类：
-
-```css
-.uniface-message-board {
-  /* 覆盖层背景 */
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 9999;
-}
-
-.uniface-message-box {
-  /* 对话框容器 */
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-}
-
-.title-bar {
-  /* 可拖拽标题区域 */
-  cursor: move;
-  padding: 8px;
-  border-bottom: 1px solid #eee;
-}
-
-.box-content {
-  /* 消息内容区域 */
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.control-bar {
-  /* 按钮区域 */
-  padding: 16px 20px;
-  text-align: right;
-  border-top: 1px solid #eee;
-}
-```
-
-## 最佳实践
-
-1. **使用有意义的标题**: 提供清晰、描述性的标题以获得更好的用户体验
-2. **保持消息简洁**: 简短、清晰的消息更有效
-3. **正确处理Promise**: 总是等待MessageBox调用或处理拒绝
-4. **考虑用户上下文**: 使用适当的消息类型（信息 vs 警告）
-5. **避免消息垃圾**: 防止多个MessageBox同时显示
-6. **测试HTML内容**: 使用HTML时，确保内容安全且格式正确
-7. **提供上下文**: 包含相关信息帮助用户做决定
-
-## TypeScript 支持
-
-MessageBox 包含完整的TypeScript定义：
-
-```typescript
-import { ModalResult, type IMessageBox } from '@ticatec/uniface-element/MessageBox';
-
-declare global {
-  interface Window {
-    MessageBox: IMessageBox;
-  }
-}
-
-// 带类型安全的用法
-const result: ModalResult = await window.MessageBox.showConfirm(
-  '删除这个项目？',
-  '确认删除'
-);
-```
-
-## 无障碍功能
-
-- 适当的ARIA标签和角色
-- 键盘导航支持 (ESC关闭)
-- 焦点管理
-- 屏幕阅读器兼容性
-- 高对比度模式支持
-
-## 相关组件
-
-- [Dialog](../dialog/README.md) - 用于自定义模态对话框
-- [Toast](../toast/README.md) - 用于非阻塞通知
-- [Button](../button/README.md) - 用于对话框操作

package/dist/message-box/index.d.ts

@@ -1,5 +0,0 @@
-import MessageBoxBoard from "./MessageBoxBoard.svelte";
-import type IMessageBox from "./IMessageBox";
-import { ModalResult } from "./IMessageBox";
-export default MessageBoxBoard;
-export { ModalResult, type IMessageBox };

package/dist/message-box/index.js

@@ -1,4 +0,0 @@
-import MessageBoxBoard from "./MessageBoxBoard.svelte";
-import { ModalResult } from "./IMessageBox";
-export default MessageBoxBoard;
-export { ModalResult };

package/dist/nav-menu/MenuItem.d.ts

@@ -1,7 +0,0 @@
-import type { ITreeNode } from "../lib";
-export default interface MenuItem {
-    [key: string]: any;
-}
-export interface MenuNode extends ITreeNode<MenuItem> {
-}
-export type OnMenuClick = (item: MenuItem) => void;

package/dist/nav-menu/Menus.d.ts

@@ -1,8 +0,0 @@
-import TreeNodes from "../lib/TreeNodes";
-import type MenuItem from "./MenuItem";
-export default class Menus extends TreeNodes<MenuItem> {
-    /**
-     * 删除所有没有子节点的目录类型节点
-     */
-    removeEmptyDirectory(): void;
-}

package/dist/nav-menu/Menus.js

@@ -1,25 +0,0 @@
-import {} from "../lib/TreeNodes";
-import TreeNodes from "../lib/TreeNodes";
-export default class Menus extends TreeNodes {
-    /**
-     * 删除所有没有子节点的目录类型节点
-     */
-    removeEmptyDirectory() {
-        const removeRecursive = (nodes) => {
-            for (let i = nodes.length - 1; i >= 0; i--) {
-                const node = nodes[i];
-                if (node.children && node.children.length > 0) {
-                    removeRecursive(node.children); // 先处理子节点
-                }
-                else {
-                    if (this.checkIsDirectory?.(node)) {
-                        node.detach();
-                        //nodes.splice(i, 1); // 从父节点的 children 中移除
-                        //this.nodeMap.delete(node._item[this.keyField]); // 从 nodeMap 中移除
-                    }
-                }
-            }
-        };
-        removeRecursive(this._nodes);
-    }
-}

package/dist/nav-menu/NavigatorMenu.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-    import type MenuItem from "./MenuItem";
-    import type {OnMenuClick} from "./MenuItem";
-    import NavigatorMenuItem from "./NavigatorMenuItem.svelte";
-    import type {GetText} from "../lib/TreeNodes";
-
-    export let menuItems: Array<MenuItem>;
-    export let style: string = '';
-
-    export let textField: string | GetText<MenuItem>;
-
-    export let onItemClick: OnMenuClick;
-
-
-
-</script>
-
-
-<div class="uniface-navigator-menu-panel" {style}>
-    {#if menuItems && menuItems.length > 0}
-        <ul>
-            {#each menuItems as menu}
-                <NavigatorMenuItem {menu} onMenuItemClick={onItemClick} {textField}/>
-            {/each}
-        </ul>
-    {/if}
-</div>

package/dist/nav-menu/NavigatorMenu.svelte.d.ts

@@ -1,26 +0,0 @@
-import type MenuItem from "./MenuItem";
-import type { OnMenuClick } from "./MenuItem";
-import type { GetText } from "../lib/TreeNodes";
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const NavigatorMenu: $$__sveltets_2_IsomorphicComponent<{
-    menuItems: Array<MenuItem>;
-    style?: string;
-    textField: string | GetText<MenuItem>;
-    onItemClick: OnMenuClick;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type NavigatorMenu = InstanceType<typeof NavigatorMenu>;
-export default NavigatorMenu;

package/dist/nav-menu/NavigatorMenuItem.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-
-    import {slide} from "svelte/transition";
-    import type MenuItem from "./MenuItem";
-    import type {OnMenuClick} from "./MenuItem";
-    import type {GetText} from "../lib/TreeNodes";
-
-    export let menu: MenuItem;
-    export let textField: string | GetText<MenuItem>;
-
-    let expand: boolean = menu.expand == true;
-
-    export let onMenuItemClick: OnMenuClick;
-
-    $: expandable = menu.children != null && menu.children.length > 0
-    $: menuText = typeof textField == 'string' ? menu.item?.[textField]??'Unknown item' : textField(menu.item);
-
-    let respond: boolean = true;
-    const handleMenuItemClick = () => {
-        if (respond) {
-            respond = false;
-            setTimeout(() => respond = true, 200);
-            if (expandable) {
-                menu.expand = !menu.expand;
-                expand = !expand;
-            } else {
-                onMenuItemClick?.(menu);
-            }
-        }
-
-    }
-
-</script>
-<li class:expandable class:fold={!expand}>
-    <span on:click={handleMenuItemClick} aria-hidden="true">{menuText}</span>
-    {#if menu.children}
-        {#if expand}
-            <ul transition:slide={{duration: 200}}>
-                {#each menu.children as el}
-                    <svelte:self menu={el} {onMenuItemClick} {textField}/>
-                {/each}
-            </ul>
-        {/if}
-    {/if}
-</li>

package/dist/nav-menu/NavigatorMenuItem.svelte.d.ts

@@ -1,25 +0,0 @@
-import type MenuItem from "./MenuItem";
-import type { OnMenuClick } from "./MenuItem";
-import type { GetText } from "../lib/TreeNodes";
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const NavigatorMenuItem: $$__sveltets_2_IsomorphicComponent<{
-    menu: MenuItem;
-    textField: string | GetText<MenuItem>;
-    onMenuItemClick: OnMenuClick;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type NavigatorMenuItem = InstanceType<typeof NavigatorMenuItem>;
-export default NavigatorMenuItem;

package/dist/nav-menu/readme.MD

@@ -1 +0,0 @@
-# 导航菜单

package/dist/navigator/Navigator.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-
-    import {NavItemStatus} from "./NavItemStatus";
-
-    type ItemClickHandler = (item: any) => void;
-    type RetrieveItemStatus = (item: any) => NavItemStatus;
-
-    export let items: Array<any>;
-    export let activeItem: any = null;
-    export let style: string = "";
-    export let highlights: Array<any> = [];
-    export let itemClickHandler: ItemClickHandler;
-    export let retrieveStatus: RetrieveItemStatus;
-
-    const handleItemClick = (item: any) => (e: MouseEvent) => {
-        activeItem = item;
-        itemClickHandler?.(item);
-    }
-
-</script>
-
-<div class="uniface-navigator-panel" {style}>
-    <div class="navigator-content">
-        {#each items as item}
-            <div class="uniface-navigator-item {retrieveStatus?.(item)??NavItemStatus.Completed}" class:active={activeItem===item}
-                 class:highlight={highlights.indexOf(item)>-1}
-                 aria-hidden="true" on:click={handleItemClick(item)}>
-                <span>{item.text}</span>
-            </div>
-        {/each}
-    </div>
-</div>
-

package/dist/navigator/Navigator.svelte.d.ts

@@ -1,26 +0,0 @@
-import { NavItemStatus } from "./NavItemStatus";
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Navigator: $$__sveltets_2_IsomorphicComponent<{
-    items: Array<any>;
-    activeItem?: any;
-    style?: string;
-    highlights?: Array<any>;
-    itemClickHandler: (item: any) => void;
-    retrieveStatus: (item: any) => NavItemStatus;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Navigator = InstanceType<typeof Navigator>;
-export default Navigator;