daisy-ui-kit 0.4.4

package/components/theme/Provider.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { colorVars, hexToHSL, utilVars } from './theme-utils'
+
+const props: Record<string, any> = defineProps({
+  config: { type: Object, default: () => ({}) },
+})
+const el: any = ref(null)
+const colorJsVars = colorVars.map(c => c.jsVar)
+
+/**
+ * Watch for changes in the theme and set the css variables directly on the ThemePreview's main element.
+ */
+onMounted(() => {
+  watch(
+    () => props.config,
+    (config) => {
+      colorVars.forEach(({ jsVar, cssVar }) => {
+        if (config?.[jsVar]) {
+          const value = hexToHSL(config[jsVar])
+          el.value.style.setProperty(cssVar, value)
+        }
+        else {
+          el.value.style.removeProperty(cssVar)
+        }
+      })
+      utilVars.forEach(({ jsVar, cssVar }) => {
+        if (config?.[jsVar])
+          el.value.style.setProperty(cssVar, config[jsVar])
+
+        else
+          el.value.style.removeProperty(cssVar)
+      })
+    },
+    { immediate: true, deep: true },
+  )
+})
+</script>
+
+<template>
+  <div ref="el" class="theme-provider">
+    <slot />
+  </div>
+</template>

package/components/theme/Snooper.vue

@@ -0,0 +1,41 @@
+
+<script setup lang="ts">
+/**
+ * ThemeSnooper uses the theme name to read the theme's CSS variables from the DOM.
+ */
+import { colorVars, hslStringToHex, utilVars } from './theme-utils'
+
+const props = defineProps({
+  name: { type: String },
+  isDefault: { type: Boolean },
+  config: { type: Object },
+})
+const emit = defineEmits(['snoop'])
+
+const el: any = ref(null)
+
+onMounted(() => {
+  watch(
+    () => props.name,
+    (name) => {
+      if (props.isDefault && !props.config?.primary) {
+        setTimeout(() => {
+          const config = colorVars.concat(utilVars as any).reduce((config: any, current) => {
+            const style = getComputedStyle(el.value).getPropertyValue(current.cssVar).trim()
+            config[current.jsVar] = current.className ? hslStringToHex(style) : style
+            return config
+          }, {})
+          emit('snoop', { name, isDefault: props.isDefault, config })
+        }, 100)
+      }
+    },
+    { immediate: true },
+  )
+})
+</script>
+
+<template>
+  <div :data-theme="name" class="theme-snooper">
+    <div ref="el" />
+  </div>
+</template>

package/components/theme/Swatch.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const $props = defineProps({
+  title: { type: String, required: true, default: '' },
+  color: { type: String, required: true, default: '' },
+})
+const emit = defineEmits(['update:color'])
+
+const swatchColor = computed({
+  get: () => $props.color,
+  set: val => emit('update:color', val),
+})
+</script>
+<template>
+  <div class="swatch">
+    <label :for="`colorinput-${title}`" class="swatch-body" :class="title">
+      <div class="title-pill">.{{ title }}</div>
+      <div class="text-input-wrapper">
+        <input v-model="swatchColor" type="text" autocomplete="off" class="text-input" :class="title">
+      </div>
+    </label>
+    <input :id="`colorinput-${title}`" v-model="swatchColor" type="color" class="color-input">
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.swatch {
+  @apply relative col-start-1 row-start-1 overflow-hidden;
+  @apply hover:shadow-lg hover:scale-105 transition-all transform shadow hover:rounded-xl hover:-translate-y-0.5;
+}
+.swatch-body {
+  @apply flex flex-col items-start justify-end w-full h-24  cursor-pointer p-2;
+}
+.text-input-wrapper {
+  @apply text-sm text-white bg-black rounded-b rounded-tr bg-opacity-30 p-1;
+}
+.text-input {
+  @apply font-mono rounded outline-none bg-opacity-0 transition-colors duration-300 px-1 py-0.5;
+  @apply hover:bg-base-100 hover:bg-opacity-30;
+  @apply focus:bg-base-100 focus:bg-opacity-30;
+}
+.color-input {
+  @apply absolute top-16 left-4 opacity-0;
+}
+.title-pill {
+  @apply px-1 text-xs text-white bg-black rounded-t bg-opacity-30;
+}
+</style>

package/components/theme/custom-themes.ts

@@ -0,0 +1,34 @@
+export const rovitDark = {
+  primary: '#793ef9',
+  primaryFocus: '#570df8',
+  primaryContent: '#ffffff',
+  secondary: '#f000b8',
+  secondaryFocus: '#bd0091',
+  secondaryContent: '#ffffff',
+  accent: '#37cdbe',
+  accentFocus: '#2aa79b',
+  accentContent: '#ffffff',
+  neutral: '#2a2e37',
+  neutralFocus: '#16181d',
+  neutralContent: '#ffffff',
+  base100: '#3d4451',
+  base200: '#2a2e37',
+  base300: '#16181d',
+  baseContent: '#ebecf0',
+  info: '#66c6ff',
+  success: '#87d039',
+  warning: '#e2d562',
+  error: '#ff6f6f',
+  borderColor: 'var(--b3)',
+  roundedBox: '1rem',
+  roundedBtn: '0.5rem',
+  roundedBadge: '1.9rem',
+  animationBtn: '0.25s',
+  animationInput: '.2s',
+  btnTextCase: 'uppercase',
+  btnFocusScale: '0.95',
+  navbarPadding: '.5rem',
+  borderBtn: '1px',
+  tabBorder: '1px',
+  tabRadius: '0.5rem',
+}

package/components/theme/theme-utils.ts

@@ -0,0 +1,164 @@
+/* eslint-disable eqeqeq */
+
+export function hexToHSL(H: string) {
+  // Convert hex to RGB first
+  let r: any = 0
+  let g: any = 0
+  let b: any = 0
+  if (H.length == 4) {
+    r = `0x${H[1]}${H[1]}`
+    g = `0x${H[2]}${H[2]}`
+    b = `0x${H[3]}${H[3]}`
+  }
+  else if (H.length == 7) {
+    r = `0x${H[1]}${H[2]}`
+    g = `0x${H[3]}${H[4]}`
+    b = `0x${H[5]}${H[6]}`
+  }
+  // Then to HSL
+  r /= 255
+  g /= 255
+  b /= 255
+  const cmin = Math.min(r, g, b)
+  const cmax = Math.max(r, g, b)
+  const delta = cmax - cmin
+  let h = 0
+  let s = 0
+  let l = 0
+
+  if (delta == 0) h = 0
+  else if (cmax == r) h = ((g - b) / delta) % 6
+  else if (cmax == g) h = (b - r) / delta + 2
+  else h = (r - g) / delta + 4
+
+  h = Math.round(h * 60)
+
+  if (h < 0) h += 360
+
+  l = (cmax + cmin) / 2
+  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1))
+  s = +(s * 100).toFixed(1)
+  l = +(l * 100).toFixed(1)
+
+  return `${h} ${s}% ${l}%`
+}
+
+export interface ThemeConfig {
+  primary?: string
+  primaryFocus?: string
+  primaryContent?: string
+  secondary?: string
+  secondaryFocus?: string
+  secondaryContent?: string
+  accent?: string
+  accentFocus?: string
+  accentContent?: string
+  neutral?: string
+  neutralFocus?: string
+  neutralContent?: string
+  base100?: string
+  base200?: string
+  base300?: string
+  baseContent?: string
+  info?: string
+  success?: string
+  warning?: string
+  error?: string
+  borderColor?: string
+  roundedBox?: string
+  roundedBtn?: string
+  roundedBadge?: string
+  animationBtn?: string
+  animationInput?: string
+  btnTextCase?: string
+  btnFocusScale?: string
+  navbarPadding?: string
+  borderBtn?: string
+  tabBorder?: string
+  tabRadius?: string
+}
+export interface Theme {
+  name: string
+  isDefault: boolean
+  config: ThemeConfig
+}
+
+export const defaultThemes: Theme[] = [
+  { name: 'light', isDefault: true, config: {} },
+  { name: 'dark', isDefault: true, config: {} },
+  { name: 'cupcake', isDefault: true, config: {} },
+  { name: 'bumblebee', isDefault: true, config: {} },
+  { name: 'emerald', isDefault: true, config: {} },
+  { name: 'corporate', isDefault: true, config: {} },
+  { name: 'synthwave', isDefault: true, config: {} },
+  { name: 'retro', isDefault: true, config: {} },
+  { name: 'cyberpunk', isDefault: true, config: {} },
+  { name: 'valentine', isDefault: true, config: {} },
+  { name: 'halloween', isDefault: true, config: {} },
+  { name: 'garden', isDefault: true, config: {} },
+  { name: 'forest', isDefault: true, config: {} },
+  { name: 'aqua', isDefault: true, config: {} },
+  { name: 'lofi', isDefault: true, config: {} },
+  { name: 'pastel', isDefault: true, config: {} },
+  { name: 'fantasy', isDefault: true, config: {} },
+  { name: 'wireframe', isDefault: true, config: {} },
+  { name: 'black', isDefault: true, config: {} },
+  { name: 'luxury', isDefault: true, config: {} },
+  { name: 'dracula', isDefault: true, config: {} },
+  { name: 'cmyk', isDefault: true, config: {} },
+]
+
+export function hslToHex([h, s, l]: number[]) {
+  l /= 100
+  const a = (s * Math.min(l, 1 - l)) / 100
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, '0') // convert to Hex and prefix "0" if needed
+  }
+  return `#${f(0)}${f(8)}${f(4)}`
+}
+
+export function hslStringToHex(hslString: string) {
+  const args: number[] = hslString.split(' ').map((val: string) => parseInt(val.replace('%', '')))
+  return hslToHex(args)
+}
+
+export const colorVars = [
+  { className: 'primary', jsVar: 'primary', cssVar: '--p' },
+  { className: 'primary-focus', jsVar: 'primaryFocus', cssVar: '--pf' },
+  { className: 'primary-content', jsVar: 'primaryContent', cssVar: '--pc' },
+  { className: 'secondary', jsVar: 'secondary', cssVar: '--s' },
+  { className: 'secondary-focus', jsVar: 'secondaryFocus', cssVar: '--sf' },
+  { className: 'secondary-content', jsVar: 'secondaryContent', cssVar: '--sc' },
+  { className: 'accent', jsVar: 'accent', cssVar: '--a' },
+  { className: 'accent-focus', jsVar: 'accentFocus', cssVar: '--af' },
+  { className: 'accent-content', jsVar: 'accentContent', cssVar: '--ac' },
+  { className: 'neutral', jsVar: 'neutral', cssVar: '--n' },
+  { className: 'neutral-focus', jsVar: 'neutralFocus', cssVar: '--nf' },
+  { className: 'neutral-content', jsVar: 'neutralContent', cssVar: '--nc' },
+  { className: 'base-100', jsVar: 'base100', cssVar: '--b1' },
+  { className: 'base-200', jsVar: 'base200', cssVar: '--b2' },
+  { className: 'base-300', jsVar: 'base300', cssVar: '--b3' },
+  { className: 'base-content', jsVar: 'baseContent', cssVar: '--bc' },
+  { className: 'info', jsVar: 'info', cssVar: '--in' },
+  { className: 'success', jsVar: 'success', cssVar: '--su' },
+  { className: 'warning', jsVar: 'warning', cssVar: '--wa' },
+  { className: 'error', jsVar: 'error', cssVar: '--er' },
+]
+export const utilVars = [
+  { jsVar: 'borderColor', cssVar: '--border-color' },
+  { jsVar: 'roundedBox', cssVar: '--rounded-box' },
+  { jsVar: 'roundedBtn', cssVar: '--rounded-btn' },
+  { jsVar: 'roundedBadge', cssVar: '--rounded-badge' },
+  { jsVar: 'animationBtn', cssVar: '--animation-btn' },
+  { jsVar: 'animationInput', cssVar: '--animation-input' },
+  { jsVar: 'btnTextCase', cssVar: '--btn-text-case' },
+  { jsVar: 'btnFocusScale', cssVar: '--btn-focus-scale' },
+  { jsVar: 'navbarPadding', cssVar: '--navbar-padding' },
+  { jsVar: 'borderBtn', cssVar: '--border-btn' },
+  { jsVar: 'tabBorder', cssVar: '--tab-border' },
+  { jsVar: 'tabRadius', cssVar: '--tab-radius' },
+]

package/components/types.ts

@@ -0,0 +1,7 @@
+export interface StateProps {
+  state: string
+  info: boolean
+  success: boolean
+  warning: boolean
+  error: boolean
+}

package/index.ts

@@ -0,0 +1,96 @@
+export { default as Alert } from './components/Alert.vue'
+export { default as Artboard } from './components/Artboard.vue'
+export { default as Avatar } from './components/Avatar.vue'
+export { default as AvatarGroup } from './components/AvatarGroup.vue'
+export { default as Badge } from './components/Badge.vue'
+export { default as BottomNav } from './components/BottomNav.vue'
+export { default as Breadcrumbs } from './components/Breadcrumbs.vue'
+export { default as Button } from './components/Button.vue'
+export { default as ButtonGroup } from './components/ButtonGroup.vue'
+export { default as Card } from './components/Card.vue'
+export { default as CardActions } from './components/CardActions.vue'
+export { default as CardBody } from './components/CardBody.vue'
+export { default as CardTitle } from './components/CardTitle.vue'
+export { default as Carousel } from './components/Carousel.vue'
+export { default as CarouselItem } from './components/CarouselItem.vue'
+export { default as Checkbox } from './components/Checkbox.vue'
+// export { default as Code } from './components/Code.vue'
+export { default as CodePreview } from './components/CodePreview.vue'
+export { default as CodeWrapper } from './components/CodeWrapper.vue'
+export { default as Collapse } from './components/Collapse.vue'
+export { default as CollapseContent } from './components/CollapseContent.vue'
+export { default as CollapseTitle } from './components/CollapseTitle.vue'
+export { default as Countdown } from './components/Countdown.vue'
+export { default as CountdownTimers } from './components/CountdownTimers.vue'
+export { default as Counter } from './components/Counter.vue'
+export { default as Crumb } from './components/Crumb.vue'
+export { default as DemoElement } from './components/DemoElement.vue'
+export { default as DemoExample } from './components/DemoExample.vue'
+export { default as Divider } from './components/Divider.vue'
+export { default as Drawer } from './components/Drawer.vue'
+export { default as DrawerLayout } from './components/DrawerLayout.vue'
+export { default as DrawerLayoutContent } from './components/DrawerLayoutContent.vue'
+export { default as Dropdown } from './components/Dropdown.vue'
+export { default as DropdownContent } from './components/DropdownContent.vue'
+export { default as Flex } from './components/Flex.vue'
+export { default as FlexItem } from './components/FlexItem.vue'
+export { default as Footer } from './components/Footer.vue'
+export { default as FooterTitle } from './components/FooterTitle.vue'
+export { default as FormControl } from './components/FormControl.vue'
+export { default as Hero } from './components/Hero.vue'
+export { default as HeroContent } from './components/HeroContent.vue'
+export { default as HeroOverlay } from './components/HeroOverlay.vue'
+export { default as Indicator } from './components/Indicator.vue'
+export { default as IndicatorItem } from './components/IndicatorItem.vue'
+export { default as InputGroup } from './components/InputGroup.vue'
+export { default as Kbd } from './components/Kbd.vue'
+export { default as Label } from './components/Label.vue'
+export { default as LabelText } from './components/LabelText.vue'
+export { default as LabelTextAlt } from './components/LabelTextAlt.vue'
+export { default as Link } from './components/Link.vue'
+export { default as Mask } from './components/Mask.vue'
+export { default as Menu } from './components/Menu.vue'
+export { default as MenuItem } from './components/MenuItem.vue'
+export { default as MenuTitle } from './components/MenuTitle.vue'
+export { default as MockupCode } from './components/MockupCode.vue'
+export { default as Modal } from './components/Modal.vue'
+export { default as ModalAction } from './components/ModalAction.vue'
+export { default as ModalBox } from './components/ModalBox.vue'
+export { default as ModalWrapper } from './components/ModalWrapper.vue'
+export { default as Navbar } from './components/Navbar.vue'
+export { default as NavbarCenter } from './components/NavbarCenter.vue'
+export { default as NavbarEnd } from './components/NavbarEnd.vue'
+export { default as NavbarStart } from './components/NavbarStart.vue'
+export { default as NavButton } from './components/NavButton.vue'
+export { default as Phone } from './components/Phone.vue'
+export { default as Progress } from './components/Progress.vue'
+export { default as Prose } from './components/Prose.vue'
+export { default as RadialProgress } from './components/RadialProgress.vue'
+export { default as Radio } from './components/Radio.vue'
+export { default as RadioGroup } from './components/RadioGroup.vue'
+export { default as Range } from './components/Range.vue'
+export { default as RangeMeasure } from './components/RangeMeasure.vue'
+export { default as Rating } from './components/Rating.vue'
+export { default as Select } from './components/Select.vue'
+export { default as Stack } from './components/Stack.vue'
+export { default as Stat } from './components/Stat.vue'
+export { default as StatActions } from './components/StatActions.vue'
+export { default as StatDesc } from './components/StatDesc.vue'
+export { default as StatFigure } from './components/StatFigure.vue'
+export { default as Stats } from './components/Stats.vue'
+export { default as StatTitle } from './components/StatTitle.vue'
+export { default as StatValue } from './components/StatValue.vue'
+export { default as Step } from './components/Step.vue'
+export { default as Steps } from './components/Steps.vue'
+export { default as Swap } from './components/Swap.vue'
+export { default as Tab } from './components/Tab.vue'
+export { default as TabContent } from './components/TabContent.vue'
+export { default as Tabs } from './components/Tabs.vue'
+export { default as TabsManager } from './components/TabsManager.vue'
+export { default as Text } from './components/Text.vue'
+export { default as TextArea } from './components/TextArea.vue'
+export { default as TextInput } from './components/TextInput.vue'
+export { default as Toast } from './components/Toast.vue'
+export { default as Toggle } from './components/Toggle.vue'
+export { default as Tooltip } from './components/Tooltip.vue'
+export { default as Window } from './components/Window.vue'

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "daisy-ui-kit",
+  "version": "0.4.4",
+  "description": "",
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "start": "node .output/server/index.mjs",
+    "lint": "eslint .",
+    "publish": "git push origin --tags && git push origin",
+    "release:pre": "npm version prerelease && npm publish --tag pre",
+    "release:patch": "npm version patch && npm publish",
+    "release:minor": "npm version minor && npm publish",
+    "release:major": "npm version major && npm publish"
+  },
+  "main": "index.ts",
+  "files": [
+    "components/*"
+  ],
+  "dependencies": {
+    "@vueuse/core": "^9.0.0",
+    "prismjs": "^1.28.0"
+  },
+  "peerDependencies": {
+    "daisyui": "^2.13.5"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.25.2",
+    "@headlessui/vue": "^1.6.7",
+    "@heroicons/vue": "^1.0.6",
+    "@iconify/json": "^2.1.83",
+    "@nuxtjs/color-mode": "^3.1.4",
+    "@pinia/nuxt": "^0.3.1",
+    "@rovit/popper": "^3.9.0",
+    "@tailwindcss/aspect-ratio": "^0.4.0",
+    "@tailwindcss/forms": "^0.5.2",
+    "@tailwindcss/line-clamp": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.4",
+    "@vueuse/nuxt": "^9.0.0",
+    "autoprefixer": "^10.4.7",
+    "cookie": "^0.4.2",
+    "daisyui": "^2.20.0",
+    "eslint": "^8.20.0",
+    "feathers-pinia": "^0.34.0",
+    "mobile-detect": "^1.4.5",
+    "nuxt": "^3.0.0-rc.2",
+    "ohmyfetch": "^0.4.18",
+    "pinia": "^2.0.17",
+    "postcss": "^8.4.14",
+    "tailwindcss": "^3.1.6",
+    "typescript": "^4.7.4",
+    "unplugin-icons": "^0.14.7",
+    "vue": "^3.2.37"
+  }
+}