# 折叠组

## 使用方法

`CollapsibleGroup` 协调里面的 `Collapsible`。每一项都要有 `value`。进了组之后，单项自己的 `isOpen` 不再起作用。

`type="single"` 同时只展开一项。展开另一项会收起前一项，再点已展开的项会把它收起。值是字符串，全部收起时是 `''`。`type="multiple"` 每项各自开关，值是数组。`hasDividers` 在项与项之间画一条细线。开了分隔线又没写 `density` 时，内边距用 `balanced`。

```vue
<script setup lang="ts">
import { Collapsible, CollapsibleGroup } from '@astryx-vue/core/Collapsible'
</script>

<template>
  <CollapsibleGroup default-value="account" type="single">
    <Collapsible trigger="Account" value="account">
      Profile, email, and password.
    </Collapsible>
    <Collapsible trigger="Billing" value="billing">
      Invoices and payment method.
    </Collapsible>
  </CollapsibleGroup>
</template>
```

## 示例

### 密度

density 决定组里每一行的块级内边距。紧凑表面用 compact，页面内容用 balanced，页面上唯一的短列表用 spacious。

```vue
<script setup lang="ts">
import type { CollapsibleGroupDensity } from '@astryx-vue/core/Collapsible'
import { Collapsible, CollapsibleGroup } from '@astryx-vue/core/Collapsible'
import { Stack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'

const densities: Array<{ value: CollapsibleGroupDensity, label: string }> = [
  { value: 'compact', label: 'compact' },
  { value: 'balanced', label: 'balanced — the default' },
  { value: 'spacious', label: 'spacious' },
]

const sections = [
  { value: 'a', trigger: 'Region', body: 'Where your data is stored and processed. Changing region migrates existing data and can take up to an hour.' },
  { value: 'b', trigger: 'Retention', body: 'How long deleted items stay recoverable before being purged.' },
  { value: 'c', trigger: 'Audit log', body: 'Who can read the log, and how far back it reaches.' },
]
</script>

<template>
  <Stack :gap="5" :max-width="420">
    <Stack v-for="density in densities" :key="density.value" :gap="1">
      <Text type="supporting">
        {{ density.label }}
      </Text>
      <CollapsibleGroup type="single" has-dividers :density="density.value" default-value="a">
        <Collapsible v-for="section in sections" :key="section.value" :value="section.value">
          <template #trigger>
            <Text type="body" weight="semibold">
              {{ section.trigger }}
            </Text>
          </template>
          <Text type="body" color="secondary">
            {{ section.body }}
          </Text>
        </Collapsible>
      </CollapsibleGroup>
    </Stack>
  </Stack>
</template>
```

## 属性

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `type` | `'single' \| 'multiple'` | `'single'` | `single` 同时只展开一项。`multiple` 每项各自开关。 |
| `defaultValue` | `string \| string[]` | - | 组自己管状态时，一开始展开的项。 |
| `value` | `string \| string[]` | - | 受控的展开项。用 `v-model:value` 绑定。 |
| `hasDividers` | `boolean` | `false` | 在项与项之间画一条细线。 |
| `density` | `'compact' \| 'balanced' \| 'spacious'` | 有分隔线时为 `'balanced'` | 触发器和内容的内边距。 |
| `chevronPosition` | `'start' \| 'end'` | `'end'` | 每一项箭头的位置。单项仍可以自己设置 `chevronPosition`。 |

## 事件

| 名称 | 参数 | 说明 |
| --- | --- | --- |
| `update:value` | `string \| string[]` | 下一次展开的值。单选模式全部收起时是 `''`。 |
| `change` | `string \| string[]` | 和 `update:value` 一起发出。 |

## 插槽

默认插槽是 `Collapsible`。每一项都要有 `value`。