daisy-ui-kit 0.4.4

package/components/Text.vue

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

package/components/TextArea.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, withDefaults } from 'vue'
+
+interface Props {
+  modelValue?: string
+  placeholder?: string
+  type?: 'text' | 'phone' | 'email' | 'search'
+
+  color?: string
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  bordered?: boolean
+  ghost?: boolean
+  disabled?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+})
+defineEmits(['update:modelValue'])
+
+const classes = computed(() => {
+  return {
+    '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-bordered': props.bordered,
+    'textarea-ghost': props.ghost,
+  }
+})
+</script>
+
+<template>
+  <textarea
+    :value="modelValue"
+    :type="type"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    class="textarea"
+    :class="classes"
+    @input="$emit('update:modelValue', ($event.target as any).value)"
+  />
+</template>

package/components/TextInput.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, withDefaults } from 'vue'
+
+interface Props {
+  modelValue?: string
+  placeholder?: string
+  type?: 'text' | 'phone' | 'email' | 'search'
+
+  color?: string
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+
+  bordered?: boolean
+  ghost?: boolean
+  disabled?: boolean
+
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+})
+defineEmits(['update:modelValue'])
+
+const classes = computed(() => {
+  return {
+    'input-primary': props.primary || props.color === 'primary',
+    'input-secondary': props.secondary || props.color === 'secondary',
+    'input-accent': props.accent || props.color === 'accent',
+    'input-info': props.info || props.color === 'info',
+    'input-success': props.success || props.color === 'success',
+    'input-warning': props.warning || props.color === 'warning',
+    'input-error': props.error || props.color === 'error',
+
+    'input-lg': props.lg || props.size === 'lg',
+    'input-md': props.md || props.size === 'md',
+    'input-sm': props.sm || props.size === 'sm',
+    'input-xs': props.xs || props.size === 'xs',
+
+    'input-bordered': props.bordered,
+    'input-ghost': props.ghost,
+  }
+})
+</script>
+
+<template>
+  <input
+    :value="modelValue"
+    :type="type"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    class="input"
+    :class="classes"
+    @input="$emit('update:modelValue', ($event.target as any).value)"
+  >
+</template>

package/components/Toast.vue

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

package/components/Toggle.vue

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

package/components/Tooltip.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+
+interface Props {
+  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
+}
+
+const props = defineProps<Props>()
+const classes = computed(() => {
+  return {
+    '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-primary': props.primary || props.color === 'primary',
+    'tooltip-secondary': props.secondary || props.color === 'secondary',
+    'tooltip-neutral': props.neutral || props.color === 'neutral',
+    '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',
+  }
+})
+</script>
+
+<template>
+  <div :data-tip="tip" class="tooltip" :class="classes">
+    <slot />
+  </div>
+</template>

package/components/UserMenu.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+} from '@headlessui/vue'
+
+const userNavigation = [
+  { name: 'Your Profile', href: '/app/profile' },
+  { name: 'Settings', href: '/app/settings' },
+  { name: 'Home', href: '/' },
+]
+
+const user: any = useState('user')
+</script>
+
+<template>
+  <Menu as="div" class="relative ml-3">
+    <MenuButton
+      class="flex items-center max-w-xs text-sm rounded-full bg-base-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+    >
+      <span class="sr-only">Open user menu</span>
+      <img class="w-8 h-8 rounded-full" :src="user?.picture">
+    </MenuButton>
+
+    <transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="transform scale-95 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="transform scale-100 opacity-100"
+      leave-to-class="transform scale-95 opacity-0"
+    >
+      <MenuItems
+        class="absolute right-0 w-48 py-1 mt-2 origin-top-right rounded-md shadow-lg bg-base-100 ring-1 ring-black ring-opacity-5 focus:outline-none"
+      >
+        <MenuItem v-for="item in userNavigation" :key="item.name">
+          <NuxtLink
+            :to="item.href"
+            exact-active-class="bg-gray-100"
+            :class="[
+              'block px-4 py-2 text-sm text-gray-700',
+            ]"
+          >
+            {{ item.name }}
+          </NuxtLink>
+        </MenuItem>
+
+        <MenuItem>
+          <a
+            href="/api/auth/logout"
+            exact-active-class="bg-gray-100"
+            :class="[
+              'block px-4 py-2 text-sm text-gray-700',
+            ]"
+          >Sign out</a>
+        </MenuItem>
+      </MenuItems>
+    </transition>
+  </Menu>
+</template>

package/components/Window.vue

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

package/components/fixtures.ts

@@ -0,0 +1,62 @@
+export const people = [
+  {
+    id: 1,
+    name: 'Wade Cooper',
+    avatar:
+      'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 2,
+    name: 'Arlene Mccoy',
+    avatar:
+      'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 3,
+    name: 'Devon Webb',
+    avatar:
+      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80',
+  },
+  {
+    id: 4,
+    name: 'Tom Cook',
+    avatar:
+      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 5,
+    name: 'Tanya Fox',
+    avatar:
+      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 6,
+    name: 'Hellen Schmidt',
+    avatar:
+      'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 7,
+    name: 'Caroline Schultz',
+    avatar:
+      'https://images.unsplash.com/photo-1568409938619-12e139227838?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 8,
+    name: 'Mason Heaney',
+    avatar:
+      'https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 9,
+    name: 'Claudie Smitham',
+    avatar:
+      'https://images.unsplash.com/photo-1584486520270-19eca1efcce5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+  {
+    id: 10,
+    name: 'Emil Schaefer',
+    avatar:
+      'https://images.unsplash.com/photo-1561505457-3bcad021f8ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+  },
+]