@ticatec/uniface-element 0.3.22 → 5.0.0

package/docs/buttons/cn/Button.md

@@ -1,228 +0,0 @@
-# Button 组件
-
-主要的 `Button` 组件提供了支持图标和标签的全面按钮功能。
-
-## 基础用法
-
-```svelte
-<script lang="ts">
-  import Button from '@ticatec/uniface-element/Button';
-  
-  const handleClick = async (event: MouseEvent) => {
-    console.log('按钮被点击!');
-    // 执行异步操作
-  };
-</script>
-
-<Button 
-  label="保存更改"
-  type="primary"
-  icon="icon_google_save"
-  onClick={handleClick}
-/>
-```
-
-## 高级配置
-
-```svelte
-<script lang="ts">
-  import Button from '@ticatec/uniface-element/Button';
-  import type { ButtonType } from '@ticatec/uniface-element';
-  
-  let isSubmitting = false;
-  
-  const handleSubmit = async (event: MouseEvent) => {
-    isSubmitting = true;
-    try {
-      await submitForm();
-    } finally {
-      isSubmitting = false;
-    }
-  };
-</script>
-
-<Button 
-  label={isSubmitting ? "提交中..." : "提交表单"}
-  type="primary"
-  size="big"
-  variant="round"
-  icon="icon_google_send"
-  disabled={isSubmitting}
-  style="margin: 16px;"
-  onClick={handleSubmit}
-/>
-```
-
-## 属性
-
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|--------|------|
-| `label` | `string` | `''` | 按钮文本标签 |
-| `type` | `ButtonType` | `'default'` | 视觉样式变体 |
-| `size` | `'big' \| 'medium' \| 'mini'` | `'medium'` | 按钮大小 |
-| `variant` | `'plain' \| 'round' \| ''` | `''` | 附加样式变体 |
-| `icon` | `string \| null` | `null` | 图标类（如 Google Material Icons） |
-| `disabled` | `boolean` | `false` | 禁用按钮交互 |
-| `style` | `string` | `''` | 自定义 CSS 样式 |
-| `onClick` | `(event: MouseEvent) => void` | - | 点击事件处理器 |
-
-## 带插槽内容的按钮
-
-```svelte
-<Button type="secondary" onClick={handleAction}>
-  <i class="icon_google_star"></i>
-  <span>自定义内容</span>
-  <span class="badge">3</span>
-</Button>
-```
-
-## 样式变体
-
-### ButtonType 选项
-
-```typescript
-type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
-```
-
-### 视觉外观
-
-- **default**: 标准中性按钮外观
-- **primary**: 强调主要操作的按钮（通常为蓝色）
-- **secondary**: 次要操作按钮（通常为灰色）
-- **third**: 替代样式（通常用于警告/注意）
-- **forth**: 附加样式变体
-
-### 大小变体
-
-- **big**: 大按钮尺寸，用于突出操作
-- **medium**: 标准按钮尺寸，适用于大多数使用场景
-- **mini**: 小按钮尺寸，用于紧凑界面
-
-### 样式变体
-
-- **plain**: 最小化样式变体
-- **round**: 圆角变体
-- **'' (空字符串)**: 标准样式
-
-## 图标使用
-
-组件使用 `@ticatec/uniface-google-material-icons` 作为图标库。只需传入图标类名：
-
-```svelte
-<!-- 常用 Material Icons -->
-<Button icon="icon_google_save" label="保存" />
-<Button icon="icon_google_edit" label="编辑" />
-<Button icon="icon_google_delete" label="删除" />
-<Button icon="icon_google_add" label="添加" />
-<Button icon="icon_google_remove" label="移除" />
-<Button icon="icon_google_search" label="搜索" />
-<Button icon="icon_google_settings" label="设置" />
-<Button icon="icon_google_home" label="主页" />
-<Button icon="icon_google_check" label="确认" />
-<Button icon="icon_google_arrow_back" label="返回" />
-```
-
-## 最佳实践
-
-### 使用合适的按钮类型
-
-根据操作重要性选择正确的按钮类型：
-
-```svelte
-<!-- 主要操作 -->
-<Button label="保存" type="primary" />
-<Button label="提交" type="primary" />
-
-<!-- 次要操作 -->
-<Button label="取消" type="secondary" />
-<Button label="预览" type="secondary" />
-
-<!-- 危险操作 -->
-<Button label="删除" type="third" />
-<Button label="移除" type="third" />
-```
-
-### 正确处理异步操作
-
-始终处理加载状态和错误：
-
-```svelte
-<script lang="ts">
-  let isLoading = false;
-  let error = null;
-  
-  const handleAction = async () => {
-    isLoading = true;
-    error = null;
-    
-    try {
-      await performAction();
-    } catch (err) {
-      error = err.message;
-    } finally {
-      isLoading = false;
-    }
-  };
-</script>
-
-<Button 
-  label={isLoading ? "处理中..." : "开始处理"}
-  type="primary"
-  disabled={isLoading}
-  onClick={handleAction}
-/>
-
-{#if error}
-  <div class="error">{error}</div>
-{/if}
-```
-
-### 提供视觉反馈
-
-使用图标和适当的样式：
-
-```svelte
-<!-- 成功操作 -->
-<Button label="保存" icon="icon_google_save" type="primary" />
-
-<!-- 危险操作 -->
-<Button label="删除" icon="icon_google_delete" type="third" />
-
-<!-- 导航操作 -->
-<Button label="返回" icon="icon_google_arrow_back" type="secondary" />
-```
-
-### 考虑移动端响应式
-
-为不同屏幕尺寸使用合适的大小：
-
-```svelte
-<div class="responsive-buttons">
-  <!-- 桌面端: 普通大小，移动端: 更大以适应触摸 -->
-  <Button label="操作" size="big" class="mobile-friendly" />
-</div>
-
-<style>
-  .responsive-buttons .mobile-friendly {
-    /* 响应式样式 */
-  }
-  
-  @media (max-width: 768px) {
-    .responsive-buttons .mobile-friendly {
-      min-height: 44px; /* iOS 推荐的触摸目标大小 */
-    }
-  }
-</style>
-```
-
-## 无障碍性注意事项
-
-**⚠️ 重要提示**：当前的按钮组件存在以下无障碍性限制：
-
-- **非语义化元素**：所有按钮都使用 `<div>` 元素而不是 `<button>`
-- **对屏幕阅读器隐藏**：所有按钮默认都有 `aria-hidden="true"`
-- **无键盘导航**：组件不支持 Tab 导航或 Enter/Space 激活
-- **无焦点管理**：组件不提供 focus 方法或支持 `bind:this`
-- **无 ARIA 属性支持**：自定义 aria-* 属性无法传递
-
-如需完全的无障碍性支持，请考虑使用正确的语义化元素包装组件。

package/docs/buttons/cn/IconButton.md

@@ -1,294 +0,0 @@
-# IconButton 组件
-
-`IconButton` 组件专为紧凑界面中的纯图标按钮而设计。
-
-## 基础用法
-
-```svelte
-<script lang="ts">
-  import IconButton from '@ticatec/uniface-element/IconButton';
-  
-  const handleEdit = async (event: MouseEvent) => {
-    // 处理编辑操作
-  };
-</script>
-
-<IconButton 
-  icon="icon_google_edit"
-  type="primary"
-  onClick={handleEdit}
-/>
-```
-
-## 使用示例
-
-```svelte
-<script lang="ts">
-  import IconButton from '@ticatec/uniface-element/IconButton';
-  
-  const toolbarActions = {
-    edit: async () => { /* 编辑逻辑 */ },
-    delete: async () => { /* 删除逻辑 */ },
-    share: async () => { /* 分享逻辑 */ },
-    favorite: async () => { /* 收藏逻辑 */ }
-  };
-</script>
-
-<!-- 工具栏图标按钮 -->
-<div class="toolbar">
-  <IconButton icon="icon_google_edit" type="default" onClick={toolbarActions.edit} />
-  <IconButton icon="icon_google_delete" type="third" onClick={toolbarActions.delete} />
-  <IconButton icon="icon_google_share" type="secondary" onClick={toolbarActions.share} />
-  <IconButton icon="icon_google_favorite" type="primary" onClick={toolbarActions.favorite} />
-</div>
-
-<!-- 不同大小 -->
-<IconButton icon="icon_google_settings" size="big" onClick={toolbarActions.edit} />
-<IconButton icon="icon_google_settings" size="medium" onClick={toolbarActions.edit} />
-<IconButton icon="icon_google_settings" size="mini" onClick={toolbarActions.edit} />
-
-<!-- 带自定义插槽内容 -->
-<IconButton type="primary" onClick={toolbarActions.edit}>
-  <i class="icon_google_edit"></i>
-</IconButton>
-
-<style>
-  .toolbar {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-</style>
-```
-
-## 属性
-
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|--------|------|
-| `icon` | `string` | `''` | 图标类（如 Google Material Icons） |
-| `type` | `ButtonType` | `'default'` | 视觉样式变体 |
-| `size` | `'big' \| 'medium' \| 'mini'` | `'medium'` | 按钮大小 |
-| `disabled` | `boolean` | `false` | 禁用按钮交互 |
-| `style` | `string` | `''` | 自定义 CSS 样式 |
-| `onClick` | `(event: MouseEvent) => void` | - | 点击事件处理器 |
-
-## 样式变体
-
-### ButtonType 选项
-
-```typescript
-type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
-```
-
-### 视觉外观
-
-- **default**: 标准中性按钮外观
-- **primary**: 强调主要操作的按钮（通常为蓝色）
-- **secondary**: 次要操作按钮（通常为灰色）
-- **third**: 替代样式（通常用于警告/注意）
-- **forth**: 附加样式变体
-
-### 大小变体
-
-- **big**: 大图标按钮，用于突出操作
-- **medium**: 标准图标按钮，适用于大多数使用场景
-- **mini**: 小图标按钮，用于紧凑界面
-
-## 常用图标
-
-使用 `@ticatec/uniface-google-material-icons` 图标库：
-
-```svelte
-<!-- 编辑操作 -->
-<IconButton icon="icon_google_edit" />
-<IconButton icon="icon_google_create" />
-<IconButton icon="icon_google_mode_edit" />
-
-<!-- 删除操作 -->
-<IconButton icon="icon_google_delete" type="third" />
-<IconButton icon="icon_google_delete_forever" type="third" />
-<IconButton icon="icon_google_remove" type="third" />
-
-<!-- 查看操作 -->
-<IconButton icon="icon_google_visibility" />
-<IconButton icon="icon_google_preview" />
-<IconButton icon="icon_google_search" />
-
-<!-- 设置操作 -->
-<IconButton icon="icon_google_settings" />
-<IconButton icon="icon_google_tune" />
-<IconButton icon="icon_google_more_vert" />
-
-<!-- 导航操作 -->
-<IconButton icon="icon_google_arrow_back" />
-<IconButton icon="icon_google_arrow_forward" />
-<IconButton icon="icon_google_close" />
-
-<!-- 状态操作 -->
-<IconButton icon="icon_google_favorite" type="primary" />
-<IconButton icon="icon_google_star" type="primary" />
-<IconButton icon="icon_google_bookmark" />
-```
-
-## 使用场景
-
-IconButton 组件特别适合以下场景：
-
-- 数据表格行操作
-- 工具栏按钮
-- 卡片操作
-- 紧凑的导航控件
-- 状态切换按钮
-
-## 最佳实践
-
-### 数据表格行操作
-
-```svelte
-<script lang="ts">
-  import IconButton from '@ticatec/uniface-element/IconButton';
-  
-  export let item: any;
-  export let onEdit: (item: any) => Promise<void>;
-  export let onDelete: (item: any) => Promise<void>;
-  export let onView: (item: any) => Promise<void>;
-</script>
-
-<div class="table-actions">
-  <IconButton 
-    icon="icon_google_visibility" 
-    type="default" 
-    onClick={async () => await onView(item)} 
-  />
-  <IconButton 
-    icon="icon_google_edit" 
-    type="primary" 
-    onClick={async () => await onEdit(item)} 
-  />
-  <IconButton 
-    icon="icon_google_delete" 
-    type="third" 
-    onClick={async () => await onDelete(item)} 
-  />
-</div>
-
-<style>
-  .table-actions {
-    display: flex;
-    gap: 4px;
-  }
-</style>
-```
-
-### 卡片操作栏
-
-```svelte
-<script lang="ts">
-  import IconButton from '@ticatec/uniface-element/IconButton';
-  
-  let isFavorite = false;
-  let isBookmarked = false;
-  
-  const toggleFavorite = async () => {
-    isFavorite = !isFavorite;
-    // 保存状态到服务器
-  };
-  
-  const toggleBookmark = async () => {
-    isBookmarked = !isBookmarked;
-    // 保存状态到服务器
-  };
-  
-  const shareContent = async () => {
-    // 分享功能
-  };
-</script>
-
-<div class="card-actions">
-  <IconButton 
-    icon={isFavorite ? "icon_google_favorite" : "icon_google_favorite_border"}
-    type={isFavorite ? "primary" : "default"}
-    onClick={toggleFavorite}
-  />
-  <IconButton 
-    icon={isBookmarked ? "icon_google_bookmark" : "icon_google_bookmark_border"}
-    type={isBookmarked ? "primary" : "default"}
-    onClick={toggleBookmark}
-  />
-  <IconButton 
-    icon="icon_google_share"
-    type="secondary"
-    onClick={shareContent}
-  />
-</div>
-
-<style>
-  .card-actions {
-    display: flex;
-    gap: 8px;
-    justify-content: flex-end;
-    padding: 8px 0;
-  }
-</style>
-```
-
-### 工具栏布局
-
-```svelte
-<script lang="ts">
-  import IconButton from '@ticatec/uniface-element/IconButton';
-  
-  const toolbarActions = {
-    save: async () => { /* 保存 */ },
-    undo: async () => { /* 撤销 */ },
-    redo: async () => { /* 重做 */ },
-    settings: async () => { /* 设置 */ }
-  };
-</script>
-
-<div class="editor-toolbar">
-  <div class="toolbar-group">
-    <IconButton icon="icon_google_save" type="primary" onClick={toolbarActions.save} />
-  </div>
-  
-  <div class="toolbar-divider"></div>
-  
-  <div class="toolbar-group">
-    <IconButton icon="icon_google_undo" onClick={toolbarActions.undo} />
-    <IconButton icon="icon_google_redo" onClick={toolbarActions.redo} />
-  </div>
-  
-  <div class="toolbar-divider"></div>
-  
-  <div class="toolbar-group">
-    <IconButton icon="icon_google_settings" onClick={toolbarActions.settings} />
-  </div>
-</div>
-
-<style>
-  .editor-toolbar {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px;
-    border-bottom: 1px solid #e0e0e0;
-    background: #f8f9fa;
-  }
-  
-  .toolbar-group {
-    display: flex;
-    gap: 4px;
-  }
-  
-  .toolbar-divider {
-    width: 1px;
-    height: 24px;
-    background: #d0d0d0;
-    margin: 0 4px;
-  }
-</style>
-```
-
-## 点击节流
-
-IconButton 组件实现了自动点击节流，具有 500ms 冷却时间，以防止意外的双击并确保正确的异步操作处理。