mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-16 04:58:12 +01:00
Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 514e9a24f1 | |||
|
9f60443731 | ||
|
b22891abe6 | ||
|
|
9cda333631 |
@@ -6,14 +6,12 @@ const count = ref(0)
|
|||||||
const toast = useToast()
|
const toast = useToast()
|
||||||
const overlay = useOverlay()
|
const overlay = useOverlay()
|
||||||
|
|
||||||
const modal = overlay.create(LazyModalExample, {
|
const modal = overlay.create(LazyModalExample)
|
||||||
props: {
|
|
||||||
count: count.value
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
async function open() {
|
async function open() {
|
||||||
const instance = modal.open()
|
const instance = modal.open({
|
||||||
|
count: count.value
|
||||||
|
})
|
||||||
|
|
||||||
const shouldIncrement = await instance.result
|
const shouldIncrement = await instance.result
|
||||||
|
|
||||||
|
|||||||
@@ -6,14 +6,12 @@ const count = ref(0)
|
|||||||
const toast = useToast()
|
const toast = useToast()
|
||||||
const overlay = useOverlay()
|
const overlay = useOverlay()
|
||||||
|
|
||||||
const slideover = overlay.create(LazySlideoverExample, {
|
const slideover = overlay.create(LazySlideoverExample)
|
||||||
props: {
|
|
||||||
count: count.value
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
async function open() {
|
async function open() {
|
||||||
const instance = slideover.open()
|
const instance = slideover.open({
|
||||||
|
count: count.value
|
||||||
|
})
|
||||||
|
|
||||||
const shouldIncrement = await instance.result
|
const shouldIncrement = await instance.result
|
||||||
|
|
||||||
|
|||||||
@@ -183,7 +183,28 @@ It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.
|
|||||||
```
|
```
|
||||||
|
|
||||||
::note{to="/components/app"}
|
::note{to="/components/app"}
|
||||||
The `App` component provides global configurations and is required for **Toast**, **Tooltip** components to work as well as **Programmatic Overlays**.
|
The `App` component sets up global config and is required for **Toast**, **Tooltip** and **programmatic overlays**.
|
||||||
|
::
|
||||||
|
|
||||||
|
#### Add the `isolate` class to your root container
|
||||||
|
|
||||||
|
```html [index.html]{9}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Nuxt UI</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app" class="isolate"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
::note
|
||||||
|
This ensures styles are scoped to your app and prevents issues with overlays and stacking contexts.
|
||||||
::
|
::
|
||||||
|
|
||||||
::
|
::
|
||||||
|
|||||||
@@ -51,3 +51,5 @@ items:
|
|||||||
url: https://wiredash.com/
|
url: https://wiredash.com/
|
||||||
- name: Zielgestalt
|
- name: Zielgestalt
|
||||||
url: https://zielgestalt.de/
|
url: https://zielgestalt.de/
|
||||||
|
- name: Arthur Danjou's Porfolio
|
||||||
|
url: https://arthurdanjou.fr/
|
||||||
|
|||||||
@@ -272,7 +272,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
|
|||||||
<component :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'span'" v-if="(!collapsed || orientation !== 'vertical') && (item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>])" as="span" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })" @click.stop.prevent>
|
<component :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'span'" v-if="(!collapsed || orientation !== 'vertical') && (item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>])" as="span" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })" @click.stop.prevent>
|
||||||
<slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
|
<slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
|
||||||
<UBadge
|
<UBadge
|
||||||
v-if="item.badge"
|
v-if="item.badge !== undefined"
|
||||||
color="neutral"
|
color="neutral"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
:size="((item.ui?.linkTrailingBadgeSize || props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
|
:size="((item.ui?.linkTrailingBadgeSize || props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
|
||||||
|
|||||||
@@ -148,7 +148,7 @@ defineExpose({
|
|||||||
|
|
||||||
<slot name="trailing" :item="item" :index="index">
|
<slot name="trailing" :item="item" :index="index">
|
||||||
<UBadge
|
<UBadge
|
||||||
v-if="item.badge"
|
v-if="item.badge !== undefined"
|
||||||
color="neutral"
|
color="neutral"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
:size="((item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()) as BadgeProps['size'])"
|
:size="((item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()) as BadgeProps['size'])"
|
||||||
|
|||||||
Reference in New Issue
Block a user