@movk/nuxt-docs 1.1.0

package/app/components/content/ComponentExample.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import type { ChipProps } from '@nuxt/ui'
+import { camelCase } from 'scule'
+import { hash } from 'ohash'
+import { useElementSize } from '@vueuse/core'
+import { get, set } from '#ui/utils'
+
+const { preview = true, source = true, prettier = true, ...props } = defineProps<{
+  name: string
+  class?: any
+  /**
+   * Whether to render the component in an iframe
+   * @defaultValue false
+   */
+  iframe?: boolean | { [key: string]: any }
+  /**
+   * Whether to display the component in a mobile-sized iframe viewport
+   * @defaultValue false
+   */
+  iframeMobile?: boolean
+  props?: { [key: string]: any }
+  /**
+   * Whether to format the code with Prettier
+   * @defaultValue false
+   */
+  prettier?: boolean
+  /**
+   * Whether to collapse the code block
+   * @defaultValue false
+   */
+  collapse?: boolean | {
+    icon?: string
+    name?: string
+    openText?: string
+    closeText?: string
+    open?: boolean
+  }
+  /**
+   * Whether to show the preview
+   * When `false`, the filename will be shown instead
+   * @defaultValue true
+   */
+  preview?: boolean
+  /**
+   * Whether to show the source code
+   * @defaultValue true
+   */
+  source?: boolean
+  /**
+   * A list of variable props to link to the component.
+   */
+  options?: Array<{
+    alias?: string
+    name: string
+    label: string
+    items?: any[]
+    default: any
+    multiple?: boolean
+  }>
+  /**
+   * A list of line numbers to highlight in the code block
+   */
+  highlights?: number[]
+  /**
+   * Whether to add overflow-hidden to wrapper
+   */
+  overflowHidden?: boolean
+}>()
+
+const slots = defineSlots<{
+  options(props?: {}): any
+  code(props?: {}): any
+}>()
+
+const el = ref<HTMLElement | null>(null)
+const { $prettier } = useNuxtApp()
+
+const { width } = useElementSize(el)
+
+const camelName = camelCase(props.name)
+
+const data = await fetchComponentExample(camelName)
+
+const componentProps = reactive({ ...(props.props || {}) })
+
+const code = computed(() => {
+  let code = ''
+
+  if (props.collapse) {
+    // 构建 code-collapse 的属性
+    const collapseAttrs = typeof props.collapse === 'object'
+      ? Object.entries(props.collapse)
+          .map(([key, value]) => {
+            if (typeof value === 'boolean') {
+              return value ? key : ''
+            }
+            return `${key}="${value}"`
+          })
+          .filter(Boolean)
+          .join(' ')
+      : ''
+
+    code += `::code-collapse${collapseAttrs ? `{${collapseAttrs}}` : ''}
+`
+  }
+
+  code += `\`\`\`vue ${preview ? '' : ` [${data.pascalName}.vue]`}${props.highlights?.length ? `{${props.highlights.join('-')}}` : ''}
+${data?.code ?? ''}
+\`\`\``
+
+  if (props.collapse) {
+    code += `
+::`
+  }
+
+  return code
+})
+
+const { data: ast } = await useAsyncData(`component-example-${camelName}${hash({ props: componentProps, collapse: props.collapse })}`, async () => {
+  if (!prettier) {
+    return parseMarkdown(code.value)
+  }
+
+  let formatted = ''
+  try {
+    formatted = await $prettier.format(code.value, {
+      trailingComma: 'none',
+      semi: false,
+      singleQuote: true,
+      printWidth: 100
+    })
+  } catch {
+    formatted = code.value
+  }
+
+  return parseMarkdown(formatted)
+}, { watch: [code] })
+
+const optionsValues = ref(props.options?.reduce((acc, option) => {
+  if (option.name) {
+    acc[option.alias || option.name] = option.default
+  }
+  if (option.name.toLowerCase().endsWith('color') && option.items?.length) {
+    option.items = option.items.map((item: any) => ({
+      label: item,
+      value: item,
+      chip: { color: item }
+    }))
+  }
+  return acc
+}, {} as Record<string, any>) || {})
+
+const urlSearchParams = computed(() => {
+  const params = {
+    ...optionsValues.value,
+    ...componentProps
+  }
+
+  if (!props.iframeMobile) {
+    params.width = Math.round(width.value).toString()
+  }
+
+  return new URLSearchParams(params).toString()
+})
+</script>
+
+<template>
+  <div ref="el" class="my-5" :style="{ '--ui-header-height': '4rem' }">
+    <template v-if="preview">
+      <div class="border border-muted relative z-[1]" :class="[{ 'border-b-0 rounded-t-md': source, 'rounded-md': !source, 'overflow-hidden': props.overflowHidden }]">
+        <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-muted">
+          <slot name="options" />
+
+          <UFormField
+            v-for="option in props.options"
+            :key="option.name"
+            :label="option.label"
+            :name="option.name"
+            size="sm"
+            class="inline-flex ring ring-accented rounded-sm"
+            :ui="{
+              wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
+              label: 'text-muted px-2 py-1.5',
+              container: 'mt-0'
+            }"
+          >
+            <USelectMenu
+              v-if="option.items?.length"
+              :model-value="get(optionsValues, option.name)"
+              :items="option.items"
+              :search-input="false"
+              :value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
+              color="neutral"
+              variant="soft"
+              class="rounded-sm rounded-l-none min-w-12"
+              :multiple="option.multiple"
+              :class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
+              :ui="{ itemLeadingChip: 'size-2' }"
+              @update:model-value="set(optionsValues, option.name, $event)"
+            >
+              <template v-if="option.name.toLowerCase().endsWith('color')" #leading="{ modelValue, ui }">
+                <UChip
+                  inset
+                  standalone
+                  :color="(modelValue as any)"
+                  :size="(ui.itemLeadingChipSize() as ChipProps['size'])"
+                  class="size-2"
+                />
+              </template>
+            </USelectMenu>
+            <UInput
+              v-else
+              :model-value="get(optionsValues, option.name)"
+              color="neutral"
+              variant="soft"
+              :ui="{ base: 'rounded-sm rounded-l-none min-w-12' }"
+              @update:model-value="set(optionsValues, option.name, $event)"
+            />
+          </UFormField>
+        </div>
+
+        <iframe
+          v-if="iframe"
+          v-bind="typeof iframe === 'object' ? iframe : {}"
+          :src="`/examples/${name}?${urlSearchParams}`"
+          class="relative w-full"
+          :class="[props.class, !iframeMobile && 'lg:left-1/2 lg:-translate-x-1/2 lg:w-[1024px]']"
+        />
+        <div v-else class="flex justify-center p-4" :class="props.class">
+          <component :is="camelName" v-bind="{ ...componentProps, ...optionsValues }" />
+        </div>
+      </div>
+    </template>
+
+    <template v-if="source">
+      <div v-if="!!slots.code" class="[&_pre]:!rounded-t-none [&_div.my-5]:!mt-0">
+        <slot name="code" />
+      </div>
+      <MDCRenderer
+        v-else-if="ast"
+        :body="ast.body"
+        :data="ast.data"
+        class="[&_pre]:!rounded-t-none [&_div.my-5]:!mt-0"
+      />
+    </template>
+  </div>
+</template>

package/app/components/content/ComponentProps.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { ComponentMeta } from 'vue-component-meta'
+import { camelCase, kebabCase } from 'scule'
+
+const { ignore = [], slug } = defineProps<{
+  /**
+   * The slug of the component to fetch props for.
+   * @defaultValue route path's last segment
+   */
+  slug?: string
+  /**
+   * An array of prop names to ignore.
+   */
+  ignore?: string[]
+}>()
+
+const route = useRoute()
+
+const componentName = camelCase(slug ?? route.path.split('/').pop() ?? '')
+const meta = await fetchComponentMeta(componentName as any)
+
+const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
+  if (!meta?.meta?.props?.length) {
+    return []
+  }
+
+  return meta.meta.props.filter((prop) => {
+    return !ignore?.includes(prop.name)
+  }).map((prop) => {
+    if (prop.default) {
+      prop.default = prop.default.replace(' as never', '').replace(/^"(.*)"$/, '\'$1\'')
+    } else {
+      const tag = prop.tags?.find(tag => tag.name === 'defaultValue')?.text
+      if (tag) {
+        prop.default = tag
+      }
+    }
+
+    // @ts-expect-error - Type is not correct
+    prop.type = !prop.type.startsWith('boolean') && prop.schema?.kind === 'enum' && Object.keys(prop.schema.schema)?.length ? Object.values(prop.schema.schema).map(schema => schema?.type ? schema.type : schema).join(' | ') : prop.type
+    return prop
+  }).sort((a, b) => {
+    if (a.name === 'as') {
+      return -1
+    }
+
+    if (b.name === 'as') {
+      return 1
+    }
+
+    if (a.name === 'ui') {
+      return 1
+    }
+
+    if (b.name === 'ui') {
+      return -1
+    }
+
+    return 0
+  })
+})
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh>
+          Prop
+        </ProseTh>
+        <ProseTh>
+          Default
+        </ProseTh>
+        <ProseTh>
+          Type
+        </ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="prop in metaProps" :key="prop.name">
+        <ProseTd>
+          <ProseCode>
+            {{ prop.name }}
+          </ProseCode>
+        </ProseTd>
+        <ProseTd>
+          <HighlightInlineType v-if="prop.default" :type="prop.default" />
+        </ProseTd>
+        <ProseTd>
+          <HighlightInlineType v-if="prop.type" :type="prop.type" />
+
+          <MDC
+            v-if="prop.description"
+            :value="prop.description"
+            class="text-toned mt-1"
+            :cache-key="`${kebabCase(route.path)}-${prop.name}-description`"
+          />
+
+          <ComponentPropsLinks v-if="prop.tags?.length" :prop="prop" />
+          <ComponentPropsSchema v-if="prop.schema" :prop="prop" :ignore="ignore" />
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>

package/app/components/content/ComponentPropsLinks.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { kebabCase } from 'scule'
+import type { PropertyMeta } from 'vue-component-meta'
+
+const props = defineProps<{
+  prop: PropertyMeta
+}>()
+
+const route = useRoute()
+
+const links = computed(() => props.prop.tags?.filter((tag: any) => tag.name === 'link' || tag.name === 'see'))
+</script>
+
+<template>
+  <ProseUl v-if="links?.length">
+    <ProseLi v-for="(link, index) in links" :key="index">
+      <MDC :value="link.text ?? ''" class="my-1" :cache-key="`${kebabCase(route.path)}-${prop.name}-link-${index}`" />
+    </ProseLi>
+  </ProseUl>
+</template>

package/app/components/content/ComponentPropsSchema.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { kebabCase } from 'scule'
+import type { PropertyMeta } from 'vue-component-meta'
+
+const props = defineProps<{
+  prop: PropertyMeta
+  ignore?: string[]
+}>()
+
+const route = useRoute()
+
+function getSchemaProps(schema: PropertyMeta['schema']): any {
+  if (!schema || typeof schema === 'string' || !schema.schema) {
+    return []
+  }
+
+  if (schema.kind === 'object') {
+    return Object.values(schema.schema).filter(prop => !props.ignore?.includes(prop.name))
+  }
+
+  return (Array.isArray(schema.schema) ? schema.schema : Object.values(schema.schema)).flatMap(getSchemaProps as any)
+}
+
+const schemaProps = computed(() => {
+  return getSchemaProps(props.prop.schema).map((prop: any) => {
+    const defaultValue = prop.default ?? prop.tags?.find((tag: any) => tag.name === 'defaultValue')?.text
+    let description = prop.description
+    if (defaultValue) {
+      description = description ? `${description} Defaults to \`${defaultValue}\`{lang="ts-type"}.` : `Defaults to \`${defaultValue}\`{lang="ts-type"}.`
+    }
+
+    return {
+      ...prop,
+      description
+    }
+  })
+})
+</script>
+
+<template>
+  <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}`" />
+
+        <MDC
+          v-if="schemaProp.description"
+          :value="schemaProp.description"
+          class="text-muted my-1"
+          :cache-key="`${kebabCase(route.path)}-${prop.name}-${schemaProp.name}-description`"
+        />
+      </ProseLi>
+    </ProseUl>
+  </ProseCollapsible>
+</template>

package/app/components/content/ComponentSlots.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { camelCase, kebabCase } from 'scule'
+
+const props = defineProps<{
+  /**
+   * The slug of the component to fetch slots for.
+   * @defaultValue route path's last segment
+   */
+  slug?: string
+}>()
+
+const route = useRoute()
+
+const componentName = camelCase(props.slug ?? route.path.split('/').pop() ?? '')
+const meta = await fetchComponentMeta(componentName as any)
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh>
+          Slot
+        </ProseTh>
+        <ProseTh>
+          Type
+        </ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="slot in (meta?.meta?.slots || [])" :key="slot.name">
+        <ProseTd>
+          <ProseCode>
+            {{ slot.name }}
+          </ProseCode>
+        </ProseTd>
+        <ProseTd>
+          <HighlightInlineType v-if="slot.type" :type="slot.type" />
+
+          <MDC
+            v-if="slot.description"
+            :value="slot.description"
+            class="text-toned mt-1"
+            :cache-key="`${kebabCase(route.path)}-${slot.name}-description`"
+          />
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>

package/app/components/content/HeroBackground.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const { isLoading } = useLoadingIndicator()
+
+const route = useRoute()
+const heroBackgroundClass = computed(() => route.meta.heroBackground || '')
+const appear = ref(false)
+const appeared = ref(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    appear.value = true
+    setTimeout(() => {
+      appeared.value = true
+    }, 1000)
+  }, 0)
+})
+</script>
+
+<template>
+  <div
+    class="absolute w-full -top-px transition-all text-primary shrink-0"
+    :class="[
+      isLoading ? 'animate-pulse' : (appear ? heroBackgroundClass : 'opacity-0'),
+      appeared ? 'duration-[400ms]' : 'duration-1000'
+    ]"
+  >
+    <svg
+      viewBox="0 0 1440 181"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="pointer-events-none"
+    >
+      <mask id="path-1-inside-1_414_5526" fill="white">
+        <path d="M0 0H1440V181H0V0Z" />
+      </mask>
+      <path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_414_5526)" fill-opacity="0.22" />
+      <path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_414_5526)" mask="url(#path-1-inside-1_414_5526)" />
+      <defs>
+        <linearGradient
+          id="paint0_linear_414_5526"
+          x1="720"
+          y1="0"
+          x2="720"
+          y2="181"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="currentColor" />
+          <stop offset="1" stop-color="currentColor" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_414_5526"
+          x1="0"
+          y1="90.5"
+          x2="1440"
+          y2="90.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="currentColor" stop-opacity="0" />
+          <stop offset="0.395" stop-color="currentColor" />
+          <stop offset="1" stop-color="currentColor" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </div>
+</template>

package/app/components/content/HighlightInlineType.vue

@@ -0,0 +1,39 @@
+<!-- https://github.com/nuxt/ui/blob/v4/docs/app/components/content/HighlightInlineType.vue -->
+<script setup lang="ts">
+import { hash } from 'ohash'
+
+const props = defineProps<{
+  type: string
+}>()
+
+const type = computed(() => {
+  let type = props.type
+  if (type.includes(', "as" | "asChild" | "forceMount">')) {
+    type = type.replace(`, "as" | "asChild" | "forceMount">`, ``).replace('Omit<', '')
+  }
+  if (type.includes(', "as" | "asChild">')) {
+    type = type.replace(', "as" | "asChild">', '').replace('Omit<', '')
+  }
+  if (type.startsWith('undefined |')) {
+    type = type.replace('undefined |', '')
+  }
+  if (type.endsWith('| undefined')) {
+    type = type.replace('| undefined', '')
+  }
+
+  return type
+})
+
+const { data: ast } = await useAsyncData(`hightlight-inline-code-${hash(type.value).slice(0, 10)}`, () => parseMarkdown(`\`${type.value}\`{lang="ts-type"}`), {
+  watch: [type]
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <MDCRenderer v-if="ast?.body" :body="ast.body" :data="ast.data || {}" />
+    <template #fallback>
+      <ProseCode>{{ type }}</ProseCode>
+    </template>
+  </ClientOnly>
+</template>

package/app/components/content/Motion.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { Options } from 'motion-v'
+import { Motion } from 'motion-v'
+
+const {
+  initial = { scale: 1.1, opacity: 0, filter: 'blur(20px)' },
+  animate = { scale: 1, opacity: 1, filter: 'blur(0px)' },
+  transition = { duration: 0.6, delay: 0.1 }
+} = defineProps<Options>()
+</script>
+
+<template>
+  <Motion
+    :initial="initial"
+    :animate="animate"
+    :transition="transition"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Motion>
+</template>

package/app/components/header/Header.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { ButtonProps } from '@nuxt/ui'
+
+const route = useRoute()
+const { desktopLinks } = useHeader()
+const { header, github } = useAppConfig()
+
+const links = computed<ButtonProps[]>(() => github && github.url
+  ? [
+      {
+        'icon': 'i-simple-icons-github',
+        'to': github.url,
+        'target': '_blank',
+        'aria-label': 'GitHub'
+      },
+      ...header?.links || []
+    ]
+  : header.links)
+</script>
+
+<template>
+  <UHeader :ui="{ left: 'min-w-0' }" class="flex flex-col">
+    <template #left>
+      <HeaderLogo />
+    </template>
+
+    <UNavigationMenu :items="desktopLinks" variant="link" />
+
+    <template #right>
+      <ThemePicker />
+
+      <UTooltip text="Search" :kbds="['meta', 'K']">
+        <UContentSearchButton v-if="header?.search" />
+      </UTooltip>
+
+      <UTooltip text="Color Mode">
+        <UColorModeButton v-if="header?.colorMode" aria-label="Color Mode" />
+      </UTooltip>
+
+      <template v-if="links?.length">
+        <UTooltip
+          v-for="(link, count) in links"
+          :key="count"
+          :text="link.label || (link as any)['aria-label']"
+          class="hidden lg:flex"
+        >
+          <UButton v-bind="{ color: 'neutral', variant: 'ghost', ...link }" />
+        </UTooltip>
+      </template>
+    </template>
+
+    <template #body>
+      <HeaderBody />
+    </template>
+
+    <template v-if="route.path.startsWith('/docs/')" #bottom>
+      <HeaderBottom />
+    </template>
+  </UHeader>
+</template>

package/app/components/header/HeaderBody.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+const route = useRoute()
+const { mobileLinks } = useHeader()
+const { navigationByCategory } = useNavigation(navigation!)
+</script>
+
+<template>
+  <UNavigationMenu orientation="vertical" :items="mobileLinks" class="-mx-2.5" />
+
+  <template v-if="route.path.startsWith('/docs/')">
+    <USeparator type="dashed" class="mt-4 mb-6" />
+
+    <UContentNavigation :navigation="navigationByCategory" highlight :ui="{ linkTrailingBadge: 'font-semibold uppercase' }" />
+  </template>
+</template>