Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Tree): implement component #2757

Draft
wants to merge 2 commits into
base: v3
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions docs/content/3.components/tree.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
---
description:
links:
- label: Tree
icon: i-custom-radix-vue
to: https://www.radix-vue.com/components/tree.html
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Tree.vue
---

## Usage

## Examples

## API

### Props

:component-props

### Slots

:component-slots

### Emits

:component-emits

## Theme

:component-theme
3 changes: 2 additions & 1 deletion playground/app/app.vue
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@ const components = [
'table',
'textarea',
'toast',
'tooltip'
'tooltip',
'tree'
]

const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))
Expand Down
42 changes: 42 additions & 0 deletions playground/app/pages/components/tree.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<script setup lang="ts">
const items = ref([
{
label: 'Backlog',
value: 'backlog',
icon: 'i-lucide-circle-help',
children: [
{
label: 'Backlog 1',
value: 'backlog-1',
icon: 'i-lucide-circle-help'
},
{
label: 'Backlog 2',
value: 'backlog-2',
icon: 'i-lucide-circle-help'
}
]
},
{
label: 'Todo',
value: 'todo',
icon: 'i-lucide-circle-plus'
},
{
label: 'In Progress',
value: 'in_progress',
icon: 'i-lucide-circle-arrow-up'
},
{
label: 'Done',
value: 'done',
icon: 'i-lucide-circle-check'
}
])
</script>

<template>
<div>
<UTree :items="items" :get-key="(item) => item.label" />
</div>
</template>
99 changes: 99 additions & 0 deletions src/runtime/components/Tree.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<script lang="ts">
import { tv, type VariantProps } from 'tailwind-variants'
import type { TreeRootProps, TreeRootEmits } from 'radix-vue'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/tree'
import type { AvatarProps, ChipProps } from '../types'
import type { DynamicSlots } 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 interface TreeItem {
label?: string
icon?: string
avatar?: AvatarProps
chip?: ChipProps
disabled?: boolean
slot?: string
children?: TreeItem[]
}

export interface TreeProps<T> extends Omit<TreeRootProps<T>, 'dir'> {
size?: TreeVariants['size']
/**
* The key used to get the label from the item.
* @defaultValue 'label'
*/
labelKey?: string
class?: any
ui?: Partial<typeof tree.slots>
}

export interface TreeEmits extends TreeRootEmits {}

type SlotProps<T> = (props: { item: T, index: number, level: number, hasChildren: 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>>
</script>

<script setup lang="ts" generic="T extends TreeItem">
import { computed } from 'vue'
import { TreeRoot, TreeItem as TreeItemComponent, useForwardPropsEmits } from 'radix-vue'
import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
import { get } from '../utils'
import UIcon from './Icon.vue'
import UAvatar from './Avatar.vue'

const props = withDefaults(defineProps<TreeProps<T>>(), {
labelKey: 'label'
})
const emits = defineEmits<TreeEmits>()
const slots = defineSlots<TreeSlots<T>>()

const rootProps = useForwardPropsEmits(reactiveOmit(props, 'class', 'ui'), emits)

const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: TreeItem, index: number, level: number, hasChildren: boolean }>()

const ui = computed(() => tree({
size: props.size
}))
</script>

<template>
<DefineItemTemplate v-slot="{ item, index, level, hasChildren }">
<slot :name="item.slot || 'item'" v-bind="{ item: item as T, index, level, hasChildren }">
<UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />

<slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" v-bind="{ item: item as T, index, level, hasChildren }">
<UIcon v-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
<UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
</slot>

<span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.itemLabel({ class: props.ui?.itemLabel })">
<slot :name="item.slot ? `${item.slot}-label`: 'item-label'" v-bind="{ item: item as T, index, level, hasChildren }">
{{ get(item, props.labelKey) }}
</slot>
</span>

<span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
<slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" v-bind="{ item: item as T, index, level, hasChildren }" />
</span>
</slot>
</DefineItemTemplate>

<TreeRoot v-slot="{ flattenItems }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
<TreeItemComponent v-for="item in flattenItems" v-bind="item.bind" :key="item._id" :class="ui.item({ class: [props.ui?.item] })">
<ReuseItemTemplate :item="item.value" :index="item.index" :level="item.level" :has-children="item.hasChildren" />
</TreeItemComponent>
</TreeRoot>
</template>
1 change: 1 addition & 0 deletions src/runtime/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,5 +46,6 @@ export * from '../components/Textarea.vue'
export * from '../components/Toast.vue'
export * from '../components/Toaster.vue'
export * from '../components/Tooltip.vue'
export * from '../components/Tree.vue'
export * from './form'
export * from './locale'
1 change: 1 addition & 0 deletions src/theme/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,4 @@ export { default as textarea } from './textarea'
export { default as toast } from './toast'
export { default as toaster } from './toaster'
export { default as tooltip } from './tooltip'
export { default as tree } from './tree'
56 changes: 56 additions & 0 deletions src/theme/tree.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import type { ModuleOptions } from '../module'

export default (options: Required<ModuleOptions>) => ({
slots: {
root: '',
item: ['group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-[selected]:text-[var(--ui-text-highlighted)] data-[selected]:before:bg-[var(--ui-bg-elevated)]/50', options.theme.transitions && 'transition-colors before:transition-colors'],
itemLeadingIcon: 'shrink-0',
itemLeadingAvatar: 'shrink-0',
itemLeadingAvatarSize: '',
itemTrailing: 'ms-auto inline-flex',
itemTrailingIcon: 'shrink-0',
itemLabel: 'truncate'
},
variants: {
size: {
xs: {
label: 'p-1 text-xs gap-1',
item: 'p-1 text-xs gap-1',
itemLeadingIcon: 'size-4',
itemLeadingAvatarSize: '3xs',
itemTrailingIcon: 'size-4'
},
sm: {
label: 'p-1.5 text-xs gap-1.5',
item: 'p-1.5 text-xs gap-1.5',
itemLeadingIcon: 'size-4',
itemLeadingAvatarSize: '3xs',
itemTrailingIcon: 'size-4'
},
md: {
label: 'p-1.5 text-sm gap-1.5',
item: 'p-1.5 text-sm gap-1.5',
itemLeadingIcon: 'size-5',
itemLeadingAvatarSize: '2xs',
itemTrailingIcon: 'size-5'
},
lg: {
label: 'p-2 text-sm gap-2',
item: 'p-2 text-sm gap-2',
itemLeadingIcon: 'size-5',
itemLeadingAvatarSize: '2xs',
itemTrailingIcon: 'size-5'
},
xl: {
item: 'p-2 text-base gap-2',
itemLeadingIcon: 'size-6',
itemLeadingAvatarSize: 'xs',
itemTrailingIcon: 'size-6'
}
}
},
compoundVariants: [],
defaultVariants: {
size: 'md'
}
})
17 changes: 17 additions & 0 deletions test/components/Tree.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { describe, it, expect } from 'vitest'
import Tree, { type TreeProps, type TreeSlots } from '../../src/runtime/components/Tree.vue'
import ComponentRender from '../component-render'

describe('Tree', () => {
it.each([
// Props
['with as', { props: { as: 'div' } }],
['with class', { props: { class: '' } }],
['with ui', { props: { ui: {} } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: TreeProps, slots?: Partial<TreeSlots> }) => {

Check failure on line 13 in test/components/Tree.spec.ts

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 20)

Generic type 'TreeProps<T>' requires 1 type argument(s).

Check failure on line 13 in test/components/Tree.spec.ts

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 20)

Generic type 'TreeSlots' requires 1 type argument(s).
const html = await ComponentRender(nameOrHtml, options, Tree)
expect(html).toMatchSnapshot()
})
})
Loading