@ticatec/uniface-element 0.2.0 → 0.2.2

package/docs/form-components/en/prompts-text-editor.md

@@ -0,0 +1,241 @@
+# PromptsTextEditor Component
+
+Text input component with auto-complete suggestions.
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | Appearance variant |
+| `disabled` | `boolean` | `false` | Whether disabled |
+| `readonly` | `boolean` | `false` | Whether read-only |
+| `compact` | `boolean` | `false` | Whether compact mode |
+| `value` | `string` | `''` | Input value |
+| `placeholder` | `string` | `''` | Placeholder text |
+| `displayMode` | `DisplayMode` | `DisplayMode.Edit` | Display mode |
+| `prompts` | `Array<string>` | `[]` | Array of suggestion options |
+| `maxPrompts` | `number` | `10` | Maximum number of suggestions to display |
+| `minChars` | `number` | `1` | Minimum characters to trigger suggestions |
+| `caseSensitive` | `boolean` | `false` | Whether case sensitive |
+| `style` | `string` | `''` | Custom styles |
+| `onChange` | `OnChangeHandler<string>` | - | Value change callback |
+
+## Usage Examples
+
+```svelte
+<script lang="ts">
+  import PromptsTextEditor from '@ticatec/uniface-element/PromptsTextEditor';
+  
+  // Email domain suggestions
+  const emailDomains: string[] = [
+    'gmail.com',
+    'outlook.com',
+    'yahoo.com',
+    'hotmail.com',
+    'icloud.com',
+    'protonmail.com',
+    'company.com',
+    'example.org'
+  ];
+  
+  // City name suggestions
+  const cities: string[] = [
+    'New York',
+    'Los Angeles',
+    'Chicago',
+    'Houston',
+    'Phoenix',
+    'Philadelphia',
+    'San Antonio',
+    'San Diego',
+    'Dallas',
+    'San Jose'
+  ];
+  
+  let email: string = '';
+  let city: string = '';
+  
+  const handleEmailChange = (value: string): void => {
+    email = value;
+    console.log('Email:', value);
+  };
+  
+  const handleCityChange = (value: string): void => {
+    city = value;
+    console.log('City:', value);
+  };
+</script>
+
+<!-- Email input (domain suggestions) -->
+<PromptsTextEditor 
+  placeholder="Enter email address"
+  prompts={emailDomains}
+  bind:value={email}
+  onChange={handleEmailChange}
+/>
+
+<!-- City input (auto-complete) -->
+<PromptsTextEditor 
+  placeholder="Enter city name"
+  prompts={cities}
+  minChars={1}
+  maxPrompts={5}
+  bind:value={city}
+  onChange={handleCityChange}
+/>
+```
+
+## Advanced Usage
+
+### Dynamic Suggestions
+```svelte
+<script lang="ts">
+  import { onMount } from 'svelte';
+  
+  let searchValue: string = '';
+  let dynamicPrompts: string[] = [];
+  let isLoading: boolean = false;
+  
+  // Fetch suggestions from API
+  const fetchPrompts = async (query: string): Promise<string[]> => {
+    if (query.length < 2) return [];
+    
+    isLoading = true;
+    try {
+      const response = await fetch(`/api/suggestions?q=${encodeURIComponent(query)}`);
+      const data = await response.json();
+      return data.suggestions || [];
+    } catch (error) {
+      console.error('Failed to fetch suggestions:', error);
+      return [];
+    } finally {
+      isLoading = false;
+    }
+  };
+  
+  // Debounced prompt updates
+  let debounceTimeout: number;
+  const updatePrompts = (value: string): void => {
+    clearTimeout(debounceTimeout);
+    debounceTimeout = setTimeout(async () => {
+      dynamicPrompts = await fetchPrompts(value);
+    }, 300);
+  };
+  
+  const handleSearchChange = (value: string): void => {
+    searchValue = value;
+    updatePrompts(value);
+  };
+</script>
+
+<PromptsTextEditor 
+  placeholder="Search products..."
+  prompts={dynamicPrompts}
+  minChars={2}
+  maxPrompts={8}
+  bind:value={searchValue}
+  onChange={handleSearchChange}
+/>
+
+{#if isLoading}
+  <div class="loading-hint">Loading suggestions...</div>
+{/if}
+```
+
+### Tag Input
+```svelte
+<script lang="ts">
+  const availableTags: string[] = [
+    'JavaScript',
+    'TypeScript',
+    'Svelte',
+    'Vue.js',
+    'React',
+    'Node.js',
+    'Python',
+    'Java',
+    'Go',
+    'Rust'
+  ];
+  
+  let tagInput: string = '';
+  let selectedTags: string[] = [];
+  
+  const handleTagInput = (value: string): void => {
+    tagInput = value;
+    
+    // Check for delimiter input
+    if (value.includes(',') || value.includes(';')) {
+      const newTags = value.split(/[,;]/).map(tag => tag.trim()).filter(Boolean);
+      
+      newTags.forEach(tag => {
+        if (tag && !selectedTags.includes(tag)) {
+          selectedTags = [...selectedTags, tag];
+        }
+      });
+      
+      tagInput = ''; // Clear input
+    }
+  };
+  
+  const removeTag = (tagToRemove: string): void => {
+    selectedTags = selectedTags.filter(tag => tag !== tagToRemove);
+  };
+  
+  // Filter out already selected tags
+  $: filteredPrompts = availableTags.filter(tag => 
+    !selectedTags.includes(tag) && 
+    tag.toLowerCase().includes(tagInput.toLowerCase())
+  );
+</script>
+
+<div class="tag-input-container">
+  <!-- Selected tags -->
+  <div class="selected-tags">
+    {#each selectedTags as tag}
+      <span class="tag">
+        {tag}
+        <button type="button" on:click={() => removeTag(tag)}>×</button>
+      </span>
+    {/each}
+  </div>
+  
+  <!-- Tag input -->
+  <PromptsTextEditor 
+    placeholder="Enter tag name..."
+    prompts={filteredPrompts}
+    bind:value={tagInput}
+    onChange={handleTagInput}
+    minChars={1}
+    maxPrompts={6}
+  />
+  
+  <div class="tag-hint">Use comma or semicolon to separate multiple tags</div>
+</div>
+```
+
+## Best Practices
+
+### 1. Set Reasonable Trigger Conditions
+```svelte
+<!-- Short words: 1 character trigger -->
+<PromptsTextEditor minChars={1} prompts={shortWords} />
+
+<!-- Long words or search: 2-3 characters trigger -->
+<PromptsTextEditor minChars={2} prompts={searchTerms} />
+```
+
+### 2. Limit Number of Suggestions
+```svelte
+<!-- Avoid showing too many suggestions -->
+<PromptsTextEditor maxPrompts={6} prompts={largeDataset} />
+```
+
+### 3. Case Sensitivity Handling
+```svelte
+<!-- Code or technical terms: case sensitive -->
+<PromptsTextEditor caseSensitive={true} prompts={codeSnippets} />
+
+<!-- General text: case insensitive -->
+<PromptsTextEditor caseSensitive={false} prompts={commonWords} />
+```

package/docs/form-components/en/radiobutton.md

@@ -0,0 +1,84 @@
+# RadioButton Component
+
+Radio button component for selecting one option from multiple choices.
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | Appearance variant |
+| `disabled` | `boolean` | `false` | Whether disabled |
+| `readonly` | `boolean` | `false` | Whether read-only |
+| `value` | `any` | `null` | Selected value |
+| `groupValue` | `any` | `null` | Current value of the radio group |
+| `label` | `string` | `''` | Label text |
+| `displayMode` | `DisplayMode` | `DisplayMode.Edit` | Display mode |
+| `style` | `string` | `''` | Custom styles |
+| `onChange` | `OnChangeHandler<any>` | - | Value change callback |
+
+## Usage Examples
+
+```svelte
+<script lang="ts">
+  import RadioButton from '@ticatec/uniface-element/RadioButton';
+  
+  let selectedPayment: string = 'credit';
+  let selectedSize: string = 'M';
+  
+  const handlePaymentChange = (value: string): void => {
+    selectedPayment = value;
+    console.log('Payment method:', value);
+  };
+  
+  const handleSizeChange = (value: string): void => {
+    selectedSize = value;
+    console.log('Size:', value);
+  };
+</script>
+
+<!-- Payment method selection -->
+<div>
+  <h4>Please select payment method:</h4>
+  <RadioButton 
+    label="Credit Card"
+    value="credit"
+    groupValue={selectedPayment}
+    onChange={handlePaymentChange}
+  />
+  <RadioButton 
+    label="PayPal"
+    value="paypal"
+    groupValue={selectedPayment}
+    onChange={handlePaymentChange}
+  />
+  <RadioButton 
+    label="Apple Pay"
+    value="applepay"
+    groupValue={selectedPayment}
+    onChange={handlePaymentChange}
+  />
+</div>
+
+<!-- Size selection -->
+<div>
+  <h4>Please select size:</h4>
+  <RadioButton 
+    label="Small (S)"
+    value="S"
+    groupValue={selectedSize}
+    onChange={handleSizeChange}
+  />
+  <RadioButton 
+    label="Medium (M)"
+    value="M"
+    groupValue={selectedSize}
+    onChange={handleSizeChange}
+  />
+  <RadioButton 
+    label="Large (L)"
+    value="L"
+    groupValue={selectedSize}
+    onChange={handleSizeChange}
+  />
+</div>
+```

package/docs/form-components/en/switch.md

@@ -0,0 +1,180 @@
+# Switch Component
+
+Switch component providing visual toggle for boolean values.
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | Appearance variant |
+| `disabled` | `boolean` | `false` | Whether disabled |
+| `readonly` | `boolean` | `false` | Whether read-only |
+| `value` | `boolean` | `false` | Switch state |
+| `label` | `string` | `''` | Label text |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Switch size |
+| `displayMode` | `DisplayMode` | `DisplayMode.Edit` | Display mode |
+| `style` | `string` | `''` | Custom styles |
+| `onChange` | `OnChangeHandler<boolean>` | - | Value change callback |
+
+## Usage Examples
+
+```svelte
+<script lang="ts">
+  import Switch from '@ticatec/uniface-element/Switch';
+  
+  let darkMode: boolean = false;
+  let notifications: boolean = true;
+  let autoSave: boolean = false;
+  
+  const handleDarkModeChange = (enabled: boolean): void => {
+    darkMode = enabled;
+    // Apply dark theme logic
+    document.body.classList.toggle('dark-theme', enabled);
+  };
+  
+  const handleNotificationChange = (enabled: boolean): void => {
+    notifications = enabled;
+    console.log('Notification setting:', enabled);
+  };
+  
+  const handleAutoSaveChange = (enabled: boolean): void => {
+    autoSave = enabled;
+    console.log('Auto-save:', enabled);
+  };
+</script>
+
+<!-- Dark mode switch -->
+<Switch 
+  label="Dark Mode"
+  bind:value={darkMode}
+  onChange={handleDarkModeChange}
+/>
+
+<!-- Notification switch (large size) -->
+<Switch 
+  label="Push Notifications"
+  size="large"
+  bind:value={notifications}
+  onChange={handleNotificationChange}
+/>
+
+<!-- Auto-save switch (small size) -->
+<Switch 
+  label="Auto Save"
+  size="small"
+  bind:value={autoSave}
+  onChange={handleAutoSaveChange}
+/>
+```
+
+## Advanced Usage
+
+### Settings Panel
+```svelte
+<script lang="ts">
+  import { onMount } from 'svelte';
+  
+  interface AppSettings {
+    darkMode: boolean;
+    notifications: boolean;
+    autoSave: boolean;
+    showPreview: boolean;
+    enableShortcuts: boolean;
+  }
+  
+  let settings: AppSettings = {
+    darkMode: false,
+    notifications: true,
+    autoSave: true,
+    showPreview: true,
+    enableShortcuts: true
+  };
+  
+  const updateSetting = (key: keyof AppSettings) => (value: boolean): void => {
+    settings = { ...settings, [key]: value };
+    localStorage.setItem('app-settings', JSON.stringify(settings));
+  };
+  
+  // Restore settings on page load
+  onMount(() => {
+    const savedSettings = localStorage.getItem('app-settings');
+    if (savedSettings) {
+      settings = { ...settings, ...JSON.parse(savedSettings) };
+    }
+  });
+</script>
+
+<div class="settings-panel">
+  <h3>Application Settings</h3>
+  
+  <div class="setting-group">
+    <Switch 
+      label="Dark Mode"
+      bind:value={settings.darkMode}
+      onChange={updateSetting('darkMode')}
+    />
+    <p class="setting-description">Enable dark theme to reduce eye strain</p>
+  </div>
+  
+  <div class="setting-group">
+    <Switch 
+      label="Desktop Notifications"
+      bind:value={settings.notifications}
+      onChange={updateSetting('notifications')}
+    />
+    <p class="setting-description">Allow desktop notifications</p>
+  </div>
+  
+  <div class="setting-group">
+    <Switch 
+      label="Auto Save"
+      size="small"
+      bind:value={settings.autoSave}
+      onChange={updateSetting('autoSave')}
+    />
+    <p class="setting-description">Automatically save your work</p>
+  </div>
+</div>
+```
+
+## Best Practices
+
+### 1. Provide Immediate Feedback
+```svelte
+<script lang="ts">
+  let isOnline: boolean = true;
+  
+  const toggleOnlineStatus = (status: boolean): void => {
+    isOnline = status;
+    
+    // Show status change notification
+    const message = status ? 'Online' : 'Offline';
+    showToast(message);
+  };
+</script>
+
+<Switch 
+  label={`Status: ${isOnline ? 'Online' : 'Offline'}`}
+  bind:value={isOnline}
+  onChange={toggleOnlineStatus}
+/>
+```
+
+### 2. Conditional Disabling
+```svelte
+<script lang="ts">
+  let isPremiumUser: boolean = false;
+  let advancedFeatures: boolean = false;
+  
+  $: canUseAdvancedFeatures = isPremiumUser;
+</script>
+
+<Switch 
+  label="Advanced Features"
+  disabled={!canUseAdvancedFeatures}
+  bind:value={advancedFeatures}
+/>
+{#if !canUseAdvancedFeatures}
+  <p class="upgrade-hint">Upgrade to premium to use this feature</p>
+{/if}
+```

package/docs/form-components/en/text-editor.md

@@ -0,0 +1,142 @@
+# TextEditor Component
+
+Basic text input component supporting single-line and multi-line text input.
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | Appearance variant |
+| `disabled` | `boolean` | `false` | Whether disabled |
+| `readonly` | `boolean` | `false` | Whether read-only |
+| `compact` | `boolean` | `false` | Whether compact mode |
+| `value` | `string` | `''` | Input value |
+| `suffix` | `string` | `''` | Text suffix |
+| `prefix` | `string` | `''` | Text prefix |
+| `removable` | `boolean` | `true` | Show clear button |
+| `displayMode` | `DisplayMode` | `DisplayMode.Edit` | Display mode |
+| `style` | `string` | `''` | Custom styles |
+| `onChange` | `(value: string) => void` | - | Value change callback |
+
+## Events
+
+- `onChange(value: string)` - Triggered when input value changes
+
+## Usage Examples
+
+```svelte
+<script lang="ts">
+  import TextEditor from '@ticatec/uniface-element/TextEditor';
+  
+  let inputValue = '';
+  
+  const handleChange = (value: string) => {
+    console.log('Input value:', value);
+    inputValue = value;
+  };
+</script>
+
+<!-- Basic input -->
+<TextEditor 
+  placeholder="Enter text"
+  onChange={handleChange}
+  bind:value={inputValue}
+/>
+
+<!-- Input with prefix and suffix -->
+<TextEditor 
+  prefix="$"
+  suffix=".00"
+  placeholder="Enter amount"
+  onChange={handleChange}
+  bind:value={inputValue}
+/>
+
+<!-- Compact input with clear button -->
+<TextEditor 
+  compact={true}
+  removable={true}
+  placeholder="Search..."
+  bind:value={inputValue}
+/>
+```
+
+## Best Practices
+
+### Form Validation
+```svelte
+<script lang="ts">
+  let value = '';
+  let error = '';
+  
+  const validate = (inputValue: string) => {
+    if (!inputValue || inputValue.trim().length === 0) {
+      error = 'This field cannot be empty';
+    } else if (inputValue.length < 3) {
+      error = 'At least 3 characters required';
+    } else {
+      error = '';
+    }
+  };
+  
+  const handleChange = (newValue: string) => {
+    value = newValue;
+    validate(newValue);
+  };
+</script>
+
+<TextEditor 
+  placeholder="Enter content"
+  bind:value={value}
+  onChange={handleChange}
+/>
+{#if error}
+  <div class="error-message">{error}</div>
+{/if}
+```
+
+### Text Input with Styling
+```svelte
+<script lang="ts">
+  let description = '';
+</script>
+
+<TextEditor 
+  variant="outlined"
+  placeholder="Enter description..."
+  bind:value={description}
+  style="min-width: 300px;"
+/>
+<div class="char-count">{description.length} characters</div>
+```
+
+## Style Customization
+
+```css
+/* Custom styles */
+.custom-text-editor {
+  border-radius: 8px;
+  border: 2px solid #e1e5e9;
+  font-family: 'Inter', sans-serif;
+}
+
+.custom-text-editor:focus {
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+}
+```
+
+## Accessibility
+
+```svelte
+<label for="user-name">User Name:</label>
+<TextEditor 
+  id="user-name"
+  placeholder="Enter user name"
+  aria-describedby="name-help"
+  bind:value={userName}
+/>
+<div id="name-help" class="form-help">
+  User name will be displayed in the system, real name recommended
+</div>
+```