daisy-ui-kit 1.0.8 → 2.1.0

package/components/Home/Hero.vue

@@ -7,7 +7,7 @@
         <div class="absolute inset-0">
           <img
             class="object-cover w-full h-full"
-            src="/img/unsplash-devs-sm.jpeg"
+            src="/img/unsplash-devs-sm.jpg"
             alt="People working on laptops"
           >
           <div
@@ -32,14 +32,14 @@
           </Text>
 
           <div class="max-w-sm mx-auto mt-10 sm:max-w-none sm:flex sm:justify-center">
-            <Flex items-center justify-center class="gap-2 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2">
-              <NuxtLink to="/daisy-button" class="block">
+            <Flex class="gap-2 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 items-center justify-center">
+              <NuxtLink to="/docs/button" class="block">
                 <Button class="w-full border-0 bg-base-100 text-base-content hover:bg-base-200">
                   Learn more
                 </Button>
               </NuxtLink>
 
-              <NuxtLink to="/install" class="block">
+              <NuxtLink to="/docs/install" class="block">
                 <Button primary class="w-full">
                   Start Building
                 </Button>

package/components/Home/Testimonial.vue

@@ -8,7 +8,7 @@
       </Text>
     </div>
     <footer class="mt-3">
-      <Flex items-center class="space-x-3">
+      <Flex class="space-x-3 items-center">
         <Avatar circle class="flex-shrink-0 w-8 h-8">
           <img
             src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80"

package/components/{ButtonGroup.vue → Join.vue}

@@ -1,5 +1,5 @@
 <template>
-  <div class="btn-group">
+  <div class="join">
     <slot />
   </div>
 </template>

package/components/Link.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import { computed, withDefaults } from 'vue'
-
 interface Props {
   is?: string
-  color?: 'primary' | 'secondary' | 'accent' | 'neutral'
+  hover?: boolean
+
+  color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error'
+  neutral?: boolean
   primary?: boolean
   secondary?: boolean
   accent?: boolean
-  neutral?: boolean
-  hover?: boolean
+  success?: boolean
+  info?: boolean
+  warning?: boolean
+  error?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
   is: 'a',
@@ -16,10 +19,14 @@ const props = withDefaults(defineProps<Props>(), {
 
 const classes = computed(() => {
   return {
+    'link-neutral': props.neutral || props.color === 'neutral',
     'link-primary': props.primary || props.color === 'primary',
     'link-secondary': props.secondary || props.color === 'secondary',
     'link-accent': props.accent || props.color === 'accent',
-    'link-neutral': props.neutral || props.color === 'neutral',
+    'link-success': props.success || props.color === 'success',
+    'link-info': props.info || props.color === 'info',
+    'link-warning': props.warning || props.color === 'warning',
+    'link-error': props.error || props.color === 'error',
     'link-hover': props.hover,
   }
 })

package/components/LoadingBall.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps<{
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+
+const classes = computed(() => {
+  return {
+    'text-primary': props.primary || props.color === 'primary',
+    'text-secondary': props.secondary || props.color === 'secondary',
+    'text-neutral': props.neutral || props.color === 'neutral',
+    'text-accent': props.accent || props.color === 'accent',
+    'text-info': props.info || props.color === 'info',
+    'text-success': props.success || props.color === 'success',
+    'text-warning': props.warning || props.color === 'warning',
+    'text-error': props.error || props.color === 'error',
+
+    'loading-lg': props.lg || props.size === 'lg',
+    'loading-md': props.md || props.size === 'md',
+    'loading-sm': props.sm || props.size === 'sm',
+    'loading-xs': props.xs || props.size === 'xs',
+  }
+})
+</script>
+
+<template>
+  <span class="loading loading-ball" :class="classes" />
+</template>

package/components/LoadingBars.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps<{
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+
+const classes = computed(() => {
+  return {
+    'text-primary': props.primary || props.color === 'primary',
+    'text-secondary': props.secondary || props.color === 'secondary',
+    'text-neutral': props.neutral || props.color === 'neutral',
+    'text-accent': props.accent || props.color === 'accent',
+    'text-info': props.info || props.color === 'info',
+    'text-success': props.success || props.color === 'success',
+    'text-warning': props.warning || props.color === 'warning',
+    'text-error': props.error || props.color === 'error',
+
+    'loading-lg': props.lg || props.size === 'lg',
+    'loading-md': props.md || props.size === 'md',
+    'loading-sm': props.sm || props.size === 'sm',
+    'loading-xs': props.xs || props.size === 'xs',
+  }
+})
+</script>
+
+<template>
+  <span class="loading loading-bars" :class="classes" />
+</template>

package/components/LoadingDots.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps<{
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+
+const classes = computed(() => {
+  return {
+    'text-primary': props.primary || props.color === 'primary',
+    'text-secondary': props.secondary || props.color === 'secondary',
+    'text-neutral': props.neutral || props.color === 'neutral',
+    'text-accent': props.accent || props.color === 'accent',
+    'text-info': props.info || props.color === 'info',
+    'text-success': props.success || props.color === 'success',
+    'text-warning': props.warning || props.color === 'warning',
+    'text-error': props.error || props.color === 'error',
+
+    'loading-lg': props.lg || props.size === 'lg',
+    'loading-md': props.md || props.size === 'md',
+    'loading-sm': props.sm || props.size === 'sm',
+    'loading-xs': props.xs || props.size === 'xs',
+  }
+})
+</script>
+
+<template>
+  <span class="loading loading-dots" :class="classes" />
+</template>

package/components/LoadingInfinity.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps<{
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+
+const classes = computed(() => {
+  return {
+    'text-primary': props.primary || props.color === 'primary',
+    'text-secondary': props.secondary || props.color === 'secondary',
+    'text-neutral': props.neutral || props.color === 'neutral',
+    'text-accent': props.accent || props.color === 'accent',
+    'text-info': props.info || props.color === 'info',
+    'text-success': props.success || props.color === 'success',
+    'text-warning': props.warning || props.color === 'warning',
+    'text-error': props.error || props.color === 'error',
+
+    'loading-lg': props.lg || props.size === 'lg',
+    'loading-md': props.md || props.size === 'md',
+    'loading-sm': props.sm || props.size === 'sm',
+    'loading-xs': props.xs || props.size === 'xs',
+  }
+})
+</script>
+
+<template>
+  <span class="loading loading-infinity" :class="classes" />
+</template>

package/components/LoadingRing.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps<{
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+
+const classes = computed(() => {
+  return {
+    'text-primary': props.primary || props.color === 'primary',
+    'text-secondary': props.secondary || props.color === 'secondary',
+    'text-neutral': props.neutral || props.color === 'neutral',
+    'text-accent': props.accent || props.color === 'accent',
+    'text-info': props.info || props.color === 'info',
+    'text-success': props.success || props.color === 'success',
+    'text-warning': props.warning || props.color === 'warning',
+    'text-error': props.error || props.color === 'error',
+
+    'loading-lg': props.lg || props.size === 'lg',
+    'loading-md': props.md || props.size === 'md',
+    'loading-sm': props.sm || props.size === 'sm',
+    'loading-xs': props.xs || props.size === 'xs',
+  }
+})
+</script>
+
+<template>
+  <span class="loading loading-ring" :class="classes" />
+</template>

package/components/LoadingSpinner.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps<{
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+
+const classes = computed(() => {
+  return {
+    'text-primary': props.primary || props.color === 'primary',
+    'text-secondary': props.secondary || props.color === 'secondary',
+    'text-neutral': props.neutral || props.color === 'neutral',
+    'text-accent': props.accent || props.color === 'accent',
+    'text-info': props.info || props.color === 'info',
+    'text-success': props.success || props.color === 'success',
+    'text-warning': props.warning || props.color === 'warning',
+    'text-error': props.error || props.color === 'error',
+
+    'loading-lg': props.lg || props.size === 'lg',
+    'loading-md': props.md || props.size === 'md',
+    'loading-sm': props.sm || props.size === 'sm',
+    'loading-xs': props.xs || props.size === 'xs',
+  }
+})
+</script>
+
+<template>
+  <span class="loading loading-spinner" :class="classes" />
+</template>

package/components/Mask.config.ts

@@ -1,6 +1,7 @@
 import { computed } from 'vue'
 
 export const maskProps = {
+  shape: { type: String },
   squircle: Boolean,
   heart: Boolean,
   hexagon: Boolean,
@@ -20,10 +21,9 @@ export const maskProps = {
   triangle2: Boolean,
   triangle3: Boolean,
   triangle4: Boolean,
-  shape: { type: String },
 }
 
-export function makeMaskClasses(props) {
+export function makeMaskClasses(props: any) {
   const classes = computed(() => {
     return {
       'mask-squircle': props.squircle || props.shape === 'squircle',

package/components/Menu.vue

@@ -2,19 +2,27 @@
 import { computed } from 'vue'
 
 interface Props {
+  align?: 'vertical' | 'horizontal'
   vertical?: boolean
   horizontal?: boolean
-  normal?: boolean
-  compact?: boolean
+
+  size?: | 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
 }
 const props = defineProps<Props>()
 
+// `normal` and `compact` provide backwards compatibility with DaisyUI 2.x
 const classes = computed(() => {
   return {
-    'menu-normal': props.normal,
-    'menu-vertical': props.vertical,
-    'menu-horizontal': props.horizontal,
-    'menu-compact': props.compact,
+    'menu-vertical': props.vertical || props.align === 'vertical',
+    'menu-horizontal': props.horizontal || props.align === 'horizontal',
+    'menu-lg': props.lg || props.size === 'lg',
+    'menu-md': props.md || props.size === 'md',
+    'menu-sm': props.sm || props.size === 'sm',
+    'menu-xs': props.xs || props.size === 'xs',
   }
 })
 </script>

package/components/MenuItem.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 interface Props {
-  bordered?: boolean
-  hoverBordered?: boolean
   active?: boolean
   disabled?: boolean
 }
@@ -9,7 +7,17 @@ defineProps<Props>()
 </script>
 
 <template>
-  <li class="menu-item" :class="{ active, bordered, 'hover-bordered': hoverBordered, disabled }">
+  <li class="menu-item" :class="{ active, disabled }">
     <slot />
   </li>
 </template>
+
+<style lang="postcss">
+.menu-item.active > a, .menu-item.active > span {
+  background-color: hsl(var(--n) / var(--tw-bg-opacity));
+  color: hsl(var(--nc) / var(--tw-text-opacity));
+}
+.menu-item.disabled > a, .menu-item.disabled > span {
+  background-color: var(--n)
+}
+</style>

package/components/MenuTitle.vue

@@ -1,14 +1,5 @@
 <template>
   <li class="menu-title">
-    <div class="title-inner">
-      <slot />
-    </div>
+    <slot />
   </li>
 </template>
-
-<style>
-/* Allow overriding font size from the component */
-.title-inner {
-  font-size: inherit !important;
-}
-</style>

package/components/Modal.vue

@@ -1,16 +1,37 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+interface Props {
+  modelValue?: boolean
+  closeOnClickOutside?: boolean
+  top?: boolean
+  bottom?: boolean
+}
+const props = defineProps<Props>()
+
+const is = 'div'
 
-const clickOutsideToClose: any = inject('modalClickOutsideToClose')
-const isOpen: any = inject('isOpen')
-const handleClick = () => {
-  if (clickOutsideToClose.value)
+const isOpen = defineModel({
+  default: false,
+  local: true,
+  type: Boolean,
+})
+function handleClick() {
+  if (props.closeOnClickOutside)
     isOpen.value = false
 }
 </script>
 
 <template>
-  <div class="modal" @click.self="handleClick">
+  <input v-model="isOpen" type="checkbox" class="modal-toggle">
+  <Component
+    :is="is"
+    v-bind="{ ...$attrs, ...$props }"
+    class="modal"
+    :class="{
+      'modal-top': props.top,
+      'modal-bottom': props.bottom,
+    }"
+    @click.self="handleClick"
+  >
     <slot />
-  </div>
+  </Component>
 </template>

package/components/Progress.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, withDefaults } from 'vue'
+import { computed } from 'vue'
 
 interface Props {
   value: any
@@ -18,7 +18,6 @@ const props = withDefaults(defineProps<Props>(), {
   value: 0,
   max: 100,
 })
-const emit = defineEmits(['update:modelValue'])
 
 const classes = computed(() => {
   const { color, primary, secondary, accent, success, info, warning, error } = props

package/components/Prose.vue

@@ -1,12 +1,5 @@
-<script setup lang="ts">
-interface Props {
-  fullWidth?: boolean
-}
-defineProps<Props>()
-</script>
-
 <template>
-  <article class="prose daisy-prose" :class="{ 'full-width': fullWidth }">
+  <article class="prose daisy-prose max-w-none">
     <slot />
   </article>
 </template>
@@ -31,4 +24,9 @@ defineProps<Props>()
 .prose .link-accent {
   @apply text-accent;
 }
+
+.prose h1 a, .prose h2 a, .prose h3 a, .prose h4 a, .prose h5 a, .prose h6 a {
+  text-decoration: none;
+  @apply font-bold
+}
 </style>

package/components/Radio.vue

@@ -4,11 +4,17 @@ import { computed, inject } from 'vue'
 const props = defineProps<{
   modelValue?: any
   value: any
+  disabled?: boolean
 
   color?: string
+  neutral?: boolean
   primary?: boolean
   secondary?: boolean
   accent?: boolean
+  success?: boolean
+  warning?: boolean
+  info?: boolean
+  error?: boolean
 
   size?: string
   xs?: boolean
@@ -18,7 +24,7 @@ const props = defineProps<{
 }>()
 const emit = defineEmits(['update:modelValue'])
 
-const radioGroup = inject('radio-group', null)
+const radioGroup: any = inject('radio-group', null)
 
 const _props = computed(() => {
   if (radioGroup)
@@ -27,11 +33,16 @@ const _props = computed(() => {
 })
 
 const classes = computed(() => {
-  const { color, primary, secondary, accent, size, xs, sm, md, lg } = _props.value
+  const { color, neutral, primary, secondary, accent, success, warning, info, error, size, xs, sm, md, lg } = _props.value
   return {
+    'radio-neutral': neutral || color === 'neutral',
     'radio-primary': primary || color === 'primary',
     'radio-secondary': secondary || color === 'secondary',
     'radio-accent': accent || color === 'accent',
+    'radio-success': success || color === 'success',
+    'radio-warning': warning || color === 'warning',
+    'radio-info': info || color === 'info',
+    'radio-error': error || color === 'error',
     'radio-xs': xs || size === 'xs',
     'radio-sm': sm || size === 'sm',
     'radio-md': md || size === 'md',
@@ -59,6 +70,7 @@ const currentValue = computed({
     v-bind="{ ..._props, ...$attrs }"
     class="radio"
     :class="classes"
+    :disabled="disabled"
     :value="props.value"
   >
 </template>

package/components/RadioGroup.vue

@@ -6,9 +6,14 @@ const props = defineProps<{
   name: string
 
   color?: string
+  neutral?: boolean
   primary?: boolean
   secondary?: boolean
   accent?: boolean
+  success?: boolean
+  warning?: boolean
+  info?: boolean
+  error?: boolean
 
   size?: string
   xs?: boolean

package/components/Range.vue

@@ -2,15 +2,21 @@
 import { computed } from 'vue'
 
 interface Props {
+  modelValue?: number | string
   min?: number | string
   max?: number | string
   step?: number | string
-  modelValue?: number | string
+  disabled?: boolean
 
   color?: string
+  neutral?: boolean
   primary?: boolean
   secondary?: boolean
   accent?: boolean
+  success?: boolean
+  warning?: boolean
+  info?: boolean
+  error?: boolean
 
   size?: 'lg' | 'md' | 'sm' | 'xs'
   lg?: boolean
@@ -22,11 +28,16 @@ const props = defineProps<Props>()
 defineEmits(['update:modelValue'])
 
 const classes = computed(() => {
-  const { color, primary, secondary, accent, size, lg, md, sm, xs } = props
+  const { color, neutral, primary, secondary, accent, success, info, warning, error, size, lg, md, sm, xs } = props
   return {
+    'range-neutral': neutral || color === 'neutral',
     'range-primary': primary || color === 'primary',
     'range-secondary': secondary || color === 'secondary',
     'range-accent': accent || color === 'accent',
+    'range-success': success || color === 'success',
+    'range-info': info || color === 'info',
+    'range-warning': warning || color === 'warning',
+    'range-error': error || color === 'error',
     'range-lg': lg || size === 'lg',
     'range-md': md || size === 'md',
     'range-sm': sm || size === 'sm',
@@ -43,6 +54,7 @@ const classes = computed(() => {
     :min="min"
     :max="max"
     :step="step"
+    :disabled="disabled"
     :value="modelValue"
     @input="$emit('update:modelValue', ($event.target as any).value)"
   >