@ticatec/uniface-element 0.2.0 → 0.2.1

package/docs/buttons/en/Button.md

@@ -0,0 +1,228 @@
+# Button Component
+
+The primary `Button` component provides comprehensive button functionality with icon and label support.
+
+## Basic Usage
+
+```svelte
+<script lang="ts">
+  import Button from '@ticatec/uniface-element/Button';
+  
+  const handleClick = async (event: MouseEvent) => {
+    console.log('Button clicked!');
+    // Perform async operation
+  };
+</script>
+
+<Button 
+  label="Save Changes"
+  type="primary"
+  icon="icon_google_save"
+  onClick={handleClick}
+/>
+```
+
+## Advanced Configuration
+
+```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 ? "Submitting..." : "Submit Form"}
+  type="primary"
+  size="big"
+  variant="round"
+  icon="icon_google_send"
+  disabled={isSubmitting}
+  style="margin: 16px;"
+  onClick={handleSubmit}
+/>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `label` | `string` | `''` | Button text label |
+| `type` | `ButtonType` | `'default'` | Visual style variant |
+| `size` | `'big' \| 'medium' \| 'mini'` | `'medium'` | Button size |
+| `variant` | `'plain' \| 'round' \| ''` | `''` | Additional style variant |
+| `icon` | `string \| null` | `null` | Icon class (e.g., Google Material Icons) |
+| `disabled` | `boolean` | `false` | Disable button interaction |
+| `style` | `string` | `''` | Custom CSS styles |
+| `onClick` | `(event: MouseEvent) => void` | - | Click event handler |
+
+## Button with Slot Content
+
+```svelte
+<Button type="secondary" onClick={handleAction}>
+  <i class="icon_google_star"></i>
+  <span>Custom Content</span>
+  <span class="badge">3</span>
+</Button>
+```
+
+## Style Variants
+
+### ButtonType Options
+
+```typescript
+type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
+```
+
+### Visual Appearance
+
+- **default**: Standard neutral button appearance
+- **primary**: Emphasizes primary actions (typically blue)
+- **secondary**: Secondary actions button (typically gray)
+- **third**: Alternative style (typically for warnings/caution)
+- **forth**: Additional style variant
+
+### Size Variants
+
+- **big**: Large button size for prominent actions
+- **medium**: Standard button size for most use cases
+- **mini**: Small button size for compact interfaces
+
+### Style Variants
+
+- **plain**: Minimalist style variant
+- **round**: Rounded corner variant
+- **'' (empty string)**: Standard styling
+
+## Icon Usage
+
+The component uses `@ticatec/uniface-google-material-icons` as the icon library. Simply pass the icon class name:
+
+```svelte
+<!-- Common Material Icons -->
+<Button icon="icon_google_save" label="Save" />
+<Button icon="icon_google_edit" label="Edit" />
+<Button icon="icon_google_delete" label="Delete" />
+<Button icon="icon_google_add" label="Add" />
+<Button icon="icon_google_remove" label="Remove" />
+<Button icon="icon_google_search" label="Search" />
+<Button icon="icon_google_settings" label="Settings" />
+<Button icon="icon_google_home" label="Home" />
+<Button icon="icon_google_check" label="Confirm" />
+<Button icon="icon_google_arrow_back" label="Back" />
+```
+
+## Best Practices
+
+### Use Appropriate Button Types
+
+Choose the correct button type based on action importance:
+
+```svelte
+<!-- Primary actions -->
+<Button label="Save" type="primary" />
+<Button label="Submit" type="primary" />
+
+<!-- Secondary actions -->
+<Button label="Cancel" type="secondary" />
+<Button label="Preview" type="secondary" />
+
+<!-- Dangerous actions -->
+<Button label="Delete" type="third" />
+<Button label="Remove" type="third" />
+```
+
+### Handle Async Operations Properly
+
+Always handle loading states and errors:
+
+```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 ? "Processing..." : "Start Process"}
+  type="primary"
+  disabled={isLoading}
+  onClick={handleAction}
+/>
+
+{#if error}
+  <div class="error">{error}</div>
+{/if}
+```
+
+### Provide Visual Feedback
+
+Use icons and appropriate styling:
+
+```svelte
+<!-- Success actions -->
+<Button label="Save" icon="icon_google_save" type="primary" />
+
+<!-- Dangerous actions -->
+<Button label="Delete" icon="icon_google_delete" type="third" />
+
+<!-- Navigation actions -->
+<Button label="Back" icon="icon_google_arrow_back" type="secondary" />
+```
+
+### Consider Mobile Responsiveness
+
+Use appropriate sizes for different screen sizes:
+
+```svelte
+<div class="responsive-buttons">
+  <!-- Desktop: normal size, Mobile: larger for touch -->
+  <Button label="Action" size="big" class="mobile-friendly" />
+</div>
+
+<style>
+  .responsive-buttons .mobile-friendly {
+    /* Responsive styles */
+  }
+  
+  @media (max-width: 768px) {
+    .responsive-buttons .mobile-friendly {
+      min-height: 44px; /* iOS recommended touch target size */
+    }
+  }
+</style>
+```
+
+## Accessibility Considerations
+
+**⚠️ Important Note**: The current button components have the following accessibility limitations:
+
+- **Non-semantic elements**: All buttons use `<div>` elements instead of `<button>`
+- **Hidden from screen readers**: All buttons have `aria-hidden="true"` by default
+- **No keyboard navigation**: Components don't support Tab navigation or Enter/Space activation
+- **No focus management**: Components don't provide focus method or support `bind:this`
+- **No ARIA attribute support**: Custom aria-* attributes cannot be passed
+
+For full accessibility compliance, consider wrapping components with proper semantic elements.

package/docs/buttons/en/IconButton.md

@@ -0,0 +1,294 @@
+# IconButton Component
+
+The `IconButton` component is designed for icon-only buttons in compact interfaces.
+
+## Basic Usage
+
+```svelte
+<script lang="ts">
+  import IconButton from '@ticatec/uniface-element/IconButton';
+  
+  const handleEdit = async (event: MouseEvent) => {
+    // Handle edit action
+  };
+</script>
+
+<IconButton 
+  icon="icon_google_edit"
+  type="primary"
+  onClick={handleEdit}
+/>
+```
+
+## Usage Examples
+
+```svelte
+<script lang="ts">
+  import IconButton from '@ticatec/uniface-element/IconButton';
+  
+  const toolbarActions = {
+    edit: async () => { /* edit logic */ },
+    delete: async () => { /* delete logic */ },
+    share: async () => { /* share logic */ },
+    favorite: async () => { /* favorite logic */ }
+  };
+</script>
+
+<!-- Toolbar icon buttons -->
+<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>
+
+<!-- Different sizes -->
+<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} />
+
+<!-- With custom slot content -->
+<IconButton type="primary" onClick={toolbarActions.edit}>
+  <i class="icon_google_edit"></i>
+</IconButton>
+
+<style>
+  .toolbar {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+</style>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `icon` | `string` | `''` | Icon class (e.g., Google Material Icons) |
+| `type` | `ButtonType` | `'default'` | Visual style variant |
+| `size` | `'big' \| 'medium' \| 'mini'` | `'medium'` | Button size |
+| `disabled` | `boolean` | `false` | Disable button interaction |
+| `style` | `string` | `''` | Custom CSS styles |
+| `onClick` | `(event: MouseEvent) => void` | - | Click event handler |
+
+## Style Variants
+
+### ButtonType Options
+
+```typescript
+type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
+```
+
+### Visual Appearance
+
+- **default**: Standard neutral button appearance
+- **primary**: Emphasizes primary actions (typically blue)
+- **secondary**: Secondary actions button (typically gray)
+- **third**: Alternative style (typically for warnings/caution)
+- **forth**: Additional style variant
+
+### Size Variants
+
+- **big**: Large icon button for prominent actions
+- **medium**: Standard icon button for most use cases
+- **mini**: Small icon button for compact interfaces
+
+## Common Icons
+
+Using `@ticatec/uniface-google-material-icons` icon library:
+
+```svelte
+<!-- Edit actions -->
+<IconButton icon="icon_google_edit" />
+<IconButton icon="icon_google_create" />
+<IconButton icon="icon_google_mode_edit" />
+
+<!-- Delete actions -->
+<IconButton icon="icon_google_delete" type="third" />
+<IconButton icon="icon_google_delete_forever" type="third" />
+<IconButton icon="icon_google_remove" type="third" />
+
+<!-- View actions -->
+<IconButton icon="icon_google_visibility" />
+<IconButton icon="icon_google_preview" />
+<IconButton icon="icon_google_search" />
+
+<!-- Settings actions -->
+<IconButton icon="icon_google_settings" />
+<IconButton icon="icon_google_tune" />
+<IconButton icon="icon_google_more_vert" />
+
+<!-- Navigation actions -->
+<IconButton icon="icon_google_arrow_back" />
+<IconButton icon="icon_google_arrow_forward" />
+<IconButton icon="icon_google_close" />
+
+<!-- Status actions -->
+<IconButton icon="icon_google_favorite" type="primary" />
+<IconButton icon="icon_google_star" type="primary" />
+<IconButton icon="icon_google_bookmark" />
+```
+
+## Use Cases
+
+IconButton component is particularly suitable for:
+
+- Data table row actions
+- Toolbar buttons
+- Card actions
+- Compact navigation controls
+- Status toggle buttons
+
+## Best Practices
+
+### Data Table Row Actions
+
+```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>
+```
+
+### Card Action Bar
+
+```svelte
+<script lang="ts">
+  import IconButton from '@ticatec/uniface-element/IconButton';
+  
+  let isFavorite = false;
+  let isBookmarked = false;
+  
+  const toggleFavorite = async () => {
+    isFavorite = !isFavorite;
+    // Save state to server
+  };
+  
+  const toggleBookmark = async () => {
+    isBookmarked = !isBookmarked;
+    // Save state to server
+  };
+  
+  const shareContent = async () => {
+    // Share functionality
+  };
+</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>
+```
+
+### Toolbar Layout
+
+```svelte
+<script lang="ts">
+  import IconButton from '@ticatec/uniface-element/IconButton';
+  
+  const toolbarActions = {
+    save: async () => { /* save */ },
+    undo: async () => { /* undo */ },
+    redo: async () => { /* redo */ },
+    settings: async () => { /* settings */ }
+  };
+</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>
+```
+
+## Click Throttling
+
+IconButton component implements automatic click throttling with a 500ms cooldown to prevent accidental double-clicks and ensure proper async operation handling.