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

package/components/OgImage/ShadcnDocs.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="flex size-full flex-col justify-center p-16"
+    :class="[colorMode === 'light' ? 'bg-white' : 'bg-zinc-950']"
+    :style="`background-size: 120px 120px; background-image: linear-gradient(to right, ${colorMode === 'light' ? '#e5e7eb' : '#27272a'} 1px, transparent 1px), linear-gradient(to bottom, ${colorMode === 'light' ? '#e5e7eb' : '#27272a'} 1px, transparent 1px);`"
+  >
+    <div class="mb-4 flex">
+      <img
+        v-if="colorMode === 'light'"
+        :src="logo.light"
+        height="65"
+      >
+      <img
+        v-else
+        :src="logo.dark"
+        height="65"
+      >
+      <span
+        v-if="showTitle && siteTitle"
+        class="ml-4 self-center text-4xl font-bold"
+        :class="[colorMode === 'light' ? 'text-zinc-900' : 'text-zinc-100']"
+      >
+        {{ siteTitle }}
+      </span>
+    </div>
+    <div class="relative">
+      <h1
+        class="text-8xl font-bold"
+        :class="[colorMode === 'light' ? 'text-zinc-900' : 'text-zinc-100']"
+      >
+        {{ title }}
+      </h1>
+      <p
+        class="text-4xl leading-tight"
+        :class="[colorMode === 'light' ? 'text-zinc-500' : 'text-zinc-400']"
+      >
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  colorMode?: 'dark' | 'light'
+  title: string
+  description: string
+}>()
+
+const { logo, title: siteTitle, showTitle } = useConfig().value.header
+
+const colorMode = computed(() => {
+  return props.colorMode || useConfig().value.site.ogImageColor || 'light'
+})
+</script>

package/components/ThemeCustomizer.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="grid gap-6">
+    <div class="grid space-y-1">
+      <h1 class="text-lg font-semibold text-foreground">
+        {{ $t('Customize') }}
+      </h1>
+      <p class="text-sm text-muted-foreground">
+        {{ $t('Pick a style and color for the docs.') }}
+      </p>
+    </div>
+    <div class="space-y-1.5">
+      <UiLabel>Color</UiLabel>
+      <div class="grid grid-cols-3 gap-2">
+        <template
+          v-for="color in allColors"
+          :key="color"
+        >
+          <UiButton
+            class="justify-start gap-2"
+            variant="outline"
+            :class="{ 'border-2 border-primary': theme === color }"
+            @click="setTheme(color)"
+          >
+            <span
+              class="flex size-5 items-center justify-center rounded-full"
+              :style="{ backgroundColor: backgroundColor(color) }"
+            >
+              <NuxtIcon
+                v-if="theme === color"
+                name="lucide:check"
+                size="16"
+                class="text-white"
+              />
+            </span>
+            <span class="text-xs capitalize">{{ color }}</span>
+          </UiButton>
+        </template>
+      </div>
+    </div>
+    <div class="space-y-1.5">
+      <UiLabel>Radius</UiLabel>
+      <div class="grid grid-cols-5 gap-2">
+        <template
+          v-for="r in RADII"
+          :key="r"
+        >
+          <UiButton
+            class="justify-center gap-2"
+            variant="outline"
+            :class="{ 'border-2 border-primary': radius === r }"
+            @click="setRadius(r)"
+          >
+            <span class="text-xs capitalize">{{ r }}</span>
+          </UiButton>
+        </template>
+      </div>
+    </div>
+    <div
+      v-if="darkModeToggle"
+      class="space-y-1.5"
+    >
+      <UiLabel>Theme</UiLabel>
+      <div class="grid grid-cols-3 gap-2">
+        <UiButton
+          class="justify-center gap-2"
+          variant="outline"
+          :class="{ 'border-2 border-primary': colorMode.preference === 'light' }"
+          @click="colorMode.preference = 'light'"
+        >
+          <NuxtIcon
+            name="lucide:sun"
+            size="16"
+          />
+          <span class="text-xs capitalize">Light</span>
+        </UiButton>
+        <UiButton
+          class="justify-center gap-2"
+          variant="outline"
+          :class="{ 'border-2 border-primary': colorMode.preference === 'dark' }"
+          @click="colorMode.preference = 'dark'"
+        >
+          <NuxtIcon
+            name="lucide:moon"
+            size="16"
+          />
+          <span class="text-xs capitalize">Dark</span>
+        </UiButton>
+        <UiButton
+          class="justify-center gap-2"
+          variant="outline"
+          :class="{ 'border-2 border-primary': colorMode.preference === 'system' }"
+          @click="colorMode.preference = 'system'"
+        >
+          <NuxtIcon
+            name="lucide:monitor"
+            size="16"
+          />
+          <span class="text-xs capitalize">System</span>
+        </UiButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { themes } from '@/lib/registry/themes'
+
+const { themeClass, theme, radius, setTheme, setRadius } = useThemes()
+const { darkModeToggle } = useConfig().value.header
+
+// Create an array of color values
+const allColors: Color[] = [
+  'zinc',
+  'rose',
+  'blue',
+  'green',
+  'orange',
+  'red',
+  'slate',
+  'stone',
+  'gray',
+  'neutral',
+  'yellow',
+  'violet',
+]
+
+const RADII = [0, 0.25, 0.5, 0.75, 1]
+
+// Whenever the theme value changes, update the document class list
+watch(theme, () => {
+  setClassTheme()
+})
+
+// Whenever the radius value changes, update the document style
+watch(radius, () => {
+  setStyleRadius()
+})
+
+function setClassTheme() {
+  document.body.classList.remove(
+    ...allColors.map(color => `theme-${color}`),
+  )
+  document.body.classList.add(themeClass.value)
+}
+
+function setStyleRadius() {
+  document.body.style.setProperty('--radius', `${radius.value}rem`)
+}
+
+function backgroundColor(color: Color) {
+  const bg = themes.find(theme => theme.name === color)
+  return `hsl(${bg?.activeColor.light})`
+}
+
+const colorMode = useColorMode()
+</script>

package/components/ThemePopover.vue

@@ -0,0 +1,27 @@
+<template>
+  <UiPopover>
+    <UiPopoverTrigger as-child>
+      <UiButton
+        variant="ghost"
+        size="icon"
+      >
+        <NuxtIcon
+          name="lucide:paintbrush"
+          size="16"
+        />
+      </UiButton>
+    </UiPopoverTrigger>
+    <UiPopoverContent
+      class="w-[23rem]"
+      :align="breakpoints.isGreaterOrEqual('md') ? 'end' : 'center'"
+    >
+      <ThemeCustomizer />
+    </UiPopoverContent>
+  </UiPopover>
+</template>
+
+<script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+</script>

package/components/content/Accordion.vue

@@ -0,0 +1,18 @@
+<template>
+  <UiAccordion
+    :type
+    :collapsible
+    :default-value="defaultValue"
+    class="[&:not(:first-child)]:mt-5"
+  >
+    <slot />
+  </UiAccordion>
+</template>
+
+<script setup lang="ts">
+const { type = 'single' } = defineProps<{
+  type?: 'single' | 'multiple'
+  collapsible?: boolean
+  defaultValue: string | string[]
+}>()
+</script>

package/components/content/AccordionItem.vue

@@ -0,0 +1,32 @@
+<template>
+  <UiAccordionItem :value="value ?? autoValue">
+    <UiAccordionTrigger>
+      <ContentSlot
+        :use="$slots.title"
+        unwrap="p"
+      />
+      {{ title }}
+    </UiAccordionTrigger>
+    <UiAccordionContent>
+      <ContentSlot
+        :use="$slots.content"
+        unwrap="p"
+      />
+      {{ content }}
+    </UiAccordionContent>
+  </UiAccordionItem>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+
+defineProps<{
+  value?: string
+  title?: string
+  content?: string
+}>()
+
+defineSlots()
+
+const autoValue = useId()
+</script>

package/components/content/Alert.vue

@@ -0,0 +1,100 @@
+<template>
+  <UiAlert
+    class="transition-all [&:not(:first-child)]:mt-5 group/card"
+    :class="[
+      typeTwClass[type],
+      to && 'hover:bg-muted/50',
+      !noClick && to && 'cursor-pointer',
+      inStack && 'm-0 rounded-none border-none',
+    ]"
+    @click="alertClick"
+  >
+    <div class="flex flex-row gap-2">
+      <Icon
+        v-if="icon && title"
+        :name="icon"
+        :size="16"
+      />
+
+      <UiAlertTitle
+        v-if="title"
+        class="font-semibold mb-3"
+      >
+        {{ title }}
+      </UiAlertTitle>
+    </div>
+
+    <UiAlertDescription class="w-full">
+      <div class="flex flex-row gap-2">
+        <Icon
+          v-if="icon && !title"
+          :name="icon"
+          :size="16"
+          class="mb-[2px] mt-0.5 min-w-5 self-start"
+        />
+
+        <span
+          class="w-full text-foreground"
+          :class="[to && 'pr-8']"
+        >
+          <slot />
+        </span>
+      </div>
+
+      <LinkIcon
+        v-if="showLinkIcon"
+        :to
+        :target
+        :external
+      />
+    </UiAlertDescription>
+  </UiAlert>
+</template>
+
+<script setup lang="ts">
+const {
+  to,
+  target,
+  type = 'default',
+  external = undefined,
+  inStack = false,
+  showLinkIcon = true,
+  noClick = false,
+} = defineProps<{
+  title?: string
+  icon?: string
+  type?: 'default' | 'info' | 'warning' | 'success' | 'danger' | 'secondary'
+  to?: string
+  target?: Target
+  external?: boolean
+  inStack?: boolean
+  showLinkIcon?: boolean
+  noClick?: boolean
+}>()
+
+const typeTwClass = {
+  default: '',
+  info: 'border-info text-info bg-info/05 dark:bg-info/15 [&>svg]:text-info',
+  warning: 'border-warning text-warning bg-warning/05 dark:bg-warning/15 [&>svg]:text-warning',
+  success: 'border-success text-success bg-success/05 dark:bg-success/15 [&>svg]:text-success',
+  danger: 'border-danger text-danger bg-danger/05 dark:bg-danger/15 [&>svg]:text-danger',
+  example: 'border-violet-600 border-dashed text-violet-600 bg-violet-600/05 dark:bg-violet-600/15 [&>svg]:text-violet-600',
+  secondary: 'bg-muted/50',
+}
+
+async function alertClick() {
+  if (!noClick && to) {
+    if (target) {
+      await navigateTo(to, {
+        external: external ?? to?.startsWith('http'),
+        open: { target },
+      })
+    }
+    else {
+      await navigateTo(to, {
+        external: external ?? to?.startsWith('http'),
+      })
+    }
+  }
+}
+</script>

package/components/content/Badge.vue

@@ -0,0 +1,52 @@
+<template>
+  <NuxtLink
+    v-if="to"
+    :to
+    :target
+    class="mx-0.5"
+  >
+    <UiBadge
+      :variant
+      :type
+      :class="[
+        'cursor-pointer',
+        size === 'sm'
+          && 'rounded-md px-1.5 py-0.5 text-xs font-normal leading-none',
+      ]"
+    >
+      <ContentSlot unwrap="p" />
+    </UiBadge>
+  </NuxtLink>
+
+  <span
+    v-else
+    class="mx-0.5 inline"
+  >
+    <UiBadge
+      :variant
+      :type
+      :class="[
+        size === 'sm'
+          && 'rounded-md px-1.5 py-0.5 text-xs font-normal leading-none',
+        size === 'lg'
+          && 'px-3 text-base',
+      ]"
+    >
+      <ContentSlot unwrap="p" />
+    </UiBadge>
+  </span>
+</template>
+
+<script setup lang="ts">
+const {
+  type = 'default',
+  variant = 'default',
+  size = 'md',
+} = defineProps<{
+  type?: 'default' | 'primary' | 'secondary' | 'info' | 'warning' | 'success' | 'danger' | 'new'
+  to?: string
+  target?: Target
+  variant?: 'default' | 'fill' | 'outline' | 'text'
+  size?: 'sm' | 'md' | 'lg'
+}>()
+</script>

package/components/content/ButtonLink.vue

@@ -0,0 +1,38 @@
+<template>
+  <NuxtLink
+    :to="to || href"
+    :target="(blank && '_blank') || target"
+  >
+    <UiButton
+      :variant
+      :size
+    >
+      <Icon
+        v-if="leftIcon"
+        :name="leftIcon"
+        class="mr-1"
+      />
+      <ContentSlot unwrap="p" />
+      <Icon
+        v-if="rightIcon"
+        :name="rightIcon"
+        class="ml-1"
+      />
+    </UiButton>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { ButtonVariants } from '../ui/button'
+
+defineProps<{
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  leftIcon?: string
+  rightIcon?: string
+  to?: string
+  href?: string
+  target?: Target
+  blank?: boolean
+}>()
+</script>

package/components/content/Callout.vue

@@ -0,0 +1,17 @@
+<template>
+  <Alert
+    :icon
+    :to
+    :target
+  >
+    <slot />
+  </Alert>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  icon?: string
+  to?: string
+  target?: Target
+}>()
+</script>

package/components/content/Card.vue

@@ -0,0 +1,173 @@
+<template>
+  <UseTemplate>
+    <UiCard
+      class="card relative flex flex-col h-full overflow-hidden transition-all min-h-8"
+      :class="[
+        to && 'hover:shadow-lg',
+        inStack && 'mb-0 rounded-none border-none shadow-none',
+        ['left', 'right'].includes(mediaPosition) && 'flex-row',
+        mediaPosition === 'right' && 'flex-row-reverse',
+        mediaPosition === 'bottom' && 'flex-col-reverse',
+        ['cover', 'center'].includes(mediaPosition) && 'bg-opacity-0',
+        mediaPosition === 'center' && 'text-center items-center flex-row p-8',
+        $attrs.class,
+      ]"
+    >
+      <div
+        v-if="media || $slots.media"
+        class="overflow-hidden"
+        :class="{
+          'w-5/13 shrink-0': media && (mediaPosition === 'left' || mediaPosition === 'right'),
+          'absolute inset-0': ['cover', 'center'].includes(mediaPosition),
+        }"
+      >
+        <NuxtImg
+          v-if="media"
+          :src="media"
+          class="w-full h-full object-cover aspect-video"
+          :class="{
+            'group-hover/card:scale-105 transition-all': to,
+          }"
+        />
+        <ContentSlot
+          :use="$slots.media"
+          unwrap="p"
+        />
+      </div>
+
+      <div class="w-full z-1">
+        <UiCardHeader
+          v-if="
+            icon || title || $slots.title || description || $slots.description
+          "
+          :class="{
+            'flex-row gap-5': iconPosition === 'left',
+            'items-center': mediaPosition === 'center',
+          }"
+        >
+          <Icon
+            v-if="icon"
+            :name="icon"
+            :size="iconSize"
+            :class="{ 'mb-2': iconPosition !== 'left' && (title || $slots.title) }"
+          />
+
+          <div class="flex flex-col gap-1.5 w-full">
+            <UiCardTitle
+              v-if="title || $slots.title"
+              :class="{ 'group-hover/card:underline': to, 'pr-4': ['left', 'bottom'].includes(mediaPosition) && to }"
+            >
+              <ContentSlot
+                :use="$slots.title"
+                unwrap="p"
+              />
+              <MDC
+                v-if="title"
+                :value="title"
+                unwrap="p"
+              />
+            </UiCardTitle>
+
+            <UiCardDescription v-if="description || $slots.description">
+              <ContentSlot
+                :use="$slots.description"
+                unwrap="p"
+              />
+              <!-- v-if="description" -->
+              <!-- <MDC
+                v-if="description"
+                :value="description || ''"
+                unwrap="p"
+              /> -->
+              {{ description }}
+            </UiCardDescription>
+          </div>
+        </UiCardHeader>
+
+        <UiCardContent
+          v-if="content || $slots.content || $slots.default"
+          :class="{ 'py-3': !icon && !(title || $slots.title) && !(description || $slots.description) }"
+        >
+          <ContentSlot unwrap="p" />
+          <ContentSlot
+            :use="$slots.content"
+            unwrap="p"
+          />
+        </UiCardContent>
+
+        <UiCardFooter v-if="footer || $slots.footer">
+          <ContentSlot
+            :use="$slots.footer"
+            unwrap="p"
+          />
+          <MDC
+            v-if="footer"
+            :value="footer"
+            unwrap="p"
+          />
+        </UiCardFooter>
+
+        <LinkIcon
+          v-if="showLinkIcon"
+          :to
+          :target
+          :external
+        />
+      </div>
+    </UiCard>
+  </UseTemplate>
+
+  <div class="group/card group-has-[div]:mt-0 [&:not(:first-child)]:mt-5">
+    <NuxtLink
+      v-if="to"
+      :to
+      :target
+      style="text-decoration: none; font-weight: 500"
+    >
+      <CardInner />
+    </NuxtLink>
+    <CardInner v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
+const {
+  title,
+  to,
+  external = undefined,
+  showLinkIcon = true,
+  iconSize = 24,
+  iconPosition = 'left',
+  mediaPosition = 'top',
+} = defineProps<{
+  title?: string
+  description?: string
+  content?: string
+  footer?: string
+
+  to?: string
+  target?: Target
+  external?: boolean
+  showLinkIcon?: boolean
+
+  icon?: string
+  iconSize?: number
+  iconPosition?: 'top' | 'left'
+
+  media?: string
+  mediaPosition?: 'left' | 'right' | 'top' | 'bottom' | 'cover' | 'center'
+
+  inStack?: boolean
+}>()
+
+defineSlots()
+
+const [UseTemplate, CardInner] = createReusableTemplate()
+
+// const _slots: SetupContext['slots'] = useSlots()
+// console.log(_slots)
+</script>