@ticatec/uniface-element 0.3.23 → 5.0.1

package/dist/button/TextButton_README_CN.md

@@ -1,571 +0,0 @@
-# TextButton 文本按钮组件
-
-一个极简的基于文本的按钮组件，专为细致的操作、导航链接和次要交互而设计，当完整的按钮外观可能过于突出时使用。
-
-## 功能特性
-
-- **文本优先设计**: 简洁、极简的外观，强调文本内容
-- **多种类型**: 默认、主要、次要、第三级和第四级按钮样式
-- **尺寸选项**: 大、中、小三种尺寸
-- **事件处理**: 支持点击、聚焦和失焦事件
-- **无障碍访问**: 使用语义化按钮元素，支持禁用状态
-- **防抖保护**: 内置点击防抖，防止快速重复触发
-- **自定义样式**: 灵活的样式定制
-- **插槽支持**: 通过插槽支持自定义内容
-
-## 基本用法
-
-```svelte
-<script>
-import TextButton from '@ticatec/uniface-element/TextButton';
-
-const handleClick = (event) => {
-  console.log('文本按钮被点击!', event);
-};
-</script>
-
-<TextButton 
-  label="点击我" 
-  onclick={handleClick} 
-/>
-```
-
-## 属性参数
-
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|---------|-------------|
-| `disabled` | `boolean` | `false` | 是否禁用按钮 |
-| `size` | `'big' \| 'medium' \| 'mini'` | `'medium'` | 按钮尺寸 |
-| `label` | `string` | `''` | 按钮文本标签 |
-| `type` | `'default' \| 'primary' \| 'secondary' \| 'third' \| 'forth'` | `'default'` | 按钮类型/样式 |
-| `onclick` | `MouseClickHandler` | - | 点击事件处理器 |
-| `onfocus` | `(event: FocusEvent) => void` | `() => {}` | 聚焦事件处理器 |
-| `onblur` | `(event: FocusEvent) => void` | `() => {}` | 失焦事件处理器 |
-| `style` | `string` | `''` | 自定义CSS样式 |
-
-## 按钮类型
-
-```svelte
-<!-- 默认文本按钮 -->
-<TextButton label="默认" type="default" onclick={handleClick} />
-
-<!-- 主要文本按钮 -->
-<TextButton label="主要" type="primary" onclick={handleClick} />
-
-<!-- 次要文本按钮 -->
-<TextButton label="次要" type="secondary" onclick={handleClick} />
-
-<!-- 第三级文本按钮 -->
-<TextButton label="第三级" type="third" onclick={handleClick} />
-
-<!-- 第四级文本按钮 -->
-<TextButton label="第四级" type="forth" onclick={handleClick} />
-```
-
-## 按钮尺寸
-
-```svelte
-<!-- 小型文本按钮 -->
-<TextButton label="小型" size="mini" onclick={handleClick} />
-
-<!-- 中型文本按钮（默认） -->
-<TextButton label="中型" size="medium" onclick={handleClick} />
-
-<!-- 大型文本按钮 -->
-<TextButton label="大型" size="big" onclick={handleClick} />
-```
-
-## 常见使用场景
-
-### 导航链接
-
-```svelte
-<nav class="breadcrumb">
-  <TextButton label="首页" onclick={() => goto('/')} />
-  <span class="separator">›</span>
-  <TextButton label="产品" onclick={() => goto('/products')} />
-  <span class="separator">›</span>
-  <span>当前页面</span>
-</nav>
-```
-
-### 次要操作
-
-```svelte
-<div class="action-group">
-  <Button label="保存" type="primary" onclick={handleSave} />
-  <TextButton label="取消" onclick={handleCancel} />
-  <TextButton label="保存为草稿" onclick={handleSaveDraft} />
-</div>
-```
-
-### 标签页导航
-
-```svelte
-<script>
-let activeTab = 'overview';
-
-const switchTab = (tab) => (event) => {
-  activeTab = tab;
-};
-</script>
-
-<div class="tabs">
-  <TextButton 
-    label="概览" 
-    type={activeTab === 'overview' ? 'primary' : 'default'}
-    onclick={switchTab('overview')} 
-  />
-  <TextButton 
-    label="详情" 
-    type={activeTab === 'details' ? 'primary' : 'default'}
-    onclick={switchTab('details')} 
-  />
-  <TextButton 
-    label="评价" 
-    type={activeTab === 'reviews' ? 'primary' : 'default'}
-    onclick={switchTab('reviews')} 
-  />
-</div>
-```
-
-### 菜单项
-
-```svelte
-<div class="menu">
-  <TextButton label="个人设置" onclick={openProfile} />
-  <TextButton label="账户" onclick={openAccount} />
-  <TextButton label="偏好设置" onclick={openPreferences} />
-  <TextButton label="退出登录" type="secondary" onclick={logout} />
-</div>
-```
-
-## 事件处理
-
-```svelte
-<script>
-const handleClick = (event) => {
-  console.log('文本按钮被点击:', event);
-};
-
-const handleFocus = (event) => {
-  console.log('文本按钮获得焦点:', event);
-  // 显示额外的上下文或高亮
-};
-
-const handleBlur = (event) => {
-  console.log('文本按钮失去焦点:', event);
-  // 移除高亮或上下文
-};
-</script>
-
-<TextButton 
-  label="交互文本"
-  onclick={handleClick}
-  onfocus={handleFocus}
-  onblur={handleBlur}
-/>
-```
-
-## 禁用状态
-
-```svelte
-<TextButton 
-  label="禁用操作" 
-  disabled={true}
-  onclick={handleClick} 
-/>
-```
-
-## 自定义样式
-
-```svelte
-<TextButton 
-  label="自定义样式"
-  style="
-    color: #007acc;
-    text-decoration: underline;
-    font-weight: bold;
-    padding: 4px 8px;
-  "
-  onclick={handleClick}
-/>
-```
-
-## 插槽用法
-
-```svelte
-<!-- 自定义内容替代标签 -->
-<TextButton onclick={handleCustomAction}>
-  <span class="custom-text">
-    <i class="fas fa-arrow-right"></i>
-    了解更多
-  </span>
-</TextButton>
-
-<!-- 丰富内容 -->
-<TextButton onclick={handleRichAction}>
-  <div class="rich-content">
-    <strong>高级选项</strong>
-    <small>配置详细设置</small>
-  </div>
-</TextButton>
-```
-
-## 高级示例
-
-### 条件文本按钮
-
-```svelte
-<script>
-let isEditing = false;
-
-const toggleEdit = (event) => {
-  isEditing = !isEditing;
-};
-</script>
-
-<TextButton 
-  label={isEditing ? "保存更改" : "编辑"}
-  type={isEditing ? "primary" : "default"}
-  onclick={toggleEdit}
-/>
-```
-
-### 链接样式按钮
-
-```svelte
-<TextButton 
-  label="访问我们的网站"
-  style="
-    color: #007acc;
-    text-decoration: underline;
-    background: none;
-    border: none;
-    padding: 0;
-  "
-  onclick={() => window.open('https://example.com', '_blank')}
-/>
-```
-
-### 可展开部分
-
-```svelte
-<script>
-let isExpanded = false;
-
-const toggleSection = (event) => {
-  isExpanded = !isExpanded;
-};
-</script>
-
-<div class="expandable-section">
-  <TextButton 
-    label={isExpanded ? "显示更少 ▲" : "显示更多 ▼"}
-    onclick={toggleSection}
-  />
-  
-  {#if isExpanded}
-    <div class="expanded-content">
-      <p>额外的内容放在这里...</p>
-    </div>
-  {/if}
-</div>
-```
-
-### 分页控件
-
-```svelte
-<script>
-let currentPage = 1;
-let totalPages = 10;
-
-const goToPage = (page) => (event) => {
-  if (page >= 1 && page <= totalPages) {
-    currentPage = page;
-  }
-};
-</script>
-
-<div class="pagination">
-  <TextButton 
-    label="上一页"
-    disabled={currentPage === 1}
-    onclick={goToPage(currentPage - 1)}
-  />
-  
-  <span class="page-info">第 {currentPage} 页，共 {totalPages} 页</span>
-  
-  <TextButton 
-    label="下一页"
-    disabled={currentPage === totalPages}
-    onclick={goToPage(currentPage + 1)}
-  />
-</div>
-```
-
-### 过滤选项
-
-```svelte
-<script>
-let activeFilters = new Set();
-
-const toggleFilter = (filter) => (event) => {
-  if (activeFilters.has(filter)) {
-    activeFilters.delete(filter);
-  } else {
-    activeFilters.add(filter);
-  }
-  activeFilters = activeFilters; // 触发响应式更新
-};
-</script>
-
-<div class="filters">
-  <TextButton 
-    label="全部"
-    type={activeFilters.size === 0 ? 'primary' : 'default'}
-    onclick={() => activeFilters = new Set()}
-  />
-  <TextButton 
-    label="活跃"
-    type={activeFilters.has('active') ? 'primary' : 'default'}
-    onclick={toggleFilter('active')}
-  />
-  <TextButton 
-    label="已完成"
-    type={activeFilters.has('completed') ? 'primary' : 'default'}
-    onclick={toggleFilter('completed')}
-  />
-</div>
-```
-
-### 表单操作
-
-```svelte
-<div class="form-actions">
-  <Button label="提交" type="primary" onclick={handleSubmit} />
-  
-  <div class="secondary-actions">
-    <TextButton label="保存为草稿" onclick={saveDraft} />
-    <TextButton label="预览" onclick={showPreview} />
-    <TextButton label="重置" type="secondary" onclick={resetForm} />
-  </div>
-</div>
-
-<style>
-  .form-actions {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    align-items: flex-start;
-  }
-  
-  .secondary-actions {
-    display: flex;
-    gap: 16px;
-  }
-</style>
-```
-
-### 下拉菜单触发器
-
-```svelte
-<script>
-let showDropdown = false;
-
-const toggleDropdown = (event) => {
-  showDropdown = !showDropdown;
-};
-</script>
-
-<div class="dropdown-container">
-  <TextButton 
-    label="选项 ▼"
-    type={showDropdown ? 'primary' : 'default'}
-    onclick={toggleDropdown}
-  />
-  
-  {#if showDropdown}
-    <div class="dropdown-menu">
-      <TextButton label="选项 1" onclick={selectOption1} />
-      <TextButton label="选项 2" onclick={selectOption2} />
-      <TextButton label="选项 3" onclick={selectOption3} />
-    </div>
-  {/if}
-</div>
-```
-
-## 无障碍访问
-
-TextButton组件遵循无障碍访问最佳实践：
-
-- 使用语义化的`<button>`元素
-- 支持键盘导航（Tab、Enter、Space键）
-- 正确的禁用状态处理
-- 为屏幕阅读器提供聚焦和失焦事件
-
-### 改善无障碍访问
-
-```svelte
-<!-- 为屏幕阅读器提供上下文 -->
-<TextButton 
-  label="删除"
-  onclick={handleDelete}
-  style="aria-label: 永久删除此项目"
-/>
-
-<!-- 添加角色和描述 -->
-<TextButton 
-  label="了解更多"
-  onclick={showDetails}
-  style="role: button; aria-describedby: help-text"
-/>
-<div id="help-text" style="display: none;">
-  打开关于此功能的详细信息
-</div>
-```
-
-## 样式定制
-
-组件使用以下CSS类：
-
-- `.uniface-button` - 基础按钮类
-- `.text-button` - 文本按钮特定样式
-- `.{size}` - 尺寸特定样式（big、medium、mini）
-- `.{type}` - 类型特定样式（default、primary等）
-- `.disabled` - 禁用状态样式
-
-### CSS示例
-
-```css
-.uniface-button.text-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px 8px;
-  background: transparent;
-  border: none;
-  color: #333;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  text-decoration: none;
-}
-
-.uniface-button.text-button:hover:not(.disabled) {
-  background: rgba(0, 0, 0, 0.05);
-  text-decoration: underline;
-}
-
-.uniface-button.text-button:focus {
-  outline: 2px solid #007acc;
-  outline-offset: 2px;
-}
-
-.uniface-button.text-button.primary {
-  color: #007acc;
-  font-weight: 500;
-}
-
-.uniface-button.text-button.secondary {
-  color: #666;
-}
-
-.uniface-button.text-button.big {
-  padding: 8px 12px;
-  font-size: 16px;
-}
-
-.uniface-button.text-button.mini {
-  padding: 2px 4px;
-  font-size: 12px;
-}
-
-.uniface-button.text-button.disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-```
-
-## 最佳实践
-
-1. **适当的上下文**: 将文本按钮用于次要操作和导航
-2. **清晰的标签**: 提供清楚表明操作的描述性标签
-3. **视觉层次**: 使用不同类型建立适当的视觉层次
-4. **一致的间距**: 在文本按钮之间保持一致的间距
-5. **悬停状态**: 确保悬停状态提供清晰的反馈
-6. **无障碍访问**: 始终考虑键盘导航和屏幕阅读器
-7. **上下文感知**: 确保文本按钮在其周围环境中工作良好
-
-## 常见模式
-
-### 内联操作
-
-```svelte
-<p>
-  您的更改已保存。
-  <TextButton label="撤销" onclick={undoChanges} />
-</p>
-```
-
-### 卡片操作
-
-```svelte
-<div class="card">
-  <h3>文章标题</h3>
-  <p>文章摘要...</p>
-  
-  <div class="card-actions">
-    <TextButton label="阅读更多" type="primary" onclick={readMore} />
-    <TextButton label="分享" onclick={shareArticle} />
-    <TextButton label="保存" onclick={saveArticle} />
-  </div>
-</div>
-```
-
-### 列表项操作
-
-```svelte
-<div class="list-item">
-  <span class="item-name">文档.pdf</span>
-  <div class="item-actions">
-    <TextButton label="下载" onclick={download} />
-    <TextButton label="分享" onclick={share} />
-    <TextButton label="删除" type="secondary" onclick={deleteFile} />
-  </div>
-</div>
-```
-
-## 与其他组件集成
-
-```svelte
-<!-- 与模态框 -->
-<Modal bind:open={showModal}>
-  <h2>确认操作</h2>
-  <p>您确定要继续吗？</p>
-  
-  <div class="modal-actions">
-    <Button label="确认" type="primary" onclick={confirm} />
-    <TextButton label="取消" onclick={() => showModal = false} />
-  </div>
-</Modal>
-
-<!-- 与工具提示 -->
-<Tooltip text="此操作无法撤销">
-  <TextButton label="删除全部" type="secondary" onclick={deleteAll} />
-</Tooltip>
-```
-
-## 浏览器支持
-
-TextButton组件在支持以下特性的所有现代浏览器中工作：
-- ES6+ JavaScript
-- CSS Flexbox
-- 语义化按钮元素
-
-## 性能
-
-- 最小化的样式，快速渲染
-- 内置点击防抖
-- 高效的事件处理
-- 轻量级DOM结构

package/dist/button/index.d.ts

@@ -1,8 +0,0 @@
-import Button from "./Button.svelte";
-import IconButton from "./IconButton.svelte";
-import TextButton from "./TextButton.svelte";
-import type { ButtonType } from "./ButtonType";
-export default Button;
-export { IconButton };
-export { TextButton };
-export type { ButtonType };

package/dist/card/Card.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-
-    import type CardAction from "./CardAction";
-    import CommonCardActionBar from "./CommonCardActionBar.svelte";
-
-
-    export let style: string = "";
-    export let title: string = null as unknown as string;
-    export let actions: Array<CardAction> = [];
-    export let variant: 'plain' | '3d' = 'plain';
-    export let iconColor: string | null = null;
-    export let data: any = null;
-
-</script>
-
-<div class="uniface-card" class:shadowBox={variant=='3d'}>
-    <div {style}>
-        {#if title}
-            <div class="card-header simple">
-                <span>{title}</span>
-            </div>
-        {:else if $$slots['header-bar']}
-            <div class="card-header">
-                <slot name="header-bar"/>
-            </div>
-        {/if}
-        <div class="card-content">
-            <slot/>
-        </div>
-        {#if actions && actions.length > 0}
-            <CommonCardActionBar color={iconColor} {actions} {data}/>
-        {:else }
-            {#if $$slots['action-bar']}
-                <div class="card-action-bar">
-                    <slot name="action-bar"/>
-                </div>
-            {/if}
-        {/if}
-    </div>
-</div>

package/dist/card/Card.svelte.d.ts

@@ -1,39 +0,0 @@
-import type CardAction from "./CardAction";
-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 Card: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    style?: string;
-    title?: string;
-    actions?: Array<CardAction>;
-    variant?: "plain" | "3d";
-    iconColor?: string | null;
-    data?: any;
-}, {
-    'header-bar': {};
-    default: {};
-    'action-bar': {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    'header-bar': {};
-    default: {};
-    'action-bar': {};
-}, {}, string>;
-type Card = InstanceType<typeof Card>;
-export default Card;

package/dist/card/CardAction.d.ts

@@ -1,23 +0,0 @@
-export type ActionCallback = (data: any) => void;
-export default interface CardAction {
-    /**
-     * 使用icon字体
-     */
-    icon?: string;
-    /**
-     * 直接嵌入图标
-     */
-    img?: string;
-    /**
-     * 鼠标停留的提示
-     */
-    hint?: string;
-    /**
-     *
-     */
-    disabled?: boolean;
-    /**
-     *
-     */
-    callback: ActionCallback;
-}

package/dist/card/CardHeader.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-
-    export let title: string
-
-</script>
-<div class="card-header simple">
-    <span>{title}</span>
-</div>

package/dist/card/CardHeader.svelte.d.ts

@@ -1,20 +0,0 @@
-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;
-}
-declare const CardHeader: $$__sveltets_2_IsomorphicComponent<{
-    title: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CardHeader = InstanceType<typeof CardHeader>;
-export default CardHeader;