@ticatec/uniface-element 0.2.4 → 0.3.0

package/dist/app-top-bar/README.md

@@ -0,0 +1,357 @@
+# AppTopBar Component
+
+A flexible application top bar component for displaying titles, navigation, and action elements.
+
+## Features
+
+- **Flexible Layout**: Three distinct areas - home/logo, main content, and right actions
+- **Customizable Content**: Support for both props and slot-based content
+- **Responsive Design**: Adapts to different screen sizes
+- **Simple Integration**: Easy to integrate into any application layout
+- **Custom Styling**: Supports custom CSS styles
+
+## Basic Usage
+
+```svelte
+<script>
+import AppTopBar from '@ticatec/uniface-element/AppTopBar';
+</script>
+
+<AppTopBar title="My Application" />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | - | The title text to display in the main content area |
+| `style` | `string` | `''` | Custom CSS styles for the top bar |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `home` | Content for the left side (typically logo or home button) |
+| `default` | Main content area (overrides title prop when used) |
+| `right` | Content for the right side (typically user menu, actions) |
+
+## Examples
+
+### Basic Title Bar
+
+```svelte
+<AppTopBar title="Dashboard" />
+```
+
+### With Logo and User Menu
+
+```svelte
+<AppTopBar title="My App">
+  <div slot="home">
+    <img src="/logo.png" alt="Logo" class="logo" />
+  </div>
+  
+  <div slot="right">
+    <button class="user-menu">
+      <i class="icon_google_account_circle"></i>
+      John Doe
+    </button>
+  </div>
+</AppTopBar>
+```
+
+### Custom Main Content
+
+```svelte
+<AppTopBar>
+  <div slot="home">
+    <button class="menu-toggle">
+      <i class="icon_google_menu"></i>
+    </button>
+  </div>
+  
+  <!-- Custom main content instead of title -->
+  <div class="breadcrumbs">
+    <span>Home</span>
+    <i class="icon_google_chevron_right"></i>
+    <span>Dashboard</span>
+    <i class="icon_google_chevron_right"></i>
+    <span>Reports</span>
+  </div>
+  
+  <div slot="right">
+    <button class="notifications">
+      <i class="icon_google_notifications"></i>
+      <span class="badge">3</span>
+    </button>
+    <button class="settings">
+      <i class="icon_google_settings"></i>
+    </button>
+  </div>
+</AppTopBar>
+```
+
+### Search Bar Integration
+
+```svelte
+<AppTopBar>
+  <div slot="home">
+    <h1 class="app-title">MyApp</h1>
+  </div>
+  
+  <div class="search-container">
+    <input 
+      type="search" 
+      placeholder="Search..." 
+      class="search-input"
+    />
+    <i class="icon_google_search search-icon"></i>
+  </div>
+  
+  <div slot="right">
+    <div class="user-profile">
+      <img src="/avatar.jpg" alt="User" class="avatar" />
+      <span>Welcome, User</span>
+    </div>
+  </div>
+</AppTopBar>
+```
+
+### Navigation Tabs
+
+```svelte
+<AppTopBar>
+  <div slot="home">
+    <img src="/logo.svg" alt="Company" class="company-logo" />
+  </div>
+  
+  <nav class="main-navigation">
+    <a href="/dashboard" class="nav-link active">Dashboard</a>
+    <a href="/projects" class="nav-link">Projects</a>
+    <a href="/team" class="nav-link">Team</a>
+    <a href="/reports" class="nav-link">Reports</a>
+  </nav>
+  
+  <div slot="right">
+    <button class="help-button">
+      <i class="icon_google_help"></i>
+    </button>
+    <div class="user-dropdown">
+      <button class="dropdown-trigger">
+        <i class="icon_google_account_circle"></i>
+        <i class="icon_google_arrow_drop_down"></i>
+      </button>
+    </div>
+  </div>
+</AppTopBar>
+```
+
+### With Custom Styling
+
+```svelte
+<AppTopBar 
+  title="Styled App"
+  style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1);"
+>
+  <div slot="home">
+    <i class="icon_google_apps" style="font-size: 24px;"></i>
+  </div>
+  
+  <div slot="right">
+    <button style="background: rgba(255,255,255,0.2); border: none; color: white; padding: 8px 16px; border-radius: 4px;">
+      Sign Out
+    </button>
+  </div>
+</AppTopBar>
+```
+
+## Layout Structure
+
+The AppTopBar uses a three-column layout:
+
+1. **Home Section** (left): Optional logo, menu button, or home link
+2. **Main Content** (center): Title or custom content with flex-grow
+3. **Right Section** (right): Actions, user menu, or other controls
+
+## Styling
+
+The component uses the following CSS classes:
+
+- `.uniface-top-bar` - Main container
+- `.bar-home` - Home/logo section container
+- `.main-content` - Main content area
+
+### Example CSS
+
+```css
+.uniface-top-bar {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  height: 48px;
+  background: #ffffff;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.bar-home {
+  flex: 0 0 auto;
+  margin-right: 16px;
+}
+
+.main-content {
+  flex: 1 1 auto;
+  font-weight: 500;
+}
+
+/* Custom styles for slots */
+.logo {
+  height: 32px;
+  width: auto;
+}
+
+.user-menu {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+```
+
+## Common Patterns
+
+### Application Header
+
+```svelte
+<AppTopBar title="Project Management">
+  <div slot="home">
+    <button class="sidebar-toggle" on:click={toggleSidebar}>
+      <i class="icon_google_menu"></i>
+    </button>
+  </div>
+  
+  <div slot="right">
+    <button class="new-project">
+      <i class="icon_google_add"></i>
+      New Project
+    </button>
+    <div class="user-profile">
+      <img src={user.avatar} alt={user.name} />
+      {user.name}
+    </div>
+  </div>
+</AppTopBar>
+```
+
+### E-commerce Header
+
+```svelte
+<AppTopBar>
+  <div slot="home">
+    <img src="/store-logo.png" alt="Store" class="store-logo" />
+  </div>
+  
+  <div class="search-bar">
+    <input type="search" placeholder="Search products..." />
+    <button type="submit">
+      <i class="icon_google_search"></i>
+    </button>
+  </div>
+  
+  <div slot="right">
+    <button class="cart">
+      <i class="icon_google_shopping_cart"></i>
+      <span class="cart-count">{cartItems}</span>
+    </button>
+    <button class="account">
+      <i class="icon_google_person"></i>
+      Account
+    </button>
+  </div>
+</AppTopBar>
+```
+
+### Admin Dashboard
+
+```svelte
+<AppTopBar>
+  <div slot="home">
+    <h1>Admin Panel</h1>
+  </div>
+  
+  <div class="admin-nav">
+    <a href="/admin/users">Users</a>
+    <a href="/admin/settings">Settings</a>
+    <a href="/admin/reports">Reports</a>
+  </div>
+  
+  <div slot="right">
+    <div class="admin-actions">
+      <button class="system-status">
+        <i class="icon_google_check_circle" style="color: green;"></i>
+        System OK
+      </button>
+      <button class="admin-logout">
+        <i class="icon_google_exit_to_app"></i>
+        Logout
+      </button>
+    </div>
+  </div>
+</AppTopBar>
+```
+
+## Responsive Considerations
+
+For mobile responsiveness, consider:
+
+```css
+@media (max-width: 768px) {
+  .uniface-top-bar {
+    padding: 0 8px;
+  }
+  
+  .main-content {
+    font-size: 14px;
+  }
+  
+  /* Hide less important items on mobile */
+  .hide-mobile {
+    display: none;
+  }
+}
+```
+
+## Accessibility
+
+- Use semantic HTML elements within slots
+- Ensure buttons have proper labels or aria-labels
+- Maintain adequate color contrast
+- Support keyboard navigation for interactive elements
+
+## Best Practices
+
+1. **Keep It Simple**: Don't overcrowd the top bar with too many elements
+2. **Consistent Branding**: Use consistent logo placement and styling
+3. **User Actions**: Place the most important user actions on the right side
+4. **Mobile First**: Design with mobile devices in mind
+5. **Visual Hierarchy**: Use appropriate font weights and sizes to establish hierarchy
+6. **Icon Usage**: Use consistent icon styles and sizes throughout
+
+## Integration with Layouts
+
+The AppTopBar works well with layout components:
+
+```svelte
+<SidebarLayout headerHeight="56px">
+  <AppTopBar slot="header" title="My Application">
+    <!-- topbar content -->
+  </AppTopBar>
+  
+  <div slot="sidebar">
+    <!-- sidebar content -->
+  </div>
+  
+  <!-- main content -->
+</SidebarLayout>
+```

package/dist/app-top-bar/README_CN.md

@@ -0,0 +1,365 @@
+# AppTopBar 组件
+
+一个灵活的应用程序顶部栏组件，用于显示标题、导航和操作元素。
+
+## 功能特性
+
+- **灵活布局**: 三个不同区域 - 主页/标志、主内容和右侧操作
+- **可定制内容**: 支持属性和基于插槽的内容
+- **响应式设计**: 适应不同屏幕尺寸
+- **简单集成**: 易于集成到任何应用程序布局中
+- **自定义样式**: 支持自定义CSS样式
+
+## 基本用法
+
+```svelte
+<script>
+import AppTopBar from '@ticatec/uniface-element/AppTopBar';
+</script>
+
+<AppTopBar title="我的应用程序" />
+```
+
+## 属性参数
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|---------|-------------|
+| `title` | `string` | - | 在主内容区域显示的标题文本 |
+| `style` | `string` | `''` | 顶部栏的自定义CSS样式 |
+
+## 插槽
+
+| 插槽 | 描述 |
+|------|-------------|
+| `home` | 左侧内容（通常是标志或主页按钮） |
+| `default` | 主内容区域（使用时覆盖title属性） |
+| `right` | 右侧内容（通常是用户菜单、操作） |
+
+## 使用示例
+
+### 基础标题栏
+
+```svelte
+<AppTopBar title="仪表板" />
+```
+
+### 带标志和用户菜单
+
+```svelte
+<AppTopBar title="我的应用">
+  <div slot="home">
+    <img src="/logo.png" alt="标志" class="logo" />
+  </div>
+  
+  <div slot="right">
+    <button class="user-menu">
+      <i class="icon_google_account_circle"></i>
+      张三
+    </button>
+  </div>
+</AppTopBar>
+```
+
+### 自定义主内容
+
+```svelte
+<AppTopBar>
+  <div slot="home">
+    <button class="menu-toggle">
+      <i class="icon_google_menu"></i>
+    </button>
+  </div>
+  
+  <!-- 自定义主内容而不是标题 -->
+  <div class="breadcrumbs">
+    <span>首页</span>
+    <i class="icon_google_chevron_right"></i>
+    <span>仪表板</span>
+    <i class="icon_google_chevron_right"></i>
+    <span>报告</span>
+  </div>
+  
+  <div slot="right">
+    <button class="notifications">
+      <i class="icon_google_notifications"></i>
+      <span class="badge">3</span>
+    </button>
+    <button class="settings">
+      <i class="icon_google_settings"></i>
+    </button>
+  </div>
+</AppTopBar>
+```
+
+### 搜索栏集成
+
+```svelte
+<AppTopBar>
+  <div slot="home">
+    <h1 class="app-title">我的应用</h1>
+  </div>
+  
+  <div class="search-container">
+    <input 
+      type="search" 
+      placeholder="搜索..." 
+      class="search-input"
+    />
+    <i class="icon_google_search search-icon"></i>
+  </div>
+  
+  <div slot="right">
+    <div class="user-profile">
+      <img src="/avatar.jpg" alt="用户" class="avatar" />
+      <span>欢迎，用户</span>
+    </div>
+  </div>
+</AppTopBar>
+```
+
+### 导航标签
+
+```svelte
+<AppTopBar>
+  <div slot="home">
+    <img src="/logo.svg" alt="公司" class="company-logo" />
+  </div>
+  
+  <nav class="main-navigation">
+    <a href="/dashboard" class="nav-link active">仪表板</a>
+    <a href="/projects" class="nav-link">项目</a>
+    <a href="/team" class="nav-link">团队</a>
+    <a href="/reports" class="nav-link">报告</a>
+  </nav>
+  
+  <div slot="right">
+    <button class="help-button">
+      <i class="icon_google_help"></i>
+    </button>
+    <div class="user-dropdown">
+      <button class="dropdown-trigger">
+        <i class="icon_google_account_circle"></i>
+        <i class="icon_google_arrow_drop_down"></i>
+      </button>
+    </div>
+  </div>
+</AppTopBar>
+```
+
+### 自定义样式
+
+```svelte
+<AppTopBar 
+  title="样式化应用"
+  style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1);"
+>
+  <div slot="home">
+    <i class="icon_google_apps" style="font-size: 24px;"></i>
+  </div>
+  
+  <div slot="right">
+    <button style="background: rgba(255,255,255,0.2); border: none; color: white; padding: 8px 16px; border-radius: 4px;">
+      退出登录
+    </button>
+  </div>
+</AppTopBar>
+```
+
+## 布局结构
+
+AppTopBar使用三列布局：
+
+1. **主页区域**（左）: 可选的标志、菜单按钮或主页链接
+2. **主内容**（中）: 标题或自定义内容，具有flex-grow
+3. **右侧区域**（右）: 操作、用户菜单或其他控件
+
+## 样式定制
+
+组件使用以下CSS类：
+
+- `.uniface-top-bar` - 主容器
+- `.bar-home` - 主页/标志区域容器
+- `.main-content` - 主内容区域
+
+### CSS示例
+
+```css
+.uniface-top-bar {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  height: 48px;
+  background: #ffffff;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.bar-home {
+  flex: 0 0 auto;
+  margin-right: 16px;
+}
+
+.main-content {
+  flex: 1 1 auto;
+  font-weight: 500;
+}
+
+/* 插槽的自定义样式 */
+.logo {
+  height: 32px;
+  width: auto;
+}
+
+.user-menu {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+```
+
+## 常见模式
+
+### 应用程序标题栏
+
+```svelte
+<AppTopBar title="项目管理">
+  <div slot="home">
+    <button class="sidebar-toggle" on:click={toggleSidebar}>
+      <i class="icon_google_menu"></i>
+    </button>
+  </div>
+  
+  <div slot="right">
+    <button class="new-project">
+      <i class="icon_google_add"></i>
+      新建项目
+    </button>
+    <div class="user-profile">
+      <img src={user.avatar} alt={user.name} />
+      {user.name}
+    </div>
+  </div>
+</AppTopBar>
+```
+
+### 电商标题栏
+
+```svelte
+<AppTopBar>
+  <div slot="home">
+    <img src="/store-logo.png" alt="商店" class="store-logo" />
+  </div>
+  
+  <div class="search-bar">
+    <input type="search" placeholder="搜索商品..." />
+    <button type="submit">
+      <i class="icon_google_search"></i>
+    </button>
+  </div>
+  
+  <div slot="right">
+    <button class="cart">
+      <i class="icon_google_shopping_cart"></i>
+      <span class="cart-count">{cartItems}</span>
+    </button>
+    <button class="account">
+      <i class="icon_google_person"></i>
+      账户
+    </button>
+  </div>
+</AppTopBar>
+```
+
+### 管理后台
+
+```svelte
+<AppTopBar>
+  <div slot="home">
+    <h1>管理面板</h1>
+  </div>
+  
+  <div class="admin-nav">
+    <a href="/admin/users">用户</a>
+    <a href="/admin/settings">设置</a>
+    <a href="/admin/reports">报告</a>
+  </div>
+  
+  <div slot="right">
+    <div class="admin-actions">
+      <button class="system-status">
+        <i class="icon_google_check_circle" style="color: green;"></i>
+        系统正常
+      </button>
+      <button class="admin-logout">
+        <i class="icon_google_exit_to_app"></i>
+        退出登录
+      </button>
+    </div>
+  </div>
+</AppTopBar>
+```
+
+## 响应式考虑
+
+对于移动端响应式，考虑：
+
+```css
+@media (max-width: 768px) {
+  .uniface-top-bar {
+    padding: 0 8px;
+  }
+  
+  .main-content {
+    font-size: 14px;
+  }
+  
+  /* 在移动设备上隐藏不重要的项目 */
+  .hide-mobile {
+    display: none;
+  }
+}
+```
+
+## 无障碍访问
+
+- 在插槽中使用语义化HTML元素
+- 确保按钮有适当的标签或aria-labels
+- 保持足够的颜色对比度
+- 支持交互元素的键盘导航
+
+## 最佳实践
+
+1. **保持简洁**: 不要在顶部栏中放置过多元素
+2. **一致的品牌**: 使用一致的标志放置和样式
+3. **用户操作**: 将最重要的用户操作放在右侧
+4. **移动优先**: 以移动设备为设计出发点
+5. **视觉层次**: 使用适当的字体粗细和大小建立层次
+6. **图标使用**: 在整个界面中使用一致的图标样式和大小
+
+## 与布局组件集成
+
+AppTopBar与布局组件配合良好：
+
+```svelte
+<SidebarLayout headerHeight="56px">
+  <AppTopBar slot="header" title="我的应用程序">
+    <!-- 顶部栏内容 -->
+  </AppTopBar>
+  
+  <div slot="sidebar">
+    <!-- 侧边栏内容 -->
+  </div>
+  
+  <!-- 主内容 -->
+</SidebarLayout>
+```
+
+## 注意事项
+
+- 确保在不同屏幕尺寸下测试布局
+- 考虑长标题的文本截断处理
+- 在设计时考虑不同语言的文本长度变化
+- 为移动设备优化触摸交互区域
+- 保持与整体应用程序设计风格的一致性