mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
feat(Tree): new component (#3180)
Co-authored-by: hywax <me@hywax.space> Co-authored-by: Benjamin Canac <canacb1@gmail.com> Co-authored-by: Sébastien Chopin <atinux@gmail.com> Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Romain Hamel
GitHub
@@ -316,7 +316,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
|
|||||||
<template>
|
<template>
|
||||||
<div class="my-5">
|
<div class="my-5">
|
||||||
<div>
|
<div>
|
||||||
<div v-if="options.length" class="flex items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
|
<div v-if="options.length" class="flex flex-wrap items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
|
||||||
<template v-for="option in options" :key="option.name">
|
<template v-for="option in options" :key="option.name">
|
||||||
<UFormField
|
<UFormField
|
||||||
:label="option.label"
|
:label="option.label"
|
||||||
|
|||||||
@@ -0,0 +1,38 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { TreeItem } from '@nuxt/ui'
|
||||||
|
|
||||||
|
const items: TreeItem[] = [
|
||||||
|
{
|
||||||
|
label: 'app/',
|
||||||
|
slot: 'app',
|
||||||
|
defaultExpanded: true,
|
||||||
|
children: [{
|
||||||
|
label: 'composables/',
|
||||||
|
children: [
|
||||||
|
{ label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
|
||||||
|
{ label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'components/',
|
||||||
|
defaultExpanded: true,
|
||||||
|
children: [
|
||||||
|
{ label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
|
||||||
|
{ label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{ label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
|
||||||
|
{ label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UTree :items="items">
|
||||||
|
<template #app="{ item }">
|
||||||
|
<p class="italic font-bold">
|
||||||
|
{{ item.label }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</UTree>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { TreeItem } from '@nuxt/ui'
|
||||||
|
|
||||||
|
const items: TreeItem[] = [
|
||||||
|
{
|
||||||
|
label: 'app/',
|
||||||
|
value: 'app',
|
||||||
|
children: [{
|
||||||
|
label: 'composables/',
|
||||||
|
value: 'composables',
|
||||||
|
children: [
|
||||||
|
{ label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
|
||||||
|
{ label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'components/',
|
||||||
|
value: 'components',
|
||||||
|
children: [
|
||||||
|
{ label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
|
||||||
|
{ label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{ label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
|
||||||
|
{ label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const expanded = ref(['app', 'composables'])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UTree v-model:expanded="expanded" :items="items" />
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { TreeItem } from '@nuxt/ui'
|
||||||
|
|
||||||
|
const items: TreeItem[] = [
|
||||||
|
{
|
||||||
|
label: 'app/',
|
||||||
|
defaultExpanded: true,
|
||||||
|
children: [{
|
||||||
|
label: 'composables/',
|
||||||
|
children: [
|
||||||
|
{ label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
|
||||||
|
{ label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'components/',
|
||||||
|
defaultExpanded: true,
|
||||||
|
children: [
|
||||||
|
{ label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
|
||||||
|
{ label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{ label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
|
||||||
|
{ label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const value = ref(items[items.length - 1])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UTree v-model="value" :items="items" />
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { TreeItem } from '@nuxt/ui'
|
||||||
|
|
||||||
|
const items: TreeItem[] = [
|
||||||
|
{
|
||||||
|
label: 'app/',
|
||||||
|
defaultExpanded: true,
|
||||||
|
onSelect: (e: Event) => {
|
||||||
|
e.preventDefault()
|
||||||
|
},
|
||||||
|
children: [{
|
||||||
|
label: 'composables/',
|
||||||
|
children: [
|
||||||
|
{ label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
|
||||||
|
{ label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'components/',
|
||||||
|
defaultExpanded: true,
|
||||||
|
children: [
|
||||||
|
{ label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
|
||||||
|
{ label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{ label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
|
||||||
|
{ label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UTree :items="items" />
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { TreeItem } from '@nuxt/ui'
|
||||||
|
|
||||||
|
const items: TreeItem[] = [
|
||||||
|
{
|
||||||
|
label: 'app/',
|
||||||
|
defaultExpanded: true,
|
||||||
|
onToggle: (e: Event) => {
|
||||||
|
e.preventDefault()
|
||||||
|
},
|
||||||
|
children: [{
|
||||||
|
label: 'composables/',
|
||||||
|
children: [
|
||||||
|
{ label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
|
||||||
|
{ label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'components/',
|
||||||
|
defaultExpanded: true,
|
||||||
|
children: [
|
||||||
|
{ label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
|
||||||
|
{ label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{ label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
|
||||||
|
{ label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UTree :items="items" />
|
||||||
|
</template>
|
||||||
436
docs/content/3.components/tree.md
Normal file
436
docs/content/3.components/tree.md
Normal file
@@ -0,0 +1,436 @@
|
|||||||
|
---
|
||||||
|
description: A tree view component to display and interact with hierarchical data structures.
|
||||||
|
category: data
|
||||||
|
links:
|
||||||
|
- label: Tree
|
||||||
|
icon: i-custom-reka-ui
|
||||||
|
to: https://www.reka-ui.com/components/tree.html
|
||||||
|
- label: GitHub
|
||||||
|
icon: i-simple-icons-github
|
||||||
|
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Tree.vue
|
||||||
|
navigation.badge: Soon
|
||||||
|
---
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Items
|
||||||
|
|
||||||
|
Use the `items` prop as an array of objects with the following properties:
|
||||||
|
|
||||||
|
- `icon?: string`{lang="ts-type"}
|
||||||
|
- `label?: string`{lang="ts-type"}
|
||||||
|
- `trailingIcon?: string`{lang="ts-type"}
|
||||||
|
- `defaultExpanded?: boolean`{lang="ts-type"}
|
||||||
|
- `disabled?: boolean`{lang="ts-type"}
|
||||||
|
- `value?: string`{lang="ts-type"}
|
||||||
|
- `slot?: string`{lang="ts-type"}
|
||||||
|
- `children?: TreeItem[]`{lang="ts-type"}
|
||||||
|
- `onToggle?(e: Event): void`{lang="ts-type"}
|
||||||
|
- `onSelect?(e?: Event): void`{lang="ts-type"}
|
||||||
|
|
||||||
|
::note
|
||||||
|
A unique identifier is required for each item. The component will use the `value` prop as identifier, falling back to `label` if `value` is not provided. One of these must be provided for the component to work properly.
|
||||||
|
::
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
collapse: true
|
||||||
|
hide:
|
||||||
|
- class
|
||||||
|
ignore:
|
||||||
|
- items
|
||||||
|
external:
|
||||||
|
- items
|
||||||
|
props:
|
||||||
|
items:
|
||||||
|
- label: 'app/'
|
||||||
|
defaultExpanded: true
|
||||||
|
children:
|
||||||
|
- label: 'composables/'
|
||||||
|
children:
|
||||||
|
- label: 'useAuth.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-typescript'
|
||||||
|
- label: 'useUser.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-typescript'
|
||||||
|
- label: 'components/'
|
||||||
|
defaultExpanded: true
|
||||||
|
children:
|
||||||
|
- label: 'Card.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'Button.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'app.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'nuxt.config.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-nuxt'
|
||||||
|
class: 'w-60'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
### Multiple
|
||||||
|
|
||||||
|
Use the `multiple` prop to allow multiple item selections.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
collapse: true
|
||||||
|
hide:
|
||||||
|
- class
|
||||||
|
ignore:
|
||||||
|
- items
|
||||||
|
external:
|
||||||
|
- items
|
||||||
|
props:
|
||||||
|
multiple: true
|
||||||
|
items:
|
||||||
|
- label: 'app/'
|
||||||
|
defaultExpanded: true
|
||||||
|
children:
|
||||||
|
- label: 'composables/'
|
||||||
|
children:
|
||||||
|
- label: 'useAuth.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-typescript'
|
||||||
|
- label: 'useUser.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-typescript'
|
||||||
|
- label: 'components/'
|
||||||
|
defaultExpanded: true
|
||||||
|
children:
|
||||||
|
- label: 'Card.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'Button.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'app.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'nuxt.config.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-nuxt'
|
||||||
|
class: 'w-60'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
### Color
|
||||||
|
|
||||||
|
Use the `color` prop to change the color of the Tree.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
collapse: true
|
||||||
|
hide:
|
||||||
|
- class
|
||||||
|
ignore:
|
||||||
|
- items
|
||||||
|
external:
|
||||||
|
- items
|
||||||
|
props:
|
||||||
|
color: neutral
|
||||||
|
items:
|
||||||
|
- label: 'app/'
|
||||||
|
defaultExpanded: true
|
||||||
|
children:
|
||||||
|
- label: 'composables/'
|
||||||
|
children:
|
||||||
|
- label: 'useAuth.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-typescript'
|
||||||
|
- label: 'useUser.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-typescript'
|
||||||
|
- label: 'components/'
|
||||||
|
defaultExpanded: true
|
||||||
|
children:
|
||||||
|
- label: 'Card.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'Button.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'app.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'nuxt.config.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-nuxt'
|
||||||
|
class: 'w-60'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
### Size
|
||||||
|
|
||||||
|
Use the `size` prop to change the size of the Tree.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
collapse: true
|
||||||
|
hide:
|
||||||
|
- class
|
||||||
|
ignore:
|
||||||
|
- items
|
||||||
|
external:
|
||||||
|
- items
|
||||||
|
props:
|
||||||
|
size: xl
|
||||||
|
items:
|
||||||
|
- label: 'app/'
|
||||||
|
defaultExpanded: true
|
||||||
|
children:
|
||||||
|
- label: 'composables/'
|
||||||
|
children:
|
||||||
|
- label: 'useAuth.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-typescript'
|
||||||
|
- label: 'useUser.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-typescript'
|
||||||
|
- label: 'components/'
|
||||||
|
defaultExpanded: true
|
||||||
|
children:
|
||||||
|
- label: 'Card.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'Button.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'app.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'nuxt.config.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-nuxt'
|
||||||
|
class: 'w-60'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
### Trailing Icon
|
||||||
|
|
||||||
|
Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of a parent node. Defaults to `i-lucide-chevron-down`.
|
||||||
|
|
||||||
|
::note
|
||||||
|
If an icon is specified for an item, it will always take precedence over these props.
|
||||||
|
::
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
collapse: true
|
||||||
|
hide:
|
||||||
|
- class
|
||||||
|
ignore:
|
||||||
|
- items
|
||||||
|
external:
|
||||||
|
- items
|
||||||
|
props:
|
||||||
|
trailingIcon: 'i-lucide-arrow-down'
|
||||||
|
items:
|
||||||
|
- label: 'app/'
|
||||||
|
defaultExpanded: true
|
||||||
|
children:
|
||||||
|
- label: 'composables/'
|
||||||
|
trailingIcon: 'i-lucide-chevron-down'
|
||||||
|
children:
|
||||||
|
- label: 'useAuth.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-typescript'
|
||||||
|
- label: 'useUser.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-typescript'
|
||||||
|
- label: 'components/'
|
||||||
|
defaultExpanded: true
|
||||||
|
children:
|
||||||
|
- label: 'Card.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'Button.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'app.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'nuxt.config.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-nuxt'
|
||||||
|
class: 'w-60'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
::framework-only
|
||||||
|
#nuxt
|
||||||
|
:::tip{to="/getting-started/icons/nuxt#theme"}
|
||||||
|
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
|
||||||
|
:::
|
||||||
|
|
||||||
|
#vue
|
||||||
|
:::tip{to="/getting-started/icons/vue#theme"}
|
||||||
|
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronDown` key.
|
||||||
|
:::
|
||||||
|
::
|
||||||
|
|
||||||
|
### Expanded Icon
|
||||||
|
|
||||||
|
Use the `expanded-icon` and `collapsed-icon` props to customize the icons of a parent node when it is expanded or collapsed. Defaults to `i-lucide-folder-open` and `i-lucide-folder` respectively.
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
collapse: true
|
||||||
|
hide:
|
||||||
|
- class
|
||||||
|
ignore:
|
||||||
|
- items
|
||||||
|
external:
|
||||||
|
- items
|
||||||
|
props:
|
||||||
|
expandedIcon: 'i-lucide-book-open'
|
||||||
|
collapsedIcon: 'i-lucide-book'
|
||||||
|
items:
|
||||||
|
- label: 'app/'
|
||||||
|
defaultExpanded: true
|
||||||
|
children:
|
||||||
|
- label: 'composables/'
|
||||||
|
children:
|
||||||
|
- label: 'useAuth.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-typescript'
|
||||||
|
- label: 'useUser.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-typescript'
|
||||||
|
- label: 'components/'
|
||||||
|
defaultExpanded: true
|
||||||
|
children:
|
||||||
|
- label: 'Card.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'Button.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'app.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'nuxt.config.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-nuxt'
|
||||||
|
class: 'w-60'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
::framework-only
|
||||||
|
#nuxt
|
||||||
|
:::tip{to="/getting-started/icons/nuxt#theme"}
|
||||||
|
You can customize these icons globally in your `app.config.ts` under `ui.icons.folder` and `ui.icons.folderOpen` keys.
|
||||||
|
:::
|
||||||
|
|
||||||
|
#vue
|
||||||
|
:::tip{to="/getting-started/icons/vue#theme"}
|
||||||
|
You can customize these icons globally in your `vite.config.ts` under `ui.icons.folder` and `ui.icons.folderOpen` keys.
|
||||||
|
:::
|
||||||
|
::
|
||||||
|
|
||||||
|
### Disabled
|
||||||
|
|
||||||
|
Use the `disabled` prop to prevent any user interaction with the Tree.
|
||||||
|
|
||||||
|
::note
|
||||||
|
You can also disable individual items using `item.disabled`.
|
||||||
|
::
|
||||||
|
|
||||||
|
::component-code
|
||||||
|
---
|
||||||
|
collapse: true
|
||||||
|
hide:
|
||||||
|
- class
|
||||||
|
ignore:
|
||||||
|
- items
|
||||||
|
external:
|
||||||
|
- items
|
||||||
|
props:
|
||||||
|
disabled: true
|
||||||
|
items:
|
||||||
|
- label: 'app'
|
||||||
|
icon: 'i-lucide-folder'
|
||||||
|
defaultExpanded: true
|
||||||
|
children:
|
||||||
|
- label: 'composables'
|
||||||
|
icon: 'i-lucide-folder'
|
||||||
|
children:
|
||||||
|
- label: 'useAuth.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-typescript'
|
||||||
|
- label: 'useUser.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-typescript'
|
||||||
|
- label: 'components'
|
||||||
|
icon: 'i-lucide-folder'
|
||||||
|
children:
|
||||||
|
- label: 'Home'
|
||||||
|
icon: 'i-lucide-folder'
|
||||||
|
children:
|
||||||
|
- label: 'Card.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'Button.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'app.vue'
|
||||||
|
icon: 'i-vscode-icons-file-type-vue'
|
||||||
|
- label: 'nuxt.config.ts'
|
||||||
|
icon: 'i-vscode-icons-file-type-nuxt'
|
||||||
|
class: 'w-60'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Control selected item(s)
|
||||||
|
|
||||||
|
You can control the selected item(s) by using the `default-value` prop or the `v-model` directive.
|
||||||
|
|
||||||
|
::component-example
|
||||||
|
---
|
||||||
|
name: 'tree-model-value-example'
|
||||||
|
collapse: true
|
||||||
|
props:
|
||||||
|
class: 'w-60'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
If you want to prevent an item from being selected, you can use the `item.onSelect()`{lang="ts-type"} property:
|
||||||
|
|
||||||
|
::component-example
|
||||||
|
---
|
||||||
|
name: 'tree-on-select-example'
|
||||||
|
collapse: true
|
||||||
|
props:
|
||||||
|
class: 'w-60'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
::note
|
||||||
|
This lets you expand or collapse a parent item without selecting it.
|
||||||
|
::
|
||||||
|
|
||||||
|
### Control expanded items
|
||||||
|
|
||||||
|
You can control the expanded items by using the `default-expanded` prop or the `v-model` directive.
|
||||||
|
|
||||||
|
::component-example
|
||||||
|
---
|
||||||
|
name: 'tree-expanded-example'
|
||||||
|
collapse: true
|
||||||
|
props:
|
||||||
|
class: 'w-60'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
If you want to prevent an item from being expanded, you can use the `item.onToggle()`{lang="ts-type"} property:
|
||||||
|
|
||||||
|
::component-example
|
||||||
|
---
|
||||||
|
name: 'tree-on-toggle-example'
|
||||||
|
collapse: true
|
||||||
|
props:
|
||||||
|
class: 'w-60'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
::note
|
||||||
|
This lets you select a parent item without expanding or collapsing its children.
|
||||||
|
::
|
||||||
|
|
||||||
|
### With custom slot
|
||||||
|
|
||||||
|
Use the `item.slot` property to customize a specific item.
|
||||||
|
|
||||||
|
::component-example
|
||||||
|
---
|
||||||
|
name: 'tree-custom-slot-example'
|
||||||
|
collapse: true
|
||||||
|
props:
|
||||||
|
class: 'w-60'
|
||||||
|
---
|
||||||
|
::
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Props
|
||||||
|
|
||||||
|
:component-props
|
||||||
|
|
||||||
|
### Slots
|
||||||
|
|
||||||
|
:component-slots
|
||||||
|
|
||||||
|
### Emits
|
||||||
|
|
||||||
|
:component-emits
|
||||||
|
|
||||||
|
## Theme
|
||||||
|
|
||||||
|
:component-theme
|
||||||
BIN
docs/public/components/dark/tree.png
Normal file
BIN
docs/public/components/dark/tree.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
docs/public/components/light/tree.png
Normal file
BIN
docs/public/components/light/tree.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
@@ -65,7 +65,8 @@ const components = [
|
|||||||
'table',
|
'table',
|
||||||
'textarea',
|
'textarea',
|
||||||
'toast',
|
'toast',
|
||||||
'tooltip'
|
'tooltip',
|
||||||
|
'tree'
|
||||||
]
|
]
|
||||||
|
|
||||||
const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))
|
const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))
|
||||||
|
|||||||
@@ -61,7 +61,8 @@ const components = [
|
|||||||
'table',
|
'table',
|
||||||
'textarea',
|
'textarea',
|
||||||
'toast',
|
'toast',
|
||||||
'tooltip'
|
'tooltip',
|
||||||
|
'tree'
|
||||||
]
|
]
|
||||||
|
|
||||||
const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))
|
const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))
|
||||||
|
|||||||
86
playground/app/pages/components/tree.vue
Normal file
86
playground/app/pages/components/tree.vue
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { TreeItem } from '@nuxt/ui'
|
||||||
|
import theme from '#build/ui/tree'
|
||||||
|
|
||||||
|
const colors = Object.keys(theme.variants.color) as Array<keyof typeof theme.variants.color>
|
||||||
|
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
|
||||||
|
|
||||||
|
const color = ref(theme.defaultVariants.color)
|
||||||
|
const size = ref(theme.defaultVariants.size)
|
||||||
|
|
||||||
|
const items: TreeItem[] = [
|
||||||
|
{
|
||||||
|
label: 'app',
|
||||||
|
defaultExpanded: true,
|
||||||
|
slot: 'app',
|
||||||
|
children: [{
|
||||||
|
label: 'composables',
|
||||||
|
defaultExpanded: true,
|
||||||
|
children: [
|
||||||
|
{ label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
|
||||||
|
{ label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
label: 'components',
|
||||||
|
children: [{
|
||||||
|
label: 'Home',
|
||||||
|
children: [
|
||||||
|
{ label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
|
||||||
|
{ label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{ label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
|
||||||
|
{ label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const itemsWithMappedId = [
|
||||||
|
{ id: 'id', title: 'hello' },
|
||||||
|
{ id: 'id2', title: 'there' },
|
||||||
|
{ id: 'id3', title: 'obiwan kenobi' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const modelValue = ref<TreeItem>()
|
||||||
|
const modelValues = ref<TreeItem[]>([])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<USelect v-model="color" :items="colors" placeholder="Color" />
|
||||||
|
<USelect v-model="size" :items="sizes" placeholder="Size" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<UTree
|
||||||
|
v-model="modelValues"
|
||||||
|
:items="items"
|
||||||
|
:color="color"
|
||||||
|
:size="size"
|
||||||
|
expanded-icon="i-lucide-chevron-up"
|
||||||
|
collapsed-icon="i-lucide-chevron-down"
|
||||||
|
multiple
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Typescript tests -->
|
||||||
|
<template v-if="false">
|
||||||
|
<!-- @vue-expect-error - multiple props should type modelValue to array. -->
|
||||||
|
<UTree :model-value="modelValue" :items="items" multiple />
|
||||||
|
<!-- @vue-expect-error - multiple props should type defaultValue to array. -->
|
||||||
|
<UTree :default-value="modelValue" :items="items" multiple />
|
||||||
|
<!-- @vue-expect-error - multiple props should type @update:modelValue to array. -->
|
||||||
|
<UTree :items="items" multiple @update:model-value="(payload: TreeItem) => payload" />
|
||||||
|
<!-- @vue-expect-error - default should type modelValue to single item. -->
|
||||||
|
<UTree :model-value="modelValues" :items="items" />
|
||||||
|
<!-- @vue-expect-error - default should type defaultValue to single item. -->
|
||||||
|
<UTree :default-value="modelValues" :items="items" />
|
||||||
|
<!-- @vue-expect-error - default should type @update:modelValue to single item. -->
|
||||||
|
<UTree :items="items" @update:model-value="(payload: TreeItem[]) => payload" />
|
||||||
|
|
||||||
|
<!-- @vue-expect-error - value key should type v-model. -->
|
||||||
|
<UTree v-model="modelValue" :items="itemsWithMappedId" value-key="id" />
|
||||||
|
<!-- @vue-expect-error - label key should type v-model. -->
|
||||||
|
<UTree v-model="modelValue" :items="itemsWithMappedId" label-key="title" />
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -97,7 +97,7 @@ export function devtoolsMetaPlugin({ resolve, options, templates }: { resolve: R
|
|||||||
&& !tag.text?.includes('appConfig'))?.text
|
&& !tag.text?.includes('appConfig'))?.text
|
||||||
?? template?.defaultVariants?.[prop.name]
|
?? template?.defaultVariants?.[prop.name]
|
||||||
|
|
||||||
if (typeof defaultValue === 'string') defaultValue = defaultValue?.replaceAll(/["'`]/g, '')
|
if (typeof defaultValue === 'string') defaultValue = defaultValue?.replace(/\s+as\s+\w+$/g, '').replaceAll(/["'`]/g, '')
|
||||||
if (defaultValue === 'true') defaultValue = true
|
if (defaultValue === 'true') defaultValue = true
|
||||||
if (defaultValue === 'false') defaultValue = false
|
if (defaultValue === 'false') defaultValue = false
|
||||||
if (!Number.isNaN(Number.parseInt(defaultValue))) defaultValue = Number.parseInt(defaultValue)
|
if (!Number.isNaN(Number.parseInt(defaultValue))) defaultValue = Number.parseInt(defaultValue)
|
||||||
|
|||||||
231
src/runtime/components/Tree.vue
Normal file
231
src/runtime/components/Tree.vue
Normal file
@@ -0,0 +1,231 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { VariantProps } from 'tailwind-variants'
|
||||||
|
import type { TreeRootProps, TreeRootEmits } from 'reka-ui'
|
||||||
|
import type { AppConfig } from '@nuxt/schema'
|
||||||
|
import _appConfig from '#build/app.config'
|
||||||
|
import theme from '#build/ui/tree'
|
||||||
|
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
|
||||||
|
import { tv } from '../utils/tv'
|
||||||
|
import type { PartialString, DynamicSlots, MaybeMultipleModelValue, SelectItemKey } from '../types/utils'
|
||||||
|
|
||||||
|
const appConfig = _appConfig as AppConfig & { ui: { tree: Partial<typeof theme> } }
|
||||||
|
|
||||||
|
const tree = tv({ extend: tv(theme), ...(appConfig.ui?.tree || {}) })
|
||||||
|
|
||||||
|
type TreeVariants = VariantProps<typeof tree>
|
||||||
|
|
||||||
|
export type TreeItem = {
|
||||||
|
icon?: string
|
||||||
|
label?: string
|
||||||
|
trailingIcon?: string
|
||||||
|
defaultExpanded?: boolean
|
||||||
|
disabled?: boolean
|
||||||
|
value?: string
|
||||||
|
slot?: string
|
||||||
|
children?: TreeItem[]
|
||||||
|
onToggle?(e: Event): void
|
||||||
|
onSelect?(e?: Event): void
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TreeProps<T extends TreeItem, M extends boolean = false, K extends SelectItemKey<T> | undefined = undefined> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled'> {
|
||||||
|
/**
|
||||||
|
* The element or component this component should render as.
|
||||||
|
* @defaultValue 'ul'
|
||||||
|
*/
|
||||||
|
as?: any
|
||||||
|
color?: TreeVariants['color']
|
||||||
|
size?: TreeVariants['size']
|
||||||
|
/**
|
||||||
|
* The key used to get the value from the item.
|
||||||
|
* @defaultValue 'value'
|
||||||
|
*/
|
||||||
|
valueKey?: K
|
||||||
|
/**
|
||||||
|
* The key used to get the label from the item.
|
||||||
|
* @defaultValue 'label'
|
||||||
|
*/
|
||||||
|
labelKey?: K
|
||||||
|
/**
|
||||||
|
* The icon displayed on the right side of a parent node.
|
||||||
|
* @defaultValue appConfig.ui.icons.chevronDown
|
||||||
|
*/
|
||||||
|
trailingIcon?: string
|
||||||
|
/**
|
||||||
|
* The icon displayed when a parent node is expanded.
|
||||||
|
* @defaultValue appConfig.ui.icons.folderOpen
|
||||||
|
*/
|
||||||
|
expandedIcon?: string
|
||||||
|
/**
|
||||||
|
* The icon displayed when a parent node is collapsed.
|
||||||
|
* @defaultValue appConfig.ui.icons.folder
|
||||||
|
*/
|
||||||
|
collapsedIcon?: string
|
||||||
|
items?: T[]
|
||||||
|
/** The controlled value of the Tree. Can be bind as `v-model`. */
|
||||||
|
modelValue?: MaybeMultipleModelValue<T, M>
|
||||||
|
/** The value of the Tree when initially rendered. Use when you do not need to control the state of the Tree. */
|
||||||
|
defaultValue?: MaybeMultipleModelValue<T, M>
|
||||||
|
/** Whether multiple options can be selected or not. */
|
||||||
|
multiple?: M & boolean
|
||||||
|
class?: any
|
||||||
|
ui?: PartialString<typeof tree.slots>
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TreeEmits<T, M extends boolean = false> = Omit<TreeRootEmits, 'update:modelValue'> & {
|
||||||
|
'update:modelValue': [payload: MaybeMultipleModelValue<T, M>]
|
||||||
|
}
|
||||||
|
|
||||||
|
type SlotProps<T> = (props: { item: T, index: number, level: number, expanded: boolean, selected: boolean }) => any
|
||||||
|
|
||||||
|
export type TreeSlots<T extends { slot?: string }> = {
|
||||||
|
'item': SlotProps<T>
|
||||||
|
'item-leading': SlotProps<T>
|
||||||
|
'item-label': SlotProps<T>
|
||||||
|
'item-trailing': SlotProps<T>
|
||||||
|
} & DynamicSlots<T, SlotProps<T>>
|
||||||
|
|
||||||
|
extendDevtoolsMeta({ defaultProps: {
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'app',
|
||||||
|
icon: 'i-lucide-folder',
|
||||||
|
defaultExpanded: true,
|
||||||
|
children: [{
|
||||||
|
label: 'composables',
|
||||||
|
icon: 'i-lucide-folder',
|
||||||
|
defaultExpanded: true,
|
||||||
|
children: [
|
||||||
|
{ label: 'useAuth.ts', icon: 'vscode-icons:file-type-typescript' },
|
||||||
|
{ label: 'useUser.ts', icon: 'vscode-icons:file-type-typescript' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'components',
|
||||||
|
icon: 'i-lucide-folder',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: 'Home',
|
||||||
|
icon: 'i-lucide-folder',
|
||||||
|
children: [
|
||||||
|
{ label: 'Card.vue', icon: 'vscode-icons:file-type-vue' },
|
||||||
|
{ label: 'Button.vue', icon: 'vscode-icons:file-type-vue' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{ label: 'app.vue', icon: 'vscode-icons:file-type-vue' },
|
||||||
|
{ label: 'nuxt.config.ts', icon: 'vscode-icons:file-type-nuxt' }
|
||||||
|
]
|
||||||
|
} })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script setup lang="ts" generic="T extends TreeItem, M extends boolean = false, K extends SelectItemKey<T> | undefined = undefined">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { TreeRoot, TreeItem, useForwardPropsEmits } from 'reka-ui'
|
||||||
|
import { reactivePick, createReusableTemplate } from '@vueuse/core'
|
||||||
|
import { get } from '../utils'
|
||||||
|
import UIcon from './Icon.vue'
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<TreeProps<T, M, K>>(), {
|
||||||
|
labelKey: 'label' as never,
|
||||||
|
valueKey: 'value' as never
|
||||||
|
})
|
||||||
|
const emits = defineEmits<TreeEmits<T, M>>()
|
||||||
|
const slots = defineSlots<TreeSlots<T>>()
|
||||||
|
|
||||||
|
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'items', 'multiple', 'expanded', 'disabled', 'propagateSelect'), emits)
|
||||||
|
|
||||||
|
const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate<{ items?: T[], level: number }>({
|
||||||
|
props: {
|
||||||
|
items: Array as PropType<T[]>,
|
||||||
|
level: Number
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const ui = computed(() => tree({
|
||||||
|
color: props.color,
|
||||||
|
size: props.size
|
||||||
|
}))
|
||||||
|
|
||||||
|
function getItemLabel(item: T) {
|
||||||
|
return get(item, props.labelKey as string)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getItemValue(item?: T) {
|
||||||
|
return get(item, props.valueKey as string) ?? get(item, props.labelKey as string)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDefaultOpenedItems(item: T): string[] {
|
||||||
|
const currentItem = item.defaultExpanded ? getItemValue(item) : null
|
||||||
|
const childItems = item.children?.flatMap(child => getDefaultOpenedItems(child as T)) ?? []
|
||||||
|
|
||||||
|
return [currentItem, ...childItems].filter(Boolean) as string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const defaultExpanded = computed(() => props.defaultExpanded ?? props.items?.flatMap(getDefaultOpenedItems))
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- eslint-disable vue/no-template-shadow -->
|
||||||
|
<template>
|
||||||
|
<DefineTreeTemplate v-slot="{ items, level }">
|
||||||
|
<li
|
||||||
|
v-for="(item, index) in items"
|
||||||
|
:key="`${level}-${index}`"
|
||||||
|
:class="level > 0 ? ui.itemWithChildren({ class: props.ui?.itemWithChildren }) : ui.item({ class: props.ui?.item })"
|
||||||
|
>
|
||||||
|
<TreeItem
|
||||||
|
v-slot="{ isExpanded, isSelected }"
|
||||||
|
as-child
|
||||||
|
:level="level"
|
||||||
|
:value="item"
|
||||||
|
@toggle="item.onToggle"
|
||||||
|
@select="item.onSelect"
|
||||||
|
>
|
||||||
|
<button :disabled="item.disabled || disabled" :class="ui.link({ class: props.ui?.link, selected: isSelected, disabled: item.disabled || disabled })">
|
||||||
|
<slot :name="item.slot || 'item'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
|
||||||
|
<slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
|
||||||
|
<UIcon
|
||||||
|
v-if="item.icon"
|
||||||
|
:name="item.icon"
|
||||||
|
:class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
|
||||||
|
/>
|
||||||
|
<UIcon
|
||||||
|
v-else-if="item.children?.length"
|
||||||
|
:name="isExpanded ? (expandedIcon ?? appConfig.ui.icons.folderOpen) : (collapsedIcon ?? appConfig.ui.icons.folder)"
|
||||||
|
:class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon })"
|
||||||
|
/>
|
||||||
|
</slot>
|
||||||
|
|
||||||
|
<span v-if="getItemLabel(item) || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
|
||||||
|
<slot :name="item.slot ? `${item.slot}-label`: 'item-label'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
|
||||||
|
{{ getItemLabel(item) }}
|
||||||
|
</slot>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span v-if="item.trailingIcon || item.children?.length || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
|
||||||
|
<slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" v-bind="{ item, index, level, expanded: isExpanded, selected: isSelected }">
|
||||||
|
<UIcon v-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })" />
|
||||||
|
<UIcon v-else-if="item.children?.length" :name="trailingIcon ?? appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon })" />
|
||||||
|
</slot>
|
||||||
|
</span>
|
||||||
|
</slot>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<ul v-if="item.children?.length && isExpanded" :class="ui.listWithChildren({ class: props.ui?.listWithChildren })">
|
||||||
|
<ReuseTreeTemplate :items="(item.children as T[])" :level="level + 1" />
|
||||||
|
</ul>
|
||||||
|
</TreeItem>
|
||||||
|
</li>
|
||||||
|
</DefineTreeTemplate>
|
||||||
|
|
||||||
|
<TreeRoot
|
||||||
|
v-bind="rootProps"
|
||||||
|
:class="ui.root({ class: [props.class, props.ui?.root] })"
|
||||||
|
:get-key="getItemValue"
|
||||||
|
:default-expanded="defaultExpanded"
|
||||||
|
:selection-behavior="selectionBehavior"
|
||||||
|
>
|
||||||
|
<ReuseTreeTemplate :items="items" :level="0" />
|
||||||
|
</TreeRoot>
|
||||||
|
</template>
|
||||||
@@ -46,6 +46,7 @@ export * from '../components/Textarea.vue'
|
|||||||
export * from '../components/Toast.vue'
|
export * from '../components/Toast.vue'
|
||||||
export * from '../components/Toaster.vue'
|
export * from '../components/Toaster.vue'
|
||||||
export * from '../components/Tooltip.vue'
|
export * from '../components/Tooltip.vue'
|
||||||
|
export * from '../components/Tree.vue'
|
||||||
export * from './form'
|
export * from './form'
|
||||||
export * from './locale'
|
export * from './locale'
|
||||||
export * from './utils'
|
export * from './utils'
|
||||||
|
|||||||
@@ -36,6 +36,8 @@ export type SelectModelValueEmits<T, V, M extends boolean = false, DV = T> = {
|
|||||||
'update:modelValue': [payload: SelectModelValue<T, V, M, DV>]
|
'update:modelValue': [payload: SelectModelValue<T, V, M, DV>]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type MaybeMultipleModelValue<T, M extends boolean = false> = (T extends infer U ? M extends true ? U[] : U : never)
|
||||||
|
|
||||||
export type StringOrVNode =
|
export type StringOrVNode =
|
||||||
| string
|
| string
|
||||||
| VNode
|
| VNode
|
||||||
|
|||||||
@@ -11,6 +11,8 @@ export default {
|
|||||||
close: 'i-lucide-x',
|
close: 'i-lucide-x',
|
||||||
ellipsis: 'i-lucide-ellipsis',
|
ellipsis: 'i-lucide-ellipsis',
|
||||||
external: 'i-lucide-arrow-up-right',
|
external: 'i-lucide-arrow-up-right',
|
||||||
|
folder: 'i-lucide-folder',
|
||||||
|
folderOpen: 'i-lucide-folder-open',
|
||||||
loading: 'i-lucide-refresh-cw',
|
loading: 'i-lucide-refresh-cw',
|
||||||
minus: 'i-lucide-minus',
|
minus: 'i-lucide-minus',
|
||||||
plus: 'i-lucide-plus',
|
plus: 'i-lucide-plus',
|
||||||
|
|||||||
@@ -46,3 +46,4 @@ export { default as textarea } from './textarea'
|
|||||||
export { default as toast } from './toast'
|
export { default as toast } from './toast'
|
||||||
export { default as toaster } from './toaster'
|
export { default as toaster } from './toaster'
|
||||||
export { default as tooltip } from './tooltip'
|
export { default as tooltip } from './tooltip'
|
||||||
|
export { default as tree } from './tree'
|
||||||
|
|||||||
82
src/theme/tree.ts
Normal file
82
src/theme/tree.ts
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
import type { ModuleOptions } from '../module'
|
||||||
|
|
||||||
|
export default (options: Required<ModuleOptions>) => ({
|
||||||
|
slots: {
|
||||||
|
root: 'relative isolate',
|
||||||
|
item: '',
|
||||||
|
listWithChildren: 'ms-4.5 border-s border-(--ui-border)',
|
||||||
|
itemWithChildren: 'ps-1.5 -ms-px',
|
||||||
|
link: 'relative group w-full flex items-center text-sm before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
|
||||||
|
linkLeadingIcon: 'shrink-0',
|
||||||
|
linkLabel: 'truncate',
|
||||||
|
linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
|
||||||
|
linkTrailingIcon: 'shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180'
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
color: {
|
||||||
|
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
|
||||||
|
link: `focus-visible:before:ring-(--ui-${color})`
|
||||||
|
}])),
|
||||||
|
neutral: {
|
||||||
|
link: 'focus-visible:before:ring-(--ui-border-inverted)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
xs: {
|
||||||
|
link: 'px-2 py-1 text-xs gap-1',
|
||||||
|
linkLeadingIcon: 'size-4',
|
||||||
|
linkTrailingIcon: 'size-4'
|
||||||
|
},
|
||||||
|
sm: {
|
||||||
|
link: 'px-2.5 py-1.5 text-xs gap-1.5',
|
||||||
|
linkLeadingIcon: 'size-4',
|
||||||
|
linkTrailingIcon: 'size-4'
|
||||||
|
},
|
||||||
|
md: {
|
||||||
|
link: 'px-2.5 py-1.5 text-sm gap-1.5',
|
||||||
|
linkLeadingIcon: 'size-5',
|
||||||
|
linkTrailingIcon: 'size-5'
|
||||||
|
},
|
||||||
|
lg: {
|
||||||
|
link: 'px-3 py-2 text-sm gap-2',
|
||||||
|
linkLeadingIcon: 'size-5',
|
||||||
|
linkTrailingIcon: 'size-5'
|
||||||
|
},
|
||||||
|
xl: {
|
||||||
|
link: 'px-3 py-2 text-base gap-2',
|
||||||
|
linkLeadingIcon: 'size-6',
|
||||||
|
linkTrailingIcon: 'size-6'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
true: {
|
||||||
|
link: 'before:bg-(--ui-bg-elevated)'
|
||||||
|
},
|
||||||
|
false: {
|
||||||
|
link: ['hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50', options.theme.transitions && 'transition-colors before:transition-colors']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
true: {
|
||||||
|
link: 'cursor-not-allowed opacity-75'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
|
||||||
|
color,
|
||||||
|
selected: true,
|
||||||
|
class: {
|
||||||
|
link: `text-(--ui-${color})`
|
||||||
|
}
|
||||||
|
})), {
|
||||||
|
color: 'neutral',
|
||||||
|
selected: true,
|
||||||
|
class: {
|
||||||
|
link: 'text-(--ui-text-highlighted)'
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
defaultVariants: {
|
||||||
|
color: 'primary',
|
||||||
|
size: 'md'
|
||||||
|
}
|
||||||
|
})
|
||||||
69
test/components/Tree.spec.ts
Normal file
69
test/components/Tree.spec.ts
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
import { describe, it, expect } from 'vitest'
|
||||||
|
import Tree, { type TreeProps, type TreeSlots, type TreeItem } from '../../src/runtime/components/Tree.vue'
|
||||||
|
import ComponentRender from '../component-render'
|
||||||
|
import theme from '#build/ui/tree'
|
||||||
|
|
||||||
|
describe('Tree', () => {
|
||||||
|
const sizes = Object.keys(theme.variants.size) as any
|
||||||
|
|
||||||
|
const items: TreeItem[] = [
|
||||||
|
{
|
||||||
|
value: 'root',
|
||||||
|
label: 'app',
|
||||||
|
slot: 'app',
|
||||||
|
children: [{
|
||||||
|
label: 'composables',
|
||||||
|
icon: 'i-lucide-house',
|
||||||
|
children: [
|
||||||
|
{ label: 'useAuth.ts', icon: 'vscode-icons:file-type-typescript' },
|
||||||
|
{ label: 'useUser.ts', icon: 'vscode-icons:file-type-typescript' }
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{ value: 'app-vue', label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
|
||||||
|
{ value: 'nuxt-config-ts', label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const props = { items }
|
||||||
|
|
||||||
|
it.each([
|
||||||
|
// Props
|
||||||
|
['with items', { props }],
|
||||||
|
['with modelValue', { props: { ...props, modelValue: items[0] } }],
|
||||||
|
['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
|
||||||
|
// Expanded
|
||||||
|
['with expanded', { props: { ...props, expanded: [items[0]] } }],
|
||||||
|
['with defaultExpanded', { props: { ...props, defaultExpanded: [items[0]] } }],
|
||||||
|
// Key mapping
|
||||||
|
['with valueKey', { props: { ...props, valueKey: 'label' } }],
|
||||||
|
['with labelKey', { props: { ...props, labelKey: 'value' } }],
|
||||||
|
// Multiple
|
||||||
|
['with multiple', { props: { ...props, multiple: true } }],
|
||||||
|
['with multiple and modelValue', { props: { ...props, multiple: true, modelValue: [items[0], items[1]] } }],
|
||||||
|
['with multiple and defaultValue', { props: { ...props, multiple: true, defaultValue: [items[0], items[1]] } }],
|
||||||
|
// Disabled
|
||||||
|
['with disabled', { props: { ...props, disabled: true } }],
|
||||||
|
// Item properties
|
||||||
|
['with defautExpanded item', { props: { items: [{ label: 'Default Expanded', defaultExpanded: true, children: items }] } }],
|
||||||
|
['with disabled item', { props: { items: [{ label: 'Disabled item', disabled: true, children: items }] } }],
|
||||||
|
// Icons
|
||||||
|
['with trailingIcon', { props: { ...props, trailingIcon: 'i-lucide-arrow-down' } }],
|
||||||
|
['with expandedIcon', { props: { items: [{ label: 'Default Expanded', defaultExpanded: true, children: items }], expandedIcon: 'i-lucide-chevron-up' } }],
|
||||||
|
['with collapsedIcon', { props: { items: [{ label: 'Default Collapsed', defaultExpanded: false, children: items }], collapsedIcon: 'i-lucide-chevron-down' } }],
|
||||||
|
// Style variants
|
||||||
|
...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
|
||||||
|
['with neutral color', { props: { ...props, color: 'neutral' } }],
|
||||||
|
['with as', { props: { ...props, as: 'div' } }],
|
||||||
|
['with class', { props: { ...props, class: 'absolute' } }],
|
||||||
|
['with ui', { props: { ...props, ui: { link: 'font-bold' } } }],
|
||||||
|
// Slots
|
||||||
|
['with default slot', { props, slots: { default: () => 'default slot' } }],
|
||||||
|
['with item slot', { props, slots: { item: () => 'item slot' } }],
|
||||||
|
['with item-leading slot', { props, slots: { 'item-leading': () => 'leading slot' } }],
|
||||||
|
['with item-trailing slot', { props, slots: { 'item-trailing': () => 'trailing slot' } }],
|
||||||
|
['with dynamic slot', { props, slots: { app: () => 'dynamic slot' } }]
|
||||||
|
])('renders %s correctly', async (nameOrHtml: string, options: { props?: Partial<TreeProps<any>>, slots?: Partial<TreeSlots<any>> }) => {
|
||||||
|
const html = await ComponentRender(nameOrHtml, options, Tree)
|
||||||
|
expect(html).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
521
test/components/__snapshots__/Tree-vue.spec.ts.snap
Normal file
521
test/components/__snapshots__/Tree-vue.spec.ts.snap
Normal file
@@ -0,0 +1,521 @@
|
|||||||
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||||
|
|
||||||
|
exports[`Tree > renders with as correctly 1`] = `
|
||||||
|
"<div role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</div>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with class correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="isolate absolute">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with collapsedIcon correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Default Collapsed</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with default slot correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with defaultExpanded correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with defaultValue correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with defautExpanded item correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="0" data-indent="0" data-expanded="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Default Expanded</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<ul class="ms-4.5 border-s border-(--ui-border)">
|
||||||
|
<li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with disabled correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with disabled item correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Disabled item</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with dynamic slot correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">dynamic slot</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with expanded correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with expandedIcon correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="0" data-indent="0" data-expanded="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Default Expanded</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<ul class="ms-4.5 border-s border-(--ui-border)">
|
||||||
|
<li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with item slot correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">item slot</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">item slot</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with item-leading slot correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">leading slot<span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">leading slot<span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with item-trailing slot correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span><span class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span><span class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with items correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with labelKey correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">root</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app-vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt-config-ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with modelValue correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with multiple and defaultValue correctly 1`] = `
|
||||||
|
"<ul role="tree" aria-multiselectable="true" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with multiple and modelValue correctly 1`] = `
|
||||||
|
"<ul role="tree" aria-multiselectable="true" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with multiple correctly 1`] = `
|
||||||
|
"<ul role="tree" aria-multiselectable="true" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with neutral color correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with size lg correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-sm gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-sm gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-sm gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with size md correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with size sm correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-xs gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-xs gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-xs gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with size xl correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-base gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-base gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-base gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with size xs correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2 py-1 text-xs gap-1 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2 py-1 text-xs gap-1 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2 py-1 text-xs gap-1 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with trailingIcon correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with ui correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors font-bold" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors font-bold" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors font-bold" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with valueKey correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
521
test/components/__snapshots__/Tree.spec.ts.snap
Normal file
521
test/components/__snapshots__/Tree.spec.ts.snap
Normal file
@@ -0,0 +1,521 @@
|
|||||||
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||||
|
|
||||||
|
exports[`Tree > renders with as correctly 1`] = `
|
||||||
|
"<div role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</div>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with class correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="isolate absolute">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with collapsedIcon correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:chevron-down shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default Collapsed</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with default slot correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with defaultExpanded correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with defaultValue correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with defautExpanded item correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="0" data-indent="0" data-expanded="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder-open shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default Expanded</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<ul class="ms-4.5 border-s border-(--ui-border)">
|
||||||
|
<li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with disabled correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with disabled item correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button disabled="" class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors cursor-not-allowed opacity-75" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Disabled item</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with dynamic slot correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">dynamic slot</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with expanded correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with expandedIcon correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="true" aria-level="0" data-indent="0" data-expanded="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:chevron-up shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Default Expanded</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<ul class="ms-4.5 border-s border-(--ui-border)">
|
||||||
|
<li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class="ps-1.5 -ms-px"><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="1" data-indent="1" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with item slot correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">item slot</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">item slot</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with item-leading slot correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">leading slot<span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="">leading slot<span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with item-trailing slot correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span><span class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span><span class="ms-auto inline-flex gap-1.5 items-center">trailing slot</span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with items correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with labelKey correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">root</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app-vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt-config-ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with modelValue correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with multiple and defaultValue correctly 1`] = `
|
||||||
|
"<ul role="tree" aria-multiselectable="true" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with multiple and modelValue correctly 1`] = `
|
||||||
|
"<ul role="tree" aria-multiselectable="true" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-expanded="false" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 before:bg-(--ui-bg-elevated) text-(--ui-primary)" role="treeitem" aria-selected="true" aria-level="0" data-indent="0" data-selected="" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with multiple correctly 1`] = `
|
||||||
|
"<ul role="tree" aria-multiselectable="true" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with neutral color correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-border-inverted) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with size lg correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-sm gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-sm gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-sm gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with size md correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with size sm correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-xs gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-4" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-xs gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-4" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-xs gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-4" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with size xl correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-base gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-6" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-6" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-base gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-6" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-3 py-2 text-base gap-2 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-6" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with size xs correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2 py-1 text-xs gap-1 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-4" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-4" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2 py-1 text-xs gap-1 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-4" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2 py-1 text-xs gap-1 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-4" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with trailingIcon correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:arrow-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with ui correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors font-bold" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors font-bold" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors font-bold" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`Tree > renders with valueKey correctly 1`] = `
|
||||||
|
"<ul role="tree" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" class="relative isolate">
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-lucide:folder shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down shrink-0 transform transition-transform duration-200 group-data-expanded:rotate-180 size-5" aria-hidden="true"></span></span></button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-vue shrink-0 size-5" aria-hidden="true"></span><span class="truncate">app.vue</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
<li class=""><button class="relative group w-full flex items-center before:absolute before:inset-y-px before:inset-x-0 before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-(--ui-primary) px-2.5 py-1.5 text-sm gap-1.5 hover:not-disabled:text-(--ui-text-highlighted) hover:not-disabled:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors" role="treeitem" aria-selected="false" aria-level="0" data-indent="0" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item=""><span class="iconify i-vscode-icons:file-type-nuxt shrink-0 size-5" aria-hidden="true"></span><span class="truncate">nuxt.config.ts</span>
|
||||||
|
<!--v-if-->
|
||||||
|
</button>
|
||||||
|
<!--v-if-->
|
||||||
|
</li>
|
||||||
|
</ul>"
|
||||||
|
`;
|
||||||
Reference in New Issue
Block a user