@ticatec/uniface-element 0.2.3 → 0.3.0

package/dist/button/README_CN.md

@@ -0,0 +1,428 @@
+# Button 组件
+
+一个多功能的按钮组件，支持多种变体、尺寸和类型，具备图标支持、自定义样式和全面的事件处理。
+
+## 功能特性
+
+- **多种类型**: 默认、主要、次要、第三级和第四级按钮样式
+- **尺寸选项**: 大、中、小三种尺寸
+- **图标支持**: 可选图标显示，位置灵活
+- **变体样式**: 平面和圆角变体
+- **事件处理**: 支持点击、聚焦和失焦事件
+- **无障碍访问**: 使用语义化按钮元素，支持禁用状态
+- **防抖保护**: 内置点击防抖，防止快速重复触发
+- **自定义样式**: 灵活的样式定制
+
+## 基本用法
+
+```svelte
+<script>
+import Button from '@ticatec/uniface-element/Button';
+
+const handleClick = (event) => {
+  console.log('按钮被点击!', event);
+};
+</script>
+
+<Button 
+  label="点击我" 
+  onclick={handleClick} 
+/>
+```
+
+## 属性参数
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|---------|-------------|
+| `type` | `ButtonType` | `'default'` | 按钮类型（default、primary、secondary、third、forth） |
+| `label` | `string` | `''` | 按钮文本标签 |
+| `variant` | `'plain' \| 'round' \| ''` | `''` | 按钮变体样式 |
+| `disabled` | `boolean` | `false` | 是否禁用按钮 |
+| `style` | `string` | `''` | 自定义CSS样式 |
+| `size` | `'big' \| 'medium' \| 'mini'` | `'medium'` | 按钮尺寸 |
+| `onclick` | `(event: MouseEvent) => void` | - | 点击事件处理器 |
+| `onfocus` | `(event: FocusEvent) => void` | `() => {}` | 聚焦事件处理器 |
+| `onblur` | `(event: FocusEvent) => void` | `() => {}` | 失焦事件处理器 |
+| `icon` | `string \| null` | `null` | 图标类名 |
+
+## 按钮类型
+
+```svelte
+<!-- 默认按钮 -->
+<Button label="默认" type="default" onclick={handleClick} />
+
+<!-- 主要按钮 -->
+<Button label="主要" type="primary" onclick={handleClick} />
+
+<!-- 次要按钮 -->
+<Button label="次要" type="secondary" onclick={handleClick} />
+
+<!-- 第三级按钮 -->
+<Button label="第三级" type="third" onclick={handleClick} />
+
+<!-- 第四级按钮 -->
+<Button label="第四级" type="forth" onclick={handleClick} />
+```
+
+## 按钮尺寸
+
+```svelte
+<!-- 小型按钮 -->
+<Button label="小型" size="mini" onclick={handleClick} />
+
+<!-- 中型按钮（默认） -->
+<Button label="中型" size="medium" onclick={handleClick} />
+
+<!-- 大型按钮 -->
+<Button label="大型" size="big" onclick={handleClick} />
+```
+
+## 按钮变体
+
+```svelte
+<!-- 平面变体 -->
+<Button label="平面" variant="plain" onclick={handleClick} />
+
+<!-- 圆角变体 -->
+<Button label="圆角" variant="round" onclick={handleClick} />
+```
+
+## 带图标
+
+```svelte
+<!-- 带图标的按钮 -->
+<Button 
+  label="保存" 
+  icon="fas fa-save" 
+  onclick={handleSave} 
+/>
+
+<!-- 仅图标（使用空标签） -->
+<Button 
+  icon="fas fa-plus" 
+  onclick={handleAdd} 
+/>
+```
+
+## 事件处理
+
+```svelte
+<script>
+const handleClick = (event) => {
+  console.log('按钮被点击:', event);
+};
+
+const handleFocus = (event) => {
+  console.log('按钮获得焦点:', event);
+  // 显示工具提示或高亮
+};
+
+const handleBlur = (event) => {
+  console.log('按钮失去焦点:', event);
+  // 隐藏工具提示或移除高亮
+};
+</script>
+
+<Button 
+  label="交互按钮"
+  onclick={handleClick}
+  onfocus={handleFocus}
+  onblur={handleBlur}
+/>
+```
+
+## 禁用状态
+
+```svelte
+<Button 
+  label="禁用按钮" 
+  disabled={true}
+  onclick={handleClick} 
+/>
+```
+
+## 自定义样式
+
+```svelte
+<Button 
+  label="自定义样式"
+  style="background: linear-gradient(45deg, #ff6b6b, #4ecdc4); color: white; border: none;"
+  onclick={handleClick}
+/>
+```
+
+## 高级示例
+
+### 表单提交按钮
+
+```svelte
+<script>
+let isSubmitting = false;
+
+const handleSubmit = async (event) => {
+  isSubmitting = true;
+  try {
+    await submitForm();
+    console.log('表单提交成功');
+  } catch (error) {
+    console.error('提交失败:', error);
+  } finally {
+    isSubmitting = false;
+  }
+};
+</script>
+
+<Button 
+  label={isSubmitting ? "提交中..." : "提交"}
+  type="primary"
+  disabled={isSubmitting}
+  icon={isSubmitting ? "fas fa-spinner fa-spin" : "fas fa-check"}
+  onclick={handleSubmit}
+/>
+```
+
+### 确认操作按钮
+
+```svelte
+<script>
+let showConfirm = false;
+
+const handleDelete = (event) => {
+  if (!showConfirm) {
+    showConfirm = true;
+    setTimeout(() => showConfirm = false, 3000);
+    return;
+  }
+  
+  // 执行删除操作
+  deleteItem();
+  showConfirm = false;
+};
+</script>
+
+<Button 
+  label={showConfirm ? "确认删除？" : "删除"}
+  type={showConfirm ? "primary" : "secondary"}
+  icon="fas fa-trash"
+  onclick={handleDelete}
+  style={showConfirm ? "background-color: #dc3545;" : ""}
+/>
+```
+
+### 导航按钮
+
+```svelte
+<script>
+import { goto } from '$app/navigation';
+
+const navigateToPage = (event) => {
+  goto('/dashboard');
+};
+</script>
+
+<Button 
+  label="前往仪表板"
+  type="primary"
+  icon="fas fa-arrow-right"
+  onclick={navigateToPage}
+/>
+```
+
+### 按钮组
+
+```svelte
+<div class="button-group">
+  <Button label="保存" type="primary" onclick={handleSave} />
+  <Button label="取消" type="secondary" onclick={handleCancel} />
+  <Button label="重置" type="third" onclick={handleReset} />
+</div>
+
+<style>
+  .button-group {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+</style>
+```
+
+### 加载按钮
+
+```svelte
+<script>
+let loading = false;
+
+const handleAsyncAction = async (event) => {
+  loading = true;
+  try {
+    await performAsyncOperation();
+  } finally {
+    loading = false;
+  }
+};
+</script>
+
+<Button 
+  label={loading ? "加载中..." : "开始处理"}
+  disabled={loading}
+  icon={loading ? "fas fa-spinner fa-spin" : "fas fa-play"}
+  onclick={handleAsyncAction}
+/>
+```
+
+## 插槽用法
+
+```svelte
+<!-- 自定义内容替代标签 -->
+<Button onclick={handleClick}>
+  <div class="custom-content">
+    <i class="fas fa-star"></i>
+    <span>自定义内容</span>
+    <span class="badge">新</span>
+  </div>
+</Button>
+```
+
+## 无障碍访问
+
+Button组件遵循无障碍访问最佳实践：
+
+- 使用语义化的`<button>`元素
+- 支持键盘导航（Tab、Enter、Space键）
+- 正确的禁用状态处理
+- 为屏幕阅读器提供聚焦和失焦事件
+- 需要时提供ARIA属性
+
+```svelte
+<!-- 带ARIA标签的无障碍按钮 -->
+<Button 
+  icon="fas fa-search"
+  onclick={handleSearch}
+  style="aria-label: 搜索产品"
+/>
+```
+
+## 样式定制
+
+组件使用以下CSS类：
+
+- `.uniface-button` - 基础按钮类
+- `.common-button` - 通用按钮样式
+- `.{variant}` - 变体特定样式（plain、round）
+- `.{size}` - 尺寸特定样式（big、medium、mini）
+- `.{type}` - 类型特定样式（default、primary等）
+- `.disabled` - 禁用状态样式
+
+### CSS示例
+
+```css
+.uniface-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  background: #fff;
+  color: #333;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.uniface-button:hover:not(.disabled) {
+  background: #f5f5f5;
+}
+
+.uniface-button:focus {
+  outline: 2px solid #007acc;
+  outline-offset: 2px;
+}
+
+.uniface-button.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.uniface-button.primary {
+  background: #007acc;
+  color: white;
+  border-color: #007acc;
+}
+
+.uniface-button.round {
+  border-radius: 20px;
+}
+
+.uniface-button.big {
+  padding: 12px 24px;
+  font-size: 16px;
+}
+
+.uniface-button.mini {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+```
+
+## 最佳实践
+
+1. **一致的样式**: 在应用程序中一致地使用相同的按钮类型
+2. **清晰的标签**: 提供清楚表明操作的描述性标签
+3. **适当的类型**: 主要操作使用primary，辅助操作使用secondary
+4. **加载状态**: 为异步操作显示加载指示器
+5. **键盘导航**: 确保按钮可通过键盘访问
+6. **图标使用**: 使用图标增强理解，而非替代清晰的文本
+7. **防抖功能**: 组件包含内置防抖以防止意外双击
+
+## 常见模式
+
+### 模态框操作
+
+```svelte
+<div class="modal-actions">
+  <Button 
+    label="取消" 
+    type="secondary" 
+    onclick={closeModal} 
+  />
+  <Button 
+    label="确认" 
+    type="primary" 
+    onclick={confirmAction} 
+  />
+</div>
+```
+
+### 工具栏操作
+
+```svelte
+<div class="toolbar">
+  <Button icon="fas fa-bold" variant="plain" onclick={toggleBold} />
+  <Button icon="fas fa-italic" variant="plain" onclick={toggleItalic} />
+  <Button icon="fas fa-underline" variant="plain" onclick={toggleUnderline} />
+</div>
+```
+
+### 表单操作
+
+```svelte
+<div class="form-actions">
+  <Button label="重置" type="third" onclick={resetForm} />
+  <Button label="保存草稿" type="secondary" onclick={saveDraft} />
+  <Button label="提交" type="primary" onclick={submitForm} />
+</div>
+```
+
+## 浏览器支持
+
+Button组件在支持以下特性的所有现代浏览器中工作：
+- ES6+ JavaScript
+- CSS Flexbox
+- 语义化按钮元素
+
+## 性能
+
+- 内置点击防抖防止快速点击导致的性能问题
+- 轻量级实现，最小化重新渲染
+- 高效的事件处理和适当的清理

package/dist/button/TextButton.svelte

@@ -5,8 +5,10 @@
     export let disabled: boolean = false;
     export let size: 'big' | 'medium' | 'mini' = 'medium';
     export let label: string = '';
-    export let type: 'default' | 'primary' | 'secondary' | 'third' | 'forth' = 'default'; // 默认按钮类型
-    export let onClick: MouseClickHandler;
+    export let type: 'default' | 'primary' | 'secondary' | 'third' | 'forth' = 'default';
+    export let onclick: MouseClickHandler;
+    export let onfocus: (event: FocusEvent) => void = () => {};
+    export let onblur: (event: FocusEvent) => void = () => {};
     export let style: string = '';
 
     let enableClick: boolean = true;
@@ -14,21 +16,39 @@
     const handleClick = (e: MouseEvent) => {
         if (!disabled && enableClick) {
             enableClick = false;
-            onClick?.(e)
+            onclick?.(e)
             setTimeout(() => {
                 enableClick = true
             }, 500);
         }
         e.stopPropagation();
-        e.preventDefault();
+    }
 
+    const handleFocus = (e: FocusEvent) => {
+        if (!disabled) {
+            onfocus?.(e);
+        }
+    }
+
+    const handleBlur = (e: FocusEvent) => {
+        if (!disabled) {
+            onblur?.(e);
+        }
     }
 
 </script>
-<div class="uniface-button text-button {size} {type}" {style} class:disabled aria-hidden="true" on:click={handleClick}>
+<button 
+    class="uniface-button text-button {size} {type}" 
+    {style} 
+    class:disabled
+    {disabled}
+    on:click={handleClick}
+    on:focus={handleFocus}
+    on:blur={handleBlur}
+>
     <slot>
         {#if label != null && label.length > 0}
             <span>{label}</span>
         {/if}
     </slot>
-</div>
+</button>

package/dist/button/TextButton.svelte.d.ts

@@ -22,7 +22,9 @@ declare const TextButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Prop
     size?: "big" | "medium" | "mini";
     label?: string;
     type?: "default" | "primary" | "secondary" | "third" | "forth";
-    onClick: MouseClickHandler;
+    onclick: MouseClickHandler;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
     style?: string;
 }, {
     default: {};