远端虚拟选择器
在虚拟选择器上管理异步选项、重载和请求取消。
基础用法
示例通过本地 Promise 函数加载选项，支持模型更新、暂停与重载。所有请求都留在演示内部。
点击“读取当前标签”读取实例的只读 selectedLabel：空模型返回空字符串，选择后返回当前标签。 完整说明。
本地数据与生命周期
vue
<template>
<section class="data-demo">
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="active">启用请求</AsamCheckboxItem>
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="multipleMode">启用多选</AsamCheckboxItem>
<AsamRemoteSelectV2
v-if="!multipleMode"
ref="control"
v-model="value"
:source="source"
:active="active"
size="default"
placeholder="请选择或输入"
@error="error = $event.message"
@success="error = ''"
>
<template #prefix><span aria-hidden="true">状态</span></template>
</AsamRemoteSelectV2>
<AsamRemoteSelectV2
v-else
ref="control"
v-model="multipleValue"
multiple
:source="source"
:active="active"
size="default"
placeholder="请选择或输入"
@error="error = $event.message"
@success="error = ''"
>
<template #prefix><span aria-hidden="true">状态</span></template>
</AsamRemoteSelectV2>
<div class="demo-actions">
<AsamButton type="default" native-type="button" :disabled="!active" @click="reload"
>强制重载</AsamButton
>
<AsamButton type="default" native-type="button" @click="control?.cancel()"
>取消请求</AsamButton
>
<AsamButton
type="default"
native-type="button"
@mousedown.prevent
@click="readSelectedLabel"
>读取当前标签</AsamButton
>
<AsamButton type="default" native-type="button" @click="control?.focus()"
>聚焦选择器</AsamButton
>
<AsamButton
type="default"
native-type="button"
@mousedown.prevent
@click="control?.blur()"
>失焦选择器</AsamButton
>
</div>
<p class="example-paragraph" role="status">{{ result }} {{ error }}</p>
<pre>{{ multipleMode ? multipleValue : value }}</pre>
<pre data-testid="selected-label">{{ selectedLabel }}</pre>
</section>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
defineOptions({ name: 'AsamRemoteSelectV2BasicExample' });
import { AsamCheckboxItem, AsamButton, AsamRemoteSelectV2, defineAsamOptions } from '@asam-ui/ui';
import type { AsamRemoteSelectV2Expose, AsamApiRequest } from '@asam-ui/ui';
interface Item {
label: string;
value: string;
children?: readonly Item[];
}
interface Query {
text: string;
}
const value = ref<string | null>(null);
const active = ref(true);
const multipleMode = ref(false);
const multipleValue = ref<string[]>([]);
const control = ref<AsamRemoteSelectV2Expose<string, Item>>();
const selectedLabel = ref<string | string[]>('');
function readSelectedLabel() {
selectedLabel.value = control.value?.selectedLabel ?? '';
}
const error = ref('');
const result = ref('');
const items: readonly Item[] = [
{ label: '准备', value: 'ready' },
{ label: '进行', value: 'running' }
];
const api: AsamApiRequest<Query, readonly Item[]> = async (params, context) => {
context.signal.throwIfAborted();
return items.filter((item) => item.label.includes(params.text));
};
const factory = defineAsamOptions<string, Item>();
function source(text: string) {
return factory.api({
api,
params: { text },
transform: (response) => response,
fieldNames: { label: 'label', value: 'value' }
});
}
async function reload() {
const response = await control.value?.reload({ force: true });
result.value = response?.status ?? 'cancelled';
}
</script>
<style scoped>
.data-demo {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.data-demo > p,
.data-demo > pre,
.data-demo > fieldset {
width: 100%;
min-width: 0;
margin: 0;
}
.demo-actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<section class="data-demo">
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="active">启用请求</AsamCheckboxItem>
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="multipleMode">启用多选</AsamCheckboxItem>
<AsamRemoteSelectV2
v-if="!multipleMode"
ref="control"
v-model="value"
:source="source"
:active="active"
size="default"
placeholder="请选择或输入"
@error="error = $event.message"
@success="error = ''"
>
<template #prefix><span aria-hidden="true">状态</span></template>
</AsamRemoteSelectV2>
<AsamRemoteSelectV2
v-else
ref="control"
v-model="multipleValue"
multiple
:source="source"
:active="active"
size="default"
placeholder="请选择或输入"
@error="error = $event.message"
@success="error = ''"
>
<template #prefix><span aria-hidden="true">状态</span></template>
</AsamRemoteSelectV2>
<div class="demo-actions">
<AsamButton type="default" native-type="button" :disabled="!active" @click="reload"
>强制重载</AsamButton
>
<AsamButton type="default" native-type="button" @click="control?.cancel()"
>取消请求</AsamButton
>
<AsamButton
type="default"
native-type="button"
@mousedown.prevent
@click="readSelectedLabel"
>读取当前标签</AsamButton
>
<AsamButton type="default" native-type="button" @click="control?.focus()"
>聚焦选择器</AsamButton
>
<AsamButton
type="default"
native-type="button"
@mousedown.prevent
@click="control?.blur()"
>失焦选择器</AsamButton
>
</div>
<p class="example-paragraph" role="status">{{ result }} {{ error }}</p>
<pre>{{ multipleMode ? multipleValue : value }}</pre>
<pre data-testid="selected-label">{{ selectedLabel }}</pre>
</section>
</template>
<script setup>
import { ref } from 'vue';
defineOptions({ name: 'AsamRemoteSelectV2BasicExample' });
import { AsamCheckboxItem, AsamButton, AsamRemoteSelectV2, defineAsamOptions } from '@asam-ui/ui';
const value = ref(null);
const active = ref(true);
const multipleMode = ref(false);
const multipleValue = ref([]);
const control = ref();
const selectedLabel = ref('');
function readSelectedLabel() {
selectedLabel.value = control.value?.selectedLabel ?? '';
}
const error = ref('');
const result = ref('');
const items = [
{ label: '准备', value: 'ready' },
{ label: '进行', value: 'running' }
];
const api = async (params, context) => {
context.signal.throwIfAborted();
return items.filter((item) => item.label.includes(params.text));
};
const factory = defineAsamOptions();
function source(text) {
return factory.api({
api,
params: { text },
transform: (response) => response,
fieldNames: { label: 'label', value: 'value' }
});
}
async function reload() {
const response = await control.value?.reload({ force: true });
result.value = response?.status ?? 'cancelled';
}
</script>
<style scoped>
.data-demo {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.data-demo > p,
.data-demo > pre,
.data-demo > fieldset {
width: 100%;
min-width: 0;
margin: 0;
}
.demo-actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>本地创建与完整实体
allow-create 与 filterable 开启后，createOption(text) 同步返回完整的 AsamOption<V, I>（label、正确类型的 value 和真实 raw）。默认记录使用字符串 value； 数字、布尔值或自定义 raw 必须提供类型一致的同步工厂。
本地创建、规范项与来源重置
vue
<template>
<section class="data-demo demo-layout-1">
<div class="actions">
<AsamButton type="default" native-type="button" @click="reload">强制重载</AsamButton>
<AsamButton type="default" native-type="button" @click="control?.clearCreatedOptions()"
>清空本地创建集合</AsamButton
>
<AsamButton type="default" native-type="button" @click="value = null"
>清空模型</AsamButton
>
<AsamButton
type="default"
native-type="button"
@click="tenant = tenant === 'a' ? 'b' : 'a'"
>切换逻辑来源</AsamButton
>
<AsamCheckboxItem v-model="failure">模拟失败</AsamCheckboxItem>
<AsamCheckboxItem v-model="canonical">来源接受 Omega 同值项</AsamCheckboxItem>
</div>
<AsamRemoteSelectV2
ref="control"
v-model="value"
:source="source"
:debounce-ms="100"
:create-option="createOption"
value-mode="object"
allow-create
filterable
clearable
size="default"
placeholder="输入 Omega 并选择创建项"
@success="providerValues = $event.map((item) => item.value)"
@error="message = $event.message"
>
<template #header><p class="example-paragraph">本地创建和来源选项分别保存</p></template>
<template #footer><p class="example-paragraph">刷新保留本地项，逻辑来源改变时清空本地集合</p></template>
</AsamRemoteSelectV2>
<p class="example-paragraph" role="status">{{ result }} {{ message }}</p>
<pre>模型：{{ JSON.stringify(value) }}</pre>
<pre>工厂调用：{{ JSON.stringify(createdTexts) }}</pre>
<pre>provider success 值：{{ JSON.stringify(providerValues) }}</pre>
</section>
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamRemoteSelectV2, defineAsamOptions } from '@asam-ui/ui';
import type {
AsamOption,
AsamCreateOption,
AsamValue,
AsamRemoteSelectV2Expose,
AsamApiRequest
} from '@asam-ui/ui';
interface Member {
id: string;
label: string;
value: string;
}
interface Query {
tenant: string;
text: string;
}
const tenant = ref('a');
const failure = ref(false);
const canonical = ref(false);
defineOptions({ name: 'AsamRemoteSelectV2LocalCreationDemo' });
const value = ref<AsamOption<string, Member> | null>(null);
const control = ref<AsamRemoteSelectV2Expose<string, Member>>();
const createdTexts = ref<string[]>([]);
const providerValues = ref<AsamValue[]>([]);
const message = ref('');
const result = ref('');
const createOption: AsamCreateOption<string, Member> = (text) => {
createdTexts.value.push(text);
return { label: text, value: text, raw: { id: 'local-' + text, label: text, value: text } };
};
const transform = (items: readonly Member[]) => items;
const api: AsamApiRequest<Query, readonly Member[]> = async (query, context) => {
await new Promise<void>((done) => setTimeout(done, 150));
context.signal.throwIfAborted();
if (failure.value) throw new Error('演示请求失败');
const items: Member[] = [{ id: 'server', label: 'Server', value: 'server' }];
if (canonical.value) items.push({ id: 'saved', label: 'Server Omega', value: 'Omega' });
return items.filter((item) => item.label.toLowerCase().includes(query.text.toLowerCase()));
};
const factory = defineAsamOptions<string, Member>();
function source(text: string) {
return factory.api({
api,
params: { tenant: tenant.value, text },
transform,
fieldNames: { label: 'label', value: 'value' }
});
}
async function reload() {
await nextTick();
result.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';
if (result.value === 'success') message.value = '';
}
</script>
<style scoped>
.actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
</style>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template>
<section class="data-demo demo-layout-1">
<div class="actions">
<AsamButton type="default" native-type="button" @click="reload">强制重载</AsamButton>
<AsamButton type="default" native-type="button" @click="control?.clearCreatedOptions()"
>清空本地创建集合</AsamButton
>
<AsamButton type="default" native-type="button" @click="value = null"
>清空模型</AsamButton
>
<AsamButton
type="default"
native-type="button"
@click="tenant = tenant === 'a' ? 'b' : 'a'"
>切换逻辑来源</AsamButton
>
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="failure">模拟失败</AsamCheckboxItem>
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="canonical">来源接受 Omega 同值项</AsamCheckboxItem>
</div>
<AsamRemoteSelectV2
ref="control"
v-model="value"
:source="source"
:debounce-ms="100"
:create-option="createOption"
value-mode="object"
allow-create
filterable
clearable
size="default"
placeholder="输入 Omega 并选择创建项"
@success="providerValues = $event.map((item) => item.value)"
@error="message = $event.message"
>
<template #header><p class="example-paragraph">本地创建和来源选项分别保存</p></template>
<template #footer><p class="example-paragraph">刷新保留本地项，逻辑来源改变时清空本地集合</p></template>
</AsamRemoteSelectV2>
<p class="example-paragraph" role="status">{{ result }} {{ message }}</p>
<pre>模型：{{ JSON.stringify(value) }}</pre>
<pre>工厂调用：{{ JSON.stringify(createdTexts) }}</pre>
<pre>provider success 值：{{ JSON.stringify(providerValues) }}</pre>
</section>
</template>
<script setup>
import { nextTick, ref } from 'vue';
import { AsamCheckboxItem, AsamButton, AsamRemoteSelectV2, defineAsamOptions } from '@asam-ui/ui';
const tenant = ref('a');
const failure = ref(false);
const canonical = ref(false);
defineOptions({ name: 'AsamRemoteSelectV2LocalCreationDemo' });
const value = ref(null);
const control = ref();
const createdTexts = ref([]);
const providerValues = ref([]);
const message = ref('');
const result = ref('');
const createOption = (text) => {
createdTexts.value.push(text);
return { label: text, value: text, raw: { id: 'local-' + text, label: text, value: text } };
};
const transform = (items) => items;
const api = async (query, context) => {
await new Promise((done) => setTimeout(done, 150));
context.signal.throwIfAborted();
if (failure.value) throw new Error('演示请求失败');
const items = [{ id: 'server', label: 'Server', value: 'server' }];
if (canonical.value) items.push({ id: 'saved', label: 'Server Omega', value: 'Omega' });
return items.filter((item) => item.label.toLowerCase().includes(query.text.toLowerCase()));
};
const factory = defineAsamOptions();
function source(text) {
return factory.api({
api,
params: { tenant: tenant.value, text },
transform,
fieldNames: { label: 'label', value: 'value' }
});
}
async function reload() {
await nextTick();
result.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';
if (result.value === 'success') message.value = '';
}
</script>
<style scoped>
.actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
</style>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>本地项不进入 provider/cache 或 success。相同类型、相同 value 去重，provider 同值 规范项优先；已经传给父组件的对象模型不会在刷新时自动替换。clearCreatedOptions() 清空本地集合及基础入口文本 memo，保留模型。
source(query) 中的查询变化、reload 和失败保留本地项；source('') 表示 query 中立 逻辑来源。 完整说明。
数据来源与覆盖
source(query) 根据当前搜索文本创建 api 或 request 类型的 AsamOptionsSource，必须把 query 放进实际请求参数。它接管静态 options 和基础查询回调；不能同时传静态选项或第二个查询来源。示例通过本地 API 过滤标签，空文本返回完整列表。
单选值模式使用标量或 null；对象模式使用规范化 AsamOption。多选的数组与分隔字符串模式由 multiple、valueMode、multipleValueMode 联合约束；对象模式不能使用字符串存储。切换值策略时同时调整模型类型。
来源接管 options、loading 和远端查询；数据组件不开放基础选择器的 native 值模式。基础页中只使用与本组件公开分支兼容的能力。
生命周期、事件与实例
active=false 暂停请求并保留上次成功数据；reload({ force: true }) 请求新数据，cancel() 取消当前请求。 完整说明。
immediate 控制初始化是否请求，active 控制请求是否启用。远端虚拟选择器的 debounceMs 默认 250，active 与 immediate 默认 true。
插槽与基础能力
prefix、header、footer、empty、loading、tag、label 等插槽保留各自基础作用域；selectedLabel 为只读标签结果，focus/blur 用于焦点控制。虚拟选择器 default 插槽使用基础虚拟选项作用域。
动态项高的原生兼容范围
estimatedOptionHeight 仍是本组件适用的公开属性，项高计算委托 Element Plus 2.14.7。 完整说明。
这是一项限定场景的原生兼容结果，内部原因仍未验证；本组件对应动态项高目的的实际 复验尚未完成。上述对照不替代高级动态路径验证，也不表示所有尺寸或其他动态配置失败。
异步查询与默认首项的原生兼容范围
defaultFirstOption 仍是本组件适用的公开属性。 完整说明。
相同裸原生夹具省略等待期间的 loading 状态时，会高亮并通过 Enter 选择首个可选项。 这是限定的异步查询／loading 兼容结果，内部确切原因仍未验证；不能据此外推字典本地 筛选、所有异步时序或该属性的全部用途。来源加载与键盘选择仍按各自公开契约使用。
本站继承关系
- 虚拟选择器：适用的基础展示、交互与公开 API。
本页数据来源、模型、事件和实例的覆盖规则优先；本站链接不扩大本组件公开契约。尺寸使用基础组件的 ASAM 尺寸规则，示例使用 default。
选项和标签的完整展示
完整示例在两个独立实例中演示虚拟选项模板、prefix/header/footer/loading/empty/label 和可删除 tag。 完整说明。
展示示例还逐次记录单选原始数字、多选原始数组的 update:modelValue/change，以及完整规范化选项的 success。可制造一次刷新失败，观察 error 的 kind/message 与旧选中值保留，再恢复；持有请求的取消不产生额外成功事件。每条记录保存独立载荷快照。
选项模板、标签折叠与加载插槽
vue
<template><StandaloneDemo /></template>
<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
var __importDefault: any = function (mod?: any) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const Child_vue_1: any = __importDefault(require("./Child.vue"));
const provider_js_1: any = require("./provider.js");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamRemoteSelectV2NativePresentationDemo' },
__name: 'Demo',
setup(__props?: any) {
const host: any = (0, vue_3.ref)();
let app: any;
(0, vue_3.onMounted)(() => {
if (!host.value)
return;
const state: any = (0, provider_js_1.createDemoState)();
app = (0, vue_3.createApp)(Child_vue_1.default);
app.provide('selection-presentation', state);
(0, ui_1.provideAsamData)(app, (0, provider_js_1.createDemoProvider)(state), { scope: 'native-presentation' });
app.mount(host.value);
});
(0, vue_3.onBeforeUnmount)(() => app?.unmount());
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("div", {
ref_key: "host",
ref: host
}, null, 512 /* NEED_PATCH */));
};
}
});
},
"Child.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "demo-spacing-1" };
const _hoisted_2: any = { class: "demo-spacing-2" };
const _hoisted_3: any = { "data-testid": "presentation-label" };
const _hoisted_4: any = ["data-option-index", "data-option-disabled"];
const _hoisted_5: any = { "data-testid": "presentation-tag" };
const _hoisted_6: any = { "data-testid": "presentation-state" };
const _hoisted_7: any = {
class: "example-paragraph",
"data-testid": "selection-event-result"
};
const _hoisted_8: any = { "data-testid": "selection-data-events" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamRemoteSelectV2NativePresentationChild' },
__name: 'Child',
setup(__props?: any) {
const injected: any = (0, vue_3.inject)('selection-presentation');
if (!injected)
throw new Error('Demo.vue must install its local provider before Child.vue mounts.');
const state: any = injected;
const singleControl: any = (0, vue_3.ref)();
const singleValue: any = (0, vue_3.ref)(null);
const dataEvents: any = (0, vue_3.ref)([]);
const eventResult: any = (0, vue_3.ref)('');
function recordEvent(mode?: any, name?: any, payload?: any) {
const snapshot: any = JSON.parse(JSON.stringify(payload));
dataEvents.value = [...dataEvents.value, { mode, name, payload: snapshot }];
}
function onModelUpdate(payload?: any, mode?: any) {
recordEvent(mode, 'update:modelValue', payload);
}
function onModelChange(payload?: any, mode?: any) {
recordEvent(mode, 'change', payload);
}
function onSuccess(payload?: any) {
recordEvent('single', 'success', payload);
}
function onError(payload?: any) {
recordEvent('single', 'error', { kind: payload.kind, message: payload.message });
}
async function failReload() {
state.failure.value = true;
eventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';
}
async function recoverReload() {
state.failure.value = false;
eventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';
}
async function cancelHeld() {
state.held.value = true;
const pending: any = singleControl.value?.reload({ force: true });
setTimeout(() => singleControl.value?.cancel(), 30);
eventResult.value = (await pending)?.status ?? 'cancelled';
state.release();
}
const multipleValues: any = (0, vue_3.ref)([1, 3, 4]);
const removed: any = (0, vue_3.ref)([]);
const customTag: any = (0, vue_3.ref)(false);
const disabled: any = (0, vue_3.ref)(false);
const collapseTags: any = (0, vue_3.ref)(true);
const collapseTagsTooltip: any = (0, vue_3.ref)(true);
const maxCollapseTags: any = (0, vue_3.ref)(1);
const multipleLimit: any = (0, vue_3.ref)(3);
const singleOptions: any = (0, vue_3.ref)([]);
const api: any = async (params?: any, context?: any) => state.read(context.signal, params.text);
const factory: any = (0, ui_1.defineAsamOptions)();
const transform: any = (items?: any) => items;
const source: any = (text?: any) => factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'label', value: 'value', disabled: 'disabled' }
});
function holdAndReload() {
state.held.value = true;
void singleControl.value?.reload({ force: true });
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createElementVNode)("div", _hoisted_2, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: failReload
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[18] || (_cache[18] = [
(0, vue_2.createTextVNode)("制造刷新失败", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: recoverReload
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[19] || (_cache[19] = [
(0, vue_2.createTextVNode)("恢复失败请求", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: cancelHeld
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[20] || (_cache[20] = [
(0, vue_2.createTextVNode)("取消持有请求", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: holdAndReload
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[21] || (_cache[21] = [
(0, vue_2.createTextVNode)("等待并重载单选", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[0] || (_cache[0] = ($event?: any) => ((0, vue_2.unref)(state).release()))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[22] || (_cache[22] = [
(0, vue_2.createTextVNode)("完成当前请求", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[1] || (_cache[1] = ($event?: any) => {
(0, vue_2.unref)(state).empty.value = !(0, vue_2.unref)(state).empty.value;
singleControl.value?.reload({ force: true });
})
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[23] || (_cache[23] = [
(0, vue_2.createTextVNode)(" 切换空结果 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[2] || (_cache[2] = ($event?: any) => (customTag.value = !customTag.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[24] || (_cache[24] = [
(0, vue_2.createTextVNode)("切换自定义标签", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[3] || (_cache[3] = ($event?: any) => (disabled.value = !disabled.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[25] || (_cache[25] = [
(0, vue_2.createTextVNode)("切换多选禁用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[4] || (_cache[4] = ($event?: any) => (collapseTags.value = !collapseTags.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[26] || (_cache[26] = [
(0, vue_2.createTextVNode)("切换标签折叠", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[5] || (_cache[5] = ($event?: any) => (collapseTagsTooltip.value = !collapseTagsTooltip.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[27] || (_cache[27] = [
(0, vue_2.createTextVNode)(" 切换折叠标签提示 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[6] || (_cache[6] = ($event?: any) => (maxCollapseTags.value = maxCollapseTags.value === 1 ? 3 : 1))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[28] || (_cache[28] = [
(0, vue_2.createTextVNode)(" 切换可见标签数量 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[7] || (_cache[7] = ($event?: any) => (multipleLimit.value = multipleLimit.value === 3 ? 0 : 3))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[29] || (_cache[29] = [
(0, vue_2.createTextVNode)(" 切换多选数量上限 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[8] || (_cache[8] = ($event?: any) => (multipleValues.value = [1, 3, 4]))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[30] || (_cache[30] = [
(0, vue_2.createTextVNode)("恢复初始多选", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[9] || (_cache[9] = ($event?: any) => (multipleValues.value = []))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[31] || (_cache[31] = [
(0, vue_2.createTextVNode)("清空多选模型", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_cache[38] || (_cache[38] = (0, vue_2.createElementVNode)("label", null, "单选展示", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamRemoteSelectV2), {
ref_key: "singleControl",
ref: singleControl,
modelValue: singleValue.value,
"onUpdate:modelValue": [
_cache[10] || (_cache[10] = ($event?: any) => ((singleValue).value = $event)),
_cache[11] || (_cache[11] = ($event?: any) => (onModelUpdate($event, 'single')))
],
source: source,
"debounce-ms": 0,
style: { "width": "280px" },
"fit-input-width": 320,
"popper-class": "data009-presentation-popper",
clearable: "",
placeholder: "演示单选",
teleported: false,
onChange: _cache[12] || (_cache[12] = ($event?: any) => (onModelChange($event, 'single'))),
onError: onError,
onSuccess: _cache[13] || (_cache[13] = ($event?: any) => {
singleOptions.value = $event;
onSuccess($event);
})
}, {
prefix: (0, vue_2.withCtx)(() => [...(_cache[32] || (_cache[32] = [
(0, vue_2.createElementVNode)("span", { "data-testid": "presentation-prefix" }, "前缀", -1 /* CACHED */)
]))]),
header: (0, vue_2.withCtx)(() => [...(_cache[33] || (_cache[33] = [
(0, vue_2.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "presentation-header"
}, "选项列表说明", -1 /* CACHED */)
]))]),
footer: (0, vue_2.withCtx)(() => [...(_cache[34] || (_cache[34] = [
(0, vue_2.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "presentation-footer"
}, "由本地来源加载", -1 /* CACHED */)
]))]),
loading: (0, vue_2.withCtx)(() => [...(_cache[35] || (_cache[35] = [
(0, vue_2.createElementVNode)("span", { "data-testid": "presentation-loading" }, "正在读取本地选项", -1 /* CACHED */)
]))]),
empty: (0, vue_2.withCtx)(() => [...(_cache[36] || (_cache[36] = [
(0, vue_2.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "presentation-empty"
}, "当前来源没有匹配项", -1 /* CACHED */)
]))]),
label: (0, vue_2.withCtx)(({ label, value }: any) => [
(0, vue_2.createElementVNode)("span", _hoisted_3, (0, vue_2.toDisplayString)(label) + " [" + (0, vue_2.toDisplayString)(value) + "]", 1 /* TEXT */)
]),
default: (0, vue_2.withCtx)(({ item, index, disabled: optionDisabled }: any) => [
(0, vue_2.createElementVNode)("span", {
"data-option-index": index,
"data-option-disabled": optionDisabled
}, (0, vue_2.toDisplayString)(item.label) + " · 自定义虚拟选项 ", 9 /* TEXT, PROPS */, _hoisted_4)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[39] || (_cache[39] = (0, vue_2.createElementVNode)("label", null, "多选展示", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamRemoteSelectV2), {
modelValue: multipleValues.value,
"onUpdate:modelValue": [
_cache[14] || (_cache[14] = ($event?: any) => ((multipleValues).value = $event)),
_cache[16] || (_cache[16] = ($event?: any) => (onModelUpdate($event, 'multiple')))
],
source: source,
"debounce-ms": 0,
multiple: "",
"collapse-tags": collapseTags.value,
"collapse-tags-tooltip": collapseTagsTooltip.value,
"max-collapse-tags": maxCollapseTags.value,
"multiple-limit": multipleLimit.value,
disabled: disabled.value,
style: { "width": "280px" },
clearable: "",
placeholder: "演示多选",
teleported: false,
onRemoveTag: _cache[15] || (_cache[15] = ($event?: any) => (removed.value.push($event))),
onChange: _cache[17] || (_cache[17] = ($event?: any) => (onModelChange($event, 'multiple')))
}, (0, vue_2.createSlots)({ _: 2 /* DYNAMIC */ }, [
(customTag.value)
? {
name: "tag",
fn: (0, vue_2.withCtx)(({ data, deleteTag }: any) => [
(0, vue_2.createElementVNode)("span", _hoisted_5, [
(0, vue_2.createTextVNode)(" 已选 " + (0, vue_2.toDisplayString)(data.length) + " 项 ", 1 /* TEXT */),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: disabled.value || !data.length,
onClick: ($event?: any) => (deleteTag($event, data[0]))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[37] || (_cache[37] = [
(0, vue_2.createTextVNode)(" 删除首个标签 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"])
])
]),
key: "0"
}
: undefined
]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "collapse-tags", "collapse-tags-tooltip", "max-collapse-tags", "multiple-limit", "disabled"]),
(0, vue_2.createElementVNode)("pre", _hoisted_6, (0, vue_2.toDisplayString)(JSON.stringify({
singleValue: singleValue.value,
multipleValues: multipleValues.value,
removed: removed.value,
customTag: customTag.value,
disabled: disabled.value,
collapseTags: collapseTags.value,
collapseTagsTooltip: collapseTagsTooltip.value,
maxCollapseTags: maxCollapseTags.value,
multipleLimit: multipleLimit.value,
calls: (0, vue_2.unref)(state).calls.value
})), 1 /* TEXT */),
(0, vue_2.createElementVNode)("p", _hoisted_7, (0, vue_2.toDisplayString)(eventResult.value), 1 /* TEXT */),
(0, vue_2.createElementVNode)("pre", _hoisted_8, (0, vue_2.toDisplayString)(JSON.stringify(dataEvents.value)), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-46e10419";
},
"provider.ts": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createDemoState = createDemoState;
exports.createDemoProvider = createDemoProvider;
const vue_1: any = require("vue");
const rows: any = [
{ label: 'Alpha', value: 1, id: 1, team: '一组' },
{ label: 'Beta', value: 2, id: 2, team: '一组', disabled: true },
{ label: 'Gamma', value: 3, id: 3, team: '二组' },
{ label: 'Delta', value: 4, id: 4, team: '二组' },
{ label: 'Epsilon', value: 5, id: 5, team: '二组' }
];
function createDemoState() {
const held: any = (0, vue_1.ref)(false), empty: any = (0, vue_1.ref)(false), failure: any = (0, vue_1.ref)(false), calls: any = (0, vue_1.ref)(0);
const pending: any = new Set();
async function read(signal?: any, text?: any) {
signal.throwIfAborted();
calls.value++;
if (held.value)
await new Promise((done?: any, reject?: any) => {
const finish: any = () => {
pending.delete(finish);
signal.removeEventListener('abort', abort);
done();
};
const abort: any = () => {
pending.delete(finish);
signal.removeEventListener('abort', abort);
reject(signal.reason);
};
pending.add(finish);
signal.addEventListener('abort', abort, { once: true });
if (signal.aborted)
abort();
});
signal.throwIfAborted();
if (failure.value)
throw new Error('演示选择器请求失败');
return empty.value
? []
: rows.filter((item?: any) => item.label.toLowerCase().includes(text.toLowerCase()));
}
function release() {
held.value = false;
for (const finish of ([...pending] as any))
finish();
}
return { held, empty, failure, calls, read, release };
}
function createDemoProvider(state?: any) {
return {
dict: {
async refresh(context?: any) {
context.signal.throwIfAborted();
},
async get(type?: any, context?: any) {
if (type !== 'presentation')
throw new Error('Unknown local dictionary');
return (await state.read(context.signal, '')).map((item?: any) => ({ ...item }));
}
}
};
}
},
};
const __dependencies: any = {"Demo.vue":{"./Child.vue":"Child.vue","./provider.js":"provider.ts"},"Child.vue":{"./provider.js":"provider.ts"},"provider.ts":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module: any = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.demo-spacing-1[data-v-46e10419] {
display: grid;
gap: var(--asam-space-md);
}
.demo-spacing-2[data-v-46e10419] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
p[data-v-46e10419]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template><StandaloneDemo /></template>
<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
var __importDefault = function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const Child_vue_1 = __importDefault(require("./Child.vue"));
const provider_js_1 = require("./provider.js");
exports.default = Object.assign({ name: 'AsamRemoteSelectV2NativePresentationDemo' }, {
__name: 'Demo',
setup(__props) {
const host = (0, vue_2.ref)();
let app;
(0, vue_2.onMounted)(() => {
if (!host.value)
return;
const state = (0, provider_js_1.createDemoState)();
app = (0, vue_2.createApp)(Child_vue_1.default);
app.provide('selection-presentation', state);
(0, ui_1.provideAsamData)(app, (0, provider_js_1.createDemoProvider)(state), { scope: 'native-presentation' });
app.mount(host.value);
});
(0, vue_2.onBeforeUnmount)(() => app?.unmount());
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", {
ref_key: "host",
ref: host
}, null, 512 /* NEED_PATCH */));
};
}
});
},
"Child.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "demo-spacing-1" };
const _hoisted_2 = { class: "demo-spacing-2" };
const _hoisted_3 = { "data-testid": "presentation-label" };
const _hoisted_4 = ["data-option-index", "data-option-disabled"];
const _hoisted_5 = { "data-testid": "presentation-tag" };
const _hoisted_6 = { "data-testid": "presentation-state" };
const _hoisted_7 = {
class: "example-paragraph",
"data-testid": "selection-event-result"
};
const _hoisted_8 = { "data-testid": "selection-data-events" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = Object.assign({ name: 'AsamRemoteSelectV2NativePresentationChild' }, {
__name: 'Child',
setup(__props) {
const injected = (0, vue_2.inject)('selection-presentation');
if (!injected)
throw new Error('Demo.vue must install its local provider before Child.vue mounts.');
const state = injected;
const singleControl = (0, vue_2.ref)();
const singleValue = (0, vue_2.ref)(null);
const dataEvents = (0, vue_2.ref)([]);
const eventResult = (0, vue_2.ref)('');
function recordEvent(mode, name, payload) {
const snapshot = JSON.parse(JSON.stringify(payload));
dataEvents.value = [...dataEvents.value, { mode, name, payload: snapshot }];
}
function onModelUpdate(payload, mode) {
recordEvent(mode, 'update:modelValue', payload);
}
function onModelChange(payload, mode) {
recordEvent(mode, 'change', payload);
}
function onSuccess(payload) {
recordEvent('single', 'success', payload);
}
function onError(payload) {
recordEvent('single', 'error', { kind: payload.kind, message: payload.message });
}
async function failReload() {
state.failure.value = true;
eventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';
}
async function recoverReload() {
state.failure.value = false;
eventResult.value = (await singleControl.value?.reload({ force: true }))?.status ?? 'cancelled';
}
async function cancelHeld() {
state.held.value = true;
const pending = singleControl.value?.reload({ force: true });
setTimeout(() => singleControl.value?.cancel(), 30);
eventResult.value = (await pending)?.status ?? 'cancelled';
state.release();
}
const multipleValues = (0, vue_2.ref)([1, 3, 4]);
const removed = (0, vue_2.ref)([]);
const customTag = (0, vue_2.ref)(false);
const disabled = (0, vue_2.ref)(false);
const collapseTags = (0, vue_2.ref)(true);
const collapseTagsTooltip = (0, vue_2.ref)(true);
const maxCollapseTags = (0, vue_2.ref)(1);
const multipleLimit = (0, vue_2.ref)(3);
const singleOptions = (0, vue_2.ref)([]);
const api = async (params, context) => state.read(context.signal, params.text);
const factory = (0, ui_1.defineAsamOptions)();
const transform = (items) => items;
const source = (text) => factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'label', value: 'value', disabled: 'disabled' }
});
function holdAndReload() {
state.held.value = true;
void singleControl.value?.reload({ force: true });
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createElementVNode)("div", _hoisted_2, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: failReload
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[18] || (_cache[18] = [
(0, vue_1.createTextVNode)("制造刷新失败", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: recoverReload
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[19] || (_cache[19] = [
(0, vue_1.createTextVNode)("恢复失败请求", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: cancelHeld
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[20] || (_cache[20] = [
(0, vue_1.createTextVNode)("取消持有请求", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: holdAndReload
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[21] || (_cache[21] = [
(0, vue_1.createTextVNode)("等待并重载单选", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[0] || (_cache[0] = $event => ((0, vue_1.unref)(state).release()))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[22] || (_cache[22] = [
(0, vue_1.createTextVNode)("完成当前请求", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[1] || (_cache[1] = $event => {
(0, vue_1.unref)(state).empty.value = !(0, vue_1.unref)(state).empty.value;
singleControl.value?.reload({ force: true });
})
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[23] || (_cache[23] = [
(0, vue_1.createTextVNode)(" 切换空结果 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[2] || (_cache[2] = $event => (customTag.value = !customTag.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[24] || (_cache[24] = [
(0, vue_1.createTextVNode)("切换自定义标签", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[3] || (_cache[3] = $event => (disabled.value = !disabled.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[25] || (_cache[25] = [
(0, vue_1.createTextVNode)("切换多选禁用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[4] || (_cache[4] = $event => (collapseTags.value = !collapseTags.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[26] || (_cache[26] = [
(0, vue_1.createTextVNode)("切换标签折叠", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[5] || (_cache[5] = $event => (collapseTagsTooltip.value = !collapseTagsTooltip.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[27] || (_cache[27] = [
(0, vue_1.createTextVNode)(" 切换折叠标签提示 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[6] || (_cache[6] = $event => (maxCollapseTags.value = maxCollapseTags.value === 1 ? 3 : 1))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[28] || (_cache[28] = [
(0, vue_1.createTextVNode)(" 切换可见标签数量 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[7] || (_cache[7] = $event => (multipleLimit.value = multipleLimit.value === 3 ? 0 : 3))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[29] || (_cache[29] = [
(0, vue_1.createTextVNode)(" 切换多选数量上限 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[8] || (_cache[8] = $event => (multipleValues.value = [1, 3, 4]))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[30] || (_cache[30] = [
(0, vue_1.createTextVNode)("恢复初始多选", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[9] || (_cache[9] = $event => (multipleValues.value = []))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[31] || (_cache[31] = [
(0, vue_1.createTextVNode)("清空多选模型", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_cache[38] || (_cache[38] = (0, vue_1.createElementVNode)("label", null, "单选展示", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamRemoteSelectV2), {
ref_key: "singleControl",
ref: singleControl,
modelValue: singleValue.value,
"onUpdate:modelValue": [
_cache[10] || (_cache[10] = $event => ((singleValue).value = $event)),
_cache[11] || (_cache[11] = $event => (onModelUpdate($event, 'single')))
],
source: source,
"debounce-ms": 0,
style: { "width": "280px" },
"fit-input-width": 320,
"popper-class": "data009-presentation-popper",
clearable: "",
placeholder: "演示单选",
teleported: false,
onChange: _cache[12] || (_cache[12] = $event => (onModelChange($event, 'single'))),
onError: onError,
onSuccess: _cache[13] || (_cache[13] = $event => {
singleOptions.value = $event;
onSuccess($event);
})
}, {
prefix: (0, vue_1.withCtx)(() => [...(_cache[32] || (_cache[32] = [
(0, vue_1.createElementVNode)("span", { "data-testid": "presentation-prefix" }, "前缀", -1 /* CACHED */)
]))]),
header: (0, vue_1.withCtx)(() => [...(_cache[33] || (_cache[33] = [
(0, vue_1.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "presentation-header"
}, "选项列表说明", -1 /* CACHED */)
]))]),
footer: (0, vue_1.withCtx)(() => [...(_cache[34] || (_cache[34] = [
(0, vue_1.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "presentation-footer"
}, "由本地来源加载", -1 /* CACHED */)
]))]),
loading: (0, vue_1.withCtx)(() => [...(_cache[35] || (_cache[35] = [
(0, vue_1.createElementVNode)("span", { "data-testid": "presentation-loading" }, "正在读取本地选项", -1 /* CACHED */)
]))]),
empty: (0, vue_1.withCtx)(() => [...(_cache[36] || (_cache[36] = [
(0, vue_1.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "presentation-empty"
}, "当前来源没有匹配项", -1 /* CACHED */)
]))]),
label: (0, vue_1.withCtx)(({ label, value }) => [
(0, vue_1.createElementVNode)("span", _hoisted_3, (0, vue_1.toDisplayString)(label) + " [" + (0, vue_1.toDisplayString)(value) + "]", 1 /* TEXT */)
]),
default: (0, vue_1.withCtx)(({ item, index, disabled: optionDisabled }) => [
(0, vue_1.createElementVNode)("span", {
"data-option-index": index,
"data-option-disabled": optionDisabled
}, (0, vue_1.toDisplayString)(item.label) + " · 自定义虚拟选项 ", 9 /* TEXT, PROPS */, _hoisted_4)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[39] || (_cache[39] = (0, vue_1.createElementVNode)("label", null, "多选展示", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamRemoteSelectV2), {
modelValue: multipleValues.value,
"onUpdate:modelValue": [
_cache[14] || (_cache[14] = $event => ((multipleValues).value = $event)),
_cache[16] || (_cache[16] = $event => (onModelUpdate($event, 'multiple')))
],
source: source,
"debounce-ms": 0,
multiple: "",
"collapse-tags": collapseTags.value,
"collapse-tags-tooltip": collapseTagsTooltip.value,
"max-collapse-tags": maxCollapseTags.value,
"multiple-limit": multipleLimit.value,
disabled: disabled.value,
style: { "width": "280px" },
clearable: "",
placeholder: "演示多选",
teleported: false,
onRemoveTag: _cache[15] || (_cache[15] = $event => (removed.value.push($event))),
onChange: _cache[17] || (_cache[17] = $event => (onModelChange($event, 'multiple')))
}, (0, vue_1.createSlots)({ _: 2 /* DYNAMIC */ }, [
(customTag.value)
? {
name: "tag",
fn: (0, vue_1.withCtx)(({ data, deleteTag }) => [
(0, vue_1.createElementVNode)("span", _hoisted_5, [
(0, vue_1.createTextVNode)(" 已选 " + (0, vue_1.toDisplayString)(data.length) + " 项 ", 1 /* TEXT */),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: disabled.value || !data.length,
onClick: $event => (deleteTag($event, data[0]))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[37] || (_cache[37] = [
(0, vue_1.createTextVNode)(" 删除首个标签 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"])
])
]),
key: "0"
}
: undefined
]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "collapse-tags", "collapse-tags-tooltip", "max-collapse-tags", "multiple-limit", "disabled"]),
(0, vue_1.createElementVNode)("pre", _hoisted_6, (0, vue_1.toDisplayString)(JSON.stringify({
singleValue: singleValue.value,
multipleValues: multipleValues.value,
removed: removed.value,
customTag: customTag.value,
disabled: disabled.value,
collapseTags: collapseTags.value,
collapseTagsTooltip: collapseTagsTooltip.value,
maxCollapseTags: maxCollapseTags.value,
multipleLimit: multipleLimit.value,
calls: (0, vue_1.unref)(state).calls.value
})), 1 /* TEXT */),
(0, vue_1.createElementVNode)("p", _hoisted_7, (0, vue_1.toDisplayString)(eventResult.value), 1 /* TEXT */),
(0, vue_1.createElementVNode)("pre", _hoisted_8, (0, vue_1.toDisplayString)(JSON.stringify(dataEvents.value)), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-813ec3f9";
},
"provider.js": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createDemoState = createDemoState;
exports.createDemoProvider = createDemoProvider;
const vue_1 = require("vue");
const rows = [
{ label: 'Alpha', value: 1, id: 1, team: '一组' },
{ label: 'Beta', value: 2, id: 2, team: '一组', disabled: true },
{ label: 'Gamma', value: 3, id: 3, team: '二组' },
{ label: 'Delta', value: 4, id: 4, team: '二组' },
{ label: 'Epsilon', value: 5, id: 5, team: '二组' }
];
function createDemoState() {
const held = (0, vue_1.ref)(false), empty = (0, vue_1.ref)(false), failure = (0, vue_1.ref)(false), calls = (0, vue_1.ref)(0);
const pending = new Set();
async function read(signal, text) {
signal.throwIfAborted();
calls.value++;
if (held.value)
await new Promise((done, reject) => {
const finish = () => {
pending.delete(finish);
signal.removeEventListener('abort', abort);
done();
};
const abort = () => {
pending.delete(finish);
signal.removeEventListener('abort', abort);
reject(signal.reason);
};
pending.add(finish);
signal.addEventListener('abort', abort, { once: true });
if (signal.aborted)
abort();
});
signal.throwIfAborted();
if (failure.value)
throw new Error('演示选择器请求失败');
return empty.value
? []
: rows.filter((item) => item.label.toLowerCase().includes(text.toLowerCase()));
}
function release() {
held.value = false;
for (const finish of [...pending])
finish();
}
return { held, empty, failure, calls, read, release };
}
function createDemoProvider(state) {
return {
dict: {
async refresh(context) {
context.signal.throwIfAborted();
},
async get(type, context) {
if (type !== 'presentation')
throw new Error('Unknown local dictionary');
return (await state.read(context.signal, '')).map((item) => ({ ...item }));
}
}
};
}
},
};
const __dependencies = {"Demo.vue":{"./Child.vue":"Child.vue","./provider.js":"provider.js"},"Child.vue":{},"provider.js":{}};
const __cache = Object.create(null);
function __require(id) {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.demo-spacing-1[data-v-813ec3f9] {
display: grid;
gap: var(--asam-space-md);
}
.demo-spacing-2[data-v-813ec3f9] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
p[data-v-813ec3f9]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>控制按钮可关闭并恢复 collapseTags 与 collapseTagsTooltip，切换 maxCollapseTags=1/3 与 multipleLimit=3/0。 完整说明。
局部请求错误插槽
可选 error 插槽仅在当前请求错误存在时调用，接收只读 { error, stale, retry }。 完整说明。
retry 不接收参数，返回强制 reload 的 Promise，并遵守取消和卸载规则。 完整说明。
提供该插槽时，自有内容替换整个默认局部错误区；返回空内容也表示主动替换。 未提供时继续显示原错误文字、过期提示和默认重试按钮。无 error 的单独 stale 状态 不调用此插槽；empty、loading 和其他基础插槽继续使用原作用域。
以下完整 TS/JS 示例先制造失败，再等待插槽 retry 的返回结果；成功后可再次制造 更新失败，观察旧结果与模型保留。每次挂载使用独立子 app 和本地 provider。
局部错误定制、等待重试与过期恢复
vue
<template><StandaloneDemo /></template>
<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
var __importDefault: any = function (mod?: any) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
const Child_vue_1: any = __importDefault(require("./Child.vue"));
const transport_js_1: any = require("./transport.js");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamRemoteSelectV2DemoLocalErrorExample' },
__name: 'Demo',
setup(__props?: any) {
const host: any = (0, vue_3.ref)();
let app: any;
(0, vue_3.onMounted)(() => {
if (!host.value)
return;
const transport: any = (0, transport_js_1.createTransport)();
app = (0, vue_3.createApp)(Child_vue_1.default, { transport });
(0, ui_1.provideAsamData)(app, transport.provider, { scope: 'AsamRemoteSelectV2-local-error' });
app.mount(host.value);
});
(0, vue_3.onBeforeUnmount)(() => app?.unmount());
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("div", {
ref_key: "host",
ref: host
}, null, 512 /* NEED_PATCH */));
};
}
});
},
"Child.vue": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "demo-spacing-1" };
const _hoisted_2: any = {
role: "alert",
"data-testid": "local-error"
};
const _hoisted_3: any = { class: "example-paragraph" };
const _hoisted_4: any = {
key: 0,
class: "example-paragraph"
};
const _hoisted_5: any = {
class: "example-paragraph",
role: "status",
"data-testid": "retry-result"
};
const _hoisted_6: any = {
class: "example-paragraph",
"data-testid": "transport-count"
};
const _hoisted_7: any = { "data-testid": "local-model" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamRemoteSelectV2ChildLocalErrorExample' },
__name: 'Child',
props: {
transport: { type: null, required: true }
},
setup(__props?: any) {
const props: any = __props;
const transport: any = props.transport;
const value: any = (0, vue_3.ref)(null);
const control: any = (0, vue_3.ref)();
const busy: any = (0, vue_3.ref)(false), result: any = (0, vue_3.ref)('');
const dataSource: any = (0, ui_1.defineAsamOptions)().api({
api: transport.api,
params: undefined,
transform: (rows?: any) => rows,
fieldNames: { label: 'label', value: 'value' }
});
const source: any = () => dataSource;
(0, vue_3.onMounted)(async () => {
const response: any = await control.value?.reload();
result.value = response?.status ?? 'cancelled';
});
async function recover(retry?: any) {
busy.value = true;
transport.failing.value = false;
try {
const response: any = await retry();
result.value = response.status;
}
finally {
busy.value = false;
}
}
async function failAgain() {
busy.value = true;
transport.failing.value = true;
try {
const response: any = await control.value?.reload({ force: true });
result.value = response?.status ?? 'cancelled';
}
finally {
busy.value = false;
}
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamRemoteSelectV2), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((value).value = $event)),
source: source,
immediate: false
}, {
error: (0, vue_2.withCtx)(({ error, stale, retry }: any) => [
(0, vue_2.createElementVNode)("div", _hoisted_2, [
(0, vue_2.createElementVNode)("p", _hoisted_3, (0, vue_2.toDisplayString)(error.message) + "（" + (0, vue_2.toDisplayString)(error.kind) + "）", 1 /* TEXT */),
stale
? ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("p", _hoisted_4, "已保留上次成功结果。"))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: busy.value,
onClick: ($event?: any) => (recover(retry))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[1] || (_cache[1] = [
(0, vue_2.createTextVNode)(" 恢复并重试 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"])
])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: busy.value,
onClick: failAgain
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_2.createTextVNode)("模拟更新失败", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled"]),
(0, vue_2.createElementVNode)("p", _hoisted_5, (0, vue_2.toDisplayString)(result.value), 1 /* TEXT */),
(0, vue_2.createElementVNode)("p", _hoisted_6, " 请求 " + (0, vue_2.toDisplayString)((0, vue_2.unref)(transport).calls.value) + " 次，字典刷新 " + (0, vue_2.toDisplayString)((0, vue_2.unref)(transport).refreshes.value) + " 次 ", 1 /* TEXT */),
(0, vue_2.createElementVNode)("pre", _hoisted_7, (0, vue_2.toDisplayString)(value.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-17a13bcc";
},
"transport.ts": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createTransport = createTransport;
const vue_1: any = require("vue");
function createTransport() {
const failing: any = (0, vue_1.ref)(true), calls: any = (0, vue_1.ref)(0), refreshes: any = (0, vue_1.ref)(0);
const api: any = async () => {
calls.value++;
if (failing.value)
throw Error('演示请求暂不可用');
return [
{ id: 1, value: 'ready', label: '准备' },
{ id: 2, value: 'running', label: '进行' }
];
};
const provider: any = {
dict: {
get: async (_type?: any, context?: any) => {
context.signal.throwIfAborted();
return api();
},
refresh: async (context?: any) => {
context.signal.throwIfAborted();
refreshes.value++;
}
}
};
return { failing, calls, refreshes, api, provider };
}
},
};
const __dependencies: any = {"Demo.vue":{"./Child.vue":"Child.vue","./transport.js":"transport.ts"},"Child.vue":{"./transport.js":"transport.ts"},"transport.ts":{}};
const __cache: any = Object.create(null);
function __require(id: any): any {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module: any = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency: any) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.demo-spacing-1[data-v-17a13bcc] {
display: grid;
gap: var(--asam-space-md);
}
p[data-v-17a13bcc]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>vue
<template><StandaloneDemo /></template>
<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
var __importDefault = function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const Child_vue_1 = __importDefault(require("./Child.vue"));
const transport_js_1 = require("./transport.js");
exports.default = Object.assign({ name: 'AsamRemoteSelectV2DemoLocalErrorExample' }, {
__name: 'Demo',
setup(__props) {
const host = (0, vue_2.ref)();
let app;
(0, vue_2.onMounted)(() => {
if (!host.value)
return;
const transport = (0, transport_js_1.createTransport)();
app = (0, vue_2.createApp)(Child_vue_1.default, { transport });
(0, ui_1.provideAsamData)(app, transport.provider, { scope: 'AsamRemoteSelectV2-local-error' });
app.mount(host.value);
});
(0, vue_2.onBeforeUnmount)(() => app?.unmount());
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", {
ref_key: "host",
ref: host
}, null, 512 /* NEED_PATCH */));
};
}
});
},
"Child.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "demo-spacing-1" };
const _hoisted_2 = {
role: "alert",
"data-testid": "local-error"
};
const _hoisted_3 = { class: "example-paragraph" };
const _hoisted_4 = {
key: 0,
class: "example-paragraph"
};
const _hoisted_5 = {
class: "example-paragraph",
role: "status",
"data-testid": "retry-result"
};
const _hoisted_6 = {
class: "example-paragraph",
"data-testid": "transport-count"
};
const _hoisted_7 = { "data-testid": "local-model" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = Object.assign({ name: 'AsamRemoteSelectV2ChildLocalErrorExample' }, {
__name: 'Child',
props: { transport: { type: Object, required: true } },
setup(__props) {
const props = __props;
const transport = props.transport;
const value = (0, vue_2.ref)(null);
const control = (0, vue_2.ref)();
const busy = (0, vue_2.ref)(false), result = (0, vue_2.ref)('');
const dataSource = (0, ui_1.defineAsamOptions)().api({ api: transport.api, params: undefined });
const source = () => dataSource;
(0, vue_2.onMounted)(async () => {
const response = await control.value?.reload();
result.value = response?.status ?? 'cancelled';
});
async function recover(retry) {
busy.value = true;
transport.failing.value = false;
try {
const response = await retry();
result.value = response.status;
}
finally {
busy.value = false;
}
}
async function failAgain() {
busy.value = true;
transport.failing.value = true;
try {
const response = await control.value?.reload({ force: true });
result.value = response?.status ?? 'cancelled';
}
finally {
busy.value = false;
}
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamRemoteSelectV2), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((value).value = $event)),
source: source,
immediate: false
}, {
error: (0, vue_1.withCtx)(({ error, stale, retry }) => [
(0, vue_1.createElementVNode)("div", _hoisted_2, [
(0, vue_1.createElementVNode)("p", _hoisted_3, (0, vue_1.toDisplayString)(error.message) + "（" + (0, vue_1.toDisplayString)(error.kind) + "）", 1 /* TEXT */),
stale
? ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("p", _hoisted_4, "已保留上次成功结果。"))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: busy.value,
onClick: $event => (recover(retry))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[1] || (_cache[1] = [
(0, vue_1.createTextVNode)(" 恢复并重试 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"])
])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: busy.value,
onClick: failAgain
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_1.createTextVNode)("模拟更新失败", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled"]),
(0, vue_1.createElementVNode)("p", _hoisted_5, (0, vue_1.toDisplayString)(result.value), 1 /* TEXT */),
(0, vue_1.createElementVNode)("p", _hoisted_6, " 请求 " + (0, vue_1.toDisplayString)((0, vue_1.unref)(transport).calls.value) + " 次，字典刷新 " + (0, vue_1.toDisplayString)((0, vue_1.unref)(transport).refreshes.value) + " 次 ", 1 /* TEXT */),
(0, vue_1.createElementVNode)("pre", _hoisted_7, (0, vue_1.toDisplayString)(value.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-7f1af643";
},
"transport.js": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createTransport = createTransport;
const vue_1 = require("vue");
function createTransport() {
const failing = (0, vue_1.ref)(true), calls = (0, vue_1.ref)(0), refreshes = (0, vue_1.ref)(0);
const api = async () => {
calls.value++;
if (failing.value)
throw Error('演示请求暂不可用');
return [
{ id: 1, value: 'ready', label: '准备' },
{ id: 2, value: 'running', label: '进行' }
];
};
const provider = {
dict: {
get: async (_type, context) => {
context.signal.throwIfAborted();
return api();
},
refresh: async (context) => {
context.signal.throwIfAborted();
refreshes.value++;
}
}
};
return { failing, calls, refreshes, api, provider };
}
},
};
const __dependencies = {"Demo.vue":{"./Child.vue":"Child.vue","./transport.js":"transport.js"},"Child.vue":{},"transport.js":{}};
const __cache = Object.create(null);
function __require(id) {
if (__external[id]) return __external[id];
if (__cache[id]) return __cache[id].exports;
const module = { exports: {} };
__cache[id] = module;
__modules[id](module, module.exports, (dependency) => __require(__dependencies[id][dependency] || dependency));
return module.exports;
}
const StandaloneDemo = __require('Demo.vue').default;
</script>
<style>
.demo-spacing-1[data-v-7f1af643] {
display: grid;
gap: var(--asam-space-md);
}
p[data-v-7f1af643]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>局部与全局浮层
基础示例使用默认的全局挂载；局部挂载示例展示显式配置的 teleported 或 appendTo。先打开控件浮层，再观察其所在容器。挂载位置与控件值、请求协议互相独立。
API
属性 AsamRemoteSelectV2Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
filterable | — | true | undefined | — |
source | 用当前搜索文字作为实际参数，建立共享数据来源。 | (query: string) => AsamOptionsSource<V, I, "api" | "request"> | — |
debounceMs | — | number | undefined | 250 |
active | — | boolean | undefined | true |
immediate | — | boolean | undefined | true |
ariaLabel | — | string | undefined | — |
id | — | string | undefined | — |
effect | — | enum"light" | "dark"完整类型：PublicMember<AsamRemoteSelectV2Props<V, I>, "effect"> | — |
popperClass | — | AsamSelectV2NativeProps["popperClass"] | — |
popperStyle | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "popperStyle"> | — |
fallbackPlacements | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "fallbackPlacements"> | — |
offset | — | number | undefined | — |
placement | — | enum"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"完整类型：PublicMember<AsamRemoteSelectV2Props<V, I>, "placement"> | — |
popperOptions | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "popperOptions"> | — |
showArrow | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "showArrow"> | — |
appendTo | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "appendTo"> | — |
persistent | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "persistent"> | — |
teleported | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "teleported"> | — |
disabled | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "disabled"> | — |
tabindex | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "tabindex"> | — |
size | — | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
height | — | number | undefined | — |
scrollbarAlwaysOn | — | boolean | undefined | — |
props | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "props"> | — |
name | — | string | undefined | — |
separator | — | string | undefined | — |
modelValue | — | V | null | undefined | AsamSelectOption<V, I> | null | undefined | readonly V[] | undefined | string | undefined | readonly AsamSelectOption<V, I>[] | undefined | — |
filterMethod | — | ((query: string) => void) | undefined | — |
multiple | — | false | undefined | true | — |
valueMode | — | enum"value" | "object"完整类型："value" | undefined | "object" | — |
multipleValueMode | — | enum"array" | "string"完整类型：undefined | "array" | undefined | "string" | — |
emptyValues | — | unknown[] | undefined | — |
valueOnClear | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "valueOnClear"> | — |
validateEvent | — | boolean | undefined | — |
clearable | — | boolean | undefined | — |
automaticDropdown | — | boolean | undefined | — |
clearIcon | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "clearIcon"> | — |
placeholder | — | string | undefined | — |
autocomplete | — | enum"none" | "inline" | "both" | "list"完整类型：PublicMember<AsamRemoteSelectV2Props<V, I>, "autocomplete"> | — |
allowCreate | — | boolean | undefined | false | undefined | true | — |
debounce | — | number | undefined | — |
loadingText | — | string | undefined | — |
noMatchText | — | string | undefined | — |
noDataText | — | string | undefined | — |
multipleLimit | — | number | undefined | — |
defaultFirstOption | — | boolean | undefined | — |
reserveKeyword | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "reserveKeyword"> | — |
valueKey | — | string | undefined | — |
collapseTags | — | boolean | undefined | — |
collapseTagsTooltip | — | boolean | undefined | — |
tagTooltip | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "tagTooltip"> | — |
maxCollapseTags | — | number | undefined | — |
fitInputWidth | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "fitInputWidth"> | — |
suffixIcon | — | PublicMember<AsamRemoteSelectV2Props<V, I>, "suffixIcon"> | — |
tagType | — | enum"primary" | "success" | "danger" | "warning" | "info"完整类型：PublicMember<AsamRemoteSelectV2Props<V, I>, "tagType"> | — |
tagEffect | — | enum"light" | "dark" | "plain"完整类型：PublicMember<AsamRemoteSelectV2Props<V, I>, "tagEffect"> | — |
remoteShowSuffix | — | boolean | undefined | — |
estimatedOptionHeight | — | number | undefined | — |
itemHeight | — | number | undefined | — |
createOption | — | AsamCreateOption<V, I> | undefined | — |
事件 AsamSelectV2DataEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
clear | — | (AsamSelectV2DataEmits<V, I>)["clear"] | — |
focus | — | [event: FocusEvent] | — |
end-reached | — | [direction: AsamScrollbarDirection] | — |
error | — | [error: AsamDataError] | — |
blur | — | [event: FocusEvent] | — |
visible-change | — | [visible: boolean] | — |
remove-tag | — | [value: unknown] | — |
success | — | [data: readonly AsamOption<V, I>[]] | — |
change | — | [value: string | V | AsamOption<V, I> | readonly AsamOption<V, I>[] | readonly V[] | null] | — |
update:modelValue | — | [value: string | V | AsamOption<V, I> | readonly AsamOption<V, I>[] | readonly V[] | null] | — |
插槽 AsamRemoteSelectV2Slots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | ((props: { item: AsamOption<AsamValue, object> | Record<string, unknown>; index: number; disabled: boolean; }) => unknown) | undefined | — |
prefix | — | (() => unknown) | undefined | — |
tag | — | (AsamRemoteSelectV2Slots<V, I>)["tag"] | — |
label | — | 查看完整类型((scope: { index: number; label: AsamSelectV2NativeProps["modelValue"]["label"]; value: AsamSelectV2NativeProps["modelValue"]["value"]; }) => unknown) | undefined | — |
empty | — | (() => unknown) | undefined | — |
loading | — | (() => unknown) | undefined | — |
header | — | (() => unknown) | undefined | — |
footer | — | (() => unknown) | undefined | — |
error | 替换本地错误区域；重试返回现有强制重新加载的 Promise。 | (AsamRemoteSelectV2Slots<V, I>)["error"] | — |
实例方法与状态 AsamRemoteSelectV2Expose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
selectedLabel | 原生模式读取依赖的实时标签；对象模式解析 ASAM 选项标签。 | string | string[] | — |
reload | — | (options?: { readonly force?: boolean; }) => Promise<AsamReloadResult<readonly AsamOption<V, I>[]>> | — |
cancel | — | () => void | — |
focus | 聚焦原生输入控件。 | () => void | — |
blur | — | () => void | — |
clearCreatedOptions | 仅在逻辑数据来源或作用域变化时重置本地创建项，不因搜索、刷新或错误重置。 | () => void | — |
用法与契约补充说明
基础用法
点击“读取当前标签”读取实例的只读 selectedLabel：空模型返回空字符串，选择后返回当前标签。focus() 与 blur() 为无参数方法，仅控制输入焦点，不改写模型；失焦按钮阻止鼠标按下时抢走焦点，以便观察 blur() 的实际作用。勾选“启用多选”切换到独立数组模型；空选择读取空数组，选择多个选项后返回标签数组，输入焦点方法仍不改写模型。
本地创建与完整实体
source(query) 中的查询变化、reload 和失败保留本地项；source('') 表示 query 中立 逻辑来源。真实 source owner、基础参数、字段策略或 provider/scope 变化自动清空。 source('') 也必须能构造有效来源。需要清空模型时由调用方另行更新 v-model。
生命周期、事件与实例
active=false 暂停请求并保留上次成功数据；reload({ force: true }) 请求新数据，cancel() 取消当前请求。success 返回规范化选项数组，error 返回 AsamDataError；旧成功数据更新失败时组件显示过期状态。reload 的 status 为 success、error 或 cancelled；不能把取消当作成功。
动态项高的原生兼容范围
estimatedOptionHeight 仍是本组件适用的公开属性，项高计算委托 Element Plus 2.14.7。
已观察到一个裸原生 ElSelectV2 对照：500 个平面选项、单选空模型 null、
filterable=true、height=120、itemHeight=34，另设 estimatedOptionHeight=34 时，
公开挂载及 nextTick 未在 10 秒观察窗口内完成。同一输入省略该属性后，裸原生正常挂载，
并完成列表底部／顶部滚动和数值 0 的选择。
异步查询与默认首项的原生兼容范围
defaultFirstOption 仍是本组件适用的公开属性。Element Plus 2.14.7 的一个限定对照中，
自动远程查询开启该属性，输入 Al 后等待异步结果；结果包含首个禁用项及两个可选项。
高级远端虚拟选择器与使用公开 remoteMethod、options、loading=true 等待结果的
裸原生 ElSelectV2 均在回包后未自动高亮可选首项，此时 Enter 保持空模型且不产生模型
事件；ArrowDown 后再按 Enter 可以选择首个可选项。
选项和标签的完整展示
完整示例在两个独立实例中演示虚拟选项模板、prefix/header/footer/loading/empty/label 和可删除 tag。来源仍返回规范化的平面实体；虚拟选择器的数据入口不接收原生分组 options，对嵌套原生 options 的需求由基础虚拟选择器 native 模式承接。多选使用原始数值数组，保留折叠标签提示、maxCollapseTags、multipleLimit 和 disabled；自定义 tag 通过原生 deleteTag 删除并触发 remove-tag，不直接改内部标签。完成请求按钮释放本地等待操作，便于观察真实 loading 与 empty 插槽；卸载时请求随独立子应用取消。虚拟选择器使用 fitInputWidth=320 设置弹层宽度。
选项和标签的完整展示
控制按钮可关闭并恢复 collapseTags 与 collapseTagsTooltip，切换 maxCollapseTags=1/3 与 multipleLimit=3/0。取消上限后可实际选择第四项，调用方恢复 [1, 3, 4] 后恢复上限；折叠和提示设置不改变模型或新增来源请求。原生 deleteTag 与 remove-tag 保留数值载荷。
局部请求错误插槽
可选 error 插槽仅在当前请求错误存在时调用，接收只读 { error, stale, retry }。
error 与本实例 error 事件中的 AsamDataError 为同一对象，保留 cause、kind、
message 与 notified；渲染插槽不会再次通知 provider。stale 表示保留的数据已过期。
更多参数与事件说明
局部请求错误插槽
retry() 不接收参数，直接返回现有 reload({ force: true }) 的 Promise，结果为
AsamReloadResult<readonly AsamOption<V, I>[]> 的 success、error 或 cancelled 分支。
重试遵守 active、当前来源、取消和卸载规则，不改写模型。
继承能力
本入口的独有 API 见上表，基础能力见本站对应页面。
关联组件
参数与事件补充说明
组合契约按分支生效；请同时查看公开类型。
参数与事件说明
filterable
必填：否；声明来源：数据 / provider 协议。
filterable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：true
source
必填：是；声明来源：数据 / provider 协议。
source 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(query: string): AsamOptionsSource<V, I, "api" | "request">
debounceMs
必填：否；声明来源：数据 / provider 协议。
默认值与来源
250（源码表达式；ASAM 声明）active
必填：否；声明来源：数据 / provider 协议。
active 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（源码表达式；ASAM 声明）immediate
必填：否；声明来源：数据 / provider 协议。
immediate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（源码表达式；ASAM 声明）ariaLabel
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
id
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
effect
必填：按分支；声明来源：上游声明。
effect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举："light" / "dark"
默认值与来源
未知 / 未声明固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperClass
必填：按分支；声明来源：上游声明。
popperClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperStyle
必填：按分支；声明来源：上游声明。
popperStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
fallbackPlacements
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：['bottom-start', 'top-start', 'right', 'left']（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
offset
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：12（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
placement
必填：按分支；声明来源：上游声明。
placement 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举："auto" / "auto-start" / "auto-end" / "top" / "bottom" / "right" / "left" / "top-start" / "top-end" / "bottom-start" / "bottom-end" / "right-start" / "right-end" / "left-start" / "left-end"
默认值与来源
未知 / 未声明固定上游文档默认：bottom-start（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
popperOptions
必填：按分支；声明来源：上游声明。
popperOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
popperOptions.placement:PublicMember<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "popperOptions">>, "placement">— 依赖声明枚举：
"auto"/"auto-start"/"auto-end"/"top"/"bottom"/"right"/"left"/"top-start"/"top-end"/"bottom-start"/"bottom-end"/"right-start"/"right-end"/"left-start"/"left-end"popperOptions.modifiers:PublicMember<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "popperOptions">>, "modifiers">— 依赖声明popperOptions.strategy:PublicMember<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "popperOptions">>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"popperOptions.onFirstUpdate:PublicMember<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "popperOptions">>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "popperOptions">>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
默认值与来源
未知 / 未声明固定上游文档默认：{}（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
showArrow
必填：按分支；声明来源：上游声明。
showArrow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
appendTo
必填：按分支；声明来源：上游声明。
appendTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
persistent
必填：按分支；声明来源：上游声明。
persistent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
teleported
必填：按分支；声明来源：上游声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
disabled
必填：按分支；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
tabindex
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
size
必填：按分支；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举："large" / "big" / "default" / "small"
height
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：274（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
scrollbarAlwaysOn
必填：按分支；声明来源：上游声明。
scrollbarAlwaysOn 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
props
必填：按分支；声明来源：上游声明。
props 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
props.label:string | undefined— 上游声明指定节点标签为节点对象的某个属性值
固定上游文档默认：
label（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）props.value:string | undefined— 上游声明指定选项的值为选项对象的某个属性值
固定上游文档默认：
value（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）props.disabled:string | undefined— 上游声明指定选项的禁用为选项对象的某个属性值
固定上游文档默认：
disabled（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）props.options:string | undefined— 上游声明指定选项的子选项为选项对象的某个属性值
固定上游文档默认：
options（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
name
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
separator
必填：按分支；声明来源：ASAM 声明。
modelValue
必填：按分支；声明来源：ASAM 声明。
modelValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
契约分支 3
modelValue.label:string— 数据 / provider 协议modelValue.value:V— 数据 / provider 协议modelValue.disabled:boolean | undefined— 数据 / provider 协议枚举：
false/truemodelValue.raw:I— 数据 / provider 协议modelValue.children:readonly AsamOption<V, I>[] | undefined— 数据 / provider 协议
契约分支 5
契约分支 6
契约分支 7
filterMethod
必填：按分支；声明来源：上游声明。
filterMethod 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
事件参数：(query: string): void
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
multiple
必填：按分支；声明来源：ASAM 声明。
multiple 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false
契约分支 5
枚举：true
valueMode
必填：按分支；声明来源：ASAM 声明。
valueMode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举："value"
契约分支 3
枚举："object"
multipleValueMode
必填：按分支；声明来源：ASAM 声明。
multipleValueMode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
契约分支 5
枚举："array"
契约分支 6
枚举："string"
emptyValues
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
valueOnClear
必填：按分支；声明来源：上游声明。
valueOnClear 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
valueOnClear.apply:(this: Function, thisArg: any, argArray?: any) => any— 依赖声明调用函数，以指定对象作为 this，并使用指定数组作为函数参数。
事件参数：
(this: Function, thisArg: any, argArray?: any): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.call:(this: Function, thisArg: any, ...argArray: any[]) => any— 依赖声明调用对象方法，并以另一个对象作为当前 this。
事件参数：
(this: Function, thisArg: any, ...argArray: any[]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.bind:(this: Function, thisArg: any, ...argArray: any[]) => any— 依赖声明创建具有相同函数体的绑定函数，将 this 绑定到指定对象，并设置初始参数。
事件参数：
(this: Function, thisArg: any, ...argArray: any[]): any嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.toString:() => string— 依赖声明返回函数的字符串表示。
事件参数：
(): string嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.prototype:any— 依赖声明valueOnClear.length:number— 依赖声明valueOnClear.arguments:any— 依赖声明valueOnClear.caller:Function— 依赖声明嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
valueOnClear.name:string— 依赖声明返回函数名称；函数名称只读，不能修改。
valueOnClear.__@hasInstance@8888:(value: any) => boolean— 依赖声明当函数用作构造函数时，判断指定值是否继承自该函数；构造函数可以覆盖此方法，控制 instanceof 对实例的识别。
事件参数：
(value: any): boolean嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
validateEvent
必填：按分支；声明来源：上游声明。
validateEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearable
必填：按分支；声明来源：上游声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
automaticDropdown
必填：按分支；声明来源：上游声明。
automaticDropdown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearIcon
必填：按分支；声明来源：上游声明。
clearIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "clearIcon">>, (...args: never[]) => unknown>>[1]): any
clearIcon.__isFragment:undefined— 依赖声明clearIcon.__isTeleport:undefined— 依赖声明clearIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：CircleClose（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
placeholder
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：Please select（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
autocomplete
必填：按分支；声明来源：上游声明。
autocomplete 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举："none" / "inline" / "both" / "list"
默认值与来源
未知 / 未声明固定上游文档默认：off（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
allowCreate
必填：按分支；声明来源：ASAM 声明。
allowCreate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
契约分支 3
枚举：false
契约分支 4
枚举：true
debounce
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：300（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
loadingText
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
noMatchText
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
noDataText
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：No Data（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
multipleLimit
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
defaultFirstOption
必填：按分支；声明来源：上游声明。
defaultFirstOption 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
reserveKeyword
必填：按分支；声明来源：上游声明。
reserveKeyword 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
valueKey
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：value（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
collapseTags
必填：按分支；声明来源：上游声明。
collapseTags 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
collapseTagsTooltip
必填：按分支；声明来源：上游声明。
collapseTagsTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
tagTooltip
必填：按分支；声明来源：上游声明。
tagTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
tagTooltip.appendTo:string | HTMLElement | undefined— 上游声明指示 Tooltip 的内容将附加在哪一个网页元素上
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）嵌套展开边界：大型实例类型；完整类型见公开类型视图。
tagTooltip.placement:PublicMember<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "tagTooltip">>, "placement">— 上游声明Tooltip 组件出现的位置
固定上游文档默认：
bottom（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
"auto"/"auto-start"/"auto-end"/"top"/"bottom"/"right"/"left"/"top-start"/"top-end"/"bottom-start"/"bottom-end"/"right-start"/"right-end"/"left-start"/"left-end"tagTooltip.fallbackPlacements:AsamSelectV2NativeProps["fallbackPlacements"]— 上游声明提示浮层可采用的位置列表，参阅 Popper 的 fallbackPlacements。
固定上游文档默认：
['bottom', 'top', 'right', 'left']（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.effect:PublicMember<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "tagTooltip">>, "effect">— 上游声明Tooltip 主题，内置了 dark / light 两种
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
"light"/"dark"tagTooltip.popperClass:string | undefined— 上游声明为 Tooltip 的 popper 添加自定义类名
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.popperStyle:PublicMember<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "tagTooltip">>, "popperStyle">— 上游声明为 Tooltip 的 popper 添加自定义样式
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）嵌套展开边界：大型实例类型；完整类型见公开类型视图。
tagTooltip.transition:string | undefined— 上游声明动画名称
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.teleported:boolean | undefined— 上游声明是否使用 teleport。设置成 true则会被追加到 append-to 的位置
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truetagTooltip.popperOptions:AsamSelectV2NativeProps["popperOptions"]— 上游声明Popper 配置参数。
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.popperOptions.placement:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "tagTooltip">>, "popperOptions">>, "placement">— 依赖声明枚举：
"auto"/"auto-start"/"auto-end"/"top"/"bottom"/"right"/"left"/"top-start"/"top-end"/"bottom-start"/"bottom-end"/"right-start"/"right-end"/"left-start"/"left-end"tagTooltip.popperOptions.modifiers:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "tagTooltip">>, "popperOptions">>, "modifiers">— 依赖声明tagTooltip.popperOptions.strategy:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "tagTooltip">>, "popperOptions">>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"tagTooltip.popperOptions.onFirstUpdate:PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "tagTooltip">>, "popperOptions">>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "tagTooltip">>, "popperOptions">>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
tagTooltip.showAfter:number | undefined— 上游声明在触发后多久显示内容，单位毫秒
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.hideAfter:number | undefined— 上游声明关闭时的延迟
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.autoClose:number | undefined— 上游声明tooltip 出现后自动隐藏延时，单位毫秒
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.offset:number | undefined— 上游声明Tooltip 出现位置的偏移量
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
默认值与来源
未知 / 未声明固定上游文档默认：{}（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
maxCollapseTags
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：1（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
fitInputWidth
必填：按分支；声明来源：上游声明。
fitInputWidth 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
suffixIcon
必填：按分支；声明来源：上游声明。
suffixIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<PublicMember<AsamRemoteSelectV2Props<V, I>, "suffixIcon">>, (...args: never[]) => unknown>>[1]): any
suffixIcon.__isFragment:undefined— 依赖声明suffixIcon.__isTeleport:undefined— 依赖声明suffixIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：ArrowDown（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
tagType
必填：按分支；声明来源：上游声明。
tagType 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举："primary" / "success" / "danger" / "warning" / "info"
默认值与来源
未知 / 未声明固定上游文档默认：info（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
tagEffect
必填：按分支；声明来源：上游声明。
tagEffect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举："light" / "dark" / "plain"
默认值与来源
未知 / 未声明固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
remoteShowSuffix
必填：按分支；声明来源：上游声明。
remoteShowSuffix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
estimatedOptionHeight
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
itemHeight
必填：按分支；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：34（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
createOption
必填：按分支；声明来源：ASAM 声明。
createOption 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 3
事件参数：(text: string): AsamOption<V, I>
AsamRemoteSelectV2Props 公开类型视图
ts
import type { Attrs } from 'vue';
import type { AsamRemoteSelectV2Props, AsamValue, AsamRecord, AsamOptionsSource, AsamSelectV2NativeProps, AsamControlSize, AsamSelectV2RuntimeProps, AsamSelectOption, AsamOption, AsamCreateOption } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamRemoteSelectV2Props
type PublicContract<V extends AsamValue = AsamValue, I extends object = AsamRecord> = AsamRemoteSelectV2Props<V, I>;参数与事件说明
clear
必填：是；声明来源：ASAM 声明。
focus
必填：是；声明来源：ASAM 声明。
end-reached
必填：是；声明来源：ASAM 声明。
error
必填：是；声明来源：数据 / provider 协议。
blur
必填：是；声明来源：ASAM 声明。
visible-change
必填：是；声明来源：数据 / provider 协议。
remove-tag
必填：是；声明来源：数据 / provider 协议。
success
必填：是；声明来源：数据 / provider 协议。
change
必填：是；声明来源：数据 / provider 协议。
update:modelValue
必填：是；声明来源：数据 / provider 协议。
AsamSelectV2DataEmits 公开类型视图
ts
import type { AsamSelectV2DataEmits, AsamValue, AsamSelectV2Emits, AsamScrollbarDirection, AsamDataError, AsamOption } from '@asam-ui/ui';
// AsamSelectV2DataEmits
type PublicContract<V extends AsamValue = AsamValue, I extends object = object> = {
"clear": (AsamSelectV2DataEmits<V, I>)["clear"];
"focus": [event: FocusEvent];
"end-reached": [direction: AsamScrollbarDirection];
"error": [error: AsamDataError];
"blur": [event: FocusEvent];
"visible-change": [visible: boolean];
"remove-tag": [value: unknown];
"success": [data: readonly AsamOption<V, I>[]];
"change": [value: string | V | AsamOption<V, I> | readonly AsamOption<V, I>[] | readonly V[] | null];
"update:modelValue": [value: string | V | AsamOption<V, I> | readonly AsamOption<V, I>[] | readonly V[] | null];
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: { item: AsamOption<AsamValue, object> | Record<string, unknown>; index: number; disabled: boolean; }): unknown
prefix
必填：否；声明来源：ASAM 声明。
prefix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
tag
必填：否；声明来源：ASAM 声明。
tag 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: Parameters<Extract<NonNullable<(AsamRemoteSelectV2Slots<V, I>)["tag"]>, (...args: never[]) => unknown>>[0]): unknown
label
必填：否；声明来源：ASAM 声明。
label 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { index: number; label: AsamSelectV2NativeProps["modelValue"]["label"]; value: AsamSelectV2NativeProps["modelValue"]["value"]; }): unknown
empty
必填：否；声明来源：ASAM 声明。
empty 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
loading
必填：否；声明来源：ASAM 声明。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
header
必填：否；声明来源：ASAM 声明。
header 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
footer
必填：否；声明来源：ASAM 声明。
footer 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
error
必填：否；声明来源：数据 / provider 协议。
error 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: Parameters<Extract<NonNullable<(AsamRemoteSelectV2Slots<V, I>)["error"]>, (...args: never[]) => unknown>>[0]): unknown
AsamRemoteSelectV2Slots 公开类型视图
ts
import type { AsamRemoteSelectV2Slots, AsamValue, AsamOption, AsamSelectV2Slots, AsamSelectV2NativeProps, AsamDataError, AsamReloadResult } from '@asam-ui/ui';
// AsamRemoteSelectV2Slots
type PublicContract<V extends AsamValue = AsamValue, I extends object = object> = {
"default"?: ((props: { item: AsamOption<AsamValue, object> | Record<string, unknown>; index: number; disabled: boolean; }) => unknown) | undefined;
"prefix"?: (() => unknown) | undefined;
"tag"?: (AsamRemoteSelectV2Slots<V, I>)["tag"];
"label"?: ((scope: { index: number; label: AsamSelectV2NativeProps["modelValue"]["label"]; value: AsamSelectV2NativeProps["modelValue"]["value"]; }) => unknown) | undefined;
"empty"?: (() => unknown) | undefined;
"loading"?: (() => unknown) | undefined;
"header"?: (() => unknown) | undefined;
"footer"?: (() => unknown) | undefined;
"error"?: (AsamRemoteSelectV2Slots<V, I>)["error"];
};clearCreatedOptions() 只清空组件本地创建项和基础入口文本 memo，保留 v-model 与 provider/cache。query 中立来源参数或 source owner、scope 改变自动清空； 搜索、刷新及错误不会清空。source('') 必须可构造同一来源的无查询描述符。
参数与事件说明
selectedLabel
必填：是；声明来源：数据 / provider 协议。
reload
必填：是；声明来源：数据 / provider 协议。
reload 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(options?: { readonly force?: boolean; } | undefined): Promise<AsamReloadResult<readonly AsamOption<V, I>[]>>
cancel
必填：是；声明来源：数据 / provider 协议。
cancel 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
focus
必填：是；声明来源：ASAM 声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
blur
必填：是；声明来源：ASAM 声明。
blur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
clearCreatedOptions
必填：是；声明来源：ASAM 声明。
clearCreatedOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamRemoteSelectV2Expose 公开类型视图
ts
import type { AsamRemoteSelectV2Expose, AsamValue, AsamSelectV2Expose, AsamOption, AsamReloadResult } from '@asam-ui/ui';
// AsamRemoteSelectV2Expose
type PublicContract<V extends AsamValue = AsamValue, I extends object = object> = {
readonly "selectedLabel": string | string[];
"reload": (options?: { readonly force?: boolean; }) => Promise<AsamReloadResult<readonly AsamOption<V, I>[]>>;
"cancel": () => void;
"focus": () => void;
"blur": () => void;
"clearCreatedOptions": () => void;
};