@ticatec/uniface-element 0.2.0 → 0.2.1

package/README.md

@@ -1,4 +1,276 @@
 # Uniface Element
 
-## Global Components
+[![npm version](https://badge.fury.io/js/%40ticatec%2Funiface-element.svg)](https://badge.fury.io/js/%40ticatec%2Funiface-element)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
+A comprehensive enterprise-grade UI component library built with Svelte 5, designed for modern web applications.
+
+[中文文档](./README_CN.md)
+
+## Features
+
+✨ **Enterprise-Grade Components** - Complete set of components for business applications  
+🎨 **Theme System** - CSS variables-based theming with customizable design tokens  
+📱 **Responsive Design** - Mobile-first responsive components  
+🌍 **Internationalization** - Built-in i18n support with English and Chinese resources  
+🎯 **TypeScript Support** - Full TypeScript definitions for better development experience  
+🔧 **Modular Architecture** - Tree-shakable imports for optimal bundle size  
+⚡ **High Performance** - Built with Svelte 5 for maximum performance  
+
+## Installation
+
+```bash
+npm install @ticatec/uniface-element
+```
+
+## Quick Start
+
+### 1. Import Styles
+
+```typescript
+// Import the main CSS file
+import '@ticatec/uniface-element/ticatec-uniface-web.css';
+```
+
+### 2. Use Components
+
+```svelte
+<script lang="ts">
+  import Button, DataTable, Dialog from '@ticatec/uniface-element/Button, DataTable, Dialog';
+  import type { DataColumn } from '@ticatec/uniface-element';
+  
+  let columns: DataColumn[] = [
+    { field: 'name', title: 'Name', width: 150 },
+    { field: 'email', title: 'Email', width: 200 }
+  ];
+  
+  let data = [
+    { name: 'John Doe', email: 'john@example.com' },
+    { name: 'Jane Smith', email: 'jane@example.com' }
+  ];
+</script>
+
+<Button type="primary" on:click={() => console.log('Clicked!')}>
+  Click Me
+</Button>
+
+<DataTable {columns} list={data} />
+```
+
+## Component Categories
+
+### Layout Components
+- **App Layouts**: `SidebarLayout`, `HeaderLayout`, `ClassicLayout`, `ColumnsLayout`, `RowsLayout`
+- **Containers**: `Box`, `Card`, `Page`, `Accordion`
+- **Form Layouts**: `FlexForm`, `GridForm`, `FormField`
+- **Utilities**: `Split`, `Separator`
+
+### Data Display
+- **Tables**: `DataTable`, `ConciseDataTable`
+- **Lists**: `ListBox`, `TreeView`
+- **Navigation**: `Breadcrumbs`, `Tabs`, `NavigatorMenu` | [Navigation Components Docs](./docs/navigation/)
+- **Indicators**: `ProgressBar`, `ProgressStepBar`, `Tag`
+
+### Form Controls
+- **Input**: `TextEditor`, `NumberEditor`, [`MemoEditor`](./docs/form-components/en/memoeditor.md), [`PasswordEditor`](./docs/form-components/en/passwordeditor.md)
+- **Selection**: `OptionsSelect`, `OptionsMultiSelect`, `CascadeOptionsSelect`
+- **Date/Time**: `DatePicker`, `DateTimePicker`, `TimeEditor`
+- **Search/Filter**: [`SearchBox`, `NumberRange`, `DateRange`](./docs/search-filters/) - Advanced search and filtering components
+- **Others**: `CheckBox`, `RadioButton`, `Switch`, `ColorPicker`
+
+### Feedback Components
+- **Dialogs**: `Dialog`, `MessageBox`, `Drawer`
+- **Notifications**: `Toast`, `PopupHint`
+- **Overlays**: `FullScreenOverlay`
+
+### Advanced Components
+- **Editors**: `InlineCellEditor`, `PropertyEditor`, `PromptsTextEditor`
+- **File Upload**: `AttachmentFiles`, `ImageFiles`
+- **Data Transfer**: `Transfer`
+- **Search**: `SearchBox`, `CriteriaField`
+
+## Usage Examples
+
+### Data Table with Selection
+
+```svelte
+<script lang="ts">
+  import DataTable from '@ticatec/uniface-element/DataTable';
+  import type { DataColumn } from '@ticatec/uniface-element';
+  
+  let columns: DataColumn[] = [
+    {
+      field: 'name',
+      title: 'Name',
+      width: 200
+    },
+    {
+      field: 'email',
+      title: 'Email',
+      width: 250
+    },
+    {
+      field: 'status',
+      title: 'Status',
+      width: 120
+    }
+  ];
+  
+  let data = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'Active' }
+  ];
+  
+  let selectedRows = [];
+</script>
+
+<DataTable {columns} list={data} bind:selectedRows />
+```
+
+### Dialog with Form
+
+```svelte
+<script lang="ts">
+  import Dialog, Button, TextEditor, FormField from '@ticatec/uniface-element/Dialog, Button, TextEditor, FormField';
+  
+  let showDialog = false;
+  let formData = { name: '', email: '' };
+</script>
+
+<Button on:click={() => showDialog = true}>Open Dialog</Button>
+
+<Dialog bind:visible={showDialog} title="Edit User">
+  <FormField label="Name">
+    <TextEditor bind:value={formData.name} />
+  </FormField>
+  
+  <FormField label="Email">
+    <TextEditor bind:value={formData.email} type="email" />
+  </FormField>
+  
+  <svelte:fragment slot="actions">
+    <Button on:click={() => showDialog = false}>Cancel</Button>
+    <Button type="primary" on:click={() => showDialog = false}>Save</Button>
+  </svelte:fragment>
+</Dialog>
+```
+
+## Theme Customization
+
+The library uses CSS custom properties for theming. You can customize the appearance by overriding these variables:
+
+```css
+:root {
+  --uniface-primary-color: #0061FF;
+  --uniface-secondary-color: #22BDFF;
+  --uniface-primary-text-color: #374151;
+  --uniface-button-common-bg: #f0f0f0;
+  --uniface-hover-item-background: #f7f7f7;
+  /* ... more variables */
+}
+```
+
+## Internationalization
+
+The library includes built-in internationalization support:
+
+```typescript
+import { i18n } from '@ticatec/uniface-element/i18n_resources';
+
+// Set language
+i18n.setLanguage('en'); // or 'zh-CN'
+```
+
+## Available Imports
+
+### Modular Imports
+```typescript
+// Individual component imports
+import { Button } from '@ticatec/uniface-element/Button';
+import { DataTable } from '@ticatec/uniface-element/DataTable';
+import { SidebarLayout } from '@ticatec/uniface-element/app-layout/SidebarLayout';
+import { AttachmentFilesField } from '@ticatec/uniface-element/AttachmentFiles';
+import { ImageFilesField } from '@ticatec/uniface-element/ImageFiles';
+import { MemoEditor } from '@ticatec/uniface-element/MemoEditor';
+
+// Utility imports
+import { utils } from '@ticatec/uniface-element/utils';
+import type { DataColumn } from '@ticatec/uniface-element/types';
+```
+
+### Barrel Imports
+```typescript
+// Import multiple components from main entry point
+import Button, DataTable, Dialog, Card from '@ticatec/uniface-element/Button, DataTable, Dialog, Card';
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build the library
+npm run build
+
+# Run type checking
+npm run check
+```
+
+## Browser Support
+
+- Chrome ≥ 88
+- Firefox ≥ 85
+- Safari ≥ 14
+- Edge ≥ 88
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.
+
+## License
+
+MIT License - see [LICENSE](./LICENSE) file for details.
+
+## Author
+
+**Henry Feng** - [Ticatec](https://github.com/ticatec-auckland)
+
+## Documentation
+
+Comprehensive component documentation is available in the `/docs` directory:
+
+### Layout Components
+- [SidebarLayout](./docs/layout/en/sidebarlayout.md) | [中文](./docs/layout/cn/sidebarlayout.md) - Left sidebar with resizable main content area
+- [HeaderLayout](./docs/layout/en/headerlayout.md) | [中文](./docs/layout/cn/headerlayout.md) - Top header with content area and optional sidebar
+- [ClassicLayout](./docs/layout/en/classiclayout.md) | [中文](./docs/layout/cn/classiclayout.md) - Full-screen layout with header, footer, sidebar, and content areas
+
+### Button Components
+- [Button System](./docs/buttons/en/README.md) | [中文](./docs/buttons/cn/README.md) - Complete button components including Button, TextButton, IconButton, and ActionBar
+
+### Dialog Components
+- [Dialog System](./docs/dialog/en/README.md) | [中文](./docs/dialog/cn/README.md) - Modal dialog system with DialogBoard, Dialog, and CommonDialog components
+
+### 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
+
+### Miscellaneous Components
+- [Utility Components](./docs/misc/en/README.md) | [中文](./docs/misc/cn/README.md) - Additional components including Split, Drawer, Tag, and Card
+
+Each component documentation includes:
+- API reference with all props and methods
+- Advanced usage examples and patterns
+- Best practices and styling guides
+- Accessibility considerations
+- Integration tips
+
+---
+
+For more detailed documentation and examples, please visit our [documentation site](#) or check out the demo components in the `/src/routes/demo` directory.

package/README_CN.md

@@ -0,0 +1,341 @@
+# Uniface Element
+
+[![npm version](https://badge.fury.io/js/%40ticatec%2Funiface-element.svg)](https://badge.fury.io/js/%40ticatec%2Funiface-element)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+基于 Svelte 5 构建的全面企业级 UI 组件库，专为现代化 Web 应用程序设计。
+
+[English Documentation](./README.md)
+
+## 特性
+
+✨ **企业级组件** - 为商业应用提供完整的组件集合  
+🎨 **主题系统** - 基于 CSS 变量的主题化，可自定义设计令牌  
+📱 **响应式设计** - 移动优先的响应式组件  
+🌍 **国际化支持** - 内置中英文国际化资源  
+🎯 **TypeScript 支持** - 完整的 TypeScript 类型定义，提供更好的开发体验  
+🔧 **模块化架构** - 支持按需导入，优化打包体积  
+⚡ **高性能** - 基于 Svelte 5 构建，性能卓越  
+
+## 安装
+
+```bash
+npm install @ticatec/uniface-element
+```
+
+## 快速开始
+
+### 1. 导入样式
+
+```typescript
+// 导入主样式文件
+import '@ticatec/uniface-element/ticatec-uniface-web.css';
+```
+
+### 2. 使用组件
+
+```svelte
+<script lang="ts">
+  import Button from '@ticatec/uniface-element/Button';
+  import DataTable, Dialog from '@ticatec/uniface-element/DataTable';
+  import Dialog from '@ticatec/uniface-element/Dialog';
+  import type { DataColumn } from '@ticatec/uniface-element/DataTable';
+  
+  let columns: DataColumn[] = [
+    { field: 'name', title: '姓名', width: 150 },
+    { field: 'email', title: '邮箱', width: 200 }
+  ];
+  
+  let data = [
+    { name: '张三', email: 'zhangsan@example.com' },
+    { name: '李四', email: 'lisi@example.com' }
+  ];
+</script>
+
+<Button type="primary" on:click={() => console.log('点击了!')}>
+  点击我
+</Button>
+
+<DataTable {columns} list={data} />
+```
+
+## 组件分类
+
+### 布局组件
+- **应用布局**: `SidebarLayout`、`HeaderLayout`、`ClassicLayout`、`ColumnsLayout`、`RowsLayout`
+- **容器组件**: `Box`、`Card`、`Page`、`Accordion`
+- **表单布局**: `FlexForm`、`GridForm`、`FormField`
+- **工具组件**: `Split`、`Separator`
+
+### 数据展示
+- **表格组件**: `DataTable`、`ConciseDataTable`
+- **列表组件**: `ListBox`、`TreeView`
+- **导航组件**: `Breadcrumbs`、`Tabs`、`NavigatorMenu`
+- **指示器**: `ProgressBar`、`ProgressStepBar`、`Tag`
+
+### 表单控件
+- **输入组件**: `TextEditor`、`NumberEditor`、`MemoEditor`、`PasswordEditor`
+- **选择组件**: `OptionsSelect`、`OptionsMultiSelect`、`CascadeOptionsSelect`
+- **日期时间**: `DatePicker`、`DateTimePicker`、`TimeEditor`
+- **其他控件**: `CheckBox`、`RadioButton`、`Switch`、`ColorPicker`
+
+### 反馈组件
+- **对话框**: `Dialog`、`MessageBox`、`Drawer`
+- **消息通知**: `Toast`、`PopupHint`
+- **遮罩层**: `FullScreenOverlay`
+
+### 高级组件
+- **编辑器**: `InlineCellEditor`、`PropertyEditor`、`PromptsTextEditor`
+- **文件上传**: `AttachmentFiles`、`ImageFiles`
+- **数据传输**: `Transfer`
+- **搜索组件**: `SearchBox`、`CriteriaField`
+
+## 页面全局组件
+
+页面全局组件直接加载在 body 上，使用时不需要单独引入，可通过全局方法直接使用。通常在系统主页面直接加载：
+
+```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";
+</script>
+
+<div>
+  <!-- 主页面内容 -->
+</div>
+
+<IndicatorBoard/>
+<DialogBoard/>
+<ToastBoard/>
+<MessageBoxBoard/>
+```
+
+### 异步操作指示器 `Indicator`
+
+用于异步操作时遮罩页面并显示操作信息，避免用户异常操作：
+
+```typescript
+try {
+  window.Indicator.show('正在加载数据...');
+  // 异步调用 await service.search();
+} finally {
+  window.Indicator.hide();
+}
+```
+
+### 弹出消息 `Toast`
+
+用于显示操作结果和提示信息：
+
+```typescript
+// 显示错误消息（默认3秒）
+window.Toast.show("无法删除活跃用户", "error", 2);
+
+// 显示成功消息
+window.Toast.show("操作成功", "success");
+
+// 显示信息提示
+window.Toast.show("这是一条信息", "info");
+```
+
+### 消息提示框 `MessageBox`
+
+用于确认操作和信息提示：
+
+```typescript
+import ModalResult from '@ticatec/uniface-element/ModalResult';
+
+const deleteConfirm = async (user: any) => {
+  const result = await window.MessageBox.showConfirm(`确定要删除用户[${user.name}]吗？`);
+  if (result === ModalResult.MR_OK) {
+    // 执行删除操作
+  }
+}
+
+// 显示信息提示
+await window.MessageBox.showInfo("操作完成", "提示");
+```
+
+## 使用示例
+
+### 带行选择的数据表格
+
+```svelte
+<script lang="ts">
+  import DataTable from '@ticatec/uniface-element/DataTable';
+  import type { DataColumn } from '@ticatec/uniface-element';
+  
+  let columns: DataColumn[] = [
+    {
+      field: 'name',
+      title: '姓名',
+      width: 200
+    },
+    {
+      field: 'email',
+      title: '邮箱',
+      width: 250
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120
+    }
+  ];
+  
+  let data = [
+    { id: 1, name: '张三', email: 'zhangsan@example.com', status: '活跃' },
+    { id: 2, name: '李四', email: 'lisi@example.com', status: '非活跃' },
+    { id: 3, name: '王五', email: 'wangwu@example.com', status: '活跃' }
+  ];
+  
+  let selectedRows = [];
+</script>
+
+<DataTable {columns} list={data} bind:selectedRows />
+```
+
+### 表单对话框
+
+```svelte
+<script lang="ts">
+  import Dialog, Button, TextEditor, FormField from '@ticatec/uniface-element/Dialog, Button, TextEditor, FormField';
+  
+  let showDialog = false;
+  let formData = { name: '', email: '' };
+</script>
+
+<Button on:click={() => showDialog = true}>打开对话框</Button>
+
+<Dialog bind:visible={showDialog} title="编辑用户">
+  <FormField label="姓名">
+    <TextEditor bind:value={formData.name} />
+  </FormField>
+  
+  <FormField label="邮箱">
+    <TextEditor bind:value={formData.email} type="email" />
+  </FormField>
+  
+  <svelte:fragment slot="actions">
+    <Button on:click={() => showDialog = false}>取消</Button>
+    <Button type="primary" on:click={() => showDialog = false}>保存</Button>
+  </svelte:fragment>
+</Dialog>
+```
+
+## 布局组件详细介绍
+
+## 文档
+
+`/docs` 目录中提供了全面的组件文档：
+
+### 布局组件
+- [SidebarLayout](./docs/layout/cn/sidebarlayout.md) | [English](./docs/layout/en/sidebarlayout.md) - 左侧边栏与可调整大小的主内容区域
+- [HeaderLayout](./docs/layout/cn/headerlayout.md) | [English](./docs/layout/en/headerlayout.md) - 顶部头部与内容区域及可选侧边栏
+- [ClassicLayout](./docs/layout/cn/classiclayout.md) | [English](./docs/layout/en/classiclayout.md) - 全屏布局，包含头部、底部、侧边栏和内容区域
+
+### 按钮组件
+- [按钮系统](./docs/buttons/cn/README.md) | [English](./docs/buttons/en/README.md) - 完整的按钮组件，包括 Button、TextButton、IconButton 和 ActionBar
+
+### 对话框组件
+- [对话框系统](./docs/dialog/cn/README.md) | [English](./docs/dialog/en/README.md) - 模态对话框系统，包含 DialogBoard、Dialog 和 CommonDialog 组件
+
+### 表单组件
+- [表单控件](./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
+
+### 杂项组件
+- [实用组件](./docs/misc/cn/README.md) | [English](./docs/misc/en/README.md) - 其他组件，包括 Split、Drawer、Tag 和 Card
+
+每个组件文档都包括：
+- 包含所有属性和方法的 API 参考
+- 高级用法示例和模式
+- 最佳实践和样式指南
+- 无障碍访问注意事项
+- 集成提示
+
+## 主题定制
+
+组件库使用 CSS 自定义属性进行主题化。你可以通过覆盖这些变量来自定义外观：
+
+```css
+:root {
+  --uniface-primary-color: #0061FF;
+  --uniface-secondary-color: #22BDFF;
+  --uniface-primary-text-color: #374151;
+  --uniface-button-common-bg: #f0f0f0;
+  --uniface-hover-item-background: #f7f7f7;
+  /* ... 更多变量 */
+}
+```
+
+## 国际化
+
+组件库内置国际化支持：
+
+```typescript
+import { i18n } from '@ticatec/uniface-element/i18n_resources';
+
+// 设置语言
+i18n.setLanguage('zh-CN'); // 或 'en'
+```
+
+## 可用导入
+
+### 模块化导入
+```typescript
+// 单个组件导入
+import Button from '@ticatec/uniface-element/Button';
+import DataTable from '@ticatec/uniface-element/DataTable';
+import SidebarLayout from '@ticatec/uniface-element/app-layout/SidebarLayout';
+import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFiles';
+import ImageFilesField from '@ticatec/uniface-element/ImageFiles';
+import MemoEditor from '@ticatec/uniface-element/MemoEditor';
+
+// 工具导入
+import { utils } from '@ticatec/uniface-element/utils';
+import type { DataColumn } from '@ticatec/uniface-element/types';
+```
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建组件库
+npm run build
+
+# 运行类型检查
+npm run check
+```
+
+## 浏览器支持
+
+- Chrome ≥ 88
+- Firefox ≥ 85
+- Safari ≥ 14
+- Edge ≥ 88
+
+## 贡献
+
+欢迎贡献代码！请查看我们的 [贡献指南](./CONTRIBUTING.md) 了解详细信息。
+
+## 许可证
+
+MIT 许可证 - 查看 [LICENSE](./LICENSE) 文件了解详细信息。
+
+## 作者
+
+**Henry Feng** - [Ticatec](https://github.com/ticatec-auckland)
+
+---
+
+更多详细文档和示例，请访问我们的 [文档网站](#) 或查看 `/src/routes/demo` 目录中的示例组件。

package/dist/common/MouseClickHandler.d.ts

@@ -1 +1 @@
-export type MouseClickHandler = (event: MouseEvent) => void;
+export type MouseClickHandler = (event: MouseEvent) => Promise<void>;

package/dist/dialog/CommonDialog.svelte

@@ -4,6 +4,7 @@
     import type {ButtonAction, ButtonActions} from "../action-bar";
     import i18n from "@ticatec/i18n";
     import type {DialogCloseConfirm} from "./DialogCloseConfirm";
+    import {ModalResult, type OnClose} from "./ModalResult";
 
     export let title: string;
     export let width: string = 'unset';
@@ -11,10 +12,12 @@
 
     export let closeConfirm: DialogCloseConfirm | null = null;
     export let content$style: string = '';
-    export let closeHandler: () => void;
     export let enableConfirm: boolean = true;
     export let confirmHandler: (()=>Promise<any>) | null = null;
     export let confirmText: string | null = null;
+    export let onClose: OnClose | null = null;
+
+    let dialog: any;
 
     let confirmAction: ButtonAction = {
         label: confirmText??i18n.getText('uniface.btnConfirm', 'OK'),
@@ -23,7 +26,7 @@
         handler: async ()=> {
             let result = await confirmHandler?.();
             if (result && result==true) { //返回true自动关闭
-                closeHandler?.();
+                dialog.close(ModalResult.Ok);
             }
 
         }
@@ -38,6 +41,6 @@
 
 </script>
 
-<Dialog {title} {content$style} {width} {height} {closeHandler} {actions} {closeConfirm}>
+<Dialog bind:this={dialog} {title} {content$style} {width} {height} {actions} {closeConfirm} {onClose}>
     <slot></slot>
 </Dialog>

package/dist/dialog/CommonDialog.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { DialogCloseConfirm } from "./DialogCloseConfirm";
+import { type OnClose } from "./ModalResult";
 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;
@@ -23,10 +24,10 @@ declare const CommonDialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Pr
     height?: string;
     closeConfirm?: DialogCloseConfirm | null;
     content$style?: string;
-    closeHandler: () => void;
     enableConfirm?: boolean;
     confirmHandler?: (() => Promise<any>) | null;
     confirmText?: string | null;
+    onClose?: OnClose | null;
 }, {
     default: {};
 }>, {