daisy-ui-kit 1.0.7 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daisy-ui-kit",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "description": "",
   "scripts": {
     "build": "nuxi build",
@@ -19,42 +19,45 @@
     "nuxt.js"
   ],
   "dependencies": {
-    "@vueuse/core": "^9.13.0",
+    "@vueuse/core": "^10.2.0",
     "prismjs": "^1.29.0"
   },
   "peerDependencies": {
-    "daisyui": "^2.13.5"
+    "daisyui": "^3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.36.0",
-    "@headlessui/vue": "^1.7.12",
-    "@heroicons/vue": "^2.0.16",
-    "@iconify/json": "^2.2.36",
+    "@antfu/eslint-config": "^0.39.5",
+    "@headlessui/vue": "^1.7.14",
+    "@heroicons/vue": "^2.0.18",
+    "@iconify/json": "^2.2.82",
+    "@nuxt/content": "^2.7.0",
     "@nuxt/kit": "@nuxt/kit",
-    "@nuxtjs/color-mode": "^3.2.0",
-    "@nuxtjs/tailwindcss": "^6.6.0",
-    "@pinia/nuxt": "^0.4.7",
-    "@popperjs/core": "^2.11.6",
+    "@nuxtjs/color-mode": "^3.3.0",
+    "@nuxtjs/tailwindcss": "^6.8.0",
+    "@pinia/nuxt": "^0.4.11",
+    "@popperjs/core": "^2.11.8",
     "@rovit/popper": "^3.9.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/line-clamp": "^0.4.2",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.9",
-    "@vueuse/nuxt": "^9.13.0",
+    "@vueuse/integrations": "^10.2.1",
+    "@vueuse/nuxt": "^10.2.0",
     "autoprefixer": "^10.4.14",
     "cookie": "^0.5.0",
-    "daisyui": "^2.51.4",
-    "eslint": "^8.36.0",
-    "feathers-pinia": "^0.36.5",
+    "daisyui": "^3.1.6",
+    "eslint": "^8.43.0",
+    "feathers-pinia": "^3.0.4",
+    "fuse.js": "^6.6.2",
     "mobile-detect": "^1.4.5",
-    "nuxt": "^3.3.1",
-    "nuxt-icon": "^0.3.3",
+    "nuxt": "^3.6.0",
+    "nuxt-icon": "^0.4.1",
     "ohmyfetch": "^0.4.21",
-    "pinia": "^2.0.33",
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.7",
-    "typescript": "^5.0.2",
-    "unplugin-icons": "^0.15.3",
-    "vue": "^3.2.47"
+    "pinia": "^2.1.4",
+    "postcss": "^8.4.24",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.1.3",
+    "unplugin-icons": "^0.16.3",
+    "vue": "^3.3.4"
   }
 }

package/components/-utils.ts

@@ -1,41 +0,0 @@
-import { computed } from 'vue'
-
-interface MakeExclusiveClassOptions {
-  props: Record<string, any>
-  prefix: string
-  prop: string
-  propList: string[]
-  defaultVal?: string
-}
-/**
- * Creates a className for the provided `prop` name  and checks that multiple are not enabled.
- * @param prefix will be added to all classes that do not begin with `-`. For those that do, the `-` will be stripped.
- * @param prop
- * @param propList
- * @param defaultVal
- */
-export function makeExclusiveClass({
-  props,
-  prefix,
-  prop,
-  propList,
-  defaultVal = '',
-}: MakeExclusiveClassOptions) {
-  return computed(() => {
-    const active = propList.filter((v: string) => props[v.replace('-', '')])
-    if (active.length > 1) {
-      throw new Error(
-        `only one ${prop} can be enabled at a time. Current are ${active}`
-      )
-    }
-    const current = active[0] || ''
-    const _prefix = current.startsWith('-') ? '' : prefix
-    return current ? `${_prefix}${current.replace('-', '') || defaultVal}` : ''
-  })
-}
-
-export function makeIndividualClass({ props, prefix, prop }) {
-  return computed(() => {
-    return props[prop] ? `${prefix}${prop}` : ''
-  })
-}

package/components/Button.config.ts

@@ -1,26 +0,0 @@
-export * from './-utils'
-
-/**
- * Converts a list of prop names to an object of Booleans. Can be spread into props.
- * @param propList list of prop names to become booleans
- */
-export function toProps(propList: string[]): Record<string, boolean> {
-  return propList.reduce((all: Record<string, any>, current: string) => {
-    all[current.replace('-', '')] = Boolean
-    return all
-  }, {})
-}
-
-export const directionVariants = ['top', 'bottom', 'left', 'right']
-export const colorVariants = ['neutral', 'primary', 'secondary', 'accent']
-export const stateVariants = ['info', 'success', 'warning', 'error']
-export const allColorVariants = [...colorVariants, ...stateVariants]
-export const variants = [
-  ...colorVariants,
-  ...stateVariants,
-  'ghost',
-  'link',
-  'glass',
-]
-export const sizes = ['xs', 'sm', 'md', 'lg']
-export const shapes = ['circle', 'square']

package/components/DemoElement.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps({
-  tag: String,
-  props: Object,
-  multiline: Boolean,
-})
-const propsString = computed(() => {
-  const string = Object.keys(props.props).reduce((propString: string, key: string, index: number) => {
-    const value = props.props[key]
-    const betweenPropSpacing = props.multiline ? '' : ' '
-    let append = `${props.multiline ? '\n  ' : ''}`
-    if (value === true) append += `${betweenPropSpacing}${key}`
-    else if (value === false) append += `${betweenPropSpacing}:${key}="false"`
-    return propString += append
-  }, '')
-  return `${string}${props.multiline ? '\n' : ''}`
-})
-</script>
-
-<template>
-  <div class="font-mono">
-    &lt;<span class="text-accent">{{ tag }}</span><span class="span-pre">{{ propsString }}</span>&gt;<slot />&lt;/<span class="text-accent">{{ tag }}</span>&gt;
-  </div>
-</template>
-
-<style>
-.span-pre {
-  white-space: pre-wrap;
-}
-</style>

package/components/DrawerLayout.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { computed, provide, reactive } from 'vue'
-import { drawerStateKey } from './drawer-utils'
-
-const props = defineProps({
-  right: Boolean,
-  mobile: Boolean,
-})
-const drawerState = reactive({
-  isDrawerOpen: false,
-  openDrawer() {
-    drawerState.isDrawerOpen = true
-  },
-  closeDrawer() {
-    drawerState.isDrawerOpen = false
-  },
-  toggleDrawer() {
-    drawerState.isDrawerOpen = !drawerState.isDrawerOpen
-  },
-})
-
-provide(drawerStateKey, drawerState)
-
-const classes = computed(() => {
-  return {
-    'drawer-end': props.right,
-    'drawer-mobile': props.mobile,
-  }
-})
-</script>
-
-<template>
-  <div class="drawer" :class="classes">
-    <input v-model="drawerState.isDrawerOpen" type="checkbox" class="drawer-toggle">
-    <slot v-bind="drawerState" />
-  </div>
-</template>

package/components/DrawerLayoutContent.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { inject } from 'vue'
-import { drawerStateKey } from './drawer-utils'
-
-interface DrawerState {
-  isDrawerOpen: boolean
-  openDrawer: () => void
-  closeDrawer: () => void
-  toggleDrawer: () => void
-}
-
-const drawerState: DrawerState | undefined = inject(drawerStateKey)
-</script>
-
-<template>
-  <div class="drawer-content">
-    <slot v-bind="drawerState" />
-  </div>
-</template>

package/components/InputGroup.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { computed, withDefaults } from 'vue'
-
-interface Props {
-  is?: string
-  vertical?: boolean
-
-  size?: string
-  lg?: boolean
-  md?: boolean
-  sm?: boolean
-  xs?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
-  is: 'label',
-})
-
-const classes = computed(() => {
-  return {
-    'input-group-lg': props.size === 'lg' || props.lg,
-    'input-group-md': props.size === 'md' || props.md,
-    'input-group-sm': props.size === 'sm' || props.sm,
-    'input-group-xs': props.size === 'xs' || props.xs,
-    'input-group-vertical': props.vertical,
-  }
-})
-</script>
-
-<template>
-  <component :is="is" class="input-group" :class="classes">
-    <slot />
-  </component>
-</template>

package/components/MobileSidebar.vue

@@ -1,88 +0,0 @@
-<script setup>
-import {
-  Dialog,
-  DialogOverlay,
-  TransitionChild,
-  TransitionRoot,
-} from '@headlessui/vue'
-
-defineProps(['navigation', 'show'])
-defineEmits(['update:show'])
-</script>
-
-<template>
-  <TransitionRoot as="template" :show="show">
-    <Dialog as="div" class="fixed inset-0 z-40 flex md:hidden" @close="$emit('update:show', false)">
-      <TransitionChild
-        as="template"
-        enter="transition-opacity ease-linear duration-300"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="transition-opacity ease-linear duration-300"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
-      >
-        <DialogOverlay class="fixed inset-0 bg-opacity-75 bg-base-200" />
-      </TransitionChild>
-      <TransitionChild
-        as="template"
-        enter="transition ease-in-out duration-300 transform"
-        enter-from="-translate-x-full"
-        enter-to="translate-x-0"
-        leave="transition ease-in-out duration-300 transform"
-        leave-from="translate-x-0"
-        leave-to="-translate-x-full"
-      >
-        <div class="relative flex flex-col flex-1 w-full max-w-xs pt-5 pb-4 bg-indigo-700">
-          <TransitionChild
-            as="template"
-            enter="ease-in-out duration-300"
-            enter-from="opacity-0"
-            enter-to="opacity-100"
-            leave="ease-in-out duration-300"
-            leave-from="opacity-100"
-            leave-to="opacity-0"
-          >
-            <div class="absolute top-0 right-0 pt-2 -mr-12">
-              <button
-                type="button"
-                class="flex items-center justify-center w-10 h-10 ml-1 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
-                @click="$emit('update:show', false)"
-              >
-                <span class="sr-only">Close sidebar</span>
-                <Icon name="heroicons/x-mark" class="w-6 h-6 text-base-content" aria-hidden="true" />
-              </button>
-            </div>
-          </TransitionChild>
-
-          <Logo class="text-4xl text-base-content" />
-
-          <div class="flex-1 h-0 mt-5 overflow-y-auto">
-            <nav class="px-2 space-y-1">
-              <a
-                v-for="item in navigation"
-                :key="item.name"
-                :href="item.href"
-                class="flex items-center px-2 py-2 text-base font-medium rounded-md group" :class="[
-                  item.current
-                    ? 'bg-indigo-800 text-base-content'
-                    : 'text-indigo-100 hover:bg-indigo-600',
-                ]"
-              >
-                <component
-                  :is="item.icon"
-                  class="flex-shrink-0 w-6 h-6 mr-4 text-indigo-300"
-                  aria-hidden="true"
-                />
-                {{ item.name }}
-              </a>
-            </nav>
-          </div>
-        </div>
-      </TransitionChild>
-      <div class="flex-shrink-0 w-14" aria-hidden="true">
-        <!-- Dummy element to force sidebar to shrink to fit close icon -->
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>

package/components/ModalWrapper.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import { computed, provide } from 'vue'
-
-interface Props {
-  name: string
-  modelValue?: boolean
-  clickToClose?: boolean
-}
-const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue'])
-
-const is = computed(() => {
-  return props.clickToClose ? 'label' : 'div'
-})
-const isOpen = computed({
-  get: () => props.modelValue,
-  set: val => emit('update:modelValue', val),
-})
-
-provide(
-  'modalClickOutsideToClose',
-  computed(() => props.clickToClose),
-)
-provide('isOpen', isOpen)
-</script>
-
-<template>
-  <div :class="`modal---${name}`">
-    <input v-model="isOpen" type="checkbox" class="modal-toggle">
-    <slot />
-  </div>
-</template>

package/components/Sidebar.vue

@@ -1,89 +0,0 @@
-<script setup>
-const docsLinks = [{ label: 'Install', to: '/install' }]
-const actions = [
-  { label: 'Button', to: '/daisy-button' },
-  { label: 'Dropdown', to: '/daisy-dropdown' },
-  { label: 'Modal', to: '/daisy-modal', pendingDocs: true },
-  { label: 'Swap', to: '/daisy-swap' },
-]
-const dataDisplay = [
-  { label: 'Alert', to: '/daisy-alert' },
-  { label: 'Avatar', to: '/daisy-avatar' },
-  { label: 'AvatarGroup', to: '/daisy-avatar-group' },
-  { label: 'Badge', to: '/daisy-badge' },
-  { label: 'Card', to: '/daisy-card' },
-  { label: 'Carousel', to: '/daisy-carousel' },
-  { label: 'Collapse', to: '/daisy-collapse' },
-  { label: 'Countdown', to: '/daisy-countdown' },
-  { label: 'Kbd', to: '/daisy-kbd' },
-  { label: 'Progress', to: '/daisy-progress' },
-  { label: 'RadialProgress', to: '/daisy-radial-progress' },
-  { label: 'Stat', to: '/daisy-stat' },
-  { label: 'Table', to: '/daisy-table' },
-  { label: 'Text', to: '/daisy-text' },
-  { label: 'Tooltip', to: '/daisy-tooltip' },
-  { label: 'Prose', to: '/daisy-prose' },
-]
-const dataInput = [
-  { label: 'FormControl', to: '/daisy-form-control' },
-  { label: 'Checkbox', to: '/daisy-form-checkbox' },
-  { label: 'TextInput', to: '/daisy-form-text-input' },
-  { label: 'Radio', to: '/daisy-form-radio' },
-  { label: 'RadioGroup', to: '/daisy-form-radio-group' },
-  { label: 'Range', to: '/daisy-form-range' },
-  { label: 'Rating', to: '/daisy-form-rating' },
-  { label: 'Select', to: '/daisy-form-select' },
-  { label: 'Textarea', to: '/daisy-form-textarea' },
-  { label: 'Toggle', to: '/daisy-form-toggle' },
-]
-const layout = [
-  { label: 'Artboard', to: '/daisy-artboard' },
-  { label: 'ButtonGroup', to: '/daisy-button-group' },
-  { label: 'Divider', to: '/daisy-divider' },
-  { label: 'Drawer', to: '/daisy-drawer' },
-  { label: 'Flex', to: '/daisy-flex' },
-  { label: 'Footer', to: '/daisy-footer' },
-  { label: 'Hero', to: '/daisy-hero' },
-  { label: 'Indicator', to: '/daisy-indicator' },
-  { label: 'InputGroup', to: '/daisy-input-group' },
-  { label: 'Mask', to: '/daisy-mask' },
-  { label: 'Stack', to: '/daisy-stack' },
-  { label: 'Toast', to: '/daisy-toast' },
-]
-const navigation = [
-  { label: 'Breadcrumbs', to: '/daisy-breadcrumbs' },
-  { label: 'BottomNav', to: '/daisy-bottom-nav' },
-  { label: 'Link', to: '/daisy-link' },
-  { label: 'Menu', to: '/daisy-menu' },
-  { label: 'Navbar', to: '/daisy-navbar' },
-  { label: 'Pagination', to: '/daisy-pagination' },
-  { label: 'Steps', to: '/daisy-steps' },
-  { label: 'Tabs', to: '/daisy-tabs' },
-]
-const mockup = [
-  { label: 'Code', to: '/daisy-code' },
-  { label: 'Phone', to: '/daisy-phone' },
-  { label: 'Window', to: '/daisy-window' },
-]
-</script>
-
-<template>
-  <Drawer class="border-r border-r-base-300/30">
-    <!-- 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 title="Docs" :links="docsLinks" />
-        <SidebarMenuSection title="Actions" :links="actions" />
-        <SidebarMenuSection title="Data Display" :links="dataDisplay" />
-        <SidebarMenuSection title="Data Input" :links="dataInput" />
-        <SidebarMenuSection title="Layout" :links="layout" />
-        <SidebarMenuSection title="Navigation" :links="navigation" />
-        <SidebarMenuSection title="Mockup" :links="mockup" />
-      </div>
-    </div>
-  </Drawer>
-</template>

package/components/drawer-utils.ts

@@ -1,10 +0,0 @@
-import type { InjectionKey } from 'vue'
-
-export interface DrawerState {
-  isDrawerOpen: boolean
-  openDrawer: () => void
-  closeDrawer: () => void
-  toggleDrawer: () => void
-}
-
-export const drawerStateKey = Symbol('drawerState') as InjectionKey<DrawerState>

package/components/fixtures.ts

@@ -1,62 +0,0 @@
-export const people = [
-  {
-    id: 1,
-    name: 'Wade Cooper',
-    avatar:
-      'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-  {
-    id: 2,
-    name: 'Arlene Mccoy',
-    avatar:
-      'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-  {
-    id: 3,
-    name: 'Devon Webb',
-    avatar:
-      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80',
-  },
-  {
-    id: 4,
-    name: 'Tom Cook',
-    avatar:
-      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-  {
-    id: 5,
-    name: 'Tanya Fox',
-    avatar:
-      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-  {
-    id: 6,
-    name: 'Hellen Schmidt',
-    avatar:
-      'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-  {
-    id: 7,
-    name: 'Caroline Schultz',
-    avatar:
-      'https://images.unsplash.com/photo-1568409938619-12e139227838?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-  {
-    id: 8,
-    name: 'Mason Heaney',
-    avatar:
-      'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-  {
-    id: 9,
-    name: 'Claudie Smitham',
-    avatar:
-      'https://images.unsplash.com/photo-1584486520270-19eca1efcce5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-  {
-    id: 10,
-    name: 'Emil Schaefer',
-    avatar:
-      'https://images.unsplash.com/photo-1561505457-3bcad021f8ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-  },
-]

package/components/types.ts

@@ -1,7 +0,0 @@
-export interface StateProps {
-  state: string
-  info: boolean
-  success: boolean
-  warning: boolean
-  error: boolean
-}