@ticatec/uniface-element 0.3.22 → 5.0.0

package/dist/inline-cell-editor/README.md

@@ -1,116 +0,0 @@
-# InlineCellEditor
-
-A lightweight wrapper component for inline editing in table cells or other constrained spaces.
-
-## Features
-
-- **Minimal Wrapper**: Simple slot-based component for maximum flexibility
-- **Inline Editing**: Designed for inline editing scenarios
-- **Custom Styling**: Accepts custom styles
-- **Focus Handling**: Built-in focus event handling
-
-## Installation
-
-```bash
-npm install @ticatec/uniface-element
-```
-
-```typescript
-import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
-```
-
-## Basic Usage
-
-```svelte
-<script>
-  import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
-  import TextEditor from '@ticatec/uniface-element/TextEditor';
-</script>
-
-<InlineCellEditor>
-  <TextEditor placeholder="Edit inline..." />
-</InlineCellEditor>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `style` | `string` | `''` | Custom CSS styles |
-
-## Examples
-
-### Basic Inline Editor
-
-```svelte
-<script>
-  import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
-  import TextEditor from '@ticatec/uniface-element/TextEditor';
-
-  let value = '';
-</script>
-
-<InlineCellEditor>
-  <TextEditor bind:value={value} placeholder="Click to edit" />
-</InlineCellEditor>
-```
-
-### In Table Cells
-
-```svelte
-<script>
-  import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
-  import TextEditor from '@ticatec/uniface-element/TextEditor';
-
-  let data = [
-    { name: 'Item 1', price: 100 },
-    { name: 'Item 2', price: 200 }
-  ];
-</script>
-
-<table>
-  {#each data as item}
-    <tr>
-      <td>
-        <InlineCellEditor>
-          <TextEditor bind:value={item.name} />
-        </InlineCellEditor>
-      </td>
-      <td>
-        <InlineCellEditor>
-          <TextEditor bind:value={item.price} type="number" />
-        </InlineCellEditor>
-      </td>
-    </tr>
-  {/each}
-</table>
-```
-
-### With Custom Styling
-
-```svelte
-<script>
-  import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
-  import TextEditor from '@ticatec/uniface-element/TextEditor';
-
-  let value = '';
-</script>
-
-<InlineCellEditor style="padding: 4px; background: #f5f5f5;">
-  <TextEditor bind:value={value} compact />
-</InlineCellEditor>
-```
-
-## Use Cases
-
-- **Table Cell Editing**: Edit data directly in table cells
-- **Form Grids**: Compact editing in form layouts
-- **List Items**: Inline editing in list views
-- **Data Grids**: Spreadsheet-like editing experience
-
-## Best Practices
-
-1. **Use with Compact Editors**: Pair with compact form components
-2. **Minimal Styling**: Keep inline editors simple and unobtrusive
-3. **Focus Management**: Ensure proper focus handling for accessibility
-4. **Validation**: Implement validation on blur or change events

package/dist/inline-cell-editor/README_CN.md

@@ -1,116 +0,0 @@
-# InlineCellEditor 内联单元格编辑器
-
-一个轻量级的包装组件，用于表格单元格或其他受限空间中的内联编辑。
-
-## 特性
-
-- **最小化包装**: 基于插槽的简单组件，最大化灵活性
-- **内联编辑**: 专为内联编辑场景设计
-- **自定义样式**: 接受自定义样式
-- **焦点处理**: 内置焦点事件处理
-
-## 安装
-
-```bash
-npm install @ticatec/uniface-element
-```
-
-```typescript
-import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
-```
-
-## 基本用法
-
-```svelte
-<script>
-  import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
-  import TextEditor from '@ticatec/uniface-element/TextEditor';
-</script>
-
-<InlineCellEditor>
-  <TextEditor placeholder="点击编辑..." />
-</InlineCellEditor>
-```
-
-## 属性
-
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|---------|-------------|
-| `style` | `string` | `''` | 自定义CSS样式 |
-
-## 示例
-
-### 基本内联编辑器
-
-```svelte
-<script>
-  import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
-  import TextEditor from '@ticatec/uniface-element/TextEditor';
-
-  let value = '';
-</script>
-
-<InlineCellEditor>
-  <TextEditor bind:value={value} placeholder="点击编辑" />
-</InlineCellEditor>
-```
-
-### 在表格单元格中
-
-```svelte
-<script>
-  import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
-  import TextEditor from '@ticatec/uniface-element/TextEditor';
-
-  let data = [
-    { name: '项目1', price: 100 },
-    { name: '项目2', price: 200 }
-  ];
-</script>
-
-<table>
-  {#each data as item}
-    <tr>
-      <td>
-        <InlineCellEditor>
-          <TextEditor bind:value={item.name} />
-        </InlineCellEditor>
-      </td>
-      <td>
-        <InlineCellEditor>
-          <TextEditor bind:value={item.price} type="number" />
-        </InlineCellEditor>
-      </td>
-    </tr>
-  {/each}
-</table>
-```
-
-### 自定义样式
-
-```svelte
-<script>
-  import InlineCellEditor from '@ticatec/uniface-element/InlineCellEditor';
-  import TextEditor from '@ticatec/uniface-element/TextEditor';
-
-  let value = '';
-</script>
-
-<InlineCellEditor style="padding: 4px; background: #f5f5f5;">
-  <TextEditor bind:value={value} compact />
-</InlineCellEditor>
-```
-
-## 使用场景
-
-- **表格单元格编辑**: 直接在表格单元格中编辑数据
-- **表单网格**: 表单布局中的紧凑编辑
-- **列表项**: 列表视图中的内联编辑
-- **数据网格**: 类似电子表格的编辑体验
-
-## 最佳实践
-
-1. **使用紧凑编辑器**: 与紧凑的表单组件配对使用
-2. **最小化样式**: 保持内联编辑器简单且不突兀
-3. **焦点管理**: 确保正确的焦点处理以实现无障碍访问
-4. **验证**: 在模糊或更改事件上实现验证

package/dist/inline-cell-editor/acceptProps.d.ts

@@ -1,6 +0,0 @@
-/**
- * 拷贝属性，接收所有input$开头和预定义的属性
- * @param obj
- * @param acceptKeys
- */
-export declare const acceptProps: (obj: any, acceptKeys: Array<string>) => any;

package/dist/inline-cell-editor/acceptProps.js

@@ -1,20 +0,0 @@
-/**
- * 拷贝属性，接收所有input$开头和预定义的属性
- * @param obj
- * @param acceptKeys
- */
-export const acceptProps = (obj, acceptKeys) => {
-    if (obj == null) {
-        return {};
-    }
-    let result = {};
-    for (let attr in obj) {
-        if (attr.startsWith('input$')) {
-            result[attr] = obj[attr];
-        }
-        else if (acceptKeys.indexOf(attr) > -1) {
-            result[attr] = obj[attr];
-        }
-    }
-    return result;
-};

package/dist/inline-cell-editor/getNestObject.d.ts

@@ -1,9 +0,0 @@
-/**
- * 返回嵌套对象和属性
- * @param data
- * @param key
- */
-export declare function getNestObject(data: any, key: string): {
-    parent: any;
-    keyField: string;
-};

package/dist/inline-cell-editor/getNestObject.js

@@ -1,28 +0,0 @@
-/**
- * 返回嵌套对象和属性
- * @param data
- * @param key
- */
-export function getNestObject(data, key) {
-    // 如果 key 为空或无效，返回默认值
-    if (!key || typeof key !== 'string') {
-        throw new Error('invalid key');
-    }
-    // 分割 key 为数组
-    const keys = key.split('.'); // ["aaa", "bbb", "ccc"]
-    const field = keys[keys.length - 1]; // 最后一个属性: "ccc"
-    const parentPath = keys.slice(0, -1); // 倒数第二层路径: ["aaa", "bbb"]
-    // 如果没有父路径（例如 key="ccc"），返回 data 和 field
-    if (parentPath.length === 0) {
-        return { parent: data, keyField: field };
-    }
-    // 遍历父路径，补全 null/undefined
-    let current = data;
-    for (const k of parentPath) {
-        if (current[k] == null) { // 包括 null 和 undefined
-            current[k] = {};
-        }
-        current = current[k];
-    }
-    return { parent: current, keyField: field };
-}

package/dist/inline-cell-editor/index.d.ts

@@ -1,6 +0,0 @@
-import editorManager from "./EditorManager";
-import { acceptProps } from "./acceptProps";
-import InlineCellEditor from "./InlineCellEditor.svelte";
-import { getNestObject } from "./getNestObject";
-export default InlineCellEditor;
-export { editorManager, acceptProps, getNestObject };

package/dist/inline-cell-editor/index.js

@@ -1,6 +0,0 @@
-import editorManager from "./EditorManager";
-import { acceptProps } from "./acceptProps";
-import InlineCellEditor from "./InlineCellEditor.svelte";
-import { getNestObject } from "./getNestObject";
-export default InlineCellEditor;
-export { editorManager, acceptProps, getNestObject };

package/dist/input-options-select/InputOptionsSelect.svelte

@@ -1,293 +0,0 @@
-<script lang="ts">
-
-    import {DisplayMode} from "../types";
-    import type {OnChangeHandler} from "../types";
-    import CommonPicker from "../common/CommonPicker.svelte";
-    import loadingGif from "../assets/loading.gif";
-    import type {LazyLoader} from "../types";
-    import type {RetrieveOptionText} from "../types";
-
-    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
-    export let disabled: boolean = false;
-    export let readonly: boolean = false;
-    export let compact: boolean = false;
-    export let text: string = '';
-    export let value: any = null;
-    export let keyField: string = "code";
-    export let textField: string | undefined = undefined;
-    export let retrieveText: RetrieveOptionText | undefined = undefined;
-    export let displayCode: boolean = false;
-    export let menu$height: number = 0;
-    export let style: string = '';
-    export let placeholder: string = "";
-    export let displayMode: DisplayMode = DisplayMode.Edit;
-    export let itemRender: any = null;
-    export let onchange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
-    export let oninput: OnChangeHandler<string> = null as unknown as OnChangeHandler<string>;
-    export let onfocus: (() => void) | null = null;
-    export let onblur: (() => void) | null = null;
-    export let lazyLoader: LazyLoader = null as unknown as LazyLoader;
-
-    let editor: any;
-    let inputText: string;
-    let oldValue: any = value;
-    let scrollElement: any;
-    let options: Array<any> = [];
-    
-    let idleTime = 0;
-    let interval: any;
-    let pageNo: number;
-    let isBusy: boolean;
-    let hasMore: boolean;
-    let loading: boolean = false;
-    let loadingController: AbortController | null = null;
-
-    const handleInputText = () => {
-        if (lazyLoader != null) {
-            delayReload();
-        }
-    }
-
-    const lazyLoad = async (searchText: string, page: number, isLoadMore: boolean = false) => {
-        // 取消之前的加载请求
-        if (loadingController) {
-            loadingController.abort();
-        }
-        
-        // 创建新的AbortController
-        loadingController = new AbortController();
-        const currentController = loadingController;
-        
-        loading = true;
-        if (!isLoadMore) {
-            isBusy = true;
-        }
-        
-        try {
-            let res = await lazyLoader(searchText, page);
-            
-            // 检查请求是否被取消
-            if (currentController.signal.aborted) {
-                return;
-            }
-            
-            if (page == 1) {
-                options = res.list;
-            } else {
-                options = [...options, ...res.list];
-            }
-            hasMore = res.hasMore;
-            pageNo = page;
-        } catch (e) {
-            // 如果是取消请求的错误，忽略它
-            if (currentController.signal.aborted) {
-                return;
-            }
-            console.error('LazyLoader error:', e);
-            if (page == 1) {
-                options = [];
-                hasMore = false;
-            }
-        } finally {
-            // 只有当前请求没有被取消时才更新loading状态
-            if (!currentController.signal.aborted) {
-                loading = false;
-                isBusy = false;
-                loadingController = null;
-            }
-        }
-    }
-
-    const delayReload = () => {
-        // 取消之前的延迟加载
-        if (interval) {
-            clearInterval(interval);
-        }
-        
-        // 取消当前正在进行的加载
-        if (loadingController) {
-            loadingController.abort();
-            loadingController = null;
-            loading = false;
-            isBusy = false;
-        }
-        
-        // 重置状态
-        options = [];
-        hasMore = false;
-        
-        // 设置新的延迟加载
-        idleTime = 0;
-        interval = setInterval(() => {
-            idleTime += 100;
-            if (idleTime >= 200) {
-                clearInterval(interval);
-                lazyLoad(text, 1, false);
-            }
-        }, 100);
-    }
-
-    const loadMore = () => {
-        if (hasMore && !isBusy) {
-            lazyLoad(text, pageNo + 1, true);
-        }
-    }
-
-    const handleScroll = (event: Event) => {
-        const target = event.target as HTMLElement;
-        const scrollTop = target.scrollTop;
-        const scrollHeight = target.scrollHeight;
-        const clientHeight = target.clientHeight;
-        
-        // 当滚动到距离底部20px以内时，自动加载下一页
-        if (scrollTop + clientHeight >= scrollHeight - 20 && hasMore && !isBusy) {
-            loadMore();
-        }
-    }
-
-    const handleItemClick = (data: any) => () => {
-        isUserTyping = false;
-        value = data[keyField];
-        if (value != oldValue) {
-            onchange?.(data);
-        }
-        if (retrieveText) {
-            text = retrieveText(data)
-        } else if (textField) {
-            text = data[textField]
-        }
-        editor.focus();
-        showPopup = false;
-    }
-
-    let composing: boolean = false;
-    let hasFocus: boolean = false;
-    let isUserTyping: boolean = false;
-
-    const handleInput = () => {
-        isUserTyping = true;
-        if (!composing) {
-            text = inputText;
-            value = null;
-            oninput?.(text);
-            handleInputText();
-        }
-    };
-    
-    const handleCompositionStart = (event: CompositionEvent) => {
-        composing = true;
-    };
-
-    const handleCompositionEnd = (event: CompositionEvent) => {
-        composing = false;
-        text = inputText;
-        value = null;
-        oninput?.(text);
-        handleInputText();
-    };
-
-    const handleFocus = () => {
-        if (!hasFocus) {
-            hasFocus = true;
-            onfocus?.();
-        }
-    };
-
-    const handleBlur = (event: FocusEvent) => {
-        setTimeout(() => {
-            const focused = scrollElement!=null && scrollElement.contains(document.activeElement);
-            if (!focused) {
-                hasFocus = false;
-                if (value == null) {
-                    inputText = '';
-                }
-                onblur?.();
-            }
-        }, 50)
-    };
-
-    const getDisplayText = (item: any) => {
-        return retrieveText?.(item) ?? item[textField ?? keyField];
-    }
-
-    const clean = () => {
-        value = null;
-        text = '';
-        onchange?.(value);
-        showPopup = false;
-        editor.focus();
-    }
-
-    let showPopup: boolean = false;
-
-    let mh;
-
-    $: mh = `min-height: 80px; ${menu$height > 0 ? 'height: ' + menu$height + 'px;' : 'max-height: 300px;'} overflow-y: auto;`;
-
-    $: showPopup = (options && options.length > 0) || loading;
-
-    $: {
-        // 不要在用户正在输入时更新inputText
-        if (!isUserTyping) {
-            if (value == null) {
-                inputText = text;
-            } else {
-                // 如果已选择值，根据焦点状态显示keyField或textField
-                let selectedItem = options.find(op => op[keyField] == value);
-                if (selectedItem) {
-                    inputText = hasFocus && displayCode ? selectedItem[keyField] : getDisplayText(selectedItem);
-                } else {
-                    inputText = hasFocus && displayCode ? value : text;
-                }
-            }
-        }
-    }
-
-
-    $: if (!showPopup && value == null && !isUserTyping) {
-        text = '';
-    }
-
-    // 监听popup关闭，如果是点击外部关闭且之前有焦点，触发blur
-    $: if (!showPopup && hasFocus) {
-        // 延迟检查，如果input仍然有焦点，说明是选择项目导致的关闭
-        setTimeout(() => {
-            if (document.activeElement !== editor) {
-                hasFocus = false;
-                onblur?.();
-            }
-        }, 50);
-    }
-
-
-</script>
-<!-- 待解决浏览模式显示的问题 -->
-
-<CommonPicker {displayMode} {variant} {style} {compact}
-              bind:showPopup canClean={value!=null} autoFit {clean} textValue={text} {readonly} {disabled}>
-    <input style="width: 100%" bind:this={editor} {placeholder}
-           class="text-editor" bind:value={inputText} {readonly}
-           on:input={handleInput}
-           on:compositionstart={handleCompositionStart} on:compositionend={handleCompositionEnd}
-           on:focus={handleFocus} on:blur={handleBlur}/>
-    {#if loading}
-        <div style="position: absolute; top: 0px; bottom: 0px; right: 8px">
-            <div style="position: relative; top: 50%; transform: translateY(-50%)">
-                <img src={loadingGif} alt="loading" width="16" height="16"/>
-            </div>
-        </div>
-    {/if}
-    <div class="options-popover" bind:this={scrollElement} style={mh} slot="popup-panel" on:scroll={handleScroll}>
-        {#each options as op}
-            <div class="option-item" on:click={handleItemClick(op)} aria-hidden="true">
-                {#if itemRender != null}
-                    <svelte:component this={itemRender} item={op}/>
-                {:else}
-                    <div style="padding: 6px 8px">
-                        <span>{getDisplayText(op)}</span>
-                    </div>
-                {/if}
-            </div>
-        {/each}
-    </div>
-</CommonPicker>

package/dist/input-options-select/InputOptionsSelect.svelte.d.ts

@@ -1,43 +0,0 @@
-import { DisplayMode } from "../types";
-import type { OnChangeHandler } from "../types";
-import type { LazyLoader } from "../types";
-import type { RetrieveOptionText } from "../types";
-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 InputOptionsSelect: $$__sveltets_2_IsomorphicComponent<{
-    variant?: "" | "plain" | "outlined" | "filled";
-    disabled?: boolean;
-    readonly?: boolean;
-    compact?: boolean;
-    text?: string;
-    value?: any;
-    keyField?: string;
-    textField?: string | undefined;
-    retrieveText?: RetrieveOptionText | undefined;
-    displayCode?: boolean;
-    menu$height?: number;
-    style?: string;
-    placeholder?: string;
-    displayMode?: DisplayMode;
-    itemRender?: any;
-    onchange?: OnChangeHandler<any>;
-    oninput?: OnChangeHandler<string>;
-    onfocus?: (() => void) | null;
-    onblur?: (() => void) | null;
-    lazyLoader?: LazyLoader;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type InputOptionsSelect = InstanceType<typeof InputOptionsSelect>;
-export default InputOptionsSelect;

package/dist/input-options-select/index.d.ts

@@ -1,4 +0,0 @@
-import InputOptionsSelect from "./InputOptionsSelect.svelte";
-import type { RetrieveOptionText } from "./types";
-export default InputOptionsSelect;
-export type { RetrieveOptionText };

package/dist/input-options-select/types.d.ts

@@ -1 +0,0 @@
-export type {};

package/dist/input-options-select/types.js

@@ -1 +0,0 @@
-export {};