daisy-ui-kit 5.2.4 → 5.2.7

package/app/components/content/SearchModal.vue

@@ -1,292 +0,0 @@
-<script setup lang="ts">
-import { onKeyStroke, useMagicKeys } from '@vueuse/core'
-import { useFuse } from '@vueuse/integrations/useFuse'
-import { computed, nextTick, ref, watch } from 'vue'
-
-const { isSearchOpen, openSearch, closeSearch } = useSearch()
-const { themes, setTheme } = useDaisyTheme()
-
-// Handle escape key
-onKeyStroke('Escape', () => {
-  if (isSearchOpen.value) {
-    closeSearch()
-  }
-})
-
-// meta|ctrl+k --> toggle the search modal
-const { meta, control } = useMagicKeys()
-onKeyStroke('k', e => {
-  if (meta?.value || control?.value) {
-    e.preventDefault()
-    openSearch()
-  }
-})
-
-const search = ref('')
-const searchInput = ref<HTMLInputElement | null>(null)
-const { allLinks } = useNav()
-
-// Build theme search items
-const themeItems = themes.value
-  .filter(t => t.theme !== 'system')
-  .map(t => ({
-    label: t.theme,
-    to: '',
-    tags: ['theme'],
-    isTheme: true,
-  }))
-
-const allSearchItems = [...allLinks, ...themeItems]
-
-const tags = allSearchItems.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, allSearchItems, {
-  fuseOptions: { keys: ['label', 'tags'], includeScore: true, distance: 3 },
-  resultLimit: 12,
-})
-
-// Split results into nav links and themes
-const navResults = computed(() => results.value.filter(r => !(r.item as any).isTheme))
-const themeResults = computed(() => {
-  const fromFuse = results.value.filter(r => (r.item as any).isTheme)
-  // If user typed "theme", show all themes (fuse's resultLimit caps at 12)
-  if (fromFuse.length > 0 && matchingTag.value === 'theme') {
-    return themeItems.map(item => ({ item }))
-  }
-  return fromFuse
-})
-
-const popularResults = ['Button', 'Menu', 'Drawer', 'Tabs', 'Dropdown']
-  .map(label => allLinks.find(item => item.label === label)!)
-  .filter(Boolean)
-  .map(item => ({ item }))
-
-const newResults = allLinks
-  .filter(item => item.tags?.includes('new'))
-  .slice(0, 5)
-  .map(item => ({ item }))
-
-// Combined default results for keyboard navigation
-const allDefaultResults = computed(() => [...popularResults, ...newResults])
-
-const eitherResults = computed(() => {
-  if (results.value.length === 0) {
-    return allDefaultResults.value
-  }
-  return [...navResults.value, ...themeResults.value]
-})
-
-// track the highlighted index in the list
-const highlightedIndex = ref(0)
-const resultsContainer = ref<HTMLElement | null>(null)
-const highlightedItem = computed(() => {
-  return eitherResults.value[highlightedIndex.value]?.item
-})
-
-// scroll highlighted item into view
-watch(highlightedIndex, () => {
-  nextTick(() => {
-    const el = resultsContainer.value?.querySelector('[data-highlighted]')
-    el?.scrollIntoView({ block: 'nearest' })
-  })
-})
-
-// when results change, reset the highlighted index
-watch(eitherResults, () => {
-  highlightedIndex.value = 0
-})
-
-// Focus input when modal opens
-watch(isSearchOpen, val => {
-  if (val) {
-    nextTick(() => {
-      searchInput.value?.focus()
-    })
-  } else {
-    search.value = ''
-    highlightedIndex.value = 0
-  }
-})
-
-// enter --> navigate to highlighted item or apply theme
-function handleEnter() {
-  if (highlightedItem.value) {
-    if ((highlightedItem.value as any).isTheme) {
-      setTheme(highlightedItem.value.label)
-    } else {
-      navigateTo(highlightedItem.value.to)
-    }
-    closeSearch()
-  }
-}
-
-function handleThemeClick(themeName: string) {
-  setTheme(themeName)
-  closeSearch()
-}
-
-// 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)
-}
-
-function handleResultClick(to: string) {
-  navigateTo(to)
-  closeSearch()
-}
-</script>
-
-<template>
-  <ClientOnly>
-    <Teleport to="body">
-      <Modal v-model="isSearchOpen">
-        <ModalBox class="p-0 max-w-lg overflow-hidden">
-          <!-- Search Input -->
-          <div class="flex items-center gap-3 p-4 border-b border-base-300">
-            <Icon name="heroicons-solid:search" class="size-5 opacity-60 shrink-0" />
-            <input
-              ref="searchInput"
-              v-model="search"
-              type="text"
-              placeholder="Search components, docs..."
-              class="flex-1 bg-transparent outline-none text-lg"
-              @keydown.enter="handleEnter"
-              @keydown.arrow-up.prevent="handleArrowUp"
-              @keydown.arrow-down.prevent="handleArrowDown"
-            />
-            <Kbd sm class="opacity-50">ESC</Kbd>
-          </div>
-
-          <!-- Results -->
-          <div ref="resultsContainer" class="max-h-[60vh] overflow-y-auto">
-            <div v-if="!search.length" class="p-2">
-              <Text sm class="px-3 py-2 opacity-50 uppercase tracking-wider">Popular</Text>
-              <Menu class="w-full">
-                <MenuItem
-                  v-for="(result, index) in popularResults"
-                  :key="result.item.label"
-                  :class="{ 'bg-primary/10': index === highlightedIndex }"
-                  :data-highlighted="index === highlightedIndex ? '' : undefined"
-                >
-                  <a class="flex items-center gap-3" @click="handleResultClick(result.item.to)">
-                    <Icon
-                      v-if="(result.item as any).icon"
-                      :name="(result.item as any).icon"
-                      class="size-5 opacity-60"
-                    />
-                    <span>{{ result.item.label }}</span>
-                  </a>
-                </MenuItem>
-              </Menu>
-
-              <Text sm class="px-3 py-2 mt-4 opacity-50 uppercase tracking-wider">New</Text>
-              <Menu class="w-full">
-                <MenuItem
-                  v-for="(result, index) in newResults"
-                  :key="result.item.label"
-                  :class="{ 'bg-primary/10': index + popularResults.length === highlightedIndex }"
-                  :data-highlighted="index + popularResults.length === highlightedIndex ? '' : undefined"
-                >
-                  <a class="flex items-center gap-3" @click="handleResultClick(result.item.to)">
-                    <Icon
-                      v-if="(result.item as any).icon"
-                      :name="(result.item as any).icon"
-                      class="size-5 opacity-60"
-                    />
-                    <span class="flex-1">{{ result.item.label }}</span>
-                    <Badge primary sm>New</Badge>
-                  </a>
-                </MenuItem>
-              </Menu>
-            </div>
-
-            <div v-else-if="results.length" class="p-2">
-              <template v-if="navResults.length">
-                <Text sm class="px-3 py-2 opacity-50 uppercase tracking-wider">Results</Text>
-                <Menu class="w-full">
-                  <MenuItem
-                    v-for="(result, index) in navResults"
-                    :key="result.item.label"
-                    :class="{ 'bg-primary/10': index === highlightedIndex }"
-                    :data-highlighted="index === highlightedIndex ? '' : undefined"
-                  >
-                    <a class="flex items-center gap-3" @click="handleResultClick(result.item.to)">
-                      <Icon
-                        v-if="(result.item as any).icon"
-                        :name="(result.item as any).icon"
-                        class="size-5 opacity-60"
-                      />
-                      <span class="flex-1">{{ result.item.label }}</span>
-                      <Badge v-if="matchingTag && result.item.tags.includes(matchingTag)" warning sm>
-                        {{ matchingTag }}
-                      </Badge>
-                    </a>
-                  </MenuItem>
-                </Menu>
-              </template>
-
-              <template v-if="themeResults.length">
-                <Text sm class="px-3 py-2 opacity-50 uppercase tracking-wider" :class="{ 'mt-4': navResults.length }">
-                  Themes
-                </Text>
-                <Menu class="w-full">
-                  <li
-                    v-for="(result, index) in themeResults"
-                    :key="result.item.label"
-                    :data-theme="result.item.label"
-                    :data-highlighted="index + navResults.length === highlightedIndex ? '' : undefined"
-                  >
-                    <a
-                      class="flex items-center gap-3"
-                      :style="{ backgroundColor: 'var(--color-base-100)', color: 'var(--color-base-content)' }"
-                      :class="{ 'bg-primary! text-primary-content!': index + navResults.length === highlightedIndex }"
-                      @click="handleThemeClick(result.item.label)"
-                    >
-                      <ThemeTile :theme="result.item.label" xs class="size-5!" />
-                      <span class="flex-1">{{ result.item.label }}</span>
-                    </a>
-                  </li>
-                </Menu>
-              </template>
-            </div>
-
-            <div v-else class="p-8 text-center">
-              <Icon name="heroicons-outline:search" class="size-12 opacity-20 mx-auto mb-4" />
-              <Text class="opacity-60">No results found for "{{ search }}"</Text>
-              <Text sm class="opacity-40 mt-1">Try searching for something else</Text>
-            </div>
-          </div>
-
-          <!-- Footer -->
-          <div class="flex items-center gap-4 p-3 border-t border-base-300 text-xs opacity-50">
-            <span class="flex items-center gap-1">
-              <Kbd xs>↑</Kbd>
-              <Kbd xs>↓</Kbd>
-              to navigate
-            </span>
-            <span class="flex items-center gap-1">
-              <Kbd xs>↵</Kbd>
-              to select
-            </span>
-            <span class="flex items-center gap-1">
-              <Kbd xs>esc</Kbd>
-              to close
-            </span>
-          </div>
-        </ModalBox>
-      </Modal>
-    </Teleport>
-  </ClientOnly>
-</template>

package/app/components/content/Sidebar.vue

@@ -1,87 +0,0 @@
-<script setup>
-import { nextTick, onMounted, watch } from 'vue'
-
-const route = useRoute()
-const { docsLinks, actions, dataDisplay, dataInput, feedback, layout, navigation, mockup } = useNav()
-
-const drawerState = createDrawerState('docs')
-const sidebarRef = ref(null)
-
-function scrollToActiveLink() {
-  nextTick(() => {
-    setTimeout(() => {
-      const el = sidebarRef.value?.$el || sidebarRef.value
-      const activeLink = el?.querySelector('.menu-active')
-      if (activeLink) {
-        activeLink.scrollIntoView({ block: 'center', behavior: 'smooth' })
-      }
-    }, 100)
-  })
-}
-
-watch(
-  () => route.path,
-  () => {
-    drawerState.isDrawerOpen = false
-    scrollToActiveLink()
-  },
-)
-
-onMounted(() => {
-  scrollToActiveLink()
-})
-</script>
-
-<template>
-  <div class="relative pt-4 menu w-80 bg-base-100 text-base-content min-h-full">
-    <NuxtLink to="/" class="fixed">
-      <Logo class="ml-8 text-4xl text-base-content" />
-    </NuxtLink>
-
-    <Flex ref="sidebarRef" col 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="Navigation"
-        title-icon="mdi:link-variant"
-        title-icon-classes="text-cyan-600 w-5 h-5"
-        :links="navigation"
-      />
-      <SidebarMenuSection
-        title="Feedback"
-        title-icon="ph:chat-centered-dots"
-        title-icon-classes="text-orange-600 w-5 h-5"
-        :links="feedback"
-      />
-      <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="Mockup"
-        title-icon="icon-park-outline:iphone"
-        title-icon-classes="text-lime-600 w-5 h-5"
-        :links="mockup"
-      />
-    </Flex>
-  </div>
-</template>

package/app/components/content/SidebarMenuSection.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-interface Link {
-  label: string
-  to: string
-  pending: boolean
-  pendingDocs: boolean
-  icon?: string
-  tags: string[]
-}
-defineProps<{
-  title?: string
-  titleIcon?: string
-  titleIconClasses?: string
-  links: Link[]
-  noDivider?: boolean
-}>()
-</script>
-
-<template>
-  <Menu class="w-full">
-    <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="menu-active" class="flex flex-row items-center">
-        <Icon v-if="link.icon" :name="link.icon" class="w-5 h-5 mr-1" />
-        <Text class="flex-grow">
-          {{ link.label }}
-        </Text>
-        <Icon v-if="link.pendingDocs" name="feather:file-text" class="ml-2" />
-        <Badge v-if="link.tags.includes('new')" sm soft accent class="ml-2"> new </Badge>
-        <!-- <Tooltip v-if="link.tags.includes('examples')" tip="examples done" sm left>
-          <Badge sm soft accent>
-            ✅
-          </Badge>
-        </Tooltip> -->
-      </NuxtLink>
-    </MenuItem>
-  </Menu>
-</template>

package/app/components/content/SigninForm.vue

@@ -1,34 +0,0 @@
-<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">
-            <Icon
-              name="heroicons:lock-closed-solid"
-              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>