daisy-ui-kit 1.0.7 → 2.0.0

package/components/RangeMeasure.vue

@@ -1,27 +1,32 @@
 <script setup lang="ts">
-import { computed, withDefaults } from 'vue'
+import { computed } from 'vue'
 
-interface Props {
-  numbered?: boolean
+const props = withDefaults(defineProps<{
+  modelValue?: number | string
   min?: number | string
   max?: number | string
   step?: number | string
-  modelValue?: number | string
 
+  numbered?: boolean
   asButtons?: boolean
+  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
   md?: boolean
   sm?: boolean
   xs?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   min: 0,
   max: 100,
   step: 1,
@@ -29,28 +34,34 @@ const props = withDefaults(defineProps<Props>(), {
 defineEmits(['update:modelValue'])
 
 const classes = computed(() => {
-  const { color, primary, secondary, accent, size, lg, md, sm, xs, numbered } = props
+  const { color, neutral, primary, secondary, accent, success, info, warning, error, size, lg, md, sm, xs, disabled } = props
   return {
+    'text-neutral': neutral || color === 'neutral',
     'text-primary': primary || color === 'primary',
     'text-secondary': secondary || color === 'secondary',
     'text-accent': accent || color === 'accent',
+    'text-success': success || color === 'success',
+    'text-info': info || color === 'info',
+    'text-warning': warning || color === 'warning',
+    'text-error': error || color === 'error',
     'text-lg': lg || size === 'lg',
     'text-md': md || size === 'md',
     'text-sm': sm || size === 'sm',
     'text-xs': xs || size === 'xs',
+    'opacity-50': disabled,
   }
 })
 const values = computed(() => {
   const vals = []
-  for (let index = parseInt(props.min as string); index < parseInt(props.max as string) + 1; index++) {
+  for (let index = Number.parseInt(props.min as string); index < Number.parseInt(props.max as string) + 1; index++) {
     vals.push({
       value: index,
-      isVisible: index % parseInt(props.step as string) === 0,
+      isVisible: index % Number.parseInt(props.step as string) === 0,
     })
   }
   return vals
 })
-const count = computed(() => parseInt(props.max as string) - parseInt(props.min as string))
+// const count = computed(() => Number.parseInt(props.max as string) - Number.parseInt(props.min as string))
 </script>
 
 <template>
@@ -63,7 +74,8 @@ const count = computed(() => parseInt(props.max as string) - parseInt(props.min
       :numbered="numbered"
       :as-button="asButtons"
       :is-hidden="!tick.isVisible"
-      @update:model-value="(val) => $emit('update:modelValue', val)"
+      :disabled="disabled"
+      @update:model-value="(val) => !disabled && $emit('update:modelValue', val)"
     >
       {{ numbered ? tick : '|' }}
     </RangeMeasureTick>

package/components/RangeMeasureTick.vue

@@ -2,14 +2,14 @@
 import { computed } from 'vue'
 import { useTimeoutFn } from '@vueuse/core'
 
-interface Props {
+const props = defineProps<{
   tick: number
   modelValue?: number | string
   numbered?: boolean
   asButton?: boolean
   isHidden?: boolean
-}
-const props = defineProps<Props>()
+  disabled?: boolean
+}>()
 defineEmits(['update:modelValue'])
 
 const hasChanged = ref(false)
@@ -35,13 +35,21 @@ const isCurrent = computed(() => props.modelValue == props.tick)
 const classes = computed(() => {
   return {
     'font-bold': isCurrent.value,
+    'opacity-50': props.disabled,
+    'cursor-pointer': !props.disabled,
+    'cursor-not-allowed': props.disabled,
   }
 })
 </script>
 
 <template>
   <Button
-    v-if="asButton && !isHidden" xs :ghost="!isCurrent" circle :class="classes"
+    v-if="asButton && !isHidden"
+    xs
+    :ghost="!isCurrent"
+    circle
+    :class="classes"
+    :disabled="disabled"
     @click="$emit('update:modelValue', tick)"
   >
     {{ numbered ? tick : '|' }}
@@ -49,10 +57,14 @@ const classes = computed(() => {
   <Tooltip
     v-else
     :tip="tick"
-    :open="hasChanged && isCurrent"
+    :open="hasChanged && isCurrent && !disabled"
     position="bottom"
-    class="cursor-pointer"
-    :class="{ 'px-[2px]': !asButton }"
+    :class="{
+      'px-[2px]': !asButton,
+      'opacity-50': disabled,
+      'cursor-pointer': !disabled,
+      'cursor-not-allowed': disabled,
+    }"
     @click="$emit('update:modelValue', tick)"
   >
     <Text v-if="!isHidden" :black="isCurrent">

package/components/Rating.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { computed, withDefaults } from 'vue'
+import { computed } from 'vue'
 
 interface Props {
   modelValue?: number | string
   count?: number | string
   half?: boolean
 
+  disabled?: boolean
+
   color?: string
   neutral?: boolean
   primary?: boolean
@@ -48,7 +50,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   count: 5,
 })
-defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue'])
 
 const shapes = [
   'squircle',
@@ -84,40 +86,54 @@ const ratingClasses = computed(() => {
 
 const maskClasses = computed(() => {
   const hasShape = shapes.reduce((acc, current) => {
-    return acc || props.shape || props[current]
+    return acc || props.shape || (props as any)[current]
   }, false)
+  const { color, shape, disabled } = props
   return {
-    'bg-neutral': props.neutral || props.color === 'neutral',
-    'bg-primary': props.primary || props.color === 'primary',
-    'bg-secondary': props.secondary || props.color === 'secondary',
-    'bg-accent': props.accent || props.color === 'accent',
-    'bg-info': props.info || props.color === 'info',
-    'bg-success': props.success || props.color === 'success',
-    'bg-warning': props.warning || props.color === 'warning',
-    'bg-error': props.error || props.color === 'error',
+    'bg-neutral': props.neutral || color === 'neutral',
+    'bg-primary': props.primary || color === 'primary',
+    'bg-secondary': props.secondary || color === 'secondary',
+    'bg-accent': props.accent || color === 'accent',
+    'bg-info': props.info || color === 'info',
+    'bg-success': props.success || color === 'success',
+    'bg-warning': props.warning || color === 'warning',
+    'bg-error': props.error || color === 'error',
+
+    'cursor-not-allowed': disabled,
+    'opacity-50': disabled,
 
-    'mask-squircle': props.squircle || props.shape === 'squircle',
-    'mask-heart': props.heart || props.shape === 'heart',
-    'mask-hexagon': props.hexagon || props.shape === 'hexagon',
-    'mask-hexagon-2': props.hexagon2 || props.shape === 'hexagon-2',
-    'mask-decagon': props.decagon || props.shape === 'decagon',
-    'mask-pentagon': props.pentagon || props.shape === 'pentagon',
-    'mask-diamond': props.diamond || props.shape === 'diamond',
-    'mask-square': props.square || props.shape === 'square',
-    'mask-circle': props.circle || props.shape === 'circle',
-    'mask-parallelogram': props.parallelogram || props.shape === 'parallelogram',
-    'mask-parallelogram-2': props.parallelogram2 || props.shape === 'parallelogram-2',
-    'mask-parallelogram-3': props.parallelogram3 || props.shape === 'parallelogram-3',
-    'mask-parallelogram-4': props.parallelogram4 || props.shape === 'parallelogram-4',
-    'mask-star': props.star || props.shape === 'star',
-    'mask-star-2': props.star2 || props.shape === 'star-2' || !hasShape,
-    'mask-triangle': props.triangle || props.shape === 'triangle',
-    'mask-triangle-2': props.triangle2 || props.shape === 'triangle-2',
-    'mask-triangle-3': props.triangle3 || props.shape === 'triangle-3',
-    'mask-triangle-4': props.triangle4 || props.shape === 'triangle-4',
+    'mask-squircle': props.squircle || shape === 'squircle',
+    'mask-heart': props.heart || shape === 'heart',
+    'mask-hexagon': props.hexagon || shape === 'hexagon',
+    'mask-hexagon-2': props.hexagon2 || shape === 'hexagon-2',
+    'mask-decagon': props.decagon || shape === 'decagon',
+    'mask-pentagon': props.pentagon || shape === 'pentagon',
+    'mask-diamond': props.diamond || shape === 'diamond',
+    'mask-square': props.square || shape === 'square',
+    'mask-circle': props.circle || shape === 'circle',
+    'mask-parallelogram': props.parallelogram || shape === 'parallelogram',
+    'mask-parallelogram-2': props.parallelogram2 || shape === 'parallelogram-2',
+    'mask-parallelogram-3': props.parallelogram3 || shape === 'parallelogram-3',
+    'mask-parallelogram-4': props.parallelogram4 || shape === 'parallelogram-4',
+    'mask-star': props.star || shape === 'star',
+    'mask-star-2': props.star2 || shape === 'star-2' || !hasShape,
+    'mask-triangle': props.triangle || shape === 'triangle',
+    'mask-triangle-2': props.triangle2 || shape === 'triangle-2',
+    'mask-triangle-3': props.triangle3 || shape === 'triangle-3',
+    'mask-triangle-4': props.triangle4 || shape === 'triangle-4',
   }
 })
-const max = computed(() => parseInt(props.count as string))
+const max = computed(() => Number.parseInt(props.count as string))
+
+function handleValue(digit: number, half = false) {
+  if (props.disabled)
+    return
+
+  if (props.half)
+    return emit('update:modelValue', half ? digit - 0.5 : digit)
+
+  return emit('update:modelValue', digit)
+}
 </script>
 
 <template>
@@ -134,9 +150,9 @@ const max = computed(() => parseInt(props.count as string))
         type="radio"
         :value="half ? digit - 0.5 : digit"
         class="mask"
-        :class="[maskClasses, { 'mask-half-1': half }, bg]"
-        :checked="half ? modelValue == digit - 0.5 : modelValue == digit"
-        @change="$emit('update:modelValue', half ? digit - 0.5 : digit)"
+        :class="[maskClasses, bg, { 'mask-half-1': half }]"
+        :checked="half ? modelValue === digit - 0.5 : modelValue === digit"
+        @change="() => handleValue(digit, true)"
       >
       <input
         v-if="half"
@@ -144,8 +160,8 @@ const max = computed(() => parseInt(props.count as string))
         :value="digit"
         class="mask mask-half-2"
         :class="[maskClasses, bg]"
-        :checked="modelValue == digit"
-        @change="$emit('update:modelValue', digit)"
+        :checked="modelValue === digit"
+        @change="() => handleValue(digit)"
       >
     </template>
   </div>

package/components/Select.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { computed, withDefaults } from 'vue'
-
-type Value = string | Record<string, any>
 type Color =
   | 'primary'
   | 'secondary'
@@ -10,15 +7,18 @@ type Color =
   | 'success'
   | 'warning'
   | 'error'
-interface Props {
+
+const props = withDefaults(defineProps<{
   modelValue: any
   options: Record<string, any>[] | any[]
-  value?: <T extends Value>(val: T) => keyof T
-  label?: <T extends Value>(val: T) => keyof T
+  value?: (val: any) => any
+  label?: (val: any) => any
   resultAsObject?: boolean
+  join?: boolean
 
   bordered?: boolean
   ghost?: boolean
+  disabled?: boolean
 
   color?: Color
   primary?: boolean
@@ -34,21 +34,19 @@ interface Props {
   md?: boolean
   sm?: boolean
   xs?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  value: <T extends Value>(val: T) => {
+}>(), {
+  value: (val: any) => {
     if (!val)
       return null
 
     return typeof val === 'string'
       ? (val as string)
-      : val?.value || val?.id || val?._id
+      : (val?.value || val?.id || val?._id || val)
   },
-  label: <T extends Value>(val: T) =>
+  label: (val: any) =>
     typeof val === 'string'
       ? (val as string)
-      : val.label || val.name || val.title,
+      : (val.label || val.name || val.title),
   resultAsObject: false,
 })
 const emit = defineEmits(['update:modelValue'])
@@ -72,6 +70,8 @@ const computedVModel = computed({
 
 const classes = computed(() => {
   return {
+    'join-item': props.join,
+
     'select-primary': props.primary || props.color === 'primary',
     'select-secondary': props.secondary || props.color === 'secondary',
     'select-accent': props.accent || props.color === 'accent',
@@ -92,7 +92,7 @@ const classes = computed(() => {
 </script>
 
 <template>
-  <select v-model="computedVModel" class="select" :class="classes">
+  <select v-model="computedVModel" class="select" :class="classes" :disabled="disabled">
     <option
       v-for="option in options"
       :key="value(option)"

package/components/Step.vue

@@ -5,10 +5,10 @@ const props = defineProps<{
   glyph?: string
 
   color?: string
+  neutral?: boolean
   primary?: boolean
   secondary?: boolean
   accent?: boolean
-  neutral?: boolean
   info?: boolean
   success?: boolean
   warning?: boolean
@@ -17,10 +17,10 @@ const props = defineProps<{
 
 const classes = computed(() => {
   return {
+    'step-neutral': props.neutral || props.color === 'neutral',
     'step-primary': props.primary || props.color === 'primary',
     'step-secondary': props.secondary || props.color === 'secondary',
     'step-accent': props.accent || props.color === 'accent',
-    'step-neutral': props.neutral || props.color === 'neutral',
     'step-info': props.info || props.color === 'info',
     'step-success': props.success || props.color === 'success',
     'step-warning': props.warning || props.color === 'warning',

package/components/Tab.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, inject, withDefaults } from 'vue'
+import { computed, inject } from 'vue'
 
-interface Props {
+const props = withDefaults(defineProps<{
   is?: string | Object | Function
   name?: string
   active?: boolean
@@ -15,8 +15,7 @@ interface Props {
   md?: boolean
   sm?: boolean
   xs?: boolean
-}
-const props = withDefaults(defineProps<Props>(), {
+}>(), {
   is: 'a',
 })
 

package/components/TabContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, withDefaults } from 'vue'
+import { computed, inject } from 'vue'
 
 interface Props {
   is?: any

package/components/Tabs.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, inject, withDefaults } from 'vue'
+import { computed, inject } from 'vue'
 import Tab from './Tab.vue'
 
 interface Props {
   is?: string | Object | Function
-  tabs: string[]
+  tabs?: string[]
 
   variant?: 'bordered' | 'lifted' | 'boxed' | 'inline-boxed'
   bordered?: boolean

package/components/Text.vue

@@ -3,15 +3,16 @@ import { computed } from 'vue'
 
 interface Props {
   is?: string
+  join?: boolean
 
   block?: boolean
   inline?: boolean
   inlineBlock?: boolean
 
   color?:
+  | 'neutral'
   | 'primary'
   | 'secondary'
-  | 'neutral'
   | 'accent'
   | 'info'
   | 'success'
@@ -104,6 +105,8 @@ const props = defineProps<Props>()
 
 const classes = computed(() => {
   return {
+    'join-item': props.join,
+
     'block': props.block,
     'inline': props.inline,
     'inline-block': props.inlineBlock,

package/components/TextArea.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, withDefaults } from 'vue'
+import { computed } from 'vue'
 
 interface Props {
   modelValue?: string
@@ -18,6 +18,12 @@ interface Props {
   bordered?: boolean
   ghost?: boolean
   disabled?: boolean
+
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
   type: 'text',
@@ -36,6 +42,12 @@ const classes = computed(() => {
 
     'textarea-bordered': props.bordered,
     'textarea-ghost': props.ghost,
+
+    'textarea-lg': props.lg || props.size === 'lg',
+    'textarea-md': props.md || props.size === 'md',
+    'textarea-sm': props.sm || props.size === 'sm',
+    'textarea-xs': props.xs || props.size === 'xs',
+
   }
 })
 </script>

package/components/TextInput.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, withDefaults } from 'vue'
+import { computed } from 'vue'
 
 interface Props {
   modelValue?: string | number
   placeholder?: string
-  type?: 'text' | 'phone' | 'email' | 'search' | 'password'
+  type?: 'text' | 'phone' | 'email' | 'search' | 'password' | 'number'
+  join?: boolean
 
   color?: string
   primary?: boolean
@@ -32,6 +33,8 @@ defineEmits(['update:modelValue'])
 
 const classes = computed(() => {
   return {
+    'join-item': props.join,
+
     'input-primary': props.primary || props.color === 'primary',
     'input-secondary': props.secondary || props.color === 'secondary',
     'input-accent': props.accent || props.color === 'accent',

package/components/Toggle.vue

@@ -3,11 +3,17 @@ import { computed } from 'vue'
 
 interface Props {
   modelValue?: any
+  disabled?: boolean
 
   color?: string
+  neutral?: boolean
   primary?: boolean
   secondary?: boolean
   accent?: boolean
+  success?: boolean
+  info?: boolean
+  warning?: boolean
+  error?: boolean
 
   size?: string
   xs?: boolean
@@ -19,11 +25,16 @@ const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue'])
 
 const classes = computed(() => {
-  const { color, primary, secondary, accent, size, xs, sm, md, lg } = props
+  const { color, neutral, primary, secondary, accent, success, info, warning, error, size, xs, sm, md, lg } = props
   return {
+    'toggle-neutral': neutral || color === 'neutral',
     'toggle-primary': primary || color === 'primary',
     'toggle-secondary': secondary || color === 'secondary',
     'toggle-accent': accent || color === 'accent',
+    'toggle-success': success || color === 'success',
+    'toggle-info': info || color === 'info',
+    'toggle-warning': warning || color === 'warning',
+    'toggle-error': error || color === 'error',
     'toggle-xs': xs || size === 'xs',
     'toggle-sm': sm || size === 'sm',
     'toggle-md': md || size === 'md',
@@ -43,6 +54,7 @@ const currentValue = computed({
     type="checkbox"
     v-bind="$attrs"
     class="toggle"
+    :disabled="disabled"
     :class="classes"
   >
 </template>

package/components/content/Badge.ts

@@ -0,0 +1,3 @@
+import Badge from '../../components/Badge.vue'
+
+export default Badge

package/components/content/ColorBadge.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const props = defineProps<{
+  color: string
+}>()
+
+const classes = computed(() => {
+  return {
+    'bg-primary-content text-primary': props.color === 'primary-content',
+    'bg-secondary-content text-secondary': props.color === 'secondary-content',
+    'bg-neutral-content text-neutral': props.color === 'neutral-content',
+    'bg-accent-content text-accent': props.color === 'accent-content',
+    'bg-info-content text-info': props.color === 'info-content',
+    'bg-success-content text-success': props.color === 'success-content',
+    'bg-warning-content text-warning': props.color === 'warning-content',
+    'bg-error-content text-error': props.color === 'error-content',
+  }
+})
+</script>
+
+<template>
+  <Badge :color="color" class="whitespace-nowrap rounded-[0.375rem] px-1 h-[1.5rem] font-mono" :class="classes">
+    {{ color }}
+  </Badge>
+</template>

package/components/{DemoExample.vue → content/DemoExample.vue}

@@ -15,7 +15,7 @@ const classes = computed(() => {
 
 <template>
   <div
-    class="flex flex-row flex-wrap items-center mt-4 border-4 demo-example rounded-t-xl border-base-200 xl:max-w-3/4"
+    class="demo-example flex flex-row items-start mt-4 border-4 rounded-t-xl border-base-200 lg:max-w-[calc(100vw-390px)]"
     :class="classes"
   >
     <slot />

package/components/content/DemoExampleResponsive.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  iframeClasses: {
+    type: String,
+    default: '',
+  },
+  allowProse: Boolean,
+})
+const { theme } = useTheme()
+
+const iframe = ref()
+const { pressed } = useMousePressed()
+const { x: mouseX } = useMouse()
+const { width } = useElementBounding(iframe)
+
+const referenceX = ref(0)
+const _width = ref('100%')
+
+watch(pressed, (val) => {
+  if (val)
+    referenceX.value = mouseX.value
+})
+watch(mouseX, (val) => {
+  if (pressed.value) {
+    const delta = val - referenceX.value
+    referenceX.value = mouseX.value
+    _width.value = `${width.value + (delta * 1.2)}px`
+  }
+})
+
+const classes = computed(() => {
+  return `${props.iframeClasses} not-prose ${pressed ? 'pointer-events-none' : ''}`
+})
+</script>
+
+<template>
+  <div
+    class="flex flex-row flex-wrap items-center mt-4 border-4 rounded-t-xl border-base-200 overflow-hidden"
+    :class="classes"
+  >
+    <div class="flex flex-row w-full bg-black/50">
+      <IframeRenderer
+        ref="iframe"
+        :style="{ width: _width }"
+        class="w-full min-h-full"
+        :classes="classes"
+        :iframe-classes="iframeClasses"
+        :theme="theme"
+      >
+        <slot />
+      </IframeRenderer>
+      <Tooltip draggable primary tip="Drag to Resize" left class="flex items-center justify-center bg-primary cursor-move">
+        <Icon name="radix-icons:drag-handle-vertical" class="text-primary-content" />
+      </Tooltip>
+    </div>
+  </div>
+</template>