daisy-ui-kit 0.4.4

package/components/Code.vue

@@ -0,0 +1,91 @@
+<script>
+import Prism from 'prismjs'
+import 'prismjs/themes/prism-okaidia.css'
+import { useClipboard } from '@vueuse/core'
+import { computed } from 'vue'
+
+export default {
+  name: 'Code',
+  props: {
+    language: {
+      type: String,
+      default: 'javascript',
+    },
+  },
+  setup(props, context) {
+    const nuxtApp = useNuxtApp()
+
+    const source = ref(null)
+    const lang = computed(() => {
+      if (props.language === 'vue') return 'html'
+      else return props.language
+    })
+    const languageClass = computed(() => `language-${lang.value}`)
+    const { text, copy, copied, isSupported } = useClipboard({ source })
+
+    onMounted(() => {
+      if (!nuxtApp.ssrContext) {
+        setTimeout(() => {
+          Prism.highlightAllUnder(source.value)
+        }, 0)
+      }
+    })
+    onBeforeUpdate(() => {
+      if (typeof context.slots.default[0] === 'string') {
+        const newText = context.slots.default[0].replace(
+          /^[\r\n\s]*|[\r\n\s]*$/g,
+          '',
+        )
+        context.el.querySelector('code').textContent = newText
+        Prism.highlightAllUnder(source.value)
+      }
+    })
+
+    const doCopy = () => {
+      copy(source.value.innerText)
+    }
+
+    return { source, languageClass, text, copy, copied, isSupported, doCopy }
+  },
+}
+</script>
+
+<template>
+  <div class="relative mockup-code">
+    <div class="absolute flex flex-row items-center top-1 right-1">
+      <div v-if="copied" class="pr-2 text-sm">
+        copied
+      </div>
+      <Button sm @click="doCopy">
+        copy
+      </Button>
+    </div>
+    <ClientOnly>
+      <pre
+        ref="source"
+        class="whitespace-pre-wrap daisy-code-highlight"
+        :class="languageClass"
+      ><code><slot /></code></pre>
+
+      <template #fallback>
+        <pre
+          class="whitespace-pre-wrap daisy-code-highlight"
+        ><code><slot /></code></pre>
+      </template>
+    </ClientOnly>
+  </div>
+</template>
+
+<style>
+.mockup-code .daisy-code-highlight {
+  margin-left: 0 !important;
+  background: none;
+  border: none;
+  box-shadow: none;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.mockup-code pre.daisy-code-highlight:before {
+  margin: 0 !important;
+}
+</style>

package/components/CodePreview.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const slotWrapper = ref(null)
+const innerHtml = computed(() => {
+  if (slotWrapper.value)
+    return slotWrapper.value.innerHtml
+  else
+    return ''
+})
+
+onMounted(() => {
+  if (!import.meta.env.SSR)
+    (window as any).innerHtml = innerHtml
+})
+</script>
+
+<template>
+  <div>
+    <div v-html="innerHtml" />
+
+    <div class="hidden">
+      <div ref="slotWrapper">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/components/CodeWrapper.vue

@@ -0,0 +1,10 @@
+<template>
+  <Collapse arrow toggle class="mb-8 rounded-b-xl bg-neutral/20 not-prose">
+    <CollapseTitle class="text-lg font-medium">
+      Code Example
+    </CollapseTitle>
+    <CollapseContent>
+      <slot />
+    </CollapseContent>
+  </Collapse>
+</template>

package/components/Collapse.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  style?: 'arrow' | 'plus'
+  arrow?: boolean
+  plus?: boolean
+
+  open?: boolean
+  closed?: boolean
+
+  toggle?: boolean
+}
+const props = defineProps<Props>()
+
+const classes = computed(() => {
+  const { style, arrow, plus, open, closed } = props
+  return {
+    'collapse-arrow': arrow || style === 'arrow',
+    'carousel-plus': plus || style === 'plus',
+    'carousel-open': open && !closed,
+    'carousel-closed': closed,
+  }
+})
+</script>
+
+<template>
+  <div tabindex="0" class="collapse" :class="classes">
+    <input v-if="toggle" type="checkbox">
+
+    <slot />
+  </div>
+</template>

package/components/CollapseContent.vue

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

package/components/CollapseTitle.vue

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

package/components/Countdown.vue

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

package/components/CountdownTimers.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { useIntervalFn } from '@vueuse/core'
+import { computed } from 'vue'
+
+interface Props {
+  durationInSeconds?: number
+  untilDate?: Date
+  interval?: number
+}
+const props = defineProps<Props>()
+
+const calculateDate = () => props.untilDate || new Date(Date.now() + props.durationInSeconds * 1000)
+const targetDate = ref<Date>(calculateDate())
+watch(
+  () => props.durationInSeconds,
+  () => {
+    targetDate.value = calculateDate()
+  },
+  { immediate: true },
+)
+
+// The target date
+const calcTimeLeft = () => {
+  const remaining = targetDate.value.getTime() - Date.now()
+  return remaining < 0 ? 0 : remaining
+}
+const timeLeft = ref(calcTimeLeft())
+useIntervalFn(() => {
+  timeLeft.value = calcTimeLeft()
+}, 1000)
+
+const totalSeconds = computed(() => Math.round(timeLeft.value / 1000))
+const totalMinutes = computed(() => Math.floor(timeLeft.value / 1000 / 60))
+const totalHours = computed(() => Math.floor(timeLeft.value / 1000 / 60 / 60))
+const totalDays = computed(() => Math.floor(timeLeft.value / 1000 / 60 / 60 / 24))
+const totalWeeks = computed(() => Math.floor(timeLeft.value / 1000 / 60 / 60 / 24 / 7))
+const totalMonths = computed(() => {
+  const today = new Date()
+  let diffMonths = (targetDate.value.getFullYear() - today.getFullYear()) * 12
+  diffMonths -= targetDate.value.getMonth()
+  diffMonths += today.getMonth()
+  return diffMonths
+})
+const split = computed(() => {
+  const days = totalDays.value
+  const hours = totalHours.value - days * 24
+  const minutes = totalMinutes.value - hours * 60
+  const seconds = totalSeconds.value - totalMinutes.value * 60
+  return { days, hours, minutes, seconds }
+})
+</script>
+
+<template>
+  <slot
+    v-bind="{
+      totalSeconds,
+      totalMinutes,
+      totalHours,
+      totalDays,
+      totalWeeks,
+      totalMonths,
+      targetDate,
+      split,
+    }"
+  />
+</template>

package/components/Counter.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  value: number
+  is?: string | Function
+}
+const props = defineProps<Props>()
+
+const tag = computed(() => props.is || 'span')
+</script>
+
+<template>
+  <component :is="tag" v-bind="$attrs" :style="`--value:${value};`" />
+</template>

package/components/Crumb.vue

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

package/components/DarkToggle.vue

@@ -0,0 +1,11 @@
+<script setup lang='ts'>
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+</script>
+
+<template>
+  <button class="!outline-none" @click="toggleDark()">
+    <div v-if="isDark" class="i-carbon-moon" />
+    <div v-else class="i-carbon-sun" />
+  </button>
+</template>

package/components/DemoElement.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  tag: String,
+  props: Object,
+  multiline: Boolean,
+})
+const propsString = computed(() => {
+  const string = Object.keys(props.props).reduce((propString: string, key: string, index: number) => {
+    const value = props.props[key]
+    const betweenPropSpacing = props.multiline ? '' : ' '
+    let append = `${props.multiline ? '\n  ' : ''}`
+    if (value === true) append += `${betweenPropSpacing}${key}`
+    else if (value === false) append += `${betweenPropSpacing}:${key}="false"`
+    return propString += append
+  }, '')
+  return `${string}${props.multiline ? '\n' : ''}`
+})
+</script>
+
+<template>
+  <div class="font-mono">
+    &lt;<span class="text-accent">{{ tag }}</span><span class="span-pre">{{ propsString }}</span>&gt;<slot />&lt;/<span class="text-accent">{{ tag }}</span>&gt;
+  </div>
+</template>
+
+<style>
+.span-pre {
+  white-space: pre-wrap;
+}
+</style>

package/components/DemoExample.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  noPadding: Boolean,
+  allowProse: Boolean,
+})
+const classes = computed(() => {
+  return {
+    'p-12': !props.noPadding,
+    'not-prose': !props.allowProse,
+  }
+})
+</script>
+
+<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="classes"
+  >
+    <slot />
+  </div>
+</template>

package/components/Divider.vue

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

package/components/Drawer.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+interface DrawerState {
+  isDrawerOpen: boolean
+  openDrawer: Function
+  closeDrawer: Function
+  toggleDrawer: Function
+}
+
+const drawerState: DrawerState = inject('drawerState')
+</script>
+
+<template>
+  <div class="drawer-side">
+    <div class="drawer-overlay" @click="() => drawerState.closeDrawer()" />
+    <slot v-bind="drawerState" />
+  </div>
+</template>

package/components/DrawerLayout.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, defineProps, reactive } from 'vue'
+
+const props = defineProps({
+  right: Boolean,
+  mobile: Boolean,
+})
+const drawerState = reactive({
+  isDrawerOpen: false,
+  openDrawer() {
+    drawerState.isDrawerOpen = true
+  },
+  closeDrawer() {
+    drawerState.isDrawerOpen = false
+  },
+  toggleDrawer() {
+    drawerState.isDrawerOpen = !drawerState.isDrawerOpen
+  },
+})
+provide('drawerState', drawerState)
+
+const classes = computed(() => {
+  return {
+    'drawer-end': props.right,
+    'drawer-mobile': props.mobile,
+  }
+})
+</script>
+
+<template>
+  <div class="drawer" :class="classes">
+    <input v-model="drawerState.isDrawerOpen" type="checkbox" class="drawer-toggle">
+    <slot v-bind="drawerState" />
+  </div>
+</template>

package/components/DrawerLayoutContent.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const drawerState = inject('drawerState')
+</script>
+
+<template>
+  <div class="drawer-content">
+    <slot v-bind="drawerState" />
+  </div>
+</template>

package/components/Dropdown.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+
+interface Props {
+  top?: boolean
+  right?: boolean
+  left?: boolean
+  end?: boolean
+  hover?: boolean
+  open?: boolean
+}
+
+const props = defineProps<Props>()
+const classes = computed(() => {
+  return {
+    'dropdown-top': props.top,
+    'dropdown-left': props.left,
+    'dropdown-right': props.right,
+    'dropdown-end': props.end,
+    'dropdown-hover': props.hover,
+    'dropdown-open': props.open,
+  }
+})
+</script>
+
+<template>
+  <div class="dropdown" :class="classes">
+    <slot />
+  </div>
+</template>

package/components/DropdownContent.vue

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

package/components/Flex.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+
+interface Props {
+  is?: string | Object | Function
+
+  // https://tailwindcss.com/docs/flex
+  flex?: boolean
+
+  flex1?: boolean
+  flexAuto?: boolean
+  flexInitial?: boolean
+  none?: boolean
+
+  grow?: boolean
+
+  // https://tailwindcss.com/docs/flex-direction
+  direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse'
+  row?: boolean
+  col?: boolean
+  reverse?: boolean
+
+  // https://tailwindcss.com/docs/flex-wrap
+  wrap?: boolean
+  nowrap?: boolean
+  wrapReverse?: boolean
+
+  // https://tailwindcss.com/docs/align-items
+  alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
+  itemsStart?: boolean
+  itemsEnd?: boolean
+  itemsCenter?: boolean
+  itemsBaseline?: boolean
+  itemsStretch?: boolean
+
+  // https://tailwindcss.com/docs/align-content
+  alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
+  contentStart?: boolean
+  contentEnd?: boolean
+  contentCenter?: boolean
+  contentBetween?: boolean
+  contentAround?: boolean
+  contentEvenly?: boolean
+
+  // https://tailwindcss.com/docs/align-self
+  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline'
+  selfAuto?: boolean
+  selfStart?: boolean
+  selfEnd?: boolean
+  selfCenter?: boolean
+  selfStretch?: boolean
+  selfBaseline?: boolean
+
+  // https://tailwindcss.com/docs/justify-content
+  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
+  justifyStart?: boolean
+  justifyEnd?: boolean
+  justifyCenter?: boolean
+  justifyBetween?: boolean
+  justifyAround?: boolean
+  justifyEvenly?: boolean
+
+  // https://tailwindcss.com/docs/justify-items
+  justifyItems?: 'start' | 'end' | 'center' | 'stretch'
+  justifyItemsStart?: boolean
+  justifyItemsEnd?: boolean
+  justifyItemsCenter?: boolean
+  justifyItemsStretch?: boolean
+
+  // https://tailwindcss.com/docs/justify-self
+  justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch'
+  justifySelfAuto?: boolean
+  justifySelfStart?: boolean
+  justifySelfEnd?: boolean
+  justifySelfCenter?: boolean
+  justifySelfStretch?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  is: 'div',
+  flex: true,
+})
+
+const classes = computed(() => {
+  return {
+    'flex-1': props.flex1,
+    'flex-auto': props.flexAuto,
+    'flex-initial': props.flexInitial,
+    'flex-none': props.none,
+
+    'flex-grow': props.grow,
+
+    'flex-row': props.direction === 'row' || props.row,
+    'flex-col': props.direction === 'col' || props.col,
+    'flex-row-reverse': props.direction === 'row-reverse' || (props.row && props.reverse),
+    'flex-col-reverse': props.direction === 'col-reverse' || (props.col && props.reverse),
+
+    'flex-wrap': props.wrap,
+    'flex-wrap-reverse': props.wrapReverse,
+    'flex-nowrap': props.nowrap,
+
+    'content-start': props.alignContent === 'start' || props.contentStart,
+    'content-end': props.alignContent === 'end' || props.contentEnd,
+    'content-center': props.alignContent === 'center' || props.contentCenter,
+    'content-between': props.alignContent === 'between' || props.contentBetween,
+    'content-around': props.alignContent === 'around' || props.contentAround,
+    'content-evenly': props.alignContent === 'evenly' || props.contentEvenly,
+
+    'items-start': props.alignItems === 'start' || props.itemsStart,
+    'items-end': props.alignItems === 'end' || props.itemsEnd,
+    'items-center': props.alignItems === 'center' || props.itemsCenter,
+    'items-baseline': props.alignItems === 'baseline' || props.itemsBaseline,
+    'items-stretch': props.alignItems === 'stretch' || props.itemsStretch,
+
+    'self-auto': props.alignSelf === 'auto' || props.selfAuto,
+    'self-start': props.alignSelf === 'start' || props.selfStart,
+    'self-end': props.alignSelf === 'end' || props.selfEnd,
+    'self-center': props.alignSelf === 'center' || props.selfCenter,
+    'self-stretch': props.alignSelf === 'stretch' || props.selfStretch,
+    'self-baseline': props.alignSelf === 'baseline' || props.selfBaseline,
+
+    'justify-start': props.justify === 'start' || props.justifyStart,
+    'justify-end': props.justify === 'end' || props.justifyEnd,
+    'justify-center': props.justify === 'center' || props.justifyCenter,
+    'justify-between': props.justify === 'between' || props.justifyBetween,
+    'justify-around': props.justify === 'around' || props.justifyAround,
+    'justify-evenly': props.justify === 'evenly' || props.justifyEvenly,
+
+    'justify-items-start': props.justifyItems === 'start' || props.justifyItemsStart,
+    'justify-items-end': props.justifyItems === 'end' || props.justifyItemsEnd,
+    'justify-items-center': props.justifyItems === 'center' || props.justifyItemsCenter,
+    'justify-items-stretch': props.justifyItems === 'stretch' || props.justifyItemsStretch,
+
+    'justify-self-auto': props.justifySelf === 'auto' || props.justifySelfAuto,
+    'justify-self-start': props.justifySelf === 'start' || props.justifySelfStart,
+    'justify-self-end': props.justifySelf === 'end' || props.justifySelfEnd,
+    'justify-self-center': props.justifySelf === 'center' || props.justifySelfCenter,
+    'justify-self-stretch': props.justifySelf === 'stretch' || props.justifySelfStretch,
+  }
+})
+</script>
+
+<template>
+  <component :is="is" class="flex" :class="classes">
+    <slot />
+  </component>
+</template>