daisy-ui-kit 5.2.4 → 5.2.7

package/app/components/content/TableOfContents.vue

@@ -1,304 +0,0 @@
-<script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import TocTree from './TocTree.vue'
-
-const pageRoute = useRoute()
-
-// Interface for our TOC structure
-interface TocLink {
-  id: string
-  text: string
-  level: number
-  children: TocLink[]
-}
-
-// Create a reactive reference for our TOC links
-const tocLinks = ref<TocLink[]>([])
-const pageTitle = ref('Table of Contents')
-
-// Track visible headings and active heading
-const visibleHeadings = ref<Set<string>>(new Set())
-const activeHeading = ref<string | null>(null)
-
-// Track the currently clicked heading for immediate highlight
-const clickedHeading = ref<string | null>(null)
-
-// Intersection observer for tracking visible headings
-let headingObserver: IntersectionObserver | null = null
-
-function setupIntersectionObserver() {
-  if (typeof IntersectionObserver === 'undefined') return
-
-  headingObserver = new IntersectionObserver(
-    entries => {
-      entries.forEach(entry => {
-        const id = entry.target.id
-        if (entry.isIntersecting) {
-          visibleHeadings.value.add(id)
-        } else {
-          visibleHeadings.value.delete(id)
-        }
-      })
-
-      // Set the active heading to the first visible one
-      const allIds = getAllHeadingIds(tocLinks.value)
-      for (const id of allIds) {
-        if (visibleHeadings.value.has(id)) {
-          activeHeading.value = id
-          break
-        }
-      }
-    },
-    {
-      rootMargin: '-80px 0px 0px 0px',
-      threshold: 0,
-    },
-  )
-
-  // Observe all headings (ids are auto-generated by scanHeadings if missing)
-  const headings = document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]')
-  headings.forEach(heading => {
-    headingObserver?.observe(heading)
-  })
-}
-
-function getAllHeadingIds(links: TocLink[]): string[] {
-  const ids: string[] = []
-  for (const link of links) {
-    ids.push(link.id)
-    if (link.children.length) {
-      ids.push(...getAllHeadingIds(link.children))
-    }
-  }
-  return ids
-}
-
-function cleanupIntersectionObserver() {
-  if (headingObserver) {
-    headingObserver.disconnect()
-    headingObserver = null
-  }
-  visibleHeadings.value.clear()
-  activeHeading.value = null
-}
-
-// Function to scan the page for headings and build the TOC
-function scanHeadings() {
-  // Wait for the DOM to be ready
-  if (typeof document === 'undefined') {
-    return
-  }
-
-  // Find all headings (h1-h6), auto-generating ids for any that lack one
-  const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6')
-  const links: TocLink[] = []
-  const usedIds = new Set<string>()
-
-  // Get the page title from the first h1
-  const h1 = document.querySelector('h1')
-  if (h1) {
-    pageTitle.value = h1.textContent || 'Table of Contents'
-  }
-
-  // Process each heading
-  headings.forEach(heading => {
-    // Skip the first h1 as it's the page title
-    if (heading.tagName === 'H1' && heading === h1) {
-      return
-    }
-
-    // Auto-generate id from text content if missing
-    if (!heading.id) {
-      const text = heading.textContent || ''
-      const slug = text
-        .toLowerCase()
-        .trim()
-        .replace(/[^\w\s-]/g, '')
-        .replace(/[\s_]+/g, '-')
-        .replace(/^-+|-+$/g, '')
-      // Deduplicate
-      let candidate = slug
-      let n = 1
-      while (usedIds.has(candidate)) {
-        candidate = `${slug}-${n++}`
-      }
-      heading.id = candidate
-    }
-    usedIds.add(heading.id)
-
-    const id = heading.id
-    const level = Number.parseInt(heading.tagName.substring(1), 10)
-
-    // Create a TOC link
-    const link: TocLink = { id, text: heading.textContent || '', level, children: [] }
-    links.push(link)
-  })
-
-  // Build a robust hierarchical structure in a single pass
-  const hierarchicalLinks: TocLink[] = []
-  const parents: TocLink[] = []
-
-  for (const link of links) {
-    // Always ensure children is initialized
-    if (!('children' in link) || !Array.isArray(link.children)) {
-      ;(link as TocLink).children = []
-    }
-    // Find the last parent of lower level
-    while (parents.length > 0 && parents[parents.length - 1]!.level >= link.level) {
-      parents.pop()
-    }
-    if (parents.length === 0) {
-      hierarchicalLinks.push(link)
-    } else {
-      parents[parents.length - 1]!.children.push(link)
-    }
-    parents.push(link)
-  }
-  tocLinks.value = hierarchicalLinks
-}
-
-// Check if we're in the browser
-let observer: MutationObserver | null = null
-
-onMounted(() => {
-  // Initial scan
-  scanHeadings()
-
-  // Initialize clickedHeading from URL hash if present
-  if (window.location.hash) {
-    clickedHeading.value = window.location.hash.slice(1)
-  }
-
-  // Setup intersection observer after initial scan
-  nextTick(() => {
-    setupIntersectionObserver()
-  })
-
-  // Re-scan when route changes (for SPA navigation)
-  watch(
-    () => pageRoute.path,
-    () => {
-      nextTick(() => {
-        cleanupIntersectionObserver()
-        scanHeadings()
-        nextTick(() => {
-          setupIntersectionObserver()
-        })
-      })
-    },
-  )
-
-  // Watch for DOM mutations affecting headings
-  observer = new MutationObserver(mutations => {
-    let shouldRescan = false
-    for (const mutation of mutations) {
-      if (
-        Array.from(mutation.addedNodes).some(isHeadingNode) ||
-        Array.from(mutation.removedNodes).some(isHeadingNode) ||
-        (mutation.type === 'attributes' && isHeadingNode(mutation.target))
-      ) {
-        shouldRescan = true
-        break
-      }
-    }
-    if (shouldRescan) {
-      cleanupIntersectionObserver()
-      scanHeadings()
-      nextTick(() => {
-        setupIntersectionObserver()
-      })
-    }
-  })
-  observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-    attributes: true,
-    attributeFilter: ['id'],
-  })
-})
-
-onBeforeUnmount(() => {
-  if (observer) {
-    observer.disconnect()
-    observer = null
-  }
-  cleanupIntersectionObserver()
-})
-
-function isHeadingNode(node: Node | EventTarget): boolean {
-  if (!(node instanceof HTMLElement)) {
-    return false
-  }
-  return /^H[1-6]$/.test(node.tagName)
-}
-
-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',
-  })
-}
-
-function scrollToHeading(id: string) {
-  const el = document.getElementById(id)
-  if (el) {
-    // Immediately highlight the clicked item
-    clickedHeading.value = id
-    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
-    // Update the hash after the scroll
-    history.replaceState(null, '', `#${id}`)
-  }
-}
-</script>
-
-<template>
-  <Flex col>
-    <Menu v-if="tocLinks.length" class="md:menu-sm xl:menu-md w-full">
-      <NuxtLink href="#" custom>
-        <template #default="{ route }">
-          <MenuItem class="text-base-content cursor-pointer">
-            <a
-              class="flex flex-row items-center justify-between font-semibold bg-neutral/30"
-              :class="checkActive(route?.hash || '')"
-              @click="toTop"
-            >
-              {{ pageTitle }}
-              <Icon name="feather:arrow-up" class="text-base" />
-            </a>
-          </MenuItem>
-        </template>
-      </NuxtLink>
-
-      <TocTree
-        :links="tocLinks"
-        :check-active="checkActive"
-        :scroll-to-heading="scrollToHeading"
-        :visible-headings="visibleHeadings"
-        :active-heading="activeHeading"
-        :clicked-heading="clickedHeading"
-      />
-
-      <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>
-  </Flex>
-</template>

package/app/components/content/TocTree.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import type { PropType } from 'vue'
-
-interface TocLink {
-  id: string
-  text: string
-  level: number
-  children: TocLink[]
-}
-
-defineProps({
-  links: {
-    type: Array as PropType<TocLink[]>,
-    required: true,
-  },
-  checkActive: {
-    type: Function as PropType<(hash: string) => string | null>,
-    required: true,
-  },
-  scrollToHeading: {
-    type: Function as PropType<(id: string) => void>,
-    required: true,
-  },
-  visibleHeadings: {
-    type: Set as unknown as PropType<Set<string>>,
-    default: () => new Set(),
-  },
-  activeHeading: {
-    type: String as PropType<string | null>,
-    default: null,
-  },
-  clickedHeading: {
-    type: String as PropType<string | null>,
-    default: null,
-  },
-})
-</script>
-
-<template>
-  <Menu v-if="links && links.length" class="w-full">
-    <MenuItem v-for="link in links" :key="link.id">
-      <a
-        class="block px-2 py-1 rounded cursor-pointer transition-colors"
-        :class="[
-          clickedHeading === link.id
-            ? 'text-primary font-semibold bg-primary/10'
-            : visibleHeadings.has(link.id)
-              ? 'text-base-content font-medium bg-base-300'
-              : 'text-base-content hover:bg-accent/10',
-        ]"
-        @click.prevent="scrollToHeading(link.id)"
-      >
-        {{ link.text }}
-      </a>
-      <TocTree
-        v-if="link.children && link.children.length"
-        :links="link.children"
-        :check-active="checkActive"
-        :scroll-to-heading="scrollToHeading"
-        :visible-headings="visibleHeadings"
-        :active-heading="activeHeading"
-        :clicked-heading="clickedHeading"
-      />
-    </MenuItem>
-  </Menu>
-</template>

package/app/components/content/TypeBadge.vue

@@ -1,18 +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" sm class="whitespace-nowrap">
-    {{ text }}
-  </Badge>
-</template>

package/app/components/content/UserMenu.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-// @ts-expect-error headlessui types may not be available
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-
-const userNavigation = [
-  { name: 'Your Profile', href: '/app/profile' },
-  { name: 'Settings', href: '/app/settings' },
-  { name: 'Home', href: '/' },
-]
-
-const user: any = useState('user')
-</script>
-
-<template>
-  <Menu as="div" class="relative ml-3">
-    <MenuButton
-      class="flex items-center max-w-xs text-sm rounded-full bg-base-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-    >
-      <span class="sr-only">Open user menu</span>
-      <img class="w-8 h-8 rounded-full" :src="user?.picture" />
-    </MenuButton>
-
-    <transition
-      enter-active-class="transition duration-100 ease-out"
-      enter-from-class="transform scale-95 opacity-0"
-      enter-to-class="transform scale-100 opacity-100"
-      leave-active-class="transition duration-75 ease-in"
-      leave-from-class="transform scale-100 opacity-100"
-      leave-to-class="transform scale-95 opacity-0"
-    >
-      <MenuItems
-        class="absolute right-0 w-48 py-1 mt-2 origin-top-right rounded-md shadow-lg bg-base-100 ring-1 ring-black ring-opacity-5 focus:outline-none"
-      >
-        <MenuItem v-for="item in userNavigation" :key="item.name">
-          <NuxtLink :to="item.href" exact-active-class="bg-gray-100" class="block px-4 py-2 text-sm text-gray-700">
-            {{ item.name }}
-          </NuxtLink>
-        </MenuItem>
-
-        <MenuItem>
-          <a href="/api/auth/logout" exact-active-class="bg-gray-100" class="block px-4 py-2 text-sm text-gray-700"
-            >Sign out</a
-          >
-        </MenuItem>
-      </MenuItems>
-    </transition>
-  </Menu>
-</template>

package/app/composables/__tests__/use-calendar.test.ts

@@ -1,239 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { useCalendar } from '../use-calendar'
-
-describe('useCalendar', () => {
-  describe('initialization', () => {
-    it('initializes with null date by default', () => {
-      const { selectedDate } = useCalendar()
-      expect(selectedDate.value).toBeNull()
-    })
-
-    it('initializes with provided date', () => {
-      const date = new Date(2025, 5, 15) // June 15, 2025
-      const { selectedDate } = useCalendar(date)
-      expect(selectedDate.value?.getFullYear()).toBe(2025)
-      expect(selectedDate.value?.getMonth()).toBe(5)
-      expect(selectedDate.value?.getDate()).toBe(15)
-    })
-
-    it('sets viewDate to today when no initial date provided', () => {
-      const { viewDate } = useCalendar()
-      const today = new Date()
-      expect(viewDate.value.getFullYear()).toBe(today.getFullYear())
-      expect(viewDate.value.getMonth()).toBe(today.getMonth())
-    })
-
-    it('sets viewDate to initial date when provided', () => {
-      const date = new Date(2025, 5, 15)
-      const { viewDate } = useCalendar(date)
-      expect(viewDate.value.getFullYear()).toBe(2025)
-      expect(viewDate.value.getMonth()).toBe(5)
-    })
-  })
-
-  describe('weekday headers', () => {
-    it('returns weekday headers starting with Sunday by default', () => {
-      const { weekdayHeaders } = useCalendar()
-      expect(weekdayHeaders.value).toEqual(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])
-    })
-
-    it('returns weekday headers starting with Monday when firstDay is 1', () => {
-      const { weekdayHeaders } = useCalendar(null, { firstDay: 1 })
-      expect(weekdayHeaders.value).toEqual(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
-    })
-
-    it('returns full weekday names for accessibility', () => {
-      const { weekdayHeadersFull } = useCalendar()
-      expect(weekdayHeadersFull.value).toEqual([
-        'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',
-      ])
-    })
-  })
-
-  describe('month display', () => {
-    it('returns correct month name', () => {
-      const date = new Date(2025, 5, 15) // June
-      const { monthName } = useCalendar(date)
-      expect(monthName.value).toBe('June')
-    })
-
-    it('returns correct short month name', () => {
-      const date = new Date(2025, 11, 25) // December
-      const { monthNameShort } = useCalendar(date)
-      expect(monthNameShort.value).toBe('Dec')
-    })
-  })
-
-  describe('calendar days', () => {
-    it('generates 42 days (6 weeks)', () => {
-      const { calendarDays } = useCalendar(new Date(2025, 5, 15))
-      expect(calendarDays.value).toHaveLength(42)
-    })
-
-    it('marks days outside current month', () => {
-      const { calendarDays } = useCalendar(new Date(2025, 5, 15)) // June 2025
-      const outsideDays = calendarDays.value.filter(d => d.isOutsideMonth)
-      expect(outsideDays.length).toBeGreaterThan(0)
-    })
-
-    it('marks the selected date', () => {
-      const date = new Date(2025, 5, 15)
-      const { calendarDays } = useCalendar(date)
-      const selectedDays = calendarDays.value.filter(d => d.isSelected)
-      expect(selectedDays).toHaveLength(1)
-      expect(selectedDays[0]?.day).toBe(15)
-    })
-
-    it('marks today correctly', () => {
-      const today = new Date()
-      const { calendarDays, goToDate } = useCalendar()
-      goToDate(today)
-      const todayDays = calendarDays.value.filter(d => d.isToday && !d.isOutsideMonth)
-      expect(todayDays).toHaveLength(1)
-      expect(todayDays[0]?.day).toBe(today.getDate())
-    })
-  })
-
-  describe('navigation', () => {
-    it('navigates to next month', () => {
-      const { viewMonth, viewYear, nextMonth } = useCalendar(new Date(2025, 5, 15))
-      expect(viewMonth.value).toBe(5)
-      nextMonth()
-      expect(viewMonth.value).toBe(6)
-      expect(viewYear.value).toBe(2025)
-    })
-
-    it('navigates to previous month', () => {
-      const { viewMonth, viewYear, prevMonth } = useCalendar(new Date(2025, 5, 15))
-      expect(viewMonth.value).toBe(5)
-      prevMonth()
-      expect(viewMonth.value).toBe(4)
-      expect(viewYear.value).toBe(2025)
-    })
-
-    it('handles year rollover when navigating forward', () => {
-      const { viewMonth, viewYear, nextMonth } = useCalendar(new Date(2025, 11, 15))
-      expect(viewMonth.value).toBe(11)
-      nextMonth()
-      expect(viewMonth.value).toBe(0)
-      expect(viewYear.value).toBe(2026)
-    })
-
-    it('handles year rollover when navigating backward', () => {
-      const { viewMonth, viewYear, prevMonth } = useCalendar(new Date(2025, 0, 15))
-      expect(viewMonth.value).toBe(0)
-      prevMonth()
-      expect(viewMonth.value).toBe(11)
-      expect(viewYear.value).toBe(2024)
-    })
-
-    it('goes to specific month', () => {
-      const { viewMonth, goToMonth } = useCalendar(new Date(2025, 5, 15))
-      goToMonth(10)
-      expect(viewMonth.value).toBe(10)
-    })
-
-    it('goes to specific year', () => {
-      const { viewYear, goToYear } = useCalendar(new Date(2025, 5, 15))
-      goToYear(2030)
-      expect(viewYear.value).toBe(2030)
-    })
-
-    it('goes to today', () => {
-      const { viewMonth, viewYear, goToToday } = useCalendar(new Date(2020, 0, 1))
-      const today = new Date()
-      goToToday()
-      expect(viewMonth.value).toBe(today.getMonth())
-      expect(viewYear.value).toBe(today.getFullYear())
-    })
-  })
-
-  describe('selection', () => {
-    it('selects a date', () => {
-      const { selectedDate, selectDate } = useCalendar()
-      const date = new Date(2025, 5, 20)
-      selectDate(date)
-      expect(selectedDate.value?.getDate()).toBe(20)
-      expect(selectedDate.value?.getMonth()).toBe(5)
-    })
-
-    it('clears selection', () => {
-      const { selectedDate, clearSelection } = useCalendar(new Date(2025, 5, 15))
-      expect(selectedDate.value).not.toBeNull()
-      clearSelection()
-      expect(selectedDate.value).toBeNull()
-    })
-
-    it('does not select disabled dates', () => {
-      const minDate = new Date(2025, 5, 10)
-      const { selectedDate, selectDate } = useCalendar(null, { minDate })
-      selectDate(new Date(2025, 5, 5)) // Before minDate
-      expect(selectedDate.value).toBeNull()
-    })
-  })
-
-  describe('date constraints', () => {
-    it('marks dates before minDate as disabled', () => {
-      const minDate = new Date(2025, 5, 15)
-      const { calendarDays } = useCalendar(new Date(2025, 5, 20), { minDate })
-      const june14 = calendarDays.value.find(d => d.day === 14 && d.month === 5)
-      const june15 = calendarDays.value.find(d => d.day === 15 && d.month === 5)
-      expect(june14?.isDisabled).toBe(true)
-      expect(june15?.isDisabled).toBe(false)
-    })
-
-    it('marks dates after maxDate as disabled', () => {
-      const maxDate = new Date(2025, 5, 15)
-      const { calendarDays } = useCalendar(new Date(2025, 5, 10), { maxDate })
-      const june15 = calendarDays.value.find(d => d.day === 15 && d.month === 5)
-      const june16 = calendarDays.value.find(d => d.day === 16 && d.month === 5)
-      expect(june15?.isDisabled).toBe(false)
-      expect(june16?.isDisabled).toBe(true)
-    })
-  })
-
-  describe('formatting', () => {
-    it('formats date with default format', () => {
-      const { formatDate } = useCalendar(new Date(2025, 5, 15))
-      expect(formatDate()).toBe('15 Jun 2025')
-    })
-
-    it('formats date with custom format', () => {
-      const { formatDate } = useCalendar(new Date(2025, 5, 15))
-      expect(formatDate('YYYY-MM-DD')).toBe('2025-06-15')
-    })
-
-    it('formats date with full month name', () => {
-      const { formatDate } = useCalendar(new Date(2025, 5, 15))
-      expect(formatDate('MMMM D, YYYY')).toBe('June 15, 2025')
-    })
-
-    it('returns empty string when no date selected', () => {
-      const { formatDate } = useCalendar()
-      expect(formatDate()).toBe('')
-    })
-  })
-
-  describe('utility functions', () => {
-    it('isSameDay returns true for same day', () => {
-      const { isSameDay } = useCalendar()
-      const a = new Date(2025, 5, 15, 10, 30)
-      const b = new Date(2025, 5, 15, 20, 45)
-      expect(isSameDay(a, b)).toBe(true)
-    })
-
-    it('isSameDay returns false for different days', () => {
-      const { isSameDay } = useCalendar()
-      const a = new Date(2025, 5, 15)
-      const b = new Date(2025, 5, 16)
-      expect(isSameDay(a, b)).toBe(false)
-    })
-
-    it('isSameDay handles null values', () => {
-      const { isSameDay } = useCalendar()
-      expect(isSameDay(null, new Date())).toBe(false)
-      expect(isSameDay(new Date(), null)).toBe(false)
-      expect(isSameDay(null, null)).toBe(false)
-    })
-  })
-})

package/app/composables/useSearch.ts

@@ -1,24 +0,0 @@
-import { ref } from 'vue'
-
-const isSearchOpen = ref(false)
-
-export function useSearch() {
-  function openSearch() {
-    isSearchOpen.value = true
-  }
-
-  function closeSearch() {
-    isSearchOpen.value = false
-  }
-
-  function toggleSearch() {
-    isSearchOpen.value = !isSearchOpen.value
-  }
-
-  return {
-    isSearchOpen,
-    openSearch,
-    closeSearch,
-    toggleSearch,
-  }
-}