mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-19 14:31:47 +01:00
Merge branch 'v3' into feat/detect-theme-hash
This commit is contained in:
Benjamin Canac
GitHub
@@ -22,7 +22,7 @@ watch(framework, () => {
|
||||
indicator: 'bg-(--ui-bg)',
|
||||
trigger: 'px-1 data-[state=active]:text-(--ui-text-highlighted)'
|
||||
}"
|
||||
size="sm"
|
||||
size="xs"
|
||||
@update:model-value="(framework = $event as string)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -22,7 +22,7 @@ watch(module, () => {
|
||||
indicator: 'bg-(--ui-bg)',
|
||||
trigger: 'px-1 data-[state=active]:text-(--ui-text-highlighted)'
|
||||
}"
|
||||
size="sm"
|
||||
size="xs"
|
||||
@update:model-value="(module = $event as string)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -14,10 +14,25 @@ function processNavigationItem(item: ContentNavigationItem, parent?: ContentNavi
|
||||
}
|
||||
}
|
||||
|
||||
function processNavigationItemIcon(item: ContentNavigationItem) {
|
||||
let icon = item.icon
|
||||
if (item.path.startsWith('/components')) {
|
||||
icon = item.module === 'ui-pro' ? 'i-lucide-panels-top-left' : 'i-lucide-box'
|
||||
}
|
||||
if (item.path.startsWith('/composables')) {
|
||||
icon = 'i-lucide-square-function'
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
icon
|
||||
}
|
||||
}
|
||||
|
||||
export const useContentNavigation = (navigation: Ref<ContentNavigationItem[] | undefined>) => {
|
||||
const { framework, module } = useSharedData()
|
||||
|
||||
const mappedNavigation = computed(() => navigation.value?.map(item => processNavigationItem(item)))
|
||||
|
||||
const filteredNavigation = computed(() => mappedNavigation.value?.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
@@ -29,12 +44,15 @@ export const useContentNavigation = (navigation: Ref<ContentNavigationItem[] | u
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
})?.map(processNavigationItemIcon)
|
||||
}
|
||||
}))
|
||||
|
||||
return {
|
||||
mappedNavigation,
|
||||
mappedNavigation: computed(() => mappedNavigation.value?.map(item => ({
|
||||
...item,
|
||||
children: item.children?.map((child: any) => ({ ...child, icon: undefined }))
|
||||
}))),
|
||||
filteredNavigation
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,7 +72,7 @@ onMounted(() => {
|
||||
<template>
|
||||
<UPageHero headline="License Activation" :title="title" :description="description">
|
||||
<template #top>
|
||||
<div class="absolute z-[-1] rounded-full bg-[var(--ui-primary)] blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
|
||||
<div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
|
||||
<StarsBg />
|
||||
</template>
|
||||
<div>
|
||||
@@ -90,7 +90,7 @@ onMounted(() => {
|
||||
<UFormField label="GitHub Username" name="username">
|
||||
<UInput v-model="state.username" autocomplete="off" :ui="{ root: 'flex' }" />
|
||||
</UFormField>
|
||||
<UButton type="submit" :loading="activating" :disabled="state.license.length !== 36 || !state.username">
|
||||
<UButton type="submit" :loading="activating" :disabled="state.license?.length !== 36 || !state.username">
|
||||
Activate the license
|
||||
</UButton>
|
||||
<UAlert v-if="successMessage" color="success" variant="subtle" :title="successMessage">
|
||||
|
||||
@@ -27,7 +27,7 @@ defineOgImageComponent('Docs', {
|
||||
<MDC :value="page.hero.description" unwrap="p" />
|
||||
</template>
|
||||
<template #top>
|
||||
<div class="absolute z-[-1] rounded-full bg-[var(--ui-primary)] blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
|
||||
<div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
|
||||
<StarsBg />
|
||||
</template>
|
||||
|
||||
@@ -103,7 +103,7 @@ defineOgImageComponent('Docs', {
|
||||
variant="naked"
|
||||
class="overflow-hidden"
|
||||
>
|
||||
<div class="absolute rounded-full dark:bg-[var(--ui-primary)] blur-[250px] size-40 sm:size-50 transform -translate-x-1/2 left-1/2 -translate-y-80" />
|
||||
<div class="absolute rounded-full dark:bg-(--ui-primary) blur-[250px] size-40 sm:size-50 transform -translate-x-1/2 left-1/2 -translate-y-80" />
|
||||
|
||||
<StarsBg />
|
||||
</UPageCTA>
|
||||
|
||||
@@ -23,7 +23,7 @@ defineOgImageComponent('Docs', {
|
||||
<MDC :value="page.pricing.title" unwrap="p" />
|
||||
</template>
|
||||
<template #top>
|
||||
<div class="absolute z-[-1] rounded-full bg-[var(--ui-primary)] blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
|
||||
<div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
|
||||
<StarsBg />
|
||||
</template>
|
||||
<UContainer>
|
||||
@@ -98,7 +98,7 @@ defineOgImageComponent('Docs', {
|
||||
<UPageSection
|
||||
id="faq"
|
||||
v-bind="page.faq"
|
||||
class="scroll-mt-[var(--header-height)]"
|
||||
class="scroll-mt-(--ui-header-height)"
|
||||
>
|
||||
<UPageAccordion
|
||||
multiple
|
||||
|
||||
@@ -20,7 +20,7 @@ defineOgImageComponent('Docs', {
|
||||
<div class="relative">
|
||||
<UPageHero :links="page.links">
|
||||
<template #top>
|
||||
<div class="absolute z-[-1] rounded-full bg-[var(--ui-primary)] blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
|
||||
<div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
|
||||
<StarsBg />
|
||||
</template>
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
navigation.title: Introduction
|
||||
title: Nuxt UI v3
|
||||
description: 'A comprehensive, Nuxt-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.'
|
||||
navigation.icon: i-lucide-house
|
||||
---
|
||||
|
||||
We're thrilled to introduce this major update to our UI library, bringing significant improvements and powerful new features. Nuxt UI v3 represents a leap forward in creating robust, accessible, and highly customizable user interfaces for Nuxt applications.
|
||||
|
||||
@@ -7,6 +7,7 @@ links:
|
||||
- label: Playground
|
||||
to: https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks
|
||||
icon: i-lucide-codesandbox
|
||||
navigation.icon: i-lucide-square-play
|
||||
---
|
||||
|
||||
::callout{to="/getting-started/installation/vue" icon="i-logos-vue" class="hidden"}
|
||||
|
||||
@@ -7,6 +7,7 @@ links:
|
||||
- label: Playground
|
||||
to: https://codesandbox.io/p/devbox/nuxt-ui3-vue-4h5gqn
|
||||
icon: i-lucide-codesandbox
|
||||
navigation.icon: i-lucide-square-play
|
||||
---
|
||||
|
||||
::callout{to="/getting-started/installation/nuxt" icon="i-logos-nuxt-icon" class="hidden"}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Theme
|
||||
description: 'Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.'
|
||||
navigation.icon: i-lucide-palette
|
||||
---
|
||||
|
||||
## Tailwind CSS
|
||||
|
||||
@@ -11,6 +11,7 @@ links:
|
||||
to: https://github.com/nuxt/icon
|
||||
target: _blank
|
||||
icon: i-simple-icons-github
|
||||
navigation.icon: i-lucide-smile
|
||||
---
|
||||
|
||||
::callout{to="/getting-started/icons/vue" icon="i-logos-vue" class="hidden"}
|
||||
|
||||
@@ -7,6 +7,7 @@ links:
|
||||
to: https://iconify.design/
|
||||
target: _blank
|
||||
icon: i-simple-icons-iconify
|
||||
navigation.icon: i-lucide-smile
|
||||
---
|
||||
|
||||
::callout{to="/getting-started/icons/nuxt" icon="i-logos-nuxt-icon" class="hidden"}
|
||||
|
||||
@@ -7,6 +7,7 @@ links:
|
||||
to: https://github.com/nuxt/fonts
|
||||
target: _blank
|
||||
icon: i-simple-icons-github
|
||||
navigation.icon: i-lucide-a-large-small
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -7,6 +7,7 @@ links:
|
||||
to: https://github.com/nuxt-modules/color-mode
|
||||
target: _blank
|
||||
icon: i-simple-icons-github
|
||||
navigation.icon: i-lucide-sun-moon
|
||||
---
|
||||
|
||||
::callout{to="/getting-started/color-mode/vue" icon="i-logos-vue" class="hidden"}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Color Mode
|
||||
description: 'Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.'
|
||||
framework: vue
|
||||
navigation.icon: i-lucide-sun-moon
|
||||
---
|
||||
|
||||
::callout{to="/getting-started/color-mode/nuxt" icon="i-logos-nuxt-icon" class="hidden"}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Internationalization (i18n)
|
||||
description: 'Learn how to internationalize your Nuxt app with multi-directional support (LTR/RTL).'
|
||||
framework: nuxt
|
||||
navigation.icon: i-lucide-languages
|
||||
---
|
||||
|
||||
::callout{to="/getting-started/i18n/vue" icon="i-logos-vue" class="hidden"}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Internationalization (i18n)
|
||||
description: 'Learn how to internationalize your Vue app with multi-directional support (LTR/RTL).'
|
||||
framework: vue
|
||||
navigation.icon: i-lucide-languages
|
||||
---
|
||||
|
||||
::callout{to="/getting-started/i18n/nuxt" icon="i-logos-nuxt-icon" class="hidden"}
|
||||
|
||||
Reference in New Issue
Block a user