Skip to content

Commit

Permalink
Merge branch 'dev' into feat/180
Browse files Browse the repository at this point in the history
  • Loading branch information
eduayme authored Nov 10, 2023
2 parents f5742cd + 0eb8d8f commit a0f9447
Show file tree
Hide file tree
Showing 69 changed files with 1,038 additions and 1,098 deletions.
3 changes: 3 additions & 0 deletions .github/workflows/ci-dev.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ jobs:
os: [ubuntu-latest] # macos-latest, windows-latest
node: [18]

env:
NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}

steps:
- uses: actions/setup-node@v4
with:
Expand Down
3 changes: 3 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ jobs:
os: [ubuntu-latest] # macos-latest, windows-latest
node: [18]

env:
NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}

steps:
- uses: actions/setup-node@v4
with:
Expand Down
1 change: 1 addition & 0 deletions .release-it.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
},
"github": {
"release": true,
"releaseName": "v${version}",
"web": true
},
"hooks": {
Expand Down
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"prettier.enable": false
}
8 changes: 5 additions & 3 deletions docs/.env.example
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# To link Nuxt UI Pro in development
# Specify the path of @nuxt/ui-pro locally
NUXT_UI_PRO_PATH=
# To use Nuxt UI Pro in production
NUXT_UI_PRO_TOKEN=
# Production token for @nuxt/ui-pro, purchase on https://ui.nuxt.com/pro/purchase
NUXT_UI_PRO_LICENSE=
# Used when pre-rendering the docs for dynamic OG images
NUXT_PUBLIC_SITE_URL=
# Used to fetch `nuxt/ui-pro` docs content
NUXT_GITHUB_TOKEN=
61 changes: 55 additions & 6 deletions docs/app.vue
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<!-- eslint-disable vue/no-v-html -->
<template>
<div>
<Header />
<Header v-if="!$route.path.startsWith('/examples')" :links="links" />

<NuxtLayout>
<NuxtPage />
</NuxtLayout>

<Footer />
<Footer v-if="!$route.path.startsWith('/examples')" />

<ClientOnly>
<LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" />
<LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" :links="links" />
</ClientOnly>

<UNotifications>
Expand Down Expand Up @@ -42,10 +42,17 @@ const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { defa
// Computed

const navigation = computed(() => {
const main = nav.value.filter(item => item._path !== '/dev')
const dev = nav.value.find(item => item._path === '/dev')?.children
if (branch.value?.name === 'dev') {
const dev = nav.value.find(item => item._path === '/dev')?.children
const pro = nav.value.find(item => item._path === '/pro')

return [
...dev,
...(pro ? [pro] : [])
]
}

return branch.value?.name === 'dev' ? dev : main
return nav.value.filter(item => item._path !== '/dev')
})

const groups = computed(() => {
Expand All @@ -58,6 +65,48 @@ const groups = computed(() => {

const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')

const links = computed(() => {
return [{
label: 'Documentation',
icon: 'i-heroicons-book-open',
to: `${branch.value?.name === 'dev' ? '/dev' : ''}/getting-started`
}, {
label: 'Playground',
icon: 'i-simple-icons-stackblitz',
to: '/playground'
}, {
label: 'Roadmap',
icon: 'i-heroicons-academic-cap',
to: '/roadmap'
}, !!navigation.value.find(item => item._path === '/pro') && {
label: 'Pro',
icon: 'i-heroicons-square-3-stack-3d',
to: '/pro',
children: [{
label: 'Features',
to: '/pro',
exact: true,
icon: 'i-heroicons-beaker',
description: 'Discover all the features of Nuxt UI Pro.'
}, {
label: 'Guide',
to: '/pro/guide',
icon: 'i-heroicons-book-open',
description: 'Learn how to use Nuxt UI Pro in your app.'
}, {
label: 'Components',
to: '/pro/components',
icon: 'i-heroicons-cube-transparent',
description: 'Discover all the components available in Nuxt UI Pro.'
}]
}, {
label: 'Releases',
icon: 'i-heroicons-rocket-launch',
to: 'https://github.com/nuxt/ui/releases',
target: '_blank'
}].filter(Boolean)
})

// Watch

watch(() => searchRef.value?.commandPaletteRef?.query, debounce((query: string) => {
Expand Down
20 changes: 7 additions & 13 deletions docs/components/Footer.vue
Original file line number Diff line number Diff line change
@@ -1,22 +1,16 @@
<template>
<div v-if="$route.path !== '/playground'" class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center">
<div class="bg-white dark:bg-gray-900 px-4">
<div class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center">
<div v-if="!['/playground', '/roadmap'].includes($route.path)" class="bg-white dark:bg-gray-900 px-4">
<LogoOnly class="w-5 h-5" />
</div>
</div>

<UFooter :links="[]" :ui="{ bottom: { container: 'lg:py-4' } }">
<UFooter>
<template #left>
<div class="text-sm text-gray-500 dark:text-gray-400">
Made by
<NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs" class="inline-block">
<LogoLabs class="text-gray-900 dark:text-white h-4 w-auto" />
</NuxtLink>
</div>
</template>

<template #center>
<span class="text-sm text-gray-500 dark:text-gray-400">
<a v-if="$route.path.startsWith('/pro')" class="text-sm text-gray-500 dark:text-gray-400 hover:underline" href="https://ui.nuxt.com/pro/purchase" target="_blank">
Purchase Nuxt UI Pro
</a>
<span v-else class="text-sm text-gray-500 dark:text-gray-400">
Published under <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-gray-900 dark:text-white">
MIT License
</NuxtLink>
Expand Down
45 changes: 19 additions & 26 deletions docs/components/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,42 +31,35 @@
</template>

<template #panel>
<BranchSelect />
<UAsideLinks :links="links" />

<UNavigationTree :links="mapContentNavigation(navigation)" />
<UDivider type="dashed" class="mt-4 mb-3" />

<BranchSelect v-if="!route.path.startsWith('/pro')" />

<UNavigationTree :links="mapContentNavigation(navigation)" :multiple="false" default-open />
</template>
</UHeader>
</template>

<script setup lang="ts">
import type { NavItem } from '@nuxt/content/dist/runtime/types'
import type { Link } from '#ui-pro/types'
defineProps<{
links: Link[]
}>()
const route = useRoute()
const { metaSymbol } = useShortcuts()
const navigation = inject<Ref<NavItem[]>>('navigation')
const nav = inject<Ref<NavItem[]>>('navigation')
const navigation = computed(() => {
if (route.path.startsWith('/pro')) {
return nav.value.find(item => item._path === '/pro')?.children
}
const links = computed(() => {
return [{
label: 'Documentation',
icon: 'i-heroicons-book-open-solid',
to: '/getting-started'
}, {
label: 'Examples',
icon: 'i-heroicons-square-3-stack-3d',
to: '/getting-started/examples'
}, {
label: 'Playground',
icon: 'i-simple-icons-stackblitz',
to: '/playground'
}, {
label: 'Pro',
icon: 'i-heroicons-square-3-stack-3d',
to: '/pro'
}, {
label: 'Releases',
icon: 'i-heroicons-rocket-launch-solid',
to: 'https://github.com/nuxt/ui/releases',
target: '_blank'
}]
return nav.value.filter(item => !item._path.startsWith('/pro'))
})
</script>
24 changes: 17 additions & 7 deletions docs/components/content/ComponentCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@
</div>
</div>

<div class="flex border border-b-0 border-gray-200 dark:border-gray-700 relative not-prose" :class="[{ 'p-4': padding }, propsToSelect.length ? 'border-t-0' : 'rounded-t-md', backgroundClass, overflowClass]">
<component :is="name" v-model="vModel" v-bind="fullProps">
<div class="flex border border-b-0 border-gray-200 dark:border-gray-700 relative not-prose" :class="[{ 'p-4': padding }, propsToSelect.length ? 'border-t-0' : 'rounded-t-md', backgroundClass, extraClass]">
<component :is="name" v-model="vModel" v-bind="fullProps" :class="componentClass">
<ContentSlot v-if="$slots.default" :use="$slots.default" />

<template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
Expand Down Expand Up @@ -99,13 +99,17 @@ const props = defineProps({
type: String,
default: 'bg-white dark:bg-gray-900'
},
overflowClass: {
extraClass: {
type: String,
default: ''
},
previewOnly: {
type: Boolean,
default: false
},
componentClass: {
type: String,
default: ''
}
})
Expand All @@ -116,10 +120,16 @@ const componentProps = reactive({ ...props.props })
const { $prettier } = useNuxtApp()
const appConfig = useAppConfig()
const route = useRoute()
// eslint-disable-next-line vue/no-dupe-keys
const slug = props.slug || route.params.slug[route.params.slug.length - 1]
const camelName = camelCase(slug)
const name = `U${upperFirst(camelName)}`
let name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
// TODO: Remove once merged on `main` branch
if (['AvatarGroup', 'ButtonGroup', 'MeterGroup'].includes(name)) {
name = `U${name}`
}
if (['avatar-group', 'button-group', 'radio'].includes(name)) {
name = `U${upperFirst(camelCase(name))}`
}
const meta = await fetchComponentMeta(name)
Expand Down
32 changes: 27 additions & 5 deletions docs/components/content/ComponentExample.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
<template>
<div class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0">
<div
class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md"
:class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode }, backgroundClass, overflowClass]"
class="flex border border-gray-200 dark:border-gray-700 relative rounded-t-md"
:class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode, 'not-prose': !prose }, backgroundClass, extraClass]"
>
<component :is="camelName" v-if="component" v-bind="componentProps" />
<template v-if="component">
<iframe v-if="iframe" :src="`/examples/${component}`" v-bind="iframeProps" :class="backgroundClass" class="w-full" />
<component :is="camelName" v-else v-bind="componentProps" :class="componentClass" />
</template>

<ContentSlot v-if="$slots.default" :use="$slots.default" />
</div>
<template v-if="hasCode">
Expand Down Expand Up @@ -43,18 +47,36 @@ const props = defineProps({
type: Boolean,
default: true
},
prose: {
type: Boolean,
default: false
},
iframe: {
type: Boolean,
default: false
},
iframeProps: {
type: Object,
default: () => ({})
},
backgroundClass: {
type: String,
default: 'bg-white dark:bg-gray-900'
},
overflowClass: {
extraClass: {
type: String,
default: ''
}
})
let component = props.component
// TODO: Remove once merged on `main` branch
if (['command-palette-theme-algolia', 'command-palette-theme-raycast', 'vertical-navigation-theme-tailwind', 'pagination-theme-rounded'].includes(component)) {
component = component.replace('-theme', '-example-theme')
}
const instance = getCurrentInstance()
const camelName = camelCase(props.component)
const camelName = camelCase(component)
const data = await fetchContentExampleCode(camelName)
const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))
Expand Down
2 changes: 1 addition & 1 deletion docs/components/content/ComponentPreset.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const name = `U${upperFirst(camelName)}`
const preset = config[camelName]
const { data: ast } = await useAsyncData(`${name}-preset`, () => transformContent('content:_markdown.md', `
\`\`\`json [${name}.vue]
\`\`\`json
${JSON.stringify(preset, null, 2)}
\`\`\`\
`, {
Expand Down
14 changes: 10 additions & 4 deletions docs/components/content/ComponentProps.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,16 @@ const props = defineProps({
})
const route = useRoute()
// eslint-disable-next-line vue/no-dupe-keys
const slug = props.slug || route.params.slug[route.params.slug.length - 1]
const camelName = camelCase(slug)
const name = `U${upperFirst(camelName)}`
let name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
// TODO: Remove once merged on `main` branch
if (['AvatarGroup', 'ButtonGroup', 'MeterGroup'].includes(name)) {
name = `U${name}`
}
if (['avatar-group', 'button-group', 'radio'].includes(name)) {
name = `U${upperFirst(camelCase(name))}`
}
const meta = await fetchComponentMeta(name)
</script>
9 changes: 6 additions & 3 deletions docs/components/content/ComponentPropsField.vue
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
<template>
<Field v-bind="prop">
<code v-if="prop.default">{{ prop.default }}</code>
<p v-if="prop.description">
{{ prop.description }}
</p>

<Collapsible v-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'object').length">
<FieldGroup v-for="schema in prop.schema.schema" :key="schema.name" class="!mt-0">
<FieldGroup v-for="schema in prop.schema.schema" :key="schema.name">
<ComponentPropsField v-for="subProp in Object.values(schema.schema)" :key="(subProp as any).name" :prop="subProp" />
</FieldGroup>
</Collapsible>
<Collapsible v-else-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'array').length">
<FieldGroup v-for="schema in prop.schema.schema" :key="schema.name" class="!mt-0">
<FieldGroup v-for="schema in prop.schema.schema" :key="schema.name">
<template v-for="subSchema in schema.schema" :key="subSchema.name">
<ComponentPropsField v-for="subProp in Object.values(subSchema.schema)" :key="(subProp as any).name" :prop="subProp" />
</template>
</FieldGroup>
</Collapsible>
<Collapsible v-else-if="prop.schema?.kind === 'object' && prop.schema.type !== 'Function' && Object.values(prop.schema.schema)?.length">
<FieldGroup class="!mt-0">
<FieldGroup>
<ComponentPropsField v-for="subProp in Object.values(prop.schema.schema)" :key="(subProp as any).name" :prop="subProp" />
</FieldGroup>
</Collapsible>
Expand Down
Loading

0 comments on commit a0f9447

Please sign in to comment.