daisy-ui-kit 1.0.8 → 2.1.0

package/components/content/IframeRenderer.ts

@@ -0,0 +1,53 @@
+import { createApp, h, onMounted, ref } from 'vue'
+
+export default {
+  name: 'RenderToIFrame',
+  props: {
+    classes: { type: String },
+    iframeClasses: { type: String },
+    theme: { type: String },
+  },
+  setup(props: any, { slots }: any) {
+    const iframeRef = ref()
+    const iframeBody = ref()
+    const iframeHead = ref()
+    const iframeStyle = ref()
+
+    onMounted(() => {
+      iframeBody.value = iframeRef.value.contentDocument.body
+      iframeHead.value = iframeRef.value.contentDocument.head
+      const el = document.createElement('div')
+      iframeBody.value.appendChild(el)
+      iframeStyle.value = document.createElement('style')
+      iframeStyle.value.innerHTML = props.css
+      iframeHead.value.appendChild(iframeStyle.value)
+
+      createApp({
+        name: 'IframeRender',
+        setup() {
+          const script = iframeRef.value.contentDocument.createElement('script')
+          script.type = 'text/javascript'
+          // create dynamic script
+          script.text = `const oHead = document.getElementsByTagName('head')[0]
+            const arrStyleSheets = parent.document.getElementsByTagName('style')
+            for (let i = 0; i < arrStyleSheets.length; i++)
+            oHead.appendChild(arrStyleSheets[i].cloneNode(true))
+          `
+
+          if (props.iframeClasses.length)
+            iframeRef.value.classList.add(props.iframeClasses)
+          iframeBody.value.classList.add('p-6')
+          iframeHead.value.appendChild(script)
+
+          watch(() => props.theme, (theme) => {
+            iframeBody.value.setAttribute('data-theme', theme)
+          }, { immediate: true })
+          return () => slots.default()
+        },
+      }).mount(el)
+    })
+    return () => h('iframe', {
+      ref: iframeRef,
+    })
+  },
+}

package/components/content/Indent.vue

@@ -0,0 +1,3 @@
+<template>
+  <span>&nbsp;&nbsp;&nbsp;</span>
+</template>

package/components/content/LocalLinks.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = defineProps<{
+  values: string
+}>()
+const links = computed(() => {
+  const values = props.values.split(',').map(name => name.trim())
+  return values.map((value) => {
+    if (value.includes('#')) {
+      const [name, url] = value.split('#')
+      return {
+        name,
+        url: `#${url}`,
+      }
+    }
+    else {
+      return {
+        name: value,
+        url: `#${value.toLowerCase()}`,
+      }
+    }
+  })
+})
+</script>
+
+<template>
+  <ul>
+    <li v-for="link in links" :key="link.name">
+      <a :href="link.url" class="link link-primary">{{ link.name }}</a>
+    </li>
+  </ul>
+</template>

package/components/content/NotFound.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useFuse } from '@vueuse/integrations/useFuse'
+
+const props = defineProps({
+  error: Object,
+})
+
+const route = useRoute()
+const { allLinks } = useNav()
+
+const lastPathSegment = computed(() => {
+  const segments = route.path.split('/')
+  return segments[segments.length - 1]
+})
+
+const { results } = useFuse(lastPathSegment, allLinks, {
+  fuseOptions: { keys: ['label', 'tags'], includeScore: true, distance: 3 },
+  resultLimit: 5,
+})
+</script>
+
+<template>
+  <Hero class="not-prose h-[32rem]">
+    <HeroContent center>
+      <div class="max-w-md">
+        <Text is="h1" size="5xl" bold class="mb-5">
+          404
+        </Text>
+        <Text is="p" class="mb-5">
+          We couldn't find that page. Did you mean one of these pages?
+        </Text>
+        <Menu class="border border-base-300 rounded-xl">
+          <MenuItem v-for="result in results" :key="result.item.label">
+            <NuxtLink :to="result.item.to">
+              {{ result.item.label }}
+            </NuxtLink>
+          </MenuItem>
+        </Menu>
+      </div>
+    </HeroContent>
+  </Hero>
+</template>

package/components/content/PageNext.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+  url: string
+  title: string
+}>()
+</script>
+
+<template>
+  <NuxtLink
+    :to="url"
+    class="btn md:btn-lg gap-2 normal-case lg:gap-3"
+  >
+    <Flex col items-start>
+      <Text class="text-base-content/50 hidden text-xs font-normal md:block">
+        Next
+      </Text>
+      <Text>{{ title }}</Text>
+    </Flex>
+
+    <svg class="h-6 w-6 fill-current md:h-8 md:w-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
+    </svg>
+  </NuxtLink>
+</template>

package/components/content/PagePrevious.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+  url: string
+  title: string
+}>()
+</script>
+
+<template>
+  <NuxtLink
+    :to="url"
+    class="btn md:btn-lg gap-2 normal-case lg:gap-3"
+  >
+    <svg class="h-6 w-6 fill-current md:h-8 md:w-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
+    </svg>
+
+    <Flex col items-start>
+      <Text class="text-base-content/50 hidden text-xs font-normal md:block">
+        Prev
+      </Text>
+      <Text>{{ title }}</Text>
+    </Flex>
+  </NuxtLink>
+</template>

package/components/content/PrevNext.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useNav } from '~/composables/use-nav'
+
+const props = defineProps<{
+  currentPageLabel: string
+}>()
+
+const { allLinks: links } = useNav()
+
+const current = computed(() => links.find(link => link.label === props.currentPageLabel))
+const prev = computed(() => links[links.indexOf(current.value as any) - 1])
+const next = computed(() => links[links.indexOf(current.value as any) + 1])
+
+function toTop() {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  })
+  setTimeout(() => {
+    window.location.hash = ''
+  }, 600)
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-row justify-between mt-16">
+      <PagePrevious v-if="prev" :url="prev.to" :title="prev.label" />
+      <span v-else />
+
+      <PageNext v-if="next" :url="next.to" :title="next.label" />
+      <span v-else />
+    </div>
+
+    <Button ghost class="mt-6" @click="toTop">
+      to top
+      <Icon name="feather:arrow-up" class="ml-2" />
+    </Button>
+  </div>
+</template>

package/components/content/ProseA.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps({
+  href: {
+    type: String,
+    default: '',
+  },
+  target: {
+    type: String,
+    default: undefined,
+    required: false,
+  },
+})
+</script>
+
+<template>
+  <NuxtLink :href="href" :target="target" class="daisy-link link-primary">
+    <slot />
+  </NuxtLink>
+</template>

package/components/content/ProseAlert.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  type: string
+}>()
+</script>
+
+<template>
+  <Alert class="not-prose" v-bind="$props">
+    <slot />
+  </Alert>
+</template>

package/components/content/ProseBlockquote.vue

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

package/components/content/ProseCode.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const props = defineProps({
+  code: {
+    type: String,
+    default: '',
+  },
+  language: {
+    type: String,
+    default: null,
+  },
+  filename: {
+    type: String,
+    default: null,
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => [],
+  },
+  meta: {
+    type: String,
+    default: null,
+  },
+})
+
+const { copy, copied } = useClipboard({ source: computed(() => props.code) })
+</script>
+
+<template>
+  <div>
+    <CodeWrapper v-if="meta?.includes('collapse=true')" class="code-wrapper">
+      <div class="relative -my-6">
+        <div class="absolute flex flex-row items-center top-0 right-0">
+          <div v-if="copied" class="pr-2 text-sm text-neutral-content">
+            copied
+          </div>
+          <Button
+            ghost sm
+            class="text-neutral-content hover:bg-secondary hover:text-secondary-content rounded-tl-none rounded-br-none rounded-tr-md rounded-bl-md"
+            @click="() => copy(code)"
+          >
+            copy
+          </Button>
+        </div>
+        <div class="lg:max-w-[calc(100vw-380px)]">
+          <slot />
+        </div>
+      </div>
+    </CodeWrapper>
+    <slot v-else />
+  </div>
+</template>
+
+<style>
+.code-wrapper pre code .line {
+  display: block;
+  min-height: 1rem;
+}
+
+.code-wrapper pre {
+  max-width: calc(100vw - 3.5rem);
+}
+</style>

package/components/content/ProseCodeInline.vue

@@ -0,0 +1,3 @@
+<template>
+  <code class="bg-base-300 rounded-md py-1 px-1 whitespace-nowrap"><slot /></code>
+</template>

package/components/content/ProseEm.vue

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

package/components/content/ProseH1.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useRuntimeConfig } from '#imports'
+defineProps<{ id?: string }>()
+const heading = 1
+const { anchorLinks } = useRuntimeConfig().public.content
+const generate = anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading)
+</script>
+
+<template>
+  <h1 :id="id">
+    <a v-if="id && generate" :href="`#${id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h1>
+</template>

package/components/content/ProseH2.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useRuntimeConfig } from '#imports'
+defineProps<{ id?: string }>()
+const heading = 2
+const { anchorLinks } = useRuntimeConfig().public.content
+const generate = anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading)
+</script>
+
+<template>
+  <h2 :id="id">
+    <a v-if="id && generate" :href="`#${id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h2>
+</template>

package/components/content/ProseH3.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useRuntimeConfig } from '#imports'
+defineProps<{ id?: string }>()
+const heading = 3
+const { anchorLinks } = useRuntimeConfig().public.content
+const generate = anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading)
+</script>
+
+<template>
+  <h3 :id="id">
+    <a v-if="id && generate" :href="`#${id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h3>
+</template>

package/components/content/ProseH4.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useRuntimeConfig } from '#imports'
+defineProps<{ id?: string }>()
+const heading = 4
+const { anchorLinks } = useRuntimeConfig().public.content
+const generate = anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading)
+</script>
+
+<template>
+  <h4 :id="id">
+    <a v-if="id && generate" :href="`#${id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h4>
+</template>

package/components/content/ProseH5.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useRuntimeConfig } from '#imports'
+defineProps<{ id?: string }>()
+const heading = 5
+const { anchorLinks } = useRuntimeConfig().public.content
+const generate = anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading)
+</script>
+
+<template>
+  <h5 :id="id">
+    <a v-if="id && generate" :href="`#${id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h5>
+</template>

package/components/content/ProseH6.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useRuntimeConfig } from '#imports'
+defineProps<{ id?: string }>()
+const heading = 6
+const { anchorLinks } = useRuntimeConfig().public.content
+const generate = anchorLinks?.depth >= heading && !anchorLinks?.exclude.includes(heading)
+</script>
+
+<template>
+  <h6 :id="id">
+    <a v-if="id && generate" :href="`#${id}`">
+      <slot />
+    </a>
+    <slot v-else />
+  </h6>
+</template>

package/components/content/ProseHr.vue

@@ -0,0 +1,3 @@
+<template>
+  <hr>
+</template>

package/components/content/ProseImg.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { withBase } 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('//'))
+    return withBase(props.src, useRuntimeConfig().app.baseURL)
+
+  return props.src
+})
+</script>
+
+<template>
+  <img :src="refinedSrc" :alt="alt" :width="width" :height="height">
+</template>

package/components/content/ProseLi.vue

@@ -0,0 +1,3 @@
+<template>
+  <li><slot /></li>
+</template>

package/components/content/ProseOl.vue

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

package/components/content/ProseP.vue

@@ -0,0 +1,3 @@
+<template>
+  <p><slot /></p>
+</template>

package/components/content/ProseStrong.vue

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

package/components/content/ProseTable.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="not-prose relative mb-10 mt-6 overflow-x-auto">
+    <table class="table table-sm">
+      <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>
+    <slot />
+  </td>
+</template>

package/components/content/ProseTh.vue

@@ -0,0 +1,5 @@
+<template>
+  <th>
+    <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="hover">
+    <slot />
+  </tr>
+</template>

package/components/content/ProseUl.vue

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