@ticatec/uniface-element 0.3.22 → 5.0.0

package/dist/accordion/README_CN.md

@@ -1,176 +0,0 @@
-# 手风琴组件
-
-一个灵活且可定制的手风琴组件，用于可折叠的内容区域。
-
-## 功能特性
-
-- **可折叠区域**: 可展开和折叠的内容面板
-- **两种模式**: 
-  - **多选模式**: 多个面板可以同时打开
-  - **独占模式**: 同时只能打开一个面板
-- **动态内容**: 支持任何Svelte组件作为面板内容
-- **自定义标题**: 可选的自定义标题组件
-- **响应式设计**: 紧凑模式适配小屏幕
-- **无障碍访问**: 基于无障碍最佳实践构建
-
-## 基本用法
-
-```svelte
-<script>
-import Accordion, { type AccordionItem } from '@ticatec/uniface-element/Accordion';
-import MyComponent from './MyComponent.svelte';
-
-const accordionItems: AccordionItem[] = [
-  {
-    title: '第一部分',
-    component: MyComponent,
-    params: { data: '示例数据' }
-  },
-  {
-    title: '第二部分', 
-    component: MyComponent,
-    params: { data: '另一个示例' }
-  }
-];
-</script>
-
-<Accordion accordions={accordionItems} />
-```
-
-## 属性参数
-
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|---------|-------------|
-| `accordions` | `AccordionItem[]` | `[]` | 要显示的手风琴项目数组 |
-| `exclusive` | `boolean` | `false` | 是否同时只能打开一个面板 |
-| `activeItem` | `AccordionItem` | `null` | 当前激活的项目（在独占模式下使用） |
-| `compact` | `boolean` | `false` | 启用紧凑样式以适配小屏幕 |
-| `style` | `string` | `''` | 自定义CSS样式 |
-| `class` | `string` | `''` | 额外的CSS类名 |
-
-## AccordionItem 接口
-
-```typescript
-interface AccordionItem {
-  title: string;        // 手风琴标题的显示文本
-  component: any;       // 要在面板中渲染的Svelte组件
-  params?: any;         // 传递给组件的属性参数
-}
-```
-
-## 使用示例
-
-### 多面板模式（默认）
-
-```svelte
-<Accordion accordions={items} />
-```
-
-### 独占模式（只能打开一个）
-
-```svelte
-<Accordion 
-  accordions={items} 
-  exclusive={true}
-  bind:activeItem={currentActive}
-/>
-```
-
-### 紧凑模式
-
-```svelte
-<Accordion 
-  accordions={items} 
-  compact={true}
-/>
-```
-
-### 自定义样式
-
-```svelte
-<Accordion 
-  accordions={items}
-  style="border: 1px solid #ccc; border-radius: 8px;"
-  class="my-custom-accordion"
-/>
-```
-
-## 行为特性
-
-### 多选模式
-- 用户可以展开/折叠任意数量的面板
-- 点击面板标题切换其打开/关闭状态
-- 不会自动关闭其他面板
-
-### 独占模式
-- 同时只能打开一个面板
-- 打开新面板会自动关闭之前打开的面板
-- 如果没有指定`activeItem`，首个面板会在挂载时自动打开
-- 为当前打开的面板显示文件夹图标
-
-## 样式定制
-
-组件使用以下CSS类名：
-
-- `.uniface-accordion-panel` - 主容器
-- `.accordion` - 单个手风琴项目
-- `.header` - 手风琴标题（可点击）
-- `.content` - 手风琴内容区域
-- `.compact` - 启用紧凑模式时应用
-
-## 无障碍访问
-
-- 标题可点击，支持键盘导航
-- 为屏幕阅读器提供适当的ARIA属性
-- 为打开/关闭状态提供视觉指示器
-- 为键盘用户提供焦点管理
-
-## 图标使用
-
-组件使用Google Material图标：
-- `icon_google_keyboard_arrow_down` - 折叠状态（多选模式）
-- `icon_google_keyboard_arrow_up` - 展开状态（多选模式）  
-- `icon_google_folder_open` - 激活状态（独占模式）
-
-## 高级用法
-
-### 自定义标题组件
-
-你可以通过在AccordionItemView上设置`header`属性来提供自定义标题组件：
-
-```svelte
-<AccordionItemView 
-  title={item.title}
-  isOpen={isOpen}
-  header={CustomHeaderComponent}
-  onClick={handleClick}
->
-  <!-- 内容 -->
-</AccordionItemView>
-```
-
-### 动态内容
-
-手风琴项目可以包含任何带有动态参数的Svelte组件：
-
-```javascript
-const dynamicItems = [
-  {
-    title: '用户资料',
-    component: UserProfile,
-    params: { userId: 123, editable: true }
-  },
-  {
-    title: '设置',
-    component: SettingsPanel,
-    params: { theme: 'dark', language: 'zh-CN' }
-  }
-];
-```
-
-## 注意事项
-
-- 确保传递给组件的参数与目标组件的属性接口匹配
-- 在独占模式下，建议监听`activeItem`的变化以响应用户交互
-- 组件内容会在面板展开时渲染，折叠时从DOM中移除
-- 适合用于FAQ、设置面板、内容分类等场景

package/dist/action-bar/ActionBar.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-
-    import type ButtonAction from "./ButtonAction";
-    import type {ButtonActions} from "./ButtonAction";
-    import Button from "../button/Button.svelte";
-    import Separator from "../separator/Separator.svelte";
-
-    export let buttons: ButtonActions = [];
-    export let style: string = '';
-    export let gap: number = 8;
-
-    const handleButtonClick = (button: ButtonAction) => (event: MouseEvent) => {
-        button.handler?.(event)
-    }
-
-
-</script>
-
-<div class="uniface-action-bar" style="gap: {gap}px; {style}">
-    {#each (buttons ?? []) as button}
-        {#if button}
-            <Button label={button.label} icon={button.icon} disabled={button.disabled===true} type={button.type}
-                    onclick={handleButtonClick(button)}/>
-        {:else }
-            <Separator height="24px"/>
-        {/if}
-    {:else }
-        <slot></slot>
-    {/each}
-</div>

package/dist/action-bar/ActionBar.svelte.d.ts

@@ -1,32 +0,0 @@
-import type { ButtonActions } from "./ButtonAction";
-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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ActionBar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    buttons?: ButtonActions;
-    style?: string;
-    gap?: number;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type ActionBar = InstanceType<typeof ActionBar>;
-export default ActionBar;

package/dist/action-bar/ButtonAction.d.ts

@@ -1,25 +0,0 @@
-import type { ButtonType } from "../button/ButtonType";
-import type { MouseClickHandler } from "../common/MouseClickHandler";
-export default interface ButtonAction {
-    /**
-     * 按钮的文字
-     */
-    label: string;
-    /**
-     * 是否禁用
-     */
-    disabled?: boolean;
-    /**
-     * 前缀图标
-     */
-    icon?: string;
-    /**
-     * 按钮的类型
-     */
-    type?: ButtonType;
-    /**
-     * click处理函数
-     */
-    handler?: MouseClickHandler;
-}
-export type ButtonActions = Array<ButtonAction | null>;

package/dist/action-bar/README.md

@@ -1,275 +0,0 @@
-# ActionBar Component
-
-A flexible action bar component for organizing and displaying action buttons with optional separators.
-
-## Features
-
-- **Button Organization**: Display multiple action buttons in a horizontal layout
-- **Flexible Configuration**: Define buttons through data or use slot content
-- **Separators**: Add visual separators between button groups using `null` values
-- **Customizable Styling**: Control gap spacing and apply custom styles
-- **Button Types**: Support all button types (primary, secondary, danger, etc.)
-- **Icon Support**: Display icons alongside button labels
-- **Disabled State**: Individual button disable functionality
-- **Responsive**: Adapts to container width
-
-## Basic Usage
-
-```svelte
-<script>
-import ActionBar, { type ButtonAction } from '@ticatec/uniface-element/ActionBar';
-
-const actions: ButtonAction[] = [
-  {
-    label: 'Save',
-    type: 'primary',
-    icon: 'icon_google_save',
-    handler: () => console.log('Save clicked')
-  },
-  {
-    label: 'Cancel',
-    type: 'secondary',
-    handler: () => console.log('Cancel clicked')
-  }
-];
-</script>
-
-<ActionBar buttons={actions} />
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `buttons` | `ButtonActions` | `[]` | Array of button actions or null for separators |
-| `style` | `string` | `''` | Custom CSS styles for the action bar |
-| `gap` | `number` | `8` | Gap spacing between buttons in pixels |
-
-## ButtonAction Interface
-
-```typescript
-interface ButtonAction {
-  label: string;           // Button text
-  disabled?: boolean;      // Whether the button is disabled
-  icon?: string;          // Icon class name (optional)
-  type?: ButtonType;      // Button style type
-  handler?: MouseClickHandler; // Click event handler
-}
-
-type ButtonActions = Array<ButtonAction | null>;
-```
-
-## ButtonType Options
-
-The component supports all standard button types:
-- `'primary'` - Primary action button
-- `'secondary'` - Secondary action button  
-- `'danger'` - Destructive action button
-- `'success'` - Success/confirmation button
-- `'warning'` - Warning button
-- `'info'` - Informational button
-
-## Examples
-
-### Basic Action Bar
-
-```svelte
-<script>
-const basicActions = [
-  { label: 'New', handler: createNew },
-  { label: 'Edit', handler: editItem },
-  { label: 'Delete', type: 'danger', handler: deleteItem }
-];
-</script>
-
-<ActionBar buttons={basicActions} />
-```
-
-### With Icons
-
-```svelte
-<script>
-const iconActions = [
-  { 
-    label: 'Save', 
-    icon: 'icon_google_save',
-    type: 'primary',
-    handler: save 
-  },
-  { 
-    label: 'Print', 
-    icon: 'icon_google_print',
-    handler: print 
-  }
-];
-</script>
-
-<ActionBar buttons={iconActions} />
-```
-
-### With Separators
-
-```svelte
-<script>
-const actionsWithSeparators = [
-  { label: 'Copy', handler: copy },
-  { label: 'Paste', handler: paste },
-  null, // Separator
-  { label: 'Delete', type: 'danger', handler: remove }
-];
-</script>
-
-<ActionBar buttons={actionsWithSeparators} />
-```
-
-### Custom Spacing
-
-```svelte
-<ActionBar 
-  buttons={actions}
-  gap={16}
-  style="padding: 12px; background: #f5f5f5;"
-/>
-```
-
-### Using Slot Content
-
-```svelte
-<ActionBar>
-  <Button label="Custom" type="primary" />
-  <Button label="Actions" type="secondary" />
-</ActionBar>
-```
-
-## Dynamic Actions
-
-```svelte
-<script>
-let isEditing = false;
-
-$: actions = isEditing ? [
-  { label: 'Save', type: 'primary', handler: save },
-  { label: 'Cancel', handler: cancel }
-] : [
-  { label: 'Edit', handler: startEdit },
-  { label: 'Delete', type: 'danger', handler: remove }
-];
-</script>
-
-<ActionBar buttons={actions} />
-```
-
-## Conditional Buttons
-
-```svelte
-<script>
-let hasPermission = true;
-let isLoading = false;
-
-$: actions = [
-  { label: 'Refresh', handler: refresh },
-  hasPermission ? { 
-    label: 'Save', 
-    type: 'primary',
-    disabled: isLoading,
-    handler: save 
-  } : null,
-  hasPermission ? { 
-    label: 'Delete', 
-    type: 'danger',
-    disabled: isLoading,
-    handler: remove 
-  } : null
-].filter(Boolean); // Remove null values
-</script>
-
-<ActionBar buttons={actions} />
-```
-
-## Behavior
-
-### Button Rendering
-- Buttons are rendered using the internal Button component
-- Each button receives the configured label, icon, type, and disabled state
-- Click handlers are automatically bound to the button events
-
-### Separators
-- Use `null` values in the buttons array to insert visual separators
-- Separators appear as vertical lines with 24px height
-- Useful for grouping related actions
-
-### Fallback Content
-- If no buttons are provided or the array is empty, slot content is displayed
-- Allows for completely custom action bar layouts
-
-## Styling
-
-The component uses the following CSS classes:
-
-- `.uniface-action-bar` - Main container with flexbox layout
-
-### CSS Variables
-
-You can customize the appearance using CSS:
-
-```css
-.uniface-action-bar {
-  /* Custom styling */
-  background: #ffffff;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  padding: 8px;
-}
-```
-
-## Accessibility
-
-- Uses semantic button elements for proper keyboard navigation
-- Disabled buttons are properly marked and non-interactive
-- Focus management follows standard button behavior
-- Screen readers can properly identify action buttons
-
-## Common Use Cases
-
-### Toolbar Actions
-```svelte
-<ActionBar buttons={[
-  { label: 'New', icon: 'icon_google_add' },
-  { label: 'Open', icon: 'icon_google_folder_open' },
-  { label: 'Save', icon: 'icon_google_save' },
-  null,
-  { label: 'Cut', icon: 'icon_google_content_cut' },
-  { label: 'Copy', icon: 'icon_google_content_copy' },
-  { label: 'Paste', icon: 'icon_google_content_paste' }
-]} />
-```
-
-### Form Actions
-```svelte
-<ActionBar 
-  buttons={[
-    { label: 'Save', type: 'primary', handler: submit },
-    { label: 'Cancel', handler: cancel }
-  ]}
-  style="justify-content: flex-end; margin-top: 16px;"
-/>
-```
-
-### CRUD Operations
-```svelte
-<ActionBar buttons={[
-  { label: 'Create', type: 'primary', handler: create },
-  { label: 'Edit', handler: edit },
-  { label: 'Delete', type: 'danger', handler: remove },
-  null,
-  { label: 'Refresh', handler: refresh }
-]} />
-```
-
-## Best Practices
-
-1. **Group Related Actions**: Use separators to group related functionality
-2. **Consistent Icons**: Use consistent icon styles throughout your application
-3. **Button Types**: Use appropriate button types (primary for main actions, danger for destructive actions)
-4. **Disable States**: Disable buttons when actions are not available or during loading
-5. **Responsive Design**: Consider button labels and spacing for mobile devices