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

package/components/content/ProseH3.vue

@@ -0,0 +1,21 @@
+<template>
+  <h3
+    :id
+    class="prose-h3 scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8"
+  >
+    <NuxtLink
+      v-if="id && generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h3>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h3)))
+</script>

package/components/content/ProseH4.vue

@@ -0,0 +1,21 @@
+<template>
+  <h4
+    :id
+    class="prose-h4 scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6"
+  >
+    <NuxtLink
+      v-if="id && generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h4>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h4)))
+</script>

package/components/content/ProseH5.vue

@@ -0,0 +1,21 @@
+<template>
+  <h5
+    :id
+    class="prose-h5 scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6"
+  >
+    <NuxtLink
+      v-if="id && generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h5>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h5)))
+</script>

package/components/content/ProseH6.vue

@@ -0,0 +1,21 @@
+<template>
+  <h6
+    :id
+    class="prose-h6 scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6"
+  >
+    <NuxtLink
+      v-if="id && generate"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h6>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h6)))
+</script>

package/components/content/ProseHr.vue

@@ -0,0 +1,3 @@
+<template>
+  <hr class="[&:not(:first-child)]:mt-6">
+</template>

package/components/content/ProseImg.vue

@@ -0,0 +1,42 @@
+<template>
+  <NuxtImg
+    :src="refinedSrc"
+    :alt
+    :width
+    :height
+    class="rounded-md [&:not(:first-child)]:mt-8 [&:not(:last-child)]:mb-8"
+  />
+</template>
+
+<script setup lang="ts">
+import { joinURL, withLeadingSlash, withTrailingSlash } from 'ufo'
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  alt: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: [String, Number],
+    default: undefined,
+  },
+  height: {
+    type: [String, Number],
+    default: undefined,
+  },
+})
+
+const refinedSrc = computed(() => {
+  if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
+    const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
+    if (_base !== '/' && !props.src.startsWith(_base))
+      return joinURL(_base, props.src)
+  }
+  return props.src
+})
+</script>

package/components/content/ProseLi.vue

@@ -0,0 +1,5 @@
+<template>
+  <li class="[&>ol]:!mt-2 [&>ul]:!mt-2">
+    <slot />
+  </li>
+</template>

package/components/content/ProseOl.vue

@@ -0,0 +1,5 @@
+<template>
+  <ol class="ml-6 list-decimal [&:not(:first-child)]:mt-6 [&:not(:last-child)]:mb-6 [&>li:not(:first-child)]:mt-2">
+    <slot />
+  </ol>
+</template>

package/components/content/ProseP.vue

@@ -0,0 +1,5 @@
+<template>
+  <p class="prose-p leading-7 [&:not(:first-child)]:mt-6">
+    <slot />
+  </p>
+</template>

package/components/content/ProsePre.vue

@@ -0,0 +1,56 @@
+<template>
+  <ProseCode
+    :code="code"
+    :language="language"
+    :filename="filename"
+    :highlights="highlights"
+    :meta="meta"
+  >
+    <pre
+      :class="$props.class"
+      :style="style"
+    ><slot /></pre>
+  </ProseCode>
+</template>
+
+<script setup lang="ts">
+import type { BuiltinLanguage } from 'shiki'
+
+defineProps({
+  code: {
+    type: String,
+    default: '',
+  },
+  language: {
+    type: String as PropType<BuiltinLanguage>,
+    default: null,
+  },
+  filename: {
+    type: String,
+    default: null,
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => [],
+  },
+  meta: {
+    type: String,
+    default: null,
+  },
+  class: {
+    type: String,
+    default: null,
+  },
+  style: {
+    type: [String, Object],
+    default: null,
+  },
+})
+</script>
+
+<style>
+pre code .line{
+  display: block;
+  min-height: 1rem
+}
+</style>

package/components/content/ProseSection.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+// Don't inherit attrs, we want to use it with cn
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{
+  color?: string
+}>()
+</script>
+
+<template>
+  <section
+    :class="cn(
+      'relative p-6 mt-6',
+      classToString($attrs.class),
+      color,
+    )"
+  >
+    <!-- <span class="absolute bg-muted-foreground/05 -left-2 -top-1 -bottom-1 -right-2 md:-left-3 md:-top-0 md:-bottom-0 md:-right-3 -rotate-1" /> -->
+    <div class="grid grid-cols-[repeat(auto-fit,minmax(300px,auto))] gap-6 [&>*]:mt-0!">
+      <slot />
+    </div>
+  </section>
+</template>

package/components/content/ProseStrong.vue

@@ -0,0 +1,5 @@
+<template>
+  <strong class="font-semibold">
+    <slot />
+  </strong>
+</template>

package/components/content/ProseTable.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="w-full overflow-y-auto [&:not(:first-child)]:mt-6 [&:not(:last-child)]:mb-6">
+    <table class="w-full">
+      <slot />
+    </table>
+  </div>
+</template>

package/components/content/ProseTbody.vue

@@ -0,0 +1,5 @@
+<template>
+  <tbody>
+    <slot />
+  </tbody>
+</template>

package/components/content/ProseTd.vue

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

package/components/content/ProseTh.vue

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

package/components/content/ProseThead.vue

@@ -0,0 +1,5 @@
+<template>
+  <thead>
+    <slot />
+  </thead>
+</template>

package/components/content/ProseTr.vue

@@ -0,0 +1,5 @@
+<template>
+  <tr class="m-0 border-t p-0 even:bg-muted/50">
+    <slot />
+  </tr>
+</template>

package/components/content/ProseUl.vue

@@ -0,0 +1,5 @@
+<template>
+  <ul class="ml-6 list-disc [&:not(:first-child)]:mt-6 [&:not(:last-child)]:mb-6 [&>li:not(:first-child)]:mt-2">
+    <slot />
+  </ul>
+</template>

package/components/content/ReadMore.vue

@@ -0,0 +1,41 @@
+<template>
+  <Alert
+    :to
+    :target
+    :icon
+  >
+    {{ $t(prefix) }} <span class="font-semibold">{{ computedTitle }}</span>
+  </Alert>
+</template>
+
+<script setup lang="ts">
+const {
+  prefix = 'Read more at',
+  title,
+  to,
+  icon = 'lucide:bookmark',
+} = defineProps<{
+  prefix?: string
+  title?: string
+  to: string
+  target?: Target
+  icon?: string
+}>()
+
+const computedTitle = computed<string>(
+  () => {
+    if (title)
+      return title
+
+    try {
+      if (to?.startsWith('http'))
+        return to.replace('http://', '').replace('https://', '').replace(/\/$/, '')
+
+      return useBreadcrumb(to).filter(x => x.title !== '').map(x => x.title).join(' > ')
+    }
+    catch {
+      return to
+    }
+  },
+)
+</script>

package/components/content/Shortcut.vue

@@ -0,0 +1,20 @@
+<template>
+  <Kbd :size>
+    {{ computedValue }}
+  </Kbd>
+</template>
+
+<script setup lang="ts">
+// TODO: refactor to use kbd and <kbd> tags
+const { value, size = 'sm' } = defineProps<{
+  value: string
+  size?: 'xs' | 'sm' | 'md'
+}>()
+
+const metaSymbol = ref('Ctrl')
+onMounted(() => {
+  metaSymbol.value = navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/) ? '⌘' : 'Ctrl'
+})
+
+const computedValue = computed(() => value === 'meta' ? metaSymbol : value)
+</script>

package/components/content/Stack.vue

@@ -0,0 +1,17 @@
+<template>
+  <UiCard class="divide-y overflow-hidden [&:not(:first-child)]:mt-5">
+    <div
+      v-for="(slot, i) in $slots.default?.() ?? []"
+      :key="i"
+    >
+      <component
+        :is="slot"
+        :in-stack="true"
+      />
+    </div>
+  </UiCard>
+</template>
+
+<script setup lang="ts">
+defineSlots()
+</script>

package/components/content/Steps.vue

@@ -0,0 +1,23 @@
+<template>
+  <div
+    class="[&>li]:step ml-4 border-l pl-8 [counter-reset:step] [&:not(:first-child)]:mt-6 [&:not(:last-child)]:mb-12"
+    :class="levelClass[level]"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { level = '3' } = defineProps<{
+  level?: '1' | '2' | '3' | '4' | '5' | '6'
+}>()
+
+const levelClass = {
+  1: '[&>h1]:step',
+  2: '[&>h2]:step',
+  3: '[&>h3]:step',
+  4: '[&>h4]:step',
+  5: '[&>h5]:step',
+  6: '[&>h6]:step',
+}
+</script>

package/components/content/Tabs.vue

@@ -0,0 +1,52 @@
+<template>
+  <render />
+</template>
+
+<script setup lang="ts">
+import type { SetupContext } from 'vue'
+import TabsInner from './TabsInner.vue'
+
+const {
+  variant = 'separate',
+  padded = true,
+  inStack = false,
+  disableSearch = false,
+  searchPlaceholder = 'Search Tab...',
+  searchEmpty = 'No tab found.',
+  sync,
+} = defineProps<{
+  variant?: 'separate' | 'card' | 'line' | 'combobox'
+  padded?: boolean
+  inStack?: boolean
+  disableSearch?: boolean
+  searchPlaceholder?: string
+  searchEmpty?: string
+  sync?: string
+}>()
+
+const _slots: SetupContext['slots'] = useSlots()
+
+function render() {
+  const slots = _slots?.default?.() || []
+
+  const slotsData = slots.map((slot, index) => ({
+    label: slot.props?.label || slot.props?.filename || '',
+    index,
+  }))
+
+  return h(
+    TabsInner,
+    {
+      variant,
+      padded,
+      inStack,
+      disableSearch,
+      searchEmpty,
+      searchPlaceholder,
+      slotsData,
+      sync,
+    },
+    () => slots,
+  )
+}
+</script>