arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-26 01:40:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: rewrite to use app config and rework docs (#143)

Browse Source 
Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Benjamin Canac
2023-05-04 14:49:19 +02:00
committed by GitHub
parent 56230ea915
commit 6da0db0113
144 changed files with 10470 additions and 8109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
docs/content/5.overlays/1.modal.md Normal file
View File

@@ -0,0 +1,72 @@
---
github: true
headlessui:
label: 'Dialog'
to: 'https://headlessui.com/vue/dialog'
---
## Usage
::component-example
#default
:modal-example-basic
#code
```vue
<script setup>
const open = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="open = true" />
<UModal v-model="open">
<!-- 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 open = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="open = true" />
<UModal v-model="open">
<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

37
docs/content/5.overlays/2.slideover.md Normal file
View File

@@ -0,0 +1,37 @@
---
github: true
headlessui:
label: 'Dialog'
to: 'https://headlessui.com/vue/dialog'
---
## Usage
::component-example
#default
:slideover-example
#code
```vue
<script setup>
const open = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="open = true" />
<USlideover v-model="open">
<!-- Content -->
</USlideover>
</div>
</template>
```
::
## Props
:component-props
## Preset
:component-preset

33
docs/content/5.overlays/3.popover.md Normal file
View File

@@ -0,0 +1,33 @@
---
github: true
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

26
docs/content/5.overlays/4.tooltip.md Normal file
View File

@@ -0,0 +1,26 @@
---
github: true
---
## Usage
::component-example
#default
:tooltip-example
#code
```vue
<template>
<UTooltip text="Tooltip">
<UButton color="gray" label="Button" />
</UTooltip>
</template>
```
::
## Props
:component-props
## Preset
:component-preset

49
docs/content/5.overlays/5.context-menu.md Normal file
View File

@@ -0,0 +1,49 @@
---
github: true
---
## Usage
::component-example
#default
:context-menu-example
#code
```vue
<script setup>
const { x, y } = useMouse()
const isOpen = ref(false)
const virtualElement = ref({ getBoundingClientRect: () => ({}) })
function openContextMenu () {
const top = unref(y)
const left = unref(x)
virtualElement.value.getBoundingClientRect = () => ({
width: 0,
height: 0,
top,
left
})
isOpen.value = true
}
</script>
<template>
<div @contextmenu.prevent="openContextMenu">
<UContextMenu v-model="isOpen" :virtual-element="virtualElement" width-class="w-48">
<!-- Content -->
</UContextMenu>
</div>
</template>
```
::
## Props
:component-props
## Preset
:component-preset

249
docs/content/5.overlays/6.notification.md Normal file
View File

@@ -0,0 +1,249 @@
---
github: true
---
## Usage
First of all, add the `Notifications` component to your app, preferably inside `app.vue`.
This component will render by default the notifications at the bottom right of the screen. You can configure its behaviour in the `app.config.ts` through `ui.notifications`.
```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>
```
::
### 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'
description: 'This is a notification.'
props:
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: 10000
---
::
### 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` 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` prop or globally through `ui.notifications.default.close`.
::component-card
---
baseProps:
id: 6
title: 'Notification'
timeout: 0
props:
close:
icon: 'i-heroicons-archive-box-x-mark'
color: 'primary'
variant: 'outline'
padded: true
size: '2xs'
ui:
rounded: 'rounded-full'
excludedProps:
- close
---
::
### 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 `close`, you can pass all the props of the [Button](/elements/button) component inside the action or globally through `ui.notifications.default.action`.
::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