@ticatec/uniface-element 5.0.0 → 5.0.2

package/docs/components/input-options-select/README.md

@@ -0,0 +1,163 @@
+# InputOptionsSelect
+
+表单组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+允许输入文字并从候选项中选择的组合控件。
+
+## 适用场景
+
+- 客户、产品和地址快速检索
+- 用户既需要键入搜索又需要选择完整对象
+
+## 导入
+
+```ts
+import InputOptionsSelect from '@ticatec/uniface-element/InputOptionsSelect';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 主题样式名称，用于切换组件外观主题 |
+| `tooltip` | 否 | `string` | 否 | `undefined` | 否 | 悬停提示信息，鼠标悬浮在字段上时显示 |
+| `error` | 否 | `string` | 否 | `undefined` | 否 | 错误信息，用于在字段下方展示校验错误提示 |
+| `disabled` | 是 | `boolean` | 否 | `false` | 否 | 是否禁用该字段，禁用后字段不可编辑且不响应交互 |
+| `readonly` | 是 | `boolean` | 否 | `false` | 否 | 是否只读，只读状态下字段不可编辑但可聚焦和复制 |
+| `compact` | 否 | `boolean` | 否 | `false` | 否 | 是否启用紧凑模式，紧凑模式下字段内部间距更小 |
+| `variant` | 是 | `EditorVariant` | 否 | `undefined` | 否 | 编辑器外观样式变体 |
+| `placeholder` | 是 | `string` | 否 | `undefined` | 否 | 占位提示文本，字段值为空时在输入区域内展示 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 自定义内联样式，会应用到字段根容器上 |
+| `onfocus` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段获得焦点时触发的回调 |
+| `onblur` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段失去焦点时触发的回调 |
+| `onchange` | 是 | `(value?: any) => void` | 否 | `undefined` | 否 | 字段值发生变化时触发的回调 |
+| `mandatory` | 否 | `boolean` | 否 | `false` | 否 | 是否为必填字段，必填时字段值不能为空 |
+| `text` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `value` | 是 | `any` | 否 | `$bindable()` | 是 | 组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。 |
+| `keyField` | 否 | `string` | 否 | `'code'` | 否 | 数据项中作为唯一值或选中值的字段名。 |
+| `textField` | 否 | `string` | 否 | `"text"` | 否 | 数据项中用于界面显示的文本字段名。 |
+| `retrieveText` | 否 | `RetrieveOptionText` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `displayCode` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `menu$height` | 否 | `number` | 否 | `0` | 否 | 高度配置，数值单位为像素。 |
+| `itemRender` | 否 | `any` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `lazyLoader` | 是 | `ListLazyLoader` | 否 | `undefined` | 否 | 异步分页加载器，签名为 `(filterText, pageNo) => Promise<{list, hasMore}>`。ListBox 当前从第 1 页开始请求，滚动到底部且 `hasMore=true` 时继续加载。 |
+| `oninput` | 否 | `(value: string) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `disabled`
+
+是否禁用该字段，禁用后字段不可编辑且不响应交互
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`disabled={false}`
+
+### `readonly`
+
+是否只读，只读状态下字段不可编辑但可聚焦和复制
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`readonly={false}`
+
+### `variant`
+
+编辑器外观样式变体
+
+- 类型：`EditorVariant`
+- 默认值：`undefined`
+- 示例写法：`variant="plain"`
+
+### `placeholder`
+
+占位提示文本，字段值为空时在输入区域内展示
+
+- 类型：`string`
+- 默认值：`undefined`
+- 示例写法：`placeholder="请输入或选择"`
+
+### `onchange`
+
+字段值发生变化时触发的回调
+
+- 类型：`(value?: any) => void`
+- 默认值：`undefined`
+- 示例写法：`onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}`
+
+### `value`
+
+组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。
+
+- 类型：`any`
+- 默认值：`$bindable()`
+- 推荐写法：`bind:value`
+
+### `lazyLoader`
+
+异步分页加载器，签名为 `(filterText, pageNo) => Promise<{list, hasMore}>`。ListBox 当前从第 1 页开始请求，滚动到底部且 `hasMore=true` 时继续加载。
+
+- 类型：`ListLazyLoader`
+- 默认值：`undefined`
+- 示例写法：参见下方完整示例中的类型化实现。
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `EditorVariant`
+
+```ts
+export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
+```
+
+### `RetrieveOptionText`
+
+```ts
+export type RetrieveOptionText = (item: any) => string;
+```
+
+### `ListLazyLoader`
+
+```ts
+export type ListLazyLoader = (text: string, pageNo: number) => Promise<LoadResult>;
+```
+
+### `LoadResult`
+
+```ts
+export interface LoadResult {
+    hasMore: boolean;
+    list: Array<any>;
+}
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import InputOptionsSelect from '@ticatec/uniface-element/InputOptionsSelect';
+  let value = $state<any>('dev');
+</script>
+
+<InputOptionsSelect
+  bind:value
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  keyField="code"
+  textField="text"
+  disabled={false}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>
+```
+
+## 源码
+
+- `src/lib/form/input_options_select/InputOptionsSelect.svelte`

package/docs/components/input-options-select/example.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import InputOptionsSelect from '@ticatec/uniface-element/InputOptionsSelect';
+  let value = $state<any>('dev');
+</script>
+
+<InputOptionsSelect
+  bind:value
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  keyField="code"
+  textField="text"
+  disabled={false}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>

package/docs/components/list-box/ListItem.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  let {item, selected = false}: {item: {name: string; department: string}; selected?: boolean} = $props();
+</script>
+
+<div class:selected>
+  <strong>{item.name}</strong>
+  <small>{item.department}</small>
+</div>
+
+<style>
+  div {display: flex; justify-content: space-between; padding: 8px 12px;}
+  div.selected {background: #eef4ff; color: #174ea6;}
+  small {color: #64748b;}
+</style>

package/docs/components/list-box/README.md

@@ -0,0 +1,221 @@
+# ListBox
+
+数据展示组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+支持自定义行、本地过滤、选择和懒加载的列表框。
+
+## 适用场景
+
+- 人员、商品和权限项选择
+- 需要单选、多选、搜索或滚动分页加载
+
+## 导入
+
+```ts
+import ListBox from '@ticatec/uniface-element/ListBox';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `readonly` | 是 | `boolean` | 否 | `false` | 否 | 只读状态。保留内容展示，但阻止用户修改。 |
+| `style` | 否 | `string \| null` | 否 | `undefined` | 否 | 附加到组件根元素的内联样式。 |
+| `list` | 是 | `Array<any>` | 否 | `undefined` | 否 | 组件展示的数据集合。数据项结构由相关列、字段映射或渲染器决定。 |
+| `itemRender` | 否 | `any` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `selectMode` | 是 | `'none' \| 'single' \| 'multiple'` | 否 | `'none'` | 否 | 选择模式：none 只响应普通点击，single 单选，multiple 多选。 |
+| `filter` | 是 | `FunFilter \| null` | 否 | `undefined` | 否 | 本地过滤函数。接收当前数据项和搜索文字，返回 true 时保留该项。仅用于已经加载到内存中的 list。 |
+| `lazyLoader` | 是 | `ListLazyLoader \| null` | 否 | `undefined` | 否 | 异步分页加载器，签名为 `(filterText, pageNo) => Promise<{list, hasMore}>`。ListBox 当前从第 1 页开始请求，滚动到底部且 `hasMore=true` 时继续加载。 |
+| `selectedItem` | 是 | `any` | 否 | `undefined` | 否 | 单选模式下的当前选中项；选中变化通过 `onSelectChange` 返回。 |
+| `selectedList` | 是 | `Array<any>` | 否 | `$bindable([])` | 是 | 多选模式下的选中项数组，推荐使用 `bind:selectedList`。 |
+| `class` | 否 | `string` | 否 | `undefined` | 否 | 附加到组件根元素的 CSS class。 |
+| `item$props` | 否 | `any` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `onchange` | 是 | `OnSelectChange` | 否 | `undefined` | 否 | 用户完成值变更时调用；编程式赋值是否触发请以组件行为说明为准。 |
+| `onSelectChange` | 否 | `OnSelectChange` | 否 | `undefined` | 否 | @deprecated 请使用 onchange；仍受支持以兼容旧调用。 |
+| `onItemDblClick` | 否 | `OnItemDblClick` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `onItemClick` | 否 | `OnItemClick` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `title` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `round` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `filterText` | 是 | `string` | 否 | `undefined` | 否 | 过滤输入框的外部初始值或受控值，用于预设搜索条件。 |
+| `header` | 否 | `any` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `footer` | 否 | `any` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `loadMoreIndicator` | 否 | `any` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `readonly`
+
+只读状态。保留内容展示，但阻止用户修改。
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`readonly={false}`
+
+### `list`
+
+组件展示的数据集合。数据项结构由相关列、字段映射或渲染器决定。
+
+- 类型：`Array<any>`
+- 默认值：`undefined`
+- 示例写法：`list={[
+    {id: 1, name: '张三', department: '研发部'},
+    {id: 2, name: '李四', department: '产品部'}
+  ]}`
+
+### `selectMode`
+
+选择模式：none 只响应普通点击，single 单选，multiple 多选。
+
+- 类型：`'none' | 'single' | 'multiple'`
+- 默认值：`'none'`
+- 示例写法：`selectMode="single"`
+
+### `filter`
+
+本地过滤函数。接收当前数据项和搜索文字，返回 true 时保留该项。仅用于已经加载到内存中的 list。
+
+- 类型：`FunFilter | null`
+- 默认值：`undefined`
+- 示例写法：参见下方完整示例中的类型化实现。
+
+### `lazyLoader`
+
+异步分页加载器，签名为 `(filterText, pageNo) => Promise<{list, hasMore}>`。ListBox 当前从第 1 页开始请求，滚动到底部且 `hasMore=true` 时继续加载。
+
+- 类型：`ListLazyLoader | null`
+- 默认值：`undefined`
+- 示例写法：参见下方完整示例中的类型化实现。
+
+### `selectedItem`
+
+单选模式下的当前选中项；选中变化通过 `onSelectChange` 返回。
+
+- 类型：`any`
+- 默认值：`undefined`
+- 示例写法：参见下方完整示例中的类型化实现。
+
+### `selectedList`
+
+多选模式下的选中项数组，推荐使用 `bind:selectedList`。
+
+- 类型：`Array<any>`
+- 默认值：`$bindable([])`
+- 推荐写法：`bind:selectedList`
+
+### `onchange`
+
+用户完成值变更时调用；编程式赋值是否触发请以组件行为说明为准。
+
+- 类型：`OnSelectChange`
+- 默认值：`undefined`
+- 示例写法：`onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}`
+
+### `filterText`
+
+过滤输入框的外部初始值或受控值，用于预设搜索条件。
+
+- 类型：`string`
+- 默认值：`undefined`
+- 示例写法：`filterText="研发"`
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `FunFilter`
+
+```ts
+export type FunFilter = (item: any, text: string) => boolean;
+```
+
+### `ListLazyLoader`
+
+```ts
+export type ListLazyLoader = (text: string, pageNo: number) => Promise<LoadResult>;
+```
+
+### `LoadResult`
+
+```ts
+export interface LoadResult {
+    hasMore: boolean;
+    list: Array<any>;
+}
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+配套的自定义行组件见 [ListItem.svelte](./ListItem.svelte)。
+
+```svelte
+<script lang="ts">
+  import ListBox from '@ticatec/uniface-element/ListBox';
+  import ListItem from './ListItem.svelte';
+
+  type User = {id: number; name: string; department: string};
+  const users: User[] = [
+    {id: 1, name: '张三', department: '研发部'},
+    {id: 2, name: '李四', department: '产品部'},
+    {id: 3, name: '王五', department: '研发部'}
+  ];
+  let selectedUser = $state<User | null>(null);
+  let selectedUsers = $state<User[]>([]);
+
+  const filterUser = (user: User, keyword: string) =>
+    user.name.includes(keyword) || user.department.includes(keyword);
+
+  async function lazyLoader(keyword: string, pageNo: number) {
+    await new Promise((resolve) => setTimeout(resolve, 400));
+    const pageSize = 10;
+    const all = Array.from({length: 35}, (_, index) => ({
+      id: index + 1,
+      name: `用户 ${index + 1}`,
+      department: index % 2 ? '产品部' : '研发部'
+    })).filter((user) => filterUser(user, keyword));
+    const start = (pageNo - 1) * pageSize;
+    return {
+      list: all.slice(start, start + pageSize),
+      hasMore: start + pageSize < all.length
+    };
+  }
+</script>
+
+<h3>本地过滤与单选</h3>
+<ListBox
+  list={users}
+  itemRender={ListItem}
+  selectMode="single"
+  filter={filterUser}
+  filterText="研发"
+  title="员工列表"
+  onSelectChange={(user) => selectedUser = user}
+/>
+<p>当前选中：{selectedUser?.name ?? '无'}</p>
+
+<h3>多选</h3>
+<ListBox
+  list={users}
+  itemRender={ListItem}
+  selectMode="multiple"
+  bind:selectedList={selectedUsers}
+/>
+<p>已选择：{selectedUsers.map((user) => user.name).join('、') || '无'}</p>
+
+<h3>分页懒加载</h3>
+<ListBox
+  itemRender={ListItem}
+  selectMode="single"
+  {lazyLoader}
+  title="滚动到底部自动加载下一页"
+  onSelectChange={(user) => console.log('lazy selected', user)}
+/>
+```
+
+## 源码
+
+- `src/lib/data_display/list_box/ListBox.svelte`

package/docs/components/list-box/example.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import ListBox from '@ticatec/uniface-element/ListBox';
+  import ListItem from './ListItem.svelte';
+
+  type User = {id: number; name: string; department: string};
+  const users: User[] = [
+    {id: 1, name: '张三', department: '研发部'},
+    {id: 2, name: '李四', department: '产品部'},
+    {id: 3, name: '王五', department: '研发部'}
+  ];
+  let selectedUser = $state<User | null>(null);
+  let selectedUsers = $state<User[]>([]);
+
+  const filterUser = (user: User, keyword: string) =>
+    user.name.includes(keyword) || user.department.includes(keyword);
+
+  async function lazyLoader(keyword: string, pageNo: number) {
+    await new Promise((resolve) => setTimeout(resolve, 400));
+    const pageSize = 10;
+    const all = Array.from({length: 35}, (_, index) => ({
+      id: index + 1,
+      name: `用户 ${index + 1}`,
+      department: index % 2 ? '产品部' : '研发部'
+    })).filter((user) => filterUser(user, keyword));
+    const start = (pageNo - 1) * pageSize;
+    return {
+      list: all.slice(start, start + pageSize),
+      hasMore: start + pageSize < all.length
+    };
+  }
+</script>
+
+<h3>本地过滤与单选</h3>
+<ListBox
+  list={users}
+  itemRender={ListItem}
+  selectMode="single"
+  filter={filterUser}
+  filterText="研发"
+  title="员工列表"
+  onSelectChange={(user) => selectedUser = user}
+/>
+<p>当前选中：{selectedUser?.name ?? '无'}</p>
+
+<h3>多选</h3>
+<ListBox
+  list={users}
+  itemRender={ListItem}
+  selectMode="multiple"
+  bind:selectedList={selectedUsers}
+/>
+<p>已选择：{selectedUsers.map((user) => user.name).join('、') || '无'}</p>
+
+<h3>分页懒加载</h3>
+<ListBox
+  itemRender={ListItem}
+  selectMode="single"
+  {lazyLoader}
+  title="滚动到底部自动加载下一页"
+  onSelectChange={(user) => console.log('lazy selected', user)}
+/>

package/docs/components/lookup-editor/README.md

@@ -0,0 +1,137 @@
+# LookupEditor
+
+表单组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+通过弹出查找界面选择复杂业务对象的编辑器。
+
+## 适用场景
+
+- 客户、订单和组织对象查找
+- 候选数据复杂、需要远程检索或额外字段展示
+
+## 导入
+
+```ts
+import LookupEditor from '@ticatec/uniface-element/LookupEditor';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 主题样式名称，用于切换组件外观主题 |
+| `tooltip` | 否 | `string` | 否 | `undefined` | 否 | 悬停提示信息，鼠标悬浮在字段上时显示 |
+| `error` | 否 | `string` | 否 | `undefined` | 否 | 错误信息，用于在字段下方展示校验错误提示 |
+| `disabled` | 是 | `boolean` | 否 | `false` | 否 | 是否禁用该字段，禁用后字段不可编辑且不响应交互 |
+| `readonly` | 是 | `boolean` | 否 | `false` | 否 | 是否只读，只读状态下字段不可编辑但可聚焦和复制 |
+| `compact` | 否 | `boolean` | 否 | `false` | 否 | 是否启用紧凑模式，紧凑模式下字段内部间距更小 |
+| `variant` | 是 | `EditorVariant` | 否 | `undefined` | 否 | 编辑器外观样式变体 |
+| `placeholder` | 是 | `string` | 否 | `undefined` | 否 | 占位提示文本，字段值为空时在输入区域内展示 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 自定义内联样式，会应用到字段根容器上 |
+| `onfocus` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段获得焦点时触发的回调 |
+| `onblur` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段失去焦点时触发的回调 |
+| `onchange` | 是 | `(value?: any) => void` | 否 | `undefined` | 否 | 字段值发生变化时触发的回调 |
+| `mandatory` | 否 | `boolean` | 否 | `false` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `value` | 是 | `any` | 否 | `$bindable()` | 是 | 组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。 |
+| `text` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `onaction` | 否 | `() => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `leadingIcon` | 否 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 渲染入口，用于替换或补充默认内容。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `disabled`
+
+是否禁用该字段，禁用后字段不可编辑且不响应交互
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`disabled={false}`
+
+### `readonly`
+
+是否只读，只读状态下字段不可编辑但可聚焦和复制
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`readonly={false}`
+
+### `variant`
+
+编辑器外观样式变体
+
+- 类型：`EditorVariant`
+- 默认值：`undefined`
+- 示例写法：`variant="plain"`
+
+### `placeholder`
+
+占位提示文本，字段值为空时在输入区域内展示
+
+- 类型：`string`
+- 默认值：`undefined`
+- 示例写法：`placeholder="请输入或选择"`
+
+### `onchange`
+
+字段值发生变化时触发的回调
+
+- 类型：`(value?: any) => void`
+- 默认值：`undefined`
+- 示例写法：`onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}`
+
+### `value`
+
+组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。
+
+- 类型：`any`
+- 默认值：`$bindable()`
+- 推荐写法：`bind:value`
+
+## 组件实例方法
+
+通过 `bind:this` 获取组件实例后调用。
+
+| 方法 | 类型 | 说明 |
+| --- | --- | --- |
+| `focus()` | `() => void` | 组件实例方法。 |
+| `clear()` | `() => void` | 组件实例方法。 |
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `EditorVariant`
+
+```ts
+export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import LookupEditor from '@ticatec/uniface-element/LookupEditor';
+  let value = $state<any>();
+</script>
+
+<LookupEditor
+  bind:value
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  disabled={false}
+  readonly={false}
+  compact={true}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>
+```
+
+## 源码
+
+- `src/lib/form/lookup_editor/LookupEditor.svelte`

package/docs/components/lookup-editor/example.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import LookupEditor from '@ticatec/uniface-element/LookupEditor';
+  let value = $state<any>();
+</script>
+
+<LookupEditor
+  bind:value
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  disabled={false}
+  readonly={false}
+  compact={true}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>