mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
Merge branch 'v3' into feat/init-blog
This commit is contained in:
HugoRCD
@@ -53,7 +53,7 @@ provide('navigation', mappedNavigation)
|
||||
<NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
|
||||
|
||||
<template v-if="!route.path.startsWith('/examples')">
|
||||
<Banner />
|
||||
<!-- <Banner /> -->
|
||||
|
||||
<Header :links="links" />
|
||||
</template>
|
||||
|
||||
@@ -38,7 +38,7 @@ const schemaProps = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ProseCollapsible v-if="schemaProps?.length" class="mt-1">
|
||||
<ProseCollapsible v-if="schemaProps?.length" class="mt-1 mb-0">
|
||||
<ProseUl>
|
||||
<ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
|
||||
<HighlightInlineType :type="`${schemaProp.name}${schemaProp.required === false ? '?' : ''}: ${schemaProp.type}`" />
|
||||
|
||||
@@ -59,7 +59,7 @@ provide('navigation', mappedNavigation)
|
||||
<UApp>
|
||||
<NuxtLoadingIndicator color="#FFF" />
|
||||
|
||||
<Banner />
|
||||
<!-- <Banner /> -->
|
||||
|
||||
<Header :links="links" />
|
||||
|
||||
|
||||
@@ -21,10 +21,10 @@ Use the `items` prop as an array of objects with the following properties:
|
||||
- `icon?: string`{lang="ts-type"}
|
||||
- `avatar?: AvatarProps`{lang="ts-type"}
|
||||
- `badge?: string | number | BadgeProps`{lang="ts-type"}
|
||||
- `tooltip?: TooltipProps`{lang="ts-type"}
|
||||
- `tooltip?: TooltipProps`{lang="ts-type"} :badge{label="Soon"}
|
||||
- `trailingIcon?: string`{lang="ts-type"}
|
||||
- `type?: 'label' | 'link'`{lang="ts-type"}
|
||||
- `collapsible?: boolean`{lang="ts-type"}
|
||||
- `collapsible?: boolean`{lang="ts-type"} :badge{label="Soon"}
|
||||
- `defaultOpen?: boolean`{lang="ts-type"}
|
||||
- `open?: boolean`{lang="ts-type"}
|
||||
- `value?: string`{lang="ts-type"}
|
||||
@@ -144,7 +144,7 @@ Each item can take a `children` array of objects with the following properties t
|
||||
Use the `orientation` prop to change the orientation of the NavigationMenu.
|
||||
|
||||
::note
|
||||
When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties. You can also use the `collapsible` property to control if the item is collapsible.
|
||||
When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties.
|
||||
::
|
||||
|
||||
::component-code
|
||||
@@ -241,6 +241,108 @@ props:
|
||||
Groups will be spaced when orientation is `horizontal` and separated when orientation is `vertical`.
|
||||
::
|
||||
|
||||
### Collapsed
|
||||
|
||||
Use the `collapsed` prop to collapse the NavigationMenu, this can be useful in a sidebar for example.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
ignore:
|
||||
- items
|
||||
- orientation
|
||||
- class
|
||||
external:
|
||||
- items
|
||||
externalTypes:
|
||||
- NavigationMenuItem[][]
|
||||
props:
|
||||
collapsed: true
|
||||
orientation: 'vertical'
|
||||
items:
|
||||
- - label: Links
|
||||
type: 'label'
|
||||
- label: Guide
|
||||
icon: i-lucide-book-open
|
||||
children:
|
||||
- label: Introduction
|
||||
description: Fully styled and customizable components for Nuxt.
|
||||
icon: i-lucide-house
|
||||
- label: Installation
|
||||
description: Learn how to install and configure Nuxt UI in your application.
|
||||
icon: i-lucide-cloud-download
|
||||
- label: 'Icons'
|
||||
icon: 'i-lucide-smile'
|
||||
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
|
||||
- label: 'Colors'
|
||||
icon: 'i-lucide-swatch-book'
|
||||
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
|
||||
- label: 'Theme'
|
||||
icon: 'i-lucide-cog'
|
||||
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
|
||||
- label: Composables
|
||||
icon: i-lucide-database
|
||||
collapsible: false
|
||||
open: false
|
||||
children:
|
||||
- label: defineShortcuts
|
||||
icon: i-lucide-file-text
|
||||
description: Define shortcuts for your application.
|
||||
to: /composables/define-shortcuts
|
||||
- label: useOverlay
|
||||
icon: i-lucide-file-text
|
||||
description: Display a modal/slideover within your application.
|
||||
to: /composables/use-overlay
|
||||
- label: useToast
|
||||
icon: i-lucide-file-text
|
||||
description: Display a toast within your application.
|
||||
to: /composables/use-toast
|
||||
- label: Components
|
||||
icon: i-lucide-box
|
||||
collapsible: false
|
||||
open: false
|
||||
to: /components
|
||||
active: true
|
||||
children:
|
||||
- label: Link
|
||||
icon: i-lucide-file-text
|
||||
description: Use NuxtLink with superpowers.
|
||||
to: /components/link
|
||||
- label: Modal
|
||||
icon: i-lucide-file-text
|
||||
description: Display a modal within your application.
|
||||
to: /components/modal
|
||||
- label: NavigationMenu
|
||||
icon: i-lucide-file-text
|
||||
description: Display a list of links.
|
||||
to: /components/navigation-menu
|
||||
- label: Pagination
|
||||
icon: i-lucide-file-text
|
||||
description: Display a list of pages.
|
||||
to: /components/pagination
|
||||
- label: Popover
|
||||
icon: i-lucide-file-text
|
||||
description: Display a non-modal dialog that floats around a trigger element.
|
||||
to: /components/popover
|
||||
- label: Progress
|
||||
icon: i-lucide-file-text
|
||||
description: Show a horizontal bar to indicate task progression.
|
||||
to: /components/progress
|
||||
- - label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
badge: 3.8k
|
||||
to: https://github.com/nuxt/ui
|
||||
target: _blank
|
||||
- label: Help
|
||||
icon: i-lucide-circle-help
|
||||
disabled: true
|
||||
---
|
||||
::
|
||||
|
||||
::tip
|
||||
You can set the `collapsible: false` property on items with children to prevent them from being collapsible. This allows the item to act as a regular link while still displaying its children in a submenu.
|
||||
::
|
||||
|
||||
### Highlight
|
||||
|
||||
Use the `highlight` prop to display a highlighted border for the active item.
|
||||
@@ -782,6 +884,126 @@ You can inspect the DOM to see each item's content being rendered.
|
||||
|
||||
## Examples
|
||||
|
||||
### With tooltips in items :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
You can use the `tooltip` property to display a [Tooltip](/components/tooltip) around an item. This can be useful when the menu is collapsed.
|
||||
|
||||
::component-code
|
||||
---
|
||||
collapse: true
|
||||
ignore:
|
||||
- items
|
||||
- orientation
|
||||
- class
|
||||
external:
|
||||
- items
|
||||
externalTypes:
|
||||
- NavigationMenuItem[][]
|
||||
props:
|
||||
collapsed: true
|
||||
orientation: 'vertical'
|
||||
items:
|
||||
- - label: Links
|
||||
type: 'label'
|
||||
- label: Guide
|
||||
icon: i-lucide-book-open
|
||||
tooltip:
|
||||
text: 'Guide'
|
||||
children:
|
||||
- label: Introduction
|
||||
description: Fully styled and customizable components for Nuxt.
|
||||
icon: i-lucide-house
|
||||
tooltip:
|
||||
text: 'Introduction'
|
||||
- label: Installation
|
||||
description: Learn how to install and configure Nuxt UI in your application.
|
||||
icon: i-lucide-cloud-download
|
||||
tooltip:
|
||||
text: 'Installation'
|
||||
- label: 'Icons'
|
||||
icon: 'i-lucide-smile'
|
||||
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
|
||||
tooltip:
|
||||
text: 'Icons'
|
||||
- label: 'Colors'
|
||||
icon: 'i-lucide-swatch-book'
|
||||
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
|
||||
tooltip:
|
||||
text: 'Colors'
|
||||
- label: 'Theme'
|
||||
icon: 'i-lucide-cog'
|
||||
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
|
||||
tooltip:
|
||||
text: 'Theme'
|
||||
- label: Composables
|
||||
icon: i-lucide-database
|
||||
tooltip:
|
||||
text: 'Composables'
|
||||
collapsible: false
|
||||
open: false
|
||||
children:
|
||||
- label: defineShortcuts
|
||||
icon: i-lucide-file-text
|
||||
description: Define shortcuts for your application.
|
||||
to: /composables/define-shortcuts
|
||||
- label: useOverlay
|
||||
icon: i-lucide-file-text
|
||||
description: Display a modal/slideover within your application.
|
||||
to: /composables/use-overlay
|
||||
- label: useToast
|
||||
icon: i-lucide-file-text
|
||||
description: Display a toast within your application.
|
||||
to: /composables/use-toast
|
||||
- label: Components
|
||||
icon: i-lucide-box
|
||||
tooltip:
|
||||
text: 'Components'
|
||||
to: /components
|
||||
active: true
|
||||
collapsible: false
|
||||
open: false
|
||||
children:
|
||||
- label: Link
|
||||
icon: i-lucide-file-text
|
||||
description: Use NuxtLink with superpowers.
|
||||
to: /components/link
|
||||
- label: Modal
|
||||
icon: i-lucide-file-text
|
||||
description: Display a modal within your application.
|
||||
to: /components/modal
|
||||
- label: NavigationMenu
|
||||
icon: i-lucide-file-text
|
||||
description: Display a list of links.
|
||||
to: /components/navigation-menu
|
||||
- label: Pagination
|
||||
icon: i-lucide-file-text
|
||||
description: Display a list of pages.
|
||||
to: /components/pagination
|
||||
- label: Popover
|
||||
icon: i-lucide-file-text
|
||||
description: Display a non-modal dialog that floats around a trigger element.
|
||||
to: /components/popover
|
||||
- label: Progress
|
||||
icon: i-lucide-file-text
|
||||
description: Show a horizontal bar to indicate task progression.
|
||||
to: /components/progress
|
||||
- - label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
badge: 3.8k
|
||||
to: https://github.com/nuxt/ui
|
||||
target: _blank
|
||||
tooltip:
|
||||
text: 'GitHub'
|
||||
kbds:
|
||||
- 3.8k
|
||||
- label: Help
|
||||
icon: i-lucide-circle-help
|
||||
disabled: true
|
||||
tooltip:
|
||||
text: 'Help'
|
||||
---
|
||||
::
|
||||
|
||||
### Control active item
|
||||
|
||||
You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item.
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
"name": "@nuxt/ui-docs",
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@ai-sdk/vue": "^1.2.11",
|
||||
"@ai-sdk/vue": "^1.2.12",
|
||||
"@iconify-json/logos": "^1.2.4",
|
||||
"@iconify-json/lucide": "^1.2.41",
|
||||
"@iconify-json/simple-icons": "^1.2.33",
|
||||
"@iconify-json/lucide": "^1.2.42",
|
||||
"@iconify-json/simple-icons": "^1.2.34",
|
||||
"@iconify-json/vscode-icons": "^1.2.20",
|
||||
"@nuxt/content": "^3.5.1",
|
||||
"@nuxt/image": "^1.10.0",
|
||||
@@ -32,7 +32,7 @@
|
||||
"superstruct": "^2.0.2",
|
||||
"ufo": "^1.6.1",
|
||||
"valibot": "^1.1.0",
|
||||
"workers-ai-provider": "^0.3.1",
|
||||
"workers-ai-provider": "^0.3.2",
|
||||
"yup": "^1.6.1",
|
||||
"zod": "^3.24.4"
|
||||
},
|
||||
|
||||
12
package.json
12
package.json
@@ -115,14 +115,14 @@
|
||||
"@iconify/vue": "^4.3.0",
|
||||
"@internationalized/date": "^3.8.0",
|
||||
"@internationalized/number": "^3.6.1",
|
||||
"@nuxt/fonts": "^0.11.2",
|
||||
"@nuxt/fonts": "^0.11.3",
|
||||
"@nuxt/icon": "^1.12.0",
|
||||
"@nuxt/kit": "^3.17.2",
|
||||
"@nuxt/schema": "^3.17.2",
|
||||
"@nuxtjs/color-mode": "^3.5.2",
|
||||
"@standard-schema/spec": "^1.0.0",
|
||||
"@tailwindcss/postcss": "^4.1.5",
|
||||
"@tailwindcss/vite": "^4.1.5",
|
||||
"@tailwindcss/postcss": "^4.1.6",
|
||||
"@tailwindcss/vite": "^4.1.6",
|
||||
"@tanstack/vue-table": "^8.21.3",
|
||||
"@unhead/vue": "^2.0.8",
|
||||
"@vueuse/core": "^13.1.0",
|
||||
@@ -147,7 +147,7 @@
|
||||
"reka-ui": "^2.2.1",
|
||||
"scule": "^1.3.0",
|
||||
"tailwind-variants": "^1.0.0",
|
||||
"tailwindcss": "^4.1.5",
|
||||
"tailwindcss": "^4.1.6",
|
||||
"tinyglobby": "^0.2.13",
|
||||
"unplugin": "^2.3.2",
|
||||
"unplugin-auto-import": "^19.2.0",
|
||||
@@ -156,14 +156,14 @@
|
||||
"vue-component-type-helpers": "^2.2.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/eslint-config": "^1.3.0",
|
||||
"@nuxt/eslint-config": "^1.3.1",
|
||||
"@nuxt/module-builder": "^1.0.1",
|
||||
"@nuxt/test-utils": "^3.18.0",
|
||||
"@release-it/conventional-changelog": "^10.0.1",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"embla-carousel": "^8.6.0",
|
||||
"eslint": "^9.26.0",
|
||||
"happy-dom": "^17.4.6",
|
||||
"happy-dom": "^17.4.7",
|
||||
"nuxt": "^3.17.2",
|
||||
"release-it": "^19.0.2",
|
||||
"vitest": "^3.1.3",
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
"zod": "^3.24.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.3",
|
||||
"@vitejs/plugin-vue": "^5.2.4",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.5",
|
||||
"vue-tsc": "^2.2.10"
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
"typecheck": "nuxt typecheck"
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify-json/lucide": "^1.2.41",
|
||||
"@iconify-json/simple-icons": "^1.2.33",
|
||||
"@iconify-json/lucide": "^1.2.42",
|
||||
"@iconify-json/simple-icons": "^1.2.34",
|
||||
"@nuxt/ui": "latest",
|
||||
"@nuxthub/core": "^0.8.27",
|
||||
"nuxt": "^3.17.2",
|
||||
|
||||
732
pnpm-lock.yaml
generated
732
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -29,6 +29,11 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
|
||||
* @defaultValue 'vertical'
|
||||
*/
|
||||
orientation?: Toast['variants']['orientation']
|
||||
/**
|
||||
* Whether to show the progress bar.
|
||||
* @defaultValue true
|
||||
*/
|
||||
progress?: boolean
|
||||
/**
|
||||
* Display a list of actions:
|
||||
* - under the title and description when orientation is `vertical`
|
||||
@@ -76,7 +81,8 @@ import UButton from './Button.vue'
|
||||
|
||||
const props = withDefaults(defineProps<ToastProps>(), {
|
||||
close: true,
|
||||
orientation: 'vertical'
|
||||
orientation: 'vertical',
|
||||
progress: true
|
||||
})
|
||||
const emits = defineEmits<ToastEmits>()
|
||||
const slots = defineSlots<ToastSlots>()
|
||||
@@ -179,6 +185,6 @@ defineExpose({
|
||||
</ToastClose>
|
||||
</div>
|
||||
|
||||
<div v-if="remaining > 0 && duration" :class="ui.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }" />
|
||||
<div v-if="progress && remaining > 0 && duration" :class="ui.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }" />
|
||||
</ToastRoot>
|
||||
</template>
|
||||
|
||||
@@ -17,6 +17,11 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
|
||||
* @defaultValue true
|
||||
*/
|
||||
expand?: boolean
|
||||
/**
|
||||
* Whether to show the progress bar on all toasts.
|
||||
* @defaultValue true
|
||||
*/
|
||||
progress?: boolean
|
||||
/**
|
||||
* Render the toaster in a portal.
|
||||
* @defaultValue true
|
||||
@@ -49,7 +54,8 @@ import UToast from './Toast.vue'
|
||||
const props = withDefaults(defineProps<ToasterProps>(), {
|
||||
expand: true,
|
||||
portal: true,
|
||||
duration: 5000
|
||||
duration: 5000,
|
||||
progress: true
|
||||
})
|
||||
defineSlots<ToasterSlots>()
|
||||
|
||||
@@ -109,6 +115,7 @@ function getOffset(index: number) {
|
||||
v-for="(toast, index) of toasts"
|
||||
:key="toast.id"
|
||||
ref="refs"
|
||||
:progress="progress"
|
||||
v-bind="omit(toast, ['id', 'close'])"
|
||||
:close="(toast.close as boolean)"
|
||||
:data-expanded="expanded"
|
||||
@@ -121,9 +128,7 @@ function getOffset(index: number) {
|
||||
'--translate': expanded ? 'calc(var(--offset) * var(--translate-factor))' : 'calc(var(--before) * var(--gap))',
|
||||
'--transform': 'translateY(var(--translate)) scale(var(--scale))'
|
||||
}"
|
||||
:class="[ui.base(), {
|
||||
'cursor-pointer': !!toast.onClick
|
||||
}]"
|
||||
:class="ui.base({ class: [props.ui?.base, toast.onClick ? 'cursor-pointer' : undefined] })"
|
||||
@update:open="onUpdateOpen($event, toast.id)"
|
||||
@click="toast.onClick && toast.onClick(toast)"
|
||||
/>
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
import { reactive } from 'vue'
|
||||
import appConfig from '#build/app.config'
|
||||
|
||||
export const useAppConfig = () => appConfig
|
||||
const _appConfig = reactive(appConfig)
|
||||
|
||||
export const useAppConfig = () => _appConfig
|
||||
|
||||
@@ -9,6 +9,7 @@ import { useColorMode as useColorModeVueUse } from '@vueuse/core'
|
||||
export { useHead } from '@unhead/vue'
|
||||
export { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
export { useAppConfig } from './composables/useAppConfig'
|
||||
export { defineShortcuts } from '../composables/defineShortcuts'
|
||||
export { defineLocale } from '../composables/defineLocale'
|
||||
export { useLocale } from '../composables/useLocale'
|
||||
@@ -30,8 +31,6 @@ export const useColorMode = () => {
|
||||
}
|
||||
}
|
||||
|
||||
export const useAppConfig = () => appConfig
|
||||
|
||||
export const useCookie = <T = string>(
|
||||
_name: string,
|
||||
_options: Record<string, any> = {}
|
||||
|
||||
Reference in New Issue
Block a user