docs-please 0.2.0-beta.0

package/app/components/content/ProseIcon.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { Component, HTMLAttributes } from 'vue'
+</script>
+
+<script setup lang="ts">
+import { useForwardProps } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+
+export interface ProseIconProps {
+  name: string | Component
+  mode?: 'svg' | 'css'
+  size?: string | number
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<ProseIconProps>()
+
+const iconProps = useForwardProps(reactivePick(props, 'name', 'mode', 'size'))
+</script>
+
+<template>
+  <Icon
+    v-if="typeof name === 'string'"
+    v-bind="iconProps"
+    :class="props.class"
+  />
+  <component
+    :is="name"
+    v-else
+    :class="props.class"
+  />
+</template>

package/app/components/content/ProseImg.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <img class="rounded-md">
+</template>

package/app/components/content/ProseLi.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <li class="mt-2">
+    <slot />
+  </li>
+</template>

package/app/components/content/ProseOl.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <ol class="my-6 ml-6 list-decimal">
+    <slot />
+  </ol>
+</template>

package/app/components/content/ProseP.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <p :class="cn('leading-relaxed [&:not(:first-child)]:mt-6', props.class)">
+    <slot />
+  </p>
+</template>

package/app/components/content/ProsePre.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { getIconForLanguageExtension } from '~/components/Icons'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  code?: string
+  language?: string
+  filename?: string
+  highlights?: number[]
+  meta?: string
+  class?: HTMLAttributes['class']
+  unwrap?: boolean
+}>()
+
+const npmBlock = ['npm install', 'npm create', 'npm run', 'npx']
+const isNpmCommand = computed(() => props.code && npmBlock.some(s => props.code!.startsWith(s)))
+const isShowingLineNumber = computed(() => props.meta?.includes('showLineNumbers'))
+
+const title = computed(() => props.filename || props.meta?.match(/title="([^"]+)"/)?.[1])
+
+const lang = computed(() => props.language?.replace('language-', '') || '')
+const IconExtension = computed(() => {
+  return getIconForLanguageExtension(lang.value)
+})
+
+const codeAttributes = computed(() => isShowingLineNumber.value
+  ? ({
+      'data-line-numbers': '',
+      'data-line-numbers-max-digits': 2,
+    })
+  : undefined)
+</script>
+
+<template>
+  <pre
+    v-if="unwrap"
+    :class="cn('no-scrollbar min-w-0 overflow-x-auto px-4 py-3.5 outline-none has-[[data-highlighted-line]]:px-0 has-[[data-line-numbers]]:px-0 has-[[data-slot=tabs]]:p-0 !bg-transparent', props.class)"
+    :data-language="lang"
+  ><code v-bind="codeAttributes"><slot /></code></pre>
+  <figure
+    v-else
+    data-pretty-code-figure
+  >
+    <pre
+      v-if="isNpmCommand"
+      :class="cn('no-scrollbar min-w-0 overflow-x-auto px-4 py-3.5 outline-none has-[[data-highlighted-line]]:px-0 has-[[data-line-numbers]]:px-0 has-[[data-slot=tabs]]:p-0', props.class)"
+    ><CodeBlockCommand :code="code!" /></pre>
+
+    <template v-else-if="title">
+      <figcaption
+        data-pretty-code-title
+        :data-language="lang"
+        class="text-code-foreground [&_svg]:text-code-foreground flex items-center gap-2 [&_svg]:size-4 [&_svg]:opacity-70"
+      >
+        <component
+          :is="IconExtension"
+          v-if="IconExtension"
+        />
+        {{ title }}
+      </figcaption>
+      <pre
+        :data-language="lang"
+        :class="cn('relative no-scrollbar min-w-0 overflow-x-auto px-4 py-3.5 outline-none has-[[data-highlighted-line]]:px-0 has-[[data-line-numbers]]:px-0 has-[[data-slot=tabs]]:p-0', props.class)"
+      ><CopyButton
+v-if="code"
+                                                                                                                                                                                                                       :value="code"
+      /><code v-bind="codeAttributes"><slot /></code></pre>
+    </template>
+
+    <pre
+      v-else
+      :data-language="lang"
+      :class="cn('relative no-scrollbar min-w-0 overflow-x-auto px-4 py-3.5 outline-none has-[[data-highlighted-line]]:px-0 has-[[data-line-numbers]]:px-0 has-[[data-slot=tabs]]:p-0', props.class)"
+    ><CopyButton
+v-if="code"
+                                                                                                                                                                                                                                           :value="code"
+    /><code v-bind="codeAttributes"><slot /></code></pre>
+  </figure>
+</template>

package/app/components/content/ProseStrong.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <strong class="font-medium">
+    <slot />
+  </strong>
+</template>

package/app/components/content/ProseTable.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div class="no-scrollbar my-6 w-full overflow-y-auto rounded-lg border">
+    <table
+      :class="cn(
+        'relative w-full overflow-hidden border-none text-sm [&_tbody_tr:last-child]:border-b-0',
+        props.class,
+      )"
+      v-bind="$attrs"
+    >
+      <slot />
+    </table>
+  </div>
+</template>

package/app/components/content/ProseTd.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <td class="px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+    <slot />
+  </td>
+</template>

package/app/components/content/ProseTh.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <th class="px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+    <slot />
+  </th>
+</template>

package/app/components/content/ProseTr.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <tr class="last:border-b-none m-0 border-b">
+    <slot />
+  </tr>
+</template>

package/app/components/content/ProseUl.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <ul class="my-6 ml-6 list-disc">
+    <slot />
+  </ul>
+</template>

package/app/components/content/Step.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h3
+    :class="cn(
+      'font-heading mt-8 scroll-m-32 text-xl font-medium tracking-tight', props.class,
+    )"
+  >
+    <slot mdc-unwrap="p" />
+  </h3>
+</template>

package/app/components/content/Steps.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn(
+      '[&>h3]:step steps mb-12 [counter-reset:step] *:[h3]:first:!mt-0', props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/content/Tabs.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { HTMLAttributes, VNode } from 'vue'
+import { computed, onBeforeUpdate, onMounted, ref, watch } from 'vue'
+import { cn } from '~/lib/utils'
+import {
+  Tabs as UITabs,
+  TabsContent as UITabsContent,
+  TabsList as UITabsList,
+  TabsTrigger as UITabsTrigger,
+} from '~/components/ui/tabs'
+
+export interface TabsProps {
+  /**
+   * Default selected tab index (0-based).
+   * @default 0
+   */
+  defaultIndex?: number
+  /**
+   * Sync selected tab across all tabs with this key via localStorage.
+   * @example 'package-manager'
+   */
+  sync?: string
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<TabsProps>(), {
+  defaultIndex: 0,
+})
+
+const slots = defineSlots<{
+  default(): VNode[]
+}>()
+
+const defaultValue = computed(() => String(props.defaultIndex))
+const model = ref<string>(defaultValue.value)
+const rerenderCount = ref(1)
+
+interface TabItem {
+  value: string
+  label: string
+  icon?: string
+  component: VNode
+}
+
+const items = computed<TabItem[]>(() => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  rerenderCount.value
+
+  let counter = 0
+  function transformSlot(slot: VNode): TabItem | null {
+    if (typeof slot.type === 'symbol') {
+      return null // Fragments are handled by flatMap in parent call
+    }
+
+    const slotProps = slot.props as { label?: string, icon?: string } | null
+    if (!slotProps?.label) {
+      return null
+    }
+
+    return {
+      value: String(counter++),
+      label: slotProps.label,
+      icon: slotProps.icon,
+      component: slot,
+    }
+  }
+
+  function flattenSlots(slot: VNode): VNode[] {
+    if (typeof slot.type === 'symbol') {
+      const children = slot.children as VNode[] | null
+      return children?.flatMap(flattenSlots) ?? []
+    }
+    return [slot]
+  }
+
+  return slots.default?.()?.flatMap(flattenSlots).map(transformSlot).filter((item): item is TabItem => item !== null) || []
+})
+
+onMounted(() => {
+  if (props.sync) {
+    const syncKey = `tabs-${props.sync}`
+    const stored = localStorage.getItem(syncKey)
+
+    if (stored && items.value.some(item => item.value === stored)) {
+      model.value = stored
+    }
+
+    watch(model, (value) => {
+      if (value) {
+        localStorage.setItem(syncKey, value)
+      }
+    })
+  }
+})
+
+onBeforeUpdate(() => rerenderCount.value++)
+</script>
+
+<template>
+  <UITabs
+    v-model="model"
+    :default-value="defaultValue"
+    :class="cn('relative mt-6', props.class)"
+  >
+    <UITabsList>
+      <UITabsTrigger
+        v-for="item in items"
+        :key="item.value"
+        :value="item.value"
+      >
+        <Icon
+          v-if="item.icon"
+          :name="item.icon"
+          class="size-4 mr-1.5"
+          aria-hidden="true"
+        />
+        {{ item.label }}
+      </UITabsTrigger>
+    </UITabsList>
+    <UITabsContent
+      v-for="item in items"
+      :key="item.value"
+      :value="item.value"
+      class="mt-2"
+    >
+      <component :is="item.component" />
+    </UITabsContent>
+  </UITabs>
+</template>

package/app/components/content/TabsItem.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes, VNode } from 'vue'
+
+export interface TabsItemProps {
+  /**
+   * The label displayed in the tab trigger.
+   */
+  label: string
+  /**
+   * Optional icon name for the tab.
+   */
+  icon?: string
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<TabsItemProps>()
+defineSlots<{
+  default(): VNode[]
+}>()
+</script>
+
+<template>
+  <div :class="props.class">
+    <slot />
+  </div>
+</template>

package/app/components/content/Tip.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Callout from './Callout.vue'
+
+defineProps<{
+  title?: string
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Callout
+    type="tip"
+    :title
+    :class
+  >
+    <template
+      v-if="$slots.title"
+      #title
+    >
+      <slot name="title" />
+    </template>
+    <slot />
+  </Callout>
+</template>

package/app/components/content/UButton.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { NuxtLinkProps } from '#app'
+import type { ButtonVariants } from '~/components/ui/button'
+import Button from '~/components/ui/button/Button.vue'
+
+interface Props extends NuxtLinkProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'default',
+  variant: 'default',
+})
+</script>
+
+<template>
+  <Button
+    :size="size"
+    :variant="variant"
+    as-child
+    class="no-underline"
+  >
+    <NuxtLink
+      :to="to"
+      :href="href"
+      :target="target"
+      :rel="rel"
+      :external="external"
+    >
+      <slot />
+    </NuxtLink>
+  </Button>
+</template>

package/app/components/content/UColorModeImage.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+interface Props {
+  light: string
+  dark: string
+  alt?: string
+  width?: number | string
+  height?: number | string
+  class?: string
+  format?: string
+  loading?: 'lazy' | 'eager'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  alt: '',
+  loading: 'lazy',
+})
+
+const colorMode = useColorMode()
+
+const src = computed(() => {
+  return colorMode.value === 'dark' ? props.dark : props.light
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <NuxtImg
+      :src="src"
+      :alt="alt"
+      :width="width"
+      :height="height"
+      :class="props.class"
+      :loading="loading"
+      :format="format"
+    />
+    <template #fallback>
+      <NuxtImg
+        :src="light"
+        :alt="alt"
+        :width="width"
+        :height="height"
+        :class="props.class"
+        :loading="loading"
+        :format="format"
+      />
+    </template>
+  </ClientOnly>
+</template>

package/app/components/content/UPageCard.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { NuxtLinkProps } from '#app'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card'
+
+const props = defineProps<{
+  title?: string
+  description?: string
+  icon?: string
+  to?: NuxtLinkProps['to']
+  target?: string
+  orientation?: 'vertical' | 'horizontal'
+  spotlight?: boolean
+  class?: HTMLAttributes['class']
+}>()
+
+const isLink = computed(() => !!props.to)
+</script>
+
+<template>
+  <Card
+    :class="[
+      'transition-colors',
+      isLink && 'hover:border-primary/50 cursor-pointer',
+      props.spotlight && 'group',
+      props.class,
+    ]"
+  >
+    <component
+      :is="isLink ? 'NuxtLink' : 'div'"
+      :to="props.to"
+      :target="props.target"
+      :class="[
+        'block h-full',
+        props.orientation === 'horizontal' && 'flex flex-col sm:flex-row',
+      ]"
+    >
+      <div :class="props.orientation === 'horizontal' && 'flex-1'">
+        <CardHeader v-if="$slots.title || $slots.description || props.title || props.description || props.icon">
+          <!-- Icon (decorative - title/description provide meaning) -->
+          <div
+            v-if="props.icon"
+            class="mb-2"
+          >
+            <Icon
+              :name="props.icon"
+              class="size-8 text-primary"
+              aria-hidden="true"
+            />
+          </div>
+
+          <!-- Title -->
+          <CardTitle v-if="$slots.title || props.title">
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </CardTitle>
+
+          <!-- Description -->
+          <CardDescription v-if="$slots.description || props.description">
+            <slot name="description">
+              {{ props.description }}
+            </slot>
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent v-if="$slots.body">
+          <slot name="body" />
+        </CardContent>
+      </div>
+
+      <!-- Default slot for media/illustration (below content) -->
+      <CardContent
+        v-if="$slots.default"
+        :class="[
+          props.orientation === 'horizontal' ? 'sm:w-1/3 shrink-0' : '',
+        ]"
+      >
+        <slot />
+      </CardContent>
+    </component>
+  </Card>
+</template>

package/app/components/content/UPageGrid.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="[
+      'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6',
+      props.class,
+    ]"
+  >
+    <slot />
+  </div>
+</template>