Merge remote-tracking branch 'origin/feat/progress' into feat/progress

# Conflicts: # README.md # docs/.env.example # docs/app.vue # docs/components/Footer.vue # docs/components/Header.vue # docs/components/content/examples/AccordionExampleItemSlot.vue # docs/components/content/examples/FormExampleJoi.vue # docs/components/content/examples/FormExampleYup.vue # docs/components/content/examples/FormExampleZod.vue # docs/components/content/themes/CommandPaletteThemeAlgolia.vue # docs/content/1.getting-started/1.index.md # docs/content/1.getting-started/3.theming.md # docs/content/2.elements/1.accordion.md # docs/content/2.elements/2.alert.md # docs/content/2.elements/3.avatar.md # docs/content/2.elements/4.badge.md # docs/content/2.elements/9.link.md # docs/content/3.forms/10.form.md # docs/content/3.forms/4.select-menu.md # docs/content/3.forms/9.form-group.md # docs/content/5.navigation/4.tabs.md # docs/content/6.overlays/6.notification.md # docs/error.vue # docs/nuxt.config.ts # docs/package.json # docs/pages/[...slug].vue # package.json # pnpm-lock.yaml # src/runtime/components/data/Table.vue # src/runtime/components/elements/Alert.vue # src/runtime/components/elements/Avatar.vue # src/runtime/components/elements/AvatarGroup.ts # src/runtime/components/forms/Form.vue # src/runtime/components/forms/FormGroup.ts # src/runtime/components/navigation/Tabs.vue # src/runtime/components/overlays/Popover.vue # src/runtime/types/form.d.ts
nuxt · Sep 19, 2023 · aaa4dcd · aaa4dcd
2 parents b566e33 + f4d3988
commit aaa4dcd
Show file tree

Hide file tree

Showing 37 changed files with 3,554 additions and 4,255 deletions.
diff --git a/README.md b/README.md
@@ -1,15 +1,13 @@
-[![nuxt-ui-social-card](https://repository-images.githubusercontent.com/428329515/43fec891-9030-4601-8233-5d45ba5c6013)](https://ui.nuxt.com)
-
 # Nuxt UI
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-Nuxt UI provides everything related to UI when building Nuxt applications: components, icons, colors, dark mode and also keyboard shortcuts.
+This module has been developed by [NuxtLabs](https://nuxtlabs.com/) for [Volta](https://volta.net) and [Nuxt Studio](https://nuxt.studio/). It provides everything related to UI when building a Nuxt application, including components, icons, colors, dark mode and also keyboard shortcuts.
 
-Is has been developed by [NuxtLabs](https://nuxtlabs.com/) for [Volta](https://volta.net), [Nuxt Studio](https://nuxt.studio/) and the Nuxt community.
+[![social preview](https://repository-images.githubusercontent.com/428329515/5a18c5dd-bb58-4874-b6ef-1c44e4884344)](https://ui.nuxtlabs.com)
 
 ## Features
 
@@ -21,44 +19,35 @@ Is has been developed by [NuxtLabs](https://nuxtlabs.com/) for [Volta](https://v
 - Bundled icons
 - Fully typed
 
-Read more on [ui.nuxt.com](https://ui.nuxt.com)
-
 ## Installation
 
 ```bash
-# Using npm
-npm install @nuxt/ui
-
-# Using yarn
-yarn add @nuxt/ui
-
-# Using pnpm
-pnpm add @nuxt/ui
+yarn add --dev @nuxthq/ui
 ```
 
 Then, register the module in your `nuxt.config.ts`:
 
 ```js
 export default defineNuxtConfig({
   modules: [
-    '@nuxt/ui'
+    '@nuxthq/ui'
   ]
 })
 ```
 
-If you want latest updates, please use `@nuxt/ui-edge` in your `package.json`:
+If you want latest updates, please use `@nuxthq/ui-edge` in your `package.json`:
 
 ```json
 {
   "devDependencies": {
-    "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
+    "@nuxthq/ui": "npm:@nuxthq/ui-edge@latest"
   }
 }
 ```
 
 ## Documentation
 
-Visit https://ui.nuxt.com to explore the documentation.
+Visit https://ui.nuxtlabs.com to view the documentation.
 
 ## Credits
 
@@ -72,17 +61,17 @@ Visit https://ui.nuxt.com to explore the documentation.
 
 ## License
 
-Licensed under the [MIT license](https://github.com/nuxt/ui/blob/dev/LICENSE.md).
+Licensed under the [MIT license](https://github.com/nuxtlabs/ui/blob/dev/LICENSE.md).
 
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/@nuxt/ui
+[npm-version-src]: https://img.shields.io/npm/v/@nuxthq/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/@nuxthq/ui
 
-[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/@nuxt/ui
+[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxthq/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/@nuxthq/ui
 
-[license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://github.com/nuxt/ui/blob/main/LICENSE
+[license-src]: https://img.shields.io/github/license/nuxtlabs/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://github.com/nuxtlabs/ui/blob/main/LICENSE
 
 [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
 [nuxt-href]: https://nuxt.com
diff --git a/docs/.env.example b/docs/.env.example
@@ -1,4 +1 @@
-# To use Nuxt Elements in production
 NUXT_ELEMENTS_TOKEN=
-# Used when pre-rendering the docs for dynamic OG images
-NUXT_PUBLIC_SITE_URL=
diff --git a/docs/app.vue b/docs/app.vue
@@ -3,14 +3,22 @@
   <div>
     <Header />
 
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-
-    <Footer />
+    <UMain>
+      <UContainer>
+        <UPage>
+          <template #left>
+            <UAside :links="anchors">
+              <UNavigationTree :links="mapContentNavigation(navigation)" />
+            </UAside>
+          </template>
+
+          <NuxtPage />
+        </UPage>
+      </UContainer>
+    </UMain>
 
     <ClientOnly>
-      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" />
+      <UDocsSearch :files="files" :navigation="navigation" />
     </ClientOnly>
 
     <UNotifications>
@@ -26,71 +34,59 @@
 </template>
 
 <script setup lang="ts">
-import { withoutTrailingSlash } from 'ufo'
-import { debounce } from 'perfect-debounce'
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
-
-const searchRef = ref()
-
-const route = useRoute()
 const colorMode = useColorMode()
-const { branch, branches } = useContentSource()
-
-const { data: nav } = await useAsyncData('navigation', () => fetchContentNavigation())
-const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })
+const { mapContentNavigation } = useElementsHelpers()
 
-// Computed
-
-const navigation = computed(() => {
-  const main = nav.value.filter(item => item._path !== '/dev')
-  const dev = nav.value.find(item => item._path === '/dev')?.children
-
-  return branch.value?.name === 'dev' ? dev : main
+const { data: navigation } = await useLazyAsyncData('navigation', () => fetchContentNavigation(), {
+  default: () => []
 })
-
-const groups = computed(() => {
-  if (route.path === '/') {
-    return []
-  }
-
-  return [{ key: 'branch', label: 'Branch', commands: branches.value }]
+const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), {
+  default: () => []
 })
 
-const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
-
-// Watch
+const anchors = [{
+  label: 'Documentation',
+  icon: 'i-heroicons-book-open-solid',
+  to: '/getting-started'
+}, {
+  label: 'Playground',
+  icon: 'i-simple-icons-stackblitz',
+  to: 'https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue',
+  target: '_blank'
+}, {
+  label: 'Releases',
+  icon: 'i-heroicons-rocket-launch-solid',
+  to: 'https://github.com/nuxtlabs/ui/releases',
+  target: '_blank'
+}]
 
-watch(() => searchRef.value?.commandPaletteRef?.query, debounce((query: string) => {
-  if (!query) {
-    return
-  }
+// Computed
 
-  useTrackEvent('Search', { props: { query: `${query} - ${searchRef.value?.commandPaletteRef.results.length} results` } })
-}, 500))
+const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
 // Head
 
 useHead({
+  titleTemplate: title => title && title.includes('Nuxt UI') ? title : `${title} - Nuxt UI`,
   meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' },
     { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
-    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
-    { rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
+    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
   ],
   htmlAttrs: {
     lang: 'en'
   }
 })
 
-useServerSeoMeta({
-  ogSiteName: 'Nuxt UI',
+useSeoMeta({
+  ogImage: '/social-preview.jpg',
+  twitterImage: '/social-preview.jpg',
   twitterCard: 'summary_large_image'
 })
 
 // Provide
 
 provide('navigation', navigation)
-provide('files', files)
 </script>
diff --git a/docs/components/Footer.vue b/docs/components/Footer.vue
@@ -1,32 +1,23 @@
 <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">
-      <LogoOnly class="w-5 h-5" />
+  <footer class="flex items-center gap-1.5 mt-12">
+    <div class="flex-1 flex items-baseline gap-1.5 text-sm text-gray-600 dark:text-gray-300 leading-6">
+      Made by
+      <NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs">
+        <LogoLabs class="text-gray-900 dark:text-white w-14 h-auto" />
+      </NuxtLink>
     </div>
-  </div>
 
-  <UFooter :links="[]" :ui="{ bottom: { container: 'lg:py-4' } }">
-    <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>
+    <NuxtLink :to="`https://github.com/nuxtlabs/ui/releases/tag/v${config.version}`" target="_blank" class="inline-flex">
+      <UBadge :label="`v${config.version}`" variant="subtle" />
+    </NuxtLink>
 
-    <template #center>
-      <span 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>
-      </span>
-    </template>
-
-    <template #right>
-      <UButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" target="_blank" v-bind="$elements.button.secondary" />
-      <UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" v-bind="$elements.button.secondary" />
-      <UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" v-bind="$elements.button.secondary" />
-    </template>
-  </UFooter>
+    <div class="flex-1 flex items-center justify-end gap-1.5 -my-1 lg:hidden">
+      <USocialButton to="https://twitter.com/nuxtlabs" target="_blank" icon="i-simple-icons-twitter" />
+      <USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" />
+    </div>
+  </footer>
 </template>
+
+<script setup lang="ts">
+const config = useRuntimeConfig().public
+</script>
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
@@ -1,39 +1,25 @@
 <template>
-  <UHeader
-    :links="links"
-    :class="{
-      'border-primary-200/75 dark:border-primary-900/50': $route.path === '/',
-      'border-gray-200 dark:border-gray-800': $route.path !== '/'
-    }"
-  >
+  <UHeader>
     <template #left>
-      <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white" aria-label="Nuxt UI">
+      <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
         <Logo class="w-auto h-6" />
       </NuxtLink>
     </template>
 
+    <template #center>
+      <UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
+    </template>
+
     <template #right>
       <ColorPicker />
 
-      <UTooltip text="Search" :shortcuts="[metaSymbol, 'K']">
-        <UDocsSearchButton :label="null" />
-      </UTooltip>
-
       <UColorModeButton />
 
-      <UButton
-        to="https://github.com/nuxt/ui"
-        target="_blank"
-        icon="i-simple-icons-github"
-        aria-label="GitHub"
-        class="hidden lg:inline-flex"
-        v-bind="$elements.button.secondary"
-      />
+      <USocialButton to="https://twitter.com/nuxtlabs" target="_blank" icon="i-simple-icons-twitter" class="hidden lg:inline-flex" />
+      <USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
     </template>
 
     <template #panel>
-      <BranchSelect />
-
       <UNavigationTree :links="mapContentNavigation(navigation)" />
     </template>
   </UHeader>
@@ -42,29 +28,7 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
 
-const { metaSymbol } = useShortcuts()
 const { mapContentNavigation } = useElementsHelpers()
 
 const navigation = inject<Ref<NavItem[]>>('navigation')
-
-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: 'Releases',
-    icon: 'i-heroicons-rocket-launch-solid',
-    to: 'https://github.com/nuxt/ui/releases',
-    target: '_blank'
-  }]
-})
 </script>
diff --git a/docs/components/content/examples/AccordionExampleItemSlot.vue b/docs/components/content/examples/AccordionExampleItemSlot.vue
@@ -53,17 +53,17 @@ const items = [{
           Installation
         </h3>
         <p class="text-sm text-gray-500 dark:text-gray-400">
-          Install <code>@nuxt/ui</code> dependency to your project:
+          Install <code>@nuxthq/ui</code> dependency to your project:
         </p>
         <p>
           {{ description }}
         </p>
       </div>
 
       <div class="flex flex-col items-center">
-        <code>$ npm i @nuxt/ui</code>
-        <code>$ yarn add @nuxt/ui</code>
-        <code>$ pnpm add @nuxt/ui</code>
+        <code>$ npm install @nuxthq/ui</code>
+        <code>$ nnpm install -D @nuxthq/ui</code>
+        <code>$ pnpm i -D @nuxthq/ui</code>
       </div>
     </template>
   </UAccordion>