@ticatec/uniface-element 0.2.3 → 0.3.0

package/dist/tag/README.md

@@ -0,0 +1,922 @@
+# Tag
+
+A flexible tag component for labeling, categorization, and status indication. Features include multiple variants, color themes, removable functionality, and size options. Perfect for displaying categories, filters, user selections, and status indicators.
+
+## Installation
+
+```bash
+npm install @ticatec/uniface-element
+```
+
+## Import
+
+```typescript
+import Tag from "@ticatec/uniface-element/Tag";
+```
+
+## Basic Usage
+
+```svelte
+<script>
+  import Tag from "@ticatec/uniface-element/Tag";
+  
+  function handleRemove() {
+    console.log('Tag removed');
+  }
+</script>
+
+<Tag text="Basic Tag" />
+<Tag text="Removable Tag" removable={true} removeHandler={handleRemove} />
+<Tag text="Non-removable Tag" removable={false} />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | `string` | `""` | Text content of the tag |
+| `size` | `"big" \| "middle" \| "small"` | `"middle"` | Size of the tag |
+| `variant` | `"borderless" \| "border" \| "round"` | `"border"` | Visual variant of the tag |
+| `removable` | `boolean` | `true` | Whether the tag can be removed |
+| `removeHandler` | `MouseClickHandler` | `null` | Callback when remove icon is clicked |
+| `color` | `string` | `null` | Color theme (1-12) |
+| `style` | `string` | `""` | Additional CSS styles |
+| `class` | `string` | `""` | CSS class name |
+
+## Examples
+
+### Basic Tags
+
+```svelte
+<script>
+  import Tag from "@ticatec/uniface-element/Tag";
+</script>
+
+<div class="tag-demo">
+  <h3>Basic Tags</h3>
+  <div class="tag-group">
+    <Tag text="Default" />
+    <Tag text="Technology" />
+    <Tag text="Design" />
+    <Tag text="Development" />
+  </div>
+</div>
+
+<style>
+  .tag-demo {
+    margin: 20px;
+  }
+  
+  .tag-group {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+</style>
+```
+
+### Different Sizes
+
+```svelte
+<script>
+  import Tag from "@ticatec/uniface-element/Tag";
+</script>
+
+<div class="size-demo">
+  <h3>Tag Sizes</h3>
+  
+  <div class="size-section">
+    <h4>Small Tags</h4>
+    <div class="tag-group">
+      <Tag text="Small Tag" size="small" />
+      <Tag text="Category" size="small" color="1" />
+      <Tag text="Label" size="small" color="2" />
+    </div>
+  </div>
+  
+  <div class="size-section">
+    <h4>Medium Tags (Default)</h4>
+    <div class="tag-group">
+      <Tag text="Medium Tag" size="middle" />
+      <Tag text="Category" size="middle" color="1" />
+      <Tag text="Label" size="middle" color="2" />
+    </div>
+  </div>
+  
+  <div class="size-section">
+    <h4>Large Tags</h4>
+    <div class="tag-group">
+      <Tag text="Large Tag" size="big" />
+      <Tag text="Category" size="big" color="1" />
+      <Tag text="Label" size="big" color="2" />
+    </div>
+  </div>
+</div>
+
+<style>
+  .size-demo {
+    margin: 20px;
+  }
+  
+  .size-section {
+    margin-bottom: 20px;
+  }
+  
+  .size-section h4 {
+    margin: 12px 0 8px 0;
+    font-size: 14px;
+    color: #666;
+  }
+  
+  .tag-group {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+</style>
+```
+
+### Different Variants
+
+```svelte
+<script>
+  import Tag from "@ticatec/uniface-element/Tag";
+</script>
+
+<div class="variant-demo">
+  <h3>Tag Variants</h3>
+  
+  <div class="variant-section">
+    <h4>Border Variant (Default)</h4>
+    <div class="tag-group">
+      <Tag text="Border Tag" variant="border" />
+      <Tag text="JavaScript" variant="border" color="1" />
+      <Tag text="React" variant="border" color="2" />
+      <Tag text="Vue" variant="border" color="3" />
+    </div>
+  </div>
+  
+  <div class="variant-section">
+    <h4>Round Variant</h4>
+    <div class="tag-group">
+      <Tag text="Round Tag" variant="round" />
+      <Tag text="JavaScript" variant="round" color="1" />
+      <Tag text="React" variant="round" color="2" />
+      <Tag text="Vue" variant="round" color="3" />
+    </div>
+  </div>
+  
+  <div class="variant-section">
+    <h4>Borderless Variant</h4>
+    <div class="tag-group">
+      <Tag text="Borderless Tag" variant="borderless" />
+      <Tag text="JavaScript" variant="borderless" color="1" />
+      <Tag text="React" variant="borderless" color="2" />
+      <Tag text="Vue" variant="borderless" color="3" />
+    </div>
+  </div>
+</div>
+
+<style>
+  .variant-demo {
+    margin: 20px;
+  }
+  
+  .variant-section {
+    margin-bottom: 20px;
+  }
+  
+  .variant-section h4 {
+    margin: 12px 0 8px 0;
+    font-size: 14px;
+    color: #666;
+  }
+  
+  .tag-group {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+</style>
+```
+
+### Color Themes
+
+```svelte
+<script>
+  import Tag from "@ticatec/uniface-element/Tag";
+  
+  const colorThemes = [
+    { color: "1", name: "Blue", description: "Primary actions" },
+    { color: "2", name: "Green", description: "Success states" },
+    { color: "3", name: "Red", description: "Error states" },
+    { color: "4", name: "Yellow", description: "Warning states" },
+    { color: "5", name: "Pink", description: "Highlights" },
+    { color: "6", name: "Cyan", description: "Information" },
+    { color: "7", name: "Orange", description: "Alerts" },
+    { color: "8", name: "Amber", description: "Pending states" },
+    { color: "9", name: "Indigo", description: "Navigation" },
+    { color: "10", name: "Purple", description: "Creative" },
+    { color: "11", name: "Lime", description: "Fresh content" },
+    { color: "12", name: "Gray", description: "Neutral" }
+  ];
+</script>
+
+<div class="color-demo">
+  <h3>Color Themes</h3>
+  
+  <div class="color-grid">
+    {#each colorThemes as theme}
+      <div class="color-item">
+        <Tag text={theme.name} color={theme.color} />
+        <p class="color-description">{theme.description}</p>
+      </div>
+    {/each}
+  </div>
+  
+  <h4>All Variants with Color</h4>
+  <div class="variant-comparison">
+    <div class="variant-row">
+      <span class="variant-label">Border:</span>
+      <Tag text="Technology" variant="border" color="1" />
+      <Tag text="Design" variant="border" color="2" />
+      <Tag text="Marketing" variant="border" color="3" />
+    </div>
+    
+    <div class="variant-row">
+      <span class="variant-label">Round:</span>
+      <Tag text="Technology" variant="round" color="1" />
+      <Tag text="Design" variant="round" color="2" />
+      <Tag text="Marketing" variant="round" color="3" />
+    </div>
+    
+    <div class="variant-row">
+      <span class="variant-label">Borderless:</span>
+      <Tag text="Technology" variant="borderless" color="1" />
+      <Tag text="Design" variant="borderless" color="2" />
+      <Tag text="Marketing" variant="borderless" color="3" />
+    </div>
+  </div>
+</div>
+
+<style>
+  .color-demo {
+    margin: 20px;
+  }
+  
+  .color-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+  
+  .color-item {
+    text-align: center;
+  }
+  
+  .color-description {
+    margin: 8px 0 0 0;
+    font-size: 12px;
+    color: #666;
+  }
+  
+  .variant-comparison h4 {
+    margin: 20px 0 12px 0;
+  }
+  
+  .variant-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin: 8px 0;
+  }
+  
+  .variant-label {
+    min-width: 80px;
+    font-size: 14px;
+    color: #666;
+  }
+</style>
+```
+
+### Removable Tags
+
+```svelte
+<script>
+  import Tag from "@ticatec/uniface-element/Tag";
+  
+  let tags = [
+    { id: 1, text: "JavaScript", color: "1" },
+    { id: 2, text: "React", color: "2" },
+    { id: 3, text: "Vue.js", color: "3" },
+    { id: 4, text: "Angular", color: "4" },
+    { id: 5, text: "Svelte", color: "5" }
+  ];
+  
+  function removeTag(tagId) {
+    tags = tags.filter(tag => tag.id !== tagId);
+  }
+  
+  function addTag() {
+    const newTagText = prompt("Enter tag name:");
+    if (newTagText) {
+      const newTag = {
+        id: Date.now(),
+        text: newTagText,
+        color: String(Math.floor(Math.random() * 12) + 1)
+      };
+      tags = [...tags, newTag];
+    }
+  }
+</script>
+
+<div class="removable-demo">
+  <h3>Removable Tags</h3>
+  <p>Hover over tags to see the remove icon</p>
+  
+  <div class="tag-container">
+    {#each tags as tag}
+      <Tag 
+        text={tag.text} 
+        color={tag.color}
+        removable={true}
+        removeHandler={() => removeTag(tag.id)}
+      />
+    {/each}
+    
+    <button class="add-tag-btn" on:click={addTag}>+ Add Tag</button>
+  </div>
+  
+  <div class="tag-count">
+    Total tags: {tags.length}
+  </div>
+</div>
+
+<style>
+  .removable-demo {
+    margin: 20px;
+    max-width: 600px;
+  }
+  
+  .removable-demo p {
+    margin: 8px 0 16px 0;
+    color: #666;
+    font-size: 14px;
+  }
+  
+  .tag-container {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+  
+  .add-tag-btn {
+    padding: 4px 12px;
+    border: 2px dashed #ccc;
+    background: transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    color: #666;
+    line-height: 20px;
+  }
+  
+  .add-tag-btn:hover {
+    border-color: #007bff;
+    color: #007bff;
+  }
+  
+  .tag-count {
+    font-size: 14px;
+    color: #666;
+  }
+</style>
+```
+
+### Status Tags
+
+```svelte
+<script>
+  import Tag from "@ticatec/uniface-element/Tag";
+  
+  const statusItems = [
+    { name: "Active Users", status: "online", color: "2", count: 1240 },
+    { name: "Pending Orders", status: "pending", color: "4", count: 45 },
+    { name: "Failed Requests", status: "error", color: "3", count: 12 },
+    { name: "Completed Tasks", status: "success", color: "2", count: 89 },
+    { name: "In Review", status: "review", color: "1", count: 23 },
+    { name: "Draft Posts", status: "draft", color: "12", count: 7 }
+  ];
+</script>
+
+<div class="status-demo">
+  <h3>Status Indicators</h3>
+  
+  <div class="status-grid">
+    {#each statusItems as item}
+      <div class="status-item">
+        <div class="status-header">
+          <span class="status-name">{item.name}</span>
+          <Tag text={item.status} color={item.color} size="small" variant="round" removable={false} />
+        </div>
+        <div class="status-count">{item.count}</div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .status-demo {
+    margin: 20px;
+  }
+  
+  .status-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 16px;
+  }
+  
+  .status-item {
+    padding: 16px;
+    border: 1px solid #eee;
+    border-radius: 8px;
+    background: #fafafa;
+  }
+  
+  .status-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+  
+  .status-name {
+    font-size: 14px;
+    color: #333;
+  }
+  
+  .status-count {
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+  }
+</style>
+```
+
+### Tag Input Component
+
+```svelte
+<script>
+  import Tag from "@ticatec/uniface-element/Tag";
+  
+  let inputTags = ["frontend", "javascript"];
+  let inputValue = "";
+  
+  function addTag(event) {
+    if (event.key === 'Enter' && inputValue.trim()) {
+      const newTag = inputValue.trim().toLowerCase();
+      if (!inputTags.includes(newTag)) {
+        inputTags = [...inputTags, newTag];
+      }
+      inputValue = "";
+    }
+  }
+  
+  function removeInputTag(tagToRemove) {
+    inputTags = inputTags.filter(tag => tag !== tagToRemove);
+  }
+  
+  function clearAllTags() {
+    inputTags = [];
+  }
+</script>
+
+<div class="tag-input-demo">
+  <h3>Tag Input Component</h3>
+  
+  <div class="tag-input-container">
+    <label for="tag-input">Skills:</label>
+    <div class="input-wrapper">
+      <div class="tag-display">
+        {#each inputTags as tag, index}
+          <Tag 
+            text={tag} 
+            color={String((index % 12) + 1)}
+            size="small"
+            variant="round"
+            removable={true}
+            removeHandler={() => removeInputTag(tag)}
+          />
+        {/each}
+        
+        <input
+          id="tag-input"
+          type="text"
+          bind:value={inputValue}
+          on:keydown={addTag}
+          placeholder={inputTags.length === 0 ? "Type and press Enter to add tags" : "Add more..."}
+          class="tag-input"
+        />
+      </div>
+      
+      <div class="input-actions">
+        <button on:click={clearAllTags} disabled={inputTags.length === 0}>
+          Clear All
+        </button>
+      </div>
+    </div>
+    
+    <div class="tag-suggestions">
+      <span class="suggestions-label">Suggestions:</span>
+      {#each ["react", "vue", "angular", "svelte", "typescript"] as suggestion}
+        <button 
+          class="suggestion-btn"
+          on:click={() => {
+            if (!inputTags.includes(suggestion)) {
+              inputTags = [...inputTags, suggestion];
+            }
+          }}
+          disabled={inputTags.includes(suggestion)}
+        >
+          {suggestion}
+        </button>
+      {/each}
+    </div>
+  </div>
+  
+  <div class="output">
+    <h4>Current Tags:</h4>
+    <pre>{JSON.stringify(inputTags, null, 2)}</pre>
+  </div>
+</div>
+
+<style>
+  .tag-input-demo {
+    margin: 20px;
+    max-width: 600px;
+  }
+  
+  .tag-input-container {
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 16px;
+    background: #fafafa;
+  }
+  
+  .tag-input-container label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+  }
+  
+  .input-wrapper {
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+  }
+  
+  .tag-display {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    min-height: 32px;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: white;
+  }
+  
+  .tag-input {
+    border: none;
+    outline: none;
+    flex: 1;
+    min-width: 120px;
+    font-size: 14px;
+  }
+  
+  .tag-input::placeholder {
+    color: #999;
+  }
+  
+  .input-actions button {
+    padding: 8px 12px;
+    border: 1px solid #dc3545;
+    background: white;
+    color: #dc3545;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+  }
+  
+  .input-actions button:hover:not(:disabled) {
+    background: #dc3545;
+    color: white;
+  }
+  
+  .input-actions button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  .tag-suggestions {
+    margin-top: 12px;
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  
+  .suggestions-label {
+    font-size: 12px;
+    color: #666;
+    margin-right: 8px;
+  }
+  
+  .suggestion-btn {
+    padding: 4px 8px;
+    border: 1px solid #007bff;
+    background: white;
+    color: #007bff;
+    border-radius: 12px;
+    cursor: pointer;
+    font-size: 11px;
+  }
+  
+  .suggestion-btn:hover:not(:disabled) {
+    background: #007bff;
+    color: white;
+  }
+  
+  .suggestion-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  .output {
+    margin-top: 20px;
+    padding: 16px;
+    background: #f8f9fa;
+    border-radius: 4px;
+  }
+  
+  .output h4 {
+    margin: 0 0 8px 0;
+  }
+  
+  .output pre {
+    margin: 0;
+    font-size: 12px;
+  }
+</style>
+```
+
+### Tag Categories
+
+```svelte
+<script>
+  import Tag from "@ticatec/uniface-element/Tag";
+  
+  const categories = [
+    {
+      name: "Technologies",
+      color: "1",
+      tags: ["JavaScript", "TypeScript", "Python", "React", "Vue.js"]
+    },
+    {
+      name: "Skills",
+      color: "2", 
+      tags: ["Frontend", "Backend", "DevOps", "UI/UX", "Testing"]
+    },
+    {
+      name: "Interests",
+      color: "3",
+      tags: ["Open Source", "AI/ML", "Web3", "Mobile", "Gaming"]
+    },
+    {
+      name: "Tools",
+      color: "4",
+      tags: ["VS Code", "Git", "Docker", "AWS", "Figma"]
+    }
+  ];
+  
+  let selectedTags = [];
+  
+  function toggleTag(tag) {
+    if (selectedTags.includes(tag)) {
+      selectedTags = selectedTags.filter(t => t !== tag);
+    } else {
+      selectedTags = [...selectedTags, tag];
+    }
+  }
+</script>
+
+<div class="category-demo">
+  <h3>Tag Categories</h3>
+  
+  <div class="categories">
+    {#each categories as category}
+      <div class="category-section">
+        <div class="category-header">
+          <Tag text={category.name} color={category.color} removable={false} variant="round" />
+          <span class="tag-count">({category.tags.length})</span>
+        </div>
+        
+        <div class="category-tags">
+          {#each category.tags as tag}
+            <button 
+              class="tag-button"
+              class:selected={selectedTags.includes(tag)}
+              on:click={() => toggleTag(tag)}
+            >
+              <Tag 
+                text={tag} 
+                color={selectedTags.includes(tag) ? category.color : "12"}
+                size="small"
+                removable={false}
+              />
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/each}
+  </div>
+  
+  <div class="selected-summary">
+    <h4>Selected Tags ({selectedTags.length})</h4>
+    <div class="selected-tags">
+      {#each selectedTags as tag}
+        <Tag 
+          text={tag} 
+          color="1"
+          size="small"
+          variant="round"
+          removable={true}
+          removeHandler={() => toggleTag(tag)}
+        />
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .category-demo {
+    margin: 20px;
+    max-width: 800px;
+  }
+  
+  .categories {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    margin-bottom: 24px;
+  }
+  
+  .category-section {
+    padding: 16px;
+    border: 1px solid #eee;
+    border-radius: 8px;
+    background: #fafafa;
+  }
+  
+  .category-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+  
+  .tag-count {
+    font-size: 12px;
+    color: #666;
+  }
+  
+  .category-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  
+  .tag-button {
+    border: none;
+    background: none;
+    padding: 0;
+    cursor: pointer;
+    border-radius: 4px;
+  }
+  
+  .tag-button:hover {
+    transform: translateY(-1px);
+  }
+  
+  .tag-button.selected {
+    transform: scale(1.05);
+  }
+  
+  .selected-summary {
+    padding: 16px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    border-left: 4px solid #007bff;
+  }
+  
+  .selected-summary h4 {
+    margin: 0 0 12px 0;
+    color: #333;
+  }
+  
+  .selected-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+</style>
+```
+
+## Features
+
+- **Multiple Variants**: Border, round, and borderless styles
+- **Size Options**: Small, medium, and large sizes
+- **Color Themes**: 12 predefined color themes with semantic meanings
+- **Removable Functionality**: Optional remove icon with hover interaction
+- **Flexible Styling**: Custom CSS classes and inline styles support
+- **Responsive Design**: Adapts to different screen sizes
+- **Hover Effects**: Interactive remove icon on hover
+
+## Color Theme Reference
+
+| Color | Theme | Use Case |
+|-------|-------|----------|
+| 1 | Blue | Primary actions, links, navigation |
+| 2 | Green | Success states, completed actions |
+| 3 | Red | Error states, critical alerts |
+| 4 | Yellow | Warning states, caution |
+| 5 | Pink | Highlights, special features |
+| 6 | Cyan | Information, tips |
+| 7 | Orange | Alerts, notifications |
+| 8 | Amber | Pending states, in progress |
+| 9 | Indigo | Navigation, secondary actions |
+| 10 | Purple | Creative content, premium features |
+| 11 | Lime | Fresh content, new items |
+| 12 | Gray | Neutral, default states |
+
+## Styling
+
+The Tag component uses CSS custom properties for theming:
+
+```css
+:root {
+  --uniface-default-text-color: #374151;
+  --uniface-primary-border-color: #E2E8F0;
+}
+
+/* Custom tag styles */
+.uniface-tag {
+  /* Container styles */
+}
+
+.uniface-tag > div {
+  /* Tag content styles */
+}
+
+.uniface-tag .uniface-remove-icon {
+  /* Remove icon styles */
+}
+```
+
+## Accessibility
+
+- Proper semantic HTML structure
+- Keyboard navigation support for remove functionality
+- High contrast color themes
+- Screen reader compatible
+- Focus indicators for interactive elements
+
+## Best Practices
+
+1. **Color Usage**: Use colors consistently across your application
+2. **Removable Tags**: Always provide clear feedback when tags are removed
+3. **Tag Limits**: Consider limiting the number of tags for better UX
+4. **Responsive Design**: Test tag layouts on different screen sizes
+5. **Semantic Meaning**: Use color themes that match their semantic meaning
+6. **Performance**: For large lists, consider virtualization
+
+## Browser Support
+
+- Modern browsers with CSS custom properties support
+- Compatible with Svelte 5+
+- Hover and focus interactions
+- Flexbox layout support
+- Full TypeScript support
+
+## Related Components
+
+- `Chip` - Interactive chip component with actions
+- `Badge` - Small status indicators
+- `Label` - Form field labels
+- `Button` - Interactive button component