docus 3.0.0-beta.1 → 3.0.0-beta.4

package/components/app/Container.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { classNames, computed } from '#imports'
+
 const props = defineProps({
   padded: {
     type: Boolean,

package/components/app/Footer.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, useTheme } from '#imports'
+
 const { footer } = useTheme()
 
 const icons = computed(() => footer?.icons || [])

package/components/app/NavbarLogo.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, useTheme } from '#imports'
+
 const theme = useTheme()
 const hasLogo = computed(() => theme.header.logo)
 const hasTitle = computed(() => theme.header.title)

package/components/content/ButtonLink.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { hasProtocol } from 'ufo'
+import { computed } from '#imports'
 
 const props = defineProps({
   href: {

package/components/content/CodeGroup.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import TabsHeader from './TabsHeader.vue'
+import { defineComponent } from '#imports'
 
 const isTag = (slot: any, tag: string) => {
   return slot.type && slot.type.tag && slot.type.tag === tag

package/components/content/CopyButton.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Clipboard from 'clipboard'
+import { onMounted, ref } from '#imports'
 
 const copy = ref()
 const state = ref('init')

package/components/content/ReadMore.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { splitByCase, upperFirst } from 'scule'
+import { computed } from '#imports'
 
 const props = defineProps({
   link: {

package/components/content/Sandbox.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, onMounted, ref, useColorMode } from '#imports'
+
 const props = defineProps({
   src: {
     type: String,

package/components/content/Terminal.vue

@@ -1,40 +1,34 @@
-<script>
+<script setup lang="ts">
 import Clipboard from 'clipboard'
+import { nextTick, onMounted, ref } from '#imports'
 
-export default defineComponent({
-  props: {
-    snippet: {
-      type: String,
-      required: true,
-    },
+const props = defineProps({
+  snippet: {
+    type: String,
+    required: true,
   },
-  setup() {
-    const copyInstall = ref()
-    const copied = ref(false)
+})
 
-    const setupCopyInstall = () => {
-      if (!copyInstall.value)
-        return nextTick(setupCopyInstall)
+const copyInstall = ref()
+const copied = ref(false)
 
-      const instance = new Clipboard(copyInstall.value)
+const setupCopyInstall = () => {
+  if (!copyInstall.value)
+    return nextTick(setupCopyInstall)
 
-      instance.on('success', () => {
-        copied.value = true
+  const instance = new Clipboard(copyInstall.value)
 
-        setTimeout(() => {
-          copied.value = false
-        }, 1000)
-      })
-    }
+  instance.on('success', () => {
+    copied.value = true
 
-    onMounted(() => setupCopyInstall())
+    setTimeout(() => {
+      copied.value = false
+    }, 1000)
+  })
+}
+
+onMounted(() => setupCopyInstall())
 
-    return {
-      copyInstall,
-      copied,
-    }
-  },
-})
 </script>
 
 <template>

package/components/content/VideoPlayer.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { ref } from '#imports'
+
 const props = defineProps({
   poster: {
     type: String,

package/components/docs/DocsAside.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, useContent } from '#imports'
+
 const { navigation } = useContent()
 
 const tree = computed(() => {

package/components/docs/DocsAsideTree.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
+import { reactive, useRoute, useRouter, watch } from '#imports'
 
 const props = defineProps({
   tree: {

package/components/docs/DocsPageContent.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref, useContent } from '#imports'
+
 const { page } = useContent()
 
 const isOpen = ref(false)

package/components/docs/DocsToc.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useContent, useRoute, useScrollToHeading, useScrollspy, watch } from '#imports'
+
 const route = useRoute()
 
 const { activeHeadings, updateHeadings } = useScrollspy()

package/components/globals/Icon.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { ref, watch } from 'vue'
 import { Icon } from '@iconify/vue/dist/offline'
 import { loadIcon } from '@iconify/vue'
+import { ref, watch } from '#imports'
 
 const props = defineProps({
   name: {

package/components/globals/NuxtImg.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
 
+import { computed, useColorMode } from '#imports'
+
 export interface NuxtImg {
   light: string
   dark: string

package/components/globals/SocialIcons.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useTheme } from '#imports'
+
 defineProps({
   size: {
     type: String,

package/components/globals/ThemeSelect.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, useColorMode } from '#imports'
+
 const colorMode = useColorMode()
 
 type ColorMode = 'light' | 'dark'
@@ -12,9 +14,7 @@ const mode = computed<ColorMode>({
   },
 })
 
-const onClick = () => {
-  mode.value === 'light' ? (mode.value = 'dark') : (mode.value = 'light')
-}
+const onClick = () => (mode.value === 'light' ? (mode.value = 'dark') : (mode.value = 'light'))
 </script>
 
 <template>

package/components/prose/ProseHr.vue

@@ -1,5 +1,5 @@
 <template>
-  <hr />
+  <hr>
 </template>
 
 <style lang="postcss" scoped>

package/components/prose/ProseImg.vue

@@ -1,24 +1,22 @@
-<script>
-export default {
-  props: {
-    src: {
-      type: String,
-      default: '',
-    },
-    alt: {
-      type: String,
-      default: '',
-    },
-    width: {
-      type: [String, Number],
-      default: undefined,
-    },
-    height: {
-      type: [String, Number],
-      default: undefined,
-    },
+<script setup lang="ts">
+defineProps({
+  src: {
+    type: String,
+    default: '',
   },
-}
+  alt: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: [String, Number],
+    default: undefined,
+  },
+  height: {
+    type: [String, Number],
+    default: undefined,
+  },
+})
 </script>
 
 <template>

package/composables/useContent.ts

@@ -1,5 +1,6 @@
 import { withoutTrailingSlash } from 'ufo'
 import type { NavItem, ParsedContent } from '@nuxt/content/dist/runtime/types'
+import { computed, fetchContentNavigation, onBeforeUnmount, onMounted, queryContent, useNuxtApp, useRoute, useState } from '#imports'
 
 let closeHook
 

package/composables/useMenu.ts

@@ -1,3 +1,5 @@
+import { useState } from '#imports'
+
 export const useMenu = () => {
   // Menu visible reference
   const visible = useState('menu-visible', () => false)

package/composables/useScrollspy.ts

@@ -1,4 +1,5 @@
 import type { Ref } from 'vue'
+import { onBeforeMount, onBeforeUnmount, ref, watch } from '#imports'
 
 /**
  * Scrollspy allows you to watch visible headings in a specific page.

package/composables/useTheme.ts

@@ -1,3 +1,5 @@
+import { useRuntimeConfig } from '#imports'
+
 export const useTheme = () => {
   const { theme } = useRuntimeConfig()
 

package/layouts/default.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { useContent } from '#imports'
+
 const { page, fetchNavigation } = useContent()
 
 await fetchNavigation()

package/nuxt.config.ts

@@ -100,7 +100,7 @@ export default defineNuxtConfig({
   ],
   tailwindcss: {
     viewer: false,
-
+    cssPath: resolveThemeDir('assets/css/tailwind.css'),
     config: {
       darkMode: 'class',
       theme: {
@@ -121,12 +121,12 @@ export default defineNuxtConfig({
         require('@tailwindcss/aspect-ratio'),
       ],
       content: [
+        resolveThemeDir('assets/**/*.{mjs,vue,js,ts}'),
         resolveThemeDir('components/**/*.{mjs,vue,js,ts}'),
         resolveThemeDir('layouts/**/*.{mjs,vue,js,ts}'),
         resolveThemeDir('pages/**/*.{mjs,vue,js,ts}'),
       ],
       safelist: [24, 36, 48, 60, 72, 84, 96, 108, 120].map(number => `pl-[${number}px]`),
-      cssPath: resolveThemeDir('assets/css/tailwind.css'),
     },
   },
   content: {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.4",
   "name": "docus",
   "scripts": {
     "build": "nuxi build",

package/pages/[...slug].vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useContent, useRouter } from '#imports'
+
 const router = useRouter()
 
 const { page, fetchPage } = useContent()