@ticatec/uniface-element 0.2.3 → 0.3.0

package/dist/accordion/README.md

@@ -0,0 +1,169 @@
+# Accordion Component
+
+A flexible and customizable accordion component for collapsible content sections.
+
+## Features
+
+- **Collapsible Sections**: Expandable and collapsible content panels
+- **Two Modes**: 
+  - **Multiple Mode**: Multiple panels can be open simultaneously
+  - **Exclusive Mode**: Only one panel can be open at a time
+- **Dynamic Content**: Support for any Svelte component as panel content
+- **Custom Headers**: Optional custom header components
+- **Responsive Design**: Compact mode for smaller screens
+- **Accessible**: Built with accessibility best practices
+
+## Basic Usage
+
+```svelte
+<script>
+import Accordion, { type AccordionItem } from '@ticatec/uniface-element/Accordion';
+import MyComponent from './MyComponent.svelte';
+
+const accordionItems: AccordionItem[] = [
+  {
+    title: 'Section 1',
+    component: MyComponent,
+    params: { data: 'example' }
+  },
+  {
+    title: 'Section 2', 
+    component: MyComponent,
+    params: { data: 'another example' }
+  }
+];
+</script>
+
+<Accordion accordions={accordionItems} />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `accordions` | `AccordionItem[]` | `[]` | Array of accordion items to display |
+| `exclusive` | `boolean` | `false` | Whether only one panel can be open at a time |
+| `activeItem` | `AccordionItem` | `null` | Currently active item (used in exclusive mode) |
+| `compact` | `boolean` | `false` | Enable compact styling for smaller screens |
+| `style` | `string` | `''` | Custom CSS styles |
+| `class` | `string` | `''` | Additional CSS classes |
+
+## AccordionItem Interface
+
+```typescript
+interface AccordionItem {
+  title: string;        // Display title for the accordion header
+  component: any;       // Svelte component to render in the panel
+  params?: any;         // Props to pass to the component
+}
+```
+
+## Examples
+
+### Multiple Open Panels (Default)
+
+```svelte
+<Accordion accordions={items} />
+```
+
+### Exclusive Mode (Only One Open)
+
+```svelte
+<Accordion 
+  accordions={items} 
+  exclusive={true}
+  bind:activeItem={currentActive}
+/>
+```
+
+### Compact Mode
+
+```svelte
+<Accordion 
+  accordions={items} 
+  compact={true}
+/>
+```
+
+### Custom Styling
+
+```svelte
+<Accordion 
+  accordions={items}
+  style="border: 1px solid #ccc; border-radius: 8px;"
+  class="my-custom-accordion"
+/>
+```
+
+## Behavior
+
+### Multiple Mode
+- Users can expand/collapse any number of panels
+- Clicking a panel header toggles its open/closed state
+- No automatic closing of other panels
+
+### Exclusive Mode
+- Only one panel can be open at a time
+- Opening a new panel automatically closes the previously open panel
+- First panel opens automatically on mount if no `activeItem` is specified
+- Shows folder icon for the currently open panel
+
+## Styling
+
+The component uses the following CSS classes:
+
+- `.uniface-accordion-panel` - Main container
+- `.accordion` - Individual accordion item
+- `.header` - Accordion header (clickable)
+- `.content` - Accordion content area
+- `.compact` - Applied when compact mode is enabled
+
+## Accessibility
+
+- Headers are clickable for keyboard navigation
+- Proper ARIA attributes for screen readers
+- Visual indicators for open/closed states
+- Focus management for keyboard users
+
+## Icon Usage
+
+The component uses Google Material Icons:
+- `icon_google_keyboard_arrow_down` - Collapsed state (multiple mode)
+- `icon_google_keyboard_arrow_up` - Expanded state (multiple mode)  
+- `icon_google_folder_open` - Active state (exclusive mode)
+
+## Advanced Usage
+
+### Custom Header Component
+
+You can provide a custom header component by setting the `header` prop on AccordionItemView:
+
+```svelte
+<AccordionItemView 
+  title={item.title}
+  isOpen={isOpen}
+  header={CustomHeaderComponent}
+  onClick={handleClick}
+>
+  <!-- content -->
+</AccordionItemView>
+```
+
+### Dynamic Content
+
+Accordion items can contain any Svelte component with dynamic parameters:
+
+```javascript
+const dynamicItems = [
+  {
+    title: 'User Profile',
+    component: UserProfile,
+    params: { userId: 123, editable: true }
+  },
+  {
+    title: 'Settings',
+    component: SettingsPanel,
+    params: { theme: 'dark', language: 'en' }
+  }
+];
+```

package/dist/accordion/README_CN.md

@@ -0,0 +1,176 @@
+# 手风琴组件
+
+一个灵活且可定制的手风琴组件，用于可折叠的内容区域。
+
+## 功能特性
+
+- **可折叠区域**: 可展开和折叠的内容面板
+- **两种模式**: 
+  - **多选模式**: 多个面板可以同时打开
+  - **独占模式**: 同时只能打开一个面板
+- **动态内容**: 支持任何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/README.md

@@ -0,0 +1,275 @@
+# 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