mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-28 10:50:40 +01:00
feat: add Table component (#237)
This commit is contained in:
Benjamin Canac
GitHub
73
docs/content/6.overlays/1.modal.md
Normal file
73
docs/content/6.overlays/1.modal.md
Normal file
@@ -0,0 +1,73 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a modal within your application.
|
||||
headlessui:
|
||||
label: 'Dialog'
|
||||
to: 'https://headlessui.com/vue/dialog'
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:modal-example-basic
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const isOpen = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UButton label="Open" @click="isOpen = true" />
|
||||
|
||||
<UModal v-model="isOpen">
|
||||
<!-- Content -->
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
You can put a [Card](/layout/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots:
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:modal-example-card
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const isOpen = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UButton label="Open" @click="isOpen = true" />
|
||||
|
||||
<UModal v-model="isOpen">
|
||||
<UCard :ui="{ divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
||||
<template #header>
|
||||
<!-- Content -->
|
||||
</template>
|
||||
|
||||
<!-- Content -->
|
||||
|
||||
<template #footer>
|
||||
<!-- Content -->
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
38
docs/content/6.overlays/2.slideover.md
Normal file
38
docs/content/6.overlays/2.slideover.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a dialog that slides in from the edge of the screen.
|
||||
headlessui:
|
||||
label: 'Dialog'
|
||||
to: 'https://headlessui.com/vue/dialog'
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:slideover-example
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const isOpen = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UButton label="Open" @click="isOpen = true" />
|
||||
|
||||
<USlideover v-model="isOpen">
|
||||
<!-- Content -->
|
||||
</USlideover>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
34
docs/content/6.overlays/3.popover.md
Normal file
34
docs/content/6.overlays/3.popover.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a non-modal dialog that floats around a trigger element.
|
||||
headlessui:
|
||||
label: 'Popover'
|
||||
to: 'https://headlessui.com/vue/popover'
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:popover-example
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<UPopover>
|
||||
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
|
||||
|
||||
<template #panel>
|
||||
<!-- Content -->
|
||||
</template>
|
||||
</UPopover>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
27
docs/content/6.overlays/4.tooltip.md
Normal file
27
docs/content/6.overlays/4.tooltip.md
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
github: true
|
||||
description: Display content that appears on hover next to an element.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:tooltip-example
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']">
|
||||
<UButton color="gray" label="Hover me" />
|
||||
</UTooltip>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
51
docs/content/6.overlays/5.context-menu.md
Normal file
51
docs/content/6.overlays/5.context-menu.md
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a menu that appears on right click.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:context-menu-example
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const { x, y } = useMouse()
|
||||
const { y: windowY } = useWindowScroll()
|
||||
|
||||
const isOpen = ref(false)
|
||||
const virtualElement = ref({ getBoundingClientRect: () => ({}) })
|
||||
|
||||
function onContextMenu () {
|
||||
const top = unref(y) - unref(windowY)
|
||||
const left = unref(x)
|
||||
|
||||
virtualElement.value.getBoundingClientRect = () => ({
|
||||
width: 0,
|
||||
height: 0,
|
||||
top,
|
||||
left
|
||||
})
|
||||
|
||||
isOpen.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div @contextmenu.prevent="onContextMenu">
|
||||
<UContextMenu v-model="isOpen" :virtual-element="virtualElement">
|
||||
<!-- Content -->
|
||||
</UContextMenu>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
282
docs/content/6.overlays/6.notification.md
Normal file
282
docs/content/6.overlays/6.notification.md
Normal file
@@ -0,0 +1,282 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a toast notification in your app.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
First of all, add the `Notifications` component to your app, preferably inside `app.vue`.
|
||||
|
||||
```vue [app.vue]
|
||||
<template>
|
||||
<div>
|
||||
<UContainer>
|
||||
<NuxtPage />
|
||||
</UContainer>
|
||||
|
||||
<UNotifications />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
Then, you can use the `useToast` composable to add notifications to your app:
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:notification-example-basic
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const toast = useToast()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
This component will render by default the notifications at the bottom right of the screen. You can configure its behavior in the `app.config.ts` through `ui.notifications`:
|
||||
|
||||
```ts [app.config.ts]
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
notifications: {
|
||||
// Show toasts at the top right of the screen
|
||||
position: 'top-0 right-0'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Description
|
||||
|
||||
You can add a `description` in addition of the `title`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 2
|
||||
timeout: 0
|
||||
props:
|
||||
title: 'Notification'
|
||||
description: 'This is a notification.'
|
||||
---
|
||||
::
|
||||
|
||||
### Icon
|
||||
|
||||
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 3
|
||||
timeout: 0
|
||||
title: 'Notification'
|
||||
props:
|
||||
icon: 'i-heroicons-check-circle'
|
||||
description: 'This is a notification.'
|
||||
excludedProps:
|
||||
- icon
|
||||
---
|
||||
::
|
||||
|
||||
### Avatar
|
||||
|
||||
Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 4
|
||||
timeout: 0
|
||||
title: 'Notification'
|
||||
props:
|
||||
description: 'This is a notification.'
|
||||
avatar:
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
excludedProps:
|
||||
- avatar
|
||||
---
|
||||
::
|
||||
|
||||
### Timeout
|
||||
|
||||
Use the `timeout` prop to configure how long the Notification will remain. Set it to `0` to disable the timeout.
|
||||
|
||||
You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 5
|
||||
title: 'Notification'
|
||||
description: 'This is a notification.'
|
||||
props:
|
||||
timeout: 60000
|
||||
---
|
||||
::
|
||||
|
||||
### Color
|
||||
|
||||
Use the `color` prop to change the progress and icon color of the Notification.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 5
|
||||
title: 'Notification'
|
||||
description: 'This is a notification.'
|
||||
timeout: 600000
|
||||
props:
|
||||
icon: 'i-heroicons-x-circle'
|
||||
color: 'red'
|
||||
extraColors:
|
||||
- gray
|
||||
excludedProps:
|
||||
- icon
|
||||
---
|
||||
::
|
||||
|
||||
### Click
|
||||
|
||||
Use the `click` prop to execute a function when the Notification is clicked.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:notification-example-click
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const toast = useToast()
|
||||
|
||||
function onClick () {
|
||||
alert('Clicked!')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton label="Show toast" @click="toast.add({ title: 'Click me', click: onClick })" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### Callback
|
||||
|
||||
Use the `callback` prop to execute a function when the Notification expires.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:notification-example-callback
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const toast = useToast()
|
||||
|
||||
function onCallback () {
|
||||
alert('Notification expired!')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton label="Show toast" @click="toast.add({ title: 'Expires soon...', timeout: 1000, callback: onCallback })" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### Close
|
||||
|
||||
Use the `close-button` prop to hide or customize the close button on the Notification.
|
||||
|
||||
You can pass all the props of the [Button](/elements/button) component to customize it through the `close-button` prop or globally through `ui.notification.default.closeButton`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 6
|
||||
title: 'Notification'
|
||||
timeout: 0
|
||||
props:
|
||||
closeButton:
|
||||
icon: 'i-heroicons-archive-box-x-mark'
|
||||
color: 'primary'
|
||||
variant: 'outline'
|
||||
padded: true
|
||||
size: '2xs'
|
||||
ui:
|
||||
rounded: 'rounded-full'
|
||||
excludedProps:
|
||||
- closeButton
|
||||
---
|
||||
::
|
||||
|
||||
### Actions
|
||||
|
||||
Use the `actions` prop to add actions to the Notification.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:notification-example-actions
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const toast = useToast()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton label="Show toast" @click="toast.add({ title: 'Click me', click: () => alert('Clicked!') })" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
Like for `closeButton`, you can pass all the props of the [Button](/elements/button) component inside the action or globally through `ui.notification.default.actionButton`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 6
|
||||
title: 'Notification'
|
||||
timeout: 0
|
||||
props:
|
||||
actions:
|
||||
- variant: 'ghost'
|
||||
color: 'gray'
|
||||
label: Action 1
|
||||
- variant: 'solid'
|
||||
color: 'gray'
|
||||
label: Action 2
|
||||
excludedProps:
|
||||
- actions
|
||||
---
|
||||
::
|
||||
|
||||
Actions will render differently whether you have a `description` set.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
id: 6
|
||||
title: 'Notification'
|
||||
description: 'This is a notification.'
|
||||
timeout: 0
|
||||
props:
|
||||
actions:
|
||||
- variant: 'solid'
|
||||
color: 'primary'
|
||||
label: Action 1
|
||||
- variant: 'outline'
|
||||
color: 'primary'
|
||||
label: Action 2
|
||||
excludedProps:
|
||||
- actions
|
||||
---
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
Reference in New Issue
Block a user