daisy-ui-kit 0.4.4

package/components/Indicator.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+
+interface Props {
+  is?: string
+}
+withDefaults(defineProps<Props>(), {
+  is: 'div',
+})
+</script>
+
+<template>
+  <component :is="is" class="indicator">
+    <slot />
+  </component>
+</template>

package/components/IndicatorItem.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed, defineProps, withDefaults } from 'vue'
+
+interface Props {
+  is?: string
+
+  align?: 'start' | 'center' | 'end'
+  start?: boolean
+  center?: boolean
+  end?: boolean
+
+  vAlign?: 'top' | 'middle' | 'bottom'
+  top?: boolean
+  middle?: boolean
+  bottom?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  is: 'div',
+})
+const classes = computed(() => {
+  return {
+    'indicator-start': props.start || props.align === 'start',
+    'indicator-center': props.center || props.align === 'center',
+    'indicator-end': props.end || props.align === 'end',
+
+    'indicator-top': props.top || props.vAlign === 'top',
+    'indicator-middle': props.middle || props.vAlign === 'middle',
+    'indicator-bottom': props.bottom || props.vAlign === 'bottom',
+  }
+})
+</script>
+
+<template>
+  <component :is="is" class="indicator-item" :class="classes">
+    <slot />
+  </component>
+</template>

package/components/InputGroup.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, defineProps, 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/Kbd.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+
+interface Props {
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}
+const props = defineProps<Props>()
+
+const classes = computed(() => {
+  const { size, lg, md, sm, xs } = props
+  return {
+    'kbd-lg': lg || size === 'lg',
+    'kbd-md': md || size === 'md',
+    'kbd-sm': sm || size === 'sm',
+    'kbd-xs': xs || size === 'xs',
+  }
+})
+</script>
+
+<template>
+  <kbd class="kbd" :class="classes"><slot /></kbd>
+</template>

package/components/Label.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+import Text from './Text.vue'
+
+interface Props {
+  is?: string
+}
+withDefaults(defineProps<Props>(), {
+  is: 'label',
+})
+</script>
+
+<template>
+  <Text :is="is" class="label">
+    <slot />
+  </Text>
+</template>

package/components/LabelText.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+import Text from './Text.vue'
+
+interface Props {
+  is?: string
+}
+withDefaults(defineProps<Props>(), {
+  is: 'span',
+})
+</script>
+
+<template>
+  <Text :is="is" class="label-text">
+    <slot />
+  </Text>
+</template>

package/components/LabelTextAlt.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+import Text from './Text.vue'
+
+interface Props {
+  is?: string
+}
+withDefaults(defineProps<Props>(), {
+  is: 'span',
+})
+</script>
+
+<template>
+  <Text :is="is" class="label-text-alt">
+    <slot />
+  </Text>
+</template>

package/components/Link.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed, defineProps, withDefaults } from 'vue'
+
+interface Props {
+  is?: string
+  color?: 'primary' | 'secondary' | 'accent' | 'neutral'
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  neutral?: boolean
+  hover?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  is: 'a',
+})
+
+const classes = computed(() => {
+  return {
+    '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-hover': props.hover,
+  }
+})
+</script>
+
+<template>
+  <component :is="is" class="link" :class="classes">
+    <slot />
+  </component>
+</template>

package/components/Logo.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="flex items-center flex-shrink-0 px-4">
+    <h5 class="ml-2 text-4xl font-bold whitespace-nowrap">
+      <span class="text-primary">daisy</span>UI Kit
+      <span class="text-3xl">🌼</span>
+    </h5>
+  </div>
+</template>

package/components/Mask.config.ts

@@ -0,0 +1,77 @@
+import { computed } from 'vue'
+
+export const maskProps = {
+  squircle: Boolean,
+  heart: Boolean,
+  hexagon: Boolean,
+  hexagon2: Boolean,
+  decagon: Boolean,
+  pentagon: Boolean,
+  diamond: Boolean,
+  square: Boolean,
+  circle: Boolean,
+  parallelogram: Boolean,
+  parallelogram2: Boolean,
+  parallelogram3: Boolean,
+  parallelogram4: Boolean,
+  star: Boolean,
+  star2: Boolean,
+  triangle: Boolean,
+  triangle2: Boolean,
+  triangle3: Boolean,
+  triangle4: Boolean,
+  shape: { type: String },
+}
+
+export function makeMaskClasses(props) {
+  const classes = computed(() => {
+    return {
+      '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',
+      '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',
+    }
+  })
+  return classes
+}
+
+export const shapes = [
+  'squircle',
+  'heart',
+  'hexagon',
+  'hexagon-2',
+  'decagon',
+  'pentagon',
+  'diamond',
+  'square',
+  'circle',
+  'parallelogram',
+  'parallelogram-2',
+  'parallelogram-3',
+  'parallelogram-4',
+  'star',
+  'star-2',
+  'triangle',
+  'triangle-2',
+  'triangle-3',
+  'triangle-4',
+]

package/components/Mask.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import { makeMaskClasses, maskProps } from './Mask.config'
+
+const props = defineProps({
+  ...maskProps,
+})
+const classes = makeMaskClasses(props)
+</script>
+
+<template>
+  <div class="mask" :class="[classes]">
+    <slot />
+  </div>
+</template>

package/components/Menu.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+
+interface Props {
+  vertical?: boolean
+  horizontal?: boolean
+  normal?: boolean
+  compact?: boolean
+}
+const props = defineProps<Props>()
+
+const classes = computed(() => {
+  return {
+    'menu-normal': props.normal,
+    'menu-vertical': props.vertical,
+    'menu-horizontal': props.horizontal,
+    'menu-compact': props.compact,
+  }
+})
+</script>
+
+<template>
+  <ul class="menu" :class="classes">
+    <slot />
+  </ul>
+</template>

package/components/MenuItem.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+interface Props {
+  bordered?: boolean
+  hoverBordered?: boolean
+  active?: boolean
+  disabled?: boolean
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <li class="menu-item" :class="{ active, bordered, 'hover-bordered': hoverBordered, disabled }">
+    <slot />
+  </li>
+</template>

package/components/MenuTitle.vue

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

package/components/MobileSidebar.vue

@@ -0,0 +1,92 @@
+<script setup>
+import {
+  Dialog,
+  DialogOverlay,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue'
+import {
+  XIcon,
+} from '@heroicons/vue/outline'
+
+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>
+                <XIcon class="w-6 h-6 text-base-content" aria-hidden="true" />
+              </button>
+            </div>
+          </TransitionChild>
+
+          <Logo class="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="[
+                  item.current
+                    ? 'bg-indigo-800 text-base-content'
+                    : 'text-indigo-100 hover:bg-indigo-600',
+                  'group flex items-center px-2 py-2 text-base font-medium rounded-md',
+                ]"
+              >
+                <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/MockupCode.vue

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

package/components/Modal.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+
+const clickOutsideToClose: any = inject('modalClickOutsideToClose')
+const isOpen: any = inject('isOpen')
+const handleClick = () => {
+  if (clickOutsideToClose.value)
+    isOpen.value = false
+}
+</script>
+
+<template>
+  <div class="modal" @click.self="handleClick">
+    <slot />
+  </div>
+</template>

package/components/ModalAction.vue

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

package/components/ModalBox.vue

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

package/components/ModalWrapper.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed, defineProps, 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/NavButton.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+
+interface Props {
+  active?: boolean
+  disabled?: boolean
+}
+
+const props = defineProps<Props>()
+const classes = computed(() => {
+  return {
+    active: props.active,
+    disabled: props.disabled,
+  }
+})
+</script>
+
+<template>
+  <button class="nav-button" :class="classes">
+    <slot />
+  </button>
+</template>

package/components/Navbar.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+
+interface Props {
+  is?: string | Object | Function
+  glass?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  is: 'div',
+})
+</script>
+
+<template>
+  <component :is="is" class="navbar" :class="{ glass }">
+    <slot />
+  </component>
+</template>

package/components/NavbarCenter.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+
+interface Props {
+  is?: string | Object | Function
+}
+const props = withDefaults(defineProps<Props>(), {
+  is: 'div',
+})
+</script>
+
+<template>
+  <component :is="is" class="navbar-center">
+    <slot />
+  </component>
+</template>

package/components/NavbarEnd.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+
+interface Props {
+  is?: string | Object | Function
+}
+const props = withDefaults(defineProps<Props>(), {
+  is: 'div',
+})
+</script>
+
+<template>
+  <component :is="is" class="navbar-end">
+    <slot />
+  </component>
+</template>

package/components/NavbarStart.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
+
+interface Props {
+  is?: string | Object | Function
+}
+const props = withDefaults(defineProps<Props>(), {
+  is: 'div',
+})
+</script>
+
+<template>
+  <component :is="is" class="navbar-start">
+    <slot />
+  </component>
+</template>

package/components/Phone.vue

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

package/components/Progress.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, withDefaults } from 'vue'
+
+interface Props {
+  value: any
+  max?: any
+
+  color?: string
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  success?: boolean
+  info?: boolean
+  warning?: boolean
+  error?: boolean
+}
+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
+  return {
+    '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',
+  }
+})
+</script>
+
+<template>
+  <progress
+    :value="value"
+    :max="max"
+    class="progress"
+    :class="classes"
+  />
+</template>