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