@ticatec/uniface-element 0.3.18 → 0.3.19

package/dist/color-picker/README.md

@@ -0,0 +1,184 @@
+# ColorPicker
+
+A color picker component that provides an intuitive interface for selecting colors using the native HTML5 color input.
+
+## Features
+
+- **Native Picker**: Uses browser's native color picker for consistent UX
+- **Visual Preview**: Color swatch showing current selection
+- **Hex Display**: Shows the hex color code
+- **Multiple Variants**: Plain, outlined, and filled styles
+- **Compact Mode**: Space-saving option for dense UIs
+- **Disabled & Readonly**: Full support for disabled and readonly states
+
+## Installation
+
+```bash
+npm install @ticatec/uniface-element
+```
+
+```typescript
+import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+```
+
+## Basic Usage
+
+```svelte
+<script>
+  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+
+  let selectedColor = '#ff3e00';
+</script>
+
+<ColorPicker bind:value={selectedColor} />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | `'#ff3e00'` | Selected color (hex format) |
+| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | Visual style variant |
+| `disabled` | `boolean` | `false` | Disable the picker |
+| `readonly` | `boolean` | `false` | Show in read-only mode |
+| `compact` | `boolean` | `false` | Use compact layout |
+| `style` | `string` | `''` | Additional CSS styles |
+| `onChange` | `(value: string) => void` | - | Callback when color changes |
+
+## Examples
+
+### Basic Color Picker
+
+```svelte
+<script>
+  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+
+  let color = '#007acc';
+</script>
+
+<ColorPicker bind:value={color} />
+<p>Selected: {color}</p>
+```
+
+### With Change Handler
+
+```svelte
+<script>
+  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+
+  let color = '#ff5722';
+
+  function handleColorChange(newColor) {
+    console.log('Color changed to:', newColor);
+    color = newColor;
+  }
+</script>
+
+<ColorPicker value={color} onChange={handleColorChange} />
+```
+
+### Different Variants
+
+```svelte
+<script>
+  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+
+  let color1 = '#e91e63';
+  let color2 = '#9c27b0';
+  let color3 = '#673ab7';
+</script>
+
+<div style="display: flex; flex-direction: column; gap: 16px;">
+  <!-- Default -->
+  <ColorPicker bind:value={color1} />
+
+  <!-- Plain -->
+  <ColorPicker bind:value={color2} variant="plain" />
+
+  <!-- Outlined -->
+  <ColorPicker bind:value={color3} variant="outlined" />
+
+  <!-- Filled -->
+  <ColorPicker bind:value={color1} variant="filled" />
+</div>
+```
+
+### Compact Mode
+
+```svelte
+<script>
+  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+
+  let color = '#4caf50';
+</script>
+
+<ColorPicker bind:value={color} compact />
+```
+
+### Disabled & Readonly
+
+```svelte
+<script>
+  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+
+  let disabledColor = '#f44336';
+  let readonlyColor = '#2196f3';
+</script>
+
+<div style="display: flex; gap: 16px;">
+  <ColorPicker bind:value={disabledColor} disabled />
+  <ColorPicker bind:value={readonlyColor} readonly />
+</div>
+```
+
+### Color Theming Example
+
+```svelte
+<script>
+  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+
+  let primaryColor = '#007acc';
+  let secondaryColor = '#22bdff';
+  let backgroundColor = '#f5f5f5';
+  let textColor = '#374151';
+</script>
+
+<div style="padding: 24px;">
+  <FormField label="Primary Color">
+    <ColorPicker bind:value={primaryColor} />
+  </FormField>
+
+  <FormField label="Secondary Color">
+    <ColorPicker bind:value={secondaryColor} />
+  </FormField>
+
+  <FormField label="Background">
+    <ColorPicker bind:value={backgroundColor} />
+  </FormField>
+
+  <FormField label="Text Color">
+    <ColorPicker bind:value={textColor} />
+  </FormField>
+</div>
+```
+
+## Best Practices
+
+1. **Hex Format**: Always use hex color codes (#RRGGBB)
+2. **Default Colors**: Provide sensible defaults for better UX
+3. **Live Preview**: Show the selected color in context when possible
+4. **Validation**: Ensure valid hex format when accepting user input
+5. **Accessibility**: Consider color contrast for accessibility requirements
+
+## Browser Support
+
+- Modern browsers with HTML5 color input support
+- Chrome, Firefox, Safari, Edge (recent versions)
+- Falls back gracefully on older browsers
+
+## Notes
+
+- The component uses the native color picker for optimal performance and consistency
+- Color values should be in hex format (#RRGGBB)
+- The color swatch displays the currently selected color
+- Click the color swatch to open the native color picker dialog

package/dist/color-picker/README_CN.md

@@ -0,0 +1,185 @@
+# ColorPicker 颜色选择器
+
+一个颜色选择器组件，使用原生 HTML5 颜色输入提供直观的颜色选择界面。
+
+## 特性
+
+- **原生选择器**: 使用浏览器的原生颜色选择器以获得一致的用户体验
+- **视觉预览**: 显示当前选择的颜色色板
+- **十六进制显示**: 显示十六进制颜色代码
+- **多种变体**: 纯净、轮廓和填充样式
+- **紧凑模式**: 为密集 UI 节省空间的选项
+- **禁用和只读**: 完全支持禁用和只读状态
+
+## 安装
+
+```bash
+npm install @ticatec/uniface-element
+```
+
+```typescript
+import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+```
+
+## 基本用法
+
+```svelte
+<script>
+  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+
+  let selectedColor = '#ff3e00';
+</script>
+
+<ColorPicker bind:value={selectedColor} />
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|---------|-------------|
+| `value` | `string` | `'#ff3e00'` | 选中的颜色（十六进制格式） |
+| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | 视觉样式变体 |
+| `disabled` | `boolean` | `false` | 禁用选择器 |
+| `readonly` | `boolean` | `false` | 以只读模式显示 |
+| `compact` | `boolean` | `false` | 使用紧凑布局 |
+| `style` | `string` | `''` | 附加CSS样式 |
+| `onChange` | `(value: string) => void` | - | 颜色更改时的回调 |
+
+## 示例
+
+### 基本颜色选择器
+
+```svelte
+<script>
+  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+
+  let color = '#007acc';
+</script>
+
+<ColorPicker bind:value={color} />
+<p>已选择: {color}</p>
+```
+
+### 带更改处理程序
+
+```svelte
+<script>
+  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+
+  let color = '#ff5722';
+
+  function handleColorChange(newColor) {
+    console.log('颜色已更改为:', newColor);
+    color = newColor;
+  }
+</script>
+
+<ColorPicker value={color} onChange={handleColorChange} />
+```
+
+### 不同变体
+
+```svelte
+<script>
+  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+
+  let color1 = '#e91e63';
+  let color2 = '#9c27b0';
+  let color3 = '#673ab7';
+</script>
+
+<div style="display: flex; flex-direction: column; gap: 16px;">
+  <!-- 默认 -->
+  <ColorPicker bind:value={color1} />
+
+  <!-- 纯净 -->
+  <ColorPicker bind:value={color2} variant="plain" />
+
+  <!-- 轮廓 -->
+  <ColorPicker bind:value={color3} variant="outlined" />
+
+  <!-- 填充 -->
+  <ColorPicker bind:value={color1} variant="filled" />
+</div>
+```
+
+### 紧凑模式
+
+```svelte
+<script>
+  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+
+  let color = '#4caf50';
+</script>
+
+<ColorPicker bind:value={color} compact />
+```
+
+### 禁用和只读
+
+```svelte
+<script>
+  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+
+  let disabledColor = '#f44336';
+  let readonlyColor = '#2196f3';
+</script>
+
+<div style="display: flex; gap: 16px;">
+  <ColorPicker bind:value={disabledColor} disabled />
+  <ColorPicker bind:value={readonlyColor} readonly />
+</div>
+```
+
+### 主题颜色示例
+
+```svelte
+<script>
+  import ColorPicker from '@ticatec/uniface-element/ColorPicker';
+  import FormField from '@ticatec/uniface-element/FormField';
+
+  let primaryColor = '#007acc';
+  let secondaryColor = '#22bdff';
+  let backgroundColor = '#f5f5f5';
+  let textColor = '#374151';
+</script>
+
+<div style="padding: 24px;">
+  <FormField label="主色">
+    <ColorPicker bind:value={primaryColor} />
+  </FormField>
+
+  <FormField label="辅助色">
+    <ColorPicker bind:value={secondaryColor} />
+  </FormField>
+
+  <FormField label="背景色">
+    <ColorPicker bind:value={backgroundColor} />
+  </FormField>
+
+  <FormField label="文字颜色">
+    <ColorPicker bind:value={textColor} />
+  </FormField>
+</div>
+```
+
+## 最佳实践
+
+1. **十六进制格式**: 始终使用十六进制颜色代码 (#RRGGBB)
+2. **默认颜色**: 为更好的用户体验提供合理的默认值
+3. **实时预览**: 尽可能在上下文中显示选中的颜色
+4. **验证**: 接受用户输入时确保有效的十六进制格式
+5. **无障碍访问**: 考虑无障碍要求的颜色对比度
+
+## 浏览器支持
+
+- 支持 HTML5 颜色输入的现代浏览器
+- Chrome、Firefox、Safari、Edge（最新版本）
+- 在旧浏览器上优雅降级
+
+## 注意事项
+
+- 组件使用原生颜色选择器以获得最佳性能和一致性
+- 颜色值应采用十六进制格式 (#RRGGBB)
+- 色板显示当前选中的颜色
+- 点击色板打开原生颜色选择器对话框

package/dist/form-field/README.md

@@ -0,0 +1,193 @@
+# FormField
+
+A form field wrapper component that provides consistent layout for form inputs with labels, error messages, and required indicators.
+
+## Features
+
+- **Label Support**: Display labels with optional suffix
+- **Required Indicator**: Visual indicator for required fields
+- **Error Display**: Show validation error messages
+- **Flexible Layout**: Center or top label alignment
+- **Custom Styling**: Custom styles for label and container
+- **Responsive Height**: Adjustable field height
+
+## Installation
+
+```bash
+npm install @ticatec/uniface-element
+```
+
+```typescript
+import FormField from '@ticatec/uniface-element/FormField';
+```
+
+## Basic Usage
+
+```svelte
+<script>
+  import FormField from '@ticatec/uniface-element/FormField';
+  import TextEditor from '@ticatec/uniface-element/TextEditor';
+</script>
+
+<FormField label="Username" required>
+  <TextEditor placeholder="Enter username" />
+</FormField>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | `'Label:'` | Field label text |
+| `labelSuffix` | `string` | `':'` | Suffix text after label |
+| `required` | `boolean` | `false` | Show required indicator (*) |
+| `error` | `string \| null` | `null` | Error message to display |
+| `labelAlignment` | `'center' \| 'top'` | `'center'` | Label vertical alignment |
+| `labelStyle` | `string \| null` | `null` | Custom CSS for label |
+| `style` | `string` | `''` | Custom CSS for container |
+| `height` | `string` | `'auto'` | Height of the field area |
+| `class` | `string` | `''` | CSS class name |
+
+## Examples
+
+### Basic Form Field
+
+```svelte
+<script>
+  import FormField from '@ticatec/uniface-element/FormField';
+  import TextEditor from '@ticatec/uniface-element/TextEditor';
+</script>
+
+<FormField label="Email">
+  <TextEditor type="email" placeholder="user@example.com" />
+</FormField>
+```
+
+### Required Field
+
+```svelte
+<script>
+  import FormField from '@ticatec/uniface-element/FormField';
+  import TextEditor from '@ticatec/uniface-element/TextEditor';
+</script>
+
+<FormField label="Password" required>
+  <TextEditor type="password" placeholder="Enter password" />
+</FormField>
+```
+
+### With Error Message
+
+```svelte
+<script>
+  import FormField from '@ticatec/uniface-element/FormField';
+  import TextEditor from '@ticatec/uniface-element/TextEditor';
+
+  let error = 'This field is required';
+</script>
+
+<FormField label="Username" {error} required>
+  <TextEditor placeholder="Enter username" />
+</FormField>
+```
+
+### Top Label Alignment
+
+```svelte
+<script>
+  import FormField from '@ticatec/uniface-element/FormField';
+  import TextEditor from '@ticatec/uniface-element/TextEditor';
+</script>
+
+<FormField label="Description" labelAlignment="top">
+  <TextEditor placeholder="Enter description" />
+</FormField>
+```
+
+### Custom Label Style
+
+```svelte
+<script>
+  import FormField from '@ticatec/uniface-element/FormField';
+  import TextEditor from '@ticatec/uniface-element/TextEditor';
+</script>
+
+<FormField
+  label="Important Field"
+  labelStyle="color: #007acc; font-weight: bold;"
+>
+  <TextEditor placeholder="Enter value" />
+</FormField>
+```
+
+### Complete Form Example
+
+```svelte
+<script>
+  import FormField from '@ticatec/uniface-element/FormField';
+  import TextEditor from '@ticatec/uniface-element/TextEditor';
+  import Button from '@ticatec/uniface-element/Button';
+
+  let formData = {
+    username: '',
+    email: '',
+    password: ''
+  };
+
+  let errors = {
+    username: '',
+    email: '',
+    password: ''
+  };
+
+  function validate() {
+    if (!formData.username) {
+      errors.username = 'Username is required';
+    }
+    if (!formData.email) {
+      errors.email = 'Email is required';
+    }
+    if (!formData.password) {
+      errors.password = 'Password is required';
+    }
+  }
+
+  function handleSubmit() {
+    validate();
+    if (Object.values(errors).every(e => !e)) {
+      console.log('Form submitted:', formData);
+    }
+  }
+</script>
+
+<form on:submit|preventDefault={handleSubmit}>
+  <FormField label="Username" required error={errors.username}>
+    <TextEditor bind:value={formData.username} placeholder="Enter username" />
+  </FormField>
+
+  <FormField label="Email" required error={errors.email}>
+    <TextEditor bind:value={formData.email} type="email" placeholder="user@example.com" />
+  </FormField>
+
+  <FormField label="Password" required error={errors.password}>
+    <TextEditor bind:value={formData.password} type="password" placeholder="Enter password" />
+  </FormField>
+
+  <Button type="primary" onclick={handleSubmit}>Submit</Button>
+</form>
+```
+
+## Best Practices
+
+1. **Always use labels**: Provide clear, descriptive labels for accessibility
+2. **Mark required fields**: Use the `required` prop for mandatory fields
+3. **Show errors**: Display validation errors below the field
+4. **Consistent alignment**: Use the same label alignment throughout a form
+5. **Custom styling**: Use labelStyle for special emphasis when needed
+
+## Accessibility
+
+- Proper label association with form fields
+- Required indicator for screen readers
+- Error message display for validation feedback
+- Semantic HTML structure