使用方法

ComplexSelector 是一个弹层内容由你来画的字段。标签、触发器、弹出层、焦点归还和 changeAction 由它负责。默认插槽负责内容，参数是 value、commit、close 和 state。

commit 写入新值，并在提供了 changeAction 时执行它。动作还没结束时，触发器显示加载指示，插槽看到的是刚提交的值。在触发器上按 Arrow Down 会打开弹层。

<script setup lang="ts">
import { ComplexSelector } from '@astryx-vue/core/ComplexSelector'
import { ref } from 'vue'

const value = ref('Today')
</script>

<template>
  <ComplexSelector v-model="value" label="Deadline" :trigger-label="value">
    <template #default="{ commit, close }">
      <button type="button" @click="commit('Next week'); close()">
        Next week
      </button>
    </template>
  </ComplexSelector>
</template>

弹层会一直开着，直到插槽调用 commit。树可以用 TreeList。status、isDisabled、isRequired 和 description 与其他输入框的字段属性相同。

alignment 决定弹层沿打开方向怎么对齐。startIcon 在触发器开头放一个图标。variant="ghost" 去掉边框，触发器看起来像工具栏按钮。renderTrigger 或 trigger 插槽会换掉整个字段：把参数展开到你自己的控件上。handleRef 和模板 ref 都能调用 open、close、toggle 和 isOpen。

<script setup lang="ts">
import type { ComplexSelectorHandle } from '@astryx-vue/core/ComplexSelector'
import { ComplexSelector } from '@astryx-vue/core/ComplexSelector'
import { ref, shallowRef } from 'vue'

const value = ref('Today')
const selector = shallowRef<ComplexSelectorHandle | null>(null)
</script>

<template>
  <button type="button" @click="selector?.open()">
    Open
  </button>
  <ComplexSelector
    ref="selector"
    v-model="value"
    label="Deadline"
    start-icon="calendar"
    :trigger-label="value"
    variant="ghost"
  >
    <template #default="{ commit, close }">
      <button type="button" @click="commit('Next week'); close()">
        Next week
      </button>
    </template>
  </ComplexSelector>
</template>

解剖

部分	说明
字段	提供标签和可选辅助内容的字段外壳。
触发器	显示当前值或占位，并打开弹层的控件。
图标渲染的起始图标	可选的前导语义图标或图标组件，通过 Icon 绘制。
使用方渲染的起始内容	可选的任意插槽内容，直接画在触发器开头。
指示图标	尾部箭头，随弹层开合转动。
弹层	打开时画出并显示、关闭时隐藏的对话框表面。

示例

截止日期

Deadline

Choose a preset or set a custom date and time.

Today、Tomorrow 或 Next week，也可以自定义日期和时间。Apply 提交并关闭弹层。

树搜索

Destination

Search and browse nested folders.

在 Teams 和 Workspace 里搜索文件夹。选中文件夹后弹层关闭。