@ticatec/uniface-element 0.3.22 → 5.0.0

package/dist/number-range/README_CN.md

@@ -1,443 +0,0 @@
-# NumberRange 数字范围
-
-用于指定数字范围的双数字输入组件，具有自动验证功能，确保"起始"值不超过"结束"值。
-
-## 功能特性
-
-- **范围输入**: 两个连接的数字输入框，用于"起始"和"结束"值
-- **自动验证**: 确保逻辑范围顺序（起始 ≤ 结束）
-- **负数支持**: 可选的负数值支持
-- **边界约束**: 为整个范围设置最小/最大限制
-- **多种变体**: 支持轮廓、填充、朴素和默认样式
-- **紧凑模式**: 用于密集表单的节省空间布局
-- **清除功能**: 内置清除按钮重置两个值
-- **实时验证**: 输入过程中的即时反馈
-- **焦点管理**: 输入框之间的自动焦点处理
-
-## 安装
-
-```bash
-npm install @ticatec/uniface-element
-```
-
-## 基本用法
-
-```svelte
-<script>
-  import NumberRange from '@ticatec/uniface-element/NumberRange';
-  
-  let fromValue = 10;
-  let toValue = 50;
-</script>
-
-<NumberRange bind:fromValue bind:toValue />
-```
-
-## API 参考
-
-### 属性
-
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|---------|-------------|
-| `fromValue` | `number \| null` | `null` | 范围的"起始"（最小）值 |
-| `toValue` | `number \| null` | `null` | 范围的"结束"（最大）值 |
-| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | 视觉样式变体 |
-| `compact` | `boolean` | `false` | 启用紧凑显示模式 |
-| `style` | `string` | `''` | 自定义CSS样式 |
-| `min` | `number \| null` | `null` | 两个输入框的最小允许值 |
-| `max` | `number \| null` | `null` | 两个输入框的最大允许值 |
-| `allowNegative` | `boolean` | `false` | 允许两个输入框输入负数 |
-| `class` | `string` | `''` | CSS类名 |
-
-## 示例
-
-### 基本范围选择
-
-```svelte
-<script>
-  import NumberRange from '@ticatec/uniface-element/NumberRange';
-  import FormField from '@ticatec/uniface-element/FormField';
-  
-  let ageFrom = 18;
-  let ageTo = 65;
-</script>
-
-<FormField label="年龄范围">
-  <NumberRange 
-    bind:fromValue={ageFrom} 
-    bind:toValue={ageTo}
-    variant="outlined"
-    min={0}
-    max={120}
-  />
-</FormField>
-```
-
-### 价格范围过滤器
-
-```svelte
-<script>
-  import NumberRange from '@ticatec/uniface-element/NumberRange';
-  
-  let priceMin = 100;
-  let priceMax = 1000;
-  
-  $: console.log(`价格范围: ¥${priceMin} - ¥${priceMax}`);
-</script>
-
-<div class="price-filter">
-  <label>价格范围 (¥)</label>
-  <NumberRange 
-    bind:fromValue={priceMin} 
-    bind:toValue={priceMax}
-    variant="filled"
-    min={0}
-    max={10000}
-  />
-  <div class="range-display">
-    ¥{priceMin || 0} - ¥{priceMax || 0}
-  </div>
-</div>
-```
-
-### 温度范围（支持负值）
-
-```svelte
-<script>
-  import NumberRange from '@ticatec/uniface-element/NumberRange';
-  
-  let tempMin = -10;
-  let tempMax = 25;
-</script>
-
-<div class="temperature-range">
-  <label>温度范围 (°C)</label>
-  <NumberRange 
-    bind:fromValue={tempMin} 
-    bind:toValue={tempMax}
-    variant="outlined"
-    allowNegative={true}
-    min={-50}
-    max={50}
-  />
-</div>
-```
-
-### 搜索条件表单
-
-```svelte
-<script>
-  import NumberRange from '@ticatec/uniface-element/NumberRange';
-  import CriteriaField from '@ticatec/uniface-element/CriteriaField';
-  
-  let criteria = {
-    salaryFrom: null,
-    salaryTo: null,
-    experienceFrom: 0,
-    experienceTo: 10,
-    ageFrom: 22,
-    ageTo: 60
-  };
-  
-  function handleSearch() {
-    console.log('搜索条件:', criteria);
-  }
-</script>
-
-<div class="search-form">
-  <CriteriaField label="薪资范围" size="x30">
-    <NumberRange 
-      bind:fromValue={criteria.salaryFrom} 
-      bind:toValue={criteria.salaryTo}
-      variant="outlined"
-      min={0}
-      max={500000}
-    />
-  </CriteriaField>
-  
-  <CriteriaField label="工作年限" size="x30">
-    <NumberRange 
-      bind:fromValue={criteria.experienceFrom} 
-      bind:toValue={criteria.experienceTo}
-      variant="outlined"
-      min={0}
-      max={50}
-    />
-  </CriteriaField>
-  
-  <CriteriaField label="年龄范围" size="x30">
-    <NumberRange 
-      bind:fromValue={criteria.ageFrom} 
-      bind:toValue={criteria.ageTo}
-      variant="outlined"
-      min={16}
-      max={80}
-    />
-  </CriteriaField>
-  
-  <button on:click={handleSearch}>搜索</button>
-</div>
-```
-
-### 表格紧凑布局
-
-```svelte
-<script>
-  import NumberRange from '@ticatec/uniface-element/NumberRange';
-  
-  let filters = [
-    { label: '分数', from: 80, to: 100 },
-    { label: '数量', from: 1, to: 999 },
-    { label: '评级', from: 3, to: 5 }
-  ];
-</script>
-
-<table class="filter-table">
-  <thead>
-    <tr>
-      <th>过滤器</th>
-      <th>范围</th>
-    </tr>
-  </thead>
-  <tbody>
-    {#each filters as filter}
-      <tr>
-        <td>{filter.label}</td>
-        <td>
-          <NumberRange 
-            bind:fromValue={filter.from} 
-            bind:toValue={filter.to}
-            compact
-            variant="outlined"
-            min={0}
-          />
-        </td>
-      </tr>
-    {/each}
-  </tbody>
-</table>
-```
-
-### 带验证的动态范围
-
-```svelte
-<script>
-  import NumberRange from '@ticatec/uniface-element/NumberRange';
-  
-  let budgetMin = 1000;
-  let budgetMax = 5000;
-  let isValidRange = true;
-  
-  $: isValidRange = budgetMin <= budgetMax;
-  $: rangeSize = budgetMax - budgetMin;
-  
-  function resetRange() {
-    budgetMin = 1000;
-    budgetMax = 5000;
-  }
-</script>
-
-<div class="budget-selector">
-  <label>预算范围</label>
-  <NumberRange 
-    bind:fromValue={budgetMin} 
-    bind:toValue={budgetMax}
-    variant="outlined"
-    min={0}
-    max={100000}
-  />
-  
-  <div class="range-info" class:error={!isValidRange}>
-    {#if isValidRange}
-      <span>范围大小: ¥{rangeSize}</span>
-    {:else}
-      <span>无效范围: 最小值不能超过最大值</span>
-    {/if}
-  </div>
-  
-  <button on:click={resetRange}>重置</button>
-</div>
-
-<style>
-  .range-info.error {
-    color: #d32f2f;
-  }
-</style>
-```
-
-### 统计分析范围
-
-```svelte
-<script>
-  import NumberRange from '@ticatec/uniface-element/NumberRange';
-  
-  let dataRange = { min: -100, max: 100 };
-  let outlierThreshold = { from: -50, to: 50 };
-  
-  $: normalDataPercentage = calculateNormalData(dataRange, outlierThreshold);
-  
-  function calculateNormalData(range, threshold) {
-    const totalRange = range.max - range.min;
-    const normalRange = threshold.to - threshold.from;
-    return ((normalRange / totalRange) * 100).toFixed(1);
-  }
-</script>
-
-<div class="analysis-panel">
-  <h3>数据分析</h3>
-  
-  <div class="range-control">
-    <label>数据范围</label>
-    <NumberRange 
-      bind:fromValue={dataRange.min} 
-      bind:toValue={dataRange.max}
-      variant="filled"
-      allowNegative={true}
-      min={-1000}
-      max={1000}
-    />
-  </div>
-  
-  <div class="range-control">
-    <label>正常范围（排除异常值）</label>
-    <NumberRange 
-      bind:fromValue={outlierThreshold.from} 
-      bind:toValue={outlierThreshold.to}
-      variant="outlined"
-      allowNegative={true}
-      min={dataRange.min}
-      max={dataRange.max}
-    />
-  </div>
-  
-  <div class="statistics">
-    <p>正常数据覆盖率: {normalDataPercentage}%</p>
-  </div>
-</div>
-```
-
-### 库存管理
-
-```svelte
-<script>
-  import NumberRange from '@ticatec/uniface-element/NumberRange';
-  
-  let stockLevels = {
-    lowStock: 0,
-    highStock: 100,
-    reorderFrom: 10,
-    reorderTo: 90
-  };
-  
-  $: isValidReorderRange = (
-    stockLevels.reorderFrom >= stockLevels.lowStock &&
-    stockLevels.reorderTo <= stockLevels.highStock &&
-    stockLevels.reorderFrom <= stockLevels.reorderTo
-  );
-</script>
-
-<div class="inventory-config">
-  <h3>库存配置</h3>
-  
-  <div class="config-row">
-    <label>库存水平范围</label>
-    <NumberRange 
-      bind:fromValue={stockLevels.lowStock} 
-      bind:toValue={stockLevels.highStock}
-      variant="outlined"
-      min={0}
-      max={10000}
-    />
-  </div>
-  
-  <div class="config-row">
-    <label>补货范围</label>
-    <NumberRange 
-      bind:fromValue={stockLevels.reorderFrom} 
-      bind:toValue={stockLevels.reorderTo}
-      variant="filled"
-      min={stockLevels.lowStock}
-      max={stockLevels.highStock}
-    />
-  </div>
-  
-  <div class="validation" class:valid={isValidReorderRange}>
-    {isValidReorderRange ? '✓ 配置有效' : '✗ 补货范围无效'}
-  </div>
-</div>
-
-<style>
-  .validation.valid {
-    color: #2e7d32;
-  }
-  .validation:not(.valid) {
-    color: #d32f2f;
-  }
-</style>
-```
-
-## 验证逻辑
-
-NumberRange 组件自动执行逻辑约束：
-
-1. **范围顺序**: "起始"值不能超过"结束"值
-2. **边界遵守**: 两个值都遵守全局最小/最大约束
-3. **交叉验证**: 当一个值改变时，必要时另一个值会调整
-4. **实时反馈**: 在输入过程中进行验证
-
-## 最佳实践
-
-1. **设置适当的边界**: 使用 min/max 防止不现实的值
-2. **提供清晰的标签**: 指明范围代表什么
-3. **处理空状态**: 考虑值为 null 时的情况
-4. **明智使用紧凑模式**: 在密集布局或表格中
-5. **验证范围逻辑**: 确保满足业务规则
-6. **考虑用户工作流**: 用户通常应该先填写哪个输入框
-7. **提供反馈**: 显示范围计算或验证消息
-
-## 样式
-
-NumberRange 组件使用以下 CSS 结构：
-
-```css
-.uniface-range-editor {
-  display: flex;
-  align-items: center;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-}
-
-.uniface-range-editor .divider {
-  width: 8px;
-  height: 1px;
-  background: #ccc;
-  margin: 0 4px;
-}
-
-.uniface-range-editor.compact {
-  padding: 4px 8px;
-}
-
-.uniface-range-editor.outlined {
-  border: 2px solid #1976d2;
-}
-
-.uniface-range-editor.filled {
-  background-color: #f5f5f5;
-}
-```
-
-## 无障碍功能
-
-- 为屏幕阅读器提供适当的 ARIA 标签
-- 输入框之间的键盘导航
-- 焦点管理和视觉指示器
-- 支持高对比度模式
-- 逻辑的 Tab 顺序
-
-## 相关组件
-
-- [NumberEditor](../number-editor/README.md) - 用于单个数字输入
-- [DateRange](../date-range/README.md) - 用于日期范围选择
-- [CriteriaField](../criteria-field/README.md) - 用于搜索表单布局
-- [FormField](../form-field/README.md) - 用于表单字段标签和布局

package/dist/options-multi-select/OptionsMultiSelect.svelte

@@ -1,215 +0,0 @@
-<script lang="ts">
-
-    import {DisplayMode} from "../common/DisplayMode";
-    import CommonPicker from "../common/CommonPicker.svelte";
-    import utils from "../common/utils";
-    import type {OnChangeHandler} from "../common/OnChangeHandler";
-    import Tag from "../tag";
-    import {tick} from "svelte";
-
-    export let style: string = "";
-    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
-    export let compact: boolean = false;
-    export let disabled: boolean = false;
-    export let readonly: boolean = false;
-    export let menu$height: number = 0;
-    export let value: string = '';
-    export let delimiter: string = ';';
-    export let options: Array<any> = [];
-    export let keyField: string = "code";
-    export let textField: string = "text";
-    export let placeholder: string = '';
-    export let emptyText: string = '';
-    export let disableOptions: Array<string> = [];
-    export let hideOptions: Array<string> = [];
-    export let displayMode: DisplayMode = DisplayMode.Edit;
-    export let onchange: OnChangeHandler<Array<string>> = null as unknown as OnChangeHandler<Array<string>>;
-    export let onfocus: (() => void) | null = null;
-    export let onblur: (() => void) | null = null;
-    export let tagColor: string = '';
-    export let tagVariant: 'borderless' | 'border' | 'round' = 'border';
-
-    export const setFocus = () => {
-        setTimeout(()=> {
-            editor && editor.focus();
-        }, 50);
-    }
-
-    let selectedList: Array<string> = [];
-    let textValue: string;
-    let mh;
-    let hasFocus: boolean = false;
-
-
-    const handleCheckboxChange = (key: string) => (event: Event) => {
-        const target = event.target as HTMLInputElement;
-        const checked = target.checked;
-        
-        if (checked) {
-            if (selectedList.indexOf(key) < 0) {
-                selectedList.push(key);
-                selectedList = [...selectedList];
-                value = selectedList.length > 0 ? selectedList.join(delimiter) : '';
-            }
-        } else {
-            removeSelectCode(key);
-        }
-        onchange?.(selectedList);
-        
-        // 确保焦点状态正确
-        if (!hasFocus) {
-            editor.focus();
-        }
-    }
-
-    const handleOptionClick = (key: string) => (event: MouseEvent) => {
-        if (disableOptions.indexOf(key) > -1) return;
-        
-        const checkbox = event.currentTarget.querySelector('input[type="checkbox"]') as HTMLInputElement;
-        if (checkbox && !checkbox.disabled) {
-            checkbox.checked = !checkbox.checked;
-            handleCheckboxChange(key)({ target: checkbox } as Event);
-        }
-        event.preventDefault();
-    }
-
-    const getOptionItem = (code: string) => {
-        let item = options.find(el => el[keyField] == code);
-        return item == null ? '' : item[textField];
-    }
-
-    const removeSelectCode = (code: string) => {
-        let pos = selectedList.findIndex(sc => sc == code);
-        if (pos > -1) {
-            selectedList.splice(pos, 1);
-            selectedList = [...selectedList];
-            value = selectedList.length > 0 ? selectedList.join(delimiter) : '';
-        }
-    }
-
-    const generateTextValue = (v: Array<any>) => {
-        let s = [];
-        for (let item of options) {
-            if (v.indexOf(item[keyField]) > -1) {
-                s.push(item[textField]);
-            }
-        }
-        return s.length == 0 ? '' : s.join(delimiter);
-    }
-
-    const removeOption = (code: string) => async (e: MouseEvent) => {
-        removeSelectCode(code);
-        onchange?.(selectedList);
-        
-        // 删除tag后确保获得焦点
-        if (!hasFocus) {
-            setTimeout(() => {
-                editor?.focus();
-            }, 10);
-        }
-        
-        e.stopPropagation();
-        e.preventDefault();
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key=='Tab') {
-            showPopup = false;
-        }
-    }
-
-    const handleFocus = () => {
-        if (!hasFocus) {
-            hasFocus = true;
-            onfocus?.();
-        }
-    };
-
-    const handleBlur = (event: FocusEvent) => {
-        if (!showPopup) {
-            hasFocus = false;
-            onblur?.();
-        }
-    };
-
-    const cleanData = () => {
-        value = '';
-        onchange?.([]);
-        
-        // 清除所有选项后确保获得焦点
-        if (!hasFocus) {
-            setTimeout(() => {
-                editor?.focus();
-            }, 10);
-        }
-    }
-
-    let showPopup: boolean = false;
-
-    $: selectedList = utils.isEmpty(value) ? [] : ((value ?? '').toString()).split(delimiter);
-    $: mh = `height: ${menu$height > 0 ? menu$height + 'px' : 'auto'}`;
-    $: textValue = generateTextValue(selectedList);
-
-    let editor: any;
-
-    $: if (showPopup) {
-        editor.focus();
-    }
-
-    // 监听popup关闭，如果是点击外部关闭且之前有焦点，触发blur
-    $: if (!showPopup && hasFocus) {
-        // 延迟检查，如果input仍然有焦点，说明是选择项目导致的关闭
-        setTimeout(() => {
-            if (document.activeElement !== editor) {
-                hasFocus = false;
-                onblur?.();
-            }
-        }, 50);
-    }
-
-</script>
-
-<CommonPicker {displayMode} {variant} {style} {compact} className="multiple" dropDownIcon="icon_google_arrow_drop_down"
-              bind:showPopup canClean={value!=null} autoFit clean={cleanData} {textValue} {readonly} {disabled}>
-
-    <div class="option-field" on:click={()=>{
-        if (!hasFocus) {
-            showPopup = true;
-            setTimeout(() => {
-                editor?.focus();
-            }, 10);
-        } else {
-            showPopup = true;
-        }
-    }}>
-        <input bind:this={editor} style="position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none" 
-               tabindex="-1" aria-label="Focus management input" 
-               on:keydown={handleKeyDown} on:focus={handleFocus} on:blur={handleBlur}/>
-        <div style="width: 100%; overflow: hidden; display: flex; flex-direction: row; gap: 6px">
-            {#if selectedList.length > 0 }
-                {#each selectedList as code}
-                    <Tag style="flex-shrink: 0" color={tagColor} variant={tagVariant} text={getOptionItem(code)}
-                         removable={!readonly && !disabled} removeHandler={removeOption(code)}/>
-                {/each}
-            {:else if emptyText != null || placeholder != null}
-                <div class:readonly={readonly || disabled}>
-                    <span>{emptyText ?? placeholder}</span>
-                </div>
-            {/if}
-        </div>
-    </div>
-    <div class="options-popover" style={mh} slot="popup-panel">
-        {#each options as op}
-            {#if hideOptions.indexOf(op[keyField]) < 0}
-                <div class="option-item" class:disabled={disableOptions.indexOf(op[keyField])>-1} 
-                     on:click={handleOptionClick(op[keyField])}>
-                    <input type="checkbox" 
-                           checked={selectedList.indexOf(op[keyField])>-1}
-                           disabled={disableOptions.indexOf(op[keyField])>-1}
-                           on:change={handleCheckboxChange(op[keyField])}/>
-                    <span>{op[textField]}</span>
-                </div>
-            {/if}
-        {/each}
-    </div>
-</CommonPicker>

package/dist/options-multi-select/OptionsMultiSelect.svelte.d.ts

@@ -1,45 +0,0 @@
-import { DisplayMode } from "../common/DisplayMode";
-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 OptionsMultiSelect: $$__sveltets_2_IsomorphicComponent<{
-    style?: string;
-    variant?: "" | "plain" | "outlined" | "filled";
-    compact?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    menu$height?: number;
-    value?: string;
-    delimiter?: string;
-    options?: Array<any>;
-    keyField?: string;
-    textField?: string;
-    placeholder?: string;
-    emptyText?: string;
-    disableOptions?: Array<string>;
-    hideOptions?: Array<string>;
-    displayMode?: DisplayMode;
-    onchange?: OnChangeHandler<Array<string>>;
-    onfocus?: (() => void) | null;
-    onblur?: (() => void) | null;
-    tagColor?: string;
-    tagVariant?: "borderless" | "border" | "round";
-    setFocus?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
-    setFocus: () => void;
-}, string>;
-type OptionsMultiSelect = InstanceType<typeof OptionsMultiSelect>;
-export default OptionsMultiSelect;