远端自动补全 ​
在自动补全上管理异步选项、重载和请求取消。
基础用法 ​
示例通过本地 Promise 函数加载选项,支持模型更新、暂停与重载。所有请求都留在演示内部。
本地数据与生命周期
<template>
<section class="data-demo">
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="active">启用请求</AsamCheckboxItem>
<AsamRemoteAutocomplete
ref="control"
v-model="value"
:source="source"
:active="active"
size="default"
placeholder="请选择或输入"
@error="error = $event.message"
@success="error = ''"
/>
<div class="demo-actions">
<AsamButton type="default" native-type="button" :disabled="!active" @click="reload"
>强制重载</AsamButton
>
<AsamButton type="default" native-type="button" @click="control?.cancel()"
>取消请求</AsamButton
>
</div>
<p class="example-paragraph" role="status">{{ result }} {{ error }}</p>
<pre>{{ value }}</pre>
</section>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import {
AsamCheckboxItem,
AsamButton,
AsamRemoteAutocomplete,
defineAsamOptions
} from '@asam-ui/ui';
import type { AsamRemoteAutocompleteExpose, AsamApiRequest } from '@asam-ui/ui';
defineOptions({ name: 'AsamRemoteAutocompleteBasicDemoExample' });
interface Item {
label: string;
value: string;
children?: readonly Item[];
}
interface Query {
text: string;
}
const value = ref<string | number>('');
const active = ref(true);
const control = ref<AsamRemoteAutocompleteExpose<string, Item>>();
const error = ref('');
const result = ref('');
const items: readonly Item[] = [
{ label: '准备', value: 'ready' },
{ label: '进行', value: 'running' }
];
const api: AsamApiRequest<Query, readonly Item[]> = async (params, context) => {
context.signal.throwIfAborted();
return items.filter((item) => item.label.includes(params.text));
};
const factory = defineAsamOptions<string, Item>();
function source(text: string) {
return factory.api({
api,
params: { text },
transform: (response) => response,
fieldNames: { label: 'label', value: 'value' }
});
}
async function reload() {
const response = await control.value?.reload({ force: true });
result.value = response?.status ?? 'cancelled';
}
</script>
<style scoped>
.data-demo {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.data-demo > p,
.data-demo > pre,
.data-demo > fieldset {
width: 100%;
min-width: 0;
margin: 0;
}
.demo-actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
<template>
<section class="data-demo">
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="active">启用请求</AsamCheckboxItem>
<AsamRemoteAutocomplete
ref="control"
v-model="value"
:source="source"
:active="active"
size="default"
placeholder="请选择或输入"
@error="error = $event.message"
@success="error = ''"
/>
<div class="demo-actions">
<AsamButton type="default" native-type="button" :disabled="!active" @click="reload"
>强制重载</AsamButton
>
<AsamButton type="default" native-type="button" @click="control?.cancel()"
>取消请求</AsamButton
>
</div>
<p class="example-paragraph" role="status">{{ result }} {{ error }}</p>
<pre>{{ value }}</pre>
</section>
</template>
<script setup>
import { ref } from 'vue';
import {
AsamCheckboxItem,
AsamButton,
AsamRemoteAutocomplete,
defineAsamOptions
} from '@asam-ui/ui';
defineOptions({ name: 'AsamRemoteAutocompleteBasicDemoExample' });
const value = ref('');
const active = ref(true);
const control = ref();
const error = ref('');
const result = ref('');
const items = [
{ label: '准备', value: 'ready' },
{ label: '进行', value: 'running' }
];
const api = async (params, context) => {
context.signal.throwIfAborted();
return items.filter((item) => item.label.includes(params.text));
};
const factory = defineAsamOptions();
function source(text) {
return factory.api({
api,
params: { text },
transform: (response) => response,
fieldNames: { label: 'label', value: 'value' }
});
}
async function reload() {
const response = await control.value?.reload({ force: true });
result.value = response?.status ?? 'cancelled';
}
</script>
<style scoped>
.data-demo {
display: grid;
gap: var(--asam-space-md);
justify-items: start;
}
.data-demo > p,
.data-demo > pre,
.data-demo > fieldset {
width: 100%;
min-width: 0;
margin: 0;
}
.demo-actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
浮层、完整建议项与错误恢复 ​
popperOptions 和 showArrow 直接作用于实际建议浮层。 完整说明。
浮层、完整建议项与错误恢复
<template><StandaloneDemo /></template>
<script lang="ts" setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external: any = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules: any = {
"Demo.vue": (module: any, exports: any, require: any) => {
"use strict";
var __importDefault: any = function (mod?: any) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1: any = require("vue");
const vue_2: any = require("vue");
const _hoisted_1: any = { class: "autocomplete-demo" };
const _hoisted_2: any = { class: "actions" };
const _hoisted_3: any = { class: "actions" };
const _hoisted_4: any = { "data-testid": "autocomplete-option" };
const _hoisted_5: any = {
class: "example-paragraph",
role: "status"
};
const _hoisted_6: any = { class: "example-paragraph" };
const SelectContract_vue_1: any = __importDefault(require("./SelectContract.vue"));
const NativeInputContract_vue_1: any = __importDefault(require("./NativeInputContract.vue"));
const PopupContract_vue_1: any = __importDefault(require("./PopupContract.vue"));
const SourceLifecycleContract_vue_1: any = __importDefault(require("./SourceLifecycleContract.vue"));
const PresentationContract_vue_1: any = __importDefault(require("./PresentationContract.vue"));
const FormattingContract_vue_1: any = __importDefault(require("./FormattingContract.vue"));
const TextCapabilityContract_vue_1: any = __importDefault(require("./TextCapabilityContract.vue"));
const ValidationContract_vue_1: any = __importDefault(require("./ValidationContract.vue"));
const InputInstanceContract_vue_1: any = __importDefault(require("./InputInstanceContract.vue"));
const OfficialInputContract_vue_1: any = __importDefault(require("./OfficialInputContract.vue"));
const OfficialLayoutContract_vue_1: any = __importDefault(require("./OfficialLayoutContract.vue"));
const OfficialSuggestionContract_vue_1: any = __importDefault(require("./OfficialSuggestionContract.vue"));
const vue_3: any = require("vue");
const QueryContract_vue_1: any = __importDefault(require("./QueryContract.vue"));
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
...{ name: 'AsamRemoteAutocompleteNativeDataDemo' },
__name: 'Demo',
setup(__props?: any) {
const showQueryContract: any = (0, vue_3.ref)(false);
const showSelectContract: any = (0, vue_3.ref)(false);
const showNativeInputContract: any = (0, vue_3.ref)(false);
const showPopupContract: any = (0, vue_3.ref)(false);
const showSourceLifecycleContract: any = (0, vue_3.ref)(false);
const showPresentationContract: any = (0, vue_3.ref)(false);
const showFormattingContract: any = (0, vue_3.ref)(false);
const showTextCapabilityContract: any = (0, vue_3.ref)(false);
const showValidationContract: any = (0, vue_3.ref)(false);
const showInputInstanceContract: any = (0, vue_3.ref)(false);
const showOfficialInputContract: any = (0, vue_3.ref)(false);
const showOfficialLayoutContract: any = (0, vue_3.ref)(false);
const showOfficialSuggestionContract: any = (0, vue_3.ref)(false);
const value: any = (0, vue_3.ref)('');
const active: any = (0, vue_3.ref)(true);
const failure: any = (0, vue_3.ref)(false);
const requests: any = (0, vue_3.ref)(0);
const control: any = (0, vue_3.ref)();
const selected: any = (0, vue_3.ref)();
const instance: any = (0, vue_3.ref)({});
const message: any = (0, vue_3.ref)('');
const result: any = (0, vue_3.ref)('');
const lastKey: any = (0, vue_3.ref)('');
const methodResult: any = (0, vue_3.ref)('');
const events: any = (0, vue_3.ref)([]);
const showArrow: any = (0, vue_3.ref)(false);
const offset: any = (0, vue_3.ref)(16);
function recordKey(event?: any) {
lastKey.value = event instanceof KeyboardEvent ? event.key : '';
recordDom('keydown', event);
}
function recordValue(name?: any, value?: any) {
events.value.push({ name, payload: value });
}
function recordDom(name?: any, event?: any) {
events.value.push({
name,
payload: {
type: event.type,
constructor: event.constructor.name,
trusted: event.isTrusted,
key: event instanceof KeyboardEvent ? event.key : undefined,
data: event instanceof CompositionEvent ? event.data : undefined
}
});
}
function recordSelect(option?: any) {
selected.value = option;
events.value.push({ name: 'select', payload: option });
}
function recordError(error?: any) {
message.value = error.message;
events.value.push({ name: 'error', payload: { kind: error.kind, message: error.message } });
}
function recordSuccess(options?: any) {
message.value = '';
events.value.push({ name: 'success', payload: options });
}
const members: any = [
{ id: 1, label: 'Alpha', value: 'alpha' },
{ id: 2, label: 'Beta', value: 'beta' }
];
const popperOptions: any = (0, vue_3.computed)(() => ({
modifiers: [{ name: 'offset', options: { offset: [0, offset.value] } }]
}));
const api: any = async (query?: any, context?: any) => {
requests.value += 1;
await new Promise((done?: any) => setTimeout(done, 180));
context.signal.throwIfAborted();
if (failure.value)
throw new Error('演示接口失败');
return members.filter((member?: any) => member.label.toLowerCase().includes(query.text.toLowerCase()));
};
const factory: any = (0, ui_1.defineAsamOptions)();
const transform: any = (response?: any) => response;
function source(text?: any) {
return factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'label', value: 'value' }
});
}
async function reload() {
result.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';
}
async function loadAll() {
methodResult.value = 'getData:pending';
await control.value?.getData('');
methodResult.value = 'getData:done';
}
async function selectFirst() {
const first: any = control.value?.suggestions[0];
if (!first)
return;
await control.value?.handleSelect(first);
methodResult.value = 'handleSelect:done';
}
async function enter() {
await control.value?.handleKeyEnter();
methodResult.value = 'handleKeyEnter:done';
}
function inspect() {
const current: any = control.value;
instance.value = {
highlightedIndex: current?.highlightedIndex,
activated: current?.activated,
loading: current?.loading,
suggestions: current?.suggestions,
inputReady: !!current?.inputRef,
popperReady: !!current?.popperRef
};
}
function keepHeaderFocus(event?: any) {
if (event.target instanceof HTMLElement && event.target.closest('[role=button]'))
event.preventDefault();
}
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: _cache[0] || (_cache[0] = ($event?: any) => (showQueryContract.value = !showQueryContract.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[48] || (_cache[48] = [
(0, vue_2.createTextVNode)(" 展示建议查询协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createCommentVNode)(" prettier-ignore "),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: active.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((active).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[49] || (_cache[49] = [
(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: failure.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event?: any) => ((failure).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[50] || (_cache[50] = [
(0, vue_2.createTextVNode)("模拟接口失败", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: reload
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[51] || (_cache[51] = [
(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) => (control.value?.cancel()))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[52] || (_cache[52] = [
(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: inspect
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[53] || (_cache[53] = [
(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) => (showArrow.value = true))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[54] || (_cache[54] = [
(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) => (showArrow.value = false))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[55] || (_cache[55] = [
(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) => (showArrow.value = undefined))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[56] || (_cache[56] = [
(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) => (offset.value = 0))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[57] || (_cache[57] = [
(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) => (offset.value = 16))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[58] || (_cache[58] = [
(0, vue_2.createTextVNode)("恢复额外偏移", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamRemoteAutocomplete), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": [
_cache[24] || (_cache[24] = ($event?: any) => ((value).value = $event)),
_cache[25] || (_cache[25] = ($event?: any) => (recordValue('update:modelValue', $event)))
],
source: source,
active: active.value,
"show-arrow": showArrow.value,
"popper-options": popperOptions.value,
debounce: 100,
"loop-navigation": false,
clearable: "",
size: "default",
"aria-label": "搜索成员",
placeholder: "输入 Alpha 或 Beta",
onInput: _cache[26] || (_cache[26] = ($event?: any) => (recordValue('input', $event))),
onChange: _cache[27] || (_cache[27] = ($event?: any) => (recordValue('change', $event))),
onSelect: recordSelect,
onClear: _cache[28] || (_cache[28] = ($event?: any) => (events.value.push({ name: 'clear', payload: null }))),
onFocus: _cache[29] || (_cache[29] = ($event?: any) => (recordDom('focus', $event))),
onBlur: _cache[30] || (_cache[30] = ($event?: any) => (recordDom('blur', $event))),
onMouseenter: _cache[31] || (_cache[31] = ($event?: any) => (recordDom('mouseenter', $event))),
onMouseleave: _cache[32] || (_cache[32] = ($event?: any) => (recordDom('mouseleave', $event))),
onCompositionstart: _cache[33] || (_cache[33] = ($event?: any) => (recordDom('compositionstart', $event))),
onCompositionupdate: _cache[34] || (_cache[34] = ($event?: any) => (recordDom('compositionupdate', $event))),
onCompositionend: _cache[35] || (_cache[35] = ($event?: any) => (recordDom('compositionend', $event))),
onKeydown: recordKey,
onError: recordError,
onSuccess: recordSuccess
}, {
prefix: (0, vue_2.withCtx)(() => [...(_cache[59] || (_cache[59] = [
(0, vue_2.createElementVNode)("span", { "data-testid": "autocomplete-prefix" }, "找", -1 /* CACHED */)
]))]),
suffix: (0, vue_2.withCtx)(() => [...(_cache[60] || (_cache[60] = [
(0, vue_2.createElementVNode)("span", { "data-testid": "autocomplete-suffix" }, "本地", -1 /* CACHED */)
]))]),
prepend: (0, vue_2.withCtx)(() => [...(_cache[61] || (_cache[61] = [
(0, vue_2.createElementVNode)("span", { "data-testid": "autocomplete-prepend" }, "成员", -1 /* CACHED */)
]))]),
append: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCollapse), {
onMousedown: keepHeaderFocus,
class: "instance-controls",
"data-testid": "autocomplete-append"
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCollapseItem), { name: "auxiliary-content" }, {
title: (0, vue_2.withCtx)(() => [
(0, vue_2.createElementVNode)("span", {
onMousedown: _cache[9] || (_cache[9] = (0, vue_2.withModifiers)(() => { }, ["prevent"]))
}, "实例控制", 32 /* NEED_HYDRATION */)
]),
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createElementVNode)("div", _hoisted_3, [
(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: inspect
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[62] || (_cache[62] = [
(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[11] || (_cache[11] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[12] || (_cache[12] = ($event?: any) => (control.value?.focus()))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[63] || (_cache[63] = [
(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[13] || (_cache[13] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[14] || (_cache[14] = ($event?: any) => (control.value?.blur()))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[64] || (_cache[64] = [
(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[15] || (_cache[15] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[16] || (_cache[16] = ($event?: any) => (control.value?.close()))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[65] || (_cache[65] = [
(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[17] || (_cache[17] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: loadAll
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[66] || (_cache[66] = [
(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[18] || (_cache[18] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[19] || (_cache[19] = ($event?: any) => (control.value?.highlight(0)))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[67] || (_cache[67] = [
(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[20] || (_cache[20] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[21] || (_cache[21] = ($event?: any) => (control.value?.highlight(-1)))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[68] || (_cache[68] = [
(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[22] || (_cache[22] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: selectFirst
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[69] || (_cache[69] = [
(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[23] || (_cache[23] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: enter
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[70] || (_cache[70] = [
(0, vue_2.createTextVNode)(" 实例提交 Enter ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
])
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
})
]),
header: (0, vue_2.withCtx)(() => [...(_cache[71] || (_cache[71] = [
(0, vue_2.createElementVNode)("p", {
class: "panel-caption example-paragraph",
"data-testid": "autocomplete-header"
}, "本地异步成员建议", -1 /* CACHED */)
]))]),
footer: (0, vue_2.withCtx)(() => [...(_cache[72] || (_cache[72] = [
(0, vue_2.createElementVNode)("p", {
class: "panel-caption example-paragraph",
"data-testid": "autocomplete-footer"
}, " 匹配建议保留 raw;未匹配 Enter 只有 value ", -1 /* CACHED */)
]))]),
loading: (0, vue_2.withCtx)(() => [...(_cache[73] || (_cache[73] = [
(0, vue_2.createElementVNode)("p", {
class: "panel-caption example-paragraph",
"data-testid": "autocomplete-loading"
}, "正在加载成员…", -1 /* CACHED */)
]))]),
default: (0, vue_2.withCtx)(({ item }: any) => [
(0, vue_2.createElementVNode)("span", _hoisted_4, (0, vue_2.toDisplayString)(item.label) + " · " + (0, vue_2.toDisplayString)(item.raw.id), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue", "active", "show-arrow", "popper-options"]),
(0, vue_2.createElementVNode)("p", _hoisted_5, (0, vue_2.toDisplayString)(result.value) + " " + (0, vue_2.toDisplayString)(message.value), 1 /* TEXT */),
(0, vue_2.createElementVNode)("p", _hoisted_6, "模型:" + (0, vue_2.toDisplayString)(value.value) + ";最近按键:" + (0, vue_2.toDisplayString)(lastKey.value) + ";请求次数:" + (0, vue_2.toDisplayString)(requests.value), 1 /* TEXT */),
(0, vue_2.createElementVNode)("pre", null, (0, vue_2.toDisplayString)(JSON.stringify({ selected: selected.value, instance: instance.value, methodResult: methodResult.value, events: events.value }, null, 2)), 1 /* TEXT */),
(showQueryContract.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(QueryContract_vue_1.default, { key: 0 }))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[36] || (_cache[36] = ($event?: any) => (showSelectContract.value = !showSelectContract.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[74] || (_cache[74] = [
(0, vue_2.createTextVNode)(" 展示选择载荷契约 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showSelectContract.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(SelectContract_vue_1.default, { key: 1 }))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[37] || (_cache[37] = ($event?: any) => (showNativeInputContract.value = !showNativeInputContract.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[75] || (_cache[75] = [
(0, vue_2.createTextVNode)(" 展示原生输入协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showNativeInputContract.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(NativeInputContract_vue_1.default, { key: 2 }))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[38] || (_cache[38] = ($event?: any) => (showPopupContract.value = !showPopupContract.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[76] || (_cache[76] = [
(0, vue_2.createTextVNode)(" 展示建议浮层协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showPopupContract.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(PopupContract_vue_1.default, { key: 3 }))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[39] || (_cache[39] = ($event?: any) => (showSourceLifecycleContract.value = !showSourceLifecycleContract.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[77] || (_cache[77] = [
(0, vue_2.createTextVNode)(" 展示来源生命周期 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showSourceLifecycleContract.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(SourceLifecycleContract_vue_1.default, { key: 4 }))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[40] || (_cache[40] = ($event?: any) => (showPresentationContract.value = !showPresentationContract.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[78] || (_cache[78] = [
(0, vue_2.createTextVNode)(" 展示建议外观协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showPresentationContract.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(PresentationContract_vue_1.default, { key: 5 }))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[41] || (_cache[41] = ($event?: any) => (showFormattingContract.value = !showFormattingContract.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[79] || (_cache[79] = [
(0, vue_2.createTextVNode)(" 展示建议格式协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showFormattingContract.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(FormattingContract_vue_1.default, { key: 6 }))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[42] || (_cache[42] = ($event?: any) => (showTextCapabilityContract.value = !showTextCapabilityContract.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[80] || (_cache[80] = [
(0, vue_2.createTextVNode)(" 展示建议文本能力 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showTextCapabilityContract.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(TextCapabilityContract_vue_1.default, { key: 7 }))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[43] || (_cache[43] = ($event?: any) => (showValidationContract.value = !showValidationContract.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[81] || (_cache[81] = [
(0, vue_2.createTextVNode)(" 展示建议验证协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showValidationContract.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(ValidationContract_vue_1.default, { key: 8 }))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[44] || (_cache[44] = ($event?: any) => (showInputInstanceContract.value = !showInputInstanceContract.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[82] || (_cache[82] = [
(0, vue_2.createTextVNode)(" 展示建议输入实例协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showInputInstanceContract.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(InputInstanceContract_vue_1.default, { key: 9 }))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[45] || (_cache[45] = ($event?: any) => (showOfficialInputContract.value = !showOfficialInputContract.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[83] || (_cache[83] = [
(0, vue_2.createTextVNode)(" 展示官方输入组合协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showOfficialInputContract.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(OfficialInputContract_vue_1.default, { key: 10 }))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[46] || (_cache[46] = ($event?: any) => (showOfficialLayoutContract.value = !showOfficialLayoutContract.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[84] || (_cache[84] = [
(0, vue_2.createTextVNode)(" 展示官方输入布局协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showOfficialLayoutContract.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(OfficialLayoutContract_vue_1.default, { key: 11 }))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[47] || (_cache[47] = ($event?: any) => (showOfficialSuggestionContract.value = !showOfficialSuggestionContract.value))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[85] || (_cache[85] = [
(0, vue_2.createTextVNode)(" 展示官方建议分支协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showOfficialSuggestionContract.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)(OfficialSuggestionContract_vue_1.default, { key: 12 }))
: (0, vue_2.createCommentVNode)("v-if", true)
]));
};
}
});
exports.default.__scopeId = "data-v-019e0dff";
},
"QueryContract.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 = { "data-testid": "autocomplete-query-contract" };
const _hoisted_2: any = { "data-testid": "query-item" };
const _hoisted_3: any = { "data-testid": "query-contract-state" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'QueryContract',
setup(__props?: any) {
const members: any = [
{ id: 1, label: 'Alpha', value: 'alpha' },
{ id: 2, label: 'Beta', value: 'beta' },
{ id: 3, label: '禁用', value: 'disabled', disabled: true },
{ id: 4, label: 'Delta', value: 'delta' }
];
const control: any = (0, vue_3.ref)();
const model: any = (0, vue_3.ref)('');
const mounted: any = (0, vue_3.ref)(true);
const detachedReferences: any = (0, vue_3.ref)();
const limit: any = (0, vue_3.ref)();
const trigger: any = (0, vue_3.ref)();
const highlightFirst: any = (0, vue_3.ref)();
const loop: any = (0, vue_3.ref)();
const unmatched: any = (0, vue_3.ref)();
const hideLoading: any = (0, vue_3.ref)();
const debounce: any = (0, vue_3.ref)();
const hold: any = (0, vue_3.ref)(false);
const pendingCount: any = (0, vue_3.ref)(0);
const calls: any = (0, vue_3.ref)([]);
const selected: any = (0, vue_3.ref)([]);
const methodResult: any = (0, vue_3.ref)('');
const guardErrors: any = (0, vue_3.ref)([]);
const pending: any = new Set();
function release() {
for (const done of (pending as any))
done();
pending.clear();
pendingCount.value = 0;
}
const api: any = async (query?: any, context?: any) => {
calls.value.push(query.text);
if (hold.value) {
await new Promise((done?: any) => {
pending.add(done);
pendingCount.value = pending.size;
});
}
context.signal.throwIfAborted();
return members.filter((member?: any) => member.label.toLowerCase().includes(query.text.toLowerCase()));
};
const factory: any = (0, ui_1.defineAsamOptions)();
const source: any = (text?: any) => factory.api({
api,
params: { text },
transform: (response?: any) => response,
fieldNames: { label: 'label', value: 'value', disabled: 'disabled' }
});
async function load() {
methodResult.value = 'getData:pending';
await control.value?.getData('');
methodResult.value = 'getData:done';
}
async function enter() {
methodResult.value = 'enter:pending';
await control.value?.handleKeyEnter();
methodResult.value = 'enter:done';
}
async function invalidLimits() {
control.value?.close();
methodResult.value = 'guard:pending';
for (const invalid of ([0, -1, 1.5, NaN, Infinity] as any)) {
limit.value = invalid;
await (0, vue_3.nextTick)();
try {
await control.value?.getData('');
}
catch (error: any) {
guardErrors.value.push({
limit: String(invalid),
message: error instanceof Error ? error.message : String(error)
});
}
}
limit.value = undefined;
await (0, vue_3.nextTick)();
await control.value?.getData('');
control.value?.close();
methodResult.value = 'guard:done';
}
async function unmountInput() {
const saved: any = control.value;
mounted.value = false;
await (0, vue_3.nextTick)();
detachedReferences.value = {
controlPresent: !!control.value,
inputReady: !!saved?.inputRef,
popperReady: !!saved?.popperRef
};
}
const snapshot: any = (0, vue_3.computed)(() => ({
mounted: mounted.value,
detachedReferences: detachedReferences.value,
model: model.value,
calls: calls.value,
selected: selected.value,
pending: pendingCount.value,
methodResult: methodResult.value,
guardErrors: guardErrors.value,
index: control.value?.highlightedIndex,
loading: control.value?.loading,
activated: control.value?.activated,
suggestions: control.value?.suggestions,
inputReady: !!control.value?.inputRef,
popperReady: !!control.value?.popperRef
}));
(0, vue_3.onBeforeUnmount)(() => {
control.value?.cancel();
release();
});
const limitControl: any = (0, vue_3.computed)({
get: () => limit.value ?? '__asam_example_unconfigured__',
set: (value?: any) => {
limit.value =
value === '__asam_example_unconfigured__' ? undefined : value;
}
});
const triggerControl: any = (0, vue_3.computed)({
get: () => trigger.value ?? '__asam_example_unconfigured__',
set: (value?: any) => {
trigger.value =
value === '__asam_example_unconfigured__' ? undefined : value;
}
});
const highlightFirstControl: any = (0, vue_3.computed)({
get: () => highlightFirst.value ?? '__asam_example_unconfigured__',
set: (value?: any) => {
highlightFirst.value =
value === '__asam_example_unconfigured__'
? undefined
: value;
}
});
const loopControl: any = (0, vue_3.computed)({
get: () => loop.value ?? '__asam_example_unconfigured__',
set: (value?: any) => {
loop.value =
value === '__asam_example_unconfigured__' ? undefined : value;
}
});
const unmatchedControl: any = (0, vue_3.computed)({
get: () => unmatched.value ?? '__asam_example_unconfigured__',
set: (value?: any) => {
unmatched.value =
value === '__asam_example_unconfigured__'
? undefined
: value;
}
});
const hideLoadingControl: any = (0, vue_3.computed)({
get: () => hideLoading.value ?? '__asam_example_unconfigured__',
set: (value?: any) => {
hideLoading.value =
value === '__asam_example_unconfigured__'
? undefined
: value;
}
});
const debounceControl: any = (0, vue_3.computed)({
get: () => debounce.value ?? '__asam_example_unconfigured__',
set: (value?: any) => {
debounce.value =
value === '__asam_example_unconfigured__'
? undefined
: value;
}
});
function keepHeaderFocus(event?: any) {
if (event.target instanceof HTMLElement && event.target.closest('[role=button]'))
event.preventDefault();
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
_cache[66] || (_cache[66] = (0, vue_2.createElementVNode)("h3", null, "建议查询与键盘设置", -1 /* CACHED */)),
(0, vue_2.createElementVNode)("div", null, [
(0, vue_2.createElementVNode)("label", null, [
_cache[28] || (_cache[28] = (0, vue_2.createElementVNode)("span", null, "建议数量", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
modelValue: limitControl.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((limitControl).value = $event)),
"aria-label": "建议数量"
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "__asam_example_unconfigured__",
label: '原默认'
}, {
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.AsamOption), {
value: 1,
label: '一项'
}, {
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.AsamOption), {
value: 2,
label: '两项'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[27] || (_cache[27] = [
(0, vue_2.createTextVNode)("两项", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_2.createElementVNode)("label", null, [
_cache[32] || (_cache[32] = (0, vue_2.createElementVNode)("span", null, "聚焦查询", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
modelValue: triggerControl.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((triggerControl).value = $event)),
"aria-label": "聚焦查询"
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "__asam_example_unconfigured__",
label: '原默认'
}, {
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.AsamOption), {
value: true,
label: '启用'
}, {
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.AsamOption), {
value: false,
label: '关闭'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[31] || (_cache[31] = [
(0, vue_2.createTextVNode)("关闭", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_2.createElementVNode)("label", null, [
_cache[36] || (_cache[36] = (0, vue_2.createElementVNode)("span", null, "自动高亮首项", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
modelValue: highlightFirstControl.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event?: any) => ((highlightFirstControl).value = $event)),
"aria-label": "自动高亮首项"
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "__asam_example_unconfigured__",
label: '原默认'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[33] || (_cache[33] = [
(0, vue_2.createTextVNode)("原默认", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: true,
label: '启用'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[34] || (_cache[34] = [
(0, vue_2.createTextVNode)("启用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: false,
label: '关闭'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[35] || (_cache[35] = [
(0, vue_2.createTextVNode)("关闭", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_2.createElementVNode)("label", null, [
_cache[40] || (_cache[40] = (0, vue_2.createElementVNode)("span", null, "循环导航", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
modelValue: loopControl.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event?: any) => ((loopControl).value = $event)),
"aria-label": "循环导航"
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "__asam_example_unconfigured__",
label: '原默认'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[37] || (_cache[37] = [
(0, vue_2.createTextVNode)("原默认", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: true,
label: '启用'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[38] || (_cache[38] = [
(0, vue_2.createTextVNode)("启用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: false,
label: '关闭'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[39] || (_cache[39] = [
(0, vue_2.createTextVNode)("关闭", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_2.createElementVNode)("label", null, [
_cache[44] || (_cache[44] = (0, vue_2.createElementVNode)("span", null, "未匹配时选择", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
modelValue: unmatchedControl.value,
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event?: any) => ((unmatchedControl).value = $event)),
"aria-label": "未匹配时选择"
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "__asam_example_unconfigured__",
label: '原默认'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[41] || (_cache[41] = [
(0, vue_2.createTextVNode)("原默认", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: true,
label: '启用'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[42] || (_cache[42] = [
(0, vue_2.createTextVNode)("启用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: false,
label: '关闭'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[43] || (_cache[43] = [
(0, vue_2.createTextVNode)("关闭", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_2.createElementVNode)("label", null, [
_cache[48] || (_cache[48] = (0, vue_2.createElementVNode)("span", null, "隐藏加载内容", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
modelValue: hideLoadingControl.value,
"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event?: any) => ((hideLoadingControl).value = $event)),
"aria-label": "隐藏加载内容"
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "__asam_example_unconfigured__",
label: '原默认'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[45] || (_cache[45] = [
(0, vue_2.createTextVNode)("原默认", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: true,
label: '启用'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[46] || (_cache[46] = [
(0, vue_2.createTextVNode)("启用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: false,
label: '关闭'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[47] || (_cache[47] = [
(0, vue_2.createTextVNode)("关闭", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_2.createElementVNode)("label", null, [
_cache[52] || (_cache[52] = (0, vue_2.createElementVNode)("span", null, "查询防抖", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
modelValue: debounceControl.value,
"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event?: any) => ((debounceControl).value = $event)),
"aria-label": "查询防抖"
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "__asam_example_unconfigured__",
label: '原默认'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[49] || (_cache[49] = [
(0, vue_2.createTextVNode)("原默认", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: 0,
label: '立即'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[50] || (_cache[50] = [
(0, vue_2.createTextVNode)("立即", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: 180,
label: '180ms'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[51] || (_cache[51] = [
(0, vue_2.createTextVNode)("180ms", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_2.createElementVNode)("label", null, [
_cache[53] || (_cache[53] = (0, vue_2.createElementVNode)("span", null, "持有本地请求", -1 /* CACHED */)),
(0, vue_2.createCommentVNode)(" prettier-ignore "),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: hold.value,
"onUpdate:modelValue": _cache[7] || (_cache[7] = ($event?: any) => ((hold).value = $event))
}, null, 8 /* PROPS */, ["modelValue"])
])
]),
(!mounted.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamButton), {
key: 0,
type: "default",
"native-type": "button",
onClick: _cache[8] || (_cache[8] = ($event?: any) => (mounted.value = true))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[54] || (_cache[54] = [
(0, vue_2.createTextVNode)("恢复协议输入", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}))
: (0, vue_2.createCommentVNode)("v-if", true),
(mounted.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamRemoteAutocomplete), (0, vue_2.mergeProps)({
key: 1,
ref_key: "control",
ref: control,
modelValue: model.value,
"onUpdate:modelValue": _cache[23] || (_cache[23] = ($event?: any) => ((model).value = $event)),
source: source
}, limit.value === undefined ? {} : { maxSuggestions: limit.value }, {
"trigger-on-focus": trigger.value,
"highlight-first-item": highlightFirst.value,
"loop-navigation": loop.value,
"select-when-unmatched": unmatched.value,
"hide-loading": hideLoading.value,
debounce: debounce.value,
teleported: false,
placement: "bottom-start",
"popper-options": { modifiers: [{ name: 'flip', enabled: false }] },
"aria-label": "建议查询协议",
onSelect: _cache[24] || (_cache[24] = ($event?: any) => (selected.value.push($event)))
}), {
append: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCollapse), {
onMousedown: keepHeaderFocus,
class: "query-instance-controls"
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCollapseItem), { name: "auxiliary-content" }, {
title: (0, vue_2.withCtx)(() => [
(0, vue_2.createElementVNode)("span", {
onMousedown: _cache[9] || (_cache[9] = (0, vue_2.withModifiers)(() => { }, ["prevent"]))
}, "协议实例控制", 32 /* NEED_HYDRATION */)
]),
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createElementVNode)("div", null, [
(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?.focus()))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[55] || (_cache[55] = [
(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[12] || (_cache[12] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[13] || (_cache[13] = ($event?: any) => (control.value?.blur()))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[56] || (_cache[56] = [
(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[14] || (_cache[14] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[15] || (_cache[15] = ($event?: any) => (control.value?.close()))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[57] || (_cache[57] = [
(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[16] || (_cache[16] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: load
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[58] || (_cache[58] = [
(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[17] || (_cache[17] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[18] || (_cache[18] = ($event?: any) => (control.value?.highlight(-1)))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[59] || (_cache[59] = [
(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[19] || (_cache[19] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[20] || (_cache[20] = ($event?: any) => (control.value?.highlight(0)))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[60] || (_cache[60] = [
(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[21] || (_cache[21] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: enter
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[61] || (_cache[61] = [
(0, vue_2.createTextVNode)(" 协议提交 Enter ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: release
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[62] || (_cache[62] = [
(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: invalidLimits
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[63] || (_cache[63] = [
(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[22] || (_cache[22] = (0, vue_2.withModifiers)(() => { }, ["prevent"])),
onClick: unmountInput
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[64] || (_cache[64] = [
(0, vue_2.createTextVNode)(" 停用协议输入 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
])
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
})
]),
default: (0, vue_2.withCtx)(({ item }: any) => [
(0, vue_2.createElementVNode)("span", _hoisted_2, (0, vue_2.toDisplayString)(item.label) + " / " + (0, vue_2.toDisplayString)(item.raw.id), 1 /* TEXT */)
]),
loading: (0, vue_2.withCtx)(() => [...(_cache[65] || (_cache[65] = [
(0, vue_2.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "query-contract-loading"
}, "本地等待中", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["modelValue", "trigger-on-focus", "highlight-first-item", "loop-navigation", "select-when-unmatched", "hide-loading", "debounce"]))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createElementVNode)("pre", _hoisted_3, (0, vue_2.toDisplayString)(JSON.stringify(snapshot.value, null, 2)), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-1a7c5d52";
},
"SelectContract.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-slot-layout" };
const _hoisted_2: any = { class: "demo-slot-actions" };
const _hoisted_3: any = { "data-testid": "select-union-result" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'SelectContract',
setup(__props?: any) {
const member: any = { id: 7, name: 'Alpha', value: 'alpha' };
const option: any = { label: 'Alpha', value: 'alpha', raw: member };
const native: any = { code: 7, caption: 'Alpha', value: 'alpha' };
const factory: any = (0, ui_1.defineAsamOptions)();
const remoteSource: any = (query?: any) => factory.api({
api: async () => [member],
params: { query },
transform: (response?: any) => response,
fieldNames: { label: 'name', value: 'value' }
});
const mode: any = (0, vue_3.ref)('static');
const mounted: any = (0, vue_3.ref)(false);
const busy: any = (0, vue_3.ref)(false);
const model: any = (0, vue_3.ref)('');
const policy: any = (0, vue_3.ref)();
const control: any = (0, vue_3.shallowRef)();
const selected: any = (0, vue_3.shallowRef)([]);
const remoteOptions: any = (0, vue_3.shallowRef)([]);
const observations: any = (0, vue_3.ref)([]);
const fetchSuggestions: any = (0, vue_3.computed)(() => {
if (mode.value === 'array')
return [native];
if (mode.value === 'sync')
return () => [native];
if (mode.value === 'callback')
return (_query?: any, callback?: any) => callback([native]);
if (mode.value === 'promise')
return async () => [native];
return [];
});
function recordSelection(item?: any) {
selected.value = [...selected.value, item];
}
async function mount(next?: any, value: any = '') {
mounted.value = false;
await (0, vue_3.nextTick)();
mode.value = next;
model.value = value;
mounted.value = true;
await (0, vue_3.nextTick)();
}
async function runMatched() {
busy.value = true;
observations.value = [];
for (const next of (['static', 'array', 'sync', 'callback', 'promise', 'remote'] as any)) {
await mount(next);
await control.value?.getData('Alpha');
const suggestion: any = control.value?.suggestions[0];
if (!suggestion) {
observations.value.push({ phase: next, missingSuggestion: true });
continue;
}
await control.value?.handleSelect(suggestion);
const item: any = selected.value.at(-1);
observations.value.push({
phase: next,
sameSuggestionObject: item === suggestion,
sameOriginalObject: item &&
(0, vue_3.toRaw)(item) ===
(next === 'remote'
? (0, vue_3.toRaw)(remoteOptions.value[0])
: next === 'static'
? option
: native),
completeMatchedPayload: item &&
('raw' in item
? item.raw.id === 7 &&
item.raw.name === 'Alpha' &&
item.raw.value === 'alpha' &&
item.label === 'Alpha' &&
(0, vue_3.toRaw)(item.raw) ===
(next === 'remote' ? (0, vue_3.toRaw)(remoteOptions.value[0]?.raw) : member)
: 'code' in item && item.code === 7 && item.caption === 'Alpha'),
value: item?.value,
suggestionsStillComplete: control.value?.suggestions.every((item?: any) => 'raw' in item || 'code' in item)
});
}
busy.value = false;
}
async function runUnmatched() {
busy.value = true;
observations.value = [];
for (const value of (['Unmatched', 42] as any)) {
for (const nextPolicy of ([undefined, false, true] as any)) {
policy.value = nextPolicy;
await mount('empty', value);
await control.value?.getData('missing');
const before: any = selected.value.length;
await control.value?.handleKeyEnter();
observations.value.push({
phase: 'instance-unmatched',
model: value,
policy: nextPolicy ?? 'undefined',
added: selected.value.length - before,
item: selected.value.length > before ? selected.value.at(-1) : null,
suggestionCount: control.value?.suggestions.length
});
}
}
busy.value = false;
}
async function prepareKeyboard() {
policy.value = true;
await mount('empty', 'Keyboard unmatched');
await control.value?.getData('missing');
control.value?.focus();
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamCollapse), { "data-testid": "select-union-contract" }, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCollapseItem), { name: "auxiliary-content" }, {
title: (0, vue_2.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_2.createElementVNode)("span", null, "匹配建议与未匹配 Enter", -1 /* CACHED */)
]))]),
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createElementVNode)("div", _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",
disabled: busy.value,
onClick: runMatched
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(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",
disabled: busy.value,
onClick: runUnmatched
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_2.createTextVNode)("验证实例未匹配 Enter", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: prepareKeyboard
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_2.createTextVNode)("准备实际键盘未匹配 Enter", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_2.createCommentVNode)(" @vue-generic {string, Member, Native} "),
(mounted.value && mode.value !== 'remote')
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamAutocomplete), (0, vue_2.mergeProps)({
key: mode.value,
ref_key: "control",
ref: control,
modelValue: model.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((model).value = $event)),
"value-key": mode.value === 'static' ? 'value' : 'caption'
}, {
...(mode.value === 'static' ? { options: [option] } : { fetchSuggestions: fetchSuggestions.value }),
...(policy.value === undefined ? {} : { selectWhenUnmatched: policy.value })
}, {
debounce: 0,
teleported: false,
"aria-label": "选择载荷契约",
onSelect: recordSelection
}), {
default: (0, vue_2.withCtx)(({ item }: any) => [
(0, vue_2.createElementVNode)("span", null, (0, vue_2.toDisplayString)('raw' in item ? item.raw.id : item.code), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["modelValue", "value-key"]))
: (mounted.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamRemoteAutocomplete), {
key: 1,
ref_key: "control",
ref: control,
modelValue: model.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((model).value = $event)),
source: remoteSource,
debounce: 0,
teleported: false,
"aria-label": "选择载荷契约",
onSelect: recordSelection,
onSuccess: _cache[2] || (_cache[2] = ($event?: any) => (remoteOptions.value = $event))
}, null, 8 /* PROPS */, ["modelValue"]))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createElementVNode)("pre", _hoisted_3, (0, vue_2.toDisplayString)(JSON.stringify({ busy: busy.value, observations: observations.value, selected: selected.value })), 1 /* TEXT */)
])
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}));
};
}
});
exports.default.__scopeId = "data-v-4d953634";
},
"NativeInputContract.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 = { "data-testid": "autocomplete-native-input-contract" };
const _hoisted_2: any = { class: "actions" };
const _hoisted_3: any = { "data-testid": "native-input-result" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'NativeInputContract',
setup(__props?: any) {
const configurations: any = {
explicit: {
id: 'data009-native-input',
ariaLabel: '原生输入契约',
tabindex: 3,
form: 'data009-input-owner',
name: 'native-query',
autocomplete: 'on',
inputmode: 'search',
placeholder: 'Input contract',
minlength: 2,
maxlength: 8,
min: 2,
max: 10,
step: 2,
autofocus: true,
rows: 4,
resize: 'none'
},
omitted: {}
};
const mode: any = (0, vue_3.ref)('explicit');
const type: any = (0, vue_3.ref)('text');
const model: any = (0, vue_3.ref)('seed');
const readonly: any = (0, vue_3.ref)(false);
const disabled: any = (0, vue_3.ref)(false);
const mounted: any = (0, vue_3.ref)(true);
const inputs: any = (0, vue_3.ref)([]);
const updates: any = (0, vue_3.ref)([]);
const queries: any = (0, vue_3.ref)([]);
const configuration: any = (0, vue_3.computed)(() => configurations[mode.value]);
const factory: any = (0, ui_1.defineAsamOptions)();
const api: any = async (query?: any, context?: any) => {
context.signal.throwIfAborted();
queries.value.push(query.text);
return [{ id: 7, label: query.text, value: query.text }];
};
const source: any = (text?: any) => factory.api({
api,
params: { text },
transform: (items?: any) => items,
fieldNames: { label: 'label', value: 'value' }
});
async function remount() {
mounted.value = false;
await (0, vue_3.nextTick)();
mounted.value = true;
}
async function mountNumber() {
mounted.value = false;
await (0, vue_3.nextTick)();
model.value = 4;
type.value = 'number';
mounted.value = true;
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createElementVNode)("form", {
id: "data009-input-owner",
onSubmit: _cache[0] || (_cache[0] = (0, vue_2.withModifiers)(() => { }, ["prevent"]))
}, null, 32 /* NEED_HYDRATION */),
(0, vue_2.createElementVNode)("div", _hoisted_2, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[1] || (_cache[1] = ($event?: any) => (mode.value = 'explicit'))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_2.createTextVNode)("设置完整输入属性", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[2] || (_cache[2] = ($event?: any) => (mode.value = 'omitted'))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(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) => (model.value = 42))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(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) => (model.value = 'seed'))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_2.createTextVNode)("写入字符串模型", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: remount
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(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: mountNumber
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[16] || (_cache[16] = [
(0, vue_2.createTextVNode)("全新挂载数字输入", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
_cache[23] || (_cache[23] = (0, vue_2.createElementVNode)("label", { for: "data009-native-input-type" }, "输入类型", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-native-input-type",
modelValue: type.value,
"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event?: any) => ((type).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'text',
value: 'text'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[17] || (_cache[17] = [
(0, vue_2.createTextVNode)("text", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'password',
value: 'password'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[18] || (_cache[18] = [
(0, vue_2.createTextVNode)("password", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'number',
value: 'number'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[19] || (_cache[19] = [
(0, vue_2.createTextVNode)("number", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'textarea',
value: 'textarea'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[20] || (_cache[20] = [
(0, vue_2.createTextVNode)("textarea", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createCommentVNode)(" prettier-ignore "),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: readonly.value,
"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event?: any) => ((readonly).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[21] || (_cache[21] = [
(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: disabled.value,
"onUpdate:modelValue": _cache[7] || (_cache[7] = ($event?: any) => ((disabled).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[22] || (_cache[22] = [
(0, vue_2.createTextVNode)("协议禁用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_2.createCommentVNode)(" @vue-generic {string, Member} "),
(mounted.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamRemoteAutocomplete), (0, vue_2.mergeProps)({
key: 0,
modelValue: model.value,
"onUpdate:modelValue": _cache[8] || (_cache[8] = ($event?: any) => ((model).value = $event))
}, configuration.value, {
source: source,
type: type.value,
readonly: readonly.value,
disabled: disabled.value,
debounce: 0,
"trigger-on-focus": false,
teleported: false,
onInput: _cache[9] || (_cache[9] = ($event?: any) => (inputs.value.push($event))),
"onUpdate:modelValue": _cache[10] || (_cache[10] = ($event?: any) => (updates.value.push($event)))
}), null, 16 /* FULL_PROPS */, ["modelValue", "type", "readonly", "disabled"]))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createElementVNode)("pre", _hoisted_3, (0, vue_2.toDisplayString)(JSON.stringify({
model: model.value,
mode: mode.value,
type: type.value,
readonly: readonly.value,
disabled: disabled.value,
mounted: mounted.value,
inputs: inputs.value,
updates: updates.value,
queries: queries.value
})), 1 /* TEXT */)
]));
};
}
});
},
"PopupContract.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 = { "data-testid": "autocomplete-popup-case" };
const _hoisted_2: any = { class: "popup-input-area" };
const _hoisted_3: any = { class: "example-paragraph" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'PopupContract',
setup(__props?: any) {
const scenarios: any = [
{ value: 'default', label: '省略配置' },
...['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'].map((value?: any) => ({
value,
label: value
})),
{ value: 'style-object', label: '自定义类与对象样式' },
{ value: 'style-string', label: '字符串样式' },
{ value: 'style-array', label: '组合样式' },
{ value: 'local', label: '就地显示,忽略附加目标' },
{ value: 'selector', label: '传送到指定选择器' },
{ value: 'element', label: '传送到实际元素' },
{ value: 'fit', label: '固定为输入宽度' },
{ value: 'min', label: '输入宽度作为最小宽度' },
{ value: 'role', label: '自定义输入角色' }
];
const scenario: any = (0, vue_3.ref)('default');
const liveRole: any = (0, vue_3.ref)('searchbox');
const host: any = (0, vue_3.ref)();
const value: any = (0, vue_3.ref)('');
const mounted: any = (0, vue_3.ref)(true);
const generation: any = (0, vue_3.ref)(0);
const control: any = (0, vue_3.ref)();
const member: any = {
id: 7,
value: 'alpha',
name: 'Alpha member with a deliberately long suggestion label for popup width comparison'
};
const factory: any = (0, ui_1.defineAsamOptions)();
const source: any = (text?: any) => factory.api({
api: async (_params?: any, context?: any) => {
context.signal.throwIfAborted();
return [member];
},
params: { text },
transform: (items?: any) => items,
fieldNames: { label: 'name', value: 'value' }
});
const configuration: any = (0, vue_3.computed)(() => {
if (['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'].includes(scenario.value))
return {
placement: scenario.value
};
if (scenario.value === 'style-object')
return {
popperClass: 'data009-popup-custom',
popperStyle: { backgroundColor: 'rgb(11, 22, 33)', borderWidth: '3px' }
};
if (scenario.value === 'style-string')
return { popperStyle: 'background-color: rgb(22, 33, 44); border-width: 4px;' };
if (scenario.value === 'style-array')
return { popperStyle: [{ backgroundColor: 'rgb(33, 44, 55)' }, { borderWidth: '5px' }] };
if (scenario.value === 'local')
return { teleported: false, appendTo: '#autocomplete-popup-host' };
if (scenario.value === 'selector')
return { teleported: true, appendTo: '#autocomplete-popup-host' };
if (scenario.value === 'element')
return { teleported: true, appendTo: host.value };
if (scenario.value === 'fit')
return { fitInputWidth: true };
if (scenario.value === 'min')
return { fitInputWidth: false };
if (scenario.value === 'role')
return { containerRole: liveRole.value };
return {};
});
async function open() {
liveRole.value = 'searchbox';
control.value?.close();
mounted.value = false;
await (0, vue_3.nextTick)();
value.value = '';
generation.value++;
mounted.value = true;
await (0, vue_3.nextTick)();
control.value?.focus();
await control.value?.getData('');
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
_cache[6] || (_cache[6] = (0, vue_2.createElementVNode)("label", { for: "autocomplete-popup-scenario" }, "建议浮层配置", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "autocomplete-popup-scenario",
modelValue: scenario.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((scenario).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)(vue_2.Fragment, null, (0, vue_2.renderList)(scenarios, (item?: any) => {
return (0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
key: item.value,
value: item.value,
label: item.label
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createTextVNode)((0, vue_2.toDisplayString)(item.label), 1 /* TEXT */)
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["value", "label"]);
}), 64 /* STABLE_FRAGMENT */))
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: open
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_2.createTextVNode)("打开配置后的建议", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(scenario.value === 'role')
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamButton), {
key: 0,
type: "default",
"native-type": "button",
onClick: _cache[1] || (_cache[1] = ($event?: any) => (liveRole.value = 'group'))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_2.createTextVNode)(" 切换已挂载输入角色 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createElementVNode)("div", {
id: "autocomplete-popup-host",
ref_key: "host",
ref: host,
"data-testid": "autocomplete-popup-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_2.createElementVNode)("div", _hoisted_2, [
(mounted.value)
? ((0, vue_2.openBlock)(), (0, vue_2.createBlock)((0, vue_2.unref)(ui_1.AsamRemoteAutocomplete), (0, vue_2.mergeProps)({
key: generation.value,
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event?: any) => ((value).value = $event)),
source: source,
debounce: 0
}, configuration.value, { "aria-label": "浮层协议成员" }), {
header: (0, vue_2.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_2.createElementVNode)("span", { "data-testid": "autocomplete-popup-header" }, "配置后的建议", -1 /* CACHED */)
]))]),
default: (0, vue_2.withCtx)(({ item }: any) => [
(0, vue_2.createElementVNode)("span", null, (0, vue_2.toDisplayString)(item.label) + " · " + (0, vue_2.toDisplayString)(item.raw.id), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["modelValue"]))
: (0, vue_2.createCommentVNode)("v-if", true)
]),
(0, vue_2.createElementVNode)("p", _hoisted_3, "当前配置:" + (0, vue_2.toDisplayString)(scenario.value) + ";模型:" + (0, vue_2.toDisplayString)(value.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-f820914e";
},
"SourceLifecycleContract.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 = { "data-testid": "autocomplete-source-lifecycle-case" };
const _hoisted_2: any = { "data-testid": "autocomplete-source-lifecycle-result" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'SourceLifecycleContract',
setup(__props?: any) {
const kind: any = (0, vue_3.ref)('api');
const activeMode: any = (0, vue_3.ref)('omitted');
const active: any = (0, vue_3.computed)(() => activeMode.value === 'omitted' ? undefined : activeMode.value === 'true');
const draft: any = (0, vue_3.ref)('Alpha');
const model: any = (0, vue_3.ref)('retained-model');
const host: any = (0, vue_3.ref)();
const control: any = (0, vue_3.shallowRef)();
const calls: any = (0, vue_3.ref)([]);
const results: any = (0, vue_3.ref)([]);
const successes: any = (0, vue_3.ref)([]);
const errors: any = (0, vue_3.ref)([]);
const hold: any = (0, vue_3.ref)(false);
const failure: any = (0, vue_3.ref)(false);
const deferred: any = [];
const pendingCount: any = (0, vue_3.ref)(0);
const mounted: any = (0, vue_3.ref)(false);
const lastAction: any = (0, vue_3.ref)('unloaded');
let app: any;
let savedControl: any;
const factory: any = (0, ui_1.defineAsamOptions)();
const fields: any = { label: 'name', value: 'value' };
const cache: any = { ttlMs: 60000 };
function members(text?: any) {
return [{ id: 7, name: text, value: text.toLowerCase() }];
}
async function load(call?: any, context?: any) {
context.signal.throwIfAborted();
calls.value.push(call);
const recorded: any = calls.value.at(-1);
context.signal.addEventListener('abort', () => {
recorded.aborted = true;
}, { once: true });
if (hold.value)
return new Promise((resolve?: any, reject?: any) => {
deferred.push({ resolve, reject, call: recorded });
pendingCount.value = deferred.length;
});
if (failure.value)
throw new Error('source lifecycle API failure');
return members(call.text);
}
const api: any = (params?: any, context?: any) => load({ kind: 'api', text: params.text, requestId: context.requestId, aborted: false }, context);
const transformApi: any = (items?: any) => items;
function isMember(value?: any) {
return (typeof value === 'object' &&
value !== null &&
'id' in value &&
typeof value.id === 'number' &&
'name' in value &&
typeof value.name === 'string' &&
'value' in value &&
typeof value.value === 'string');
}
function transformRequest(response?: any) {
if (!Array.isArray(response) || !response.every(isMember))
throw new Error('invalid member response');
return response;
}
const provider: any = {
request: async (config?: any, context?: any) => {
const text: any = config.params?.text;
if (typeof text !== 'string')
throw new Error('query must reach the real request parameters');
return load({
kind: 'request',
text,
requestId: context.requestId,
aborted: false,
url: config.url,
...(config.method === undefined ? {} : { method: config.method })
}, context);
}
};
const source: any = (text?: any) => kind.value === 'api'
? factory.api({ api, params: { text }, transform: transformApi, fieldNames: fields, cache })
: factory.request({
request: { url: '/data009/autocomplete-members', params: { text } },
transform: transformRequest,
fieldNames: fields,
cache
});
const TypedRemote: any = (ui_1.AsamRemoteAutocomplete);
const snapshot: any = (0, vue_3.computed)(() => ({
kind: kind.value,
active: active.value ?? 'omitted',
mounted: mounted.value,
detachedSuggestions: !mounted.value ? (savedControl?.suggestions ?? []) : undefined,
draft: draft.value,
model: model.value,
calls: calls.value,
pending: pendingCount.value,
loading: control.value?.loading ?? false,
suggestions: control.value?.suggestions ?? [],
lastAction: lastAction.value,
results: results.value,
successes: successes.value,
errors: errors.value
}));
async function mountControl() {
detach();
await (0, vue_3.nextTick)();
if (!host.value)
return;
app = (0, vue_3.createApp)({
render: () => (0, vue_3.h)(TypedRemote, {
ref: control,
modelValue: model.value,
source,
...(active.value === undefined ? {} : { active: active.value }),
debounce: 0,
triggerOnFocus: false,
ariaLabel: '来源生命周期成员',
'onUpdate:modelValue': (value?: any) => {
model.value = value;
},
onSuccess: (items?: any) => {
successes.value.push(items);
},
onError: (error?: any) => {
errors.value.push(error);
}
})
});
(0, ui_1.provideAsamData)(app, provider, { scope: 'data009-autocomplete-source-lifecycle' });
app.mount(host.value);
mounted.value = true;
lastAction.value = 'mounted';
}
function detach() {
if (control.value)
savedControl = control.value;
app?.unmount();
app = undefined;
control.value = undefined;
mounted.value = false;
lastAction.value = 'unmounted';
}
async function getData() {
lastAction.value = 'query-pending';
await control.value?.getData(draft.value);
lastAction.value = 'query-settled';
}
async function reload(force?: any) {
lastAction.value = 'reload-pending';
const result: any = await control.value?.reload(force === undefined ? undefined : { force });
results.value.push(result ?? { status: 'detached' });
lastAction.value = 'reload-settled';
}
async function reloadDetached() {
const result: any = await savedControl?.reload({ force: true });
results.value.push(result ?? { status: 'missing-saved-control' });
}
async function selectFirst() {
const item: any = control.value?.suggestions[0];
if (item)
await control.value?.handleSelect(item);
}
function release(reject?: any) {
const next: any = deferred.shift();
pendingCount.value = deferred.length;
if (!next)
return;
if (reject)
next.reject(new Error('held source lifecycle failure'));
else
next.resolve(members(next.call.text));
}
(0, vue_3.onMounted)(mountControl);
(0, vue_3.onBeforeUnmount)(detach);
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
_cache[35] || (_cache[35] = (0, vue_2.createElementVNode)("label", { for: "autocomplete-source-kind" }, "来源类型", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "autocomplete-source-kind",
modelValue: kind.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((kind).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "api",
label: 'API 参数与返回值'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_2.createTextVNode)("API 参数与返回值", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "request",
label: 'URL、参数与 provider'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(0, vue_2.createTextVNode)("URL、参数与 provider", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[36] || (_cache[36] = (0, vue_2.createElementVNode)("label", { for: "autocomplete-source-active" }, "请求开关", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "autocomplete-source-active",
modelValue: activeMode.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((activeMode).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "omitted",
label: '省略'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[16] || (_cache[16] = [
(0, vue_2.createTextVNode)("省略", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
value: "true",
label: '启用'
}, {
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.AsamOption), {
value: "false",
label: '停用'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[18] || (_cache[18] = [
(0, vue_2.createTextVNode)("停用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[37] || (_cache[37] = (0, vue_2.createElementVNode)("label", { for: "autocomplete-source-query" }, "请求查询", -1 /* CACHED */)),
(0, vue_2.createCommentVNode)(" prettier-ignore "),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamInput), {
id: "autocomplete-source-query",
modelValue: draft.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event?: any) => ((draft).value = $event))
}, null, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: getData
}, {
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: _cache[3] || (_cache[3] = ($event?: any) => (reload()))
}, {
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: _cache[4] || (_cache[4] = ($event?: any) => (reload(false)))
}, {
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[5] || (_cache[5] = ($event?: any) => (reload(true)))
}, {
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[6] || (_cache[6] = ($event?: any) => (control.value?.cancel()))
}, {
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: selectFirst
}, {
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[7] || (_cache[7] = ($event?: any) => (hold.value = true))
}, {
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[8] || (_cache[8] = ($event?: any) => (hold.value = false))
}, {
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[9] || (_cache[9] = ($event?: any) => (failure.value = true))
}, {
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[10] || (_cache[10] = ($event?: any) => (failure.value = false))
}, {
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[11] || (_cache[11] = ($event?: any) => (release(false)))
}, {
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[12] || (_cache[12] = ($event?: any) => (release(true)))
}, {
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: mountControl
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[31] || (_cache[31] = [
(0, vue_2.createTextVNode)("重新挂载来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: detach
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[32] || (_cache[32] = [
(0, vue_2.createTextVNode)("卸载来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: reloadDetached
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[33] || (_cache[33] = [
(0, vue_2.createTextVNode)("读取卸载后的重载结果", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[13] || (_cache[13] = ($event?: any) => ((0, vue_2.unref)(savedControl)?.cancel()))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[34] || (_cache[34] = [
(0, vue_2.createTextVNode)("取消卸载后的来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "source-control-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_2.createElementVNode)("pre", _hoisted_2, (0, vue_2.toDisplayString)(JSON.stringify(snapshot.value, null, 2)), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-22cbd142";
},
"PresentationContract.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 = { "data-testid": "autocomplete-presentation-contract" };
const _hoisted_2: any = { class: "presentation-controls" };
const _hoisted_3: any = { "data-testid": "autocomplete-presentation-result" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'PresentationContract',
setup(__props?: any) {
const host: any = (0, vue_3.ref)();
const control: any = (0, vue_3.shallowRef)();
const model: any = (0, vue_3.ref)('Alpha');
const size: any = (0, vue_3.ref)('omitted');
const providerSize: any = (0, vue_3.ref)('big');
const clearable: any = (0, vue_3.ref)('omitted');
const icons: any = (0, vue_3.ref)('omitted');
const styleMode: any = (0, vue_3.ref)('omitted');
const readonly: any = (0, vue_3.ref)(false), disabled: any = (0, vue_3.ref)(false);
const inputs: any = (0, vue_3.ref)([]), updates: any = (0, vue_3.ref)([]);
const clears: any = (0, vue_3.ref)(0), requests: any = (0, vue_3.ref)([]);
const suggestions: any = (0, vue_3.ref)([]);
const icon: any = (name?: any, path?: any) => () => (0, vue_3.h)('svg', { viewBox: '0 0 16 16', 'data-presentation-icon': name, 'aria-hidden': 'true' }, [
(0, vue_3.h)('path', { d: path, fill: 'currentColor' })
]);
const Prefix: any = icon('Data009Prefix', 'M2 2h6v6H2z');
const Suffix: any = icon('Data009Suffix', 'M8 8h6v6H8z');
const Clear: any = icon('Data009Clear', 'M2 3l1-1 5 5 5-5 1 1-5 5 5 5-1 1-5-5-5 5-1-1 5-5z');
const api: any = async (params?: any, context?: any) => {
context.signal.throwIfAborted();
requests.value.push(params.text);
return [{ id: 7, name: params.text, value: params.text.toLowerCase() }];
};
const factory: any = (0, ui_1.defineAsamOptions)();
const transform: any = (items?: any) => items;
const source: any = (text?: any) => factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'name', value: 'value' }
});
const configuration: any = (0, vue_3.computed)(() => ({
source,
modelValue: model.value,
readonly: readonly.value,
disabled: disabled.value,
triggerOnFocus: false,
debounce: 0,
ariaLabel: '建议外观输入',
...(size.value === 'omitted' ? {} : { size: size.value }),
...(clearable.value === 'omitted' ? {} : { clearable: clearable.value === 'true' }),
...(icons.value === 'omitted'
? {}
: {
prefixIcon: icons.value === 'component' ? Prefix : 'Data009Prefix',
suffixIcon: icons.value === 'component' ? Suffix : 'Data009Suffix',
clearIcon: icons.value === 'component' ? Clear : 'Data009Clear'
}),
...(styleMode.value === 'omitted'
? {}
: {
inputStyle: styleMode.value === 'object'
? { color: '#064e3b', backgroundColor: '#f0fdf4', paddingLeft: '18px' }
: styleMode.value === 'string'
? 'color: rgb(120, 53, 15); letter-spacing: 2px;'
: [{ color: '#1e3a8a' }, { fontWeight: '600', paddingRight: '22px' }]
})
}));
const TypedRemote: any = (ui_1.AsamRemoteAutocomplete);
let app: any;
(0, vue_3.onMounted)(() => {
if (!host.value)
return;
app = (0, vue_3.createApp)({
render: () => (0, vue_3.h)(ui_1.AsamConfigProvider, { size: providerSize.value }, () => (0, vue_3.h)(TypedRemote, {
...configuration.value,
ref: control,
'onUpdate:modelValue': (value?: any) => {
model.value = value;
updates.value.push(value);
},
onInput: (value?: any) => inputs.value.push(value),
onClear: () => clears.value++
}))
});
app.component('Data009Prefix', Prefix);
app.component('Data009Suffix', Suffix);
app.component('Data009Clear', Clear);
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-presentation' });
app.mount(host.value);
});
(0, vue_3.onBeforeUnmount)(() => app?.unmount());
async function query() {
await control.value?.getData(String(model.value));
suggestions.value = control.value?.suggestions ?? [];
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createElementVNode)("div", _hoisted_2, [
_cache[31] || (_cache[31] = (0, vue_2.createElementVNode)("label", { for: "data009-presentation-size" }, "输入尺寸", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-presentation-size",
modelValue: size.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((size).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_2.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'large',
value: 'large'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_2.createTextVNode)("large", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'big',
value: 'big'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[10] || (_cache[10] = [
(0, vue_2.createTextVNode)("big", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'default',
value: 'default'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_2.createTextVNode)("default", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'small',
value: 'small'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_2.createTextVNode)("small", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[32] || (_cache[32] = (0, vue_2.createElementVNode)("label", { for: "data009-presentation-providerSize" }, "提供者尺寸", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-presentation-providerSize",
modelValue: providerSize.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((providerSize).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'large',
value: 'large'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(0, vue_2.createTextVNode)("large", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'big',
value: 'big'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_2.createTextVNode)("big", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'default',
value: 'default'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(0, vue_2.createTextVNode)("default", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'small',
value: 'small'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[16] || (_cache[16] = [
(0, vue_2.createTextVNode)("small", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[33] || (_cache[33] = (0, vue_2.createElementVNode)("label", { for: "data009-presentation-clearable" }, "清除开关", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-presentation-clearable",
modelValue: clearable.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event?: any) => ((clearable).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[17] || (_cache[17] = [
(0, vue_2.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'true',
value: 'true'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[18] || (_cache[18] = [
(0, vue_2.createTextVNode)("true", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'false',
value: 'false'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[19] || (_cache[19] = [
(0, vue_2.createTextVNode)("false", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[34] || (_cache[34] = (0, vue_2.createElementVNode)("label", { for: "data009-presentation-icons" }, "图标形式", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-presentation-icons",
modelValue: icons.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event?: any) => ((icons).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[20] || (_cache[20] = [
(0, vue_2.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'component',
value: 'component'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[21] || (_cache[21] = [
(0, vue_2.createTextVNode)("component", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'string',
value: 'string'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[22] || (_cache[22] = [
(0, vue_2.createTextVNode)("string", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[35] || (_cache[35] = (0, vue_2.createElementVNode)("label", { for: "data009-presentation-styleMode" }, "输入样式", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-presentation-styleMode",
modelValue: styleMode.value,
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event?: any) => ((styleMode).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[23] || (_cache[23] = [
(0, vue_2.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'object',
value: 'object'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[24] || (_cache[24] = [
(0, vue_2.createTextVNode)("object", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'string',
value: 'string'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[25] || (_cache[25] = [
(0, vue_2.createTextVNode)("string", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'array',
value: 'array'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[26] || (_cache[26] = [
(0, vue_2.createTextVNode)("array", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createCommentVNode)(" prettier-ignore "),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: readonly.value,
"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event?: any) => ((readonly).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[27] || (_cache[27] = [
(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: disabled.value,
"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event?: any) => ((disabled).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[28] || (_cache[28] = [
(0, vue_2.createTextVNode)("外观禁用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[7] || (_cache[7] = ($event?: any) => (model.value = 'Alpha'))
}, {
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: query
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[30] || (_cache[30] = [
(0, vue_2.createTextVNode)("读取外观来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_2.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "presentation-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_2.createElementVNode)("pre", _hoisted_3, (0, vue_2.toDisplayString)(JSON.stringify({
model: model.value,
inputs: inputs.value,
updates: updates.value,
clears: clears.value,
requests: requests.value,
suggestions: suggestions.value,
size: size.value,
providerSize: providerSize.value,
clearable: clearable.value,
icons: icons.value,
styleMode: styleMode.value,
readonly: readonly.value,
disabled: disabled.value
})), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-64551059";
},
"FormattingContract.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 = { "data-testid": "autocomplete-formatting-contract" };
const _hoisted_2: any = { class: "formatting-controls" };
const _hoisted_3: any = { "data-testid": "autocomplete-formatting-result" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'FormattingContract',
setup(__props?: any) {
const host: any = (0, vue_3.ref)();
const control: any = (0, vue_3.shallowRef)();
const model: any = (0, vue_3.ref)('1234');
const mode: any = (0, vue_3.ref)('omitted');
const modifier: any = (0, vue_3.ref)('omitted');
const inputs: any = (0, vue_3.ref)([]), updates: any = (0, vue_3.ref)([]), changes: any = (0, vue_3.ref)([]), requests: any = (0, vue_3.ref)([]);
const suggestions: any = (0, vue_3.ref)([]);
const formatter: any = (value?: any) => '¤' + String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
const parser: any = (value?: any) => value.replace(/[¤,]/g, '');
const api: any = async (params?: any, context?: any) => {
context.signal.throwIfAborted();
requests.value.push(params.text);
return [{ id: 7, name: params.text, value: params.text.toLowerCase() }];
};
const factory: any = (0, ui_1.defineAsamOptions)();
const transform: any = (items?: any) => items;
const source: any = (text?: any) => factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'name', value: 'value' }
});
const modifiers: any = (0, vue_3.computed)(() => {
if (modifier.value === 'omitted')
return undefined;
return {
...(modifier.value.includes('trim') ? { trim: true } : {}),
...(modifier.value.includes('number') ? { number: true } : {}),
...(modifier.value.includes('lazy') ? { lazy: true } : {})
};
});
const configuration: any = (0, vue_3.computed)(() => ({
source,
modelValue: model.value,
triggerOnFocus: false,
debounce: 0,
ariaLabel: '建议格式输入',
...(mode.value === 'omitted' ? {} : { formatter }),
...(mode.value === 'pair' ? { parser } : {}),
...(modifier.value === 'omitted' ? {} : { modelModifiers: modifiers.value })
}));
const TypedRemote: any = (ui_1.AsamRemoteAutocomplete);
let app: any;
(0, vue_3.onMounted)(() => {
if (!host.value)
return;
app = (0, vue_3.createApp)({
render: () => (0, vue_3.h)(TypedRemote, {
...configuration.value,
ref: control,
'onUpdate:modelValue': (value?: any) => {
model.value = value;
updates.value.push(value);
},
onInput: (value?: any) => inputs.value.push(value),
onChange: (value?: any) => changes.value.push(value)
})
});
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-formatting' });
app.mount(host.value);
});
(0, vue_3.onBeforeUnmount)(() => app?.unmount());
function reset(value?: any) {
model.value = value;
inputs.value = [];
updates.value = [];
changes.value = [];
}
async function query() {
await control.value?.getData(String(model.value));
suggestions.value = control.value?.suggestions ?? [];
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createElementVNode)("div", _hoisted_2, [
_cache[17] || (_cache[17] = (0, vue_2.createElementVNode)("label", { for: "data009-format-mode" }, "格式协议", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-format-mode",
modelValue: mode.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((mode).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_2.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'formatter',
value: 'formatter'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_2.createTextVNode)("formatter", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'pair',
value: 'pair'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_2.createTextVNode)("pair", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[18] || (_cache[18] = (0, vue_2.createElementVNode)("label", { for: "data009-format-modifier" }, "模型修饰符", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-format-modifier",
modelValue: modifier.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((modifier).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_2.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'empty',
value: 'empty'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_2.createTextVNode)("empty", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'trim',
value: 'trim'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_2.createTextVNode)("trim", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'number',
value: 'number'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[10] || (_cache[10] = [
(0, vue_2.createTextVNode)("number", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'trim-number',
value: 'trim-number'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_2.createTextVNode)("trim-number", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'lazy',
value: 'lazy'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_2.createTextVNode)("lazy", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'lazy-trim-number',
value: 'lazy-trim-number'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(0, vue_2.createTextVNode)("lazy-trim-number", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[2] || (_cache[2] = ($event?: any) => (reset('1234')))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_2.createTextVNode)("恢复格式数值", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[3] || (_cache[3] = ($event?: any) => (reset('Base')))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(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: query
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[16] || (_cache[16] = [
(0, vue_2.createTextVNode)("读取格式模型来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_2.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "formatting-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_2.createElementVNode)("pre", _hoisted_3, (0, vue_2.toDisplayString)(JSON.stringify({
model: model.value,
inputs: inputs.value,
updates: updates.value,
changes: changes.value,
requests: requests.value,
suggestions: suggestions.value,
mode: mode.value,
modifier: modifier.value
})), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-456a698a";
},
"TextCapabilityContract.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 = { "data-testid": "autocomplete-text-capability-contract" };
const _hoisted_2: any = { class: "text-controls" };
const _hoisted_3: any = { "data-testid": "autocomplete-text-capability-result" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'TextCapabilityContract',
setup(__props?: any) {
const host: any = (0, vue_3.ref)();
const control: any = (0, vue_3.shallowRef)();
const model: any = (0, vue_3.ref)('AB');
const kind: any = (0, vue_3.ref)('text');
const limit: any = (0, vue_3.ref)('omitted');
const position: any = (0, vue_3.ref)('omitted');
const graphemes: any = (0, vue_3.ref)('omitted');
const autosize: any = (0, vue_3.ref)('omitted');
const password: any = (0, vue_3.ref)('omitted');
const readonly: any = (0, vue_3.ref)(false), disabled: any = (0, vue_3.ref)(false);
const inputs: any = (0, vue_3.ref)([]), updates: any = (0, vue_3.ref)([]), changes: any = (0, vue_3.ref)([]), requests: any = (0, vue_3.ref)([]);
const suggestions: any = (0, vue_3.ref)([]);
const segmenter: any = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
const countGraphemes: any = (value?: any) => Array.from(segmenter.segment(value)).length;
const api: any = async (params?: any, context?: any) => {
context.signal.throwIfAborted();
requests.value.push(params.text);
return [{ id: 7, name: params.text, value: params.text.toLowerCase() }];
};
const factory: any = (0, ui_1.defineAsamOptions)();
const transform: any = (items?: any) => items;
const source: any = (text?: any) => factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'name', value: 'value' }
});
const configuration: any = (0, vue_3.computed)(() => ({
source,
modelValue: model.value,
type: kind.value,
rows: 2,
maxlength: kind.value === 'text' ? 3 : undefined,
readonly: readonly.value,
disabled: disabled.value,
triggerOnFocus: false,
debounce: 0,
ariaLabel: '建议文本能力输入',
...(limit.value === 'omitted' ? {} : { showWordLimit: limit.value === 'true' }),
...(position.value === 'omitted' ? {} : { wordLimitPosition: position.value }),
...(graphemes.value === 'omitted' ? {} : { countGraphemes }),
...(password.value === 'omitted' ? {} : { showPassword: password.value === 'true' }),
...(autosize.value === 'omitted'
? {}
: {
autosize: autosize.value === 'bounded'
? { minRows: 2, maxRows: 4 }
: autosize.value === 'true'
})
}));
const TypedRemote: any = (ui_1.AsamRemoteAutocomplete);
let app: any;
(0, vue_3.onMounted)(() => {
if (!host.value)
return;
app = (0, vue_3.createApp)({
render: () => (0, vue_3.h)(TypedRemote, {
...configuration.value,
ref: control,
'onUpdate:modelValue': (value?: any) => {
model.value = value;
updates.value.push(value);
},
onInput: (value?: any) => inputs.value.push(value),
onChange: (value?: any) => changes.value.push(value)
})
});
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-text-capabilities' });
app.mount(host.value);
});
(0, vue_3.onBeforeUnmount)(() => app?.unmount());
async function query() {
await control.value?.getData(String(model.value));
suggestions.value = control.value?.suggestions ?? [];
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createElementVNode)("div", _hoisted_2, [
_cache[30] || (_cache[30] = (0, vue_2.createElementVNode)("label", { for: "data009-text-kind" }, "计数输入类型", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-text-kind",
modelValue: kind.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((kind).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'text',
value: 'text'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_2.createTextVNode)("text", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'textarea',
value: 'textarea'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[10] || (_cache[10] = [
(0, vue_2.createTextVNode)("textarea", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[31] || (_cache[31] = (0, vue_2.createElementVNode)("label", { for: "data009-text-limit" }, "显示字数", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-text-limit",
modelValue: limit.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((limit).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_2.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'true',
value: 'true'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_2.createTextVNode)("true", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'false',
value: 'false'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(0, vue_2.createTextVNode)("false", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[32] || (_cache[32] = (0, vue_2.createElementVNode)("label", { for: "data009-text-position" }, "字数位置", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-text-position",
modelValue: position.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event?: any) => ((position).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_2.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'inside',
value: 'inside'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(0, vue_2.createTextVNode)("inside", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'outside',
value: 'outside'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[16] || (_cache[16] = [
(0, vue_2.createTextVNode)("outside", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[33] || (_cache[33] = (0, vue_2.createElementVNode)("label", { for: "data009-text-graphemes" }, "字素计数", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-text-graphemes",
modelValue: graphemes.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event?: any) => ((graphemes).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[17] || (_cache[17] = [
(0, vue_2.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'segmenter',
value: 'segmenter'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[18] || (_cache[18] = [
(0, vue_2.createTextVNode)("segmenter", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[34] || (_cache[34] = (0, vue_2.createElementVNode)("label", { for: "data009-text-autosize" }, "文本域自适应", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-text-autosize",
modelValue: autosize.value,
"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event?: any) => ((autosize).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[19] || (_cache[19] = [
(0, vue_2.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'false',
value: 'false'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[20] || (_cache[20] = [
(0, vue_2.createTextVNode)("false", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'true',
value: 'true'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[21] || (_cache[21] = [
(0, vue_2.createTextVNode)("true", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'bounded',
value: 'bounded'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[22] || (_cache[22] = [
(0, vue_2.createTextVNode)("bounded", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[35] || (_cache[35] = (0, vue_2.createElementVNode)("label", { for: "data009-text-password" }, "密码显示开关", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-text-password",
modelValue: password.value,
"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event?: any) => ((password).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[23] || (_cache[23] = [
(0, vue_2.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'true',
value: 'true'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[24] || (_cache[24] = [
(0, vue_2.createTextVNode)("true", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'false',
value: 'false'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[25] || (_cache[25] = [
(0, vue_2.createTextVNode)("false", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createCommentVNode)(" prettier-ignore "),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamCheckboxItem), {
modelValue: readonly.value,
"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event?: any) => ((readonly).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[26] || (_cache[26] = [
(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: disabled.value,
"onUpdate:modelValue": _cache[7] || (_cache[7] = ($event?: any) => ((disabled).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[27] || (_cache[27] = [
(0, vue_2.createTextVNode)("计数禁用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[8] || (_cache[8] = ($event?: any) => (model.value = 'AB'))
}, {
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: query
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[29] || (_cache[29] = [
(0, vue_2.createTextVNode)("读取计数模型来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_2.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "text-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_2.createElementVNode)("pre", _hoisted_3, (0, vue_2.toDisplayString)(JSON.stringify({
model: model.value,
inputs: inputs.value,
updates: updates.value,
changes: changes.value,
requests: requests.value,
suggestions: suggestions.value,
kind: kind.value,
limit: limit.value,
position: position.value,
graphemes: graphemes.value,
autosize: autosize.value,
password: password.value,
readonly: readonly.value,
disabled: disabled.value
})), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-f4c5b6ec";
},
"ValidationContract.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 = { "data-testid": "autocomplete-validation-contract" };
const _hoisted_2: any = { class: "validation-controls" };
const _hoisted_3: any = { "data-testid": "autocomplete-validation-result" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'ValidationContract',
setup(__props?: any) {
const host: any = (0, vue_3.ref)();
const item: any = (0, vue_3.shallowRef)();
const fields: any = (0, vue_3.reactive)({ value: 'Seed' });
const mode: any = (0, vue_3.ref)('omitted');
const lazy: any = (0, vue_3.ref)('omitted');
const inputs: any = (0, vue_3.ref)([]), updates: any = (0, vue_3.ref)([]), changes: any = (0, vue_3.ref)([]), validations: any = (0, vue_3.ref)([]);
const validateEvents: any = (0, vue_3.ref)([]);
const rule: any = {
trigger: ['change', 'blur'],
validator: (_rule?: any, value?: any, callback?: any) => {
validations.value.push(String(value));
callback(String(value).includes('!') ? new Error('建议值禁止感叹号') : undefined);
}
};
const api: any = async (params?: any, context?: any) => {
context.signal.throwIfAborted();
return [{ id: 7, name: params.text, value: params.text.toLowerCase() }];
};
const factory: any = (0, ui_1.defineAsamOptions)();
const transform: any = (items?: any) => items;
const source: any = (text?: any) => factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'name', value: 'value' }
});
const configuration: any = (0, vue_3.computed)(() => ({
source,
modelValue: fields.value,
triggerOnFocus: false,
debounce: 0,
ariaLabel: '建议验证输入',
...(mode.value === 'omitted' ? {} : { validateEvent: mode.value === 'true' }),
...(lazy.value === 'omitted' ? {} : { modelModifiers: { lazy: true } })
}));
const TypedRemote: any = (ui_1.AsamRemoteAutocomplete);
let app: any;
(0, vue_3.onMounted)(() => {
if (!host.value)
return;
app = (0, vue_3.createApp)({
render: () => (0, vue_3.h)(ui_1.AsamBaseForm, {
model: fields,
onValidate: (property?: any, valid?: any, message?: any) => validateEvents.value.push({ property, valid, message })
}, () => (0, vue_3.h)(ui_1.AsamFormItem, { prop: 'value', rules: rule, ref: item }, () => (0, vue_3.h)(TypedRemote, {
...configuration.value,
'onUpdate:modelValue': (value?: any) => {
fields.value = String(value);
updates.value.push(value);
},
onInput: (value?: any) => inputs.value.push(value),
onChange: (value?: any) => changes.value.push(value)
})))
});
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-validation' });
app.mount(host.value);
});
(0, vue_3.onBeforeUnmount)(() => app?.unmount());
async function reset() {
fields.value = 'Seed';
await (0, vue_3.nextTick)();
await (0, vue_3.nextTick)();
// Finish the queued blur validation before starting this measurement window.
await new Promise((resolve?: any) => setTimeout(resolve, 20));
await (0, vue_3.nextTick)();
item.value?.clearValidate();
validations.value = [];
validateEvents.value = [];
inputs.value = [];
updates.value = [];
changes.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, [
_cache[8] || (_cache[8] = (0, vue_2.createElementVNode)("label", { for: "data009-validation-mode" }, "建议验证事件", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-validation-mode",
modelValue: mode.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((mode).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_2.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'true',
value: 'true'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_2.createTextVNode)("true", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'false',
value: 'false'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_2.createTextVNode)("false", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[9] || (_cache[9] = (0, vue_2.createElementVNode)("label", { for: "data009-validation-lazy" }, "建议验证提交", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-validation-lazy",
modelValue: lazy.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((lazy).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_2.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'lazy',
value: 'lazy'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_2.createTextVNode)("lazy", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: reset
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_2.createTextVNode)("恢复建议验证", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_2.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "validation-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_2.createElementVNode)("pre", _hoisted_3, (0, vue_2.toDisplayString)(JSON.stringify({
model: fields.value,
mode: mode.value,
lazy: lazy.value,
inputs: inputs.value,
updates: updates.value,
changes: changes.value,
validations: validations.value,
validateEvents: validateEvents.value,
validationState: item.value?.validateState,
validationMessage: item.value?.validateMessage
})), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-c700e214";
},
"InputInstanceContract.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 = { "data-testid": "autocomplete-input-instance-contract" };
const _hoisted_2: any = { class: "instance-actions" };
const _hoisted_3: any = { "data-testid": "autocomplete-input-instance-result" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'InputInstanceContract',
setup(__props?: any) {
const host: any = (0, vue_3.ref)();
const control: any = (0, vue_3.shallowRef)();
const model: any = (0, vue_3.ref)('Seed');
const kind: any = (0, vue_3.ref)('text');
const inputs: any = (0, vue_3.ref)([]), updates: any = (0, vue_3.ref)([]), changes: any = (0, vue_3.ref)([]), clears: any = (0, vue_3.ref)(0);
const events: any = (0, vue_3.ref)([]);
const inspection: any = (0, vue_3.ref)({});
const nativeEvents: any = new WeakSet();
const names: any = [
'focus',
'blur',
'keydown',
'compositionstart',
'compositionupdate',
'compositionend',
'mouseenter',
'mouseleave'
];
const capture: any = (event?: any) => nativeEvents.add(event);
function record(name?: any, event?: any) {
events.value.push({
name,
type: event.type,
constructor: event.constructor.name,
nativePayloadSame: nativeEvents.has(event),
...(event instanceof KeyboardEvent ? { key: event.key } : {}),
...(event instanceof CompositionEvent ? { data: event.data } : {})
});
}
const factory: any = (0, ui_1.defineAsamOptions)();
const api: any = async (params?: any, context?: any) => {
context.signal.throwIfAborted();
return [{ id: 7, name: params.text, value: params.text.toLowerCase() }];
};
const transform: any = (members?: any) => members;
const source: any = (text?: any) => factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'name', value: 'value' }
});
const TypedRemote: any = (ui_1.AsamRemoteAutocomplete);
let app: any;
(0, vue_3.onMounted)(() => {
if (!host.value)
return;
for (const name of (names as any))
host.value.addEventListener(name, capture, true);
app = (0, vue_3.createApp)({
render: () => (0, vue_3.h)(TypedRemote, {
ref: control,
source,
modelValue: model.value,
type: kind.value,
ariaLabel: '建议实例输入',
debounce: 0,
triggerOnFocus: false,
teleported: false,
showPassword: kind.value === 'password',
rows: 2,
autosize: { minRows: 2, maxRows: 4 },
'onUpdate:modelValue': (value?: any) => {
model.value = value;
updates.value.push(value);
},
onInput: (value?: any) => inputs.value.push(value),
onChange: (value?: any) => changes.value.push(value),
onClear: () => clears.value++,
onFocus: (event?: any) => record('focus', event),
onBlur: (event?: any) => record('blur', event),
onKeydown: (event?: any) => record('keydown', event),
onCompositionstart: (event?: any) => record('compositionstart', event),
onCompositionupdate: (event?: any) => record('compositionupdate', event),
onCompositionend: (event?: any) => record('compositionend', event),
onMouseenter: (event?: any) => record('mouseenter', event),
onMouseleave: (event?: any) => record('mouseleave', event)
})
});
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-input-instance' });
app.mount(host.value);
});
(0, vue_3.onBeforeUnmount)(() => {
app?.unmount();
for (const name of (names as any))
host.value?.removeEventListener(name, capture, true);
});
function inspect() {
const instance: any = control.value?.inputRef;
inspection.value = {
ready: !!instance,
inputTag: instance?.input?.tagName ?? null,
textareaTag: instance?.textarea?.tagName ?? null,
refTag: instance?.ref?.tagName ?? null,
refMatchesInput: !!instance?.input && instance.ref === instance.input,
refMatchesTextarea: !!instance?.textarea && instance.ref === instance.textarea,
isComposing: instance?.isComposing,
passwordVisible: instance?.passwordVisible,
textareaStyle: instance?.textareaStyle,
rootInputMembersAbsent: [
'input',
'textarea',
'ref',
'select',
'clear',
'resizeTextarea',
'isComposing',
'passwordVisible',
'textareaStyle'
].every((name?: any) => !(name in (control.value ?? {})))
};
}
async function operate(name?: any) {
control.value?.inputRef?.[name]();
await (0, vue_3.nextTick)();
inspect();
}
async function reset() {
model.value = 'Seed';
await (0, vue_3.nextTick)();
await new Promise((resolve?: any) => setTimeout(resolve, 20));
events.value = [];
inputs.value = [];
updates.value = [];
changes.value = [];
clears.value = 0;
inspect();
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createElementVNode)("div", _hoisted_2, [
_cache[16] || (_cache[16] = (0, vue_2.createElementVNode)("label", { for: "data009-instance-kind" }, "建议实例输入类型", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-instance-kind",
modelValue: kind.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((kind).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'text',
value: 'text'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_2.createTextVNode)("text", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'password',
value: 'password'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_2.createTextVNode)("password", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'textarea',
value: 'textarea'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_2.createTextVNode)("textarea", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: inspect
}, {
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) => (operate('focus')))
}, {
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) => (operate('blur')))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_2.createTextVNode)("实例输入失焦", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[3] || (_cache[3] = ($event?: any) => (operate('select')))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(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) => (operate('clear')))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(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) => (operate('resizeTextarea')))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_2.createTextVNode)("实例调整文本域", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: reset
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(0, vue_2.createTextVNode)("恢复输入实例记录", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_2.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "instance-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_2.createElementVNode)("pre", _hoisted_3, (0, vue_2.toDisplayString)(JSON.stringify({ model: model.value, kind: kind.value, events: events.value, inputs: inputs.value, updates: updates.value, changes: changes.value, clears: clears.value, inspection: inspection.value })), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-f5cc00b1";
},
"OfficialInputContract.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 = { "data-testid": "autocomplete-official-input-contract" };
const _hoisted_2: any = { class: "official-controls" };
const _hoisted_3: any = { "data-testid": "autocomplete-official-input-result" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'OfficialInputContract',
setup(__props?: any) {
const host: any = (0, vue_3.ref)();
const control: any = (0, vue_3.shallowRef)();
const model: any = (0, vue_3.ref)('AB'), password: any = (0, vue_3.ref)('Secret');
const kind: any = (0, vue_3.ref)('text'), icon: any = (0, vue_3.ref)('default'), position: any = (0, vue_3.ref)('inside'), count: any = (0, vue_3.ref)('native');
const inputs: any = (0, vue_3.ref)([]), updates: any = (0, vue_3.ref)([]), clears: any = (0, vue_3.ref)(0);
const suggestions: any = (0, vue_3.ref)([]);
const segmenter: any = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
const countCodepoints: any = (value?: any) => Array.from(value).length;
const countGraphemes: any = (value?: any) => Array.from(segmenter.segment(value)).length;
const Clear: any = () => (0, vue_3.h)('svg', { viewBox: '0 0 16 16', 'data-official-clear-icon': 'custom', 'aria-hidden': 'true' }, [
(0, vue_3.h)('path', {
d: 'M2 3l1-1 5 5 5-5 1 1-5 5 5 5-1 1-5-5-5 5-1-1 5-5z',
fill: 'currentColor'
})
]);
const api: any = async (params?: any, context?: any) => {
context.signal.throwIfAborted();
return [{ id: 7, name: params.text, value: params.text.toLowerCase() }];
};
const factory: any = (0, ui_1.defineAsamOptions)();
const transform: any = (members?: any) => members;
const source: any = (text?: any) => factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'name', value: 'value' }
});
const configuration: any = (0, vue_3.computed)(() => ({
source,
modelValue: model.value,
type: kind.value,
ariaLabel: '官方组合建议输入',
rows: 2,
maxlength: 3,
clearable: true,
showWordLimit: true,
wordLimitPosition: position.value,
...(icon.value === 'custom' ? { clearIcon: Clear } : {}),
...(count.value === 'native'
? {}
: { countGraphemes: count.value === 'codepoints' ? countCodepoints : countGraphemes }),
triggerOnFocus: false,
debounce: 0,
teleported: false
}));
const TypedRemote: any = (ui_1.AsamRemoteAutocomplete);
let app: any;
(0, vue_3.onMounted)(() => {
if (!host.value)
return;
app = (0, vue_3.createApp)({
render: () => (0, vue_3.h)('div', [
(0, vue_3.h)(TypedRemote, {
...configuration.value,
ref: control,
'onUpdate:modelValue': (value?: any) => {
model.value = value;
updates.value.push(value);
},
onInput: (value?: any) => inputs.value.push(value),
onClear: () => clears.value++
}),
(0, vue_3.h)('div', { 'data-testid': 'official-default-password' }, [
(0, vue_3.h)(ui_1.AsamPassword, {
modelValue: password.value,
showPassword: true,
ariaLabel: '官方默认密码输入',
'onUpdate:modelValue': (value?: any) => {
password.value = value;
}
})
]),
(0, vue_3.h)('div', { 'data-testid': 'official-base-password' }, [
(0, vue_3.h)(ui_1.AsamPassword, {
modelValue: password.value,
showPassword: true,
ariaLabel: '官方密码图标输入',
'onUpdate:modelValue': (value?: any) => {
password.value = value;
}
}, {
'password-icon': ({ visible }: any) => (0, vue_3.h)('span', { 'data-testid': 'official-password-icon' }, visible ? '公开' : '隐藏')
})
])
])
});
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-official-input' });
app.mount(host.value);
});
(0, vue_3.onBeforeUnmount)(() => app?.unmount());
async function reset() {
model.value = 'AB';
await (0, vue_3.nextTick)();
inputs.value = [];
updates.value = [];
clears.value = 0;
suggestions.value = [];
}
async function query() {
await control.value?.getData(String(model.value));
suggestions.value = control.value?.suggestions ?? [];
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createElementVNode)("div", _hoisted_2, [
_cache[15] || (_cache[15] = (0, vue_2.createElementVNode)("label", { for: "data009-official-kind" }, "官方组合输入类型", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-official-kind",
modelValue: kind.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((kind).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'text',
value: 'text'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_2.createTextVNode)("text", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'textarea',
value: 'textarea'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_2.createTextVNode)("textarea", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[16] || (_cache[16] = (0, vue_2.createElementVNode)("label", { for: "data009-official-icon" }, "官方清除图标", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-official-icon",
modelValue: icon.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((icon).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'default',
value: 'default'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_2.createTextVNode)("default", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'custom',
value: 'custom'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_2.createTextVNode)("custom", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[17] || (_cache[17] = (0, vue_2.createElementVNode)("label", { for: "data009-official-position" }, "官方计数位置", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-official-position",
modelValue: position.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event?: any) => ((position).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'inside',
value: 'inside'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_2.createTextVNode)("inside", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'outside',
value: 'outside'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_2.createTextVNode)("outside", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[18] || (_cache[18] = (0, vue_2.createElementVNode)("label", { for: "data009-official-count" }, "官方计数方式", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-official-count",
modelValue: count.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event?: any) => ((count).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'native',
value: 'native'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[10] || (_cache[10] = [
(0, vue_2.createTextVNode)("native", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'codepoints',
value: 'codepoints'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_2.createTextVNode)("codepoints", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'graphemes',
value: 'graphemes'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_2.createTextVNode)("graphemes", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: reset
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(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: query
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_2.createTextVNode)("读取官方组合来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_2.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "official-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_2.createElementVNode)("pre", _hoisted_3, (0, vue_2.toDisplayString)(JSON.stringify({
model: model.value,
kind: kind.value,
icon: icon.value,
position: position.value,
count: count.value,
inputs: inputs.value,
updates: updates.value,
clears: clears.value,
suggestions: suggestions.value,
password: password.value
})), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-1315c466";
},
"OfficialLayoutContract.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 = { "data-testid": "autocomplete-official-layout-contract" };
const _hoisted_2: any = { class: "layout-controls" };
const _hoisted_3: any = { "data-testid": "autocomplete-official-layout-result" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'OfficialLayoutContract',
setup(__props?: any) {
const host: any = (0, vue_3.ref)(), control: any = (0, vue_3.shallowRef)();
const model: any = (0, vue_3.ref)('Alpha');
const size: any = (0, vue_3.ref)('omitted');
const iconMode: any = (0, vue_3.ref)('plain'), mixed: any = (0, vue_3.ref)('none'), selected: any = (0, vue_3.ref)('1');
const childChanges: any = (0, vue_3.ref)([]), clicks: any = (0, vue_3.ref)(0);
const inputs: any = (0, vue_3.ref)([]), updates: any = (0, vue_3.ref)([]);
const requests: any = (0, vue_3.ref)([]), suggestions: any = (0, vue_3.ref)([]);
const icon: any = () => (0, vue_3.h)('svg', {
viewBox: '0 0 16 16',
'data-official-layout-icon': iconMode.value,
'aria-hidden': 'true'
}, [(0, vue_3.h)('path', { d: 'M2 2h8v8H2zM10 10l4 4', fill: 'none', stroke: 'currentColor' })]);
const api: any = async (params?: any, context?: any) => {
context.signal.throwIfAborted();
requests.value.push(params.text);
return [{ id: 7, name: params.text, value: params.text.toLowerCase() }];
};
const factory: any = (0, ui_1.defineAsamOptions)();
const transform: any = (items?: any) => items;
const source: any = (text?: any) => factory.api({
api,
transform,
params: { text },
fieldNames: { label: 'name', value: 'value' }
});
const TypedRemote: any = (ui_1.AsamRemoteAutocomplete);
const options: any = [
{ label: 'Restaurant', value: '1' },
{ label: 'Order No.', value: '2' },
{ label: 'Tel', value: '3' }
];
function selectChild() {
return (0, vue_3.h)('div', { 'data-testid': 'official-layout-child-select' }, [
(0, vue_3.h)(ui_1.AsamSelect, {
modelValue: selected.value,
valueMode: 'native',
placeholder: '选择',
style: { width: '115px' },
'onUpdate:modelValue': (value?: any) => {
if (typeof value === 'string') {
selected.value = value;
childChanges.value.push(value);
}
}
}, () => options.map((option?: any) => (0, vue_3.h)(ui_1.AsamOption, { label: option.label, value: option.value })))
]);
}
function buttonChild() {
return (0, vue_3.h)(ui_1.AsamButton, { 'aria-label': '官方附加搜索', icon, onClick: () => clicks.value++ });
}
let app: any;
(0, vue_3.onMounted)(() => {
if (!host.value)
return;
app = (0, vue_3.createApp)({
render: () => (0, vue_3.h)(ui_1.AsamConfigProvider, { size: 'default' }, () => (0, vue_3.h)(TypedRemote, {
source,
key: iconMode.value + ':' + mixed.value,
modelValue: model.value,
ariaLabel: '官方布局建议输入',
triggerOnFocus: false,
debounce: 0,
...(size.value === 'omitted' ? {} : { size: size.value }),
...(iconMode.value === 'prefixIcon' ? { prefixIcon: icon } : {}),
...(iconMode.value === 'suffixIcon' ? { suffixIcon: icon } : {}),
ref: control,
'onUpdate:modelValue': (value?: any) => {
model.value = value;
updates.value.push(value);
},
onInput: (value?: any) => inputs.value.push(value)
}, {
...(iconMode.value === 'prefixSlot' ? { prefix: icon } : {}),
...(iconMode.value === 'suffixSlot' ? { suffix: icon } : {}),
...(mixed.value === 'prependText' ? { prepend: () => 'Http://' } : {}),
...(mixed.value === 'appendText' ? { append: () => '.com' } : {}),
...(mixed.value === 'prependSelect'
? { prepend: selectChild, append: buttonChild }
: {}),
...(mixed.value === 'appendSelect'
? { prepend: buttonChild, append: selectChild }
: {})
}))
});
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-official-layout' });
app.mount(host.value);
});
(0, vue_3.onBeforeUnmount)(() => app?.unmount());
async function query() {
await control.value?.getData(String(model.value));
suggestions.value = control.value?.suggestions ?? [];
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createElementVNode)("div", _hoisted_2, [
_cache[18] || (_cache[18] = (0, vue_2.createElementVNode)("label", { for: "data009-layout-size" }, "官方布局尺寸", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-layout-size",
modelValue: size.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((size).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_2.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'large',
value: 'large'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_2.createTextVNode)("large", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'big',
value: 'big'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_2.createTextVNode)("big", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'small',
value: 'small'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_2.createTextVNode)("small", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[19] || (_cache[19] = (0, vue_2.createElementVNode)("label", { for: "data009-layout-icon" }, "官方布局图标", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-layout-icon",
modelValue: iconMode.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event?: any) => ((iconMode).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'plain',
value: 'plain'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_2.createTextVNode)("plain", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'prefixIcon',
value: 'prefixIcon'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_2.createTextVNode)("prefixIcon", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'suffixIcon',
value: 'suffixIcon'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_2.createTextVNode)("suffixIcon", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'prefixSlot',
value: 'prefixSlot'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[10] || (_cache[10] = [
(0, vue_2.createTextVNode)("prefixSlot", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'suffixSlot',
value: 'suffixSlot'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_2.createTextVNode)("suffixSlot", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[20] || (_cache[20] = (0, vue_2.createElementVNode)("label", { for: "data009-layout-mixed" }, "官方附加内容", -1 /* CACHED */)),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamSelect), {
id: "data009-layout-mixed",
modelValue: mixed.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event?: any) => ((mixed).value = $event))
}, {
default: (0, vue_2.withCtx)(() => [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'none',
value: 'none'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_2.createTextVNode)("none", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'prependText',
value: 'prependText'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(0, vue_2.createTextVNode)("prependText", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'appendText',
value: 'appendText'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_2.createTextVNode)("appendText", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'prependSelect',
value: 'prependSelect'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(0, vue_2.createTextVNode)("prependSelect", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamOption), {
label: 'appendSelect',
value: 'appendSelect'
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[16] || (_cache[16] = [
(0, vue_2.createTextVNode)("appendSelect", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: query
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[17] || (_cache[17] = [
(0, vue_2.createTextVNode)("读取官方布局来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_2.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "layout-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_2.createElementVNode)("pre", _hoisted_3, (0, vue_2.toDisplayString)(JSON.stringify({
model: model.value,
size: size.value,
iconMode: iconMode.value,
mixed: mixed.value,
selected: selected.value,
childChanges: childChanges.value,
clicks: clicks.value,
inputs: inputs.value,
updates: updates.value,
requests: requests.value,
suggestions: suggestions.value
})), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-864665e0";
},
"OfficialSuggestionContract.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 = { "data-testid": "autocomplete-official-suggestion-contract" };
const _hoisted_2: any = { "data-testid": "autocomplete-official-suggestion-result" };
const vue_3: any = require("vue");
const ui_1: any = require("@asam-ui/ui");
exports.default = (0, vue_1.defineComponent)({
__name: 'OfficialSuggestionContract',
setup(__props?: any) {
const names: any = [
'basic-focus',
'basic-input',
'template',
'remote',
'loading-ring',
'loading-dots',
'header',
'footer'
];
const links: any = [
{ value: 'vue', link: 'https://github.com/vuejs/vue' },
{ value: 'element', link: 'https://github.com/ElemeFE/element' },
{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
{ value: 'babel', link: 'https://github.com/babel/babel' }
];
const host: any = (0, vue_3.ref)();
const models: any = (0, vue_3.ref)({
'basic-focus': '',
'basic-input': '',
template: '',
remote: '',
'loading-ring': '',
'loading-dots': '',
header: '',
footer: ''
});
const loadingModel: any = (0, vue_3.ref)('');
const queries: any = (0, vue_3.ref)([]);
const selections: any = (0, vue_3.ref)([]);
const iconClicks: any = (0, vue_3.ref)([]);
const footerClears: any = (0, vue_3.ref)(0);
const pending: any = (0, vue_3.ref)([]);
const footer: any = (0, vue_3.shallowRef)();
const releases: any = new Map();
const factory: any = (0, ui_1.defineAsamOptions)();
const TypedRemote: any = (ui_1.AsamRemoteAutocomplete);
const isLoadingCase: any = (name?: any) => name === 'loading-ring' || name === 'loading-dots';
const model: any = (name?: any) => (isLoadingCase(name) ? loadingModel.value : models.value[name]);
const setModel: any = (name?: any, value?: any) => {
if (isLoadingCase(name))
loadingModel.value = value;
else
models.value[name] = value;
};
const api: any = async (params?: any, context?: any) => {
context.signal.throwIfAborted();
const results: any = links.filter((item?: any) => item.value.toLowerCase().startsWith(params.query.toLowerCase()));
queries.value.push({ ...params, results });
if (isLoadingCase(params.control)) {
pending.value.push(params.control);
try {
await new Promise((resolve?: any, reject?: any) => {
const abort: any = () => reject(context.signal.reason);
context.signal.addEventListener('abort', abort, { once: true });
releases.set(params.control, () => {
context.signal.removeEventListener('abort', abort);
resolve();
});
});
}
finally {
pending.value = pending.value.filter((name?: any) => name !== params.control);
releases.delete(params.control);
}
}
else if (params.control === 'remote' ||
params.control === 'header' ||
params.control === 'footer') {
await new Promise((resolve?: any) => setTimeout(resolve, 60));
}
context.signal.throwIfAborted();
return results;
};
const source: any = (control?: any, query?: any) => factory.api({
api,
params: { control, query },
transform: (rows?: any) => rows,
fieldNames: { label: 'value', value: 'value' }
});
const cases: any = names.map((name?: any) => ({ name, source: (query?: any) => source(name, query) }));
const circle: any = () => (0, vue_3.h)('svg', { class: 'circular', viewBox: '0 0 50 50', 'data-testid': 'official-ring-loader' }, [
(0, vue_3.h)('circle', { class: 'path', cx: 25, cy: 25, r: 20, fill: 'none' })
]);
const dots: any = () => (0, vue_3.h)(ui_1.AsamIcon, { class: 'is-loading', 'data-testid': 'official-dots-loader' }, {
default: () => (0, vue_3.h)('svg', { class: 'circular', viewBox: '0 0 20 20' }, [
(0, vue_3.h)('g', {
class: 'path2 loading-path',
'stroke-width': 0,
style: { animation: 'none', stroke: 'none' }
}, ['dot1', 'dot2', 'dot4', 'dot3'].map((name?: any) => (0, vue_3.h)('circle', { r: 3.375, class: name, rx: 0, ry: 0 })))
])
});
async function clearFooter() {
models.value.footer = '';
footerClears.value++;
await (0, vue_3.nextTick)();
await footer.value?.getData('');
}
let app: any;
(0, vue_3.onMounted)(() => {
if (!host.value)
return;
app = (0, vue_3.createApp)({
render: () => (0, vue_3.h)('div', { class: 'suggestion-grid' }, cases.map(({ name, source: caseSource }: any) => (0, vue_3.h)('article', { 'data-testid': 'official-suggestion-' + name }, [
(0, vue_3.h)('h3', name),
...(isLoadingCase(name)
? [
(0, vue_3.h)(ui_1.AsamButton, {
type: 'default',
nativeType: 'button',
onMousedown: (event?: any) => event.preventDefault(),
onClick: () => releases.get(name)?.()
}, { default: () => '完成官方加载 ' + name })
]
: []),
(0, vue_3.h)(TypedRemote, {
...(name === 'footer' ? { ref: footer } : {}),
modelValue: model(name),
'onUpdate:modelValue': (value?: any) => setModel(name, value),
source: caseSource,
ariaLabel: '官方建议 ' + name,
placeholder: name === 'basic-focus' || name === 'basic-input'
? '请输入内容'
: '输入查询内容',
clearable: name === 'basic-focus' || name === 'basic-input',
teleported: false,
debounce: 0,
...(name === 'basic-input' ? { triggerOnFocus: false } : {}),
...(name === 'template'
? { popperClass: 'data009-official-template-popper' }
: {}),
onSelect: (item?: any) => selections.value.push({ control: name, item })
}, {
...(name === 'template'
? {
suffix: () => (0, vue_3.h)(ui_1.AsamIcon, {
class: 'el-input__icon',
'data-testid': 'official-template-suffix',
onClick: (event?: any) => iconClicks.value.push({
type: event.type,
nativeMouse: event instanceof MouseEvent
})
}, {
default: () => (0, vue_3.h)('svg', { viewBox: '0 0 16 16' }, [
(0, vue_3.h)('path', {
d: 'M2 11l8-8 3 3-8 8H2z',
fill: 'currentColor'
})
])
}),
default: ({ item }: any) => [
(0, vue_3.h)('div', { class: 'value' }, item.value),
(0, vue_3.h)('span', { class: 'link' }, item.raw.link)
]
}
: {}),
...(name === 'loading-ring' ? { loading: circle } : {}),
...(name === 'loading-dots' ? { loading: dots } : {}),
...(name === 'header'
? {
header: () => (0, vue_3.h)('span', { 'data-testid': 'official-header-content' }, '页眉内容')
}
: {}),
...(name === 'footer'
? {
footer: () => (0, vue_3.h)(ui_1.AsamButton, {
type: 'default',
link: true,
size: 'small',
onClick: clearFooter,
'data-testid': 'official-footer-clear'
}, { default: () => '清空' })
}
: {})
})
])))
});
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-official-suggestions' });
app.mount(host.value);
});
(0, vue_3.onBeforeUnmount)(() => {
for (const release of (releases.values() as any))
release();
app?.unmount();
});
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
_cache[0] || (_cache[0] = (0, vue_2.createElementVNode)("p", { class: "example-paragraph" }, "八个独立控件保留官方基础、模板、远程、加载及页眉页脚分支。", -1 /* CACHED */)),
(0, vue_2.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "data009-official-suggestion-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_2.createElementVNode)("pre", _hoisted_2, (0, vue_2.toDisplayString)(JSON.stringify({
models: models.value,
loadingModel: loadingModel.value,
queries: queries.value,
selections: selections.value,
iconClicks: iconClicks.value,
footerClears: footerClears.value,
pending: pending.value
})), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-367d5209";
},
};
const __dependencies: any = {"Demo.vue":{"./SelectContract.vue":"SelectContract.vue","./NativeInputContract.vue":"NativeInputContract.vue","./PopupContract.vue":"PopupContract.vue","./SourceLifecycleContract.vue":"SourceLifecycleContract.vue","./PresentationContract.vue":"PresentationContract.vue","./FormattingContract.vue":"FormattingContract.vue","./TextCapabilityContract.vue":"TextCapabilityContract.vue","./ValidationContract.vue":"ValidationContract.vue","./InputInstanceContract.vue":"InputInstanceContract.vue","./OfficialInputContract.vue":"OfficialInputContract.vue","./OfficialLayoutContract.vue":"OfficialLayoutContract.vue","./OfficialSuggestionContract.vue":"OfficialSuggestionContract.vue","./QueryContract.vue":"QueryContract.vue"},"QueryContract.vue":{},"SelectContract.vue":{},"NativeInputContract.vue":{},"PopupContract.vue":{},"SourceLifecycleContract.vue":{},"PresentationContract.vue":{},"FormattingContract.vue":{},"TextCapabilityContract.vue":{},"ValidationContract.vue":{},"InputInstanceContract.vue":{},"OfficialInputContract.vue":{},"OfficialLayoutContract.vue":{},"OfficialSuggestionContract.vue":{}};
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>
.autocomplete-demo[data-v-019e0dff] {
--asam-layout-control-width: 100%;
display: grid;
gap: var(--asam-space-sm);
}
.actions[data-v-019e0dff] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.panel-caption[data-v-019e0dff] {
margin: var(--asam-space-xs) var(--asam-space-sm);
}
.instance-controls[data-v-019e0dff] {
position: relative;
}
.instance-controls .actions[data-v-019e0dff] {
position: absolute;
bottom: 100%;
right: 0;
z-index: 2;
width: max-content;
max-width: 80vw;
padding: var(--asam-space-sm);
background: var(--el-bg-color);
}
pre[data-v-019e0dff] {
max-height: 32rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
p[data-v-019e0dff]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.query-instance-controls[data-v-1a7c5d52] {
position: relative;
}
.query-instance-controls > div[data-v-1a7c5d52] {
position: absolute;
bottom: 100%;
right: 0;
z-index: 2;
display: grid;
grid-template-columns: repeat(2, auto);
gap: var(--asam-space-xs);
width: max-content;
max-width: 80vw;
padding: var(--asam-space-sm);
background: var(--el-bg-color);
}
p[data-v-1a7c5d52]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.demo-slot-layout[data-v-4d953634] {
display: grid;
gap: var(--asam-space-md);
width: 100%;
min-width: 0;
}
.demo-slot-layout > .el-button[data-v-4d953634] {
justify-self: start;
}
.demo-slot-layout[data-v-4d953634] > :is(p, pre, output) {
margin-block: 0;
}
.demo-slot-actions[data-v-4d953634] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
.demo-slot-actions > .el-button + .el-button[data-v-4d953634] {
margin-left: 0;
}
.popup-input-area[data-v-f820914e] {
width: 260px;
margin-block: 180px;
margin-inline: auto;
}
p[data-v-f820914e]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.source-control-host[data-v-22cbd142] {
width: 300px;
margin-block: 24px;
}
.presentation-controls[data-v-64551059] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.presentation-host[data-v-64551059] {
margin-block: var(--asam-space-md);
width: 300px;
}
pre[data-v-64551059] {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.formatting-controls[data-v-456a698a] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.formatting-host[data-v-456a698a] {
margin-block: var(--asam-space-md);
width: 300px;
}
pre[data-v-456a698a] {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.text-controls[data-v-f4c5b6ec] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.text-host[data-v-f4c5b6ec] {
margin-block: var(--asam-space-md);
width: 300px;
}
pre[data-v-f4c5b6ec] {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.validation-controls[data-v-c700e214] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.validation-host[data-v-c700e214] {
margin-block: var(--asam-space-md);
width: 300px;
}
pre[data-v-c700e214] {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.instance-actions[data-v-f5cc00b1] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.instance-host[data-v-f5cc00b1] {
width: 300px;
margin-block: var(--asam-space-md);
}
pre[data-v-f5cc00b1] {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.official-controls[data-v-1315c466] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.official-host[data-v-1315c466] {
width: 300px;
margin-block: var(--asam-space-md);
}
pre[data-v-1315c466] {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.layout-controls[data-v-864665e0] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.layout-host[data-v-864665e0] {
width: 600px;
max-width: 100%;
margin-block: var(--asam-space-md);
}
pre[data-v-864665e0] {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.data009-official-suggestion-host {
margin-block: var(--asam-space-md);
}
[data-testid='autocomplete-official-suggestion-contract'] pre {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.data009-official-suggestion-host .suggestion-grid {
display: grid;
gap: var(--asam-space-md);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.data009-official-suggestion-host .circular {
display: inline;
height: 30px;
width: 30px;
animation: data009-official-loading-rotate 2s linear infinite;
}
.data009-official-suggestion-host .path {
animation: data009-official-loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: var(--el-color-primary);
stroke-linecap: round;
}
.data009-official-suggestion-host .loading-path .dot1 {
transform: translate(3.75px, 3.75px);
fill: var(--el-color-primary);
animation: data009-official-custom-spin-move 1s infinite linear alternate;
opacity: 0.3;
}
.data009-official-suggestion-host .loading-path .dot2 {
transform: translate(calc(100% - 3.75px), 3.75px);
fill: var(--el-color-primary);
animation: data009-official-custom-spin-move 1s infinite linear alternate;
opacity: 0.3;
animation-delay: 0.4s;
}
.data009-official-suggestion-host .loading-path .dot3 {
transform: translate(3.75px, calc(100% - 3.75px));
fill: var(--el-color-primary);
animation: data009-official-custom-spin-move 1s infinite linear alternate;
opacity: 0.3;
animation-delay: 1.2s;
}
.data009-official-suggestion-host .loading-path .dot4 {
transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
fill: var(--el-color-primary);
animation: data009-official-custom-spin-move 1s infinite linear alternate;
opacity: 0.3;
animation-delay: 0.8s;
}
@keyframes data009-official-loading-rotate {
to {
transform: rotate(360deg);
}
}
@keyframes data009-official-loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
@keyframes data009-official-custom-spin-move {
to {
opacity: 1;
}
}
.data009-official-suggestion-host .data009-official-template-popper li {
line-height: normal;
padding: 7px;
}
.data009-official-suggestion-host .data009-official-template-popper .value {
text-overflow: ellipsis;
overflow: hidden;
}
.data009-official-suggestion-host .data009-official-template-popper .link {
font-size: 12px;
color: var(--asam-color-text-secondary);
}
p[data-v-367d5209]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
<template><StandaloneDemo /></template>
<script setup>
import * as __external0 from "vue";
import * as __external1 from "@asam-ui/ui";
const __external = {"vue": { ...__external0, __esModule: true },
"@asam-ui/ui": { ...__external1, __esModule: true }};
const __modules = {
"Demo.vue": (module, exports, require) => {
"use strict";
var __importDefault = function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "autocomplete-demo" };
const _hoisted_2 = { class: "actions" };
const _hoisted_3 = { class: "actions" };
const _hoisted_4 = { "data-testid": "autocomplete-option" };
const _hoisted_5 = {
class: "example-paragraph",
role: "status"
};
const _hoisted_6 = { class: "example-paragraph" };
const SelectContract_vue_1 = __importDefault(require("./SelectContract.vue"));
const NativeInputContract_vue_1 = __importDefault(require("./NativeInputContract.vue"));
const PopupContract_vue_1 = __importDefault(require("./PopupContract.vue"));
const SourceLifecycleContract_vue_1 = __importDefault(require("./SourceLifecycleContract.vue"));
const PresentationContract_vue_1 = __importDefault(require("./PresentationContract.vue"));
const FormattingContract_vue_1 = __importDefault(require("./FormattingContract.vue"));
const TextCapabilityContract_vue_1 = __importDefault(require("./TextCapabilityContract.vue"));
const ValidationContract_vue_1 = __importDefault(require("./ValidationContract.vue"));
const InputInstanceContract_vue_1 = __importDefault(require("./InputInstanceContract.vue"));
const OfficialInputContract_vue_1 = __importDefault(require("./OfficialInputContract.vue"));
const OfficialLayoutContract_vue_1 = __importDefault(require("./OfficialLayoutContract.vue"));
const OfficialSuggestionContract_vue_1 = __importDefault(require("./OfficialSuggestionContract.vue"));
const vue_2 = require("vue");
const QueryContract_vue_1 = __importDefault(require("./QueryContract.vue"));
const ui_1 = require("@asam-ui/ui");
exports.default = Object.assign({ name: 'AsamRemoteAutocompleteNativeDataDemo' }, {
__name: 'Demo',
setup(__props) {
const showQueryContract = (0, vue_2.ref)(false);
const showSelectContract = (0, vue_2.ref)(false);
const showNativeInputContract = (0, vue_2.ref)(false);
const showPopupContract = (0, vue_2.ref)(false);
const showSourceLifecycleContract = (0, vue_2.ref)(false);
const showPresentationContract = (0, vue_2.ref)(false);
const showFormattingContract = (0, vue_2.ref)(false);
const showTextCapabilityContract = (0, vue_2.ref)(false);
const showValidationContract = (0, vue_2.ref)(false);
const showInputInstanceContract = (0, vue_2.ref)(false);
const showOfficialInputContract = (0, vue_2.ref)(false);
const showOfficialLayoutContract = (0, vue_2.ref)(false);
const showOfficialSuggestionContract = (0, vue_2.ref)(false);
const value = (0, vue_2.ref)('');
const active = (0, vue_2.ref)(true);
const failure = (0, vue_2.ref)(false);
const requests = (0, vue_2.ref)(0);
const control = (0, vue_2.ref)();
const selected = (0, vue_2.ref)();
const instance = (0, vue_2.ref)({});
const message = (0, vue_2.ref)('');
const result = (0, vue_2.ref)('');
const lastKey = (0, vue_2.ref)('');
const methodResult = (0, vue_2.ref)('');
const events = (0, vue_2.ref)([]);
const showArrow = (0, vue_2.ref)(false);
const offset = (0, vue_2.ref)(16);
function recordKey(event) {
lastKey.value = event instanceof KeyboardEvent ? event.key : '';
recordDom('keydown', event);
}
function recordValue(name, value) {
events.value.push({ name, payload: value });
}
function recordDom(name, event) {
events.value.push({
name,
payload: {
type: event.type,
constructor: event.constructor.name,
trusted: event.isTrusted,
key: event instanceof KeyboardEvent ? event.key : undefined,
data: event instanceof CompositionEvent ? event.data : undefined
}
});
}
function recordSelect(option) {
selected.value = option;
events.value.push({ name: 'select', payload: option });
}
function recordError(error) {
message.value = error.message;
events.value.push({ name: 'error', payload: { kind: error.kind, message: error.message } });
}
function recordSuccess(options) {
message.value = '';
events.value.push({ name: 'success', payload: options });
}
const members = [
{ id: 1, label: 'Alpha', value: 'alpha' },
{ id: 2, label: 'Beta', value: 'beta' }
];
const popperOptions = (0, vue_2.computed)(() => ({
modifiers: [{ name: 'offset', options: { offset: [0, offset.value] } }]
}));
const api = async (query, context) => {
requests.value += 1;
await new Promise((done) => setTimeout(done, 180));
context.signal.throwIfAborted();
if (failure.value)
throw new Error('演示接口失败');
return members.filter((member) => member.label.toLowerCase().includes(query.text.toLowerCase()));
};
const factory = (0, ui_1.defineAsamOptions)();
const transform = (response) => response;
function source(text) {
return factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'label', value: 'value' }
});
}
async function reload() {
result.value = (await control.value?.reload({ force: true }))?.status ?? 'cancelled';
}
async function loadAll() {
methodResult.value = 'getData:pending';
await control.value?.getData('');
methodResult.value = 'getData:done';
}
async function selectFirst() {
const first = control.value?.suggestions[0];
if (!first)
return;
await control.value?.handleSelect(first);
methodResult.value = 'handleSelect:done';
}
async function enter() {
await control.value?.handleKeyEnter();
methodResult.value = 'handleKeyEnter:done';
}
function inspect() {
const current = control.value;
instance.value = {
highlightedIndex: current?.highlightedIndex,
activated: current?.activated,
loading: current?.loading,
suggestions: current?.suggestions,
inputReady: !!current?.inputRef,
popperReady: !!current?.popperRef
};
}
function keepHeaderFocus(event) {
if (event.target instanceof HTMLElement && event.target.closest('[role=button]'))
event.preventDefault();
}
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: _cache[0] || (_cache[0] = $event => (showQueryContract.value = !showQueryContract.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[48] || (_cache[48] = [
(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: active.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((active).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[49] || (_cache[49] = [
(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: failure.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((failure).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[50] || (_cache[50] = [
(0, vue_1.createTextVNode)("模拟接口失败", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: reload
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[51] || (_cache[51] = [
(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 => (control.value?.cancel()))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[52] || (_cache[52] = [
(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: inspect
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[53] || (_cache[53] = [
(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 => (showArrow.value = true))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[54] || (_cache[54] = [
(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 => (showArrow.value = false))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[55] || (_cache[55] = [
(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 => (showArrow.value = undefined))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[56] || (_cache[56] = [
(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 => (offset.value = 0))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[57] || (_cache[57] = [
(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 => (offset.value = 16))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[58] || (_cache[58] = [
(0, vue_1.createTextVNode)("恢复额外偏移", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamRemoteAutocomplete), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": [
_cache[24] || (_cache[24] = $event => ((value).value = $event)),
_cache[25] || (_cache[25] = $event => (recordValue('update:modelValue', $event)))
],
source: source,
active: active.value,
"show-arrow": showArrow.value,
"popper-options": popperOptions.value,
debounce: 100,
"loop-navigation": false,
clearable: "",
size: "default",
"aria-label": "搜索成员",
placeholder: "输入 Alpha 或 Beta",
onInput: _cache[26] || (_cache[26] = $event => (recordValue('input', $event))),
onChange: _cache[27] || (_cache[27] = $event => (recordValue('change', $event))),
onSelect: recordSelect,
onClear: _cache[28] || (_cache[28] = $event => (events.value.push({ name: 'clear', payload: null }))),
onFocus: _cache[29] || (_cache[29] = $event => (recordDom('focus', $event))),
onBlur: _cache[30] || (_cache[30] = $event => (recordDom('blur', $event))),
onMouseenter: _cache[31] || (_cache[31] = $event => (recordDom('mouseenter', $event))),
onMouseleave: _cache[32] || (_cache[32] = $event => (recordDom('mouseleave', $event))),
onCompositionstart: _cache[33] || (_cache[33] = $event => (recordDom('compositionstart', $event))),
onCompositionupdate: _cache[34] || (_cache[34] = $event => (recordDom('compositionupdate', $event))),
onCompositionend: _cache[35] || (_cache[35] = $event => (recordDom('compositionend', $event))),
onKeydown: recordKey,
onError: recordError,
onSuccess: recordSuccess
}, {
prefix: (0, vue_1.withCtx)(() => [...(_cache[59] || (_cache[59] = [
(0, vue_1.createElementVNode)("span", { "data-testid": "autocomplete-prefix" }, "找", -1 /* CACHED */)
]))]),
suffix: (0, vue_1.withCtx)(() => [...(_cache[60] || (_cache[60] = [
(0, vue_1.createElementVNode)("span", { "data-testid": "autocomplete-suffix" }, "本地", -1 /* CACHED */)
]))]),
prepend: (0, vue_1.withCtx)(() => [...(_cache[61] || (_cache[61] = [
(0, vue_1.createElementVNode)("span", { "data-testid": "autocomplete-prepend" }, "成员", -1 /* CACHED */)
]))]),
append: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCollapse), {
onMousedown: keepHeaderFocus,
class: "instance-controls",
"data-testid": "autocomplete-append"
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCollapseItem), { name: "auxiliary-content" }, {
title: (0, vue_1.withCtx)(() => [
(0, vue_1.createElementVNode)("span", {
onMousedown: _cache[9] || (_cache[9] = (0, vue_1.withModifiers)(() => { }, ["prevent"]))
}, "实例控制", 32 /* NEED_HYDRATION */)
]),
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createElementVNode)("div", _hoisted_3, [
(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: inspect
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[62] || (_cache[62] = [
(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[11] || (_cache[11] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[12] || (_cache[12] = $event => (control.value?.focus()))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[63] || (_cache[63] = [
(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[13] || (_cache[13] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[14] || (_cache[14] = $event => (control.value?.blur()))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[64] || (_cache[64] = [
(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[15] || (_cache[15] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[16] || (_cache[16] = $event => (control.value?.close()))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[65] || (_cache[65] = [
(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[17] || (_cache[17] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: loadAll
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[66] || (_cache[66] = [
(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[18] || (_cache[18] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[19] || (_cache[19] = $event => (control.value?.highlight(0)))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[67] || (_cache[67] = [
(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[20] || (_cache[20] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[21] || (_cache[21] = $event => (control.value?.highlight(-1)))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[68] || (_cache[68] = [
(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[22] || (_cache[22] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: selectFirst
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[69] || (_cache[69] = [
(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[23] || (_cache[23] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: enter
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[70] || (_cache[70] = [
(0, vue_1.createTextVNode)(" 实例提交 Enter ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
])
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
})
]),
header: (0, vue_1.withCtx)(() => [...(_cache[71] || (_cache[71] = [
(0, vue_1.createElementVNode)("p", {
class: "panel-caption example-paragraph",
"data-testid": "autocomplete-header"
}, "本地异步成员建议", -1 /* CACHED */)
]))]),
footer: (0, vue_1.withCtx)(() => [...(_cache[72] || (_cache[72] = [
(0, vue_1.createElementVNode)("p", {
class: "panel-caption example-paragraph",
"data-testid": "autocomplete-footer"
}, " 匹配建议保留 raw;未匹配 Enter 只有 value ", -1 /* CACHED */)
]))]),
loading: (0, vue_1.withCtx)(() => [...(_cache[73] || (_cache[73] = [
(0, vue_1.createElementVNode)("p", {
class: "panel-caption example-paragraph",
"data-testid": "autocomplete-loading"
}, "正在加载成员…", -1 /* CACHED */)
]))]),
default: (0, vue_1.withCtx)(({ item }) => [
(0, vue_1.createElementVNode)("span", _hoisted_4, (0, vue_1.toDisplayString)(item.label) + " · " + (0, vue_1.toDisplayString)(item.raw.id), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue", "active", "show-arrow", "popper-options"]),
(0, vue_1.createElementVNode)("p", _hoisted_5, (0, vue_1.toDisplayString)(result.value) + " " + (0, vue_1.toDisplayString)(message.value), 1 /* TEXT */),
(0, vue_1.createElementVNode)("p", _hoisted_6, "模型:" + (0, vue_1.toDisplayString)(value.value) + ";最近按键:" + (0, vue_1.toDisplayString)(lastKey.value) + ";请求次数:" + (0, vue_1.toDisplayString)(requests.value), 1 /* TEXT */),
(0, vue_1.createElementVNode)("pre", null, (0, vue_1.toDisplayString)(JSON.stringify({ selected: selected.value, instance: instance.value, methodResult: methodResult.value, events: events.value }, null, 2)), 1 /* TEXT */),
(showQueryContract.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(QueryContract_vue_1.default, { key: 0 }))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[36] || (_cache[36] = $event => (showSelectContract.value = !showSelectContract.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[74] || (_cache[74] = [
(0, vue_1.createTextVNode)(" 展示选择载荷契约 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showSelectContract.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(SelectContract_vue_1.default, { key: 1 }))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[37] || (_cache[37] = $event => (showNativeInputContract.value = !showNativeInputContract.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[75] || (_cache[75] = [
(0, vue_1.createTextVNode)(" 展示原生输入协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showNativeInputContract.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(NativeInputContract_vue_1.default, { key: 2 }))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[38] || (_cache[38] = $event => (showPopupContract.value = !showPopupContract.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[76] || (_cache[76] = [
(0, vue_1.createTextVNode)(" 展示建议浮层协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showPopupContract.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(PopupContract_vue_1.default, { key: 3 }))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[39] || (_cache[39] = $event => (showSourceLifecycleContract.value = !showSourceLifecycleContract.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[77] || (_cache[77] = [
(0, vue_1.createTextVNode)(" 展示来源生命周期 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showSourceLifecycleContract.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(SourceLifecycleContract_vue_1.default, { key: 4 }))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[40] || (_cache[40] = $event => (showPresentationContract.value = !showPresentationContract.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[78] || (_cache[78] = [
(0, vue_1.createTextVNode)(" 展示建议外观协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showPresentationContract.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(PresentationContract_vue_1.default, { key: 5 }))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[41] || (_cache[41] = $event => (showFormattingContract.value = !showFormattingContract.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[79] || (_cache[79] = [
(0, vue_1.createTextVNode)(" 展示建议格式协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showFormattingContract.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(FormattingContract_vue_1.default, { key: 6 }))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[42] || (_cache[42] = $event => (showTextCapabilityContract.value = !showTextCapabilityContract.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[80] || (_cache[80] = [
(0, vue_1.createTextVNode)(" 展示建议文本能力 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showTextCapabilityContract.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(TextCapabilityContract_vue_1.default, { key: 7 }))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[43] || (_cache[43] = $event => (showValidationContract.value = !showValidationContract.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[81] || (_cache[81] = [
(0, vue_1.createTextVNode)(" 展示建议验证协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showValidationContract.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(ValidationContract_vue_1.default, { key: 8 }))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[44] || (_cache[44] = $event => (showInputInstanceContract.value = !showInputInstanceContract.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[82] || (_cache[82] = [
(0, vue_1.createTextVNode)(" 展示建议输入实例协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showInputInstanceContract.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(InputInstanceContract_vue_1.default, { key: 9 }))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[45] || (_cache[45] = $event => (showOfficialInputContract.value = !showOfficialInputContract.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[83] || (_cache[83] = [
(0, vue_1.createTextVNode)(" 展示官方输入组合协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showOfficialInputContract.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(OfficialInputContract_vue_1.default, { key: 10 }))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[46] || (_cache[46] = $event => (showOfficialLayoutContract.value = !showOfficialLayoutContract.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[84] || (_cache[84] = [
(0, vue_1.createTextVNode)(" 展示官方输入布局协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showOfficialLayoutContract.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(OfficialLayoutContract_vue_1.default, { key: 11 }))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[47] || (_cache[47] = $event => (showOfficialSuggestionContract.value = !showOfficialSuggestionContract.value))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[85] || (_cache[85] = [
(0, vue_1.createTextVNode)(" 展示官方建议分支协议 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(showOfficialSuggestionContract.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)(OfficialSuggestionContract_vue_1.default, { key: 12 }))
: (0, vue_1.createCommentVNode)("v-if", true)
]));
};
}
});
exports.default.__scopeId = "data-v-a45835d0";
},
"QueryContract.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { "data-testid": "autocomplete-query-contract" };
const _hoisted_2 = { "data-testid": "query-item" };
const _hoisted_3 = { "data-testid": "query-contract-state" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'QueryContract',
setup(__props) {
const members = [
{ id: 1, label: 'Alpha', value: 'alpha' },
{ id: 2, label: 'Beta', value: 'beta' },
{ id: 3, label: '禁用', value: 'disabled', disabled: true },
{ id: 4, label: 'Delta', value: 'delta' }
];
const control = (0, vue_2.ref)();
const model = (0, vue_2.ref)('');
const mounted = (0, vue_2.ref)(true);
const detachedReferences = (0, vue_2.ref)();
const limit = (0, vue_2.ref)();
const trigger = (0, vue_2.ref)();
const highlightFirst = (0, vue_2.ref)();
const loop = (0, vue_2.ref)();
const unmatched = (0, vue_2.ref)();
const hideLoading = (0, vue_2.ref)();
const debounce = (0, vue_2.ref)();
const hold = (0, vue_2.ref)(false);
const pendingCount = (0, vue_2.ref)(0);
const calls = (0, vue_2.ref)([]);
const selected = (0, vue_2.ref)([]);
const methodResult = (0, vue_2.ref)('');
const guardErrors = (0, vue_2.ref)([]);
const pending = new Set();
function release() {
for (const done of pending)
done();
pending.clear();
pendingCount.value = 0;
}
const api = async (query, context) => {
calls.value.push(query.text);
if (hold.value) {
await new Promise((done) => {
pending.add(done);
pendingCount.value = pending.size;
});
}
context.signal.throwIfAborted();
return members.filter((member) => member.label.toLowerCase().includes(query.text.toLowerCase()));
};
const factory = (0, ui_1.defineAsamOptions)();
const source = (text) => factory.api({
api,
params: { text },
transform: (response) => response,
fieldNames: { label: 'label', value: 'value', disabled: 'disabled' }
});
async function load() {
methodResult.value = 'getData:pending';
await control.value?.getData('');
methodResult.value = 'getData:done';
}
async function enter() {
methodResult.value = 'enter:pending';
await control.value?.handleKeyEnter();
methodResult.value = 'enter:done';
}
async function invalidLimits() {
control.value?.close();
methodResult.value = 'guard:pending';
for (const invalid of [0, -1, 1.5, NaN, Infinity]) {
limit.value = invalid;
await (0, vue_2.nextTick)();
try {
await control.value?.getData('');
}
catch (error) {
guardErrors.value.push({
limit: String(invalid),
message: error instanceof Error ? error.message : String(error)
});
}
}
limit.value = undefined;
await (0, vue_2.nextTick)();
await control.value?.getData('');
control.value?.close();
methodResult.value = 'guard:done';
}
async function unmountInput() {
const saved = control.value;
mounted.value = false;
await (0, vue_2.nextTick)();
detachedReferences.value = {
controlPresent: !!control.value,
inputReady: !!saved?.inputRef,
popperReady: !!saved?.popperRef
};
}
const snapshot = (0, vue_2.computed)(() => ({
mounted: mounted.value,
detachedReferences: detachedReferences.value,
model: model.value,
calls: calls.value,
selected: selected.value,
pending: pendingCount.value,
methodResult: methodResult.value,
guardErrors: guardErrors.value,
index: control.value?.highlightedIndex,
loading: control.value?.loading,
activated: control.value?.activated,
suggestions: control.value?.suggestions,
inputReady: !!control.value?.inputRef,
popperReady: !!control.value?.popperRef
}));
(0, vue_2.onBeforeUnmount)(() => {
control.value?.cancel();
release();
});
const limitControl = (0, vue_2.computed)({
get: () => limit.value ?? '__asam_example_unconfigured__',
set: (value) => {
limit.value = value === '__asam_example_unconfigured__' ? undefined : value;
}
});
const triggerControl = (0, vue_2.computed)({
get: () => trigger.value ?? '__asam_example_unconfigured__',
set: (value) => {
trigger.value = value === '__asam_example_unconfigured__' ? undefined : value;
}
});
const highlightFirstControl = (0, vue_2.computed)({
get: () => highlightFirst.value ?? '__asam_example_unconfigured__',
set: (value) => {
highlightFirst.value = value === '__asam_example_unconfigured__' ? undefined : value;
}
});
const loopControl = (0, vue_2.computed)({
get: () => loop.value ?? '__asam_example_unconfigured__',
set: (value) => {
loop.value = value === '__asam_example_unconfigured__' ? undefined : value;
}
});
const unmatchedControl = (0, vue_2.computed)({
get: () => unmatched.value ?? '__asam_example_unconfigured__',
set: (value) => {
unmatched.value = value === '__asam_example_unconfigured__' ? undefined : value;
}
});
const hideLoadingControl = (0, vue_2.computed)({
get: () => hideLoading.value ?? '__asam_example_unconfigured__',
set: (value) => {
hideLoading.value = value === '__asam_example_unconfigured__' ? undefined : value;
}
});
const debounceControl = (0, vue_2.computed)({
get: () => debounce.value ?? '__asam_example_unconfigured__',
set: (value) => {
debounce.value = value === '__asam_example_unconfigured__' ? undefined : value;
}
});
function keepHeaderFocus(event) {
if (event.target instanceof HTMLElement && event.target.closest('[role=button]'))
event.preventDefault();
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
_cache[66] || (_cache[66] = (0, vue_1.createElementVNode)("h3", null, "建议查询与键盘设置", -1 /* CACHED */)),
(0, vue_1.createElementVNode)("div", null, [
(0, vue_1.createElementVNode)("label", null, [
_cache[28] || (_cache[28] = (0, vue_1.createElementVNode)("span", null, "建议数量", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
modelValue: limitControl.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((limitControl).value = $event)),
"aria-label": "建议数量"
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "__asam_example_unconfigured__",
label: '原默认'
}, {
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.AsamOption), {
value: 1,
label: '一项'
}, {
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.AsamOption), {
value: 2,
label: '两项'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[27] || (_cache[27] = [
(0, vue_1.createTextVNode)("两项", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_1.createElementVNode)("label", null, [
_cache[32] || (_cache[32] = (0, vue_1.createElementVNode)("span", null, "聚焦查询", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
modelValue: triggerControl.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((triggerControl).value = $event)),
"aria-label": "聚焦查询"
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "__asam_example_unconfigured__",
label: '原默认'
}, {
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.AsamOption), {
value: true,
label: '启用'
}, {
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.AsamOption), {
value: false,
label: '关闭'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[31] || (_cache[31] = [
(0, vue_1.createTextVNode)("关闭", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_1.createElementVNode)("label", null, [
_cache[36] || (_cache[36] = (0, vue_1.createElementVNode)("span", null, "自动高亮首项", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
modelValue: highlightFirstControl.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((highlightFirstControl).value = $event)),
"aria-label": "自动高亮首项"
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "__asam_example_unconfigured__",
label: '原默认'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[33] || (_cache[33] = [
(0, vue_1.createTextVNode)("原默认", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: true,
label: '启用'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[34] || (_cache[34] = [
(0, vue_1.createTextVNode)("启用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: false,
label: '关闭'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[35] || (_cache[35] = [
(0, vue_1.createTextVNode)("关闭", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_1.createElementVNode)("label", null, [
_cache[40] || (_cache[40] = (0, vue_1.createElementVNode)("span", null, "循环导航", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
modelValue: loopControl.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = $event => ((loopControl).value = $event)),
"aria-label": "循环导航"
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "__asam_example_unconfigured__",
label: '原默认'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[37] || (_cache[37] = [
(0, vue_1.createTextVNode)("原默认", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: true,
label: '启用'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[38] || (_cache[38] = [
(0, vue_1.createTextVNode)("启用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: false,
label: '关闭'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[39] || (_cache[39] = [
(0, vue_1.createTextVNode)("关闭", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_1.createElementVNode)("label", null, [
_cache[44] || (_cache[44] = (0, vue_1.createElementVNode)("span", null, "未匹配时选择", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
modelValue: unmatchedControl.value,
"onUpdate:modelValue": _cache[4] || (_cache[4] = $event => ((unmatchedControl).value = $event)),
"aria-label": "未匹配时选择"
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "__asam_example_unconfigured__",
label: '原默认'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[41] || (_cache[41] = [
(0, vue_1.createTextVNode)("原默认", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: true,
label: '启用'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[42] || (_cache[42] = [
(0, vue_1.createTextVNode)("启用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: false,
label: '关闭'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[43] || (_cache[43] = [
(0, vue_1.createTextVNode)("关闭", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_1.createElementVNode)("label", null, [
_cache[48] || (_cache[48] = (0, vue_1.createElementVNode)("span", null, "隐藏加载内容", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
modelValue: hideLoadingControl.value,
"onUpdate:modelValue": _cache[5] || (_cache[5] = $event => ((hideLoadingControl).value = $event)),
"aria-label": "隐藏加载内容"
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "__asam_example_unconfigured__",
label: '原默认'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[45] || (_cache[45] = [
(0, vue_1.createTextVNode)("原默认", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: true,
label: '启用'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[46] || (_cache[46] = [
(0, vue_1.createTextVNode)("启用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: false,
label: '关闭'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[47] || (_cache[47] = [
(0, vue_1.createTextVNode)("关闭", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_1.createElementVNode)("label", null, [
_cache[52] || (_cache[52] = (0, vue_1.createElementVNode)("span", null, "查询防抖", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
modelValue: debounceControl.value,
"onUpdate:modelValue": _cache[6] || (_cache[6] = $event => ((debounceControl).value = $event)),
"aria-label": "查询防抖"
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "__asam_example_unconfigured__",
label: '原默认'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[49] || (_cache[49] = [
(0, vue_1.createTextVNode)("原默认", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: 0,
label: '立即'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[50] || (_cache[50] = [
(0, vue_1.createTextVNode)("立即", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: 180,
label: '180ms'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[51] || (_cache[51] = [
(0, vue_1.createTextVNode)("180ms", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(0, vue_1.createElementVNode)("label", null, [
_cache[53] || (_cache[53] = (0, vue_1.createElementVNode)("span", null, "持有本地请求", -1 /* CACHED */)),
(0, vue_1.createCommentVNode)(" prettier-ignore "),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
modelValue: hold.value,
"onUpdate:modelValue": _cache[7] || (_cache[7] = $event => ((hold).value = $event))
}, null, 8 /* PROPS */, ["modelValue"])
])
]),
(!mounted.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamButton), {
key: 0,
type: "default",
"native-type": "button",
onClick: _cache[8] || (_cache[8] = $event => (mounted.value = true))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[54] || (_cache[54] = [
(0, vue_1.createTextVNode)("恢复协议输入", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}))
: (0, vue_1.createCommentVNode)("v-if", true),
(mounted.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamRemoteAutocomplete), (0, vue_1.mergeProps)({
key: 1,
ref_key: "control",
ref: control,
modelValue: model.value,
"onUpdate:modelValue": _cache[23] || (_cache[23] = $event => ((model).value = $event)),
source: source
}, limit.value === undefined ? {} : { maxSuggestions: limit.value }, {
"trigger-on-focus": trigger.value,
"highlight-first-item": highlightFirst.value,
"loop-navigation": loop.value,
"select-when-unmatched": unmatched.value,
"hide-loading": hideLoading.value,
debounce: debounce.value,
teleported: false,
placement: "bottom-start",
"popper-options": { modifiers: [{ name: 'flip', enabled: false }] },
"aria-label": "建议查询协议",
onSelect: _cache[24] || (_cache[24] = $event => (selected.value.push($event)))
}), {
append: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCollapse), {
onMousedown: keepHeaderFocus,
class: "query-instance-controls"
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCollapseItem), { name: "auxiliary-content" }, {
title: (0, vue_1.withCtx)(() => [
(0, vue_1.createElementVNode)("span", {
onMousedown: _cache[9] || (_cache[9] = (0, vue_1.withModifiers)(() => { }, ["prevent"]))
}, "协议实例控制", 32 /* NEED_HYDRATION */)
]),
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createElementVNode)("div", null, [
(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?.focus()))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[55] || (_cache[55] = [
(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[12] || (_cache[12] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[13] || (_cache[13] = $event => (control.value?.blur()))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[56] || (_cache[56] = [
(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[14] || (_cache[14] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[15] || (_cache[15] = $event => (control.value?.close()))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[57] || (_cache[57] = [
(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[16] || (_cache[16] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: load
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[58] || (_cache[58] = [
(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[17] || (_cache[17] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[18] || (_cache[18] = $event => (control.value?.highlight(-1)))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[59] || (_cache[59] = [
(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[19] || (_cache[19] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: _cache[20] || (_cache[20] = $event => (control.value?.highlight(0)))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[60] || (_cache[60] = [
(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[21] || (_cache[21] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: enter
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[61] || (_cache[61] = [
(0, vue_1.createTextVNode)(" 协议提交 Enter ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: release
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[62] || (_cache[62] = [
(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: invalidLimits
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[63] || (_cache[63] = [
(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[22] || (_cache[22] = (0, vue_1.withModifiers)(() => { }, ["prevent"])),
onClick: unmountInput
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[64] || (_cache[64] = [
(0, vue_1.createTextVNode)(" 停用协议输入 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
])
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
})
]),
default: (0, vue_1.withCtx)(({ item }) => [
(0, vue_1.createElementVNode)("span", _hoisted_2, (0, vue_1.toDisplayString)(item.label) + " / " + (0, vue_1.toDisplayString)(item.raw.id), 1 /* TEXT */)
]),
loading: (0, vue_1.withCtx)(() => [...(_cache[65] || (_cache[65] = [
(0, vue_1.createElementVNode)("p", {
class: "example-paragraph",
"data-testid": "query-contract-loading"
}, "本地等待中", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["modelValue", "trigger-on-focus", "highlight-first-item", "loop-navigation", "select-when-unmatched", "hide-loading", "debounce"]))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createElementVNode)("pre", _hoisted_3, (0, vue_1.toDisplayString)(JSON.stringify(snapshot.value, null, 2)), 1 /* TEXT */)
]));
};
}
};
exports.default.__scopeId = "data-v-ccbc690d";
},
"SelectContract.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { class: "demo-slot-layout" };
const _hoisted_2 = { class: "demo-slot-actions" };
const _hoisted_3 = { "data-testid": "select-union-result" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'SelectContract',
setup(__props) {
const member = { id: 7, name: 'Alpha', value: 'alpha' };
const option = { label: 'Alpha', value: 'alpha', raw: member };
const native = { code: 7, caption: 'Alpha', value: 'alpha' };
const factory = (0, ui_1.defineAsamOptions)();
const remoteSource = (query) => factory.api({
api: async () => [member],
params: { query },
transform: (response) => response,
fieldNames: { label: 'name', value: 'value' }
});
const mode = (0, vue_2.ref)('static');
const mounted = (0, vue_2.ref)(false);
const busy = (0, vue_2.ref)(false);
const model = (0, vue_2.ref)('');
const policy = (0, vue_2.ref)();
const control = (0, vue_2.shallowRef)();
const selected = (0, vue_2.shallowRef)([]);
const remoteOptions = (0, vue_2.shallowRef)([]);
const observations = (0, vue_2.ref)([]);
const fetchSuggestions = (0, vue_2.computed)(() => {
if (mode.value === 'array')
return [native];
if (mode.value === 'sync')
return () => [native];
if (mode.value === 'callback')
return (_query, callback) => callback([native]);
if (mode.value === 'promise')
return async () => [native];
return [];
});
function recordSelection(item) {
selected.value = [...selected.value, item];
}
async function mount(next, value = '') {
mounted.value = false;
await (0, vue_2.nextTick)();
mode.value = next;
model.value = value;
mounted.value = true;
await (0, vue_2.nextTick)();
}
async function runMatched() {
busy.value = true;
observations.value = [];
for (const next of ['static', 'array', 'sync', 'callback', 'promise', 'remote']) {
await mount(next);
await control.value?.getData('Alpha');
const suggestion = control.value?.suggestions[0];
if (!suggestion) {
observations.value.push({ phase: next, missingSuggestion: true });
continue;
}
await control.value?.handleSelect(suggestion);
const item = selected.value.at(-1);
observations.value.push({
phase: next,
sameSuggestionObject: item === suggestion,
sameOriginalObject: item &&
(0, vue_2.toRaw)(item) ===
(next === 'remote'
? (0, vue_2.toRaw)(remoteOptions.value[0])
: next === 'static'
? option
: native),
completeMatchedPayload: item &&
('raw' in item
? item.raw.id === 7 &&
item.raw.name === 'Alpha' &&
item.raw.value === 'alpha' &&
item.label === 'Alpha' &&
(0, vue_2.toRaw)(item.raw) ===
(next === 'remote' ? (0, vue_2.toRaw)(remoteOptions.value[0]?.raw) : member)
: 'code' in item && item.code === 7 && item.caption === 'Alpha'),
value: item?.value,
suggestionsStillComplete: control.value?.suggestions.every((item) => 'raw' in item || 'code' in item)
});
}
busy.value = false;
}
async function runUnmatched() {
busy.value = true;
observations.value = [];
for (const value of ['Unmatched', 42]) {
for (const nextPolicy of [undefined, false, true]) {
policy.value = nextPolicy;
await mount('empty', value);
await control.value?.getData('missing');
const before = selected.value.length;
await control.value?.handleKeyEnter();
observations.value.push({
phase: 'instance-unmatched',
model: value,
policy: nextPolicy ?? 'undefined',
added: selected.value.length - before,
item: selected.value.length > before ? selected.value.at(-1) : null,
suggestionCount: control.value?.suggestions.length
});
}
}
busy.value = false;
}
async function prepareKeyboard() {
policy.value = true;
await mount('empty', 'Keyboard unmatched');
await control.value?.getData('missing');
control.value?.focus();
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamCollapse), { "data-testid": "select-union-contract" }, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCollapseItem), { name: "auxiliary-content" }, {
title: (0, vue_1.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_1.createElementVNode)("span", null, "匹配建议与未匹配 Enter", -1 /* CACHED */)
]))]),
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createElementVNode)("div", _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",
disabled: busy.value,
onClick: runMatched
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(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",
disabled: busy.value,
onClick: runUnmatched
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_1.createTextVNode)("验证实例未匹配 Enter", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: prepareKeyboard
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_1.createTextVNode)("准备实际键盘未匹配 Enter", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(mounted.value && mode.value !== 'remote')
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamAutocomplete), (0, vue_1.mergeProps)({
key: mode.value,
ref_key: "control",
ref: control,
modelValue: model.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((model).value = $event)),
"value-key": mode.value === 'static' ? 'value' : 'caption'
}, {
...(mode.value === 'static' ? { options: [option] } : { fetchSuggestions: fetchSuggestions.value }),
...(policy.value === undefined ? {} : { selectWhenUnmatched: policy.value })
}, {
debounce: 0,
teleported: false,
"aria-label": "选择载荷契约",
onSelect: recordSelection
}), {
default: (0, vue_1.withCtx)(({ item }) => [
(0, vue_1.createElementVNode)("span", null, (0, vue_1.toDisplayString)('raw' in item ? item.raw.id : item.code), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["modelValue", "value-key"]))
: (mounted.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamRemoteAutocomplete), {
key: 1,
ref_key: "control",
ref: control,
modelValue: model.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((model).value = $event)),
source: remoteSource,
debounce: 0,
teleported: false,
"aria-label": "选择载荷契约",
onSelect: recordSelection,
onSuccess: _cache[2] || (_cache[2] = $event => (remoteOptions.value = $event))
}, null, 8 /* PROPS */, ["modelValue"]))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createElementVNode)("pre", _hoisted_3, (0, vue_1.toDisplayString)(JSON.stringify({ busy: busy.value, observations: observations.value, selected: selected.value })), 1 /* TEXT */)
])
]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}));
};
}
};
exports.default.__scopeId = "data-v-beb62381";
},
"NativeInputContract.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { "data-testid": "autocomplete-native-input-contract" };
const _hoisted_2 = { class: "actions" };
const _hoisted_3 = { "data-testid": "native-input-result" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'NativeInputContract',
setup(__props) {
const configurations = {
explicit: {
id: 'data009-native-input',
ariaLabel: '原生输入契约',
tabindex: 3,
form: 'data009-input-owner',
name: 'native-query',
autocomplete: 'on',
inputmode: 'search',
placeholder: 'Input contract',
minlength: 2,
maxlength: 8,
min: 2,
max: 10,
step: 2,
autofocus: true,
rows: 4,
resize: 'none'
},
omitted: {}
};
const mode = (0, vue_2.ref)('explicit');
const type = (0, vue_2.ref)('text');
const model = (0, vue_2.ref)('seed');
const readonly = (0, vue_2.ref)(false);
const disabled = (0, vue_2.ref)(false);
const mounted = (0, vue_2.ref)(true);
const inputs = (0, vue_2.ref)([]);
const updates = (0, vue_2.ref)([]);
const queries = (0, vue_2.ref)([]);
const configuration = (0, vue_2.computed)(() => configurations[mode.value]);
const factory = (0, ui_1.defineAsamOptions)();
const api = async (query, context) => {
context.signal.throwIfAborted();
queries.value.push(query.text);
return [{ id: 7, label: query.text, value: query.text }];
};
const source = (text) => factory.api({
api,
params: { text },
transform: (items) => items,
fieldNames: { label: 'label', value: 'value' }
});
async function remount() {
mounted.value = false;
await (0, vue_2.nextTick)();
mounted.value = true;
}
async function mountNumber() {
mounted.value = false;
await (0, vue_2.nextTick)();
model.value = 4;
type.value = 'number';
mounted.value = true;
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createElementVNode)("form", {
id: "data009-input-owner",
onSubmit: _cache[0] || (_cache[0] = (0, vue_1.withModifiers)(() => { }, ["prevent"]))
}, null, 32 /* NEED_HYDRATION */),
(0, vue_1.createElementVNode)("div", _hoisted_2, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[1] || (_cache[1] = $event => (mode.value = 'explicit'))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_1.createTextVNode)("设置完整输入属性", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[2] || (_cache[2] = $event => (mode.value = 'omitted'))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(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 => (model.value = 42))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(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 => (model.value = 'seed'))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_1.createTextVNode)("写入字符串模型", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: remount
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(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: mountNumber
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[16] || (_cache[16] = [
(0, vue_1.createTextVNode)("全新挂载数字输入", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
_cache[23] || (_cache[23] = (0, vue_1.createElementVNode)("label", { for: "data009-native-input-type" }, "输入类型", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-native-input-type",
modelValue: type.value,
"onUpdate:modelValue": _cache[5] || (_cache[5] = $event => ((type).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'text',
value: 'text'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[17] || (_cache[17] = [
(0, vue_1.createTextVNode)("text", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'password',
value: 'password'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[18] || (_cache[18] = [
(0, vue_1.createTextVNode)("password", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'number',
value: 'number'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[19] || (_cache[19] = [
(0, vue_1.createTextVNode)("number", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'textarea',
value: 'textarea'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[20] || (_cache[20] = [
(0, vue_1.createTextVNode)("textarea", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createCommentVNode)(" prettier-ignore "),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
modelValue: readonly.value,
"onUpdate:modelValue": _cache[6] || (_cache[6] = $event => ((readonly).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[21] || (_cache[21] = [
(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: disabled.value,
"onUpdate:modelValue": _cache[7] || (_cache[7] = $event => ((disabled).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[22] || (_cache[22] = [
(0, vue_1.createTextVNode)("协议禁用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"])
]),
(mounted.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamRemoteAutocomplete), (0, vue_1.mergeProps)({
key: 0,
modelValue: model.value,
"onUpdate:modelValue": _cache[8] || (_cache[8] = $event => ((model).value = $event))
}, configuration.value, {
source: source,
type: type.value,
readonly: readonly.value,
disabled: disabled.value,
debounce: 0,
"trigger-on-focus": false,
teleported: false,
onInput: _cache[9] || (_cache[9] = $event => (inputs.value.push($event))),
"onUpdate:modelValue": _cache[10] || (_cache[10] = $event => (updates.value.push($event)))
}), null, 16 /* FULL_PROPS */, ["modelValue", "type", "readonly", "disabled"]))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createElementVNode)("pre", _hoisted_3, (0, vue_1.toDisplayString)(JSON.stringify({
model: model.value,
mode: mode.value,
type: type.value,
readonly: readonly.value,
disabled: disabled.value,
mounted: mounted.value,
inputs: inputs.value,
updates: updates.value,
queries: queries.value
})), 1 /* TEXT */)
]));
};
}
};
},
"PopupContract.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { "data-testid": "autocomplete-popup-case" };
const _hoisted_2 = { class: "popup-input-area" };
const _hoisted_3 = { class: "example-paragraph" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'PopupContract',
setup(__props) {
const scenarios = [
{ value: 'default', label: '省略配置' },
...['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'].map((value) => ({
value,
label: value
})),
{ value: 'style-object', label: '自定义类与对象样式' },
{ value: 'style-string', label: '字符串样式' },
{ value: 'style-array', label: '组合样式' },
{ value: 'local', label: '就地显示,忽略附加目标' },
{ value: 'selector', label: '传送到指定选择器' },
{ value: 'element', label: '传送到实际元素' },
{ value: 'fit', label: '固定为输入宽度' },
{ value: 'min', label: '输入宽度作为最小宽度' },
{ value: 'role', label: '自定义输入角色' }
];
const scenario = (0, vue_2.ref)('default');
const liveRole = (0, vue_2.ref)('searchbox');
const host = (0, vue_2.ref)();
const value = (0, vue_2.ref)('');
const mounted = (0, vue_2.ref)(true);
const generation = (0, vue_2.ref)(0);
const control = (0, vue_2.ref)();
const member = {
id: 7,
value: 'alpha',
name: 'Alpha member with a deliberately long suggestion label for popup width comparison'
};
const factory = (0, ui_1.defineAsamOptions)();
const source = (text) => factory.api({
api: async (_params, context) => {
context.signal.throwIfAborted();
return [member];
},
params: { text },
transform: (items) => items,
fieldNames: { label: 'name', value: 'value' }
});
const configuration = (0, vue_2.computed)(() => {
if (['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'].includes(scenario.value))
return {
placement: scenario.value
};
if (scenario.value === 'style-object')
return {
popperClass: 'data009-popup-custom',
popperStyle: { backgroundColor: 'rgb(11, 22, 33)', borderWidth: '3px' }
};
if (scenario.value === 'style-string')
return { popperStyle: 'background-color: rgb(22, 33, 44); border-width: 4px;' };
if (scenario.value === 'style-array')
return { popperStyle: [{ backgroundColor: 'rgb(33, 44, 55)' }, { borderWidth: '5px' }] };
if (scenario.value === 'local')
return { teleported: false, appendTo: '#autocomplete-popup-host' };
if (scenario.value === 'selector')
return { teleported: true, appendTo: '#autocomplete-popup-host' };
if (scenario.value === 'element')
return { teleported: true, appendTo: host.value };
if (scenario.value === 'fit')
return { fitInputWidth: true };
if (scenario.value === 'min')
return { fitInputWidth: false };
if (scenario.value === 'role')
return { containerRole: liveRole.value };
return {};
});
async function open() {
liveRole.value = 'searchbox';
control.value?.close();
mounted.value = false;
await (0, vue_2.nextTick)();
value.value = '';
generation.value++;
mounted.value = true;
await (0, vue_2.nextTick)();
control.value?.focus();
await control.value?.getData('');
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
_cache[6] || (_cache[6] = (0, vue_1.createElementVNode)("label", { for: "autocomplete-popup-scenario" }, "建议浮层配置", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "autocomplete-popup-scenario",
modelValue: scenario.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((scenario).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)(vue_1.Fragment, null, (0, vue_1.renderList)(scenarios, (item) => {
return (0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
key: item.value,
value: item.value,
label: item.label
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createTextVNode)((0, vue_1.toDisplayString)(item.label), 1 /* TEXT */)
]),
_: 2 /* DYNAMIC */
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ["value", "label"]);
}), 64 /* STABLE_FRAGMENT */))
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: open
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_1.createTextVNode)("打开配置后的建议", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(scenario.value === 'role')
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamButton), {
key: 0,
type: "default",
"native-type": "button",
onClick: _cache[1] || (_cache[1] = $event => (liveRole.value = 'group'))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_1.createTextVNode)(" 切换已挂载输入角色 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createElementVNode)("div", {
id: "autocomplete-popup-host",
ref_key: "host",
ref: host,
"data-testid": "autocomplete-popup-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_1.createElementVNode)("div", _hoisted_2, [
(mounted.value)
? ((0, vue_1.openBlock)(), (0, vue_1.createBlock)((0, vue_1.unref)(ui_1.AsamRemoteAutocomplete), (0, vue_1.mergeProps)({
key: generation.value,
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((value).value = $event)),
source: source,
debounce: 0
}, configuration.value, { "aria-label": "浮层协议成员" }), {
header: (0, vue_1.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_1.createElementVNode)("span", { "data-testid": "autocomplete-popup-header" }, "配置后的建议", -1 /* CACHED */)
]))]),
default: (0, vue_1.withCtx)(({ item }) => [
(0, vue_1.createElementVNode)("span", null, (0, vue_1.toDisplayString)(item.label) + " · " + (0, vue_1.toDisplayString)(item.raw.id), 1 /* TEXT */)
]),
_: 1 /* STABLE */
}, 16 /* FULL_PROPS */, ["modelValue"]))
: (0, vue_1.createCommentVNode)("v-if", true)
]),
(0, vue_1.createElementVNode)("p", _hoisted_3, "当前配置:" + (0, vue_1.toDisplayString)(scenario.value) + ";模型:" + (0, vue_1.toDisplayString)(value.value), 1 /* TEXT */)
]));
};
}
};
exports.default.__scopeId = "data-v-d326c415";
},
"SourceLifecycleContract.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { "data-testid": "autocomplete-source-lifecycle-case" };
const _hoisted_2 = { "data-testid": "autocomplete-source-lifecycle-result" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'SourceLifecycleContract',
setup(__props) {
const kind = (0, vue_2.ref)('api');
const activeMode = (0, vue_2.ref)('omitted');
const active = (0, vue_2.computed)(() => activeMode.value === 'omitted' ? undefined : activeMode.value === 'true');
const draft = (0, vue_2.ref)('Alpha');
const model = (0, vue_2.ref)('retained-model');
const host = (0, vue_2.ref)();
const control = (0, vue_2.shallowRef)();
const calls = (0, vue_2.ref)([]);
const results = (0, vue_2.ref)([]);
const successes = (0, vue_2.ref)([]);
const errors = (0, vue_2.ref)([]);
const hold = (0, vue_2.ref)(false);
const failure = (0, vue_2.ref)(false);
const deferred = [];
const pendingCount = (0, vue_2.ref)(0);
const mounted = (0, vue_2.ref)(false);
const lastAction = (0, vue_2.ref)('unloaded');
let app;
let savedControl;
const factory = (0, ui_1.defineAsamOptions)();
const fields = { label: 'name', value: 'value' };
const cache = { ttlMs: 60000 };
function members(text) {
return [{ id: 7, name: text, value: text.toLowerCase() }];
}
async function load(call, context) {
context.signal.throwIfAborted();
calls.value.push(call);
const recorded = calls.value.at(-1);
context.signal.addEventListener('abort', () => {
recorded.aborted = true;
}, { once: true });
if (hold.value)
return new Promise((resolve, reject) => {
deferred.push({ resolve, reject, call: recorded });
pendingCount.value = deferred.length;
});
if (failure.value)
throw new Error('source lifecycle API failure');
return members(call.text);
}
const api = (params, context) => load({ kind: 'api', text: params.text, requestId: context.requestId, aborted: false }, context);
const transformApi = (items) => items;
function isMember(value) {
return (typeof value === 'object' &&
value !== null &&
'id' in value &&
typeof value.id === 'number' &&
'name' in value &&
typeof value.name === 'string' &&
'value' in value &&
typeof value.value === 'string');
}
function transformRequest(response) {
if (!Array.isArray(response) || !response.every(isMember))
throw new Error('invalid member response');
return response;
}
const provider = {
request: async (config, context) => {
const text = config.params?.text;
if (typeof text !== 'string')
throw new Error('query must reach the real request parameters');
return load({
kind: 'request',
text,
requestId: context.requestId,
aborted: false,
url: config.url,
...(config.method === undefined ? {} : { method: config.method })
}, context);
}
};
const source = (text) => kind.value === 'api'
? factory.api({ api, params: { text }, transform: transformApi, fieldNames: fields, cache })
: factory.request({
request: { url: '/data009/autocomplete-members', params: { text } },
transform: transformRequest,
fieldNames: fields,
cache
});
const TypedRemote = ui_1.AsamRemoteAutocomplete;
const snapshot = (0, vue_2.computed)(() => ({
kind: kind.value,
active: active.value ?? 'omitted',
mounted: mounted.value,
detachedSuggestions: !mounted.value ? (savedControl?.suggestions ?? []) : undefined,
draft: draft.value,
model: model.value,
calls: calls.value,
pending: pendingCount.value,
loading: control.value?.loading ?? false,
suggestions: control.value?.suggestions ?? [],
lastAction: lastAction.value,
results: results.value,
successes: successes.value,
errors: errors.value
}));
async function mountControl() {
detach();
await (0, vue_2.nextTick)();
if (!host.value)
return;
app = (0, vue_2.createApp)({
render: () => (0, vue_2.h)(TypedRemote, {
ref: control,
modelValue: model.value,
source,
...(active.value === undefined ? {} : { active: active.value }),
debounce: 0,
triggerOnFocus: false,
ariaLabel: '来源生命周期成员',
'onUpdate:modelValue': (value) => {
model.value = value;
},
onSuccess: (items) => {
successes.value.push(items);
},
onError: (error) => {
errors.value.push(error);
}
})
});
(0, ui_1.provideAsamData)(app, provider, { scope: 'data009-autocomplete-source-lifecycle' });
app.mount(host.value);
mounted.value = true;
lastAction.value = 'mounted';
}
function detach() {
if (control.value)
savedControl = control.value;
app?.unmount();
app = undefined;
control.value = undefined;
mounted.value = false;
lastAction.value = 'unmounted';
}
async function getData() {
lastAction.value = 'query-pending';
await control.value?.getData(draft.value);
lastAction.value = 'query-settled';
}
async function reload(force) {
lastAction.value = 'reload-pending';
const result = await control.value?.reload(force === undefined ? undefined : { force });
results.value.push(result ?? { status: 'detached' });
lastAction.value = 'reload-settled';
}
async function reloadDetached() {
const result = await savedControl?.reload({ force: true });
results.value.push(result ?? { status: 'missing-saved-control' });
}
async function selectFirst() {
const item = control.value?.suggestions[0];
if (item)
await control.value?.handleSelect(item);
}
function release(reject) {
const next = deferred.shift();
pendingCount.value = deferred.length;
if (!next)
return;
if (reject)
next.reject(new Error('held source lifecycle failure'));
else
next.resolve(members(next.call.text));
}
(0, vue_2.onMounted)(mountControl);
(0, vue_2.onBeforeUnmount)(detach);
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
_cache[35] || (_cache[35] = (0, vue_1.createElementVNode)("label", { for: "autocomplete-source-kind" }, "来源类型", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "autocomplete-source-kind",
modelValue: kind.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((kind).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "api",
label: 'API 参数与返回值'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_1.createTextVNode)("API 参数与返回值", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "request",
label: 'URL、参数与 provider'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(0, vue_1.createTextVNode)("URL、参数与 provider", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[36] || (_cache[36] = (0, vue_1.createElementVNode)("label", { for: "autocomplete-source-active" }, "请求开关", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "autocomplete-source-active",
modelValue: activeMode.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((activeMode).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "omitted",
label: '省略'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[16] || (_cache[16] = [
(0, vue_1.createTextVNode)("省略", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
value: "true",
label: '启用'
}, {
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.AsamOption), {
value: "false",
label: '停用'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[18] || (_cache[18] = [
(0, vue_1.createTextVNode)("停用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[37] || (_cache[37] = (0, vue_1.createElementVNode)("label", { for: "autocomplete-source-query" }, "请求查询", -1 /* CACHED */)),
(0, vue_1.createCommentVNode)(" prettier-ignore "),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamInput), {
id: "autocomplete-source-query",
modelValue: draft.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((draft).value = $event))
}, null, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: getData
}, {
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: _cache[3] || (_cache[3] = $event => (reload()))
}, {
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: _cache[4] || (_cache[4] = $event => (reload(false)))
}, {
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[5] || (_cache[5] = $event => (reload(true)))
}, {
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[6] || (_cache[6] = $event => (control.value?.cancel()))
}, {
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: selectFirst
}, {
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[7] || (_cache[7] = $event => (hold.value = true))
}, {
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[8] || (_cache[8] = $event => (hold.value = false))
}, {
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[9] || (_cache[9] = $event => (failure.value = true))
}, {
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[10] || (_cache[10] = $event => (failure.value = false))
}, {
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[11] || (_cache[11] = $event => (release(false)))
}, {
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[12] || (_cache[12] = $event => (release(true)))
}, {
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: mountControl
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[31] || (_cache[31] = [
(0, vue_1.createTextVNode)("重新挂载来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: detach
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[32] || (_cache[32] = [
(0, vue_1.createTextVNode)("卸载来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: reloadDetached
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[33] || (_cache[33] = [
(0, vue_1.createTextVNode)("读取卸载后的重载结果", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[13] || (_cache[13] = $event => ((0, vue_1.unref)(savedControl)?.cancel()))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[34] || (_cache[34] = [
(0, vue_1.createTextVNode)("取消卸载后的来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "source-control-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_1.createElementVNode)("pre", _hoisted_2, (0, vue_1.toDisplayString)(JSON.stringify(snapshot.value, null, 2)), 1 /* TEXT */)
]));
};
}
};
exports.default.__scopeId = "data-v-a1ac4370";
},
"PresentationContract.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { "data-testid": "autocomplete-presentation-contract" };
const _hoisted_2 = { class: "presentation-controls" };
const _hoisted_3 = { "data-testid": "autocomplete-presentation-result" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'PresentationContract',
setup(__props) {
const host = (0, vue_2.ref)();
const control = (0, vue_2.shallowRef)();
const model = (0, vue_2.ref)('Alpha');
const size = (0, vue_2.ref)('omitted');
const providerSize = (0, vue_2.ref)('big');
const clearable = (0, vue_2.ref)('omitted');
const icons = (0, vue_2.ref)('omitted');
const styleMode = (0, vue_2.ref)('omitted');
const readonly = (0, vue_2.ref)(false), disabled = (0, vue_2.ref)(false);
const inputs = (0, vue_2.ref)([]), updates = (0, vue_2.ref)([]);
const clears = (0, vue_2.ref)(0), requests = (0, vue_2.ref)([]);
const suggestions = (0, vue_2.ref)([]);
const icon = (name, path) => () => (0, vue_2.h)('svg', { viewBox: '0 0 16 16', 'data-presentation-icon': name, 'aria-hidden': 'true' }, [
(0, vue_2.h)('path', { d: path, fill: 'currentColor' })
]);
const Prefix = icon('Data009Prefix', 'M2 2h6v6H2z');
const Suffix = icon('Data009Suffix', 'M8 8h6v6H8z');
const Clear = icon('Data009Clear', 'M2 3l1-1 5 5 5-5 1 1-5 5 5 5-1 1-5-5-5 5-1-1 5-5z');
const api = async (params, context) => {
context.signal.throwIfAborted();
requests.value.push(params.text);
return [{ id: 7, name: params.text, value: params.text.toLowerCase() }];
};
const factory = (0, ui_1.defineAsamOptions)();
const transform = (items) => items;
const source = (text) => factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'name', value: 'value' }
});
const configuration = (0, vue_2.computed)(() => ({
source,
modelValue: model.value,
readonly: readonly.value,
disabled: disabled.value,
triggerOnFocus: false,
debounce: 0,
ariaLabel: '建议外观输入',
...(size.value === 'omitted' ? {} : { size: size.value }),
...(clearable.value === 'omitted' ? {} : { clearable: clearable.value === 'true' }),
...(icons.value === 'omitted'
? {}
: {
prefixIcon: icons.value === 'component' ? Prefix : 'Data009Prefix',
suffixIcon: icons.value === 'component' ? Suffix : 'Data009Suffix',
clearIcon: icons.value === 'component' ? Clear : 'Data009Clear'
}),
...(styleMode.value === 'omitted'
? {}
: {
inputStyle: styleMode.value === 'object'
? { color: '#064e3b', backgroundColor: '#f0fdf4', paddingLeft: '18px' }
: styleMode.value === 'string'
? 'color: rgb(120, 53, 15); letter-spacing: 2px;'
: [{ color: '#1e3a8a' }, { fontWeight: '600', paddingRight: '22px' }]
})
}));
const TypedRemote = ui_1.AsamRemoteAutocomplete;
let app;
(0, vue_2.onMounted)(() => {
if (!host.value)
return;
app = (0, vue_2.createApp)({
render: () => (0, vue_2.h)(ui_1.AsamConfigProvider, { size: providerSize.value }, () => (0, vue_2.h)(TypedRemote, {
...configuration.value,
ref: control,
'onUpdate:modelValue': (value) => {
model.value = value;
updates.value.push(value);
},
onInput: (value) => inputs.value.push(value),
onClear: () => clears.value++
}))
});
app.component('Data009Prefix', Prefix);
app.component('Data009Suffix', Suffix);
app.component('Data009Clear', Clear);
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-presentation' });
app.mount(host.value);
});
(0, vue_2.onBeforeUnmount)(() => app?.unmount());
async function query() {
await control.value?.getData(String(model.value));
suggestions.value = control.value?.suggestions ?? [];
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createElementVNode)("div", _hoisted_2, [
_cache[31] || (_cache[31] = (0, vue_1.createElementVNode)("label", { for: "data009-presentation-size" }, "输入尺寸", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-presentation-size",
modelValue: size.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((size).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_1.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'large',
value: 'large'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_1.createTextVNode)("large", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'big',
value: 'big'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[10] || (_cache[10] = [
(0, vue_1.createTextVNode)("big", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'default',
value: 'default'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_1.createTextVNode)("default", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'small',
value: 'small'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_1.createTextVNode)("small", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[32] || (_cache[32] = (0, vue_1.createElementVNode)("label", { for: "data009-presentation-providerSize" }, "提供者尺寸", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-presentation-providerSize",
modelValue: providerSize.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((providerSize).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'large',
value: 'large'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(0, vue_1.createTextVNode)("large", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'big',
value: 'big'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_1.createTextVNode)("big", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'default',
value: 'default'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(0, vue_1.createTextVNode)("default", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'small',
value: 'small'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[16] || (_cache[16] = [
(0, vue_1.createTextVNode)("small", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[33] || (_cache[33] = (0, vue_1.createElementVNode)("label", { for: "data009-presentation-clearable" }, "清除开关", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-presentation-clearable",
modelValue: clearable.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((clearable).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[17] || (_cache[17] = [
(0, vue_1.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'true',
value: 'true'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[18] || (_cache[18] = [
(0, vue_1.createTextVNode)("true", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'false',
value: 'false'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[19] || (_cache[19] = [
(0, vue_1.createTextVNode)("false", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[34] || (_cache[34] = (0, vue_1.createElementVNode)("label", { for: "data009-presentation-icons" }, "图标形式", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-presentation-icons",
modelValue: icons.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = $event => ((icons).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[20] || (_cache[20] = [
(0, vue_1.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'component',
value: 'component'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[21] || (_cache[21] = [
(0, vue_1.createTextVNode)("component", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'string',
value: 'string'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[22] || (_cache[22] = [
(0, vue_1.createTextVNode)("string", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[35] || (_cache[35] = (0, vue_1.createElementVNode)("label", { for: "data009-presentation-styleMode" }, "输入样式", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-presentation-styleMode",
modelValue: styleMode.value,
"onUpdate:modelValue": _cache[4] || (_cache[4] = $event => ((styleMode).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[23] || (_cache[23] = [
(0, vue_1.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'object',
value: 'object'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[24] || (_cache[24] = [
(0, vue_1.createTextVNode)("object", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'string',
value: 'string'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[25] || (_cache[25] = [
(0, vue_1.createTextVNode)("string", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'array',
value: 'array'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[26] || (_cache[26] = [
(0, vue_1.createTextVNode)("array", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createCommentVNode)(" prettier-ignore "),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
modelValue: readonly.value,
"onUpdate:modelValue": _cache[5] || (_cache[5] = $event => ((readonly).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[27] || (_cache[27] = [
(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: disabled.value,
"onUpdate:modelValue": _cache[6] || (_cache[6] = $event => ((disabled).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[28] || (_cache[28] = [
(0, vue_1.createTextVNode)("外观禁用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[7] || (_cache[7] = $event => (model.value = 'Alpha'))
}, {
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: query
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[30] || (_cache[30] = [
(0, vue_1.createTextVNode)("读取外观来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_1.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "presentation-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_1.createElementVNode)("pre", _hoisted_3, (0, vue_1.toDisplayString)(JSON.stringify({
model: model.value,
inputs: inputs.value,
updates: updates.value,
clears: clears.value,
requests: requests.value,
suggestions: suggestions.value,
size: size.value,
providerSize: providerSize.value,
clearable: clearable.value,
icons: icons.value,
styleMode: styleMode.value,
readonly: readonly.value,
disabled: disabled.value
})), 1 /* TEXT */)
]));
};
}
};
exports.default.__scopeId = "data-v-48d164cc";
},
"FormattingContract.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { "data-testid": "autocomplete-formatting-contract" };
const _hoisted_2 = { class: "formatting-controls" };
const _hoisted_3 = { "data-testid": "autocomplete-formatting-result" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'FormattingContract',
setup(__props) {
const host = (0, vue_2.ref)();
const control = (0, vue_2.shallowRef)();
const model = (0, vue_2.ref)('1234');
const mode = (0, vue_2.ref)('omitted');
const modifier = (0, vue_2.ref)('omitted');
const inputs = (0, vue_2.ref)([]), updates = (0, vue_2.ref)([]), changes = (0, vue_2.ref)([]), requests = (0, vue_2.ref)([]);
const suggestions = (0, vue_2.ref)([]);
const formatter = (value) => '¤' + String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
const parser = (value) => value.replace(/[¤,]/g, '');
const api = async (params, context) => {
context.signal.throwIfAborted();
requests.value.push(params.text);
return [{ id: 7, name: params.text, value: params.text.toLowerCase() }];
};
const factory = (0, ui_1.defineAsamOptions)();
const transform = (items) => items;
const source = (text) => factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'name', value: 'value' }
});
const modifiers = (0, vue_2.computed)(() => {
if (modifier.value === 'omitted')
return undefined;
return {
...(modifier.value.includes('trim') ? { trim: true } : {}),
...(modifier.value.includes('number') ? { number: true } : {}),
...(modifier.value.includes('lazy') ? { lazy: true } : {})
};
});
const configuration = (0, vue_2.computed)(() => ({
source,
modelValue: model.value,
triggerOnFocus: false,
debounce: 0,
ariaLabel: '建议格式输入',
...(mode.value === 'omitted' ? {} : { formatter }),
...(mode.value === 'pair' ? { parser } : {}),
...(modifier.value === 'omitted' ? {} : { modelModifiers: modifiers.value })
}));
const TypedRemote = ui_1.AsamRemoteAutocomplete;
let app;
(0, vue_2.onMounted)(() => {
if (!host.value)
return;
app = (0, vue_2.createApp)({
render: () => (0, vue_2.h)(TypedRemote, {
...configuration.value,
ref: control,
'onUpdate:modelValue': (value) => {
model.value = value;
updates.value.push(value);
},
onInput: (value) => inputs.value.push(value),
onChange: (value) => changes.value.push(value)
})
});
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-formatting' });
app.mount(host.value);
});
(0, vue_2.onBeforeUnmount)(() => app?.unmount());
function reset(value) {
model.value = value;
inputs.value = [];
updates.value = [];
changes.value = [];
}
async function query() {
await control.value?.getData(String(model.value));
suggestions.value = control.value?.suggestions ?? [];
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createElementVNode)("div", _hoisted_2, [
_cache[17] || (_cache[17] = (0, vue_1.createElementVNode)("label", { for: "data009-format-mode" }, "格式协议", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-format-mode",
modelValue: mode.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((mode).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_1.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'formatter',
value: 'formatter'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_1.createTextVNode)("formatter", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'pair',
value: 'pair'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_1.createTextVNode)("pair", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[18] || (_cache[18] = (0, vue_1.createElementVNode)("label", { for: "data009-format-modifier" }, "模型修饰符", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-format-modifier",
modelValue: modifier.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((modifier).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_1.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'empty',
value: 'empty'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_1.createTextVNode)("empty", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'trim',
value: 'trim'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_1.createTextVNode)("trim", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'number',
value: 'number'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[10] || (_cache[10] = [
(0, vue_1.createTextVNode)("number", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'trim-number',
value: 'trim-number'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_1.createTextVNode)("trim-number", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'lazy',
value: 'lazy'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_1.createTextVNode)("lazy", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'lazy-trim-number',
value: 'lazy-trim-number'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(0, vue_1.createTextVNode)("lazy-trim-number", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[2] || (_cache[2] = $event => (reset('1234')))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_1.createTextVNode)("恢复格式数值", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[3] || (_cache[3] = $event => (reset('Base')))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(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: query
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[16] || (_cache[16] = [
(0, vue_1.createTextVNode)("读取格式模型来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_1.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "formatting-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_1.createElementVNode)("pre", _hoisted_3, (0, vue_1.toDisplayString)(JSON.stringify({
model: model.value,
inputs: inputs.value,
updates: updates.value,
changes: changes.value,
requests: requests.value,
suggestions: suggestions.value,
mode: mode.value,
modifier: modifier.value
})), 1 /* TEXT */)
]));
};
}
};
exports.default.__scopeId = "data-v-2f9ce16f";
},
"TextCapabilityContract.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { "data-testid": "autocomplete-text-capability-contract" };
const _hoisted_2 = { class: "text-controls" };
const _hoisted_3 = { "data-testid": "autocomplete-text-capability-result" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'TextCapabilityContract',
setup(__props) {
const host = (0, vue_2.ref)();
const control = (0, vue_2.shallowRef)();
const model = (0, vue_2.ref)('AB');
const kind = (0, vue_2.ref)('text');
const limit = (0, vue_2.ref)('omitted');
const position = (0, vue_2.ref)('omitted');
const graphemes = (0, vue_2.ref)('omitted');
const autosize = (0, vue_2.ref)('omitted');
const password = (0, vue_2.ref)('omitted');
const readonly = (0, vue_2.ref)(false), disabled = (0, vue_2.ref)(false);
const inputs = (0, vue_2.ref)([]), updates = (0, vue_2.ref)([]), changes = (0, vue_2.ref)([]), requests = (0, vue_2.ref)([]);
const suggestions = (0, vue_2.ref)([]);
const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
const countGraphemes = (value) => Array.from(segmenter.segment(value)).length;
const api = async (params, context) => {
context.signal.throwIfAborted();
requests.value.push(params.text);
return [{ id: 7, name: params.text, value: params.text.toLowerCase() }];
};
const factory = (0, ui_1.defineAsamOptions)();
const transform = (items) => items;
const source = (text) => factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'name', value: 'value' }
});
const configuration = (0, vue_2.computed)(() => ({
source,
modelValue: model.value,
type: kind.value,
rows: 2,
maxlength: kind.value === 'text' ? 3 : undefined,
readonly: readonly.value,
disabled: disabled.value,
triggerOnFocus: false,
debounce: 0,
ariaLabel: '建议文本能力输入',
...(limit.value === 'omitted' ? {} : { showWordLimit: limit.value === 'true' }),
...(position.value === 'omitted' ? {} : { wordLimitPosition: position.value }),
...(graphemes.value === 'omitted' ? {} : { countGraphemes }),
...(password.value === 'omitted' ? {} : { showPassword: password.value === 'true' }),
...(autosize.value === 'omitted'
? {}
: {
autosize: autosize.value === 'bounded'
? { minRows: 2, maxRows: 4 }
: autosize.value === 'true'
})
}));
const TypedRemote = ui_1.AsamRemoteAutocomplete;
let app;
(0, vue_2.onMounted)(() => {
if (!host.value)
return;
app = (0, vue_2.createApp)({
render: () => (0, vue_2.h)(TypedRemote, {
...configuration.value,
ref: control,
'onUpdate:modelValue': (value) => {
model.value = value;
updates.value.push(value);
},
onInput: (value) => inputs.value.push(value),
onChange: (value) => changes.value.push(value)
})
});
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-text-capabilities' });
app.mount(host.value);
});
(0, vue_2.onBeforeUnmount)(() => app?.unmount());
async function query() {
await control.value?.getData(String(model.value));
suggestions.value = control.value?.suggestions ?? [];
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createElementVNode)("div", _hoisted_2, [
_cache[30] || (_cache[30] = (0, vue_1.createElementVNode)("label", { for: "data009-text-kind" }, "计数输入类型", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-text-kind",
modelValue: kind.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((kind).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'text',
value: 'text'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_1.createTextVNode)("text", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'textarea',
value: 'textarea'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[10] || (_cache[10] = [
(0, vue_1.createTextVNode)("textarea", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[31] || (_cache[31] = (0, vue_1.createElementVNode)("label", { for: "data009-text-limit" }, "显示字数", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-text-limit",
modelValue: limit.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((limit).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_1.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'true',
value: 'true'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_1.createTextVNode)("true", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'false',
value: 'false'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(0, vue_1.createTextVNode)("false", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[32] || (_cache[32] = (0, vue_1.createElementVNode)("label", { for: "data009-text-position" }, "字数位置", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-text-position",
modelValue: position.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((position).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_1.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'inside',
value: 'inside'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(0, vue_1.createTextVNode)("inside", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'outside',
value: 'outside'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[16] || (_cache[16] = [
(0, vue_1.createTextVNode)("outside", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[33] || (_cache[33] = (0, vue_1.createElementVNode)("label", { for: "data009-text-graphemes" }, "字素计数", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-text-graphemes",
modelValue: graphemes.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = $event => ((graphemes).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[17] || (_cache[17] = [
(0, vue_1.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'segmenter',
value: 'segmenter'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[18] || (_cache[18] = [
(0, vue_1.createTextVNode)("segmenter", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[34] || (_cache[34] = (0, vue_1.createElementVNode)("label", { for: "data009-text-autosize" }, "文本域自适应", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-text-autosize",
modelValue: autosize.value,
"onUpdate:modelValue": _cache[4] || (_cache[4] = $event => ((autosize).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[19] || (_cache[19] = [
(0, vue_1.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'false',
value: 'false'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[20] || (_cache[20] = [
(0, vue_1.createTextVNode)("false", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'true',
value: 'true'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[21] || (_cache[21] = [
(0, vue_1.createTextVNode)("true", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'bounded',
value: 'bounded'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[22] || (_cache[22] = [
(0, vue_1.createTextVNode)("bounded", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[35] || (_cache[35] = (0, vue_1.createElementVNode)("label", { for: "data009-text-password" }, "密码显示开关", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-text-password",
modelValue: password.value,
"onUpdate:modelValue": _cache[5] || (_cache[5] = $event => ((password).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[23] || (_cache[23] = [
(0, vue_1.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'true',
value: 'true'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[24] || (_cache[24] = [
(0, vue_1.createTextVNode)("true", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'false',
value: 'false'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[25] || (_cache[25] = [
(0, vue_1.createTextVNode)("false", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createCommentVNode)(" prettier-ignore "),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamCheckboxItem), {
modelValue: readonly.value,
"onUpdate:modelValue": _cache[6] || (_cache[6] = $event => ((readonly).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[26] || (_cache[26] = [
(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: disabled.value,
"onUpdate:modelValue": _cache[7] || (_cache[7] = $event => ((disabled).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[27] || (_cache[27] = [
(0, vue_1.createTextVNode)("计数禁用", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[8] || (_cache[8] = $event => (model.value = 'AB'))
}, {
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: query
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[29] || (_cache[29] = [
(0, vue_1.createTextVNode)("读取计数模型来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_1.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "text-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_1.createElementVNode)("pre", _hoisted_3, (0, vue_1.toDisplayString)(JSON.stringify({
model: model.value,
inputs: inputs.value,
updates: updates.value,
changes: changes.value,
requests: requests.value,
suggestions: suggestions.value,
kind: kind.value,
limit: limit.value,
position: position.value,
graphemes: graphemes.value,
autosize: autosize.value,
password: password.value,
readonly: readonly.value,
disabled: disabled.value
})), 1 /* TEXT */)
]));
};
}
};
exports.default.__scopeId = "data-v-71b4f7b1";
},
"ValidationContract.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { "data-testid": "autocomplete-validation-contract" };
const _hoisted_2 = { class: "validation-controls" };
const _hoisted_3 = { "data-testid": "autocomplete-validation-result" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'ValidationContract',
setup(__props) {
const host = (0, vue_2.ref)();
const item = (0, vue_2.shallowRef)();
const fields = (0, vue_2.reactive)({ value: 'Seed' });
const mode = (0, vue_2.ref)('omitted');
const lazy = (0, vue_2.ref)('omitted');
const inputs = (0, vue_2.ref)([]), updates = (0, vue_2.ref)([]), changes = (0, vue_2.ref)([]), validations = (0, vue_2.ref)([]);
const validateEvents = (0, vue_2.ref)([]);
const rule = {
trigger: ['change', 'blur'],
validator: (_rule, value, callback) => {
validations.value.push(String(value));
callback(String(value).includes('!') ? new Error('建议值禁止感叹号') : undefined);
}
};
const api = async (params, context) => {
context.signal.throwIfAborted();
return [{ id: 7, name: params.text, value: params.text.toLowerCase() }];
};
const factory = (0, ui_1.defineAsamOptions)();
const transform = (items) => items;
const source = (text) => factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'name', value: 'value' }
});
const configuration = (0, vue_2.computed)(() => ({
source,
modelValue: fields.value,
triggerOnFocus: false,
debounce: 0,
ariaLabel: '建议验证输入',
...(mode.value === 'omitted' ? {} : { validateEvent: mode.value === 'true' }),
...(lazy.value === 'omitted' ? {} : { modelModifiers: { lazy: true } })
}));
const TypedRemote = ui_1.AsamRemoteAutocomplete;
let app;
(0, vue_2.onMounted)(() => {
if (!host.value)
return;
app = (0, vue_2.createApp)({
render: () => (0, vue_2.h)(ui_1.AsamBaseForm, {
model: fields,
onValidate: (property, valid, message) => validateEvents.value.push({ property, valid, message })
}, () => (0, vue_2.h)(ui_1.AsamFormItem, { prop: 'value', rules: rule, ref: item }, () => (0, vue_2.h)(TypedRemote, {
...configuration.value,
'onUpdate:modelValue': (value) => {
fields.value = String(value);
updates.value.push(value);
},
onInput: (value) => inputs.value.push(value),
onChange: (value) => changes.value.push(value)
})))
});
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-validation' });
app.mount(host.value);
});
(0, vue_2.onBeforeUnmount)(() => app?.unmount());
async function reset() {
fields.value = 'Seed';
await (0, vue_2.nextTick)();
await (0, vue_2.nextTick)();
// Finish the queued blur validation before starting this measurement window.
await new Promise((resolve) => setTimeout(resolve, 20));
await (0, vue_2.nextTick)();
item.value?.clearValidate();
validations.value = [];
validateEvents.value = [];
inputs.value = [];
updates.value = [];
changes.value = [];
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createElementVNode)("div", _hoisted_2, [
_cache[8] || (_cache[8] = (0, vue_1.createElementVNode)("label", { for: "data009-validation-mode" }, "建议验证事件", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-validation-mode",
modelValue: mode.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((mode).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_1.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'true',
value: 'true'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_1.createTextVNode)("true", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'false',
value: 'false'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_1.createTextVNode)("false", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[9] || (_cache[9] = (0, vue_1.createElementVNode)("label", { for: "data009-validation-lazy" }, "建议验证提交", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-validation-lazy",
modelValue: lazy.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((lazy).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_1.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'lazy',
value: 'lazy'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_1.createTextVNode)("lazy", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: reset
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_1.createTextVNode)("恢复建议验证", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_1.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "validation-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_1.createElementVNode)("pre", _hoisted_3, (0, vue_1.toDisplayString)(JSON.stringify({
model: fields.value,
mode: mode.value,
lazy: lazy.value,
inputs: inputs.value,
updates: updates.value,
changes: changes.value,
validations: validations.value,
validateEvents: validateEvents.value,
validationState: item.value?.validateState,
validationMessage: item.value?.validateMessage
})), 1 /* TEXT */)
]));
};
}
};
exports.default.__scopeId = "data-v-a5df4029";
},
"InputInstanceContract.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { "data-testid": "autocomplete-input-instance-contract" };
const _hoisted_2 = { class: "instance-actions" };
const _hoisted_3 = { "data-testid": "autocomplete-input-instance-result" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'InputInstanceContract',
setup(__props) {
const host = (0, vue_2.ref)();
const control = (0, vue_2.shallowRef)();
const model = (0, vue_2.ref)('Seed');
const kind = (0, vue_2.ref)('text');
const inputs = (0, vue_2.ref)([]), updates = (0, vue_2.ref)([]), changes = (0, vue_2.ref)([]), clears = (0, vue_2.ref)(0);
const events = (0, vue_2.ref)([]);
const inspection = (0, vue_2.ref)({});
const nativeEvents = new WeakSet();
const names = [
'focus',
'blur',
'keydown',
'compositionstart',
'compositionupdate',
'compositionend',
'mouseenter',
'mouseleave'
];
const capture = (event) => nativeEvents.add(event);
function record(name, event) {
events.value.push({
name,
type: event.type,
constructor: event.constructor.name,
nativePayloadSame: nativeEvents.has(event),
...(event instanceof KeyboardEvent ? { key: event.key } : {}),
...(event instanceof CompositionEvent ? { data: event.data } : {})
});
}
const factory = (0, ui_1.defineAsamOptions)();
const api = async (params, context) => {
context.signal.throwIfAborted();
return [{ id: 7, name: params.text, value: params.text.toLowerCase() }];
};
const transform = (members) => members;
const source = (text) => factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'name', value: 'value' }
});
const TypedRemote = ui_1.AsamRemoteAutocomplete;
let app;
(0, vue_2.onMounted)(() => {
if (!host.value)
return;
for (const name of names)
host.value.addEventListener(name, capture, true);
app = (0, vue_2.createApp)({
render: () => (0, vue_2.h)(TypedRemote, {
ref: control,
source,
modelValue: model.value,
type: kind.value,
ariaLabel: '建议实例输入',
debounce: 0,
triggerOnFocus: false,
teleported: false,
showPassword: kind.value === 'password',
rows: 2,
autosize: { minRows: 2, maxRows: 4 },
'onUpdate:modelValue': (value) => {
model.value = value;
updates.value.push(value);
},
onInput: (value) => inputs.value.push(value),
onChange: (value) => changes.value.push(value),
onClear: () => clears.value++,
onFocus: (event) => record('focus', event),
onBlur: (event) => record('blur', event),
onKeydown: (event) => record('keydown', event),
onCompositionstart: (event) => record('compositionstart', event),
onCompositionupdate: (event) => record('compositionupdate', event),
onCompositionend: (event) => record('compositionend', event),
onMouseenter: (event) => record('mouseenter', event),
onMouseleave: (event) => record('mouseleave', event)
})
});
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-input-instance' });
app.mount(host.value);
});
(0, vue_2.onBeforeUnmount)(() => {
app?.unmount();
for (const name of names)
host.value?.removeEventListener(name, capture, true);
});
function inspect() {
const instance = control.value?.inputRef;
inspection.value = {
ready: !!instance,
inputTag: instance?.input?.tagName ?? null,
textareaTag: instance?.textarea?.tagName ?? null,
refTag: instance?.ref?.tagName ?? null,
refMatchesInput: !!instance?.input && instance.ref === instance.input,
refMatchesTextarea: !!instance?.textarea && instance.ref === instance.textarea,
isComposing: instance?.isComposing,
passwordVisible: instance?.passwordVisible,
textareaStyle: instance?.textareaStyle,
rootInputMembersAbsent: [
'input',
'textarea',
'ref',
'select',
'clear',
'resizeTextarea',
'isComposing',
'passwordVisible',
'textareaStyle'
].every((name) => !(name in (control.value ?? {})))
};
}
async function operate(name) {
control.value?.inputRef?.[name]();
await (0, vue_2.nextTick)();
inspect();
}
async function reset() {
model.value = 'Seed';
await (0, vue_2.nextTick)();
await new Promise((resolve) => setTimeout(resolve, 20));
events.value = [];
inputs.value = [];
updates.value = [];
changes.value = [];
clears.value = 0;
inspect();
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createElementVNode)("div", _hoisted_2, [
_cache[16] || (_cache[16] = (0, vue_1.createElementVNode)("label", { for: "data009-instance-kind" }, "建议实例输入类型", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-instance-kind",
modelValue: kind.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((kind).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'text',
value: 'text'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_1.createTextVNode)("text", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'password',
value: 'password'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_1.createTextVNode)("password", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'textarea',
value: 'textarea'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_1.createTextVNode)("textarea", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: inspect
}, {
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 => (operate('focus')))
}, {
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 => (operate('blur')))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_1.createTextVNode)("实例输入失焦", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: _cache[3] || (_cache[3] = $event => (operate('select')))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(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 => (operate('clear')))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(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 => (operate('resizeTextarea')))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_1.createTextVNode)("实例调整文本域", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: reset
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(0, vue_1.createTextVNode)("恢复输入实例记录", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_1.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "instance-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_1.createElementVNode)("pre", _hoisted_3, (0, vue_1.toDisplayString)(JSON.stringify({ model: model.value, kind: kind.value, events: events.value, inputs: inputs.value, updates: updates.value, changes: changes.value, clears: clears.value, inspection: inspection.value })), 1 /* TEXT */)
]));
};
}
};
exports.default.__scopeId = "data-v-e8a08d1f";
},
"OfficialInputContract.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { "data-testid": "autocomplete-official-input-contract" };
const _hoisted_2 = { class: "official-controls" };
const _hoisted_3 = { "data-testid": "autocomplete-official-input-result" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'OfficialInputContract',
setup(__props) {
const host = (0, vue_2.ref)();
const control = (0, vue_2.shallowRef)();
const model = (0, vue_2.ref)('AB'), password = (0, vue_2.ref)('Secret');
const kind = (0, vue_2.ref)('text'), icon = (0, vue_2.ref)('default'), position = (0, vue_2.ref)('inside'), count = (0, vue_2.ref)('native');
const inputs = (0, vue_2.ref)([]), updates = (0, vue_2.ref)([]), clears = (0, vue_2.ref)(0);
const suggestions = (0, vue_2.ref)([]);
const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
const countCodepoints = (value) => Array.from(value).length;
const countGraphemes = (value) => Array.from(segmenter.segment(value)).length;
const Clear = () => (0, vue_2.h)('svg', { viewBox: '0 0 16 16', 'data-official-clear-icon': 'custom', 'aria-hidden': 'true' }, [
(0, vue_2.h)('path', {
d: 'M2 3l1-1 5 5 5-5 1 1-5 5 5 5-1 1-5-5-5 5-1-1 5-5z',
fill: 'currentColor'
})
]);
const api = async (params, context) => {
context.signal.throwIfAborted();
return [{ id: 7, name: params.text, value: params.text.toLowerCase() }];
};
const factory = (0, ui_1.defineAsamOptions)();
const transform = (members) => members;
const source = (text) => factory.api({
api,
params: { text },
transform,
fieldNames: { label: 'name', value: 'value' }
});
const configuration = (0, vue_2.computed)(() => ({
source,
modelValue: model.value,
type: kind.value,
ariaLabel: '官方组合建议输入',
rows: 2,
maxlength: 3,
clearable: true,
showWordLimit: true,
wordLimitPosition: position.value,
...(icon.value === 'custom' ? { clearIcon: Clear } : {}),
...(count.value === 'native'
? {}
: { countGraphemes: count.value === 'codepoints' ? countCodepoints : countGraphemes }),
triggerOnFocus: false,
debounce: 0,
teleported: false
}));
const TypedRemote = ui_1.AsamRemoteAutocomplete;
let app;
(0, vue_2.onMounted)(() => {
if (!host.value)
return;
app = (0, vue_2.createApp)({
render: () => (0, vue_2.h)('div', [
(0, vue_2.h)(TypedRemote, {
...configuration.value,
ref: control,
'onUpdate:modelValue': (value) => {
model.value = value;
updates.value.push(value);
},
onInput: (value) => inputs.value.push(value),
onClear: () => clears.value++
}),
(0, vue_2.h)('div', { 'data-testid': 'official-default-password' }, [
(0, vue_2.h)(ui_1.AsamPassword, {
modelValue: password.value,
showPassword: true,
ariaLabel: '官方默认密码输入',
'onUpdate:modelValue': (value) => {
password.value = value;
}
})
]),
(0, vue_2.h)('div', { 'data-testid': 'official-base-password' }, [
(0, vue_2.h)(ui_1.AsamPassword, {
modelValue: password.value,
showPassword: true,
ariaLabel: '官方密码图标输入',
'onUpdate:modelValue': (value) => {
password.value = value;
}
}, {
'password-icon': ({ visible }) => (0, vue_2.h)('span', { 'data-testid': 'official-password-icon' }, visible ? '公开' : '隐藏')
})
])
])
});
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-official-input' });
app.mount(host.value);
});
(0, vue_2.onBeforeUnmount)(() => app?.unmount());
async function reset() {
model.value = 'AB';
await (0, vue_2.nextTick)();
inputs.value = [];
updates.value = [];
clears.value = 0;
suggestions.value = [];
}
async function query() {
await control.value?.getData(String(model.value));
suggestions.value = control.value?.suggestions ?? [];
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createElementVNode)("div", _hoisted_2, [
_cache[15] || (_cache[15] = (0, vue_1.createElementVNode)("label", { for: "data009-official-kind" }, "官方组合输入类型", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-official-kind",
modelValue: kind.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((kind).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'text',
value: 'text'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_1.createTextVNode)("text", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'textarea',
value: 'textarea'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_1.createTextVNode)("textarea", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[16] || (_cache[16] = (0, vue_1.createElementVNode)("label", { for: "data009-official-icon" }, "官方清除图标", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-official-icon",
modelValue: icon.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((icon).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'default',
value: 'default'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_1.createTextVNode)("default", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'custom',
value: 'custom'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_1.createTextVNode)("custom", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[17] || (_cache[17] = (0, vue_1.createElementVNode)("label", { for: "data009-official-position" }, "官方计数位置", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-official-position",
modelValue: position.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((position).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'inside',
value: 'inside'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_1.createTextVNode)("inside", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'outside',
value: 'outside'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_1.createTextVNode)("outside", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[18] || (_cache[18] = (0, vue_1.createElementVNode)("label", { for: "data009-official-count" }, "官方计数方式", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-official-count",
modelValue: count.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = $event => ((count).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'native',
value: 'native'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[10] || (_cache[10] = [
(0, vue_1.createTextVNode)("native", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'codepoints',
value: 'codepoints'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_1.createTextVNode)("codepoints", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'graphemes',
value: 'graphemes'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_1.createTextVNode)("graphemes", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: reset
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(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: query
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_1.createTextVNode)("读取官方组合来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_1.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "official-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_1.createElementVNode)("pre", _hoisted_3, (0, vue_1.toDisplayString)(JSON.stringify({
model: model.value,
kind: kind.value,
icon: icon.value,
position: position.value,
count: count.value,
inputs: inputs.value,
updates: updates.value,
clears: clears.value,
suggestions: suggestions.value,
password: password.value
})), 1 /* TEXT */)
]));
};
}
};
exports.default.__scopeId = "data-v-8752e100";
},
"OfficialLayoutContract.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { "data-testid": "autocomplete-official-layout-contract" };
const _hoisted_2 = { class: "layout-controls" };
const _hoisted_3 = { "data-testid": "autocomplete-official-layout-result" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'OfficialLayoutContract',
setup(__props) {
const host = (0, vue_2.ref)(), control = (0, vue_2.shallowRef)();
const model = (0, vue_2.ref)('Alpha');
const size = (0, vue_2.ref)('omitted');
const iconMode = (0, vue_2.ref)('plain'), mixed = (0, vue_2.ref)('none'), selected = (0, vue_2.ref)('1');
const childChanges = (0, vue_2.ref)([]), clicks = (0, vue_2.ref)(0);
const inputs = (0, vue_2.ref)([]), updates = (0, vue_2.ref)([]);
const requests = (0, vue_2.ref)([]), suggestions = (0, vue_2.ref)([]);
const icon = () => (0, vue_2.h)('svg', {
viewBox: '0 0 16 16',
'data-official-layout-icon': iconMode.value,
'aria-hidden': 'true'
}, [(0, vue_2.h)('path', { d: 'M2 2h8v8H2zM10 10l4 4', fill: 'none', stroke: 'currentColor' })]);
const api = async (params, context) => {
context.signal.throwIfAborted();
requests.value.push(params.text);
return [{ id: 7, name: params.text, value: params.text.toLowerCase() }];
};
const factory = (0, ui_1.defineAsamOptions)();
const transform = (items) => items;
const source = (text) => factory.api({
api,
transform,
params: { text },
fieldNames: { label: 'name', value: 'value' }
});
const TypedRemote = ui_1.AsamRemoteAutocomplete;
const options = [
{ label: 'Restaurant', value: '1' },
{ label: 'Order No.', value: '2' },
{ label: 'Tel', value: '3' }
];
function selectChild() {
return (0, vue_2.h)('div', { 'data-testid': 'official-layout-child-select' }, [
(0, vue_2.h)(ui_1.AsamSelect, {
modelValue: selected.value,
valueMode: 'native',
placeholder: '选择',
style: { width: '115px' },
'onUpdate:modelValue': (value) => {
if (typeof value === 'string') {
selected.value = value;
childChanges.value.push(value);
}
}
}, () => options.map((option) => (0, vue_2.h)(ui_1.AsamOption, { label: option.label, value: option.value })))
]);
}
function buttonChild() {
return (0, vue_2.h)(ui_1.AsamButton, { 'aria-label': '官方附加搜索', icon, onClick: () => clicks.value++ });
}
let app;
(0, vue_2.onMounted)(() => {
if (!host.value)
return;
app = (0, vue_2.createApp)({
render: () => (0, vue_2.h)(ui_1.AsamConfigProvider, { size: 'default' }, () => (0, vue_2.h)(TypedRemote, {
source,
key: iconMode.value + ':' + mixed.value,
modelValue: model.value,
ariaLabel: '官方布局建议输入',
triggerOnFocus: false,
debounce: 0,
...(size.value === 'omitted' ? {} : { size: size.value }),
...(iconMode.value === 'prefixIcon' ? { prefixIcon: icon } : {}),
...(iconMode.value === 'suffixIcon' ? { suffixIcon: icon } : {}),
ref: control,
'onUpdate:modelValue': (value) => {
model.value = value;
updates.value.push(value);
},
onInput: (value) => inputs.value.push(value)
}, {
...(iconMode.value === 'prefixSlot' ? { prefix: icon } : {}),
...(iconMode.value === 'suffixSlot' ? { suffix: icon } : {}),
...(mixed.value === 'prependText' ? { prepend: () => 'Http://' } : {}),
...(mixed.value === 'appendText' ? { append: () => '.com' } : {}),
...(mixed.value === 'prependSelect'
? { prepend: selectChild, append: buttonChild }
: {}),
...(mixed.value === 'appendSelect'
? { prepend: buttonChild, append: selectChild }
: {})
}))
});
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-official-layout' });
app.mount(host.value);
});
(0, vue_2.onBeforeUnmount)(() => app?.unmount());
async function query() {
await control.value?.getData(String(model.value));
suggestions.value = control.value?.suggestions ?? [];
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createElementVNode)("div", _hoisted_2, [
_cache[18] || (_cache[18] = (0, vue_1.createElementVNode)("label", { for: "data009-layout-size" }, "官方布局尺寸", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-layout-size",
modelValue: size.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((size).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'omitted',
value: 'omitted'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[3] || (_cache[3] = [
(0, vue_1.createTextVNode)("omitted", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'large',
value: 'large'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[4] || (_cache[4] = [
(0, vue_1.createTextVNode)("large", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'big',
value: 'big'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[5] || (_cache[5] = [
(0, vue_1.createTextVNode)("big", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'small',
value: 'small'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[6] || (_cache[6] = [
(0, vue_1.createTextVNode)("small", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[19] || (_cache[19] = (0, vue_1.createElementVNode)("label", { for: "data009-layout-icon" }, "官方布局图标", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-layout-icon",
modelValue: iconMode.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((iconMode).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'plain',
value: 'plain'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[7] || (_cache[7] = [
(0, vue_1.createTextVNode)("plain", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'prefixIcon',
value: 'prefixIcon'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[8] || (_cache[8] = [
(0, vue_1.createTextVNode)("prefixIcon", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'suffixIcon',
value: 'suffixIcon'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[9] || (_cache[9] = [
(0, vue_1.createTextVNode)("suffixIcon", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'prefixSlot',
value: 'prefixSlot'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[10] || (_cache[10] = [
(0, vue_1.createTextVNode)("prefixSlot", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'suffixSlot',
value: 'suffixSlot'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[11] || (_cache[11] = [
(0, vue_1.createTextVNode)("suffixSlot", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
_cache[20] || (_cache[20] = (0, vue_1.createElementVNode)("label", { for: "data009-layout-mixed" }, "官方附加内容", -1 /* CACHED */)),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamSelect), {
id: "data009-layout-mixed",
modelValue: mixed.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ((mixed).value = $event))
}, {
default: (0, vue_1.withCtx)(() => [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'none',
value: 'none'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[12] || (_cache[12] = [
(0, vue_1.createTextVNode)("none", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'prependText',
value: 'prependText'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[13] || (_cache[13] = [
(0, vue_1.createTextVNode)("prependText", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'appendText',
value: 'appendText'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[14] || (_cache[14] = [
(0, vue_1.createTextVNode)("appendText", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'prependSelect',
value: 'prependSelect'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[15] || (_cache[15] = [
(0, vue_1.createTextVNode)("prependSelect", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamOption), {
label: 'appendSelect',
value: 'appendSelect'
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[16] || (_cache[16] = [
(0, vue_1.createTextVNode)("appendSelect", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
onClick: query
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[17] || (_cache[17] = [
(0, vue_1.createTextVNode)("读取官方布局来源", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
})
]),
(0, vue_1.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "layout-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_1.createElementVNode)("pre", _hoisted_3, (0, vue_1.toDisplayString)(JSON.stringify({
model: model.value,
size: size.value,
iconMode: iconMode.value,
mixed: mixed.value,
selected: selected.value,
childChanges: childChanges.value,
clicks: clicks.value,
inputs: inputs.value,
updates: updates.value,
requests: requests.value,
suggestions: suggestions.value
})), 1 /* TEXT */)
]));
};
}
};
exports.default.__scopeId = "data-v-996c5321";
},
"OfficialSuggestionContract.vue": (module, exports, require) => {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _hoisted_1 = { "data-testid": "autocomplete-official-suggestion-contract" };
const _hoisted_2 = { "data-testid": "autocomplete-official-suggestion-result" };
const vue_2 = require("vue");
const ui_1 = require("@asam-ui/ui");
exports.default = {
__name: 'OfficialSuggestionContract',
setup(__props) {
const names = [
'basic-focus',
'basic-input',
'template',
'remote',
'loading-ring',
'loading-dots',
'header',
'footer'
];
const links = [
{ value: 'vue', link: 'https://github.com/vuejs/vue' },
{ value: 'element', link: 'https://github.com/ElemeFE/element' },
{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
{ value: 'babel', link: 'https://github.com/babel/babel' }
];
const host = (0, vue_2.ref)();
const models = (0, vue_2.ref)({
'basic-focus': '',
'basic-input': '',
template: '',
remote: '',
'loading-ring': '',
'loading-dots': '',
header: '',
footer: ''
});
const loadingModel = (0, vue_2.ref)('');
const queries = (0, vue_2.ref)([]);
const selections = (0, vue_2.ref)([]);
const iconClicks = (0, vue_2.ref)([]);
const footerClears = (0, vue_2.ref)(0);
const pending = (0, vue_2.ref)([]);
const footer = (0, vue_2.shallowRef)();
const releases = new Map();
const factory = (0, ui_1.defineAsamOptions)();
const TypedRemote = ui_1.AsamRemoteAutocomplete;
const isLoadingCase = (name) => name === 'loading-ring' || name === 'loading-dots';
const model = (name) => (isLoadingCase(name) ? loadingModel.value : models.value[name]);
const setModel = (name, value) => {
if (isLoadingCase(name))
loadingModel.value = value;
else
models.value[name] = value;
};
const api = async (params, context) => {
context.signal.throwIfAborted();
const results = links.filter((item) => item.value.toLowerCase().startsWith(params.query.toLowerCase()));
queries.value.push({ ...params, results });
if (isLoadingCase(params.control)) {
pending.value.push(params.control);
try {
await new Promise((resolve, reject) => {
const abort = () => reject(context.signal.reason);
context.signal.addEventListener('abort', abort, { once: true });
releases.set(params.control, () => {
context.signal.removeEventListener('abort', abort);
resolve();
});
});
}
finally {
pending.value = pending.value.filter((name) => name !== params.control);
releases.delete(params.control);
}
}
else if (params.control === 'remote' ||
params.control === 'header' ||
params.control === 'footer') {
await new Promise((resolve) => setTimeout(resolve, 60));
}
context.signal.throwIfAborted();
return results;
};
const source = (control, query) => factory.api({
api,
params: { control, query },
transform: (rows) => rows,
fieldNames: { label: 'value', value: 'value' }
});
const cases = names.map((name) => ({ name, source: (query) => source(name, query) }));
const circle = () => (0, vue_2.h)('svg', { class: 'circular', viewBox: '0 0 50 50', 'data-testid': 'official-ring-loader' }, [
(0, vue_2.h)('circle', { class: 'path', cx: 25, cy: 25, r: 20, fill: 'none' })
]);
const dots = () => (0, vue_2.h)(ui_1.AsamIcon, { class: 'is-loading', 'data-testid': 'official-dots-loader' }, {
default: () => (0, vue_2.h)('svg', { class: 'circular', viewBox: '0 0 20 20' }, [
(0, vue_2.h)('g', {
class: 'path2 loading-path',
'stroke-width': 0,
style: { animation: 'none', stroke: 'none' }
}, ['dot1', 'dot2', 'dot4', 'dot3'].map((name) => (0, vue_2.h)('circle', { r: 3.375, class: name, rx: 0, ry: 0 })))
])
});
async function clearFooter() {
models.value.footer = '';
footerClears.value++;
await (0, vue_2.nextTick)();
await footer.value?.getData('');
}
let app;
(0, vue_2.onMounted)(() => {
if (!host.value)
return;
app = (0, vue_2.createApp)({
render: () => (0, vue_2.h)('div', { class: 'suggestion-grid' }, cases.map(({ name, source: caseSource }) => (0, vue_2.h)('article', { 'data-testid': 'official-suggestion-' + name }, [
(0, vue_2.h)('h3', name),
...(isLoadingCase(name)
? [
(0, vue_2.h)(ui_1.AsamButton, {
type: 'default',
nativeType: 'button',
onMousedown: (event) => event.preventDefault(),
onClick: () => releases.get(name)?.()
}, { default: () => '完成官方加载 ' + name })
]
: []),
(0, vue_2.h)(TypedRemote, {
...(name === 'footer' ? { ref: footer } : {}),
modelValue: model(name),
'onUpdate:modelValue': (value) => setModel(name, value),
source: caseSource,
ariaLabel: '官方建议 ' + name,
placeholder: name === 'basic-focus' || name === 'basic-input'
? '请输入内容'
: '输入查询内容',
clearable: name === 'basic-focus' || name === 'basic-input',
teleported: false,
debounce: 0,
...(name === 'basic-input' ? { triggerOnFocus: false } : {}),
...(name === 'template'
? { popperClass: 'data009-official-template-popper' }
: {}),
onSelect: (item) => selections.value.push({ control: name, item })
}, {
...(name === 'template'
? {
suffix: () => (0, vue_2.h)(ui_1.AsamIcon, {
class: 'el-input__icon',
'data-testid': 'official-template-suffix',
onClick: (event) => iconClicks.value.push({
type: event.type,
nativeMouse: event instanceof MouseEvent
})
}, {
default: () => (0, vue_2.h)('svg', { viewBox: '0 0 16 16' }, [
(0, vue_2.h)('path', {
d: 'M2 11l8-8 3 3-8 8H2z',
fill: 'currentColor'
})
])
}),
default: ({ item }) => [
(0, vue_2.h)('div', { class: 'value' }, item.value),
(0, vue_2.h)('span', { class: 'link' }, item.raw.link)
]
}
: {}),
...(name === 'loading-ring' ? { loading: circle } : {}),
...(name === 'loading-dots' ? { loading: dots } : {}),
...(name === 'header'
? {
header: () => (0, vue_2.h)('span', { 'data-testid': 'official-header-content' }, '页眉内容')
}
: {}),
...(name === 'footer'
? {
footer: () => (0, vue_2.h)(ui_1.AsamButton, {
type: 'default',
link: true,
size: 'small',
onClick: clearFooter,
'data-testid': 'official-footer-clear'
}, { default: () => '清空' })
}
: {})
})
])))
});
(0, ui_1.provideAsamData)(app, {}, { scope: 'data009-autocomplete-official-suggestions' });
app.mount(host.value);
});
(0, vue_2.onBeforeUnmount)(() => {
for (const release of releases.values())
release();
app?.unmount();
});
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
_cache[0] || (_cache[0] = (0, vue_1.createElementVNode)("p", { class: "example-paragraph" }, "八个独立控件保留官方基础、模板、远程、加载及页眉页脚分支。", -1 /* CACHED */)),
(0, vue_1.createElementVNode)("div", {
ref_key: "host",
ref: host,
class: "data009-official-suggestion-host"
}, null, 512 /* NEED_PATCH */),
(0, vue_1.createElementVNode)("pre", _hoisted_2, (0, vue_1.toDisplayString)(JSON.stringify({
models: models.value,
loadingModel: loadingModel.value,
queries: queries.value,
selections: selections.value,
iconClicks: iconClicks.value,
footerClears: footerClears.value,
pending: pending.value
})), 1 /* TEXT */)
]));
};
}
};
exports.default.__scopeId = "data-v-ac6b9e45";
},
};
const __dependencies = {"Demo.vue":{"./SelectContract.vue":"SelectContract.vue","./NativeInputContract.vue":"NativeInputContract.vue","./PopupContract.vue":"PopupContract.vue","./SourceLifecycleContract.vue":"SourceLifecycleContract.vue","./PresentationContract.vue":"PresentationContract.vue","./FormattingContract.vue":"FormattingContract.vue","./TextCapabilityContract.vue":"TextCapabilityContract.vue","./ValidationContract.vue":"ValidationContract.vue","./InputInstanceContract.vue":"InputInstanceContract.vue","./OfficialInputContract.vue":"OfficialInputContract.vue","./OfficialLayoutContract.vue":"OfficialLayoutContract.vue","./OfficialSuggestionContract.vue":"OfficialSuggestionContract.vue","./QueryContract.vue":"QueryContract.vue"},"QueryContract.vue":{},"SelectContract.vue":{},"NativeInputContract.vue":{},"PopupContract.vue":{},"SourceLifecycleContract.vue":{},"PresentationContract.vue":{},"FormattingContract.vue":{},"TextCapabilityContract.vue":{},"ValidationContract.vue":{},"InputInstanceContract.vue":{},"OfficialInputContract.vue":{},"OfficialLayoutContract.vue":{},"OfficialSuggestionContract.vue":{}};
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>
.autocomplete-demo[data-v-a45835d0] {
--asam-layout-control-width: 100%;
display: grid;
gap: var(--asam-space-sm);
}
.actions[data-v-a45835d0] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.panel-caption[data-v-a45835d0] {
margin: var(--asam-space-xs) var(--asam-space-sm);
}
.instance-controls[data-v-a45835d0] {
position: relative;
}
.instance-controls .actions[data-v-a45835d0] {
position: absolute;
bottom: 100%;
right: 0;
z-index: 2;
width: max-content;
max-width: 80vw;
padding: var(--asam-space-sm);
background: var(--el-bg-color);
}
pre[data-v-a45835d0] {
max-height: 32rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
p[data-v-a45835d0]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.query-instance-controls[data-v-ccbc690d] {
position: relative;
}
.query-instance-controls > div[data-v-ccbc690d] {
position: absolute;
bottom: 100%;
right: 0;
z-index: 2;
display: grid;
grid-template-columns: repeat(2, auto);
gap: var(--asam-space-xs);
width: max-content;
max-width: 80vw;
padding: var(--asam-space-sm);
background: var(--el-bg-color);
}
p[data-v-ccbc690d]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.demo-slot-layout[data-v-beb62381] {
display: grid;
gap: var(--asam-space-md);
width: 100%;
min-width: 0;
}
.demo-slot-layout > .el-button[data-v-beb62381] {
justify-self: start;
}
.demo-slot-layout[data-v-beb62381] > :is(p, pre, output) {
margin-block: 0;
}
.demo-slot-actions[data-v-beb62381] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm);
}
.demo-slot-actions > .el-button + .el-button[data-v-beb62381] {
margin-left: 0;
}
.popup-input-area[data-v-d326c415] {
width: 260px;
margin-block: 180px;
margin-inline: auto;
}
p[data-v-d326c415]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.source-control-host[data-v-a1ac4370] {
width: 300px;
margin-block: 24px;
}
.presentation-controls[data-v-48d164cc] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.presentation-host[data-v-48d164cc] {
margin-block: var(--asam-space-md);
width: 300px;
}
pre[data-v-48d164cc] {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.formatting-controls[data-v-2f9ce16f] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.formatting-host[data-v-2f9ce16f] {
margin-block: var(--asam-space-md);
width: 300px;
}
pre[data-v-2f9ce16f] {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.text-controls[data-v-71b4f7b1] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.text-host[data-v-71b4f7b1] {
margin-block: var(--asam-space-md);
width: 300px;
}
pre[data-v-71b4f7b1] {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.validation-controls[data-v-a5df4029] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.validation-host[data-v-a5df4029] {
margin-block: var(--asam-space-md);
width: 300px;
}
pre[data-v-a5df4029] {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.instance-actions[data-v-e8a08d1f] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.instance-host[data-v-e8a08d1f] {
width: 300px;
margin-block: var(--asam-space-md);
}
pre[data-v-e8a08d1f] {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.official-controls[data-v-8752e100] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.official-host[data-v-8752e100] {
width: 300px;
margin-block: var(--asam-space-md);
}
pre[data-v-8752e100] {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.layout-controls[data-v-996c5321] {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-sm);
align-items: center;
}
.layout-host[data-v-996c5321] {
width: 600px;
max-width: 100%;
margin-block: var(--asam-space-md);
}
pre[data-v-996c5321] {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.data009-official-suggestion-host {
margin-block: var(--asam-space-md);
}
[data-testid='autocomplete-official-suggestion-contract'] pre {
max-height: 24rem;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.data009-official-suggestion-host .suggestion-grid {
display: grid;
gap: var(--asam-space-md);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.data009-official-suggestion-host .circular {
display: inline;
height: 30px;
width: 30px;
animation: data009-official-loading-rotate 2s linear infinite;
}
.data009-official-suggestion-host .path {
animation: data009-official-loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: var(--el-color-primary);
stroke-linecap: round;
}
.data009-official-suggestion-host .loading-path .dot1 {
transform: translate(3.75px, 3.75px);
fill: var(--el-color-primary);
animation: data009-official-custom-spin-move 1s infinite linear alternate;
opacity: 0.3;
}
.data009-official-suggestion-host .loading-path .dot2 {
transform: translate(calc(100% - 3.75px), 3.75px);
fill: var(--el-color-primary);
animation: data009-official-custom-spin-move 1s infinite linear alternate;
opacity: 0.3;
animation-delay: 0.4s;
}
.data009-official-suggestion-host .loading-path .dot3 {
transform: translate(3.75px, calc(100% - 3.75px));
fill: var(--el-color-primary);
animation: data009-official-custom-spin-move 1s infinite linear alternate;
opacity: 0.3;
animation-delay: 1.2s;
}
.data009-official-suggestion-host .loading-path .dot4 {
transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
fill: var(--el-color-primary);
animation: data009-official-custom-spin-move 1s infinite linear alternate;
opacity: 0.3;
animation-delay: 0.8s;
}
@keyframes data009-official-loading-rotate {
to {
transform: rotate(360deg);
}
}
@keyframes data009-official-loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
@keyframes data009-official-custom-spin-move {
to {
opacity: 1;
}
}
.data009-official-suggestion-host .data009-official-template-popper li {
line-height: normal;
padding: 7px;
}
.data009-official-suggestion-host .data009-official-template-popper .value {
text-overflow: ellipsis;
overflow: hidden;
}
.data009-official-suggestion-host .data009-official-template-popper .link {
font-size: 12px;
color: var(--asam-color-text-secondary);
}
p[data-v-ac6b9e45]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
浮层按钮切换 showArrow 的 false、true 与 undefined;undefined 恢复原生默认箭头。
偏移按钮在同一份 popperOptions 中将 offset 的纵向值在 0 和 16 之间切换,
实际浮层位置随之改变。这些展示配置不改变 source 的查询和选项数据。
同一示例的实例按钮支持聚焦、失焦、关闭建议、读取全部建议、高亮首项或取消高亮、 选择首项以及处理 Enter。 完整说明。
本例显式设置 loopNavigation=false,因此 highlight(-1) 取消当前高亮;
原生默认循环导航启用时,负索引会转至末项。实例控制向上展开,避免覆盖建议列表。
数据来源与覆盖 ​
source(query) 根据当前搜索文本创建 api 或 request 类型的 AsamOptionsSource,必须把 query 放进实际请求参数。它接管静态 options 和基础查询回调;不能同时传静态选项或第二个查询来源。示例通过本地 API 过滤标签,空文本返回完整列表。
来源必须由 defineAsamOptions 的 api 或 request 工厂创建;静态来源不适用。 完整说明。
自动补全模型是 string | number,select 事件提供建议项;选项来源接管 fetchSuggestions、remoteSuggestions 与 valueKey。
生命周期、事件与实例 ​
active=false 暂停请求并保留上次成功数据;reload({ force: true }) 请求新数据,cancel() 取消当前请求。 完整说明。
自动补全以基础 debounce 控制查询节奏;不额外声明 immediate 或 debounceMs。实例继承基础自动补全能力并增加 reload/cancel。
输入请求保持当前 query;旧请求即使忽略取消后迟到,也不能覆盖新 query 的数据。 完整说明。
保留原生输入与选择事件,并额外提供请求成功、失败和加载状态事件。 完整说明。
示例记录模型、输入、选择、清除与请求事件的真实载荷。 完整说明。
| 实例 | 行为 |
|---|---|
| highlightedIndex / activated / loading | 当前基础建议索引、激活和加载状态的实时只读视图 |
| inputRef / popperRef | 基础 Input 与 Tooltip 实例,挂载前可为 undefined |
| suggestions | 当前实际建议数组,保留具体 AsamOption<V, I> 和 raw 类型 |
| focus / blur / close / highlight(index) | 控制焦点、建议显隐与当前高亮 |
| getData(query) | 通过本组件 source 拉取指定 query 并更新基础建议,返回 Promise |
| handleSelect(option) / handleKeyEnter() | 选择完整建议项或处理当前 Enter 行为,返回 Promise |
| reload({ force? }) | 返回 success(含数据/fromCache)、error 或 cancelled;force 绕过可选应用本地缓存 |
| cancel() | 取消本消费者的当前请求,保留成功快照 |
插槽与基础能力 ​
default 插槽接收 { item: AsamOption<V, I> };prefix、suffix、prepend、append、header、footer、loading 七个命名插槽完整沿用基础自动补全。 完整说明。
通过输入装饰、建议列表及加载状态插槽定制内容,并使用公开实例控制。 完整说明。
本站继承关系 ​
- 自动补全:适用的基础展示、交互与公开 API。
本页数据来源、模型、事件和实例的覆盖规则优先;本站链接不扩大本组件公开契约。尺寸使用基础组件的 ASAM 尺寸规则,示例使用 default。
模型修饰符与输入状态 ​
v-model.lazy 沿用当前基础自动补全的行为:输入时即更新 modelValue,并将当前 query 发送给 source;按 Tab 失焦后发出 change,模型保持已提交值。 完整说明。
模型修饰符与输入状态
<template>
<main class="demo-layout-1">
<AsamRemoteAutocomplete
ref="control"
v-model.lazy="value"
:source="source"
:debounce="0"
:trigger-on-focus="false"
:readonly="readonly"
:disabled="disabled"
:teleported="false"
:min="2"
:max="10"
:step="2"
clearable
aria-label="延迟提交建议"
@input="inputs.push($event)"
@change="changes.push($event)"
>
<template #default="{ item }">{{ item.label }} · {{ item.raw.id }}</template>
</AsamRemoteAutocomplete>
<AsamButton native-type="submit" type="default" data-testid="blur-target"
>移出输入</AsamButton
>
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="readonly">只读</AsamCheckboxItem>
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="disabled">禁用</AsamCheckboxItem>
<pre data-testid="lazy-model">{{ JSON.stringify(value) }}</pre>
<pre data-testid="lazy-calls">{{ JSON.stringify(calls) }}</pre>
<pre data-testid="lazy-events">{{ JSON.stringify({ inputs, changes }) }}</pre>
</main>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamRemoteAutocompleteLazyDemo' });
import { ref } from 'vue';
import {
AsamCheckboxItem,
AsamButton,
AsamRemoteAutocomplete,
defineAsamOptions
} from '@asam-ui/ui';
import type { AsamApiRequest, AsamRemoteAutocompleteExpose } from '@asam-ui/ui';
interface Item {
id: string;
label: string;
value: string;
}
interface Query {
text: string;
}
const value = ref<string | number>('seed');
const control = ref<AsamRemoteAutocompleteExpose<string, Item>>();
const readonly = ref(false);
const disabled = ref(false);
const inputs = ref<(string | number)[]>([]);
const changes = ref<(string | number)[]>([]);
const calls = ref<string[]>([]);
const api: AsamApiRequest<Query, readonly Item[]> = async (query, context) => {
calls.value.push(query.text);
context.signal.throwIfAborted();
return [{ id: query.text, label: query.text, value: query.text }];
};
const factory = defineAsamOptions<string, Item>();
const source = (text: string) =>
factory.api({
api,
params: { text },
transform: (rows) => rows,
fieldNames: { label: 'label', value: 'value' }
});
</script>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>
<template>
<main class="demo-layout-1">
<AsamRemoteAutocomplete
ref="control"
v-model.lazy="value"
:source="source"
:debounce="0"
:trigger-on-focus="false"
:readonly="readonly"
:disabled="disabled"
:teleported="false"
:min="2"
:max="10"
:step="2"
clearable
aria-label="延迟提交建议"
@input="inputs.push($event)"
@change="changes.push($event)"
>
<template #default="{ item }">{{ item.label }} · {{ item.raw.id }}</template>
</AsamRemoteAutocomplete>
<AsamButton native-type="submit" type="default" data-testid="blur-target"
>移出输入</AsamButton
>
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="readonly">只读</AsamCheckboxItem>
<!-- prettier-ignore -->
<AsamCheckboxItem v-model="disabled">禁用</AsamCheckboxItem>
<pre data-testid="lazy-model">{{ JSON.stringify(value) }}</pre>
<pre data-testid="lazy-calls">{{ JSON.stringify(calls) }}</pre>
<pre data-testid="lazy-events">{{ JSON.stringify({ inputs, changes }) }}</pre>
</main>
</template>
<script setup>
defineOptions({ name: 'AsamRemoteAutocompleteLazyDemo' });
import { ref } from 'vue';
import {
AsamCheckboxItem,
AsamButton,
AsamRemoteAutocomplete,
defineAsamOptions
} from '@asam-ui/ui';
const value = ref('seed');
const control = ref();
const readonly = ref(false);
const disabled = ref(false);
const inputs = ref([]);
const changes = ref([]);
const calls = ref([]);
const api = async (query, context) => {
calls.value.push(query.text);
context.signal.throwIfAborted();
return [{ id: query.text, label: query.text, value: query.text }];
};
const factory = defineAsamOptions();
const source = (text) =>
factory.api({
api,
params: { text },
transform: (rows) => rows,
fieldNames: { label: 'label', value: 'value' }
});
</script>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
</style>
建议查询参数的完整消费者 ​
native-data 的“展示建议查询协议”在原示例中增加独立输入,直接消费同一个公开远端自动补全入口;本地查询返回 Alpha、Beta、禁用的 Disabled 和 Delta,规范化后显示可用建议。 完整说明。
| 参数 | 完整示例中的作用 |
|---|---|
| maxSuggestions | 限制规范化后的可用建议数量,先去掉 disabled 项再截取;1、2 和 undefined 可切换,undefined 恢复默认 100。0、负数、小数、NaN 和 Infinity 在实际 getData 中被拒绝,示例捕获后恢复默认读取。 |
| triggerOnFocus | false 不因聚焦发查询,但输入仍查询;true 与 undefined 保留聚焦时的当前文本查询。 |
| highlightFirstItem | true 在建议加载后高亮首项,false 与 undefined 不自动高亮。 |
| loopNavigation | true 与 undefined 在已激活建议面板中将负索引绕到末项;false 将 -1 保留为取消高亮。 |
| hideLoading | true 隐藏加载内容,false 与 undefined 显示 loading 插槽;该显示设置不改变实例 loading 或本地请求的等待状态。 |
| debounce | 省略或 undefined 继承原生默认 300ms,合并快速输入的草稿查询;显式 0 按当前 query 立即查询,180ms 合并快速输入。该参数控制基础自动补全查询,不是另一个数据层 debounceMs。 |
“持有本地请求”使等待状态保持可观察;“释放本地等待”完成原请求。数量、键盘及加载显示的设置不修改来源返回的实体或原始 raw,也不连接服务器。两种类型示例均使用同一组操作。
inputRef 与 popperRef 是实时只读的可选嵌套实例。示例可“停用协议输入”,保存的公开 expose 在组件卸载后读到空的两个引用,再“恢复协议输入”取得新实例;这不依赖伪造实例形状。调用方先判断引用存在,再使用嵌套能力。
selectWhenUnmatched 的 false 与 undefined 在没有建议时不发送 select。此前正常包 56682 启用 true 后,原生未匹配提交产生的载荷只有 { value: 当前模型 },没有来源实体的 label/raw;该旧包的声明与载荷不一致,历史失败记录保留。
在消费包含 UI026 未匹配选择修正的兼容正常候选时,select 事件为“完整匹配建议或 { value: string | number }”。 完整说明。
此前正常包 56682 的未匹配载荷/声明冲突记录保留;后继候选必须单独完成实际消费与独立复核才能关闭原四条 FAIL,包到位本身不表示通过。
native-data 的“展示选择载荷契约”可独立核对六种匹配来源,以及字符串/数字空建议的默认、false、true 策略和实际键盘 Enter。 完整说明。
原生输入属性与模型 ​
native-data 的“展示原生输入协议”使用独立的本地 API,输入草稿进入真实 source 参数,输入内容不会发送到服务器。可切换完整属性与省略属性,观察模型、输入事件和查询记录。建议浮层翻到输入上方时,先按 Escape 关闭建议,再操作工具栏。
| 参数 | 完整示例行为 |
|---|---|
| modelValue | 外部写入字符串 seed 或数字 42 时,输入分别显示 seed 或 42;实际编辑后按原生输入行为提交字符串模型,并保留 input、update:modelValue 与 query。 |
| id、ariaLabel、tabindex、form、name | 传给真实 input/textarea。显式 form 绑定独立表单;省略后解除该表单关联。省略 id 使用原生生成的 ID,不依赖其具体值;省略 tabindex 为 0。 |
| autocomplete、inputmode、placeholder | 完整属性使用 on、search 和 Input contract;省略后 autocomplete 恢复 off,inputmode 属性移除,placeholder 恢复 ASAM 默认“请输入”。 |
| minlength、maxlength | 最短 2、最长 8。真实键入一个字符触发原生 tooShort,有效字符输入最多保留八个;省略后解除这两项限制。 |
| readonly、disabled | 只读阻止编辑而保留模型;禁用阻止编辑和原生输入交互。解除后恢复可编辑状态,不伪造新模型。 |
| type、rows、resize | text、password 保留字符串模型;textarea 使用四行、resize=none,省略后恢复原生两行。“全新挂载数字输入”独立验证 number,不承诺动态切换已经通过。 |
| min、max、step | 文本输入仅透传原生属性,不进行数字范围裁剪。全新 number 输入使用 2、10、2:3 触发 stepMismatch、1 触发 rangeUnderflow、12 触发 rangeOverflow、4 有效。 |
| autofocus | 显式设置真实 autofocus 属性;符合原生浏览器条件的新文档首次输入会聚焦。省略后重挂载不抢焦点,设置 true 不保证任意已有焦点文档中每次重挂载都聚焦。 |
注意:固定版本从 text/password 动态切至 number 后编辑,可能触发原生选区兼容问题。 完整说明。
配置建议浮层的位置、样式、挂载节点与动画,局部与全局挂载分别演示。 完整说明。
固定 2.14.7 原生 Autocomplete 在 onMounted 中把输入 role 设为 textbox;因此初次 containerRole=searchbox 不改变这次挂载后的 textbox。 完整说明。
“来源生命周期”使用同一个公开 RemoteAutocomplete 验证 source(query) 创建 API 或 URL request 描述,实际查询进入参数。 完整说明。
“建议外观协议”展示 large/big/default/small 四档尺寸。 完整说明。
建议格式协议:原 TS/JS native-data 示例的“展示建议格式协议”入口在独立 provider 应用内演示 formatter、parser 和 modelModifiers。 完整说明。
建议文本能力示例展示字数统计、字素计算、格式化与输入约束。 完整说明。
建议验证示例组合表单与字段,展示输入校验及禁用继承。 完整说明。
修正后的候选对省略 validateEvent 保留 undefined,使基础组件的默认验证参与生效;显式 false 仍关闭验证。 完整说明。
建议输入实例协议:原 TS/JS native-data 示例的“展示建议输入实例协议”入口在独立 provider 应用内读取公开 inputRef。 完整说明。
输入组合示例展示清空图标、前后缀和拼接输入的常用配置。 完整说明。
计数协议另含固定官方原例的 Array.from 代码点回调模式,与 UTF-16 和 Intl.Segmenter 字素模式分别观察。代码点模式使用独立表情,字素模式另外覆盖 ZWJ 家庭表情;两种回调都在 text/textarea 和 inside/outside 中验证,不能把代码点数称为完整字素数。
密码原例的默认图标和自定义图标分别由两个 AsamPassword 承接,共享一个受控模型;两个可见状态保持独立,修改一端时另一端同步值。
基础输入、禁用、格式化与多行输入分别由对应协议示例承接。 完整说明。
source(query) 是唯一建议来源:fetchSuggestions(回调或数组)、valueKey 及其短横线写法在公开类型中排除,JavaScript 初始化传入时会在任何请求之前抛出 config 错误。 完整说明。
官方输入布局协议保留原 with-icon、mixed-input、various-size 的所有分支:默认尺寸省略与 large/small 各自组合无图标、前图标、后图标;另覆盖 ASAM big 档。 完整说明。
布局分支对应官方原例中分别挂载的控件;切换组合时独立挂载配置,受控模型与提供者保留,同一配置内尺寸、选择和按钮操作保持建议输入节点。额外探索中的同实例动态插槽新增/移除曾使原生 Input 后缀可见状态保留旧值,完整失败原件仍保留;这里不承诺该动态切换行为。
建议分支示例展示焦点触发、过滤、模板、远程查询与建议选择。 完整说明。
Input 属性索引:固定 2.14.7 Autocomplete 的 Input 属性链接展开为 35 个原始属性。 完整说明。
局部请求错误插槽 ​
可选 error 插槽仅在当前请求错误存在时调用,接收只读 { error, stale, retry }。 完整说明。
retry 不接收参数,返回强制 reload 的 Promise,并遵守取消和卸载规则。 完整说明。
提供该插槽时,自有内容替换整个默认局部错误区;返回空内容也表示主动替换。 未提供时继续显示原错误文字、过期提示和默认重试按钮。无 error 的单独 stale 状态 不调用此插槽;empty、loading 和其他基础插槽继续使用原作用域。
以下完整 TS/JS 示例先制造失败,再等待插槽 retry 的返回结果;成功后可再次制造 更新失败,观察旧结果与模型保留。每次挂载使用独立子 app 和本地 provider。
局部错误定制、等待重试与过期恢复
<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: 'AsamRemoteAutocompleteDemoLocalErrorExample' },
__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: 'AsamRemoteAutocomplete-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: 'AsamRemoteAutocompleteChildLocalErrorExample' },
__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)('');
const control: any = (0, vue_3.ref)();
const busy: any = (0, vue_3.ref)(false), result: any = (0, vue_3.ref)('');
const dataSource: any = (0, ui_1.defineAsamOptions)().api({
api: transport.api,
params: undefined,
transform: (rows?: any) => rows,
fieldNames: { label: 'label', value: 'value' }
});
const source: any = () => dataSource;
(0, vue_3.onMounted)(async () => {
const response: any = await control.value?.reload();
result.value = response?.status ?? 'cancelled';
});
async function recover(retry?: any) {
busy.value = true;
transport.failing.value = false;
try {
const response: any = await retry();
result.value = response.status;
}
finally {
busy.value = false;
}
}
async function failAgain() {
busy.value = true;
transport.failing.value = true;
try {
const response: any = await control.value?.reload({ force: true });
result.value = response?.status ?? 'cancelled';
}
finally {
busy.value = false;
}
}
return (_ctx?: any, _cache?: any) => {
return ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("section", _hoisted_1, [
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamRemoteAutocomplete), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event?: any) => ((value).value = $event)),
source: source,
"trigger-on-focus": false
}, {
error: (0, vue_2.withCtx)(({ error, stale, retry }: any) => [
(0, vue_2.createElementVNode)("div", _hoisted_2, [
(0, vue_2.createElementVNode)("p", _hoisted_3, (0, vue_2.toDisplayString)(error.message) + "(" + (0, vue_2.toDisplayString)(error.kind) + ")", 1 /* TEXT */),
stale
? ((0, vue_2.openBlock)(), (0, vue_2.createElementBlock)("p", _hoisted_4, "已保留上次成功结果。"))
: (0, vue_2.createCommentVNode)("v-if", true),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: busy.value,
onClick: ($event?: any) => (recover(retry))
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[1] || (_cache[1] = [
(0, vue_2.createTextVNode)(" 恢复并重试 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"])
])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_2.createVNode)((0, vue_2.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: busy.value,
onClick: failAgain
}, {
default: (0, vue_2.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_2.createTextVNode)("模拟更新失败", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled"]),
(0, vue_2.createElementVNode)("p", _hoisted_5, (0, vue_2.toDisplayString)(result.value), 1 /* TEXT */),
(0, vue_2.createElementVNode)("p", _hoisted_6, " 请求 " + (0, vue_2.toDisplayString)((0, vue_2.unref)(transport).calls.value) + " 次,字典刷新 " + (0, vue_2.toDisplayString)((0, vue_2.unref)(transport).refreshes.value) + " 次 ", 1 /* TEXT */),
(0, vue_2.createElementVNode)("pre", _hoisted_7, (0, vue_2.toDisplayString)(value.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-277dda73";
},
"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-277dda73] {
display: grid;
gap: var(--asam-space-md);
}
p[data-v-277dda73]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
<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: 'AsamRemoteAutocompleteDemoLocalErrorExample' }, {
__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: 'AsamRemoteAutocomplete-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: 'AsamRemoteAutocompleteChildLocalErrorExample' }, {
__name: 'Child',
props: { transport: { type: Object, required: true } },
setup(__props) {
const props = __props;
const transport = props.transport;
const value = (0, vue_2.ref)('');
const control = (0, vue_2.ref)();
const busy = (0, vue_2.ref)(false), result = (0, vue_2.ref)('');
const dataSource = (0, ui_1.defineAsamOptions)().api({ api: transport.api, params: undefined });
const source = () => dataSource;
(0, vue_2.onMounted)(async () => {
const response = await control.value?.reload();
result.value = response?.status ?? 'cancelled';
});
async function recover(retry) {
busy.value = true;
transport.failing.value = false;
try {
const response = await retry();
result.value = response.status;
}
finally {
busy.value = false;
}
}
async function failAgain() {
busy.value = true;
transport.failing.value = true;
try {
const response = await control.value?.reload({ force: true });
result.value = response?.status ?? 'cancelled';
}
finally {
busy.value = false;
}
}
return (_ctx, _cache) => {
return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("section", _hoisted_1, [
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamRemoteAutocomplete), {
ref_key: "control",
ref: control,
modelValue: value.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((value).value = $event)),
source: source,
"trigger-on-focus": false
}, {
error: (0, vue_1.withCtx)(({ error, stale, retry }) => [
(0, vue_1.createElementVNode)("div", _hoisted_2, [
(0, vue_1.createElementVNode)("p", _hoisted_3, (0, vue_1.toDisplayString)(error.message) + "(" + (0, vue_1.toDisplayString)(error.kind) + ")", 1 /* TEXT */),
stale
? ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)("p", _hoisted_4, "已保留上次成功结果。"))
: (0, vue_1.createCommentVNode)("v-if", true),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: busy.value,
onClick: $event => (recover(retry))
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[1] || (_cache[1] = [
(0, vue_1.createTextVNode)(" 恢复并重试 ", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"])
])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["modelValue"]),
(0, vue_1.createVNode)((0, vue_1.unref)(ui_1.AsamButton), {
type: "default",
"native-type": "button",
disabled: busy.value,
onClick: failAgain
}, {
default: (0, vue_1.withCtx)(() => [...(_cache[2] || (_cache[2] = [
(0, vue_1.createTextVNode)("模拟更新失败", -1 /* CACHED */)
]))]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled"]),
(0, vue_1.createElementVNode)("p", _hoisted_5, (0, vue_1.toDisplayString)(result.value), 1 /* TEXT */),
(0, vue_1.createElementVNode)("p", _hoisted_6, " 请求 " + (0, vue_1.toDisplayString)((0, vue_1.unref)(transport).calls.value) + " 次,字典刷新 " + (0, vue_1.toDisplayString)((0, vue_1.unref)(transport).refreshes.value) + " 次 ", 1 /* TEXT */),
(0, vue_1.createElementVNode)("pre", _hoisted_7, (0, vue_1.toDisplayString)(value.value), 1 /* TEXT */)
]));
};
}
});
exports.default.__scopeId = "data-v-1f3fc1ef";
},
"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-1f3fc1ef] {
display: grid;
gap: var(--asam-space-md);
}
p[data-v-1f3fc1ef]:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
局部与全局浮层 ​
基础示例使用默认的全局挂载;局部挂载示例展示显式配置的 teleported 或 appendTo。先打开控件浮层,再观察其所在容器。挂载位置与控件值、请求协议互相独立。
API
属性 AsamRemoteAutocompleteProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
source | — | (query: string) => AsamOptionsSource<V, I, "api" | "request"> | — |
active | 暂停请求并保留最后一次成功结果。 | boolean | undefined | true |
form | 原生 form 能力。 | string | undefined | — |
ariaLabel | 原生 ariaLabel 能力。 | string | undefined | — |
id | 原生 id 能力。 | string | undefined | — |
popperClass | 原生 popperClass 能力。 | (AsamRemoteAutocompleteProps<V, I>)["popperClass"] | false |
popperStyle | 原生 popperStyle 能力。 | import("vue").StyleValue | undefined |
placement | 原生 placement 能力。 | enum"top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end"完整类型:(AsamRemoteAutocompleteProps<V, I>)["placement"] | — |
popperOptions | 实际建议面板的 Popper 定位修饰符与配置。 | (AsamRemoteAutocompleteProps<V, I>)["popperOptions"] | — |
showArrow | 是否显示建议面板箭头,默认 true。 | boolean | undefined | false |
appendTo | 原生 appendTo 能力。 | string | HTMLElement | undefined | — |
teleported | 原生 teleported 能力。 | boolean | undefined | undefined |
disabled | 原生 disabled 能力。 | boolean | undefined | undefined |
tabindex | 原生 tabindex 能力。 | string | number | undefined | — |
size | 显式控件密度;省略时保留继承。 | enum"large" | "big" | "default" | "small"完整类型:AsamControlSize | undefined | — |
type | 原生 type 能力。 | enum"number" | "text" | "email" | "search" | "tel" | "url" | "textarea" | "password"完整类型:(AsamRemoteAutocompleteProps<V, I>)["type"] | — |
name | 原生 name 能力。 | string | undefined | — |
max | — | (string | number) | undefined | — |
modelValue | 字符串或数字输入值。 | string | number | undefined | — |
formatter | 原生 formatter 能力。 | ((value: string) => string) | undefined | — |
rows | 原生 rows 能力。 | number | undefined | — |
resize | 原生 resize 能力。 | enum"horizontal" | "vertical" | "none" | "both"完整类型:"horizontal" | "vertical" | "none" | "both" | undefined | — |
min | 原生输入的上下界和步长,补充 InputProps 未声明的属性。 | (string | number) | undefined | — |
autofocus | 原生 autofocus 能力。 | boolean | undefined | false |
validateEvent | 原生 validateEvent 能力。 | boolean | undefined | undefined |
clearable | 原生 clearable 能力。 | boolean | undefined | false |
step | — | (string | number) | undefined | — |
clearIcon | 原生 clearIcon 能力。 | (AsamRemoteAutocompleteProps<V, I>)["clearIcon"] | — |
prefixIcon | 原生 prefixIcon 能力。 | (AsamRemoteAutocompleteProps<V, I>)["prefixIcon"] | — |
readonly | 原生 readonly 能力。 | boolean | undefined | false |
placeholder | 原生 placeholder 能力。 | string | undefined | — |
autocomplete | 原生 autocomplete 能力。 | string | undefined | — |
debounce | 原生 debounce 能力。 | number | undefined | — |
fitInputWidth | 原生 fitInputWidth 能力。 | boolean | undefined | false |
suffixIcon | 原生 suffixIcon 能力。 | (AsamRemoteAutocompleteProps<V, I>)["suffixIcon"] | — |
inputStyle | 原生 inputStyle 能力。 | import("vue").StyleValue | undefined |
inputmode | 原生 inputmode 能力。 | enum"text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal"完整类型:"text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined | — |
modelModifiers | 原生 modelModifiers 能力。 | (AsamRemoteAutocompleteProps<V, I>)["modelModifiers"] | — |
maxlength | 原生 maxlength 能力。 | string | number | undefined | — |
minlength | 原生 minlength 能力。 | string | number | undefined | — |
autosize | 原生 autosize 能力。 | (AsamRemoteAutocompleteProps<V, I>)["autosize"] | false |
parser | 原生 parser 能力。 | ((value: string) => string) | undefined | — |
showPassword | 原生 showPassword 能力。 | boolean | undefined | false |
showWordLimit | 原生 showWordLimit 能力。 | boolean | undefined | false |
wordLimitPosition | 原生 wordLimitPosition 能力。 | enum"outside" | "inside"完整类型:"outside" | "inside" | undefined | — |
containerRole | 原生 containerRole 能力。 | string | undefined | — |
countGraphemes | 原生 countGraphemes 能力。 | ((value: string) => number) | undefined | — |
triggerOnFocus | 原生 triggerOnFocus 能力。 | boolean | undefined | undefined |
selectWhenUnmatched | 原生 selectWhenUnmatched 能力。 | boolean | undefined | false |
hideLoading | 原生 hideLoading 能力。 | boolean | undefined | false |
highlightFirstItem | 原生 highlightFirstItem 能力。 | boolean | undefined | false |
loopNavigation | 原生 loopNavigation 能力。 | boolean | undefined | undefined |
maxSuggestions | ASAM 静态或远程选项的最大建议数;不截断原生建议项。 | number | undefined | — |
事件 AsamRemoteAutocompleteEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
success | — | [options: readonly AsamOption<V, I>[]] | — |
error | — | [error: AsamDataError] | — |
update:modelValue | — | [value: string | number] | — |
input | — | [value: string | number] | — |
change | — | [value: string | number] | — |
select | 匹配到的原建议项,或原生未匹配时按 Enter 返回的纯 value 数据。 | [item: { value: string | number; } | AsamOption<V, I>] | — |
clear | — | (AsamRemoteAutocompleteEmits<V, I>)["clear"] | — |
focus | — | [event: FocusEvent] | — |
blur | — | [event: FocusEvent] | — |
compositionstart | — | [event: CompositionEvent] | — |
compositionupdate | — | [event: CompositionEvent] | — |
compositionend | — | [event: CompositionEvent] | — |
mouseenter | — | [event: MouseEvent] | — |
mouseleave | — | [event: MouseEvent] | — |
keydown | — | [event: Event | KeyboardEvent] | — |
插槽 AsamRemoteAutocompleteSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | ((props: { item: AsamOption<V, I>; }) => unknown) | undefined | — |
prefix | — | (() => unknown) | undefined | — |
suffix | — | (() => unknown) | undefined | — |
prepend | — | (() => unknown) | undefined | — |
append | — | (() => unknown) | undefined | — |
header | — | (() => unknown) | undefined | — |
footer | — | (() => unknown) | undefined | — |
loading | — | (() => unknown) | undefined | — |
error | 替换本地错误区域;重试返回现有强制重新加载的 Promise。 | (AsamRemoteAutocompleteSlots<V, I>)["error"] | — |
实例方法与状态 AsamRemoteAutocompleteExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
reload | — | (options?: { readonly force?: boolean; }) => Promise<AsamReloadResult<readonly AsamOption<V, I>[]>> | — |
cancel | — | () => void | — |
highlightedIndex | — | number | — |
activated | — | boolean | — |
loading | — | boolean | — |
inputRef | — | (AsamRemoteAutocompleteExpose<V, I>)["inputRef"] | — |
popperRef | — | (AsamRemoteAutocompleteExpose<V, I>)["popperRef"] | — |
suggestions | — | (AsamRemoteAutocompleteExpose<V, I>)["suggestions"] | — |
focus | — | () => void | — |
blur | — | () => void | — |
close | — | () => void | — |
highlight | — | (index: number) => void | — |
getData | — | (query: string) => Promise<void> | — |
handleSelect | — | (AsamRemoteAutocompleteExpose<V, I>)["handleSelect"] | — |
handleKeyEnter | — | () => Promise<void> | — |
用法与契约补充说明 ​
浮层、完整建议项与错误恢复 ​
popperOptions 和 showArrow 直接作用于实际建议浮层。下面的完整示例关闭箭头、设置偏移,使用 header/footer/loading 和默认建议插槽。选择建议会更新输入模型为其 label,select 返回规范化选项及原始 raw 成员;选项 value 与输入文本不必相同。勾选“模拟接口失败”后强制重载可观察陈旧状态,取消失败选项后再次重载恢复。
浮层、完整建议项与错误恢复 ​
同一示例的实例按钮支持聚焦、失焦、关闭建议、读取全部建议、高亮首项或取消高亮、
选择首项以及处理 Enter。getData('') 通过本例 source 请求空查询,返回当前完整建议;
handleSelect 使用实际建议对象,模型提交其 label,事件保留 value 与 raw。
高亮首项后调用 handleKeyEnter 提交该项;实时 highlightedIndex、activated、
loading 与建议列表可用“读取实例状态”观察。实例控制放在 append 插槽内,避免外部点击先关闭建议;按钮阻止 mousedown 抢走输入焦点,
让实例操作保持可观察;失焦和关闭仍由各自公开方法执行。
数据来源与覆盖 ​
来源必须由 defineAsamOptions 的 api 或 request 工厂创建;静态来源不适用。映射、同步 transform 和可选 cache 写在 source 工厂内;组件不另收 api/request/dataSource/dictType。即使是 JavaScript 消费端,同时传 options、fetchSuggestions、remoteSuggestions、valueKey 或第二个数据入口也会作为配置错误拒绝,避免绕过既有来源。
生命周期、事件与实例 ​
active=false 暂停请求并保留上次成功数据;reload({ force: true }) 请求新数据,cancel() 取消当前请求。success 返回规范化选项数组,error 返回 AsamDataError;旧成功数据更新失败时组件显示过期状态。reload 的 status 为 success、error 或 cancelled;不能把取消当作成功。
生命周期、事件与实例 ​
输入请求保持当前 query;旧请求即使忽略取消后迟到,也不能覆盖新 query 的数据。失败保留上次成功的建议并显示过期提示,首个失败保持空数据。reload 成功后同步更新可见建议,不额外发送第二次请求。cancel 不清空已成功建议,也不把迟到结果当成功;一般 scope/epoch 失效沿用数据 provider 的隔离规则。
插槽与基础能力 ​
default 插槽接收 { item: AsamOption<V, I> };prefix、suffix、prepend、append、header、footer、loading 七个命名插槽完整沿用基础自动补全。默认建议过滤 disabled 项,并受 maxSuggestions 的正整数限制;没有自定义插槽时显示选项 label。
模型修饰符与输入状态 ​
v-model.lazy 沿用当前基础自动补全的行为:输入时即更新 modelValue,并将当前 query 发送给 source;按 Tab 失焦后发出 change,模型保持已提交值。选择建议会立即提交其 label。示例将请求记录、模型与 input/change 并排展示,可输入新文本后按 Tab 观察事件时序。只读和禁用阻止编辑;min/max/step 传给实际 input,示例文本输入不会因此执行数字范围校验。所有接口在本地运行。
建议查询参数的完整消费者 ​
native-data 的“展示建议查询协议”在原示例中增加独立输入,直接消费同一个公开远端自动补全入口;本地查询返回 Alpha、Beta、禁用的 Disabled 和 Delta,规范化后显示可用建议。原示例的事件、浮层和实例按钮仍然保留。新增实例操作放在真实 append 插槽内,展开后从输入上方操作;外部普通按钮点击会按原生规则关闭建议,不能据此观察高亮导航。
建议查询参数的完整消费者 ​
在消费包含 UI026 未匹配选择修正的兼容正常候选时,select 事件为“完整匹配建议或 { value: string | number }”。selectWhenUnmatched=true 的空建议 Enter 可返回仅有 value 的对象;默认和 false 不产生这次选择。读取 raw 或 label 前先用 'raw' in item 缩窄。匹配选项的原始业务对象、默认插槽 item、suggestions、handleSelect 参数及 success 仍保持完整选项,不能用仅有 value 的对象替代。
建议查询参数的完整消费者 ​
native-data 的“展示选择载荷契约”可独立核对六种匹配来源,以及字符串/数字空建议的默认、false、true 策略和实际键盘 Enter。匹配事件保持 suggestions 中同一完整对象;远程来源的 raw 是数据归一化后复制并冻结的业务快照,与 success 中的 raw 保持同一引用,不会冻结宿主返回的原对象。默认插槽仍可直接读取完整建议,未匹配事件则先判断 raw 是否存在。
原生输入属性与模型 ​
固定 2.14.7 原生 Autocomplete 在 onMounted 中把输入 role 设为 textbox;因此初次 containerRole=searchbox 不改变这次挂载后的 textbox。示例另外切换已挂载输入的角色为 group,可观察实际属性更新,而外层 autocomplete 的 combobox 不变。这项生命周期边界保留,不把普通 Input 的角色表现直接套到 Autocomplete。
原生输入属性与模型 ​
“来源生命周期”使用同一个公开 RemoteAutocomplete 验证 source(query) 创建 API 或 URL request 描述,实际查询进入参数。请求开关覆盖省略、true 和 false;重载覆盖省略选项、force=false 和 force=true。可持有响应、取消后迟到完成、模拟请求失败并恢复,公开 suggestions 保留完整业务 raw,取消和停用不清除已选择模型。URL 来源通过独立消费应用的 provider.request 承接,示例不改变其他消费者的 provider。
原生输入属性与模型 ​
“建议外观协议”展示 large/big/default/small 四档尺寸。省略 size 时继承同一消费应用中的 ConfigProvider,提供者尺寸可实时改变;输入显式尺寸优先。clearable 覆盖省略、true、false,以及空值、只读和禁用时的清除按钮表现。clearIcon、prefixIcon、suffixIcon 可传 Vue 组件或本应用注册的字符串名称;示例在独立消费应用内注册图标,不修改其他应用的注册表。inputStyle 可使用 CSS 对象、CSS 文本或样式数组,恢复省略会清除已有内联覆盖。清除按钮通过真实点击更新模型并触发 clear,建议来源仍返回完整成员 raw。
原生输入属性与模型 ​
建议格式协议:原 TS/JS native-data 示例的“展示建议格式协议”入口在独立 provider 应用内演示 formatter、parser 和 modelModifiers。可以切换省略、仅格式化、格式化与解析配对,以及空对象、trim、number、lazy 和组合;对照原生显示、input/change、受控模型与完整来源建议。格式化仅影响显示,配对 parser 将显示值还原到模型和查询;number 的 input/change 保留原生规范化文本,受控模型经 Vue 的模型修饰符转为数值,非数值文本仍保留。含 lazy 的配置同样在 input 时提交模型;lazy-trim-number 的 input/query 保留输入原文,模型经 Vue 修饰符归一化,change 保留原生规范化文本。入口保留原示例和实例,关闭标记通过省略键实现;移除格式化后,在下一次模型值变更时恢复原生显示。
原生输入属性与模型 ​
修正后的候选对省略 validateEvent 保留 undefined,使基础组件的默认验证参与生效;显式 false 仍关闭验证。普通与 lazy 配置分别记录 input 后的模型、change/blur 及真实校验结果,两者都不以失焦作为模型首次提交的前提;错误值恢复有效后可观察成功状态。原省略默认未参与验证的失败记录继续保留。
原生输入属性与模型 ​
建议输入实例协议:原 TS/JS native-data 示例的“展示建议输入实例协议”入口在独立 provider 应用内读取公开 inputRef。input、textarea、ref、select、clear、resizeTextarea、isComposing、passwordVisible 和 textareaStyle 属于该命名输入实例,不能直接调用 Remote 根上的同名方法。可观察真实聚焦/失焦、键盘 payload、原生鼠标事件对象、组合事件期间暂缓模型提交、结束时单次提交、输入/文本域引用切换、密码状态及按原生值重新测量文本域。组合事件由浏览器 DOM 协议模拟,不声称已验证操作系统输入法。
原生输入属性与模型 ​
source(query) 是唯一建议来源:fetchSuggestions(回调或数组)、valueKey 及其短横线写法在公开类型中排除,JavaScript 初始化传入时会在任何请求之前抛出 config 错误。已淘汰的 label 改用 ariaLabel,popper-append-to-body 改用 teleported 与 appendTo;旧名字不属于支持的公开接口,未知 HTML 属性透传不构成兼容承诺。正常安装包的独立 SSR 初始化协议验证完整拒绝列表,现有浏览器协议继续验证实际 aria-label、弹层目的地和 source(query) 请求;SSR 结果不声称证明客户端更新时的拒绝。
原生输入属性与模型 ​
官方输入布局协议保留原 with-icon、mixed-input、various-size 的所有分支:默认尺寸省略与 large/small 各自组合无图标、前图标、后图标;另覆盖 ASAM big 档。前后图标分别通过组件属性和插槽呈现。附加内容分别呈现 Http://、.com,以及前 Select/后搜索按钮和前搜索按钮/后 Select;三项选择使用公开 AsamSelect 与 AsamOption,按钮使用 AsamButton,真实选择及点击不改建议输入模型,最后真实输入 Layout 经 source(query) 获得完整 raw。此处只验证数据组件的插槽组合,不代替 Select 的整卡验收。
原生输入属性与模型 ​
Input 属性索引:固定 2.14.7 Autocomplete 的 Input 属性链接展开为 35 个原始属性。除已经共同确认淘汰的 label 改用 ariaLabel 外,其余 34 项由原生输入、建议格式、建议文本、验证、官方输入组合与布局协议逐项承接;name 复用同一公开属性,不另造重复接口。输入类型专属的 rows、autosize、resize、长度与计数条件保持原生边界,min、max、step 透传属性而不替宿主裁剪值。命名输入实例的方法与 password-icon 的独立 AsamPassword 组合见各自协议,不能把索引解释为 Remote 根新增这些接口。
局部请求错误插槽 ​
可选 error 插槽仅在当前请求错误存在时调用,接收只读 { error, stale, retry }。
error 与本实例 error 事件中的 AsamDataError 为同一对象,保留 cause、kind、
message 与 notified;渲染插槽不会再次通知 provider。stale 表示保留的数据已过期。
更多参数与事件说明 ​
生命周期、事件与实例 ​
公开事件完整保留 update:modelValue、input、change、select、clear、focus、blur、compositionstart/compositionupdate/compositionend、mouseenter/mouseleave 和 keydown,另外增加 success/error。composition 事件保留 CompositionEvent,键盘事件保留原事件;focus/blur 为 FocusEvent。基础只读、禁用、清空、.lazy、输入属性与四档 ASAM 尺寸仍适用。
生命周期、事件与实例 ​
完整 native-data 示例在同一观察区记录事件名称与实际载荷:模型/input/change 保留输入值, clear 无事件参数,select 保留规范化选项与 raw,success 是成功的选项数组,error 保留 kind/message。DOM 事件记录其具体类型、constructor、isTrusted,以及键盘 key 或 composition data。 滚动观察区显示完整记录,原始事件本身仍由对应监听器接收。
插槽与基础能力 ​
上面的完整示例同时展示八个插槽:prefix 的“找”、suffix 的“本地”和 prepend 的“成员” 位于真实 Input 对应区域,append 承载实例控制;header/footer 位于建议面板,loading 在实际请求等待时替换列表内容。默认插槽读取具体 item.label 与 item.raw.id,选择行为仍由 原生建议项触发。七个命名插槽没有额外 scope 参数。
原生输入属性与模型 ​
固定 Element Plus 2.14.7 存在原生兼容限制:先编辑 text/password,再将同一输入元素动态切到 number,后续编辑会因旧光标快照调用不支持的 setSelectionRange 而触发 InvalidStateError。原生、基础和远端自动补全的实际对照均出现该错误;模型更新与范围、步长状态正确不代表这条动态路径无异常。ASAM 沿用原生输入行为,保留这项兼容限制。示例的“全新挂载数字输入”分支已独立验证 number 的模型与 min/max/step 行为,该结果不覆盖上述动态切换限制;原失败证据保留。
原生输入属性与模型 ​
生命周期的“建议浮层协议”展示 placement 六个原生方向、popperClass 与对象/字符串/组合 popperStyle、teleported 就地或传送、appendTo 选择器或实际元素,以及 fitInputWidth 固定输入宽度和最小宽度。每次打开配置都重挂载同一公开 RemoteAutocomplete,并通过真实 source 返回完整成员建议。省略配置用于观察原生默认;containerRole 是输入角色参数,浮层仍有自己的 listbox/region 角色。
原生输入属性与模型 ​
建议文本能力:原 TS/JS native-data 示例的“展示建议文本能力”入口可切换 showWordLimit、wordLimitPosition、countGraphemes、showPassword 与 autosize。独立 provider 应用对照原生字数和 Intl.Segmenter 字素计数、ZWJ 家庭表情与代理对、超限插入恢复、完整来源 raw 建议、只读/禁用计数隐藏、密码实际显隐及模型不变、文本域布尔与 minRows/maxRows 自适应。切换 text/textarea 时由原生输入替换对应 DOM,其余同类交互使用同一元素;高度来自内容和公开配置,不强制覆写。
原生输入属性与模型 ​
建议验证协议:原 TS/JS native-data 示例的“展示建议验证协议”入口在独立 provider 应用内组合公开 AsamBaseForm/AsamFormItem,切换 validateEvent 省略/真/假及普通/lazy 提交。对照真实规则调用、表单 validate 事件、错误信息、修复成功和模型/input/change;公开默认值应继承基础验证参与。省略默认值的实际接收行为随当前安装产物记录,不以挂载或声明存在代替验证。
原生输入属性与模型 ​
官方输入组合协议:原 TS/JS native-data 的“展示官方输入组合协议”补齐固定 2.14.7 Input 官方示例中的组合分支:text 和 textarea 的 clearable、自定义 clearIcon、inside/outside 字数计数,以及 UTF-16 与 Intl.Segmenter 字素上限。每个组合保留完整来源 raw 和受控模型;四个字素输入不能额外提交。password-icon 通过独立 AsamPassword 的 visible 布尔插槽组合承接;Remote 根及普通 AsamInput 均未增设该插槽。密码切换保持同一输入和模型。
原生输入属性与模型 ​
固定 2.14.7 的基础输入、禁用、formatter/parser、两行文本域及 autosize 布尔/对象示例分别由已有完整协议承接:基础输入与禁用见原生输入协议,显示/解析与真实来源见建议格式协议,两行默认和四行显式 rows 分别观察,自动高度覆盖 true 与 minRows=2/maxRows=4。这里复用已运行的原 TS/JS 文件和实际 Story 观察,不把官方示例文件存在本身当作行为完成。
原生输入属性与模型 ​
官方建议分支协议完整展示基础示例的两个独立模型与默认 focus/仅输入触发、前缀忽略大小写过滤、真实选择及清除;模板示例包含可点击的 suffix 图标、建议值和完整链接;远程搜索使用 ASAM source 承接请求与原始数据。两种自定义加载 SVG 保留官方圆环及四圆点的几何与动画,并共享模型。页眉与页脚分开呈现,页脚 Clear 真实清空模型并调用公开 getData('') 重新读取全部七项,保留原链接。为稳定演示,将官方随机等待改为固定 60ms,加载图标用“完成官方加载”按钮控制完成;teleported=false 与 debounce=0 仅用于该示例的局部观察。回调与 value-key 已迁移至 source 与 fieldNames,不宣称旧接口仍受支持。
局部请求错误插槽 ​
retry() 不接收参数,直接返回现有 reload({ force: true }) 的 Promise,结果为
AsamReloadResult<readonly AsamOption<V, I>[]> 的 success、error 或 cancelled 分支。
重试遵守 active、当前来源、取消和卸载规则,不改写模型。
成功重试还等待原生建议刷新,并复用成功结果,不额外请求。
继承能力
本入口的独有 API 见上表,基础能力见本站对应页面。
参数与事件补充说明
由 source(query) 创建唯一 api/request 来源,query 必须进入实际请求参数。 来源接管 options/fetchSuggestions/remoteSuggestions/valueKey;不能再传第二个来源。 popperOptions/showArrow、基础输入 props、事件和插槽保留其公开契约。
参数与事件说明
source
必填:是;声明来源:数据 / provider 协议。
source 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(query: string): AsamOptionsSource<V, I, "api" | "request">
active
必填:否;声明来源:数据 / provider 协议。
active 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
true(源码表达式;ASAM 声明)form
必填:否;声明来源:ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
ariaLabel
必填:否;声明来源:ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
id
必填:否;声明来源:ASAM 声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式:undefined(2.14.7;源码事实,未作为 ASAM 运行实测)
popperClass
必填:否;声明来源:ASAM 声明。
popperClass 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false
默认值与来源
false(隐式 Boolean 默认;已安装组件)固定上游文档默认:''(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
popperStyle
必填:否;声明来源:ASAM 声明。
popperStyle 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
默认值与来源
undefined(源码表达式;ASAM 声明)固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
placement
必填:否;声明来源:ASAM 声明。
placement 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:"top" / "bottom" / "top-start" / "top-end" / "bottom-start" / "bottom-end"
默认值与来源
未知 / 未声明固定上游文档默认:bottom-start(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:'bottom-start'(2.14.7;源码事实,未作为 ASAM 运行实测)
popperOptions
必填:否;声明来源:ASAM 声明。
popperOptions 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
popperOptions.placement:PublicMember<NonNullable<(AsamRemoteAutocompleteProps<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<(AsamRemoteAutocompleteProps<V, I>)["popperOptions"]>, "modifiers">— 依赖声明popperOptions.strategy:PublicMember<NonNullable<(AsamRemoteAutocompleteProps<V, I>)["popperOptions"]>, "strategy">— 依赖声明枚举:
"fixed"/"absolute"popperOptions.onFirstUpdate:PublicMember<NonNullable<(AsamRemoteAutocompleteProps<V, I>)["popperOptions"]>, "onFirstUpdate">— 依赖声明事件参数:
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamRemoteAutocompleteProps<V, I>)["popperOptions"]>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
默认值与来源
未知 / 未声明固定上游文档默认:{}(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
showArrow
必填:否;声明来源:ASAM 声明。
showArrow 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(隐式 Boolean 默认;已安装组件)固定上游文档默认:true(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:true(2.14.7;源码事实,未作为 ASAM 运行实测)
appendTo
必填:否;声明来源:ASAM 声明。
appendTo 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:大型实例类型;完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
teleported
必填:否;声明来源:ASAM 声明。
teleported 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
undefined(源码表达式;ASAM 声明)固定上游文档默认:true(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
disabled
必填:否;声明来源:ASAM 声明。
disabled 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
undefined(源码表达式;ASAM 声明)固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:undefined(2.14.7;源码事实,未作为 ASAM 运行实测)
tabindex
必填:否;声明来源:ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:0(2.14.7;源码事实,未作为 ASAM 运行实测)
size
必填:否;声明来源:ASAM 声明。
size 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:"large" / "big" / "default" / "small"
type
必填:否;声明来源:ASAM 声明。
type 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:"number" / "text" / "email" / "search" / "tel" / "url" / "textarea" / "password"
默认值与来源
未知 / 未声明固定上游文档默认:text(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:'text'(2.14.7;源码事实,未作为 ASAM 运行实测)
name
必填:否;声明来源:ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
max
必填:否;声明来源:ASAM 声明。
modelValue
必填:否;声明来源:ASAM 声明。
formatter
必填:否;声明来源:ASAM 声明。
formatter 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(value: string): string
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
rows
必填:否;声明来源:ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认:2(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:2(2.14.7;源码事实,未作为 ASAM 运行实测)
resize
必填:否;声明来源:ASAM 声明。
resize 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:"horizontal" / "vertical" / "none" / "both"
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
min
必填:否;声明来源:ASAM 声明。
autofocus
必填:否;声明来源:ASAM 声明。
autofocus 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(隐式 Boolean 默认;已安装组件)固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
validateEvent
必填:否;声明来源:ASAM 声明。
validateEvent 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
undefined(源码表达式;ASAM 声明)固定上游文档默认:true(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:true(2.14.7;源码事实,未作为 ASAM 运行实测)
clearable
必填:否;声明来源:ASAM 声明。
clearable 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(隐式 Boolean 默认;已安装组件)固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
step
必填:否;声明来源:ASAM 声明。
clearIcon
必填:否;声明来源:ASAM 声明。
clearIcon 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(props: any, ctx: Parameters<Extract<NonNullable<(AsamRemoteAutocompleteProps<V, I>)["clearIcon"]>, (...args: never[]) => unknown>>[1]): any
clearIcon.__isFragment:undefined— 依赖声明clearIcon.__isTeleport:undefined— 依赖声明clearIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认:CircleClose(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:CircleClose(2.14.7;源码事实,未作为 ASAM 运行实测)
prefixIcon
必填:否;声明来源:ASAM 声明。
prefixIcon 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(props: any, ctx: Parameters<Extract<NonNullable<(AsamRemoteAutocompleteProps<V, I>)["prefixIcon"]>, (...args: never[]) => unknown>>[1]): any
prefixIcon.__isFragment:undefined— 依赖声明prefixIcon.__isTeleport:undefined— 依赖声明prefixIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
readonly
必填:否;声明来源:ASAM 声明。
readonly 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(隐式 Boolean 默认;已安装组件)固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
placeholder
必填:否;声明来源:ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
autocomplete
必填:否;声明来源:ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认:off(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:'off'(2.14.7;源码事实,未作为 ASAM 运行实测)
debounce
必填:否;声明来源:ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认:300(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:300(2.14.7;源码事实,未作为 ASAM 运行实测)
fitInputWidth
必填:否;声明来源:ASAM 声明。
fitInputWidth 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(隐式 Boolean 默认;已安装组件)固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
suffixIcon
必填:否;声明来源:ASAM 声明。
suffixIcon 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(props: any, ctx: Parameters<Extract<NonNullable<(AsamRemoteAutocompleteProps<V, I>)["suffixIcon"]>, (...args: never[]) => unknown>>[1]): any
suffixIcon.__isFragment:undefined— 依赖声明suffixIcon.__isTeleport:undefined— 依赖声明suffixIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
inputStyle
必填:否;声明来源:ASAM 声明。
inputStyle 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
默认值与来源
undefined(源码表达式;ASAM 声明)固定上游文档默认:{}(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码工厂(未执行):() => mutable({} as const)(2.14.7;源码事实,未作为 ASAM 运行实测)
inputmode
必填:否;声明来源:ASAM 声明。
inputmode 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:"text" / "email" / "search" / "tel" / "url" / "none" / "numeric" / "decimal"
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:undefined(2.14.7;源码事实,未作为 ASAM 运行实测)
modelModifiers
必填:否;声明来源:ASAM 声明。
modelModifiers 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
modelModifiers.lazy:true | undefined— 上游声明枚举:
truemodelModifiers.number:true | undefined— 上游声明枚举:
truemodelModifiers.trim:true | undefined— 上游声明枚举:
true
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码工厂(未执行):() => ({})(2.14.7;源码事实,未作为 ASAM 运行实测)
maxlength
必填:否;声明来源:ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
minlength
必填:否;声明来源:ASAM 声明。
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
autosize
必填:否;声明来源:ASAM 声明。
autosize 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
autosize.minRows:number | undefined— 上游声明autosize.maxRows:number | undefined— 上游声明
默认值与来源
false(隐式 Boolean 默认;已安装组件)固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:false(2.14.7;源码事实,未作为 ASAM 运行实测)
parser
必填:否;声明来源:ASAM 声明。
parser 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(value: string): string
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
showPassword
必填:否;声明来源:ASAM 声明。
showPassword 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(隐式 Boolean 默认;已安装组件)固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
showWordLimit
必填:否;声明来源:ASAM 声明。
showWordLimit 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(隐式 Boolean 默认;已安装组件)固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
wordLimitPosition
必填:否;声明来源:ASAM 声明。
wordLimitPosition 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:"outside" / "inside"
默认值与来源
未知 / 未声明固定上游文档默认:"inside"(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:'inside'(2.14.7;源码事实,未作为 ASAM 运行实测)
containerRole
必填:否;声明来源:ASAM 声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式:undefined(2.14.7;源码事实,未作为 ASAM 运行实测)
countGraphemes
必填:否;声明来源:ASAM 声明。
countGraphemes 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(value: string): number
默认值与来源
未知 / 未声明固定上游文档默认:未声明(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码未声明 default(2.14.7;源码事实,未作为 ASAM 运行实测)
triggerOnFocus
必填:否;声明来源:ASAM 声明。
triggerOnFocus 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
undefined(源码表达式;ASAM 声明)固定上游文档默认:true(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:true(2.14.7;源码事实,未作为 ASAM 运行实测)
selectWhenUnmatched
必填:否;声明来源:ASAM 声明。
selectWhenUnmatched 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(隐式 Boolean 默认;已安装组件)固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
hideLoading
必填:否;声明来源:ASAM 声明。
hideLoading 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(隐式 Boolean 默认;已安装组件)固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
highlightFirstItem
必填:否;声明来源:ASAM 声明。
highlightFirstItem 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
false(隐式 Boolean 默认;已安装组件)固定上游文档默认:false(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
loopNavigation
必填:否;声明来源:ASAM 声明。
loopNavigation 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
默认值与来源
undefined(源码表达式;ASAM 声明)固定上游文档默认:true(2.14.7;文档事实,实际默认以 ASAM 源码 / 安装包为准)
固定上游源码默认表达式:true(2.14.7;源码事实,未作为 ASAM 运行实测)
maxSuggestions
必填:否;声明来源:ASAM 声明。
AsamRemoteAutocompleteProps 公开类型视图
import type { Attrs } from 'vue';
import type { AsamRemoteAutocompleteProps, AsamValue, AsamRecord, AsamOptionsSource, AsamControlSize } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamRemoteAutocompleteProps
type PublicContract<V extends AsamValue = AsamValue, I extends object = AsamRecord> = {
readonly "source": (query: string) => AsamOptionsSource<V, I, "api" | "request">;
readonly "active"?: boolean | undefined;
readonly "form"?: string | undefined;
readonly "ariaLabel"?: string | undefined;
readonly "id"?: string | undefined;
readonly "popperClass"?: (AsamRemoteAutocompleteProps<V, I>)["popperClass"];
readonly "popperStyle"?: import("vue").StyleValue;
readonly "placement"?: (AsamRemoteAutocompleteProps<V, I>)["placement"];
readonly "popperOptions"?: (AsamRemoteAutocompleteProps<V, I>)["popperOptions"];
readonly "showArrow"?: boolean | undefined;
readonly "appendTo"?: string | HTMLElement | undefined;
readonly "teleported"?: boolean | undefined;
readonly "disabled"?: boolean | undefined;
readonly "tabindex"?: string | number | undefined;
readonly "size"?: AsamControlSize | undefined;
readonly "type"?: (AsamRemoteAutocompleteProps<V, I>)["type"];
readonly "name"?: string | undefined;
readonly "max"?: (string | number) | undefined;
readonly "modelValue"?: string | number | undefined;
readonly "formatter"?: ((value: string) => string) | undefined;
readonly "rows"?: number | undefined;
readonly "resize"?: "horizontal" | "vertical" | "none" | "both" | undefined;
readonly "min"?: (string | number) | undefined;
readonly "autofocus"?: boolean | undefined;
readonly "validateEvent"?: boolean | undefined;
readonly "clearable"?: boolean | undefined;
readonly "step"?: (string | number) | undefined;
readonly "clearIcon"?: (AsamRemoteAutocompleteProps<V, I>)["clearIcon"];
readonly "prefixIcon"?: (AsamRemoteAutocompleteProps<V, I>)["prefixIcon"];
readonly "readonly"?: boolean | undefined;
readonly "placeholder"?: string | undefined;
readonly "autocomplete"?: string | undefined;
readonly "debounce"?: number | undefined;
readonly "fitInputWidth"?: boolean | undefined;
readonly "suffixIcon"?: (AsamRemoteAutocompleteProps<V, I>)["suffixIcon"];
readonly "inputStyle"?: import("vue").StyleValue;
readonly "inputmode"?: "text" | "email" | "search" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
readonly "modelModifiers"?: (AsamRemoteAutocompleteProps<V, I>)["modelModifiers"];
readonly "maxlength"?: string | number | undefined;
readonly "minlength"?: string | number | undefined;
readonly "autosize"?: (AsamRemoteAutocompleteProps<V, I>)["autosize"];
readonly "parser"?: ((value: string) => string) | undefined;
readonly "showPassword"?: boolean | undefined;
readonly "showWordLimit"?: boolean | undefined;
readonly "wordLimitPosition"?: "outside" | "inside" | undefined;
readonly "containerRole"?: string | undefined;
readonly "countGraphemes"?: ((value: string) => number) | undefined;
readonly "triggerOnFocus"?: boolean | undefined;
readonly "selectWhenUnmatched"?: boolean | undefined;
readonly "hideLoading"?: boolean | undefined;
readonly "highlightFirstItem"?: boolean | undefined;
readonly "loopNavigation"?: boolean | undefined;
readonly "maxSuggestions"?: number | undefined;
};
参数与事件说明
success
必填:是;声明来源:数据 / provider 协议。
error
必填:是;声明来源:数据 / provider 协议。
update:modelValue
必填:是;声明来源:ASAM 声明。
input
必填:是;声明来源:ASAM 声明。
change
必填:是;声明来源:ASAM 声明。
select
必填:是;声明来源:ASAM 声明。
clear
必填:是;声明来源:ASAM 声明。
focus
必填:是;声明来源:ASAM 声明。
blur
必填:是;声明来源:ASAM 声明。
compositionstart
必填:是;声明来源:ASAM 声明。
compositionupdate
必填:是;声明来源:ASAM 声明。
compositionend
必填:是;声明来源:ASAM 声明。
mouseenter
必填:是;声明来源:ASAM 声明。
mouseleave
必填:是;声明来源:ASAM 声明。
keydown
必填:是;声明来源:ASAM 声明。
AsamRemoteAutocompleteEmits 公开类型视图
import type { AsamRemoteAutocompleteEmits, AsamValue, AsamOption, AsamDataError } from '@asam-ui/ui';
// AsamRemoteAutocompleteEmits
type PublicContract<V extends AsamValue = AsamValue, I extends object = object> = {
"success": [options: readonly AsamOption<V, I>[]];
"error": [error: AsamDataError];
"update:modelValue": [value: string | number];
"input": [value: string | number];
"change": [value: string | number];
"select": [item: { value: string | number; } | AsamOption<V, I>];
"clear": (AsamRemoteAutocompleteEmits<V, I>)["clear"];
"focus": [event: FocusEvent];
"blur": [event: FocusEvent];
"compositionstart": [event: CompositionEvent];
"compositionupdate": [event: CompositionEvent];
"compositionend": [event: CompositionEvent];
"mouseenter": [event: MouseEvent];
"mouseleave": [event: MouseEvent];
"keydown": [event: Event | KeyboardEvent];
};
参数与事件说明
default
必填:否;声明来源:ASAM 声明。
default 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(props: { item: AsamOption<V, I>; }): unknown
prefix
必填:否;声明来源:ASAM 声明。
prefix 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): unknown
suffix
必填:否;声明来源:ASAM 声明。
suffix 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): unknown
prepend
必填:否;声明来源:ASAM 声明。
prepend 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): unknown
append
必填:否;声明来源:ASAM 声明。
append 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): unknown
header
必填:否;声明来源:ASAM 声明。
header 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): unknown
footer
必填:否;声明来源:ASAM 声明。
footer 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): unknown
loading
必填:否;声明来源:ASAM 声明。
loading 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): unknown
error
必填:否;声明来源:数据 / provider 协议。
error 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(scope: Parameters<Extract<NonNullable<(AsamRemoteAutocompleteSlots<V, I>)["error"]>, (...args: never[]) => unknown>>[0]): unknown
AsamRemoteAutocompleteSlots 公开类型视图
import type { AsamRemoteAutocompleteSlots, AsamValue, AsamRecord, AsamOption, AsamDataError, AsamReloadResult } from '@asam-ui/ui';
// AsamRemoteAutocompleteSlots
type PublicContract<V extends AsamValue = AsamValue, I extends object = AsamRecord> = {
"default"?: ((props: { item: AsamOption<V, I>; }) => unknown) | undefined;
"prefix"?: (() => unknown) | undefined;
"suffix"?: (() => unknown) | undefined;
"prepend"?: (() => unknown) | undefined;
"append"?: (() => unknown) | undefined;
"header"?: (() => unknown) | undefined;
"footer"?: (() => unknown) | undefined;
"loading"?: (() => unknown) | undefined;
"error"?: (AsamRemoteAutocompleteSlots<V, I>)["error"];
};
实时继承基础建议实例;reload/cancel 不清空成功快照,迟到响应不能覆盖新请求。
参数与事件说明
reload
必填:是;声明来源:数据 / provider 协议。
reload 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(options?: { readonly force?: boolean; } | undefined): Promise<AsamReloadResult<readonly AsamOption<V, I>[]>>
cancel
必填:是;声明来源:数据 / provider 协议。
cancel 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): void
highlightedIndex
必填:是;声明来源:ASAM 声明。
activated
必填:是;声明来源:ASAM 声明。
activated 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
loading
必填:是;声明来源:ASAM 声明。
loading 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举:false / true
inputRef
必填:是;声明来源:ASAM 声明。
popperRef
必填:是;声明来源:ASAM 声明。
suggestions
必填:是;声明来源:ASAM 声明。
suggestions 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界:框架 / 平台类型;完整类型见公开类型视图。
focus
必填:是;声明来源:ASAM 声明。
focus 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): void
blur
必填:是;声明来源:ASAM 声明。
blur 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): void
close
必填:是;声明来源:ASAM 声明。
close 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): void
highlight
必填:是;声明来源:ASAM 声明。
highlight 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(index: number): void
getData
必填:是;声明来源:ASAM 声明。
getData 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(query: string): Promise<void>
handleSelect
必填:是;声明来源:ASAM 声明。
handleSelect 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(item: Parameters<Extract<NonNullable<(AsamRemoteAutocompleteExpose<V, I>)["handleSelect"]>, (...args: never[]) => unknown>>[0]): Promise<void>
handleKeyEnter
必填:是;声明来源:ASAM 声明。
handleKeyEnter 参数与事件数据
下列为声明可读视图;可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数:(): Promise<void>
AsamRemoteAutocompleteExpose 公开类型视图
import type { AsamRemoteAutocompleteExpose, AsamValue, AsamOption, AsamReloadResult } from '@asam-ui/ui';
// AsamRemoteAutocompleteExpose
type PublicContract<V extends AsamValue = AsamValue, I extends object = object> = {
"reload": (options?: { readonly force?: boolean; }) => Promise<AsamReloadResult<readonly AsamOption<V, I>[]>>;
"cancel": () => void;
readonly "highlightedIndex": number;
readonly "activated": boolean;
readonly "loading": boolean;
readonly "inputRef": (AsamRemoteAutocompleteExpose<V, I>)["inputRef"];
readonly "popperRef": (AsamRemoteAutocompleteExpose<V, I>)["popperRef"];
readonly "suggestions": (AsamRemoteAutocompleteExpose<V, I>)["suggestions"];
"focus": () => void;
"blur": () => void;
"close": () => void;
"highlight": (index: number) => void;
"getData": (query: string) => Promise<void>;
"handleSelect": (AsamRemoteAutocompleteExpose<V, I>)["handleSelect"];
"handleKeyEnter": () => Promise<void>;
};