@wordup-md/nuxt-layer-shadcn-unocss 0.2.0

package/components/layout/SearchDialog.vue

@@ -0,0 +1,217 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <UiDialog v-model:open="open">
+    <UiDialogContent class="p-0 max-w-2xl">
+      <VisuallyHidden as-child>
+        <UiDialogTitle />
+      </VisuallyHidden>
+      <VisuallyHidden as-child>
+        <UiDialogDescription aria-describedby="undefined" />
+      </VisuallyHidden>
+      <UiCommand class="h-svh sm:h-[50svh]">
+        <UiCommandInputOnly
+          v-model="input"
+          :loading="searchLoading"
+          :placeholder="$t(placeholderDetailed)"
+          @keydown.enter="handleEnter"
+          @keydown.down="handleNavigate(1)"
+          @keydown.up="handleNavigate(-1)"
+        />
+        <UiCommandList
+          class="text-sm"
+          @escape-key-down="open = false"
+        >
+          <template v-if="!input?.length">
+            <template
+              v-for="item in navigation"
+              :key="item._path"
+            >
+              <UiCommandGroup
+                v-if="item.children"
+                :heading="item.title"
+                class="p-1.5"
+              >
+                <NuxtLinkLocale
+                  v-for="child in item.children"
+                  :key="child.id"
+                  :to="child._path"
+                >
+                  <UiCommandItem :value="child._path">
+                    <Icon
+                      v-if="child.icon"
+                      :name="child.icon"
+                      class="mr-2 size-4"
+                    />
+                    <div
+                      v-else
+                      class="mr-2 size-4"
+                    />
+                    <span>{{ child.title }}</span>
+                  </UiCommandItem>
+                </NuxtLinkLocale>
+              </UiCommandGroup>
+              <UiCommandSeparator v-if="item.children" />
+            </template>
+            <UiCommandGroup
+              v-if="darkModeToggle"
+              heading="Theme"
+              class="p-1.5"
+            >
+              <UiCommandItem
+                value="light"
+                @click="colorMode.preference = 'light'"
+              >
+                <NuxtIcon
+                  name="lucide:sun"
+                  class="mr-2 size-4"
+                />
+                <span>{{ $t('Light') }}</span>
+              </UiCommandItem>
+              <UiCommandItem
+                value="dark"
+                @click="colorMode.preference = 'dark'"
+              >
+                <NuxtIcon
+                  name="lucide:moon"
+                  class="mr-2 size-4"
+                />
+                <span>{{ $t('Dark') }}</span>
+              </UiCommandItem>
+              <UiCommandItem
+                value="system"
+                @click="colorMode.preference = 'auto'"
+              >
+                <NuxtIcon
+                  name="lucide:monitor"
+                  class="mr-2 size-4"
+                />
+                <span>{{ $t('System') }}</span>
+              </UiCommandItem>
+            </UiCommandGroup>
+          </template>
+          <div
+            v-else-if="searchResult?.length"
+            class="p-1.5"
+          >
+            <NuxtLinkLocale
+              v-for="(item, i) in searchResult"
+              :id="i"
+              :key="item.id"
+              :to="item.id"
+              class="hover:bg-muted flex select-none rounded-md p-2 hover:cursor-pointer"
+              :class="[i === activeSelect && 'bg-muted']"
+              @click="open = false; activeSelect = i;"
+            >
+              <Icon
+                v-if="getItemIcon(item.id)"
+                :name="getItemIcon(item.id)"
+                class="mr-2 size-4 shrink-0 self-center"
+              />
+              <div
+                v-else
+                class="mr-2 size-4 shrink-0"
+              />
+
+              <span
+                v-for="(subtitle, j) in item.titles"
+                :key="`${subtitle}${j}`"
+                class="flex shrink-0 self-center"
+              >
+                {{ subtitle }}
+                <Icon
+                  name="lucide:chevron-right"
+                  class="text-muted-foreground mx-0.5 self-center"
+                />
+              </span>
+              <span class="shrink-0 self-center">
+                {{ item.title }}
+              </span>
+              <span
+                class="text-muted-foreground ml-2 self-center truncate text-xs"
+                v-html="getHighlightedContent(item.content)"
+              />
+            </NuxtLinkLocale>
+          </div>
+          <div
+            v-else
+            class="text-muted-foreground pt-4 text-center"
+          >
+            {{ $t('No results found.') }}
+          </div>
+        </UiCommandList>
+      </UiCommand>
+    </UiDialogContent>
+  </UiDialog>
+</template>
+
+<script setup lang="ts">
+import { VisuallyHidden } from 'reka-ui'
+
+const { darkModeToggle } = useConfig().value.header
+
+const open = defineModel<boolean>('open')
+const colorMode = useColorMode()
+const { placeholderDetailed } = useConfig().value.search
+
+const activeSelect = ref(0)
+
+const { Meta_K, Ctrl_K } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.key === 'k' && (e.metaKey || e.ctrlKey))
+      e.preventDefault()
+  },
+})
+watch([Meta_K, Ctrl_K], (v) => {
+  if (v[0] || v[1])
+    open.value = true
+})
+
+const input = ref('')
+const searchResult = ref()
+const searchLoading = ref(false)
+
+const { localizeSearchResult } = useI18nDocs()
+
+watch(
+  input,
+  async (v) => {
+    activeSelect.value = 0
+    if (!v)
+      return
+
+    searchLoading.value = true
+    const result = (await searchContent(v)).value
+
+    searchResult.value = localizeSearchResult(result)
+    searchLoading.value = false
+  },
+)
+
+function getHighlightedContent(text: string) {
+  return text.replace(input.value, `<span class="font-semibold underline">${input.value}</span>`)
+}
+
+const { navKeyFromPath } = useContentHelpers()
+const { navigation } = useI18nDocs()
+
+function getItemIcon(path: string) {
+  return navKeyFromPath(path, 'icon', navigation.value)
+}
+
+watch(activeSelect, (value) => {
+  document.querySelector(`[id="${value}"]`)?.scrollIntoView({ block: 'nearest' })
+})
+
+async function handleEnter() {
+  if (searchResult.value[activeSelect.value]?.id) {
+    await navigateTo(searchResult.value[activeSelect.value].id)
+    open.value = false
+  }
+}
+
+function handleNavigate(delta: -1 | 1) {
+  if (activeSelect.value + delta >= 0 && activeSelect.value + delta < searchResult.value.length)
+    activeSelect.value += delta
+}
+</script>

package/components/layout/Title.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="mb-6">
+    <MDC
+      v-if="title"
+      tag="prose-h1"
+      :value="title"
+      unwrap="p"
+      class="-ml-0.5"
+    />
+    <MDC
+      v-if="description"
+      :value="description"
+      unwrap="p"
+      class="pt-1 text-2xl text-muted-foreground text-pretty"
+    />
+
+    <div
+      v-if="badges"
+      class="flex gap-2 pt-4"
+    >
+      <NuxtLink
+        v-for="(badge, i) in badges"
+        :key="i"
+        :to="badge.to"
+        :target="badge.target"
+      >
+        <UiBadge
+          :variant="badge.variant || 'secondary'"
+          :type="badge.type"
+          class="gap-1 rounded-md"
+        >
+          <Icon
+            v-if="badge.to || badge.icon"
+            :size="12"
+            :name="badge.icon || 'lucide:external-link'"
+          />
+          {{ badge.value }}
+        </UiBadge>
+      </NuxtLink>
+    </div>
+
+    <div
+      v-if="authors"
+      class="-mx-4 flex divide-x pt-4"
+    >
+      <NuxtLink
+        v-for="author in authors"
+        :key="author.name"
+        :to="author.to"
+        :target="author.target"
+        class="flex items-center gap-2 px-4"
+      >
+        <UiAvatar
+          v-if="author.avatar"
+          class="size-8"
+        >
+          <UiAvatarImage
+            :src="author.avatar"
+            :alt="author.name"
+          />
+        </UiAvatar>
+        <div>
+          <div class="text-sm font-semibold">
+            {{ author.name }}
+          </div>
+          <div
+            v-if="author.username"
+            class="text-xs font-medium leading-4 text-muted-foreground"
+          >
+            @{{ author.username }}
+          </div>
+        </div>
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  description?: string
+  badges?: {
+    value?: string
+    icon?: string
+    to?: string
+    target?: Target
+    type?: 'default' | 'info' | 'warning' | 'success' | 'danger' | 'lime'
+    variant?: 'default' | 'secondary' | 'destructive' | 'outline'
+  }[]
+  authors?: {
+    name: string
+    username?: string
+    avatar?: string
+    to?: string
+    target?: Target
+  }[]
+}>()
+</script>

package/components/layout/Toc.vue

@@ -0,0 +1,99 @@
+<template>
+  <UiScrollArea
+    v-if="!isSmall"
+    orientation="vertical"
+    class="z-30 hidden overflow-y-auto md:block lg:block"
+    type="hover"
+  >
+    <div class="flex flex-col">
+      <div v-if="toc?.links.length">
+        <p class="mb-2 text-base font-semibold">
+          {{ $t(title) }}
+        </p>
+
+        <LayoutTocTree
+          :links="toc.links.filter((x: any) => x.id !== 'hide-toc')"
+          :level="0"
+          :class="[links.length && 'border-b pb-5']"
+        />
+
+        <div
+          v-if="links"
+          class="pt-5 text-muted-foreground"
+        >
+          <NuxtLink
+            v-for="(link, i) in links"
+            :key="i"
+            :to="link.to"
+            :target="link.target"
+            class="flex w-full gap-1 underline-offset-4 hover:underline [&:not(:first-child)]:pt-3"
+          >
+            <Icon
+              v-if="link.icon"
+              :name="link.icon"
+              class="mr-1 self-center"
+            />
+            {{ $t(link.title) }}
+            <NuxtIcon
+              v-if="link.showLinkIcon ?? true"
+              name="lucide:arrow-up-right"
+              class="ml-auto self-center text-muted-foreground"
+              size="13"
+            />
+          </NuxtLink>
+        </div>
+      </div>
+      <!-- <div class="flex-grow" /> -->
+    </div>
+  </UiScrollArea>
+
+  <UiCollapsible
+    v-else
+    v-model:open="isOpen"
+    class="block w-full text-sm lg:hidden"
+    :class="{ 'border-b': border }"
+  >
+    <UiCollapsibleTrigger class="flex w-full px-4 py-3 text-left font-medium">
+      {{ $t(title) }}
+      <NuxtIcon
+        name="lucide:chevron-right"
+        class="ml-auto self-center transition-all"
+        :class="[isOpen && 'rotate-90']"
+      />
+    </UiCollapsibleTrigger>
+
+    <UiCollapsibleContent>
+      <LayoutTocTree
+        :links="toc.links"
+        :level="0"
+        class="mx-4 mb-3 border-l pl-4 text-sm"
+      />
+    </UiCollapsibleContent>
+  </UiCollapsible>
+</template>
+
+<script setup lang="ts">
+defineProps<{ isSmall?: boolean }>()
+
+const { toc } = useContent()
+const { title, links: configLinks } = useConfig().value.toc
+const { border } = useConfig().value.header
+const isOpen = ref(false)
+
+const { url, enabledToc, text, icon } = useEditLink()
+
+const links = computed(() => {
+  if (enabledToc.value) {
+    return configLinks.concat([
+      {
+        title: text,
+        icon,
+        to: url.value,
+        target: '_blank',
+        showLinkIcon: true,
+      },
+    ])
+  }
+  return configLinks
+})
+</script>

package/components/layout/TocTree.vue

@@ -0,0 +1,42 @@
+<template>
+  <ul :class="[level !== 0 && 'pl-4']">
+    <li
+      v-for="link in links"
+      :key="link.id"
+      class="pt-2"
+    >
+      <NuxtLink
+        :to="`#${link.id}`"
+        class="text-muted-foreground transition-all hover:text-primary"
+        :class="[activeHeadings.includes(link.id) && 'text-primary']"
+      >
+        {{ link.text }}
+      </NuxtLink>
+      <TocTree
+        v-if="link.children"
+        :links="(link.children || []).filter((x: any) => x.id !== 'hide-toc')"
+        :level="level + 1"
+      />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { TocLink } from '@nuxt/content'
+
+defineProps<{
+  links: TocLink[]
+  level: number
+}>()
+
+const { activeHeadings, updateHeadings } = useScrollspy()
+
+onMounted(() =>
+  updateHeadings([
+    ...document.querySelectorAll('.docs-content h1'),
+    ...document.querySelectorAll('.docs-content h2'),
+    ...document.querySelectorAll('.docs-content h3'),
+    ...document.querySelectorAll('.docs-content h4'),
+  ]),
+)
+</script>

package/components/ui/accordion/Accordion.vue

@@ -0,0 +1,19 @@
+<template>
+  <AccordionRoot v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  AccordionRoot,
+  type AccordionRootEmits,
+  type AccordionRootProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>

package/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,24 @@
+<template>
+  <AccordionContent
+    v-bind="delegatedProps"
+    class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+  >
+    <div :class="cn('pb-4 pt-0', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>
+
+<script setup lang="ts">
+import { AccordionContent, type AccordionContentProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,24 @@
+<template>
+  <AccordionItem
+    v-bind="forwardedProps"
+    :class="cn('border-b', props.class)"
+  >
+    <slot />
+  </AccordionItem>
+</template>
+
+<script setup lang="ts">
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,39 @@
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>.ui-chevron]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <Icon
+          name="lucide:chevron-down"
+          class="ui-chevron flex size-4 shrink-0 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>
+
+<script setup lang="ts">
+import {
+  AccordionHeader,
+  AccordionTrigger,
+  type AccordionTriggerProps,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/components/ui/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'

package/components/ui/alert/Alert.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    :class="cn(alertVariants({ variant }), props.class)"
+    role="alert"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { type AlertVariants, alertVariants } from '.'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
+</script>

package/components/ui/alert/AlertDescription.vue

@@ -0,0 +1,14 @@
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/components/ui/alert/AlertTitle.vue

@@ -0,0 +1,14 @@
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/components/ui/alert/index.ts

@@ -0,0 +1,23 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>

package/components/ui/avatar/Avatar.vue

@@ -0,0 +1,25 @@
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot />
+  </AvatarRoot>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { AvatarRoot } from 'reka-ui'
+import { avatarVariant, type AvatarVariants } from '.'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes['class']
+    size?: AvatarVariants['size']
+    shape?: AvatarVariants['shape']
+  }>(),
+  {
+    class: '',
+    size: 'sm',
+    shape: 'circle',
+  },
+)
+</script>

package/components/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,11 @@
+<template>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
+</template>
+
+<script setup lang="ts">
+import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
+
+const props = defineProps<AvatarFallbackProps>()
+</script>