@ticatec/uniface-element 0.3.23 → 5.0.0

package/dist/color-picker/ColorPicker.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-
-
-    import {DisplayMode} from "../common/DisplayMode";
-    import type {OnChangeHandler} from "../common/OnChangeHandler";
-    import CommonPicker from "../common/CommonPicker.svelte";
-
-    //type OnActionHandler = () => void;
-
-    //export let showHex = true;
-    //export let showRgb = false;
-
-    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
-    export let disabled: boolean = false;
-    export let readonly: boolean = false;
-    export let compact: boolean = false;
-    export let value: any = "#ff3e00";
-    export let style: string = '';
-    export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
-
-
-    let oldValue = value;
-
-    $: if (oldValue != value) {
-        oldValue = value;
-    }
-
-    let editor: any;
-
-    const clean = () => {
-        onChange(null)
-    }
-
-    const handleActionIconClick = async () => {
-        editor.click();
-    }
-
-    function handleColorChange(event: Event) {
-        // selectedColor = (event.target as HTMLElement).value;
-        // rgbValues = hexToRgb(selectedColor);
-        // console.log(selectedColor, rgbValues);
-        // dispatch('change', {
-        //     hex: selectedColor,
-        //     rgb: rgbValues
-        // });
-    }
-
-</script>
-
-<CommonPicker displayMode={DisplayMode.Edit} {variant} {style} {compact} className="multiple" dropDownIcon="icon_google_color_lens"
-              canClean={false} autoFit {clean} textValue={value} {readonly} {disabled} iconClickHandler={handleActionIconClick}>
-<!--    <div style="flex: 1 1 auto; width: 50%; height: 60%; border-radius: 4px; background-color: {value}"></div>-->
-    <div style="width: 100%; display: flex; overflow: hidden; flex-direction: row; align-items: center; height: 100%; gap: 8px">
-        <input bind:this={editor} style="flex: 0 0 auto; width: 40%; height: 80%; border-radius: 8px;" type="color"  bind:value on:change={handleColorChange}/>
-        <input style="flex: 0 0 auto; width: 50%; text-align: center" class="text-editor" readonly value={value??''} {disabled}/>
-    </div>
-
-
-</CommonPicker>

package/dist/color-picker/ColorPicker.svelte.d.ts

@@ -1,27 +0,0 @@
-import type { OnChangeHandler } from "../common/OnChangeHandler";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ColorPicker: $$__sveltets_2_IsomorphicComponent<{
-    variant?: "" | "plain" | "outlined" | "filled";
-    disabled?: boolean;
-    readonly?: boolean;
-    compact?: boolean;
-    value?: any;
-    style?: string;
-    onChange?: OnChangeHandler<any>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ColorPicker = InstanceType<typeof ColorPicker>;
-export default ColorPicker;

package/dist/color-picker/ColorPickerPanel.svelte

@@ -1,175 +0,0 @@
-<script lang="ts">
-
-
-    import i18nRes from "../i18nRes";
-
-    export let initialColor = "#ffffff";
-    export let showHex = true;
-    export let showRgb = false;
-    export let swatches: Array<any> = [];
-
-    let selectedColor = initialColor;
-    let rgbValues = hexToRgb(initialColor);
-
-
-    // Convert hex to RGB
-    function hexToRgb(hex: string) {
-        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        return result ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16)
-        } : { r: 0, g: 0, b: 0 };
-    }
-
-    // Emit change event when color changes
-    function handleColorChange(event: Event) {
-        selectedColor = "0x000000"; //event.target?.value;
-        rgbValues = hexToRgb(selectedColor);
-        // dispatch('change', {
-        //     hex: selectedColor,
-        //     rgb: rgbValues
-        // });
-    }
-
-    // Select a swatch
-    function selectSwatch(color: any) {
-        selectedColor = color;
-        rgbValues = hexToRgb(selectedColor);
-        // dispatch('change', {
-        //     hex: selectedColor,
-        //     rgb: rgbValues
-        // });
-    }
-</script>
-
-<div class="color-picker">
-    <label for="color-input">
-        {i18nRes.pickupColor}
-    </label>
-
-    <div class="color-input-group">
-        <input
-                id="color-input"
-                type="color"
-                bind:value={selectedColor}
-                on:change={handleColorChange}
-        />
-        <div
-                class="color-preview"
-                style="background-color: {selectedColor};"
-        ></div>
-    </div>
-
-    {#if showHex}
-            <div class="color-value">
-                <span>HEX:</span> {selectedColor}
-            </div>
-        {/if}
-
-    {#if showRgb}
-            <div class="color-value">
-                <span>RGB:</span> rgb({rgbValues.r}, {rgbValues.g}, {rgbValues.b})
-            </div>
-        {/if}
-
-    {#if swatches && swatches.length > 0}
-            <div class="swatches">
-                {#each swatches as swatch}
-                        <button
-                                class="swatch"
-                                style="background-color: {swatch};"
-                                on:click={() => selectSwatch(swatch)}
-                                aria-label={`Select color ${swatch}`}
-                                class:selected={selectedColor === swatch}
-                        ></button>
-                    {/each}
-            </div>
-        {/if}
-</div>
-
-<style>
-    .color-picker {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-        padding: 16px;
-        border-radius: 8px;
-        background-color: #f8f9fa;
-        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-        width: 100%;
-        max-width: 300px;
-    }
-
-    label {
-        display: block;
-        margin-bottom: 8px;
-        font-weight: 500;
-        color: #333;
-    }
-
-    .color-input-group {
-        display: flex;
-        align-items: center;
-        margin-bottom: 12px;
-    }
-
-    input[type="color"] {
-        width: 40px;
-        height: 40px;
-        border: none;
-        padding: 0;
-        background: none;
-        cursor: pointer;
-    }
-
-    input[type="color"]::-webkit-color-swatch-wrapper {
-        padding: 0;
-    }
-
-    input[type="color"]::-webkit-color-swatch {
-        border: 1px solid #ddd;
-        border-radius: 4px;
-    }
-
-    .color-preview {
-        width: 40px;
-        height: 40px;
-        margin-left: 12px;
-        border-radius: 4px;
-        border: 1px solid #ddd;
-    }
-
-    .color-value {
-        margin-bottom: 8px;
-        font-size: 14px;
-    }
-
-    .color-value span {
-        font-weight: 600;
-        margin-right: 4px;
-    }
-
-    .swatches {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-        margin-top: 12px;
-    }
-
-    .swatch {
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        border: 1px solid #ddd;
-        cursor: pointer;
-        transition: transform 0.2s ease;
-    }
-
-    .swatch:hover {
-        transform: scale(1.1);
-    }
-
-    .swatch.selected {
-        border: 2px solid #333;
-        box-shadow: 0 0 0 2px white inset;
-    }
-</style>

package/dist/color-picker/README.md

@@ -1,184 +0,0 @@
-# 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

@@ -1,185 +0,0 @@
-# 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/common/CommonPicker.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-
-    import {DisplayMode} from "../common/DisplayMode";
-    import Popover from "../common/Popover.svelte";
-    import Icon from "../icon";
-    import type {MouseClickHandler} from "../common/MouseClickHandler";
-
-    export let variant: '' | 'plain' | 'outlined' | 'filled';
-    export let disabled: boolean;
-    export let readonly: boolean;
-    export let compact: boolean;
-    export let style: string = '';
-    export let className: string = '';
-    export let displayMode: DisplayMode;
-    export let autoFit: boolean = true;
-    export let canClean: boolean;
-    export let textValue: string;
-    export let dropDownIcon: string = null as unknown as string;
-    export let clean: () => void;
-    export let iconClickHandler: MouseClickHandler = null as unknown as MouseClickHandler;
-    export let showPopup: boolean = false;
-
-    const openPopup = () => {
-        showPopup = true;
-    }
-
-    let editorElement;
-
-</script>
-{#if displayMode === DisplayMode.View}
-    <div class="uniface-display-field">
-        <div class="content">
-            <span>{textValue}</span>
-        </div>
-
-    </div>
-{:else}
-    <div bind:this={editorElement} class="uniface-common-editor {variant} uniface-common-picker {className}" tabindex="-1" class:compact
-         {style}>
-        {#if readonly || disabled}
-            <input style="width: 100%" class="readonly" class:disabled readonly {disabled} value={textValue}/>
-        {:else}
-            <div style="flex: 1 1 auto; position: relative; overflow: hidden; height: 100%">
-                <slot></slot>
-                {#if canClean && textValue && textValue.length > 0}
-                    <div class="uniface-editor-clean-icon">
-                        <i class="icon_google_clear clickable " aria-hidden="true" on:click={clean}></i>
-                    </div>
-                {/if}
-            </div>
-            {#if $$slots['dropdown-icon'] || dropDownIcon}
-                <div style="flex: 0 0 auto">
-                    <slot name="dropdown-icon">
-                        <Icon name={dropDownIcon} class="action-icon" onclick={iconClickHandler??openPopup}/>
-                    </slot>
-                </div>
-            {/if}
-        {/if}
-    </div>
-    {#if showPopup}
-        <Popover target={editorElement} onClose={()=>{showPopup=false}} {autoFit}>
-            <slot name="popup-panel"></slot>
-        </Popover>
-    {/if}
-{/if}