@ticatec/uniface-element 0.2.3 → 0.3.0

package/dist/button/TextButton_README.md

@@ -0,0 +1,571 @@
+# TextButton Component
+
+A minimalist text-based button component designed for subtle actions, navigation links, and secondary interactions where a full button appearance might be too prominent.
+
+## Features
+
+- **Text-Focused Design**: Clean, minimal appearance emphasizing text content
+- **Multiple Types**: Default, primary, secondary, third, and forth button styles
+- **Size Options**: Big, medium, and mini sizes
+- **Event Handling**: Click, focus, and blur event support
+- **Accessibility**: Proper semantic button element with disabled state
+- **Debounce Protection**: Built-in click debouncing to prevent rapid firing
+- **Custom Styling**: Flexible style customization
+- **Slot Support**: Custom content via slots
+
+## Basic Usage
+
+```svelte
+<script>
+import TextButton from '@ticatec/uniface-element/TextButton';
+
+const handleClick = (event) => {
+  console.log('Text button clicked!', event);
+};
+</script>
+
+<TextButton 
+  label="Click Me" 
+  onclick={handleClick} 
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `disabled` | `boolean` | `false` | Whether the button is disabled |
+| `size` | `'big' \| 'medium' \| 'mini'` | `'medium'` | Button size |
+| `label` | `string` | `''` | Button text label |
+| `type` | `'default' \| 'primary' \| 'secondary' \| 'third' \| 'forth'` | `'default'` | Button type/style |
+| `onclick` | `MouseClickHandler` | - | Click event handler |
+| `onfocus` | `(event: FocusEvent) => void` | `() => {}` | Focus event handler |
+| `onblur` | `(event: FocusEvent) => void` | `() => {}` | Blur event handler |
+| `style` | `string` | `''` | Custom CSS styles |
+
+## Button Types
+
+```svelte
+<!-- Default text button -->
+<TextButton label="Default" type="default" onclick={handleClick} />
+
+<!-- Primary text button -->
+<TextButton label="Primary" type="primary" onclick={handleClick} />
+
+<!-- Secondary text button -->
+<TextButton label="Secondary" type="secondary" onclick={handleClick} />
+
+<!-- Third level text button -->
+<TextButton label="Third" type="third" onclick={handleClick} />
+
+<!-- Fourth level text button -->
+<TextButton label="Fourth" type="forth" onclick={handleClick} />
+```
+
+## Button Sizes
+
+```svelte
+<!-- Mini text button -->
+<TextButton label="Mini" size="mini" onclick={handleClick} />
+
+<!-- Medium text button (default) -->
+<TextButton label="Medium" size="medium" onclick={handleClick} />
+
+<!-- Big text button -->
+<TextButton label="Big" size="big" onclick={handleClick} />
+```
+
+## Common Use Cases
+
+### Navigation Links
+
+```svelte
+<nav class="breadcrumb">
+  <TextButton label="Home" onclick={() => goto('/')} />
+  <span class="separator">›</span>
+  <TextButton label="Products" onclick={() => goto('/products')} />
+  <span class="separator">›</span>
+  <span>Current Page</span>
+</nav>
+```
+
+### Secondary Actions
+
+```svelte
+<div class="action-group">
+  <Button label="Save" type="primary" onclick={handleSave} />
+  <TextButton label="Cancel" onclick={handleCancel} />
+  <TextButton label="Save as Draft" onclick={handleSaveDraft} />
+</div>
+```
+
+### Tab Navigation
+
+```svelte
+<script>
+let activeTab = 'overview';
+
+const switchTab = (tab) => (event) => {
+  activeTab = tab;
+};
+</script>
+
+<div class="tabs">
+  <TextButton 
+    label="Overview" 
+    type={activeTab === 'overview' ? 'primary' : 'default'}
+    onclick={switchTab('overview')} 
+  />
+  <TextButton 
+    label="Details" 
+    type={activeTab === 'details' ? 'primary' : 'default'}
+    onclick={switchTab('details')} 
+  />
+  <TextButton 
+    label="Reviews" 
+    type={activeTab === 'reviews' ? 'primary' : 'default'}
+    onclick={switchTab('reviews')} 
+  />
+</div>
+```
+
+### Menu Items
+
+```svelte
+<div class="menu">
+  <TextButton label="Profile Settings" onclick={openProfile} />
+  <TextButton label="Account" onclick={openAccount} />
+  <TextButton label="Preferences" onclick={openPreferences} />
+  <TextButton label="Log Out" type="secondary" onclick={logout} />
+</div>
+```
+
+## Event Handling
+
+```svelte
+<script>
+const handleClick = (event) => {
+  console.log('Text button clicked:', event);
+};
+
+const handleFocus = (event) => {
+  console.log('Text button focused:', event);
+  // Show additional context or highlight
+};
+
+const handleBlur = (event) => {
+  console.log('Text button blurred:', event);
+  // Remove highlight or context
+};
+</script>
+
+<TextButton 
+  label="Interactive Text"
+  onclick={handleClick}
+  onfocus={handleFocus}
+  onblur={handleBlur}
+/>
+```
+
+## Disabled State
+
+```svelte
+<TextButton 
+  label="Disabled Action" 
+  disabled={true}
+  onclick={handleClick} 
+/>
+```
+
+## Custom Styling
+
+```svelte
+<TextButton 
+  label="Custom Styled"
+  style="
+    color: #007acc;
+    text-decoration: underline;
+    font-weight: bold;
+    padding: 4px 8px;
+  "
+  onclick={handleClick}
+/>
+```
+
+## Slot Usage
+
+```svelte
+<!-- Custom content instead of label -->
+<TextButton onclick={handleCustomAction}>
+  <span class="custom-text">
+    <i class="fas fa-arrow-right"></i>
+    Learn More
+  </span>
+</TextButton>
+
+<!-- Rich content -->
+<TextButton onclick={handleRichAction}>
+  <div class="rich-content">
+    <strong>Advanced Options</strong>
+    <small>Configure detailed settings</small>
+  </div>
+</TextButton>
+```
+
+## Advanced Examples
+
+### Conditional Text Button
+
+```svelte
+<script>
+let isEditing = false;
+
+const toggleEdit = (event) => {
+  isEditing = !isEditing;
+};
+</script>
+
+<TextButton 
+  label={isEditing ? "Save Changes" : "Edit"}
+  type={isEditing ? "primary" : "default"}
+  onclick={toggleEdit}
+/>
+```
+
+### Link-Style Button
+
+```svelte
+<TextButton 
+  label="Visit our website"
+  style="
+    color: #007acc;
+    text-decoration: underline;
+    background: none;
+    border: none;
+    padding: 0;
+  "
+  onclick={() => window.open('https://example.com', '_blank')}
+/>
+```
+
+### Expandable Section
+
+```svelte
+<script>
+let isExpanded = false;
+
+const toggleSection = (event) => {
+  isExpanded = !isExpanded;
+};
+</script>
+
+<div class="expandable-section">
+  <TextButton 
+    label={isExpanded ? "Show Less ▲" : "Show More ▼"}
+    onclick={toggleSection}
+  />
+  
+  {#if isExpanded}
+    <div class="expanded-content">
+      <p>Additional content goes here...</p>
+    </div>
+  {/if}
+</div>
+```
+
+### Pagination Controls
+
+```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="Previous"
+    disabled={currentPage === 1}
+    onclick={goToPage(currentPage - 1)}
+  />
+  
+  <span class="page-info">Page {currentPage} of {totalPages}</span>
+  
+  <TextButton 
+    label="Next"
+    disabled={currentPage === totalPages}
+    onclick={goToPage(currentPage + 1)}
+  />
+</div>
+```
+
+### Filter Options
+
+```svelte
+<script>
+let activeFilters = new Set();
+
+const toggleFilter = (filter) => (event) => {
+  if (activeFilters.has(filter)) {
+    activeFilters.delete(filter);
+  } else {
+    activeFilters.add(filter);
+  }
+  activeFilters = activeFilters; // Trigger reactivity
+};
+</script>
+
+<div class="filters">
+  <TextButton 
+    label="All"
+    type={activeFilters.size === 0 ? 'primary' : 'default'}
+    onclick={() => activeFilters = new Set()}
+  />
+  <TextButton 
+    label="Active"
+    type={activeFilters.has('active') ? 'primary' : 'default'}
+    onclick={toggleFilter('active')}
+  />
+  <TextButton 
+    label="Completed"
+    type={activeFilters.has('completed') ? 'primary' : 'default'}
+    onclick={toggleFilter('completed')}
+  />
+</div>
+```
+
+### Form Actions
+
+```svelte
+<div class="form-actions">
+  <Button label="Submit" type="primary" onclick={handleSubmit} />
+  
+  <div class="secondary-actions">
+    <TextButton label="Save as Draft" onclick={saveDraft} />
+    <TextButton label="Preview" onclick={showPreview} />
+    <TextButton label="Reset" 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>
+```
+
+### Dropdown Menu Trigger
+
+```svelte
+<script>
+let showDropdown = false;
+
+const toggleDropdown = (event) => {
+  showDropdown = !showDropdown;
+};
+</script>
+
+<div class="dropdown-container">
+  <TextButton 
+    label="Options ▼"
+    type={showDropdown ? 'primary' : 'default'}
+    onclick={toggleDropdown}
+  />
+  
+  {#if showDropdown}
+    <div class="dropdown-menu">
+      <TextButton label="Option 1" onclick={selectOption1} />
+      <TextButton label="Option 2" onclick={selectOption2} />
+      <TextButton label="Option 3" onclick={selectOption3} />
+    </div>
+  {/if}
+</div>
+```
+
+## Accessibility
+
+The TextButton component follows accessibility best practices:
+
+- Uses semantic `<button>` element
+- Supports keyboard navigation (Tab, Enter, Space)
+- Proper disabled state handling
+- Focus and blur events for screen readers
+
+### Improving Accessibility
+
+```svelte
+<!-- Provide context for screen readers -->
+<TextButton 
+  label="Delete"
+  onclick={handleDelete}
+  style="aria-label: Delete this item permanently"
+/>
+
+<!-- Add role and description -->
+<TextButton 
+  label="Learn More"
+  onclick={showDetails}
+  style="role: button; aria-describedby: help-text"
+/>
+<div id="help-text" style="display: none;">
+  Opens detailed information about this feature
+</div>
+```
+
+## Styling
+
+The component uses the following CSS classes:
+
+- `.uniface-button` - Base button class
+- `.text-button` - Text button specific styling
+- `.{size}` - Size-specific styles (big, medium, mini)
+- `.{type}` - Type-specific styles (default, primary, etc.)
+- `.disabled` - Disabled state styles
+
+### Example 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;
+}
+```
+
+## Best Practices
+
+1. **Appropriate Context**: Use text buttons for secondary actions and navigation
+2. **Clear Labels**: Provide descriptive labels that clearly indicate the action
+3. **Visual Hierarchy**: Use different types to establish proper visual hierarchy
+4. **Consistent Spacing**: Maintain consistent spacing between text buttons
+5. **Hover States**: Ensure hover states provide clear feedback
+6. **Accessibility**: Always consider keyboard navigation and screen readers
+7. **Context Awareness**: Ensure text buttons work well within their surrounding context
+
+## Common Patterns
+
+### Inline Actions
+
+```svelte
+<p>
+  Your changes have been saved.
+  <TextButton label="Undo" onclick={undoChanges} />
+</p>
+```
+
+### Card Actions
+
+```svelte
+<div class="card">
+  <h3>Article Title</h3>
+  <p>Article excerpt...</p>
+  
+  <div class="card-actions">
+    <TextButton label="Read More" type="primary" onclick={readMore} />
+    <TextButton label="Share" onclick={shareArticle} />
+    <TextButton label="Save" onclick={saveArticle} />
+  </div>
+</div>
+```
+
+### List Item Actions
+
+```svelte
+<div class="list-item">
+  <span class="item-name">Document.pdf</span>
+  <div class="item-actions">
+    <TextButton label="Download" onclick={download} />
+    <TextButton label="Share" onclick={share} />
+    <TextButton label="Delete" type="secondary" onclick={deleteFile} />
+  </div>
+</div>
+```
+
+## Integration with Other Components
+
+```svelte
+<!-- With modals -->
+<Modal bind:open={showModal}>
+  <h2>Confirm Action</h2>
+  <p>Are you sure you want to continue?</p>
+  
+  <div class="modal-actions">
+    <Button label="Confirm" type="primary" onclick={confirm} />
+    <TextButton label="Cancel" onclick={() => showModal = false} />
+  </div>
+</Modal>
+
+<!-- With tooltips -->
+<Tooltip text="This action cannot be undone">
+  <TextButton label="Delete All" type="secondary" onclick={deleteAll} />
+</Tooltip>
+```
+
+## Browser Support
+
+The TextButton component works in all modern browsers that support:
+- ES6+ JavaScript
+- CSS Flexbox
+- Semantic button elements
+
+## Performance
+
+- Minimal styling for fast rendering
+- Built-in click debouncing
+- Efficient event handling
+- Lightweight DOM structure