daisy-ui-kit 2.1.1 → 2.1.3

package/components/theme/Builder.vue

@@ -1,284 +0,0 @@
-
-<script setup lang="ts">
-defineProps({
-  theme: { type: Object, default: () => ({}) },
-})
-const $emit = defineEmits(['prop-change'])
-
-function updateProp(prop: string, value: string) {
-  $emit('prop-change', prop, value)
-}
-</script>
-
-<template>
-  <div>
-    <div class="grid grid-cols-1 gap-6 md:grid-cols-6">
-      <div class="block mb-4">
-        <div class="mb-4 text-xs uppercase opacity-50">
-          primary
-        </div>
-        <div class="grid rounded">
-          <div class="flex flex-col col-start-1 row-start-1">
-            <ThemeSwatch
-              title="bg-primary"
-              :color="theme.primary"
-              class="rounded-t-xl"
-              @update:color="(c) => updateProp('primary', c)"
-            />
-            <ThemeSwatch
-              title="bg-primary-focus"
-              :color="theme.primaryFocus"
-              @update:color="(c) => updateProp('primaryFocus', c)"
-            />
-            <ThemeSwatch
-              title="bg-primary-content"
-              :color="theme.primaryContent"
-              class="rounded-b-xl"
-              @update:color="(c) => updateProp('primaryContent', c)"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div class="block mb-4">
-        <div class="mb-4 text-xs uppercase opacity-50">
-          secondary
-        </div>
-        <div class="grid rounded">
-          <div class="flex flex-col col-start-1 row-start-1">
-            <ThemeSwatch
-              title="bg-secondary"
-              :color="theme.secondary"
-              class="rounded-t-xl"
-              @update:color="(c) => updateProp('secondary', c)"
-            />
-            <ThemeSwatch
-              title="bg-secondary-focus"
-              :color="theme.secondaryFocus"
-              @update:color="(c) => updateProp('secondaryFocus', c)"
-            />
-            <ThemeSwatch
-              title="bg-secondary-content"
-              :color="theme.secondaryContent"
-              class="rounded-b-xl"
-              @update:color="(c) => updateProp('secondaryContent', c)"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div class="block mb-4">
-        <div class="mb-4 text-xs uppercase opacity-50">
-          accent
-        </div>
-        <div class="grid rounded">
-          <div class="flex flex-col col-start-1 row-start-1">
-            <ThemeSwatch
-              title="bg-accent"
-              :color="theme.accent"
-              class="rounded-t-xl"
-              @update:color="(c) => updateProp('accent', c)"
-            />
-            <ThemeSwatch
-              title="bg-accent-focus"
-              :color="theme.accentFocus"
-              @update:color="(c) => updateProp('accentFocus', c)"
-            />
-            <ThemeSwatch
-              title="bg-accent-content"
-              :color="theme.accentContent"
-              class="rounded-b-xl"
-              @update:color="(c) => updateProp('accentContent', c)"
-            />
-          </div>
-        </div>
-      </div>
-      <div class="block mb-4">
-        <div class="mb-4 text-xs uppercase opacity-50">
-          neutral
-        </div>
-        <div class="grid rounded">
-          <div class="flex flex-col col-start-1 row-start-1">
-            <ThemeSwatch
-              title="bg-neutral"
-              :color="theme.neutral"
-              class="rounded-t-xl"
-              @update:color="(c) => updateProp('neutral', c)"
-            />
-            <ThemeSwatch
-              title="bg-neutral-focus"
-              :color="theme.neutralFocus"
-              @update:color="(c) => updateProp('neutralFocus', c)"
-            />
-            <ThemeSwatch
-              title="bg-neutral-content"
-              :color="theme.neutralContent"
-              class="rounded-b-xl"
-              @update:color="(c) => updateProp('neutralContent', c)"
-            />
-          </div>
-        </div>
-      </div>
-      <div class="block mb-4">
-        <div class="mb-4 text-xs uppercase opacity-50">
-          base
-        </div>
-        <div class="grid rounded">
-          <div class="flex flex-col col-start-1 row-start-1">
-            <ThemeSwatch
-              title="bg-base-100"
-              :color="theme.base100"
-              class="rounded-t-xl"
-              @update:color="(c) => updateProp('base100', c)"
-            />
-            <ThemeSwatch title="bg-base-200" :color="theme.base200" @update:color="(c) => updateProp('base200', c)" />
-            <ThemeSwatch title="bg-base-300" :color="theme.base300" @update:color="(c) => updateProp('base300', c)" />
-            <ThemeSwatch
-              title="bg-base-content"
-              :color="theme.baseContent"
-              class="rounded-b-xl"
-              @update:color="(c) => updateProp('baseContent', c)"
-            />
-          </div>
-        </div>
-      </div>
-      <div class="block mb-4">
-        <div class="mb-4 text-xs uppercase opacity-50">
-          state
-        </div>
-        <div class="grid rounded">
-          <div class="flex flex-col col-start-1 row-start-1">
-            <ThemeSwatch
-              title="bg-info"
-              :color="theme.info"
-              class="rounded-t-xl"
-              @update:color="(c) => updateProp('info', c)"
-            />
-            <ThemeSwatch title="bg-success" :color="theme.success" @update:color="(c) => updateProp('success', c)" />
-            <ThemeSwatch title="bg-warning" :color="theme.warning" @update:color="(c) => updateProp('warning', c)" />
-            <ThemeSwatch
-              title="bg-error"
-              :color="theme.error"
-              class="rounded-b-xl"
-              @update:color="(c) => updateProp('error', c)"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-row flex-wrap space-x-2">
-      <!-- Box Radius -->
-      <div class="form-control">
-        <label class="label">
-          <span class="label-text">Card Radius</span>
-        </label>
-        <input
-          type="text"
-          placeholder="enter radius"
-          class="input input-bordered"
-          :value="theme.roundedBox"
-          @input="(ev: any) => updateProp('roundedBox', ev?.target?.value)"
-        >
-      </div>
-
-      <!-- Button Radius -->
-      <div class="form-control">
-        <label class="label">
-          <span class="label-text">Button Radius</span>
-        </label>
-        <input
-          type="text"
-          placeholder="enter radius"
-          class="input input-bordered"
-          :value="theme.roundedBtn"
-          @input="(ev: any) => updateProp('roundedBtn', ev?.target?.value)"
-        >
-      </div>
-
-      <!-- Badge Radius -->
-      <div class="form-control">
-        <label class="label">
-          <span class="label-text">Badge Radius</span>
-        </label>
-        <input
-          type="text"
-          placeholder="enter radius"
-          class="input input-bordered"
-          :value="theme.roundedBadge"
-          @input="(ev: any) => updateProp('roundedBadge', ev?.target?.value)"
-        >
-      </div>
-
-      <!-- Button Animation Time -->
-      <div class="form-control">
-        <label class="label">
-          <span class="label-text">Button Animation Time</span>
-        </label>
-        <input
-          type="text"
-          placeholder="enter time"
-          class="input input-bordered"
-          :value="theme.animationBtn"
-          @input="(ev: any) => updateProp('animationBtn', ev?.target?.value)"
-        >
-      </div>
-
-      <!-- Input Animation Time -->
-      <div class="form-control">
-        <label class="label">
-          <span class="label-text">Input Animation Time</span>
-        </label>
-        <input
-          type="text"
-          placeholder="enter time"
-          class="input input-bordered"
-          :value="theme.animationInput"
-          @input="(ev: any) => updateProp('animationInput', ev?.target?.value)"
-        >
-      </div>
-
-      <!-- Button Text Case -->
-      <div class="form-control">
-        <label class="label">
-          <span class="label-text">Button Text Case</span>
-        </label>
-        <input
-          type="text"
-          placeholder="enter case"
-          class="input input-bordered"
-          :value="theme.btnTextCase"
-          @input="(ev: any) => updateProp('btnTextCase', ev?.target?.value)"
-        >
-      </div>
-
-      <!-- Navbar Padding -->
-      <div class="form-control">
-        <label class="label">
-          <span class="label-text">Navbar Padding</span>
-        </label>
-        <input
-          type="text"
-          placeholder="enter case"
-          class="input input-bordered"
-          :value="theme.navbarPadding"
-          @input="(ev: any) => updateProp('navbarPadding', ev?.target?.value)"
-        >
-      </div>
-
-      <!-- Button Border -->
-      <div class="form-control">
-        <label class="label">
-          <span class="label-text">Button Border</span>
-        </label>
-        <input
-          type="text"
-          placeholder="enter case"
-          class="input input-bordered"
-          :value="theme.borderBtn"
-          @input="(ev: any) => updateProp('borderBtn', ev?.target?.value)"
-        >
-      </div>
-    </div>
-  </div>
-</template>

package/components/theme/Output.vue

@@ -1,70 +0,0 @@
-
-<script setup lang="ts">
-defineProps({
-  name: { type: String },
-  isDefault: { type: Boolean, default: false },
-  config: { type: Object, required: true },
-})
-</script>
-
-<template>
-  <div class="w-full max-w-5xl space-y-4">
-    <h2>Copy the below theme configuration into <span class="kbd">tailwind.config.js</span></h2>
-    <div class="shadow-lg mockup-code">
-      <pre><code>daisyui: {
-    themes: [
-      {
-        '{{ name }}': {
-          <div class="mini-swatch" :style="`background: ${config.primary}`" /> 'primary' : '{{ config.primary }}',<span class="comment">           /* Primary color */</span>
-          <div class="mini-swatch" :style="`background: ${config.primaryFocus}`" /> 'primary-focus' : '{{ config.primaryFocus }}',<span class="comment">     /* Primary color - focused */</span>
-          <div class="mini-swatch" :style="`background: ${config.primaryContent}`" /> 'primary-content' : '{{ config.primaryContent }}',<span class="comment">   /* Foreground content color to use on primary color */</span>
-
-          <div class="mini-swatch" :style="`background: ${config.secondary}`" /> 'secondary' : '{{ config.secondary }}',<span class="comment">         /* Secondary color */</span>
-          <div class="mini-swatch" :style="`background: ${config.secondaryFocus}`" /> 'secondary-focus' : '{{ config.secondaryFocus }}',<span class="comment">   /* Secondary color - focused */</span>
-          <div class="mini-swatch" :style="`background: ${config.secondaryContent}`" /> 'secondary-content' : '{{ config.secondaryContent }}',<span class="comment"> /* Foreground content color to use on secondary color */</span>
-
-          <div class="mini-swatch" :style="`background: ${config.accent}`" /> 'accent' : '{{ config.accent }}',<span class="comment">            /* Accent color */</span>
-          <div class="mini-swatch" :style="`background: ${config.accentFocus}`" /> 'accent-focus' : '{{ config.accentFocus }}',<span class="comment">      /* Accent color - focused */</span>
-          <div class="mini-swatch" :style="`background: ${config.accentContent}`" /> 'accent-content' : '{{ config.accentContent }}',<span class="comment">    /* Foreground content color to use on accent color */</span>
-
-          <div class="mini-swatch" :style="`background: ${config.neutral}`" /> 'neutral' : '{{ config.neutral }}',<span class="comment">           /* Neutral color */</span>
-          <div class="mini-swatch" :style="`background: ${config.neutralFocus}`" /> 'neutral-focus' : '{{ config.neutralFocus }}',<span class="comment">     /* Neutral color - focused */</span>
-          <div class="mini-swatch" :style="`background: ${config.neutralContent}`" /> 'neutral-content' : '{{ config.neutralContent }}',<span class="comment">   /* Foreground content color to use on neutral color */</span>
-
-          <div class="mini-swatch" :style="`background: ${config.base100}`" /> 'base-100' : '{{ config.base100 }}',<span class="comment">          /* Base color of page, used for blank backgrounds */</span>
-          <div class="mini-swatch" :style="`background: ${config.base200}`" /> 'base-200' : '{{ config.base200 }}',<span class="comment">          /* Base color, a little darker */</span>
-          <div class="mini-swatch" :style="`background: ${config.base300}`" /> 'base-300' : '{{ config.base300 }}',<span class="comment">          /* Base color, even more darker */</span>
-          <div class="mini-swatch" :style="`background: ${config.baseContent}`" /> 'base-content' : '{{ config.baseContent }}',<span class="comment">      /* Foreground content color to use on base color */</span>
-
-          <div class="mini-swatch" :style="`background: ${config.info}`" /> 'info' : '{{ config.info }}',<span class="comment">              /* Info */</span>
-          <div class="mini-swatch" :style="`background: ${config.success}`" /> 'success' : '{{ config.success }}',<span class="comment">           /* Success */</span>
-          <div class="mini-swatch" :style="`background: ${config.warning}`" /> 'warning' : '{{ config.warning }}',<span class="comment">           /* Warning */</span>
-          <div class="mini-swatch" :style="`background: ${config.error}`" /> 'error' : '{{ config.error }}',<span class="comment">             /* Error */</span>
-
-          <div class="mini-swatch bg-neutral" />'--rounded-box': '{{ config.roundedBox }}',          <span class="comment">/* border-radius for cards and other big elements */</span>
-          <div class="mini-swatch bg-neutral" />'--rounded-btn': '{{ config.roundedBtn }}',        <span class="comment">/* border-radius for buttons and similar elements */</span>
-          <div class="mini-swatch bg-neutral" />'--rounded-badge': '{{ config.roundedBadge }}',      <span class="comment">/* border-radius for badge and other small elements */</span>
-
-          <div class="mini-swatch bg-neutral" />'--animation-btn': '{{ config.animationBtn }}',       <span class="comment">/* bounce animation time for button */</span>
-          <div class="mini-swatch bg-neutral" />'--animation-input': '{{ config.animationInput }}',       <span class="comment">/* bounce animation time for checkbox, toggle, etc */</span>
-
-          <div class="mini-swatch bg-neutral" />'--btn-text-case': '{{ config.btnTextCase }}',   <span class="comment">/* default text case for buttons */</span>
-          <div class="mini-swatch bg-neutral" />'--navbar-padding': '{{ config.navbarPadding }}',      <span class="comment">/* default padding for navbar */</span>
-          <div class="mini-swatch bg-neutral" />'--border-btn': '{{ config.borderBtn }}',            <span class="comment">/* default border size for button */</span>
-        },
-      },
-    ],
-  },</code></pre>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.mini-swatch {
-  @apply h-4 w-4 rounded inline-block relative select-none;
-  top: 3px;
-}
-.comment {
-  @apply text-neutral-content text-opacity-30 select-none;
-}
-</style>

package/components/theme/Picker.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
-import { defaultThemes } from './theme-utils'
-import { usePopper } from '~~/composables/use-popper'
-
-const { theme } = useTheme()
-
-const themes = useLocalStorage('themes', defaultThemes)
-const themeNames = computed(() => themes.value.map(t => t.name))
-
-const theButton = ref(null)
-const thePopup = ref(null)
-const popper = usePopper(theButton, thePopup)
-
-const container = ref(null)
-onClickOutside(container, () => popper.hide())
-</script>
-
-<template>
-  <div ref="container">
-    <Button ref="theButton" square class="md:btn-ghost" @click="popper.toggle">
-      <Icon name="feather:sun" class="text-base w-5 h-5" />
-    </Button>
-
-    <div ref="thePopup">
-      <transition
-        enter-active-class="duration-200 ease-out"
-        enter-from-class="scale-95 opacity-0"
-        enter-to-class="scale-100 opacity-100"
-        leave-active-class="duration-100 ease-in"
-        leave-from-class="scale-100 opacity-100"
-        leave-to-class="scale-95 opacity-0"
-      >
-        <Menu v-if="popper.isVisible" compact class="py-3 border shadow-lg bg-base-100 rounded-box border-base-300">
-          <MenuTitle> Choose a Theme </MenuTitle>
-          <div class="overflow-y-scroll h-96 ">
-            <MenuItem v-for="name in themeNames" :key="name" :class="{ 'bg-primary-focus text-primary-content': name === theme }">
-              <a @click="theme = name">
-                {{ name }}
-              </a>
-            </MenuItem>
-          </div>
-        </Menu>
-      </transition>
-    </div>
-  </div>
-</template>