daisy-ui-kit 5.0.0-pre.4 → 5.0.0-pre.6

package/app/components/Tabs.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { provide } from 'vue'
+
+const { name } = defineProps<{
+  is?: any
+  name: string
+
+  variant?: 'box' | 'border' | 'lift'
+  box?: boolean
+  border?: boolean
+  lift?: boolean
+
+  placement?: 'top' | 'bottom'
+  top?: boolean
+  bottom?: boolean
+
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>()
+
+const currentTab = defineModel<string>('currentTab')
+
+const tabManager = {
+  name,
+  currentTab,
+  tabs: [],
+}
+provide('tabManager', tabManager)
+</script>
+
+<template>
+  <div
+    class="tabs"
+    :class="{
+      'tabs-box': variant === 'box' || box,
+      'tabs-border': variant === 'border' || border,
+      'tabs-lift': variant === 'lift' || lift,
+      'tabs-top': placement === 'top' || top,
+      'tabs-bottom': placement === 'bottom' || bottom,
+      'tabs-xl': size === 'xl' || xl,
+      'tabs-lg': size === 'lg' || lg,
+      'tabs-md': size === 'md' || md,
+      'tabs-sm': size === 'sm' || sm,
+      'tabs-xs': size === 'xs' || xs,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/Text.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+const props = defineProps<{
+  is?: string
+  join?: boolean
+
+  block?: boolean
+  inline?: boolean
+  inlineBlock?: boolean
+  label?: boolean
+
+  color?: | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'primary-content' | 'secondary-content' | 'neutral-content' | 'accent-content' | 'info-content' | 'success-content' | 'warning-content' | 'error-content'
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+  neutralContent?: boolean
+  primaryContent?: boolean
+  secondaryContent?: boolean
+  accentContent?: boolean
+  infoContent?: boolean
+  successContent?: boolean
+  warningContent?: boolean
+  errorContent?: boolean
+
+  size?: | '9xl' | '8xl' | '7xl' | '6xl' | '5xl' | '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+
+  align?: 'left' | 'center' | 'right' | 'justify'
+  left?: boolean
+  center?: boolean
+  right?: boolean
+  justify?: boolean
+
+  case?: 'upper' | 'lower' | 'capitalize' | 'normal'
+  uppercase?: boolean
+  lowercase?: boolean
+  capitalize?: boolean
+  normalCase?: boolean
+
+  font?: 'sans' | 'serif' | 'mono'
+  sans?: boolean
+  serif?: boolean
+  mono?: boolean
+
+  weight?: | 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black'
+  thin?: boolean
+  extralight?: boolean
+  light?: boolean
+  normal?: boolean
+  medium?: boolean
+  semibold?: boolean
+  bold?: boolean
+  extrabold?: boolean
+  black?: boolean
+}>()
+</script>
+
+<template>
+  <component
+    :is="is || 'span'"
+    v-bind="label ? { 'data-role': 'label' } : {}"
+    :class="{
+      'join-item': join,
+
+      'block': block,
+      'inline': inline,
+      'inline-block': inlineBlock,
+      'label': label,
+
+      'text-primary': primary || color === 'primary',
+      'text-primary-content':
+        primaryContent || color === 'primary-content',
+      'text-secondary': secondary || color === 'secondary',
+      'text-secondary-content':
+        secondaryContent || color === 'secondary-content',
+      'text-neutral': neutral || color === 'neutral',
+      'text-neutral-content':
+        neutralContent || color === 'neutral-content',
+      'text-accent': accent || color === 'accent',
+      'text-accent-content':
+        accentContent || color === 'accent-content',
+      'text-info': info || color === 'info',
+      'text-info-content': infoContent || color === 'info-content',
+      'text-success': success || color === 'success',
+      'text-success-content':
+        successContent || color === 'success-content',
+      'text-warning': warning || color === 'warning',
+      'text-warning-content':
+        warningContent || color === 'warning-content',
+      'text-error': error || color === 'error',
+      'text-error-content': errorContent || color === 'error-content',
+
+      'text-9xl': size === '9xl',
+      'text-8xl': size === '8xl',
+      'text-7xl': size === '7xl',
+      'text-6xl': size === '6xl',
+      'text-5xl': size === '5xl',
+      'text-4xl': size === '4xl',
+      'text-3xl': size === '3xl',
+      'text-2xl': size === '2xl',
+      'text-xl': xl || size === 'xl',
+      'text-lg': lg || size === 'lg',
+      'text-md': md || size === 'md',
+      'text-sm': sm || size === 'sm',
+      'text-xs': xs || size === 'xs',
+
+      'text-left': left || align === 'left',
+      'text-center': center || align === 'center',
+      'text-right': right || align === 'right',
+      'text-justify': justify || align === 'justify',
+
+      'uppercase': uppercase || props.case === 'upper',
+      'lowercase': lowercase || props.case === 'lower',
+      'capitalize': capitalize || props.case === 'capitalize',
+      'normal-case': normalCase || props.case === 'normal',
+
+      'font-sans': sans || font === 'sans',
+      'font-serif': serif || font === 'serif',
+      'font-mono': mono || font === 'mono',
+
+      'font-thin': thin || weight === 'thin',
+      'font-extralight': extralight || weight === 'extralight',
+      'font-light': light || weight === 'light',
+      'font-normal': normal || weight === 'normal',
+      'font-medium': medium || weight === 'medium',
+      'font-semibold': semibold || weight === 'semibold',
+      'font-bold': bold || weight === 'bold',
+      'font-extrabold': extrabold || weight === 'extrabold',
+      'font-black': black || weight === 'black',
+    }"
+  >
+    <slot />
+  </component>
+</template>

package/app/components/TextArea.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  modelValue?: string
+  placeholder?: string
+  type?: 'text' | 'phone' | 'email' | 'search'
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  ghost?: boolean
+  disabled?: boolean
+  validator?: boolean
+
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>(), {
+  type: 'text',
+})
+defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <textarea
+    :value="modelValue"
+    :type="type"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    class="textarea"
+    :class="{
+      'textarea-neutral': props.neutral || props.color === 'neutral',
+      'textarea-primary': props.primary || props.color === 'primary',
+      'textarea-secondary': props.secondary || props.color === 'secondary',
+      'textarea-accent': props.accent || props.color === 'accent',
+      'textarea-info': props.info || props.color === 'info',
+      'textarea-success': props.success || props.color === 'success',
+      'textarea-warning': props.warning || props.color === 'warning',
+      'textarea-error': props.error || props.color === 'error',
+
+      'textarea-ghost': props.ghost,
+      'validator': props.validator,
+
+      'textarea-xl': props.xl || props.size === 'xl',
+      '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',
+    }"
+    @input="(event) => $emit('update:modelValue', (event.target as HTMLTextAreaElement).value)"
+  />
+</template>

package/app/components/Timeline.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  vertical?: boolean
+  horizontal?: boolean
+  compact?: boolean
+  snapIcon?: boolean
+}>()
+</script>
+
+<template>
+  <ul
+    class="timeline"
+    :class="{
+      'timeline-vertical': vertical,
+      'timeline-horizontal': horizontal,
+      'timeline-compact': compact,
+      'timeline-snap-icon': snapIcon,
+    }"
+  >
+    <slot />
+  </ul>
+</template>

package/app/components/TimelineEnd.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{ box?: boolean }>()
+</script>
+
+<template>
+  <div
+    class="timeline-end"
+    :class="{
+      'timeline-box': box,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/TimelineItem.vue

@@ -0,0 +1,5 @@
+<template>
+  <li class="timeline-item">
+    <slot />
+  </li>
+</template>

package/app/components/TimelineLine.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{
+  color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+}>()
+</script>
+
+<template>
+  <hr
+    class="timeline-line"
+    :class="{
+      'bg-neutral': neutral || color === 'neutral',
+      'bg-primary': primary || color === 'primary',
+      'bg-secondary': secondary || color === 'secondary',
+      'bg-accent': accent || color === 'accent',
+      'bg-info': info || color === 'info',
+      'bg-success': success || color === 'success',
+      'bg-warning': warning || color === 'warning',
+      'bg-error': error || color === 'error',
+    }"
+  >
+</template>

package/app/components/TimelineMiddle.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="timeline-middle">
+    <slot />
+  </div>
+</template>

package/app/components/TimelineStart.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{ box?: boolean }>()
+</script>
+
+<template>
+  <div
+    class="timeline-start" :class="{
+      'timeline-box': box,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/Toast.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{
+  hAlign?: 'start' | 'center' | 'end'
+  start?: boolean
+  center?: boolean
+  end?: boolean
+
+  vAlign?: 'top' | 'middle' | 'bottom'
+  top?: boolean
+  middle?: boolean
+  bottom?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="toast"
+    :class="{
+      'toast-start': start || hAlign === 'start',
+      'toast-center': center || hAlign === 'center',
+      'toast-end': end || hAlign === 'end',
+      'toast-top': top || vAlign === 'top',
+      'toast-middle': middle || vAlign === 'middle',
+      'toast-bottom': bottom || vAlign === 'bottom',
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/Toggle.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  modelValue?: any
+  disabled?: boolean
+  validator?: boolean
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  success?: boolean
+  info?: boolean
+  warning?: boolean
+  error?: boolean
+
+  size?: string
+  xs?: boolean
+  sm?: boolean
+  md?: boolean
+  lg?: boolean
+  xl?: boolean
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const currentValue = computed({
+  get: () => props.modelValue,
+  set: (val: string) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <input
+    v-model="currentValue"
+    type="checkbox"
+    v-bind="$attrs"
+    class="toggle"
+    :disabled="disabled"
+    :class="{
+      'validator': validator,
+      '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',
+      'toggle-lg': lg || size === 'lg',
+      'toggle-xl': xl || size === 'xl',
+    }"
+  >
+</template>

package/app/components/Tooltip.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const props = defineProps<{
+  tip?: string | number
+  open?: boolean
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  position?: 'top' | 'right' | 'bottom' | 'left'
+  top?: boolean
+  right?: boolean
+  bottom?: boolean
+  left?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    :data-tip="tip"
+    class="tooltip" :class="{
+      'tooltip-open': props.open,
+
+      'tooltip-top': props.top || props.position === 'top',
+      'tooltip-bottom': props.bottom || props.position === 'bottom',
+      'tooltip-left': props.left || props.position === 'left',
+      'tooltip-right': props.right || props.position === 'right',
+
+      'tooltip-neutral': props.neutral || props.color === 'neutral',
+      'tooltip-primary': props.primary || props.color === 'primary',
+      'tooltip-secondary': props.secondary || props.color === 'secondary',
+      'tooltip-accent': props.accent || props.color === 'accent',
+      'tooltip-info': props.info || props.color === 'info',
+      'tooltip-success': props.success || props.color === 'success',
+      'tooltip-warning': props.warning || props.color === 'warning',
+      'tooltip-error': props.error || props.color === 'error',
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/TooltipContent.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="tooltip-content">
+    <slot />
+  </div>
+</template>

package/app/components/ValidatorHint.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="validator-hint">
+    <slot />
+  </span>
+</template>

package/app/utils/drawer-utils.ts

@@ -0,0 +1,32 @@
+import { reactive } from 'vue'
+
+export interface DrawerState {
+  name: string
+  isDrawerOpen: boolean
+  openDrawer: () => void
+  closeDrawer: () => void
+  toggleDrawer: () => void
+}
+export interface Drawers {
+  [key: string]: DrawerState
+}
+
+export const drawers = reactive<Drawers>({})
+
+export function createDrawerState(name: string) {
+  const drawerState = drawers[name] || reactive<DrawerState>({
+    name,
+    isDrawerOpen: false,
+    openDrawer() {
+      drawerState.isDrawerOpen = true
+    },
+    closeDrawer() {
+      drawerState.isDrawerOpen = false
+    },
+    toggleDrawer() {
+      drawerState.isDrawerOpen = !drawerState.isDrawerOpen
+    },
+  })
+  drawers[name] = drawerState
+  return drawerState
+}

package/app/utils/random-string.ts

@@ -0,0 +1,19 @@
+/**
+ * Generate a random string of `length` characters
+ *
+ * Usage:
+ * const myString = randomString(15);  // This will give you a random string of 15 characters
+ * @param length The length of the string to generate
+ * @returns A random string of `length` characters
+ */
+export function randomString(length: number = 10): string {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  let result = ''
+
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * characters.length)
+    result += characters[randomIndex]
+  }
+
+  return result
+}

package/nuxt.js

@@ -0,0 +1,22 @@
+import { fileURLToPath } from 'node:url'
+import { defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'daisy-ui-kit',
+    configKey: 'daisy',
+  },
+  defaults: {
+    prefix: '',
+  },
+  setup(moduleOptions, nuxt) {
+    const { prefix } = moduleOptions
+
+    nuxt.hook('components:dirs', (dirs) => {
+      dirs.push({
+        path: fileURLToPath(new URL('./components', import.meta.url)),
+        prefix,
+      })
+    })
+  },
+})

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "daisy-ui-kit",
   "type": "module",
-  "version": "5.0.0-pre.4",
+  "version": "5.0.0-pre.6",
   "packageManager": "pnpm@10.9.0",
   "files": [
-    "components/*.vue",
-    "nuxt.js",
-    "utils/*"
+    "app/components/*.vue",
+    "app/utils/*",
+    "nuxt.js"
   ],
   "scripts": {
     "build": "nuxt build",
@@ -33,6 +33,7 @@
     "@nuxt/fonts": "0.11.1",
     "@nuxt/icon": "1.12.0",
     "@nuxt/image": "1.10.0",
+    "@nuxt/kit": "^3.17.1",
     "@nuxt/scripts": "0.11.6",
     "@nuxt/test-utils": "3.17.2",
     "@unhead/vue": "^2.0.8",