daisy-ui-kit 0.4.4

package/README.md

@@ -0,0 +1,80 @@
+<p align="center">
+<img src="https://user-images.githubusercontent.com/11247099/140462375-7b7ac4db-35b7-453c-8a05-13d8d20282c4.png" width="600"/>
+</p>
+
+<h2 align="center">
+<a href="https://github.com/antfu/vitesse">Vitesse</a> for Nuxt 3
+</h2><br>
+
+<pre align="center">
+🧪 Working in Progress
+</pre>
+
+<p align="center">
+<br>
+<a href="https://vitesse-nuxt3.netlify.app/">🖥 Online Preview</a>
+<br><br>
+<a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
+</p>
+
+## Features
+
+- [💚 Nuxt 3](https://v3.nuxtjs.org) - SSR, ESR, File-based routing, components auto importing, modules, etc.
+
+- ⚡️ Vite - Instant HMR
+
+- 🎨 [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine.
+
+- 😃 Use icons from any icon sets in Pure CSS, powered by [UnoCSS](https://github.com/antfu/unocss)
+
+- 🔥 The `<script setup>` syntax
+
+- 🍍 [State Management via Pinia](https://pinia.esm.dev), see [./composables/user.ts](./composables/user.ts)
+
+- 📑 [Layout system](./layouts)
+
+- 📥 APIs auto importing - for Composition API, VueUse and custom composables.
+
+- 🏎 Zero-config cloud functions and deploy
+
+- 🦾 TypeScript, of course
+
+## Plugins
+
+### Nuxt Modules
+
+- [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs.
+- [ColorMode](https://github.com/nuxt-community/color-mode-module) - dark and Light mode with auto detection made easy with Nuxt.
+- [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine.
+- [Pinia](https://pinia.esm.dev/) - intuitive, type safe, light and flexible Store for Vue.
+
+## IDE
+
+We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https://github.com/johnsoncodehk/volar) to get the best experience (You might want to disable Vetur if you have it).
+
+## Variations
+
+- [vitesse](https://github.com/antfu/vitesse) - Opinionated Vite Starter Template
+- [vitesse-lite](https://github.com/antfu/vitesse-lite) - Lightweight version of Vitesse
+- [vitesse-nuxt-bridge](https://github.com/antfu/vitesse-nuxt-bridge) - Vitesse for Nuxt 2 with Bridge
+- [vitesse-webext](https://github.com/antfu/vitesse-webext) - WebExtension Vite starter template
+
+## Try it now!
+
+### Online
+
+<a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
+
+### GitHub Template
+
+[Create a repo from this template on GitHub](https://github.com/antfu/vitesse-nuxt3/generate).
+
+### Clone to local
+
+If you prefer to do it manually with the cleaner git history
+
+```bash
+npx degit antfu/vitesse-nuxt3 my-nuxt3-app
+cd my-nuxt3-app
+pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
+```

package/components/-utils.ts

@@ -0,0 +1,41 @@
+import { computed } from 'vue'
+
+interface MakeExclusiveClassOptions {
+  props: Record<string, any>
+  prefix: string
+  prop: string
+  propList: string[]
+  defaultVal?: string
+}
+/**
+ * Creates a className for the provided `prop` name  and checks that multiple are not enabled.
+ * @param prefix will be added to all classes that do not begin with `-`. For those that do, the `-` will be stripped.
+ * @param prop
+ * @param propList
+ * @param defaultVal
+ */
+export function makeExclusiveClass({
+  props,
+  prefix,
+  prop,
+  propList,
+  defaultVal = '',
+}: MakeExclusiveClassOptions) {
+  return computed(() => {
+    const active = propList.filter((v: string) => props[v.replace('-', '')])
+    if (active.length > 1) {
+      throw new Error(
+        `only one ${prop} can be enabled at a time. Current are ${active}`
+      )
+    }
+    const current = active[0] || ''
+    const _prefix = current.startsWith('-') ? '' : prefix
+    return current ? `${_prefix}${current.replace('-', '') || defaultVal}` : ''
+  })
+}
+
+export function makeIndividualClass({ props, prefix, prop }) {
+  return computed(() => {
+    return props[prop] ? `${prefix}${prop}` : ''
+  })
+}

package/components/Alert.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props: any = defineProps<{
+  state?: string
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+}>()
+const classes = computed(() => {
+  return {
+    'alert-info': props.info || props.state === 'info',
+    'alert-success': props.success || props.state === 'success',
+    'alert-warning': props.warning || props.state === 'warning',
+    'alert-error': props.error || props.state === 'error',
+  }
+})
+</script>
+
+<template>
+  <div class="alert" :class="classes">
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>

package/components/Artboard.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  size?: string
+  demo?: boolean
+  horizontal?: boolean
+  phone1?: boolean
+  phone2?: boolean
+  phone3?: boolean
+  phone4?: boolean
+  phone5?: boolean
+  phone6?: boolean
+}>()
+const classes = computed(() => {
+  return {
+    'artboard-demo': props.demo,
+    'horizontal': props.horizontal,
+    'phone-1': props.phone1 || props.size === 'phone-1',
+    'phone-2': props.phone2 || props.size === 'phone-2',
+    'phone-3': props.phone3 || props.size === 'phone-3',
+    'phone-4': props.phone4 || props.size === 'phone-4',
+    'phone-5': props.phone5 || props.size === 'phone-5',
+    'phone-6': props.phone6 || props.size === 'phone-6',
+  }
+})
+</script>
+
+<template>
+  <div class="artboard" :class="classes">
+    <slot />
+  </div>
+</template>

package/components/Avatar.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { makeMaskClasses, maskProps } from './Mask.config'
+import Mask from './Mask.vue'
+
+const props = defineProps({
+  text: { type: String },
+  charCount: { type: Number, default: 1 },
+  backgroundColor: { type: String, default: '#BBB' },
+  size: { type: [Number, String], default: 6 },
+  innerClass: String,
+  showStatus: Boolean,
+  online: Boolean,
+  ...maskProps,
+})
+
+const classes = computed(() => {
+  return {
+    online: props.showStatus && props.online,
+  }
+})
+
+const maskClasses = makeMaskClasses(props)
+const allMaskClasses = computed(() => {
+  const classes = maskClasses.value
+  const hasMaskClass = Object.values(classes).find(v => v)
+  // Enable rounded-btn class only if no mask classes are applied
+  Object.assign(classes, { 'rounded-btn': !hasMaskClass })
+  return classes
+})
+
+const initials = computed(() => {
+  const parts = (props.text || '').split(' ')
+  return parts.reduce((chars: string, part: string) => {
+    if (props.charCount === chars.length)
+      return chars
+
+    const char = part.slice(0, 1).toUpperCase()
+
+    return chars + char
+  }, '')
+})
+
+const color = computed(() => {
+  return `#${contrastingColor(props.backgroundColor.replace('#', ''))}`
+})
+
+function contrastingColor(color) {
+  return (luma(color) >= 155) ? '000' : 'fff'
+}
+// color can be a hx string or an array of RGB values 0-255
+function luma(color) {
+  const rgb = (typeof color === 'string') ? hexToRGBArray(color) : color
+  return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]) // SMPTE C, Rec. 709 weightings
+}
+function hexToRGBArray(color) {
+  if (color.length === 3)
+    color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2)
+  else if (color.length !== 6)
+    throw new Error(`Invalid hex color: ${color}`)
+  const rgb = []
+  for (let i = 0; i <= 2; i++)
+    rgb[i] = parseInt(color.substr(i * 2, 2), 16)
+  return rgb
+}
+</script>
+
+<template>
+  <div class="avatar" :class="classes">
+    <Mask :style="{ backgroundColor, color }" class="w-full h-full avatar-mask aspect-square" :class="[allMaskClasses, innerClass]">
+      <slot />
+    </Mask>
+  </div>
+</template>
+
+<style lang="postcss">
+.avatar-mask > * {
+  aspect-ratio: 1/1;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/components/AvatarGroup.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  vertical: Boolean,
+})
+const classes = computed(() => {
+  return {
+    'flex-col': props.vertical,
+    'flex-row': !props.vertical,
+  }
+})
+</script>
+
+<template>
+  <div class="avatar-group" :class="classes">
+    <slot />
+  </div>
+</template>

package/components/Badge.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  outline?: boolean
+
+  size?: string
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+
+  color?: string
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+}>()
+
+const classes = computed(() => {
+  return {
+    'badge-outline': props.outline,
+    'badge-lg': props.lg || props.size === 'lg',
+    'badge-md': props.md || props.size === 'md',
+    'badge-sm': props.sm || props.size === 'sm',
+    'badge-xs': props.xs || props.size === 'xs',
+    'badge-primary': props.primary || props.color === 'primary',
+    'badge-secondary': props.secondary || props.color === 'secondary',
+    'badge-accent': props.accent || props.color === 'accent',
+    'badge-info': props.info || props.color === 'info',
+    'badge-success': props.success || props.color === 'success',
+    'badge-warning': props.warning || props.color === 'warning',
+    'badge-error': props.error || props.color === 'error',
+  }
+})
+</script>
+
+<template>
+  <div class="badge" :class="classes">
+    <slot />
+  </div>
+</template>

package/components/BottomNav.vue

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

package/components/Breadcrumbs.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="breadcrumbs">
+    <ul>
+      <slot />
+    </ul>
+  </div>
+</template>

package/components/Button.config.ts

@@ -0,0 +1,26 @@
+export * from './-utils'
+
+/**
+ * Converts a list of prop names to an object of Booleans. Can be spread into props.
+ * @param propList list of prop names to become booleans
+ */
+export function toProps(propList: string[]): Record<string, boolean> {
+  return propList.reduce((all: Record<string, any>, current: string) => {
+    all[current.replace('-', '')] = Boolean
+    return all
+  }, {})
+}
+
+export const directionVariants = ['top', 'bottom', 'left', 'right']
+export const colorVariants = ['neutral', 'primary', 'secondary', 'accent']
+export const stateVariants = ['info', 'success', 'warning', 'error']
+export const allColorVariants = [...colorVariants, ...stateVariants]
+export const variants = [
+  ...colorVariants,
+  ...stateVariants,
+  'ghost',
+  'link',
+  'glass',
+]
+export const sizes = ['xs', 'sm', 'md', 'lg']
+export const shapes = ['circle', 'square']

package/components/Button.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { makeIndividualClass } from './Button.config'
+
+interface Props {
+  is?: string
+
+  color?: string
+  neutral?: boolean
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  ghost?: boolean
+  link?: boolean
+  glass?: boolean
+  outline?: boolean
+  disabled?: boolean
+
+  shape?: 'circle' | 'square' | 'wide' | 'block'
+  circle?: boolean
+  square?: boolean
+  wide?: boolean
+  block?: boolean
+
+  loading?: boolean
+  noAnimation?: boolean
+  active?: boolean
+
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+  xl?: boolean
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+
+  type?: 'button' | 'submit' | 'reset'
+}
+
+const props = defineProps<Props>()
+
+const classes = computed(() => {
+  return {
+    'btn-primary': !props.disabled && (props.primary || props.color === 'primary'),
+    'btn-secondary': !props.disabled && (props.secondary || props.color === 'secondary'),
+    'btn-neutral': !props.disabled && (props.neutral || props.color === 'neutral'),
+    'btn-accent': !props.disabled && (props.accent || props.color === 'accent'),
+    'btn-info': !props.disabled && (props.info || props.color === 'info'),
+    'btn-success': !props.disabled && (props.success || props.color === 'success'),
+    'btn-warning': !props.disabled && (props.warning || props.color === 'warning'),
+    'btn-error': !props.disabled && (props.error || props.color === 'error'),
+
+    'glass': !props.disabled && props.glass,
+
+    'btn-circle': props.circle || props.shape === 'circle',
+    'btn-square': props.square || props.shape === 'square',
+    'btn-wide': props.wide || props.shape === 'wide',
+    'btn-block': props.block || props.shape === 'block',
+
+    'btn-xl': props.xl || props.size === 'xl',
+    'btn-lg': props.lg || props.size === 'lg',
+    'btn-md': props.md || props.size === 'md',
+    'btn-sm': props.sm || props.size === 'sm',
+    'btn-xs': props.xs || props.size === 'xs',
+
+    'btn-outline': !props.disabled && props.outline,
+    'btn-ghost': !props.disabled && props.ghost,
+    'btn-link': !props.disabled && props.link,
+    'btn-disabled': props.disabled,
+
+    'loading': props.loading,
+    'no-animation': props.noAnimation,
+    'btn-active': !props.disabled && props.active,
+  }
+})
+
+// Accessibility-friendly attributes for disabling the button
+const disabledAttrs = computed(() => {
+  if (props.disabled) {
+    return {
+      'tabindex': -1,
+      'role': 'button',
+      'aria-disabled': true,
+    }
+  }
+  else {
+    return {}
+  }
+})
+const disabledClass = makeIndividualClass({ props, prop: 'disabled', prefix: 'btn-' })
+const wideClass = makeIndividualClass({ props, prop: 'wide', prefix: 'btn-' })
+const blockClass = makeIndividualClass({ props, prop: 'block', prefix: 'btn-' })
+const loadingClass = makeIndividualClass({ props, prop: 'loading', prefix: '' })
+const noAnimationClass = makeIndividualClass({ props, prop: 'no-animation', prefix: '' })
+const activeClass = makeIndividualClass({ props, prop: 'active', prefix: 'btn-' })
+</script>
+
+<template>
+  <component
+    :is="is || 'button'"
+    :type="type"
+    class="btn"
+    :class="[classes]"
+    v-bind="{ ...disabledAttrs, ...$attrs }"
+  >
+    <slot />
+  </component>
+</template>

package/components/ButtonGroup.vue

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

package/components/Card.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  bordered?: boolean
+  is?: string | Object | Function
+  compact?: boolean
+  side?: boolean
+  imageFull?: boolean
+  glass?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  is: 'div',
+})
+
+const classes = computed(() => {
+  return {
+    'card-bordered': props.bordered,
+    'card-compact': props.compact,
+    'card-side': props.side,
+    'image-full': props.imageFull,
+    'glass': props.glass,
+  }
+})
+</script>
+
+<template>
+  <component :is="is" class="card" :class="classes">
+    <slot />
+  </component>
+</template>

package/components/CardActions.vue

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

package/components/CardBody.vue

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

package/components/CardTitle.vue

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

package/components/Carousel.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  snapTo?: 'center' | 'end'
+  center?: boolean
+  end?: boolean
+  vertical?: boolean
+}
+const props = defineProps<Props>()
+
+const classes = computed(() => {
+  const { snapTo, center, end, vertical } = props
+  return {
+    'carousel-center': center || snapTo === 'center',
+    'carousel-end': end || snapTo === 'end',
+    'carousel-vertical': vertical,
+  }
+})
+</script>
+
+<template>
+  <div class="carousel" :class="classes">
+    <slot />
+  </div>
+</template>

package/components/CarouselItem.vue

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

package/components/Checkbox.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue?: any
+
+  color?: string
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+
+  size?: string
+  xs?: boolean
+  sm?: boolean
+  md?: boolean
+  lg?: boolean
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const classes = computed(() => {
+  const { color, primary, secondary, accent, size, xs, sm, md, lg } = props
+  return {
+    'checkbox-primary': primary || color === 'primary',
+    'checkbox-secondary': secondary || color === 'secondary',
+    'checkbox-accent': accent || color === 'accent',
+    'checkbox-xs': xs || size === 'xs',
+    'checkbox-sm': sm || size === 'sm',
+    'checkbox-md': md || size === 'md',
+    'checkbox-lg': lg || size === 'lg',
+  }
+})
+
+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="checkbox"
+    :class="classes"
+  >
+</template>