daisy-ui-kit 0.4.4

package/components/Sidebar.vue

@@ -0,0 +1,89 @@
+<script setup>
+const docsLinks = [{ label: 'Install', to: '/install' }]
+const actions = [
+  { label: 'Button', to: '/daisy-button' },
+  { label: 'Dropdown', to: '/daisy-dropdown' },
+  { label: 'Modal', to: '/daisy-modal', pendingDocs: true },
+  { label: 'Swap', to: '/daisy-swap' },
+]
+const dataDisplay = [
+  { label: 'Alert', to: '/daisy-alert' },
+  { label: 'Avatar', to: '/daisy-avatar' },
+  { label: 'AvatarGroup', to: '/daisy-avatar-group' },
+  { label: 'Badge', to: '/daisy-badge' },
+  { label: 'Card', to: '/daisy-card' },
+  { label: 'Carousel', to: '/daisy-carousel' },
+  { label: 'Collapse', to: '/daisy-collapse' },
+  { label: 'Countdown', to: '/daisy-countdown' },
+  { label: 'Kbd', to: '/daisy-kbd' },
+  { label: 'Progress', to: '/daisy-progress' },
+  { label: 'RadialProgress', to: '/daisy-radial-progress' },
+  { label: 'Stat', to: '/daisy-stat' },
+  { label: 'Table', to: '/daisy-table' },
+  { label: 'Text', to: '/daisy-text' },
+  { label: 'Tooltip', to: '/daisy-tooltip' },
+  { label: 'Prose', to: '/daisy-prose' },
+]
+const dataInput = [
+  { label: 'FormControl', to: '/daisy-form-control' },
+  { label: 'Checkbox', to: '/daisy-form-checkbox' },
+  { label: 'TextInput', to: '/daisy-form-text-input' },
+  { label: 'Radio', to: '/daisy-form-radio' },
+  { label: 'RadioGroup', to: '/daisy-form-radio-group' },
+  { label: 'Range', to: '/daisy-form-range' },
+  { label: 'Rating', to: '/daisy-form-rating' },
+  { label: 'Select', to: '/daisy-form-select' },
+  { label: 'Textarea', to: '/daisy-form-textarea' },
+  { label: 'Toggle', to: '/daisy-form-toggle' },
+]
+const layout = [
+  { label: 'Artboard', to: '/daisy-artboard' },
+  { label: 'ButtonGroup', to: '/daisy-button-group' },
+  { label: 'Divider', to: '/daisy-divider' },
+  { label: 'Drawer', to: '/daisy-drawer' },
+  { label: 'Flex', to: '/daisy-flex' },
+  { label: 'Footer', to: '/daisy-footer' },
+  { label: 'Hero', to: '/daisy-hero' },
+  { label: 'Indicator', to: '/daisy-indicator' },
+  { label: 'InputGroup', to: '/daisy-input-group' },
+  { label: 'Mask', to: '/daisy-mask' },
+  { label: 'Stack', to: '/daisy-stack' },
+  { label: 'Toast', to: '/daisy-toast' },
+]
+const navigation = [
+  { label: 'Breadcrumbs', to: '/daisy-breadcrumbs' },
+  { label: 'BottomNav', to: '/daisy-bottom-nav' },
+  { label: 'Link', to: '/daisy-link' },
+  { label: 'Menu', to: '/daisy-menu' },
+  { label: 'Navbar', to: '/daisy-navbar' },
+  { label: 'Pagination', to: '/daisy-pagination' },
+  { label: 'Steps', to: '/daisy-steps' },
+  { label: 'Tabs', to: '/daisy-tabs' },
+]
+const mockup = [
+  { label: 'Code', to: '/daisy-code' },
+  { label: 'Phone', to: '/daisy-phone' },
+  { label: 'Window', to: '/daisy-window' },
+]
+</script>
+
+<template>
+  <Drawer class="border-r border-r-base-300/30">
+    <!-- Sidebar component, swap this element with another sidebar if you like -->
+    <div class="relative pt-4 menu w-80 bg-base-100 text-base-content">
+      <NuxtLink to="/" class="fixed">
+        <Logo class="text-base-content" />
+      </NuxtLink>
+
+      <div class="pb-12 pl-2 mt-12 overflow-y-auto">
+        <SidebarMenuSection title="Docs" :links="docsLinks" />
+        <SidebarMenuSection title="Actions" :links="actions" />
+        <SidebarMenuSection title="Data Display" :links="dataDisplay" />
+        <SidebarMenuSection title="Data Input" :links="dataInput" />
+        <SidebarMenuSection title="Layout" :links="layout" />
+        <SidebarMenuSection title="Navigation" :links="navigation" />
+        <SidebarMenuSection title="Mockup" :links="mockup" />
+      </div>
+    </div>
+  </Drawer>
+</template>

package/components/SidebarMenuSection.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import FileTextIcon from '~icons/feather/file-text'
+
+interface Link {
+  label: string
+  to: string
+  pending: boolean
+  pendingDocs: boolean
+}
+defineProps<{
+  title: string
+  links: Link[]
+}>()
+</script>
+
+<template>
+  <Menu compact class="p-2 mt-2">
+    <MenuTitle class="text-sm">
+      {{ title }}
+    </MenuTitle>
+
+    <MenuItem
+      v-for="link in links"
+      :key="link.label"
+      :class="{ 'opacity-30': link.pending }"
+    >
+      <NuxtLink :to="link.to" exact-active-class="active">
+        {{ link.label }}
+        <FileTextIcon v-if="link.pendingDocs" class="ml-2" />
+      </NuxtLink>
+    </MenuItem>
+  </Menu>
+
+  <hr class="opacity-10">
+</template>

package/components/SigninForm.vue

@@ -0,0 +1,47 @@
+<script>
+import { LockClosedIcon } from '@heroicons/vue/solid'
+
+export default {
+  components: {
+    LockClosedIcon,
+  },
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-center min-h-full px-4 py-12 sm:px-6 lg:px-8">
+    <div class="w-full max-w-md space-y-8">
+      <div>
+        <img
+          class="w-auto h-24 mx-auto invert"
+          src="https://avatars.githubusercontent.com/u/85031756"
+          alt="Feathers Cloud"
+        >
+        <h2 class="mt-6 text-3xl font-extrabold text-center text-gray-900">
+          Sign in to your account
+        </h2>
+      </div>
+      <div class="mt-8 space-y-6">
+        <a
+          type="button"
+          class="relative flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md group hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          href="/api/auth/login"
+        >
+          <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+            <LockClosedIcon
+              class="w-5 h-5 text-indigo-500 group-hover:text-indigo-400"
+              aria-hidden="true"
+            />
+          </span>
+          Sign in
+        </a>
+        <div class="text-center">
+          or
+          <RouterLink to="/" class="text-blue-500">
+            Return to Home
+          </RouterLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/Stack.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="stack">
+    <slot />
+  </component>
+</template>

package/components/Stat.vue

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

package/components/StatActions.vue

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

package/components/StatDesc.vue

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

package/components/StatFigure.vue

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

package/components/StatTitle.vue

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

package/components/StatValue.vue

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

package/components/Stats.vue

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

package/components/Step.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+
+const props = defineProps<{
+  glyph?: string
+
+  color?: string
+  primary?: boolean
+  secondary?: boolean
+  accent?: boolean
+  neutral?: boolean
+  info?: boolean
+  success?: boolean
+  warning?: boolean
+  error?: boolean
+}>()
+
+const classes = computed(() => {
+  return {
+    'step-primary': props.primary || props.color === 'primary',
+    'step-secondary': props.secondary || props.color === 'secondary',
+    'step-accent': props.accent || props.color === 'accent',
+    'step-neutral': props.neutral || props.color === 'neutral',
+    'step-info': props.info || props.color === 'info',
+    'step-success': props.success || props.color === 'success',
+    'step-warning': props.warning || props.color === 'warning',
+    'step-error': props.error || props.color === 'error',
+  }
+})
+</script>
+
+<template>
+  <li class="step" :class="classes" :data-content="glyph">
+    <slot />
+  </li>
+</template>

package/components/Steps.vue

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

package/components/Swap.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, nextTick, ref, watch } from 'vue'
+
+interface Props {
+  modelValue?: boolean | null
+  indeterminate?: boolean
+  rotate?: boolean
+  flip?: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue'])
+const classes = computed(() => {
+  return {
+    'swap-rotate': props.rotate,
+    'swap-flip': props.flip,
+  }
+})
+
+const checkbox = ref(null)
+
+// Allow internal or external control
+const isChecked = ref<any>(false)
+watch(isChecked, val => emit('update:modelValue', val))
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (isChecked.value !== val)
+      isChecked.value = val
+  },
+)
+
+// When the indeterminate prop updates, manually update the checkbox element.
+watch(
+  () => [props.indeterminate, checkbox.value],
+  ([val]) => {
+    nextTick(() => {
+      if (checkbox.value != null)
+        (checkbox.value as any).indeterminate = val
+      isChecked.value = null
+    })
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <label class="swap" :class="classes">
+    <input ref="checkbox" v-model="isChecked" type="checkbox">
+    <div class="swap-off">
+      <slot />
+    </div>
+    <div class="swap-on">
+      <slot name="swap" />
+    </div>
+    <div v-if="indeterminate" class="swap-indeterminate">
+      <slot name="indeterminate" />
+    </div>
+  </label>
+</template>

package/components/Tab.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed, defineProps, inject, withDefaults } from 'vue'
+
+interface Props {
+  is?: string | Object | Function
+  name?: string
+  active?: boolean
+
+  variant?: 'bordered' | 'lifted'
+  bordered?: boolean
+  lifted?: boolean
+
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  is: 'a',
+})
+
+const manager: any = inject('tabManager')
+
+const classes = computed(() => {
+  return {
+    'tab-active': props.active || manager.currentTab === props.name,
+
+    'tab-lg': props.size === 'lg' || props.lg,
+    'tab-md': props.size === 'md' || props.md,
+    'tab-sm': props.size === 'sm' || props.sm,
+    'tab-xs': props.size === 'xs' || props.xs,
+
+    'tab-bordered': props.variant === 'bordered' || props.bordered,
+    'tab-lifted': props.variant === 'lifted' || props.lifted,
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="is" class="tab" :class="classes" tabindex="0"
+    @click="() => (manager.currentTab = name)"
+    @keypress.enter="() => (manager.currentTab = name)"
+  >
+    <slot v-if="$slots.default" />
+    <span v-else>{{ name }}</span>
+  </component>
+</template>

package/components/TabContent.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, defineProps, inject, withDefaults } from 'vue'
+
+interface Props {
+  is?: any
+  name: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  is: 'div',
+})
+
+const tabManager: any = inject('tabManager')
+
+const isCurrentTab = computed(() => {
+  return tabManager.currentTab === props.name
+})
+
+if (!tabManager.currentTab) tabManager.currentTab = props.name
+
+const existing = tabManager.tabs.find(t => t === props.name)
+if (!existing) tabManager.tabs.push(props.name)
+</script>
+
+<template>
+  <component :is="is" v-show="isCurrentTab" class="tab-content">
+    <slot />
+  </component>
+</template>

package/components/Tabs.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed, defineProps, inject, withDefaults } from 'vue'
+import Tab from './Tab.vue'
+
+interface Props {
+  is?: string | Object | Function
+  tabs: string[]
+
+  variant?: 'bordered' | 'lifted' | 'boxed' | 'inline-boxed'
+  bordered?: boolean
+  lifted?: boolean
+  boxed?: boolean
+  inlineBoxed?: boolean
+
+  size?: 'lg' | 'md' | 'sm' | 'xs'
+  lg?: boolean
+  md?: boolean
+  sm?: boolean
+  xs?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  is: 'a',
+  tabs: [] as any,
+})
+
+const tabManager: any = inject('tabManager')
+
+const _variant = computed(() => {
+  if (props.bordered || props.variant === 'bordered') return 'bordered'
+  if (props.lifted || props.variant === 'lifted') return 'lifted'
+  return undefined
+})
+const _size = computed(() => {
+  if (props.size) return props.size
+  if (props.lg) return 'lg'
+  if (props.md) return 'md'
+  if (props.sm) return 'sm'
+  if (props.xs) return 'xs'
+  return 'md'
+})
+
+const classes = computed(() => {
+  return {
+    'tabs-boxed':
+      props.variant === 'boxed'
+      || props.variant === 'inline-boxed'
+      || props.boxed
+      || props.inlineBoxed,
+    'inline-block': props.variant === 'inline-boxed' || props.inlineBoxed,
+  }
+})
+</script>
+
+<template>
+  <div class="tabs" :class="classes">
+    <slot v-if="$slots.default" />
+    <template v-for="tabName in tabs" v-else :key="tabName">
+      <Tab
+        :is="is"
+        :name="tabName"
+        :variant="_variant"
+        :size="_size"
+        :active="tabManager.currentTab === tabName"
+        @click="() => (tabManager.currentTab = tabName)"
+      >
+        {{ tabName }}
+      </Tab>
+    </template>
+    <div v-if="variant === 'lifted' || lifted" class="flex-1 cursor-default tab tab-lifted" />
+  </div>
+</template>

package/components/TabsManager.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { defineEmits, defineProps, provide, reactive, watch } from 'vue'
+
+interface Props {
+  tab?: string
+}
+const props = defineProps<Props>()
+const emit = defineEmits(['update:tab'])
+
+const manager = reactive({
+  currentTab: props.tab,
+  tabs: [],
+})
+provide('tabManager', manager)
+
+// If the tab changes from outside, update the internal value.
+watch(
+  () => props.tab,
+  (val) => {
+    if (val !== manager.currentTab) manager.currentTab = val
+  },
+)
+
+// If the internal tab value changes, update the tab
+watch(
+  () => manager.currentTab,
+  (val) => {
+    if (val !== props.tab) emit('update:tab', val)
+  },
+)
+</script>
+
+<template>
+  <div class="tabs-manager">
+    <slot />
+  </div>
+</template>