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

package/app/components/MenuItem.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+  disabled?: boolean
+}>()
+</script>
+
+<template>
+  <li class="menu-item" :class="{ 'menu-disabled': disabled }">
+    <slot />
+  </li>
+</template>
+
+<style lang="postcss">
+/*
+  Allow adding .active class to the MenuItem element.
+  DaisyUI only supports adding it to the `a` element.
+*/
+.menu-item.menu-active > a, .menu-item.menu-active > span {
+  background-color: hsl(var(--n) / var(--tw-bg-opacity));
+  color: hsl(var(--nc) / var(--tw-text-opacity));
+}
+.menu-item.menu-disabled > a, .menu-item.menu-disabled > span {
+  background-color: var(--n)
+}
+
+/* Fix padding when putting a Dropdown inside of a menu */
+.menu-item > .floating-dropdown {
+  padding: 0;
+}
+.menu-item > .floating-dropdown > .dropdown-button,
+.menu-item > .floating-dropdown > .dropdown-target {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem
+}
+</style>

package/app/components/MenuTitle.vue

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

package/app/components/MockupBrowser.vue

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

package/app/components/MockupBrowserToolbar.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="mockup-browser-toolbar">
+    <slot />
+  </div>
+</template>

package/app/components/MockupCode.vue

@@ -0,0 +1,4 @@
+<template>
+  <!-- eslint-disable vue/singleline-html-element-content-newline -->
+  <div class="mockup-code"><slot /></div>
+</template>

package/app/components/MockupPhone.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="mockup-phone">
+    <div class="camera" />
+    <div class="display">
+      <slot />
+    </div>
+  </div>
+</template>

package/app/components/MockupWindow.vue

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

package/app/components/Modal.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+const props = withDefaults(defineProps<{
+  modelValue?: boolean
+  closeOnClickOutside?: boolean
+  placement?: 'top' | 'bottom' | 'start' | 'end'
+  top?: boolean
+  bottom?: boolean
+  start?: boolean
+  end?: boolean
+}>(), {
+  closeOnClickOutside: true,
+})
+const emit = defineEmits(['update:modelValue'])
+
+const is = 'div'
+
+// defineModel 'open'
+const _isOpen = ref(props.modelValue)
+watch(() => props.modelValue, (val) => {
+  _isOpen.value = val
+})
+const isOpen = computed({
+  get: () => _isOpen.value,
+  set: (val) => {
+    _isOpen.value = val
+    if (props.modelValue !== val) {
+      emit('update:modelValue', val)
+    }
+  },
+})
+
+function handleClick() {
+  if (props.closeOnClickOutside) {
+    isOpen.value = false
+  }
+}
+</script>
+
+<template>
+  <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,
+      'modal-start': props.start,
+      'modal-end': props.end,
+    }"
+    @click.self="handleClick"
+  >
+    <slot />
+  </Component>
+</template>

package/app/components/ModalAction.vue

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

package/app/components/ModalBox.vue

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

package/app/components/NavButton.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const { active = false, disabled = false } = defineProps<{
+  active?: boolean
+  disabled?: boolean
+}>()
+</script>
+
+<template>
+  <button class="nav-button" :class="{ active, disabled }">
+    <slot />
+  </button>
+</template>

package/app/components/Navbar.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const { is = 'div', glass = false } = defineProps<{
+  is?: any
+  glass?: boolean
+}>()
+</script>
+
+<template>
+  <component :is="is" class="navbar" :class="{ glass }">
+    <slot />
+  </component>
+</template>

package/app/components/NavbarCenter.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const { is = 'div' } = defineProps<{
+  is?: any
+}>()
+</script>
+
+<template>
+  <component :is="is" class="navbar-center">
+    <slot />
+  </component>
+</template>

package/app/components/NavbarEnd.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const { is = 'div' } = defineProps<{
+  is?: any
+}>()
+</script>
+
+<template>
+  <component :is="is" class="navbar-end">
+    <slot />
+  </component>
+</template>

package/app/components/NavbarStart.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const { is = 'div' } = defineProps<{
+  is?: any
+}>()
+</script>
+
+<template>
+  <component :is="is" class="navbar-start">
+    <slot />
+  </component>
+</template>

package/app/components/Progress.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const { value = 0, max = 100, color, neutral, primary, secondary, accent, success, info, warning, error } = defineProps<{
+  value?: string | number
+  max?: string | number
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  success?: boolean
+  info?: boolean
+  warning?: boolean
+  error?: boolean
+}>()
+</script>
+
+<template>
+  <progress
+    :value="value"
+    :max="max"
+    class="progress"
+    :class="{
+      'progress-neutral': neutral || color === 'neutral',
+      'progress-primary': primary || color === 'primary',
+      'progress-secondary': secondary || color === 'secondary',
+      'progress-accent': accent || color === 'accent',
+      'progress-success': success || color === 'success',
+      'progress-info': info || color === 'info',
+      'progress-warning': warning || color === 'warning',
+      'progress-error': error || color === 'error',
+    }"
+  />
+</template>

package/app/components/Prose.vue

@@ -0,0 +1,32 @@
+<template>
+  <article class="prose daisy-prose">
+    <slot />
+  </article>
+</template>
+
+<style lang="postcss">
+.prose.full-width {
+  width: 100%;
+  max-width: 100%;
+}
+.prose.daisy-prose code:not(pre code) {
+  @apply bg-base-300;
+}
+.prose .link-primary {
+  @apply text-primary;
+}
+.prose .link-secondary {
+  @apply text-secondary;
+}
+.prose .link-neutral {
+  @apply text-neutral;
+}
+.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/app/components/RadialProgress.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+defineProps<{
+  value: number | string
+  size?: string
+  thickness?: string
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="radial-progress"
+    :class="{
+      'text-neutral': (neutral || color === 'neutral'),
+      'text-primary': (primary || color === 'primary'),
+      'text-secondary': (secondary || color === 'secondary'),
+      'text-accent': (accent || color === 'accent'),
+      'text-info': (info || color === 'info'),
+      'text-success': (success || color === 'success'),
+      'text-warning': (warning || color === 'warning'),
+      'text-error': (error || color === 'error'),
+    }"
+    :style="`--value:${value}; --size:${size || '4rem'}; --thickness:${thickness || 'calc(var(--size) / 10)'};`"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/Radio.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+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
+  sm?: boolean
+  md?: boolean
+  lg?: boolean
+  xl?: boolean
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const radioGroup: any = inject('radio-group', null)
+
+const currentValue = computed({
+  get() {
+    return radioGroup ? radioGroup.currentValue : props.modelValue
+  },
+  set(val: any) {
+    if (radioGroup) {
+      radioGroup.currentValue = val
+    }
+    emit('update:modelValue', val)
+  },
+})
+</script>
+
+<template>
+  <input
+    v-model="currentValue"
+    type="radio"
+    v-bind="$attrs"
+    class="radio"
+    :class="{
+      'radio-neutral': props.neutral || props.color === 'neutral',
+      'radio-primary': props.primary || props.color === 'primary',
+      'radio-secondary': props.secondary || props.color === 'secondary',
+      'radio-accent': props.accent || props.color === 'accent',
+      'radio-success': props.success || props.color === 'success',
+      'radio-warning': props.warning || props.color === 'warning',
+      'radio-info': props.info || props.color === 'info',
+      'radio-error': props.error || props.color === 'error',
+      'radio-xs': props.xs || props.size === 'xs',
+      'radio-sm': props.sm || props.size === 'sm',
+      'radio-md': props.md || props.size === 'md',
+      'radio-lg': props.lg || props.size === 'lg',
+      'radio-xl': props.xl || props.size === 'xl',
+    }"
+    :disabled="props.disabled"
+    :value="props.value"
+  >
+</template>

package/app/components/RadioGroup.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed, provide, reactive } from 'vue';
+
+const props = defineProps<{
+  modelValue?: any
+  name: string
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  success?: boolean
+  warning?: boolean
+  info?: boolean
+  error?: boolean
+
+  size?: string
+  xs?: boolean
+  sm?: boolean
+  md?: boolean
+  lg?: boolean
+  xl?: boolean
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const currentValue = computed({
+  get: () => {
+    return props.modelValue
+  },
+  set: (val) => {
+    emit('update:modelValue', val)
+  },
+})
+
+const state = reactive({
+  currentValue,
+  props,
+})
+provide('radio-group', state)
+</script>
+
+<template>
+  <div class="radio-group">
+    <slot />
+  </div>
+</template>

package/app/components/Range.vue

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

package/app/components/RangeMeasure.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+  modelValue?: number | string
+  min?: number | string
+  max?: number | string
+  step?: 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?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+})
+defineEmits(['update:modelValue'])
+
+const values = computed(() => {
+  const vals = []
+  for (let index = Number.parseInt(props.min as string); index < Number.parseInt(props.max as string) + 1; index++) {
+    vals.push({
+      value: index,
+      isVisible: index % Number.parseInt(props.step as string) === 0,
+    })
+  }
+  return vals
+})
+// const count = computed(() => Number.parseInt(props.max as string) - Number.parseInt(props.min as string))
+</script>
+
+<template>
+  <div
+    class="flex justify-between select-none"
+    :class="{
+      '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-xl': xl || size === 'xl',
+      'text-lg': lg || size === 'lg',
+      'text-md': md || size === 'md',
+      'text-sm': sm || size === 'sm',
+      'text-xs': xs || size === 'xs',
+      'opacity-50': disabled,
+    }"
+  >
+    <RangeMeasureTick
+      v-for="tick in values"
+      :key="tick.value"
+      :tick="tick.value"
+      :model-value="modelValue"
+      :numbered="numbered"
+      :as-button="asButtons"
+      :is-hidden="!tick.isVisible"
+      :disabled="disabled"
+      @update:model-value="(val) => !disabled && $emit('update:modelValue', val)"
+    >
+      {{ numbered ? tick : '|' }}
+    </RangeMeasureTick>
+  </div>
+</template>

package/app/components/RangeMeasureTick.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useTimeoutFn } from '@vueuse/core';
+import { computed, watch } from 'vue';
+
+const props = defineProps<{
+  tick: number
+  modelValue?: number | string
+  numbered?: boolean
+  asButton?: boolean
+  isHidden?: boolean
+  disabled?: boolean
+}>()
+defineEmits(['update:modelValue'])
+
+const hasChanged = ref(false)
+const { isPending, start, stop } = useTimeoutFn(() => {
+  hasChanged.value = false
+}, 1000)
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      start()
+      hasChanged.value = true
+    }
+    else if (!isPending.value) {
+      stop()
+    }
+  },
+)
+
+// eslint-disable-next-line eqeqeq
+const isCurrent = computed(() => props.modelValue == props.tick)
+</script>
+
+<template>
+  <Button
+    v-if="asButton && !isHidden"
+    xs
+    :ghost="!isCurrent"
+    circle
+    :class="{
+      'font-bold': isCurrent,
+      'opacity-50': props.disabled,
+      'cursor-pointer': !props.disabled,
+      'cursor-not-allowed': props.disabled,
+    }"
+    :disabled="disabled"
+    @click="$emit('update:modelValue', tick)"
+  >
+    {{ numbered ? tick : '|' }}
+  </Button>
+  <Tooltip
+    v-else
+    :tip="tick"
+    :open="hasChanged && isCurrent && !disabled"
+    position="bottom"
+    :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">
+      {{ numbered ? tick : '|' }}
+    </Text>
+  </Tooltip>
+</template>