远端选择器
在选择器上管理异步选项、重载和请求取消。
基础用法
示例通过本地 Promise 函数加载选项，支持模型更新、暂停与重载。所有请求都留在演示内部。
点击“读取当前标签”读取实例的只读 selectedLabel：空模型返回空字符串，选择后返回当前标签。 完整说明。
本地数据与生命周期
vue
<template>
<section class="data-demo">
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="active">启用请求</AsamCheckboxItem>
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="multipleMode">启用多选</AsamCheckboxItem>
<AsamRemoteSelect
v-if="!multipleMode"
ref="control"
v-model="value"
:data-source="dataSource"
:active="active"
size="default"
placeholder="请选择或输入"
@error="error = $event.message"
@success="error = ''"
>
<template #prefix><span aria-hidden="true">状态</span></template>
</AsamRemoteSelect>
<AsamRemoteSelect
v-else
ref="control"
v-model="multipleValue"
multiple
:data-source="dataSource"
:active="active"
size="default"
placeholder="请选择或输入"
@error="error = $event.message"
@success="error = ''"
>
<template #prefix><span aria-hidden="true">状态</span></template>
</AsamRemoteSelect>
<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" @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: 'AsamRemoteSelectBasicExample' });
import { AsamCheckboxItem, AsamButton, AsamRemoteSelect, defineAsamOptions } from '@asam-ui/ui';
import type { AsamAsyncSelectExpose, 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<AsamAsyncSelectExpose<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>();
const dataSource = 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>
<AsamRemoteSelect
v-if="!multipleMode"
ref="control"
v-model="value"
:data-source="dataSource"
:active="active"
size="default"
placeholder="请选择或输入"
@error="error = $event.message"
@success="error = ''"
>
<template #prefix><span aria-hidden="true">状态</span></template>
</AsamRemoteSelect>
<AsamRemoteSelect
v-else
ref="control"
v-model="multipleValue"
multiple
:data-source="dataSource"
:active="active"
size="default"
placeholder="请选择或输入"
@error="error = $event.message"
@success="error = ''"
>
<template #prefix><span aria-hidden="true">状态</span></template>
</AsamRemoteSelect>
<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" @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: 'AsamRemoteSelectBasicExample' });
import { AsamCheckboxItem, AsamButton, AsamRemoteSelect, 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();
const dataSource = 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。 完整说明。
本地创建、规范项与来源重置
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>
<AsamRemoteSelect
ref="control"
v-model="value"
:api="api"
:params="{ tenant, text: '' }"
:transform="transform"
:search="search"
: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>
</AsamRemoteSelect>
<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, AsamRemoteSelect } from '@asam-ui/ui';
import type {
AsamOption,
AsamCreateOption,
AsamValue,
AsamAsyncSelectExpose,
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: 'AsamRemoteSelectLocalCreationDemo' });
const value = ref<AsamOption<string, Member> | null>(null);
const control = ref<AsamAsyncSelectExpose<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 search = {
debounceMs: 100,
buildParams: (params: Query, text: string) => ({ ...params, text })
};
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>
<AsamRemoteSelect
ref="control"
v-model="value"
:api="api"
:params="{ tenant, text: '' }"
:transform="transform"
:search="search"
: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>
</AsamRemoteSelect>
<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, AsamRemoteSelect } from '@asam-ui/ui';
const tenant = ref('a');
const failure = ref(false);
const canonical = ref(false);
defineOptions({ name: 'AsamRemoteSelectLocalCreationDemo' });
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 search = { debounceMs: 100, buildParams: (params, text) => ({ ...params, text }) };
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>本地创建集合只属于当前组件，success 和 provider/cache 不包含这些项。相同类型、 相同 value 去重，provider 同值规范项优先。来源刷新后，已经传给父组件的对象模型 不会被自动替换；清空后重新选择会使用当前来源规范项。
clearCreatedOptions() 清空本地集合及文本 memo，不清空 v-model。相同来源的搜索、 reload、一般 epoch 更新和失败重试保留本地项；真实来源、基础 params、字段策略 或 provider/scope 改变时自动清空。需要清空模型时由调用方另行更新 v-model。
数据来源与覆盖
dataSource、api + params、request 三种来源只选一种。 完整说明。
单选值模式使用标量或 null；对象模式使用规范化 AsamOption。多选的数组与分隔字符串模式由 multiple、valueMode、multipleValueMode 联合约束；对象模式不能使用字符串存储。切换值策略时同时调整模型类型。
来源接管 options、loading 和远端查询；数据组件不开放基础选择器的 native 值模式。基础页中只使用与本组件公开分支兼容的能力。
生命周期、事件与实例
active=false 暂停请求并保留上次成功数据；reload({ force: true }) 请求新数据，cancel() 取消当前请求。 完整说明。
immediate 控制初始化是否请求，active 控制请求是否启用。初始化和默认值以本页自动 API 的原始来源为准。
插槽与基础能力
prefix、header、footer、empty、loading、tag、label 等插槽保留各自基础作用域；selectedLabel 为只读标签结果，focus/blur 用于焦点控制。虚拟选择器 default 插槽使用基础虚拟选项作用域。
本站继承关系
- 选择器：适用的基础展示、交互与公开 API。
本页数据来源、模型、事件和实例的覆盖规则优先；本站链接不扩大本组件公开契约。尺寸使用基础组件的 ASAM 尺寸规则，示例使用 default。
URL provider 与共享生命周期
以下完整示例创建独立子 app，在挂载前通过 provideAsamData 安装本地 provider；不会向示例 URL 发网络请求。 完整说明。
setAsamDataScope 使旧 scope 请求失效并重新加载，invalidateAsamData 推进当前 epoch。 完整说明。
URL 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 _hoisted_1: any = { class: "demo-root-layout" };
const _hoisted_2: any = { "data-testid": "provider-app-contract" };
const _hoisted_3: any = { "data-testid": "runtime-key-contract-result" };
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_1: any = require("./provider");
const vue_4: any = require("vue");
const ui_2: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamRemoteSelectProviderLifetimeDemo' },
__name: 'Demo',
setup(__props?: any) {
const host: any = (0, vue_3.ref)();
let app: any;
let installedProvider: any;
let providerState: any;
const checks: any = (0, vue_3.ref)(null);
function rejected(operation?: any) {
try {
operation();
return 'accepted';
}
catch (cause: any) {
if (!(cause instanceof ui_1.AsamDataFailure))
throw cause;
return cause.kind;
}
}
function verifyAppContracts() {
if (!app || !installedProvider || !providerState)
return;
const target: any = app;
const provider: any = installedProvider;
const runtime: any = (0, ui_1.getAsamDataRuntime)(target);
const before: any = {
calls: providerState.calls.length,
scope: runtime.scope,
epoch: runtime.epoch
};
(0, ui_1.provideAsamData)(target, provider);
const sameRuntime: any = runtime === (0, ui_1.getAsamDataRuntime)(target);
const replacement: any = rejected(() => (0, ui_1.provideAsamData)(target, {}));
// This scenario deliberately creates an independent app to verify runtime isolation.
// eslint-disable-next-line vue/one-component-per-file
const other: any = (0, vue_3.createApp)({ render: () => null });
const otherRuntime: any = (0, ui_1.getAsamDataRuntime)(other);
const context: any = runtime.createContext();
const otherContext: any = otherRuntime.createContext();
const currentBefore: any = runtime.isCurrent(context);
const foreignCurrent: any = runtime.isCurrent(otherContext);
(0, ui_1.setAsamDataScope)(target, runtime.scope);
const empty: any = rejected(() => (0, ui_1.setAsamDataScope)(target, ''));
const spaces: any = rejected(() => (0, ui_1.setAsamDataScope)(target, ' '));
const invalidInstallScope: any = rejected(() => (0, ui_1.provideAsamData)(target, provider, { scope: '' }));
runtime.release(context);
otherRuntime.release(otherContext);
checks.value = {
sameRuntime,
replacement,
otherIsolated: otherRuntime !== runtime && otherRuntime.provider === undefined,
providerRetained: runtime.provider === installedProvider,
currentBefore,
foreignCurrent,
currentAfterRelease: runtime.isCurrent(context),
abortedAfterRelease: context.signal.aborted,
empty,
spaces,
invalidInstallScope,
before,
after: { calls: providerState.calls.length, scope: runtime.scope, epoch: runtime.epoch }
};
}
(0, vue_3.onMounted)(() => {
if (!host.value)
return;
const { provider, state, release }: any = (0, provider_1.createProvider)();
installedProvider = provider;
providerState = state;
// Mount the imported child in the separately configured provider app.
// eslint-disable-next-line vue/one-component-per-file
app = (0, vue_3.createApp)(Child_vue_1.default, { state, release });
(0, ui_1.provideAsamData)(app, provider, { scope: 'provider-a' });
app.mount(host.value);
});
(0, vue_3.onBeforeUnmount)(() => app?.unmount());
const runtimeKeyHostA: any = (0, vue_3.ref)();
const runtimeKeyHostB: any = (0, vue_3.ref)();
const runtimeKeyResult: any = (0, vue_3.ref)([]);
function verifyRuntimeKey() {
if (!runtimeKeyHostA.value || !runtimeKeyHostB.value)
return;
const duplicateKey: any = Symbol('AsamDataRuntime');
const injected: any = [];
const makeApp: any = () => {
// eslint-disable-next-line vue/one-component-per-file
return (0, vue_3.createApp)({
setup() {
const runtime: any = (0, vue_4.inject)(ui_2.asamDataRuntimeKey);
if (!runtime)
throw Error('Public runtime injection missing');
const context: any = runtime.createContext();
const snapshot: any = {
scope: runtime.scope,
missingDuplicate: (0, vue_4.inject)(duplicateKey, undefined) === undefined,
missingString: (0, vue_4.inject)('AsamDataRuntime', undefined) === undefined,
current: runtime.isCurrent(context),
released: false,
cancelled: false
};
injected.push(snapshot);
(0, vue_3.onBeforeUnmount)(() => {
runtime.release(context);
snapshot.released = !runtime.isCurrent(context);
snapshot.cancelled = context.signal.aborted;
});
return () => (0, vue_4.h)('pre', { 'data-testid': 'runtime-key-injected-output' }, runtime.scope);
}
});
};
const first: any = makeApp(), second: any = makeApp();
const providerA: any = {}, providerB: any = {};
(0, ui_1.provideAsamData)(first, providerA, { scope: 'key-a' });
(0, ui_1.provideAsamData)(second, providerB, { scope: 'key-b' });
const a: any = (0, ui_1.getAsamDataRuntime)(first), b: any = (0, ui_1.getAsamDataRuntime)(second);
try {
first.mount(runtimeKeyHostA.value);
second.mount(runtimeKeyHostB.value);
const phases: any = [
{
phase: 'runtime-key-public-root-symbol',
symbol: typeof ui_2.asamDataRuntimeKey === 'symbol'
},
{
phase: 'runtime-key-distinct-app-runtime',
distinct: a !== b,
ownProviders: a.provider === providerA && b.provider === providerB
},
{
phase: 'runtime-key-real-mounted-injection',
scopes: injected.map((item?: any) => item.scope),
current: injected.every((item?: any) => item.current),
rendered: [runtimeKeyHostA.value.textContent, runtimeKeyHostB.value.textContent]
},
{
phase: 'runtime-key-symbol-identity-and-string-isolation',
duplicateMissing: injected.every((item?: any) => item.missingDuplicate),
stringMissing: injected.every((item?: any) => item.missingString)
}
];
(0, ui_1.setAsamDataScope)(first, 'key-a-next');
phases.push({
phase: 'runtime-key-scope-invalidation-preserves-provided-runtime',
same: (0, ui_1.getAsamDataRuntime)(first) === a,
first: a.scope,
second: b.scope
});
first.unmount();
second.unmount();
phases.push({
phase: 'runtime-key-unmount-releases-own-contexts',
released: injected.every((item?: any) => item.released && item.cancelled),
targetsEmpty: !runtimeKeyHostA.value.textContent && !runtimeKeyHostB.value.textContent
});
runtimeKeyResult.value = phases;
}
finally {
if (runtimeKeyHostA.value.textContent)
first.unmount();
if (runtimeKeyHostB.value.textContent)
second.unmount();
}
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("div", _hoisted_1, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: verifyAppContracts
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[0] || (_cache[0] = [
(0, vue_2.createTextVNode)("检查应用安装与 scope 边界", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createElementVNode)("pre", _hoisted_2, (0, vue_2.toDisplayString)(JSON.stringify(checks.value)), 1 /* TEXT */),
(0, vue_2.createElementVNode)("div", {
ref_key: "host",
ref: host
}, null, 512 /* NEED_PATCH */),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: verifyRuntimeKey
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[1] || (_cache[1] = [
(0, vue_2.createTextVNode)("检查公开 runtime 注入键", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createElementVNode)("pre", _hoisted_3, (0, vue_2.toDisplayString)(JSON.stringify(runtimeKeyResult.value)), 1 /* TEXT */),
(0, vue_2.createElementVNode)("div", {
ref_key: "runtimeKeyHostA",
ref: runtimeKeyHostA
}, null, 512 /* NEED_PATCH */),
(0, vue_2.createElementVNode)("div", {
ref_key: "runtimeKeyHostB",
ref: runtimeKeyHostB
}, null, 512 /* NEED_PATCH */)
]));
};
}
});
exports.default.__scopeId = "data-v-170544ea";
},
"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",
"data-testid": "provider-lifetime"
};
const _hoisted_2: any = { "data-testid": "provider-observation" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamRemoteSelectProviderLifetimeChild' },
__name: 'Child',
props: {
state: { type: Object, required: true },
release: { type: Function, required: true }
},
setup(__props?: any) {
const props: any = __props;
const { state, release }: any = props;
const instance: any = (0, vue_3.getCurrentInstance)();
if (!instance)
throw new Error('Demo requires an app');
const app: any = instance.appContext.app;
const scope: any = (0, vue_3.ref)('provider-a');
const text: any = (0, vue_3.ref)('');
const firstValue: any = (0, vue_3.ref)(null);
const secondValue: any = (0, vue_3.ref)(null);
const first: any = (0, vue_3.ref)();
const second: any = (0, vue_3.ref)();
const firstStatus: any = (0, vue_3.ref)('pending');
const secondStatus: any = (0, vue_3.ref)('pending');
const transaction: any = (0, vue_3.ref)('idle');
const factory: any = (0, ui_1.defineAsamOptions)();
const cache: any = { ttlMs: 60000 };
const fields: any = { label: 'name', value: 'id' };
function isRecord(value?: any) {
return typeof value === 'object' && value !== null && !Array.isArray(value);
}
function transform(response?: any) {
if (!Array.isArray(response))
throw new Error('Expected member array');
const values: any = response;
return values.map((value?: any) => {
if (!isRecord(value) || typeof value.id !== 'number' || typeof value.name !== 'string')
throw new Error('Malformed member');
return { id: value.id, name: value.name };
});
}
const source: any = (0, vue_3.computed)(() => factory.request({
request: { url: '/demo/members', params: { text: text.value } },
transform,
fieldNames: fields,
cache
}));
async function refresh() {
state.slow = false;
transaction.value = (await first.value?.reload({ force: true }))?.status ?? 'cancelled';
}
function changeScope() {
scope.value = scope.value === 'provider-a' ? 'provider-b' : 'provider-a';
(0, ui_1.setAsamDataScope)(app, scope.value);
}
async function cancelOne() {
if (!first.value || !second.value)
return;
state.slow = true;
transaction.value = 'waiting';
const one: any = first.value.reload({ force: true });
const two: any = second.value.reload({ force: true });
first.value.cancel();
const results: any = await Promise.all([one, two]);
transaction.value = results.map((result?: any) => result.status).join('/');
state.slow = false;
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createElementVNode)("label", null, [
_cache[9] || (_cache[9] = (0, vue_2.createTextVNode)(" 实际请求文本 ", -1 /* CACHED */)),
(0, vue_2.createCommentVNode)(" prettier-ignore "),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamInput), {
modelValue: text.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((text).value = $event)),
"aria-label": "实际请求文本"
}, null, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: (0, vue_2.unref)(state).failure,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => (((0, vue_2.unref)(state).failure) = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createCommentVNode)(" prettier-ignore "),
_cache[10] || (_cache[10] = (0, vue_2.createTextVNode)(" 模拟来源失败 ", -1 /* CACHED */))
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamRemoteSelect), {
ref_key: "first",
ref: first,
modelValue: firstValue.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event?: any) => ((firstValue).value = $event)),
"data-source": source.value,
placeholder: "第一缓存消费者",
clearable: "",
onSuccess: _cache[3] || (_cache[3] = ($event?: any) => (firstStatus.value = 'success')),
onError: _cache[4] || (_cache[4] = ($event?: any) => (firstStatus.value = $event.kind))
}, null, 8 /* PROPS */, ["modelValue", "data-source"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamRemoteSelect), {
ref_key: "second",
ref: second,
modelValue: secondValue.value,
"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event?: any) => ((secondValue).value = $event)),
"data-source": source.value,
placeholder: "第二缓存消费者",
clearable: "",
onSuccess: _cache[6] || (_cache[6] = ($event?: any) => (secondStatus.value = 'success')),
onError: _cache[7] || (_cache[7] = ($event?: any) => (secondStatus.value = $event.kind))
}, null, 8 /* PROPS */, ["modelValue", "data-source"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: refresh
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(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: changeScope
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_2.createTextVNode)("切换数据 scope", -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) => ((0, vue_2.unref)(ui_1.invalidateAsamData)((0, vue_2.unref)(app))))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(0, vue_2.createTextVNode)("失效当前 epoch", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: cancelOne
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(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: (0, vue_2.unref)(release)
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(0, vue_2.createTextVNode)("完成共享传输", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["onClick"]),
(0, vue_2.createElementVNode)("pre", _hoisted_2, (0, vue_2.toDisplayString)(JSON.stringify({
firstValue: firstValue.value,
secondValue: secondValue.value,
firstStatus: firstStatus.value,
secondStatus: secondStatus.value,
transaction: transaction.value,
scope: scope.value,
calls: (0, vue_2.unref)(state).calls,
aborts: (0, vue_2.unref)(state).aborts
})), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-e6b661d0";
},
"provider.ts": (module: any, exports: any, require: any) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createProvider = createProvider;
const vue_1: any = require("vue");
/** Local transport only: no server URL is contacted by this example. */
function createProvider() {
const state: any = (0, vue_1.reactive)({ failure: false, slow: false, calls: [], aborts: 0 });
let release: any = () => undefined;
const provider: any = {
async request(config?: any, context?: any) {
if (config.url !== '/demo/members' || config.method !== 'get')
throw new Error('Unknown local route');
const text: any = config.params?.text;
if (typeof text !== 'string')
throw new Error('text must be a string');
context.signal.throwIfAborted();
state.calls.push({
text,
scope: context.scope,
epoch: context.epoch,
requestId: context.requestId
});
if (state.slow) {
await new Promise((resolve?: any, reject?: any) => {
const abort: any = () => {
state.aborts++;
context.signal.removeEventListener('abort', abort);
reject(context.signal.reason);
};
context.signal.addEventListener('abort', abort, { once: true });
release = () => {
context.signal.removeEventListener('abort', abort);
resolve();
};
});
}
context.signal.throwIfAborted();
if (state.failure)
throw new Error('Local provider failure');
return [
{ id: 1, name: '第一成员' },
{ id: 2, name: '第二成员' }
].filter((item?: any) => item.name.includes(text));
}
};
return { provider, state, release: () => release() };
}
},
};
const __dependencies: any = {"Demo.vue":{"./Child.vue":"Child.vue","./provider":"provider.ts"},"Child.vue":{"./provider":"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-root-layout[data-v-170544ea] {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout[data-v-170544ea] > :is(p, pre, output) {
margin-block: 0;
}
.demo-spacing-1[data-v-e6b661d0] {
display: grid;
gap: var(--asam-space-md);
}
</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 _hoisted_1 = { class: "demo-root-layout" };
const _hoisted_2 = { "data-testid": "provider-app-contract" };
const _hoisted_3 = { "data-testid": "runtime-key-contract-result" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
const Child_vue_1 = __importDefault(require("./Child.vue"));
const provider_1 = require("./provider");
const vue_3 = require("vue");
const ui_2 = require("@asam-ui/ui");
exports.default = Object.assign({ name: 'AsamRemoteSelectProviderLifetimeDemo' }, {
__name: 'Demo',
setup(__props) {
const host = (0, vue_2.ref)();
let app;
let installedProvider;
let providerState;
const checks = (0, vue_2.ref)(null);
function rejected(operation) {
try {
operation();
return 'accepted';
}
catch (cause) {
if (!(cause instanceof ui_1.AsamDataFailure))
throw cause;
return cause.kind;
}
}
function verifyAppContracts() {
if (!app || !installedProvider || !providerState)
return;
const target = app;
const provider = installedProvider;
const runtime = (0, ui_1.getAsamDataRuntime)(target);
const before = {
calls: providerState.calls.length,
scope: runtime.scope,
epoch: runtime.epoch
};
(0, ui_1.provideAsamData)(target, provider);
const sameRuntime = runtime === (0, ui_1.getAsamDataRuntime)(target);
const replacement = rejected(() => (0, ui_1.provideAsamData)(target, {}));
// This scenario deliberately creates an independent app to verify runtime isolation.
// eslint-disable-next-line vue/one-component-per-file
const other = (0, vue_2.createApp)({ render: () => null });
const otherRuntime = (0, ui_1.getAsamDataRuntime)(other);
const context = runtime.createContext();
const otherContext = otherRuntime.createContext();
const currentBefore = runtime.isCurrent(context);
const foreignCurrent = runtime.isCurrent(otherContext);
(0, ui_1.setAsamDataScope)(target, runtime.scope);
const empty = rejected(() => (0, ui_1.setAsamDataScope)(target, ''));
const spaces = rejected(() => (0, ui_1.setAsamDataScope)(target, ' '));
const invalidInstallScope = rejected(() => (0, ui_1.provideAsamData)(target, provider, { scope: '' }));
runtime.release(context);
otherRuntime.release(otherContext);
checks.value = {
sameRuntime,
replacement,
otherIsolated: otherRuntime !== runtime && otherRuntime.provider === undefined,
providerRetained: runtime.provider === installedProvider,
currentBefore,
foreignCurrent,
currentAfterRelease: runtime.isCurrent(context),
abortedAfterRelease: context.signal.aborted,
empty,
spaces,
invalidInstallScope,
before,
after: { calls: providerState.calls.length, scope: runtime.scope, epoch: runtime.epoch }
};
}
(0, vue_2.onMounted)(() => {
if (!host.value)
return;
const { provider, state, release } = (0, provider_1.createProvider)();
installedProvider = provider;
providerState = state;
// Mount the imported child in the separately configured provider app.
// eslint-disable-next-line vue/one-component-per-file
app = (0, vue_2.createApp)(Child_vue_1.default, { state, release });
(0, ui_1.provideAsamData)(app, provider, { scope: 'provider-a' });
app.mount(host.value);
});
(0, vue_2.onBeforeUnmount)(() => app?.unmount());
const runtimeKeyHostA = (0, vue_2.ref)();
const runtimeKeyHostB = (0, vue_2.ref)();
const runtimeKeyResult = (0, vue_2.ref)([]);
function verifyRuntimeKey() {
if (!runtimeKeyHostA.value || !runtimeKeyHostB.value)
return;
const duplicateKey = Symbol('AsamDataRuntime');
const injected = [];
const makeApp = () => {
// eslint-disable-next-line vue/one-component-per-file
return (0, vue_2.createApp)({
setup() {
const runtime = (0, vue_3.inject)(ui_2.asamDataRuntimeKey);
if (!runtime)
throw Error('Public runtime injection missing');
const context = runtime.createContext();
const snapshot = {
scope: runtime.scope,
missingDuplicate: (0, vue_3.inject)(duplicateKey, undefined) === undefined,
missingString: (0, vue_3.inject)('AsamDataRuntime', undefined) === undefined,
current: runtime.isCurrent(context),
released: false,
cancelled: false
};
injected.push(snapshot);
(0, vue_2.onBeforeUnmount)(() => {
runtime.release(context);
snapshot.released = !runtime.isCurrent(context);
snapshot.cancelled = context.signal.aborted;
});
return () => (0, vue_3.h)('pre', { 'data-testid': 'runtime-key-injected-output' }, runtime.scope);
}
});
};
const first = makeApp(), second = makeApp();
const providerA = {}, providerB = {};
(0, ui_1.provideAsamData)(first, providerA, { scope: 'key-a' });
(0, ui_1.provideAsamData)(second, providerB, { scope: 'key-b' });
const a = (0, ui_1.getAsamDataRuntime)(first), b = (0, ui_1.getAsamDataRuntime)(second);
try {
first.mount(runtimeKeyHostA.value);
second.mount(runtimeKeyHostB.value);
const phases = [
{
phase: 'runtime-key-public-root-symbol',
symbol: typeof ui_2.asamDataRuntimeKey === 'symbol'
},
{
phase: 'runtime-key-distinct-app-runtime',
distinct: a !== b,
ownProviders: a.provider === providerA && b.provider === providerB
},
{
phase: 'runtime-key-real-mounted-injection',
scopes: injected.map((item) => item.scope),
current: injected.every((item) => item.current),
rendered: [runtimeKeyHostA.value.textContent, runtimeKeyHostB.value.textContent]
},
{
phase: 'runtime-key-symbol-identity-and-string-isolation',
duplicateMissing: injected.every((item) => item.missingDuplicate),
stringMissing: injected.every((item) => item.missingString)
}
];
(0, ui_1.setAsamDataScope)(first, 'key-a-next');
phases.push({
phase: 'runtime-key-scope-invalidation-preserves-provided-runtime',
same: (0, ui_1.getAsamDataRuntime)(first) === a,
first: a.scope,
second: b.scope
});
first.unmount();
second.unmount();
phases.push({
phase: 'runtime-key-unmount-releases-own-contexts',
released: injected.every((item) => item.released && item.cancelled),
targetsEmpty: !runtimeKeyHostA.value.textContent && !runtimeKeyHostB.value.textContent
});
runtimeKeyResult.value = phases;
}
finally {
if (runtimeKeyHostA.value.textContent)
first.unmount();
if (runtimeKeyHostB.value.textContent)
second.unmount();
}
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("div", _hoisted_1, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: verifyAppContracts
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[0] || (_cache[0] = [
(0, vue_1.createTextVNode)("检查应用安装与 scope 边界", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createElementVNode)("pre", _hoisted_2, (0, vue_1.toDisplayString)(JSON.stringify(checks.value)), 1 /* TEXT */),
(0, vue_1.createElementVNode)("div", {
ref_key: "host",
ref: host
}, null, 512 /* NEED_PATCH */),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: verifyRuntimeKey
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[1] || (_cache[1] = [
(0, vue_1.createTextVNode)("检查公开 runtime 注入键", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createElementVNode)("pre", _hoisted_3, (0, vue_1.toDisplayString)(JSON.stringify(runtimeKeyResult.value)), 1 /* TEXT */),
(0, vue_1.createElementVNode)("div", {
ref_key: "runtimeKeyHostA",
ref: runtimeKeyHostA
}, null, 512 /* NEED_PATCH */),
(0, vue_1.createElementVNode)("div", {
ref_key: "runtimeKeyHostB",
ref: runtimeKeyHostB
}, null, 512 /* NEED_PATCH */)
]));
};
}
});
exports.default.__scopeId = "data-v-2f75af67";
},
"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",
"data-testid": "provider-lifetime"
};
const _hoisted_2 = { "data-testid": "provider-observation" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = Object.assign({ name: 'AsamRemoteSelectProviderLifetimeChild' }, {
__name: 'Child',
props: {
state: { type: Object, required: true },
release: { type: Function, required: true }
},
setup(__props) {
const props = __props;
const { state, release } = props;
const instance = (0, vue_2.getCurrentInstance)();
if (!instance)
throw new Error('Demo requires an app');
const app = instance.appContext.app;
const scope = (0, vue_2.ref)('provider-a');
const text = (0, vue_2.ref)('');
const firstValue = (0, vue_2.ref)(null);
const secondValue = (0, vue_2.ref)(null);
const first = (0, vue_2.ref)();
const second = (0, vue_2.ref)();
const firstStatus = (0, vue_2.ref)('pending');
const secondStatus = (0, vue_2.ref)('pending');
const transaction = (0, vue_2.ref)('idle');
const factory = (0, ui_1.defineAsamOptions)();
const cache = { ttlMs: 60000 };
const fields = { label: 'name', value: 'id' };
function isRecord(value) {
return typeof value === 'object' && value !== null && !Array.isArray(value);
}
function transform(response) {
if (!Array.isArray(response))
throw new Error('Expected member array');
const values = response;
return values.map((value) => {
if (!isRecord(value) || typeof value.id !== 'number' || typeof value.name !== 'string')
throw new Error('Malformed member');
return { id: value.id, name: value.name };
});
}
const source = (0, vue_2.computed)(() => factory.request({
request: { url: '/demo/members', params: { text: text.value } },
transform,
fieldNames: fields,
cache
}));
async function refresh() {
state.slow = false;
transaction.value = (await first.value?.reload({ force: true }))?.status ?? 'cancelled';
}
function changeScope() {
scope.value = scope.value === 'provider-a' ? 'provider-b' : 'provider-a';
(0, ui_1.setAsamDataScope)(app, scope.value);
}
async function cancelOne() {
if (!first.value || !second.value)
return;
state.slow = true;
transaction.value = 'waiting';
const one = first.value.reload({ force: true });
const two = second.value.reload({ force: true });
first.value.cancel();
const results = await Promise.all([one, two]);
transaction.value = results.map((result) => result.status).join('/');
state.slow = false;
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createElementVNode)("label", null, [
_cache[9] || (_cache[9] = (0, vue_1.createTextVNode)(" 实际请求文本 ", -1 /* CACHED */)),
(0, vue_1.createCommentVNode)(" prettier-ignore "),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamInput), {
modelValue: text.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((text).value = $event)),
"aria-label": "实际请求文本"
}, null, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
modelValue: (0, vue_1.unref)(state).failure,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (((0, vue_1.unref)(state).failure) = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createCommentVNode)(" prettier-ignore "),
_cache[10] || (_cache[10] = (0, vue_1.createTextVNode)(" 模拟来源失败 ", -1 /* CACHED */))
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamRemoteSelect), {
ref_key: "first",
ref: first,
modelValue: firstValue.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((firstValue).value = $event)),
"data-source": source.value,
placeholder: "第一缓存消费者",
clearable: "",
onSuccess: _cache[3] || (_cache[3] = $event => (firstStatus.value = 'success')),
onError: _cache[4] || (_cache[4] = $event => (firstStatus.value = $event.kind))
}, null, 8 /* PROPS */, ["modelValue", "data-source"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamRemoteSelect), {
ref_key: "second",
ref: second,
modelValue: secondValue.value,
"onUpdate:modelValue": _cache[5] || (_cache[5] = $event => ((secondValue).value = $event)),
"data-source": source.value,
placeholder: "第二缓存消费者",
clearable: "",
onSuccess: _cache[6] || (_cache[6] = $event => (secondStatus.value = 'success')),
onError: _cache[7] || (_cache[7] = $event => (secondStatus.value = $event.kind))
}, null, 8 /* PROPS */, ["modelValue", "data-source"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: refresh
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(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: changeScope
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_1.createTextVNode)("切换数据 scope", -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 => ((0, vue_1.unref)(ui_1.invalidateAsamData)((0, vue_1.unref)(app))))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(0, vue_1.createTextVNode)("失效当前 epoch", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: cancelOne
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(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: (0, vue_1.unref)(release)
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(0, vue_1.createTextVNode)("完成共享传输", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["onClick"]),
(0, vue_1.createElementVNode)("pre", _hoisted_2, (0, vue_1.toDisplayString)(JSON.stringify({
firstValue: firstValue.value,
secondValue: secondValue.value,
firstStatus: firstStatus.value,
secondStatus: secondStatus.value,
transaction: transaction.value,
scope: scope.value,
calls: (0, vue_1.unref)(state).calls,
aborts: (0, vue_1.unref)(state).aborts
})), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-e17ac341";
},
"provider.js": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createProvider = createProvider;
const vue_1 = require("vue");
/** Local transport only: no server URL is contacted by this example. */
function createProvider() {
const state = (0, vue_1.reactive)({ failure: false, slow: false, calls: [], aborts: 0 });
let release = () => undefined;
const provider = {
async request(config, context) {
if (config.url !== '/demo/members' || config.method !== 'get')
throw new Error('Unknown local route');
const text = config.params?.text;
if (typeof text !== 'string')
throw new Error('text must be a string');
context.signal.throwIfAborted();
state.calls.push({
text,
scope: context.scope,
epoch: context.epoch,
requestId: context.requestId
});
if (state.slow) {
await new Promise((resolve, reject) => {
const abort = () => {
state.aborts++;
context.signal.removeEventListener('abort', abort);
reject(context.signal.reason);
};
context.signal.addEventListener('abort', abort, { once: true });
release = () => {
context.signal.removeEventListener('abort', abort);
resolve();
};
});
}
context.signal.throwIfAborted();
if (state.failure)
throw new Error('Local provider failure');
return [
{ id: 1, name: '第一成员' },
{ id: 2, name: '第二成员' }
].filter((item) => item.name.includes(text));
}
};
return { provider, state, release: () => release() };
}
},
};
const __dependencies = {"Demo.vue":{"./Child.vue":"Child.vue","./provider":"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-root-layout[data-v-2f75af67] {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.demo-root-layout[data-v-2f75af67] > :is(p, pre, output) {
margin-block: 0;
}
.demo-spacing-1[data-v-e17ac341] {
display: grid;
gap: var(--asam-space-md);
}
</style>同一个 app 重复安装同一个 provider 保持原运行时；已安装后更换 provider 会抛出 config 错误。 完整说明。
选项和标签的完整展示
完整示例在两个独立实例中演示按来源 raw.team 分组的 OptionGroup/Option 插槽、prefix/header/footer/loading/empty/label 和可删除 tag。 完整说明。
示例按钮可关闭或恢复标签折叠，将可见标签数量在 1 与 3 之间切换，并将多选数量上限在 3 与 0（不限数量）之间切换。展示设置不改变来源和已选模型；取消上限后可以选择第四项。恢复初始多选由调用方将模型设回 [1, 3, 4]，随后恢复上限，区别于用户删除标签触发的 remove-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: 'AsamRemoteSelectNativePresentationDemo' },
__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-testid": "presentation-tag" };
const _hoisted_5: any = { "data-testid": "presentation-state" };
const _hoisted_6: any = {
class: "example-paragraph",
"data-testid": "selection-event-result"
};
const _hoisted_7: 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: 'AsamRemoteSelectNativePresentationChild' },
__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 popperStyleMode: any = (0, vue_3.ref)('object');
const popperStyle: any = (0, vue_3.computed)(() => {
if (popperStyleMode.value === 'object')
return { minWidth: '320px' };
if (popperStyleMode.value === 'string')
return 'min-width: 360px';
if (popperStyleMode.value === 'array')
return [{ minWidth: '400px' }, [{ maxWidth: '460px' }]];
if (popperStyleMode.value === 'false')
return false;
if (popperStyleMode.value === 'null')
return null;
return undefined;
});
const maxCollapseTags: any = (0, vue_3.ref)(1);
const multipleLimit: any = (0, vue_3.ref)(3);
const singleOptions: any = (0, vue_3.ref)([]);
const groups: any = (0, vue_3.computed)(() => ['一组', '二组'].map((team?: any) => ({
team,
options: singleOptions.value.filter((item?: any) => item.raw.team === team)
})));
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 = 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[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: recoverReload
}, {
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: cancelHeld
}, {
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: holdAndReload
}, {
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[0] || (_cache[0] = ($event?: any) => ((0, vue_2.unref)(state).release()))
}, {
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[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[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[2] || (_cache[2] = ($event?: any) => (customTag.value = !customTag.value))
}, {
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[3] || (_cache[3] = ($event?: any) => (disabled.value = !disabled.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[31] || (_cache[31] = [
(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[32] || (_cache[32] = [
(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[33] || (_cache[33] = [
(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) => (popperStyleMode.value = 'object'))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[34] || (_cache[34] = [
(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) => (popperStyleMode.value = 'string'))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[35] || (_cache[35] = [
(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) => (popperStyleMode.value = 'array'))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[36] || (_cache[36] = [
(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) => (popperStyleMode.value = 'false'))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[37] || (_cache[37] = [
(0, vue_2.createTextVNode)("使用 false 弹层样式", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[10] || (_cache[10] = ($event?: any) => (popperStyleMode.value = 'null'))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[38] || (_cache[38] = [
(0, vue_2.createTextVNode)("使用 null 弹层样式", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[11] || (_cache[11] = ($event?: any) => (popperStyleMode.value = 'undefined'))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[39] || (_cache[39] = [
(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[12] || (_cache[12] = ($event?: any) => (maxCollapseTags.value = maxCollapseTags.value === 1 ? 3 : 1))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[40] || (_cache[40] = [
(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[13] || (_cache[13] = ($event?: any) => (multipleLimit.value = multipleLimit.value === 3 ? 0 : 3))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[41] || (_cache[41] = [
(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[14] || (_cache[14] = ($event?: any) => (multipleValues.value = [1, 3, 4]))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[42] || (_cache[42] = [
(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[15] || (_cache[15] = ($event?: any) => (multipleValues.value = []))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[43] || (_cache[43] = [
(0, vue_2.createTextVNode)("清空多选模型", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_cache[50] || (_cache[50] = (0, vue_2.createElementVNode)("label", null, "单选展示", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamRemoteSelect), {
ref_key: "singleControl",
ref: singleControl,
modelValue: singleValue.value,
"onUpdate:modelValue": [
_cache[16] || (_cache[16] = ($event?: any) => ((singleValue).value = $event)),
_cache[17] || (_cache[17] = ($event?: any) => (onModelUpdate($event, 'single')))
],
"data-source": (0, vue_2.unref)(source),
style: { "width": "280px" },
"popper-style": popperStyle.value,
"popper-class": "data009-presentation-popper",
clearable: "",
placeholder: "演示单选",
teleported: false,
onChange: _cache[18] || (_cache[18] = ($event?: any) => (onModelChange($event, 'single'))),
onError: onError,
onSuccess: _cache[19] || (_cache[19] = ($event?: any) => {
singleOptions.value = $event;
onSuccess($event);
})
}, {
prefix: (0, vue_2.withCtx)(() => [...(_cache[44] || (_cache[44] = [
(0, vue_2.createElementVNode)("span", { "data-testid": "presentation-prefix" }, "前缀", -1 /* CACHED */)
]))]),
header: (0, vue_2.withCtx)(() => [...(_cache[45] || (_cache[45] = [
(0, vue_2.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "presentation-header"
}, "选项列表说明", -1 /* CACHED */)
]))]),
footer: (0, vue_2.withCtx)(() => [...(_cache[46] || (_cache[46] = [
(0, vue_2.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "presentation-footer"
}, "由本地来源加载", -1 /* CACHED */)
]))]),
loading: (0, vue_2.withCtx)(() => [...(_cache[47] || (_cache[47] = [
(0, vue_2.createElementVNode)("span", { "data-testid": "presentation-loading" }, "正在读取本地选项", -1 /* CACHED */)
]))]),
empty: (0, vue_2.withCtx)(() => [...(_cache[48] || (_cache[48] = [
(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)(() => [
((0, vue_2.openBlock)(true), (0, vue_2.createElementBlock)(vue_2.Fragment, null, (0, vue_2.renderList)(groups.value, (group?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamOptionGroup), {
key: group.team,
label: group.team
}, {
default: (0, vue_2.withCtx)(() => [
((0, vue_2.openBlock)(true), (0, vue_2.createElementBlock)(vue_2.Fragment, null, (0, vue_2.renderList)(group.options, (option?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamOption), {
key: option.value,
label: option.label,
value: option.value,
disabled: option.disabled
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createElementVNode)("span", null, (0, vue_2.toDisplayString)(option.label) + " · " + (0, vue_2.toDisplayString)(option.raw.team), 1 /* TEXT */)
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["label", "value", "disabled"]));
}), 128 /* KEYED_FRAGMENT */))
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["label"]));
}), 128 /* KEYED_FRAGMENT */))
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue", "data-source", "popper-style"]),
_cache[51] || (_cache[51] = (0, vue_2.createElementVNode)("label", null, "多选展示", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamRemoteSelect), {
modelValue: multipleValues.value,
"onUpdate:modelValue": [
_cache[20] || (_cache[20] = ($event?: any) => ((multipleValues).value = $event)),
_cache[22] || (_cache[22] = ($event?: any) => (onModelUpdate($event, 'multiple')))
],
"data-source": (0, vue_2.unref)(source),
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[21] || (_cache[21] = ($event?: any) => (removed.value.push($event))),
onChange: _cache[23] || (_cache[23] = ($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_4, [
(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[49] || (_cache[49] = [
(0, vue_2.createTextVNode)(" 删除首个标签 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"])
])
]),
key: "0"
}
: undefined
]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "data-source", "collapse-tags", "collapse-tags-tooltip", "max-collapse-tags", "multiple-limit", "disabled"]),
(0, vue_2.createElementVNode)("pre", _hoisted_5, (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,
popperStyleMode: popperStyleMode.value,
maxCollapseTags: maxCollapseTags.value,
multipleLimit: multipleLimit.value,
calls: (0, vue_2.unref)(state).calls.value
})), 1 /* TEXT */),
(0, vue_2.createElementVNode)("p", _hoisted_6, (0, vue_2.toDisplayString)(eventResult.value), 1 /* TEXT */),
(0, vue_2.createElementVNode)("pre", _hoisted_7, (0, vue_2.toDisplayString)(JSON.stringify(dataEvents.value)), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-ab492c2e";
},
"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-ab492c2e] {
display: grid;
gap: var(--asam-space-md);
}
.demo-spacing-2[data-v-ab492c2e] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
p[data-v-ab492c2e]: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: 'AsamRemoteSelectNativePresentationDemo' }, {
__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-testid": "presentation-tag" };
const _hoisted_5 = { "data-testid": "presentation-state" };
const _hoisted_6 = {
class: "example-paragraph",
"data-testid": "selection-event-result"
};
const _hoisted_7 = { "data-testid": "selection-data-events" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = Object.assign({ name: 'AsamRemoteSelectNativePresentationChild' }, {
__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 popperStyleMode = (0, vue_2.ref)('object');
const popperStyle = (0, vue_2.computed)(() => {
if (popperStyleMode.value === 'object')
return { minWidth: '320px' };
if (popperStyleMode.value === 'string')
return 'min-width: 360px';
if (popperStyleMode.value === 'array')
return [{ minWidth: '400px' }, [{ maxWidth: '460px' }]];
if (popperStyleMode.value === 'false')
return false;
if (popperStyleMode.value === 'null')
return null;
return undefined;
});
const maxCollapseTags = (0, vue_2.ref)(1);
const multipleLimit = (0, vue_2.ref)(3);
const singleOptions = (0, vue_2.ref)([]);
const groups = (0, vue_2.computed)(() => ['一组', '二组'].map((team) => ({
team,
options: singleOptions.value.filter((item) => item.raw.team === team)
})));
const api = async (params, context) => state.read(context.signal, params.text);
const factory = (0, ui_1.defineAsamOptions)();
const transform = (items) => items;
const source = 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[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: recoverReload
}, {
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: cancelHeld
}, {
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: holdAndReload
}, {
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[0] || (_cache[0] = $event => ((0, vue_1.unref)(state).release()))
}, {
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[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[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[2] || (_cache[2] = $event => (customTag.value = !customTag.value))
}, {
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[3] || (_cache[3] = $event => (disabled.value = !disabled.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[31] || (_cache[31] = [
(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[32] || (_cache[32] = [
(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[33] || (_cache[33] = [
(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 => (popperStyleMode.value = 'object'))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[34] || (_cache[34] = [
(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 => (popperStyleMode.value = 'string'))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[35] || (_cache[35] = [
(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 => (popperStyleMode.value = 'array'))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[36] || (_cache[36] = [
(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 => (popperStyleMode.value = 'false'))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[37] || (_cache[37] = [
(0, vue_1.createTextVNode)("使用 false 弹层样式", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[10] || (_cache[10] = $event => (popperStyleMode.value = 'null'))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[38] || (_cache[38] = [
(0, vue_1.createTextVNode)("使用 null 弹层样式", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[11] || (_cache[11] = $event => (popperStyleMode.value = 'undefined'))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[39] || (_cache[39] = [
(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[12] || (_cache[12] = $event => (maxCollapseTags.value = maxCollapseTags.value === 1 ? 3 : 1))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[40] || (_cache[40] = [
(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[13] || (_cache[13] = $event => (multipleLimit.value = multipleLimit.value === 3 ? 0 : 3))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[41] || (_cache[41] = [
(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[14] || (_cache[14] = $event => (multipleValues.value = [1, 3, 4]))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[42] || (_cache[42] = [
(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[15] || (_cache[15] = $event => (multipleValues.value = []))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[43] || (_cache[43] = [
(0, vue_1.createTextVNode)("清空多选模型", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_cache[50] || (_cache[50] = (0, vue_1.createElementVNode)("label", null, "单选展示", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamRemoteSelect), {
ref_key: "singleControl",
ref: singleControl,
modelValue: singleValue.value,
"onUpdate:modelValue": [
_cache[16] || (_cache[16] = $event => ((singleValue).value = $event)),
_cache[17] || (_cache[17] = $event => (onModelUpdate($event, 'single')))
],
"data-source": (0, vue_1.unref)(source),
style: { "width": "280px" },
"popper-style": popperStyle.value,
"popper-class": "data009-presentation-popper",
clearable: "",
placeholder: "演示单选",
teleported: false,
onChange: _cache[18] || (_cache[18] = $event => (onModelChange($event, 'single'))),
onError: onError,
onSuccess: _cache[19] || (_cache[19] = $event => {
singleOptions.value = $event;
onSuccess($event);
})
}, {
prefix: (0, vue_1.withCtx)(() => [...(_cache[44] || (_cache[44] = [
(0, vue_1.createElementVNode)("span", { "data-testid": "presentation-prefix" }, "前缀", -1 /* CACHED */)
]))]),
header: (0, vue_1.withCtx)(() => [...(_cache[45] || (_cache[45] = [
(0, vue_1.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "presentation-header"
}, "选项列表说明", -1 /* CACHED */)
]))]),
footer: (0, vue_1.withCtx)(() => [...(_cache[46] || (_cache[46] = [
(0, vue_1.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "presentation-footer"
}, "由本地来源加载", -1 /* CACHED */)
]))]),
loading: (0, vue_1.withCtx)(() => [...(_cache[47] || (_cache[47] = [
(0, vue_1.createElementVNode)("span", { "data-testid": "presentation-loading" }, "正在读取本地选项", -1 /* CACHED */)
]))]),
empty: (0, vue_1.withCtx)(() => [...(_cache[48] || (_cache[48] = [
(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)(() => [
((0, vue_1.openBlock)(true), (0, vue_1.createElementBlock)(vue_1.Fragment, null, (0, vue_1.renderList)(groups.value, (group) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamOptionGroup), {
key: group.team,
label: group.team
}, {
default: (0, vue_1.withCtx)(() => [
((0, vue_1.openBlock)(true), (0, vue_1.createElementBlock)(vue_1.Fragment, null, (0, vue_1.renderList)(group.options, (option) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamOption), {
key: option.value,
label: option.label,
value: option.value,
disabled: option.disabled
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createElementVNode)("span", null, (0, vue_1.toDisplayString)(option.label) + " · " + (0, vue_1.toDisplayString)(option.raw.team), 1 /* TEXT */)
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["label", "value", "disabled"]));
}), 128 /* KEYED_FRAGMENT */))
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["label"]));
}), 128 /* KEYED_FRAGMENT */))
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue", "data-source", "popper-style"]),
_cache[51] || (_cache[51] = (0, vue_1.createElementVNode)("label", null, "多选展示", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamRemoteSelect), {
modelValue: multipleValues.value,
"onUpdate:modelValue": [
_cache[20] || (_cache[20] = $event => ((multipleValues).value = $event)),
_cache[22] || (_cache[22] = $event => (onModelUpdate($event, 'multiple')))
],
"data-source": (0, vue_1.unref)(source),
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[21] || (_cache[21] = $event => (removed.value.push($event))),
onChange: _cache[23] || (_cache[23] = $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_4, [
(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[49] || (_cache[49] = [
(0, vue_1.createTextVNode)(" 删除首个标签 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"])
])
]),
key: "0"
}
: undefined
]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "data-source", "collapse-tags", "collapse-tags-tooltip", "max-collapse-tags", "multiple-limit", "disabled"]),
(0, vue_1.createElementVNode)("pre", _hoisted_5, (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,
popperStyleMode: popperStyleMode.value,
maxCollapseTags: maxCollapseTags.value,
multipleLimit: multipleLimit.value,
calls: (0, vue_1.unref)(state).calls.value
})), 1 /* TEXT */),
(0, vue_1.createElementVNode)("p", _hoisted_6, (0, vue_1.toDisplayString)(eventResult.value), 1 /* TEXT */),
(0, vue_1.createElementVNode)("pre", _hoisted_7, (0, vue_1.toDisplayString)(JSON.stringify(dataEvents.value)), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-d67bb2cf";
},
"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-d67bb2cf] {
display: grid;
gap: var(--asam-space-md);
}
.demo-spacing-2[data-v-d67bb2cf] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
p[data-v-d67bb2cf]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>折叠标签提示可独立关闭和恢复；关闭提示仍保留折叠数量及模型。 完整说明。
公开 runtime 注入键
通过公开 asamDataRuntimeKey 在 Vue setup 内注入当前应用的 runtime。 完整说明。
独立应用示例验证 provider 与 runtime 的作用域隔离及生命周期。 完整说明。
创建回调的公开类型
AsamCreateOption<V, I> 接收一个必填字符串，直接返回 AsamOption<V, I>。 完整说明。
类型检查会拒绝异步工厂、标量返回、缺少 raw、错误 label/value/raw、不同泛型的 children，以及非字符串输入。 完整说明。
本页 local-creation 完整 TS/JS 示例通过真实输入和选项选择调用工厂，并观察同一文本的 memo、刷新与失败保留、逻辑来源切换、服务端同值项优先、清空本地集合后再次调用工厂。这些操作保持来源返回值与父组件模型的各自归属；工厂调用本身不向后台提交创建请求。
值策略与选择模型类型
值策略区分单选、值多选与对象多选，存储方式按对应分支配置。 完整说明。
| 策略 | 模型类型 | 空选择 |
|---|---|---|
| 单选 value | V 或 null | null |
| 单选 object | AsamOption<V, I> 或 null | null |
| 多选 value / array | 只读 V 数组 | [] |
| 多选 value / string | string | 空字符串 |
| 多选 object / array | 只读 AsamOption<V, I> 数组 | [] |
策略属性和选择数组只读。 完整说明。
本页 basic 和 local-creation 分别展示单选值与单选完整对象，native-presentation 展示多选值数组。 完整说明。
内部来源描述边界
应用使用 defineAsamOptions、defineAsamDictSource 和 resolveAsamOptions 创建及消费来源。 完整说明。
局部请求错误插槽
可选 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: 'AsamRemoteSelectDemoLocalErrorExample' },
__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: 'AsamRemoteSelect-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: 'AsamRemoteSelectChildLocalErrorExample' },
__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' }
});
(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.AsamRemoteSelect), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((value).value = $event)),
"data-source": (0, vue_2.unref)(dataSource),
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", "data-source"]),
(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-365639ed";
},
"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-365639ed] {
display: grid;
gap: var(--asam-space-md);
}
p[data-v-365639ed]: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: 'AsamRemoteSelectDemoLocalErrorExample' }, {
__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: 'AsamRemoteSelect-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: 'AsamRemoteSelectChildLocalErrorExample' }, {
__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 });
(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.AsamRemoteSelect), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((value).value = $event)),
"data-source": (0, vue_1.unref)(dataSource),
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", "data-source"]),
(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-96ed7491";
},
"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-96ed7491] {
display: grid;
gap: var(--asam-space-md);
}
p[data-v-96ed7491]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>局部与全局浮层
基础示例使用默认的全局挂载；局部挂载示例展示显式配置的 teleported 或 appendTo。先打开控件浮层，再观察其所在容器。挂载位置与控件值、请求协议互相独立。
API
属性 AsamRemoteSelectProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
ariaLabel | — | string | undefined | — |
id | — | string | undefined | — |
effect | — | enum"light" | "dark"完整类型：(AsamRemoteSelectProps<V, I, P, R>)["effect"] | — |
popperClass | — | AsamSelectRuntimeProps["popperClass"] | — |
popperStyle | — | (AsamRemoteSelectProps<V, I, P, R>)["popperStyle"] | — |
fallbackPlacements | — | (AsamRemoteSelectProps<V, I, P, R>)["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"完整类型：(AsamRemoteSelectProps<V, I, P, R>)["placement"] | — |
popperOptions | — | (AsamRemoteSelectProps<V, I, P, R>)["popperOptions"] | — |
showArrow | — | (AsamRemoteSelectProps<V, I, P, R>)["showArrow"] | — |
appendTo | — | (AsamRemoteSelectProps<V, I, P, R>)["appendTo"] | — |
persistent | — | (AsamRemoteSelectProps<V, I, P, R>)["persistent"] | — |
teleported | — | boolean | undefined | — |
disabled | — | boolean | undefined | — |
tabindex | — | (AsamRemoteSelectProps<V, I, P, R>)["tabindex"] | — |
size | — | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
props | — | (AsamRemoteSelectProps<V, I, P, R>)["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 | — | (AsamRemoteSelectProps<V, I, P, R>)["valueOnClear"] | — |
validateEvent | — | (AsamRemoteSelectProps<V, I, P, R>)["validateEvent"] | — |
clearable | — | boolean | undefined | — |
automaticDropdown | — | boolean | undefined | — |
clearIcon | — | (AsamRemoteSelectProps<V, I, P, R>)["clearIcon"] | — |
placeholder | — | string | undefined | — |
autocomplete | — | string | undefined | — |
filterable | — | boolean | undefined | — |
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 | — | (AsamRemoteSelectProps<V, I, P, R>)["reserveKeyword"] | — |
valueKey | — | string | undefined | — |
collapseTags | — | boolean | undefined | — |
collapseTagsTooltip | — | boolean | undefined | — |
tagTooltip | — | (AsamRemoteSelectProps<V, I, P, R>)["tagTooltip"] | — |
maxCollapseTags | — | number | undefined | — |
fitInputWidth | — | boolean | undefined | — |
suffixIcon | — | (AsamRemoteSelectProps<V, I, P, R>)["suffixIcon"] | — |
tagType | — | enum"primary" | "success" | "danger" | "warning" | "info"完整类型：(AsamRemoteSelectProps<V, I, P, R>)["tagType"] | — |
tagEffect | — | enum"light" | "dark" | "plain"完整类型：(AsamRemoteSelectProps<V, I, P, R>)["tagEffect"] | — |
remoteShowSuffix | — | boolean | undefined | — |
immediate | — | boolean | undefined | — |
active | — | boolean | undefined | true |
dataSource | — | AsamOptionsSource<V, I, "api" | "request"> | undefined | undefined |
api | — | undefined | AsamApiRequest<P, R> | undefined |
request | — | undefined | AsamRequestConfig | undefined |
search | — | undefined | AsamApiSelectSearch<P> | undefined | AsamRequestSelectSearch | undefined | undefined |
params | — | P | undefined |
transform | — | ((response: R) => readonly I[]) | undefined | ((response: unknown) => readonly I[]) | undefined | undefined |
fieldNames | — | AsamMapping | undefined | undefined |
cache | — | AsamOptionsCache | undefined | undefined |
createOption | — | AsamCreateOption<V, I> | undefined | — |
事件 AsamSelectDataEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
clear | — | (AsamSelectDataEmits<V, I>)["clear"] | — |
focus | — | [event: FocusEvent] | — |
end-reached | — | [direction: AsamScrollbarDirection] | — |
error | — | [error: AsamDataError] | — |
blur | — | [event: FocusEvent] | — |
visible-change | — | [visible: boolean] | — |
remove-tag | — | [value: unknown] | — |
popup-scroll | — | [event: { scrollTop: number; scrollLeft: number; }] | — |
update:modelValue | — | [value: string | V | AsamOption<V, I> | readonly V[] | readonly AsamOption<V, I>[] | null] | — |
change | — | [value: string | V | AsamOption<V, I> | readonly V[] | readonly AsamOption<V, I>[] | null] | — |
success | — | [data: readonly AsamOption<V, I>[]] | — |
插槽 AsamAsyncSelectSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => unknown) | undefined | — |
prefix | — | (() => unknown) | undefined | — |
header | — | (() => unknown) | undefined | — |
footer | — | (() => unknown) | undefined | — |
empty | — | (() => unknown) | undefined | — |
loading | — | (() => unknown) | undefined | — |
tag | — | 查看完整类型((scope: { data: AsamTreeSelectTagOption[]; selectDisabled: boolean; deleteTag: (event: MouseEvent, option: AsamTreeSelectTagOption) => void; }) => unknown) | undefined | — |
label | — | ((scope: { index: number; label: any; value: any; }) => unknown) | undefined | — |
error | 替换本地错误区域；重试返回现有强制重新加载的 Promise。 | (AsamAsyncSelectSlots<V, I>)["error"] | — |
实例方法与状态 AsamAsyncSelectExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
selectedLabel | — | 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() 的实际作用。勾选“启用多选”切换到独立数组模型；空选择读取空数组，选择多个选项后返回标签数组，输入焦点方法仍不改写模型。
本地创建与完整实体
allow-create 与 filterable 开启后，createOption(text) 同步返回完整的 AsamOption<V, I>：label、正确类型的 value 和真实 raw。默认记录使用字符串 value； 数字、布尔值或自定义 raw 必须提供类型一致的工厂，不能返回 Promise 或仅有标量。
数据来源与覆盖
dataSource、api + params、request 三种来源只选一种。dataSource 必须由 defineAsamOptions 创建，使用该来源时映射、转换和缓存配置写在工厂内，不再重复传短来源属性。自定义字段映射同时提供同步 transform；API 返回 Promise，并检查 context.signal。
生命周期、事件与实例
active=false 暂停请求并保留上次成功数据；reload({ force: true }) 请求新数据，cancel() 取消当前请求。success 返回规范化选项数组，error 返回 AsamDataError；旧成功数据更新失败时组件显示过期状态。reload 的 status 为 success、error 或 cancelled；不能把取消当作成功。
URL provider 与共享生命周期
以下完整示例创建独立子 app，在挂载前通过 provideAsamData 安装本地 provider；不会向示例 URL 发网络请求。两个同来源、同 params、同字段映射、同转换和同 scope/epoch 的组件启用 ttlMs 缓存，可共享实际传输。request 由 provider 执行，默认 GET 不改变 params/data 归属；transform 校验原始响应并形成 Member，fieldNames 将 name/id 规范化为 label/value。provider 错误不会成为空成功；刷新失败保留旧数据并标记过期，恢复后清除状态。缓存保存成功规范项，组件模型与本地创建集合不写回缓存。
URL provider 与共享生命周期
setAsamDataScope 使旧 scope 请求失效并重新加载，invalidateAsamData 推进当前 epoch。context.signal、scope、epoch、requestId 从数据运行时传给实际 provider；调用方不得复用旧上下文发布迟到结果。force 重载共享来源时，取消一个组件的订阅会及时返回 cancelled，仍有订阅者时不终止共享传输；所有订阅者取消或 app 卸载才释放该操作。示例将模型保留策略与来源加载分开；scope 改变不承诺自动清空父组件模型。AsamReloadResult 的 success/error/cancelled 联合按实际结果判断，不把取消当作成功。
URL provider 与共享生命周期
同一个 app 重复安装同一个 provider 保持原运行时；已安装后更换 provider 会抛出 config 错误。不同 app 的运行时、provider 和请求上下文互相隔离。示例按钮实际检查这些边界：相同 scope 不推进 epoch 或重发请求，空串及纯空白 scope 被拒绝并保留原模型、来源和 epoch。getAsamDataRuntime(app) 返回同一 app 的协调对象；createContext() 产生当前上下文，release(context) 释放并取消它，其他 app 的上下文不会被当前运行时视为有效。invalidateAsamData 始终推进当前 epoch，setAsamDataScope 只有切换为不同的有效 scope 才推进。
选项和标签的完整展示
完整示例在两个独立实例中演示按来源 raw.team 分组的 OptionGroup/Option 插槽、prefix/header/footer/loading/empty/label 和可删除 tag。来源仍返回规范化的平面实体；分组仅组织 default 插槽中的原生选项，不改变来源与模型。多选使用原始数值数组，保留折叠标签提示、maxCollapseTags、multipleLimit 和 disabled；自定义 tag 通过原生 deleteTag 删除并触发 remove-tag，不直接改内部标签。完成请求按钮释放本地等待操作，便于观察真实 loading 与 empty 插槽；卸载时请求随独立子应用取消。普通选择器通过 popperStyle.minWidth=320px 设置弹层最小宽度。
选项和标签的完整展示
折叠标签提示可独立关闭和恢复；关闭提示仍保留折叠数量及模型。弹层样式按钮演示 StyleValue 的对象、字符串、嵌套数组和 false/null/undefined 清空形式。示例最小宽度分别为 320、360、400px，清空后恢复原生宽度，切换展示设置不重新读取来源。数组样式恢复为对象时会清除之前的 maxWidth。
创建回调的公开类型
AsamCreateOption<V, I> 接收一个必填字符串，直接返回 AsamOption<V, I>。不指定泛型时，V 为 string、number、boolean 的联合，I 为只读、未知字段值的 AsamRecord；数据选择器未提供工厂时采用的默认记录才使用字符串 value。自定义数字或布尔 value、业务 raw 和递归 children 应在工厂中完整构造，children 保持父选项的 V/I 类型。返回对象的公开属性只读，类型不保证 raw 的嵌套对象深冻结。
创建回调的公开类型
类型检查会拒绝异步工厂、标量返回、缺少 raw、错误 label/value/raw、不同泛型的 children，以及非字符串输入。number 类型本身允许 NaN 和 Infinity；实际本地选项校验另行要求有限数值、对象 raw、布尔 disabled 和无循环的完整 children，Promise/thenable 也会被同步回调检查拒绝。校验失败发生在本地集合写入前，不创建远端实体。这里的校验不能替业务 raw 的领域校验。
值策略与选择模型类型
策略属性和选择数组只读。对象模式需要包含 label、value、raw 的完整规范项；字符串模式的类型只约束为 string，不检查分隔符、具体 token 或是否存在于来源中。实际规范化会拒绝无效策略、对象多选的字符串存储、空分隔符以及含分隔符、空 token 或序列化冲突的来源值。TypeScript 的结构类型并不封闭所有额外属性；运行时仍会检查单选附带的 multipleValueMode。
值策略与选择模型类型
本页 basic 和 local-creation 分别展示单选值与单选完整对象，native-presentation 展示多选值数组。远端多选的 basic 演示两个分隔符的字符串集合及空字符串，connected-buttons 演示对象数组；远端单选展示标量及完整对象。切换策略或分隔符前由调用方同步调整模型，不能把旧字符串直接当作对象集合。
内部来源描述边界
应用使用 defineAsamOptions、defineAsamDictSource 和 resolveAsamOptions 创建及消费来源。describeAsamOptionsSource 的函数声明通过根入口的 export type * 留在类型查询中，可以在 import type 配合 typeof 时描述函数形状；根入口不提供可调用的运行值。内部描述对象由真实工厂登记，不能靠复制 { kind } 伪造来源。应用无需调用描述读取器，也不能从未开放的包内深路径导入它。
局部请求错误插槽
可选 error 插槽仅在当前请求错误存在时调用，接收只读 { error, stale, retry }。
error 与本实例 error 事件中的 AsamDataError 为同一对象，保留 cause、kind、
message 与 notified；渲染插槽不会再次通知 provider。stale 表示保留的数据已过期。
更多参数与事件说明
公开 runtime 注入键
asamDataRuntimeKey 是包根公开的 InjectionKey<AsamDataRuntime>，用于 Vue setup 内通过 inject 取得当前应用关联的 runtime；返回值可能为 undefined，调用方应先处理未提供的情况。getAsamDataRuntime(app) 与 provideAsamData(app, provider) 使用同一个键提供 runtime，同一应用重复获取保持对象身份，不同应用各自持有 runtime 与 provider。符号按身份匹配；重新创建同描述的 Symbol 或字符串 “AsamDataRuntime” 都不能代替公开键。
公开 runtime 注入键
provider-lifetime 的完整 TS/JS 示例增加独立检查按钮，实际挂载两个应用并通过公开键注入，核对各自 scope 与 provider、重复符号和字符串缺失、一个应用切换 scope 后另一个应用保持原 scope，以及组件卸载时释放其自建请求 context。直接使用公开键注入只提供 runtime 对象；自建 context 的释放由创建它的组件负责。这里不把普通 runtime.scope getter 描述成可自动驱动模板更新的 Vue ref。
值策略与选择模型类型
AsamValuePolicy 的三条分支描述单选、值多选、对象多选；单选分支里的 valueMode 可为 value 或 object，值多选里的 multipleValueMode 可为 array 或 string，对象多选只使用 array。AsamSelection<V, I, M> 是根据策略 M 推导模型的条件类型，不是运行时转换函数，也不自动关联组件 props 与模型。
局部请求错误插槽
retry() 不接收参数，直接返回现有 reload({ force: true }) 的 Promise，结果为
AsamReloadResult<readonly AsamOption<V, I>[]> 的 success、error 或 cancelled 分支。
重试遵守 active、当前来源、取消和卸载规则，不改写模型。
继承能力
本入口的独有 API 见上表，基础能力见本站对应页面。
关联组件
参数与事件补充说明
组合契约按分支生效；请同时查看公开类型。
参数与事件说明
ariaLabel
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
id
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
effect
必填：否；声明来源：上游声明。
effect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark"
默认值与来源
未知 / 未声明固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'light'（2.14.7；源码事实，未作为 ASAM 运行实测）
popperClass
必填：否；声明来源：上游声明。
popperClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
未知 / 未声明固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
popperStyle
必填：否；声明来源：上游声明。
popperStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
fallbackPlacements
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：['bottom-start', 'top-start', 'right', 'left']（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：['bottom-start', 'top-start', 'right', 'left']（2.14.7；源码事实，未作为 ASAM 运行实测）
offset
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：12（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：12（2.14.7；源码事实，未作为 ASAM 运行实测）
placement
必填：否；声明来源：上游声明。
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"
默认值与来源
未知 / 未声明固定上游文档默认：bottom-start（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'bottom-start'（2.14.7；源码事实，未作为 ASAM 运行实测）
popperOptions
必填：否；声明来源：上游声明。
popperOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
popperOptions.placement:PublicMember<NonNullable<(AsamRemoteSelectProps<V, I, P, R>)["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<(AsamRemoteSelectProps<V, I, P, R>)["popperOptions"]>, "modifiers">— 依赖声明popperOptions.strategy:PublicMember<NonNullable<(AsamRemoteSelectProps<V, I, P, R>)["popperOptions"]>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"popperOptions.onFirstUpdate:PublicMember<NonNullable<(AsamRemoteSelectProps<V, I, P, R>)["popperOptions"]>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamRemoteSelectProps<V, I, P, R>)["popperOptions"]>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
默认值与来源
未知 / 未声明固定上游文档默认：{}（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => ({}) as Partial<Options>（2.14.7；源码事实，未作为 ASAM 运行实测）
showArrow
必填：否；声明来源：上游声明。
showArrow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
appendTo
必填：否；声明来源：上游声明。
appendTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
persistent
必填：否；声明来源：上游声明。
persistent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
teleported
必填：否；声明来源：ASAM 声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
disabled
必填：否；声明来源：ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
tabindex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
props
必填：否；声明来源：上游声明。
props 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
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 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => defaultProps（2.14.7；源码事实，未作为 ASAM 运行实测）
name
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
separator
必填：否；声明来源：ASAM 声明。
modelValue
必填：否；声明来源：ASAM 声明。
modelValue 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
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 协议
filterMethod
必填：否；声明来源：上游声明。
filterMethod 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(query: string): void
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
multiple
必填：否；声明来源：ASAM 声明。
multiple 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
枚举：true
valueMode
必填：否；声明来源：ASAM 声明。
valueMode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："value"
枚举："object"
multipleValueMode
必填：否；声明来源：ASAM 声明。
multipleValueMode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："array"
枚举："string"
emptyValues
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
valueOnClear
必填：否；声明来源：上游声明。
valueOnClear 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：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 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
clearable
必填：否；声明来源：ASAM 声明。
clearable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
automaticDropdown
必填：否；声明来源：上游声明。
automaticDropdown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
clearIcon
必填：否；声明来源：上游声明。
clearIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamRemoteSelectProps<V, I, P, R>)["clearIcon"]>, (...args: never[]) => unknown>>[1]): any
clearIcon.__isFragment:undefined— 依赖声明clearIcon.__isTeleport:undefined— 依赖声明clearIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：CircleClose（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：CircleClose（2.14.7；源码事实，未作为 ASAM 运行实测）
placeholder
必填：否；声明来源：ASAM 声明。
autocomplete
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：off（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'off'（2.14.7；源码事实，未作为 ASAM 运行实测）
filterable
必填：否；声明来源：ASAM 声明。
filterable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
allowCreate
必填：否；声明来源：ASAM 声明。
allowCreate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
枚举：false
枚举：true
debounce
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：300（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：300（2.14.7；源码事实，未作为 ASAM 运行实测）
loadingText
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
noMatchText
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
noDataText
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
multipleLimit
必填：否；声明来源：ASAM 声明。
defaultFirstOption
必填：否；声明来源：上游声明。
defaultFirstOption 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
reserveKeyword
必填：否；声明来源：上游声明。
reserveKeyword 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
valueKey
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：value（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'value'（2.14.7；源码事实，未作为 ASAM 运行实测）
collapseTags
必填：否；声明来源：ASAM 声明。
collapseTags 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
collapseTagsTooltip
必填：否；声明来源：ASAM 声明。
collapseTagsTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
tagTooltip
必填：否；声明来源：上游声明。
tagTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
tagTooltip.appendTo:string | HTMLElement | undefined— 上游声明指示 Tooltip 的内容将附加在哪一个网页元素上
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）嵌套展开边界：大型实例类型；完整类型见公开类型视图。
tagTooltip.placement:PublicMember<NonNullable<(AsamRemoteSelectProps<V, I, P, R>)["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:AsamSelectRuntimeProps["fallbackPlacements"]— 上游声明提示浮层可采用的位置列表，参阅 Popper 的 fallbackPlacements。
固定上游文档默认：
['bottom', 'top', 'right', 'left']（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.effect:PublicMember<NonNullable<(AsamRemoteSelectProps<V, I, P, R>)["tagTooltip"]>, "effect">— 上游声明Tooltip 主题，内置了 dark / light 两种
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
"light"/"dark"tagTooltip.popperClass:AsamSelectRuntimeProps["popperClass"]— 上游声明为 Tooltip 的 popper 添加自定义类名
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
falsetagTooltip.popperStyle:AsamSelectRuntimeProps["popperStyle"]— 上游声明为 Tooltip 的 popper 添加自定义样式
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
tagTooltip.transition:string | undefined— 上游声明动画名称
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.teleported:boolean | undefined— 上游声明是否使用 teleport。设置成 true则会被追加到 append-to 的位置
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）枚举：
false/truetagTooltip.popperOptions:AsamSelectRuntimeProps["popperOptions"]— 上游声明Popper 配置参数。
固定上游文档默认：
未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）tagTooltip.popperOptions.placement:PublicMember<NonNullable<PublicMember<NonNullable<(AsamRemoteSelectProps<V, I, P, R>)["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<(AsamRemoteSelectProps<V, I, P, R>)["tagTooltip"]>, "popperOptions">>, "modifiers">— 依赖声明tagTooltip.popperOptions.strategy:PublicMember<NonNullable<PublicMember<NonNullable<(AsamRemoteSelectProps<V, I, P, R>)["tagTooltip"]>, "popperOptions">>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"tagTooltip.popperOptions.onFirstUpdate:PublicMember<NonNullable<PublicMember<NonNullable<(AsamRemoteSelectProps<V, I, P, R>)["tagTooltip"]>, "popperOptions">>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<PublicMember<NonNullable<(AsamRemoteSelectProps<V, I, P, R>)["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 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => ({})（2.14.7；源码事实，未作为 ASAM 运行实测）
maxCollapseTags
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：1（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：1（2.14.7；源码事实，未作为 ASAM 运行实测）
fitInputWidth
必填：否；声明来源：上游声明。
fitInputWidth 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
suffixIcon
必填：否；声明来源：上游声明。
suffixIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamRemoteSelectProps<V, I, P, R>)["suffixIcon"]>, (...args: never[]) => unknown>>[1]): any
suffixIcon.__isFragment:undefined— 依赖声明suffixIcon.__isTeleport:undefined— 依赖声明suffixIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认：ArrowDown（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：ArrowDown（2.14.7；源码事实，未作为 ASAM 运行实测）
tagType
必填：否；声明来源：上游声明。
tagType 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："primary" / "success" / "danger" / "warning" / "info"
默认值与来源
未知 / 未声明固定上游文档默认：info（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
tagEffect
必填：否；声明来源：上游声明。
tagEffect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark" / "plain"
默认值与来源
未知 / 未声明固定上游文档默认：light（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
remoteShowSuffix
必填：否；声明来源：上游声明。
remoteShowSuffix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
immediate
必填：否；声明来源：数据 / provider 协议。
immediate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
active
必填：否；声明来源：数据 / provider 协议。
active 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（源码表达式；ASAM 声明）dataSource
必填：否；声明来源：数据 / provider 协议。
dataSource 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
dataSource.kind:"api" | "request"— 数据 / provider 协议枚举：
"api"/"request"dataSource.__@sourceBrand@58165:{ readonly value: V; readonly raw: I; }— 数据 / provider 协议dataSource.__@sourceBrand@58165.value:V— 数据 / provider 协议dataSource.__@sourceBrand@58165.raw:I— 数据 / provider 协议
默认值与来源
undefined（源码表达式；ASAM 声明）api
必填：否；声明来源：数据 / provider 协议。
api 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(params: P, context: AsamRequestContext): Promise<R>
默认值与来源
undefined（源码表达式；ASAM 声明）request
必填：否；声明来源：数据 / provider 协议。
request 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
request.url:string— 数据 / provider 协议request.method:"delete" | "get" | "post" | "put" | undefined— 数据 / provider 协议枚举：
"delete"/"get"/"post"/"put"request.params:Readonly<Record<string, unknown>> | undefined— 数据 / provider 协议request.data:unknown— 数据 / provider 协议
默认值与来源
undefined（源码表达式；ASAM 声明）search
必填：否；声明来源：数据 / provider 协议。
默认值与来源
undefined（源码表达式；ASAM 声明）params
必填：按分支；声明来源：数据 / provider 协议。
默认值与来源
undefined（源码表达式；ASAM 声明）transform
必填：按分支；声明来源：数据 / provider 协议。
transform 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
事件参数：(response: R): readonly I[]
契约分支 3
事件参数：(response: unknown): readonly I[]
默认值与来源
undefined（源码表达式；ASAM 声明）fieldNames
必填：按分支；声明来源：数据 / provider 协议。
fieldNames 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
fieldNames.label:string— 数据 / provider 协议fieldNames.value:string— 数据 / provider 协议fieldNames.disabled:string | undefined— 数据 / provider 协议fieldNames.children:string | undefined— 数据 / provider 协议
默认值与来源
undefined（源码表达式；ASAM 声明）cache
必填：按分支；声明来源：数据 / provider 协议。
cache 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 2
cache.ttlMs:number— 数据 / provider 协议cache.key:((requestInput: unknown) => string) | undefined— 数据 / provider 协议事件参数：
(requestInput: unknown): string
默认值与来源
undefined（源码表达式；ASAM 声明）createOption
必填：按分支；声明来源：ASAM 声明。
createOption 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
契约分支 4
事件参数：(text: string): AsamOption<V, I>
AsamRemoteSelectProps 公开类型视图
ts
import type { Attrs } from 'vue';
import type { AsamRemoteSelectProps, AsamValue, AsamRecord, AsamSelectRuntimeProps, AsamControlSize, AsamSelectNativeProps, AsamSelectV2NativeProps, AsamSelectValueMode, AsamOptionsSource, AsamApiRequest, AsamRequestContext, AsamApiSelectSearch, AsamMapping, AsamOptionsCache, AsamRequestConfig, AsamRequestSelectSearch, AsamSelectOption, AsamOption, AsamCreateOption } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamRemoteSelectProps
type PublicContract<V extends AsamValue = AsamValue, I extends object = AsamRecord, P = unknown, R = unknown> = AsamRemoteSelectProps<V, I, P, R>;参数与事件说明
clear
必填：是；声明来源：数据 / provider 协议。
focus
必填：是；声明来源：数据 / provider 协议。
end-reached
必填：是；声明来源：数据 / provider 协议。
error
必填：是；声明来源：数据 / provider 协议。
blur
必填：是；声明来源：数据 / provider 协议。
visible-change
必填：是；声明来源：数据 / provider 协议。
remove-tag
必填：是；声明来源：数据 / provider 协议。
popup-scroll
必填：是；声明来源：数据 / provider 协议。
update:modelValue
必填：是；声明来源：数据 / provider 协议。
change
必填：是；声明来源：数据 / provider 协议。
success
必填：是；声明来源：数据 / provider 协议。
AsamSelectDataEmits 公开类型视图
ts
import type { AsamSelectDataEmits, AsamValue, AsamSelectEmits, AsamScrollbarDirection, AsamDataError, AsamOption } from '@asam-ui/ui';
// AsamSelectDataEmits
type PublicContract<V extends AsamValue = AsamValue, I extends object = object> = {
"clear": (AsamSelectDataEmits<V, I>)["clear"];
"focus": [event: FocusEvent];
"end-reached": [direction: AsamScrollbarDirection];
"error": [error: AsamDataError];
"blur": [event: FocusEvent];
"visible-change": [visible: boolean];
"remove-tag": [value: unknown];
"popup-scroll": [event: { scrollTop: number; scrollLeft: number; }];
"update:modelValue": [value: string | V | AsamOption<V, I> | readonly V[] | readonly AsamOption<V, I>[] | null];
"change": [value: string | V | AsamOption<V, I> | readonly V[] | readonly AsamOption<V, I>[] | null];
"success": [data: readonly AsamOption<V, I>[]];
};参数与事件说明
default
必填：否；声明来源：数据 / provider 协议。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
prefix
必填：否；声明来源：数据 / provider 协议。
prefix 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
header
必填：否；声明来源：数据 / provider 协议。
header 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
footer
必填：否；声明来源：数据 / provider 协议。
footer 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
empty
必填：否；声明来源：数据 / provider 协议。
empty 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
loading
必填：否；声明来源：数据 / provider 协议。
loading 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
tag
必填：否；声明来源：数据 / provider 协议。
tag 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { data: AsamTreeSelectTagOption[]; selectDisabled: boolean; deleteTag: (event: MouseEvent, option: AsamTreeSelectTagOption) => void; }): unknown
label
必填：否；声明来源：数据 / provider 协议。
label 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: { index: number; label: AsamSelectV2NativeProps["modelValue"]["label"]; value: AsamSelectV2NativeProps["modelValue"]["value"]; }): unknown
error
必填：否；声明来源：数据 / provider 协议。
error 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(scope: Parameters<Extract<NonNullable<(AsamAsyncSelectSlots<V, I>)["error"]>, (...args: never[]) => unknown>>[0]): unknown
AsamAsyncSelectSlots 公开类型视图
ts
import type { AsamAsyncSelectSlots, AsamValue, AsamTreeSelectTagOption, AsamSelectSlots, AsamSelectV2NativeProps, AsamDataError, AsamOption, AsamReloadResult } from '@asam-ui/ui';
// AsamAsyncSelectSlots
type PublicContract<V extends AsamValue = AsamValue, I extends object = object> = {
"default"?: (() => unknown) | undefined;
"prefix"?: (() => unknown) | undefined;
"header"?: (() => unknown) | undefined;
"footer"?: (() => unknown) | undefined;
"empty"?: (() => unknown) | undefined;
"loading"?: (() => unknown) | undefined;
"tag"?: ((scope: { data: AsamTreeSelectTagOption[]; selectDisabled: boolean; deleteTag: (event: MouseEvent, option: AsamTreeSelectTagOption) => void; }) => unknown) | undefined;
"label"?: ((scope: { index: number; label: any; value: any; }) => unknown) | undefined;
"error"?: (AsamAsyncSelectSlots<V, I>)["error"];
};数据选择实例继承基础选择入口的 clearCreatedOptions()：仅清空组件本地创建集合 和文本 memo，不写回 modelValue，也不修改 provider/cache。真实来源或 scope 改变时自动调用；搜索、同来源 reload、epoch 更新与失败重试保留本地项。
参数与事件说明
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
AsamAsyncSelectExpose 公开类型视图
ts
import type { AsamAsyncSelectExpose, AsamValue, AsamRecord, AsamSelectExpose, AsamOption, AsamReloadResult } from '@asam-ui/ui';
// AsamAsyncSelectExpose
type PublicContract<V extends AsamValue = AsamValue, I extends object = AsamRecord> = {
readonly "selectedLabel": string | string[];
"reload": (options?: { readonly force?: boolean; }) => Promise<AsamReloadResult<readonly AsamOption<V, I>[]>>;
"cancel": () => void;
"focus": () => void;
"blur": () => void;
"clearCreatedOptions": () => void;
};