daisy-ui-kit 2.1.0 → 2.1.2

package/components/content/ProseH1.vue

@@ -1,16 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-<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

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

package/components/content/ProseImg.vue

@@ -1,34 +0,0 @@
-<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

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

package/components/content/ProseOl.vue

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

package/components/content/ProseP.vue

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

package/components/content/ProseStrong.vue

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

package/components/content/ProseTable.vue

@@ -1,7 +0,0 @@
-<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

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

package/components/content/ProseTd.vue

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

package/components/content/ProseTh.vue

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

package/components/content/ProseThead.vue

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

package/components/content/ProseTr.vue

@@ -1,5 +0,0 @@
-<template>
-  <tr class="hover">
-    <slot />
-  </tr>
-</template>

package/components/content/ProseUl.vue

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

package/components/content/Search.vue

@@ -1,160 +0,0 @@
-<script setup lang="ts">
-import { onKeyStroke, useFocus, useMagicKeys } from '@vueuse/core'
-import { useFuse } from '@vueuse/integrations/useFuse'
-
-const search = ref('')
-const { allLinks } = useNav()
-const tags = allLinks.flatMap(item => item.tags)
-const matchingTag = computed(() => {
-  if (search.value.length < 2)
-    return null
-  return tags.find(tag => tag.toLowerCase().startsWith(search.value.toLowerCase()))
-})
-
-// search results and popular results
-const { results } = useFuse(search, allLinks, {
-  fuseOptions: { keys: ['label', 'tags'], includeScore: true, distance: 3 },
-  resultLimit: 12,
-})
-const defaultResults = [
-  'Button',
-  'Menu',
-  'Drawer',
-  'Tabs',
-  'Dropdown',
-].map(label => allLinks.find(item => item.label === label)!).map(item => ({ item }))
-const eitherResults = computed(() => {
-  if (results.value.length === 0)
-    return defaultResults
-  return results.value
-})
-
-// Open menu when searchbox is focused
-const isMenuOpen = ref(false)
-const searchbox = ref()
-const { focused } = useFocus(searchbox)
-watch(focused, (val) => {
-  if (val) {
-    isMenuOpen.value = val
-  }
-  else {
-    setTimeout(() => {
-      isMenuOpen.value = val
-    }, 100)
-  }
-})
-
-// track the highlighted index in the list
-const highlightedIndex = ref(0)
-const highlightedItem = computed(() => {
-  return eitherResults.value[highlightedIndex.value].item
-})
-// when results change, reset the highlighted index
-watch(eitherResults, () => {
-  highlightedIndex.value = 0
-})
-
-// meta|ctrl+k --> focus the searchbox
-const { meta, control } = useMagicKeys()
-onKeyStroke('k', () => {
-  if (meta.value || control.value)
-    focused.value = !focused.value
-})
-
-// escape --> close the list
-onKeyStroke('Escape', () => {
-  if (focused.value) {
-    if (search.value === '') {
-      focused.value = false
-    }
-    else {
-      search.value = ''
-      highlightedIndex.value = 0
-    }
-  }
-})
-
-// menu click --> close the list
-function handleMenuClick() {
-  focused.value = false
-}
-
-// enter --> navigate to highlighted item
-function handleEnter() {
-  navigateTo(highlightedItem.value.to)
-  focused.value = false
-}
-
-// arrow up --> highlighted previous item
-function handleArrowUp() {
-  highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0)
-}
-// arrow down --> highlight next item
-function handleArrowDown() {
-  highlightedIndex.value = Math.min(highlightedIndex.value + 1, eitherResults.value.length - 1)
-}
-</script>
-
-<template>
-  <Dropdown v-model:open="isMenuOpen" close-on-click-outside end>
-    <DropdownTarget class="block relative">
-      <Flex class="absolute z-10 top-0 bottom-0 pointer-events-none items-center pl-2">
-        <Icon name="heroicons-solid:search" class="w-5 h-5 opacity-60" aria-hidden="true" />
-      </Flex>
-      <TextInput
-        id="searchbox"
-        ref="searchbox"
-        v-model="search"
-        placeholder="Search"
-        name="search"
-        bordered
-        class="join-item max-w-[150px] md:max-w-none rounded-xl pl-8"
-        onfocus="this.select()"
-        @keypress.enter="handleEnter"
-        @keydown.arrow-up="handleArrowUp"
-        @keydown.arrow-down="handleArrowDown"
-      />
-      <Flex
-        v-if="!focused" row
-        class="hidden lg:flex items-center flex-nowrap absolute top-0 bottom-0 right-0 pr-2 pointer-events-none opacity-60"
-      >
-        <Kbd xs>cmd</Kbd>
-        <Text xs class="relative bottom-px">
-          +
-        </Text>
-        <Kbd xs>k</Kbd>
-      </Flex>
-    </DropdownTarget>
-    <DropdownContent class="bg-base-100 shadow-xl rounded-xl border border-base-300 mt-2 w-full overflow-y-auto max-h-[75vh]" @click="handleMenuClick">
-      <Menu>
-        <MenuTitle v-if="!search.length">
-          Popular Components
-        </MenuTitle>
-        <MenuTitle v-if="search.length && results.length">
-          Search Results
-        </MenuTitle>
-
-        <MenuItem v-if="search.length && !results.length">
-          <span>No Results Found</span>
-        </MenuItem>
-        <template v-else-if="search.length">
-          <MenuItem v-for="(result, index) in results" :key="result.item.label" :active="index === highlightedIndex">
-            <NuxtLink :to="result.item.to">
-              {{ result.item.label }}
-              <Badge v-if="matchingTag && result.item.tags.includes(matchingTag)" warning sm>
-                {{ matchingTag }}
-              </Badge>
-            </NuxtLink>
-          </MenuItem>
-        </template>
-        <template v-else>
-          <MenuItem v-for="(result, index) in defaultResults" :key="result.item.label" :active="index === highlightedIndex">
-            <NuxtLink :to="result.item.to">
-              {{ result.item.label }}
-            </NuxtLink>
-          </MenuItem>
-        </template>
-      </Menu>
-    </DropdownContent>
-  </Dropdown>
-</template>

package/components/content/Sidebar.vue

@@ -1,65 +0,0 @@
-<script setup>
-const route = useRoute()
-const { docsLinks, actions, dataDisplay, dataInput, layout, navigation, mockup } = useNav()
-
-const drawerState = createDrawerState('docs')
-
-watch(() => route.path, () => {
-  drawerState.isDrawerOpen = false
-})
-</script>
-
-<template>
-  <DrawerSide name="docs" class="border-r border-r-base-300/30 z-50">
-    <!-- Sidebar component, swap this element with another sidebar if you like -->
-    <div class="relative pt-4 menu w-80 bg-base-100 text-base-content">
-      <NuxtLink to="/" class="fixed">
-        <Logo class="ml-8 text-4xl text-base-content" />
-      </NuxtLink>
-
-      <div class="pb-12 pl-2 mt-12 overflow-y-auto">
-        <SidebarMenuSection
-          :links="docsLinks"
-          no-divider
-          class="pt-4"
-        />
-        <SidebarMenuSection
-          title="Actions"
-          title-icon="mdi:cursor-default-click"
-          title-icon-classes="text-fuchsia-600 w-5 h-5"
-          :links="actions"
-        />
-        <SidebarMenuSection
-          title="Data Display"
-          title-icon="ph:app-window-bold"
-          title-icon-classes="text-teal-600 w-5 h-5"
-          :links="dataDisplay"
-        />
-        <SidebarMenuSection
-          title="Data Input"
-          title-icon="material-symbols:edit-square-outline"
-          title-icon-classes="text-red-600 w-5 h-5"
-          :links="dataInput"
-        />
-        <SidebarMenuSection
-          title="Layout"
-          title-icon="ic:round-grid-view"
-          title-icon-classes="text-blue-600 w-5 h-5"
-          :links="layout"
-        />
-        <SidebarMenuSection
-          title="Navigation"
-          title-icon="mdi:link-variant"
-          title-icon-classes="text-cyan-600 w-5 h-5"
-          :links="navigation"
-        />
-        <SidebarMenuSection
-          title="Mockup"
-          title-icon="icon-park-outline:iphone"
-          title-icon-classes="text-lime-600 w-5 h-5"
-          :links="mockup"
-        />
-      </div>
-    </div>
-  </DrawerSide>
-</template>

package/components/content/SidebarMenuSection.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-interface Link {
-  label: string
-  to: string
-  pending: boolean
-  pendingDocs: boolean
-  icon?: string
-}
-defineProps<{
-  title?: string
-  titleIcon?: string
-  titleIconClasses?: string
-  links: Link[]
-  noDivider?: boolean
-}>()
-</script>
-
-<template>
-  <Menu>
-    <li v-if="!noDivider" />
-    <MenuTitle v-if="titleIcon || title" class="flex flex-row items-center gap-3">
-      <Icon v-if="titleIcon" :name="titleIcon as string" :class="titleIconClasses as string" />
-      {{ title }}
-    </MenuTitle>
-
-    <MenuItem
-      v-for="link in links"
-      :key="link.label"
-      :class="{ 'opacity-30': link.pending }"
-    >
-      <NuxtLink :to="link.to" exact-active-class="active">
-        <Icon v-if="link.icon" :name="link.icon" class="w-5 h-5 mr-1" />
-        {{ link.label }}
-        <Icon v-if="link.pendingDocs" name="feather:file-text" class="ml-2" />
-      </NuxtLink>
-    </MenuItem>
-  </Menu>
-</template>

package/components/content/SigninForm.vue

@@ -1,47 +0,0 @@
-<script>
-import { LockClosedIcon } from '@heroicons/vue/solid'
-
-export default {
-  components: {
-    LockClosedIcon,
-  },
-}
-</script>
-
-<template>
-  <div class="flex items-center justify-center min-h-full px-4 py-12 sm:px-6 lg:px-8">
-    <div class="w-full max-w-md space-y-8">
-      <div>
-        <img
-          class="w-auto h-24 mx-auto invert"
-          src="https://avatars.githubusercontent.com/u/85031756"
-          alt="Feathers Cloud"
-        >
-        <h2 class="mt-6 text-3xl font-extrabold text-center text-gray-900">
-          Sign in to your account
-        </h2>
-      </div>
-      <div class="mt-8 space-y-6">
-        <a
-          type="button"
-          class="relative flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md group hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-          href="/api/auth/login"
-        >
-          <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-            <LockClosedIcon
-              class="w-5 h-5 text-indigo-500 group-hover:text-indigo-400"
-              aria-hidden="true"
-            />
-          </span>
-          Sign in
-        </a>
-        <div class="text-center">
-          or
-          <RouterLink to="/" class="text-blue-500">
-            Return to Home
-          </RouterLink>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/components/content/TableOfContents.vue

@@ -1,80 +0,0 @@
-<script setup lang="ts">
-const { toc, page } = useContent()
-const pageRoute = useRoute()
-
-function checkActive(hash: string) {
-  return pageRoute.hash === hash ? 'active' : null
-}
-
-function toTop() {
-  window.scrollTo({
-    top: 0,
-    behavior: 'smooth',
-  })
-  setTimeout(() => {
-    window.location.hash = ''
-  }, 600)
-}
-
-function toBottom() {
-  window.scrollTo({
-    top: document.body.scrollHeight,
-    behavior: 'smooth',
-  })
-}
-</script>
-
-<template>
-  <Flex col>
-    <Menu v-if="toc?.links?.length" class="menu-sm md:menu-xs xl:menu-sm">
-      <MenuTitle>Table of Contents</MenuTitle>
-      <MenuItem>
-        <NuxtLink href="#" custom>
-          <template #default="{ route }">
-            <a
-              class="flex flex-row items-center justify-between font-semibold bg-neutral/30"
-              :class="checkActive(route.hash)"
-              @click="toTop"
-            >
-              {{ page.title }}
-              <Icon name="feather:arrow-up" class="text-base" />
-            </a>
-          </template>
-        </NuxtLink>
-      </MenuItem>
-      <Menu>
-        <MenuItem v-for="item in toc.links" :key="item.id">
-          <NuxtLink :href="`#${item.id}`" custom>
-            <template #default="{ route, navigate }">
-              <a :class="checkActive(route.hash)" @click="navigate">
-                {{ item.text }}
-              </a>
-            </template>
-          </NuxtLink>
-          <Menu v-if="item.children?.length">
-            <MenuItem v-for="child in item.children" :key="child.id">
-              <NuxtLink :href="`#${child.id}`" custom>
-                <template #default="{ route, navigate }">
-                  <a :class="checkActive(route.hash)" @click="navigate">
-                    {{ child.text }}
-                  </a>
-                </template>
-              </NuxtLink>
-            </MenuItem>
-          </Menu>
-        </MenuItem>
-        <MenuItem>
-          <a
-            class="flex flex-row items-center justify-between hover:bg-accent/25 mt-6"
-            @click="toBottom"
-          >
-            scroll to bottom
-            <Icon name="feather:arrow-down" class="text-base" />
-
-          </a>
-        </MenuItem>
-      </Menu>
-    </Menu>
-    <!-- <pre class="text-xs">{{ page }}</pre> -->
-  </Flex>
-</template>

package/components/content/TypeBadge.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  text: string
-}>()
-
-const color = computed(() => {
-  if (props.text === 'boolean')
-    return 'info'
-  return 'warning'
-})
-</script>
-
-<template>
-  <Badge :color="color">
-    {{ text }}
-  </Badge>
-</template>