feat: support daisy v5

kirklin · kirklin · commit f4a6a0f96b21 · 2025-04-18T23:02:59.000+08:00
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "vue-router": "catalog:frontend"
   },
   "devDependencies": {
+    "@ameinhardt/unocss-preset-daisy": "catalog:build",
     "@commitlint/cli": "catalog:dev",
     "@commitlint/config-conventional": "catalog:dev",
     "@iconify-json/mdi": "catalog:dev",
@@ -62,7 +63,6 @@
     "typescript": "catalog:dev",
     "unocss": "catalog:build",
     "unocss-preset-chinese": "catalog:build",
-    "unocss-preset-daisy": "catalog:build",
     "unocss-preset-ease": "catalog:build",
     "unplugin-auto-import": "catalog:build",
     "unplugin-icons": "catalog:build",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,15 +1,14 @@
 packages: []
-
 catalogs:
   build:
+    "@ameinhardt/unocss-preset-daisy": ^1.1.6
     "@intlify/unplugin-vue-i18n": ^6.0.5
     "@unocss/eslint-config": ^66.1.0-beta.12
     "@vitejs/plugin-vue": ^5.2.3
     "@vue/compiler-dom": ^3.5.13
     jsdom: ^26.1.0
     unocss: ^66.1.0-beta.12
     unocss-preset-chinese: ^0.3.3
-    unocss-preset-daisy: ^7.0.0
     unocss-preset-ease: ^0.0.4
     unplugin: ^2.3.2
     unplugin-auto-import: ^19.1.2
@@ -40,7 +39,7 @@ catalogs:
     "@kirklin/logger": ^0.0.2
     "@kirklin/reset-css": ^0.0.6
     "@vueuse/core": ^13.1.0
-    daisyui: ^3.9.4
+    daisyui: ^5.0.27
     iso-639-1: ^3.1.5
     nprogress: ^0.2.0
     pinia: ^3.0.2
diff --git a/src/layouts/Footer/index.vue b/src/layouts/Footer/index.vue
@@ -8,16 +8,16 @@ defineOptions({
 
 <template>
   <footer
-    class="sticky bottom-0 border-t border-base-100 bg-base-200 px-4 pt-2 text-base-content opacity-90 footer footer-center"
+    class="bg-base-200 text-base-content border-base-100 px-4 pt-2 border-t opacity-90 bottom-0 sticky footer footer-center"
   >
-    <div class="max-w-6xl w-full flex flex-row items-center justify-between gap-6">
+    <div class="flex flex-row gap-6 max-w-6xl w-full items-center justify-between">
       <a
         href="https://github.com/kirklin"
         target="_blank"
         rel="nofollow"
         class="inline-flex items-center justify-center hover:opacity-90"
       ><div class="mr-3 avatar">
-         <div class="h-14 w-14 bg-neutral p-px mask mask-squircle">
+         <div class="p-px bg-neutral h-14 w-14 mask mask-squircle">
            <img
              width="54"
              height="54"
@@ -28,20 +28,20 @@ defineOptions({
          </div>
        </div>
         <div class="text-left">
-          <p class="text-xs text-base-content text-opacity-50">Created by</p>
-          <h2 class="text-lg text-base-content font-bold">Kirk Lin</h2>
+          <p class="text-base-content text-xs text-opacity-50">Created by</p>
+          <h2 class="text-base-content text-lg font-bold">Kirk Lin</h2>
         </div>
       </a>
-      <div class="flex flex-col items-center gap-4 text-left sm:flex-row">
-        <div class="flex gap-4 pb-4">
+      <div class="text-left flex flex-col gap-4 items-center sm:flex-row">
+        <div class="pb-4 flex gap-4">
           <a
             href="https://github.com/kirklin/boot-vue"
             target="_blank"
             rel="nofollow"
-            class="w-[130px] flex flex-col items-center rounded bg-base-100"
+            class="bg-base-100 rounded flex flex-col w-[130px] items-center"
           >
-            <h3 class="p-2 text-xs text-base-content/50 font-bold">BootVue™</h3>
-            <p class="px-1.5 py-2 text-xs text-base-content/50 tracking-tighter">
+            <h3 class="text-base-content/50 text-xs font-bold p-2">BootVue™</h3>
+            <p class="text-base-content/50 text-xs tracking-tighter px-1.5 py-2">
               All Rights Reserved.
             </p>
           </a>
diff --git a/src/layouts/Navbar/components/LocalesChange/index.vue b/src/layouts/Navbar/components/LocalesChange/index.vue
@@ -16,22 +16,20 @@ function ChangeLocales(lang: string) {
 
 <template>
   <div title="Change Locales" class="dropdown dropdown-end">
-    <div tabindex="0" class="gap-1 normal-case btn btn-ghost">
+    <div tabindex="0" class="gap-1 btn btn-ghost btn-sm">
       <UnoCSSIconButton icon="i-tabler-language" />
       <span class="hidden md:inline" />
       <UnoCSSIconButton icon="i-tabler-chevron-down" />
     </div>
-    <div class="dropdown-content top-px mt-16 w-56 overflow-y-auto bg-base-200 text-base-content shadow-2xl rounded-t-box rounded-b-box">
-      <ul class="menu-compact gap-1 p-3 menu" tabindex="0">
-        <li v-for="lang in availableLocales" :key="lang">
-          <button class="flex" @click="ChangeLocales(lang)">
-            <span class="flex flex-1 justify-between">
-              {{ languagesNameList.find((item) => item.code === lang)?.nativeName }}
-              <!--              <span class="badge-ghost badge badge-sm" /> -->
-            </span>
-          </button>
-        </li>
-      </ul>
+    <div class="bg-base-200 mt-4 p-2 w-52 shadow-sm z-1 dropdown-content menu rounded-box" tabindex="0">
+      <li v-for="lang in availableLocales" :key="lang">
+        <button class="flex" @click="ChangeLocales(lang)">
+          <span class="flex flex-1 justify-between">
+            {{ languagesNameList.find((item) => item.code === lang)?.nativeName }}
+            <!--              <span class="badge-ghost badge badge-sm" /> -->
+          </span>
+        </button>
+      </li>
     </div>
   </div>
 </template>
diff --git a/src/layouts/Navbar/components/ThemeChange/data.ts b/src/layouts/Navbar/components/ThemeChange/data.ts
@@ -117,4 +117,28 @@ export const themeList: ThemeList[] = [
     name: "❄️ Winter",
     id: "winter",
   },
+  {
+    name: "🔅 Dim",
+    id: "dim",
+  },
+  {
+    name: "❄️ Nord",
+    id: "nord",
+  },
+  {
+    name: "🌅 Sunset",
+    id: "sunset",
+  },
+  {
+    name: "🍮 Caramellatte",
+    id: "caramellatte",
+  },
+  {
+    name: "🌊 Abyss",
+    id: "abyss",
+  },
+  {
+    name: "🧣 Silk",
+    id: "silk",
+  },
 ];
diff --git a/src/layouts/Navbar/components/ThemeChange/index.vue b/src/layouts/Navbar/components/ThemeChange/index.vue
@@ -11,6 +11,8 @@ const { t } = useI18n();
 const mode = useColorMode<CustomTheme>({
   attribute: "data-theme",
   modes: {
+    light: "light",
+    dark: "dark",
     cupcake: "cupcake",
     bumblebee: "bumblebee",
     emerald: "emerald",
@@ -38,6 +40,12 @@ const mode = useColorMode<CustomTheme>({
     night: "night",
     coffee: "coffee",
     winter: "winter",
+    dim: "dim",
+    nord: "nord",
+    sunset: "sunset",
+    caramellatte: "caramellatte",
+    abyss: "abyss",
+    silk: "silk",
   },
 });
 
@@ -89,69 +97,44 @@ function handleKeyDown(event: KeyboardEvent, theme: CustomTheme) {
 
 <template>
   <div title="Change Theme" class="dropdown dropdown-end">
-    <div tabindex="0" class="gap-1 normal-case btn btn-ghost">
+    <div tabindex="0" role="button" class="gap-1 btn btn-ghost btn-sm" aria-label="Change Theme">
       <UnoCSSIconButton icon="i-tabler-color-swatch" />
       <span class="hidden md:inline">{{ t("Themes") }}</span>
       <UnoCSSIconButton icon="i-tabler-chevron-down" />
     </div>
-    <div
-      class="dropdown-content scrollbar top-px mt-16 h-[70vh] max-h-96 w-52 overflow-y-auto bg-base-200 text-base-content shadow-2xl rounded-t-box rounded-b-box"
-    >
-      <div class="grid grid-cols-1 gap-3 p-3" tabindex="0">
-        <button
-          v-for="theme in themeList"
-          :key="theme.id"
-          class="overflow-hidden rounded-lg text-left outline-2 outline-base-content outline-offset-2 hover:outline"
-          :class="mode === theme.id ? 'outline' : ''"
-          type="button"
-          @click="changeTheme($event, theme.id)"
-          @keydown="handleKeyDown($event, theme.id)"
-        >
-          <div
-            :data-theme="theme.id"
-            class="w-full cursor-pointer bg-base-100 text-base-content font-sans"
+    <div tabindex="0" class="bg-base-200 text-base-content mt-16 outline-1 outline-black/5 border border-white/5 h-[30.5rem] max-h-[calc(100vh-8.6rem)] shadow-2xl top-px overflow-y-auto dropdown-content rounded-box">
+      <ul class="w-56 menu">
+        <li class="text-xs menu-title">
+          {{ t("Themes") }}
+        </li>
+        <li v-for="theme in themeList" :key="theme.id">
+          <button
+            class="px-2 gap-3"
+            :class="mode === theme.id ? '[&_svg]:visible' : ''"
+            @click="changeTheme($event, theme.id)"
+            @keydown="handleKeyDown($event, theme.id)"
           >
-            <div class="grid grid-cols-5 grid-rows-3">
-              <div class="col-span-5 row-span-3 row-start-1 flex gap-1 px-4 py-3">
-                <div class="grow text-sm font-bold">
-                  {{ theme.id }}
-                </div>
-                <div class="flex shrink-0 flex-wrap gap-1">
-                  <div class="w-2 rounded bg-primary" />
-                  <div class="w-2 rounded bg-secondary" />
-                  <div class="w-2 rounded bg-accent" />
-                  <div class="w-2 rounded bg-neutral" />
-                </div>
-              </div>
+            <div :data-theme="theme.id" class="bg-base-100 p-1 rounded-md shrink-0 gap-0.5 grid grid-cols-2 shadow-sm">
+              <div class="bg-base-content rounded-full size-1" />
+              <div class="bg-primary rounded-full size-1" />
+              <div class="bg-secondary rounded-full size-1" />
+              <div class="bg-accent rounded-full size-1" />
             </div>
-          </div>
-        </button>
-      </div>
+            <div class="w-32 truncate">
+              {{ theme.id }}
+            </div>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="shrink-0 h-3 w-3 invisible">
+              <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" />
+            </svg>
+          </button>
+        </li>
+        <li />
+      </ul>
     </div>
   </div>
 </template>
 
- <style scoped>
- .scrollbar::-webkit-scrollbar {
-  width: 20px;
-  height: 20px;
-}
-
-.scrollbar::-webkit-scrollbar-track {
-  border-radius: 100vh;
-  background: #f7f4ed;
-}
-
-.scrollbar::-webkit-scrollbar-thumb {
-  background: #e0cbcb;
-  border-radius: 100vh;
-  border: 3px solid #f6f7ed;
-}
-
-.scrollbar::-webkit-scrollbar-thumb:hover {
-  background: #c0a0b9;
-}
-
+<style scoped>
 ::view-transition-old(root),
 ::view-transition-new(root) {
   animation: none;
diff --git a/src/layouts/Navbar/components/ThemeChange/types.ts b/src/layouts/Navbar/components/ThemeChange/types.ts
@@ -3,7 +3,8 @@ import type { BasicColorSchema } from "@vueuse/core";
 export declare type CustomTheme = "cupcake" | "bumblebee" | "emerald" | "corporate" | "synthwave"
   | "retro" | "cyberpunk" | "valentine" | "halloween" | "garden" | "forest" | "aqua" |
   "lofi" | "pastel" | "fantasy" | "wireframe" | "black" | "luxury" | "dracula" | "cmyk" |
-  "autumn" | "business" | "acid" | "lemonade" | "night" | "coffee" | "winter" | BasicColorSchema;
+  "autumn" | "business" | "acid" | "lemonade" | "night" | "coffee" | "winter" | "dim" |
+  "nord" | "sunset" | "caramellatte" | "abyss" | "silk" | BasicColorSchema;
 export interface ThemeList {
   name: string;
   id: CustomTheme;
diff --git a/src/layouts/Navbar/index.vue b/src/layouts/Navbar/index.vue
@@ -10,7 +10,7 @@ defineOptions({
 
 <template>
   <div
-    class="sticky top-0 z-30 h-16 w-full flex justify-center text-base-content opacity-90 backdrop-blur transition-all duration-100"
+    class="text-base-content opacity-90 flex h-16 w-full transition-all duration-100 top-0 justify-center sticky z-30 backdrop-blur"
   >
     <nav class="w-full navbar">
       <div class="flex flex-1 lg:gap-2 md:gap-1">
@@ -21,7 +21,7 @@ defineOptions({
           class="px-2 btn btn-ghost"
         >
           <div
-            class="inline-flex text-lg text-primary transition-all duration-200 md:text-3xl"
+            class="text-primary text-lg inline-flex transition-all duration-200 md:text-3xl"
           >
             <span class="text-accent">B<span class="lowercase">oot</span></span>
             <span class="text-base-content">V<span class="lowercase">ue</span></span>
@@ -40,7 +40,7 @@ defineOptions({
               aria-label="Github"
               target="_blank"
               href="https://github.com/kirklin/boot-vue"
-              class="drawer-button normal-case btn btn-square btn-ghost"
+              class="gap-1 btn btn-ghost btn-sm"
             >
               <UnoCSSIconButton icon="i-mdi-github" />
             </a>
diff --git a/src/pages/errorPages/index.vue b/src/pages/errorPages/index.vue
@@ -7,8 +7,8 @@ const errorCode = ref<number>(404);
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-20 bg-base-100 py-20">
-    <div class="w-96 bg-base-100 card">
+  <div class="bg-base-100 py-20 flex flex-col gap-20 items-center">
+    <div class="bg-base-100 w-96 card">
       <div class="card-body">
         <h2 class="card-title">
           Error {{ errorCode }}!
diff --git a/src/pages/home/components/Hero.vue b/src/pages/home/components/Hero.vue
@@ -9,14 +9,10 @@ function testStore() {
 </script>
 
 <template>
-  <div class="mt-[-4rem] min-h-screen text-primary-content hero">
-    <!--  <div class="hero min-h-screen from-primary to-secondary" style="background-image: url(https://img.js.design/assets/Resources/background/home-bg-2.png);"> -->
-    <div
-      class="place-items-center from-primary to-base-100 bg-gradient-to-bl hero-overlay"
-    />
+  <div class="bg-base-200 text-primary-content mt-[-4rem] min-h-screen hero">
     <div class="text-center hero-content">
       <div class="max-w-md">
-        <h1 class="mb-5 text-5xl font-bold">
+        <h1 class="text-5xl font-bold mb-5">
           Boot Vue
         </h1>
         <p class="mb-5">
diff --git a/src/pages/home/components/StoreTest.vue b/src/pages/home/components/StoreTest.vue
@@ -3,11 +3,11 @@ import appStore from "~/store";
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-20 bg-base-100 py-20">
+  <div class="bg-base-100 py-20 flex flex-col gap-20 items-center">
     <div class="mockup-phone">
-      <div class="camera" />
-      <div class="display">
-        <div class="phone-1 artboard artboard-demo">
+      <div class="mockup-phone-camera" />
+      <div class="mockup-phone-display">
+        <div class="text-center grid h-full place-content-center">
           <p class="text-xl font-medium tracking-wide uppercase">
             Counter:
           </p>
diff --git a/unocss.config.ts b/unocss.config.ts

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ defineOptions({`
`10`	`10`
`11`	`11`	`<template>`
`12`	`12`	`<div`
`13`		`- class="sticky top-0 z-30 h-16 w-full flex justify-center text-base-content opacity-90 backdrop-blur transition-all duration-100"`
	`13`	`+ class="text-base-content opacity-90 flex h-16 w-full transition-all duration-100 top-0 justify-center sticky z-30 backdrop-blur"`
`14`	`14`	`>`
`15`	`15`	`<nav class="w-full navbar">`
`16`	`16`	`<div class="flex flex-1 lg:gap-2 md:gap-1">`
`@@ -21,7 +21,7 @@ defineOptions({`
`21`	`21`	`class="px-2 btn btn-ghost"`
`22`	`22`	`>`
`23`	`23`	`<div`
`24`		`- class="inline-flex text-lg text-primary transition-all duration-200 md:text-3xl"`
	`24`	`+ class="text-primary text-lg inline-flex transition-all duration-200 md:text-3xl"`
`25`	`25`	`>`
`26`	`26`	`<span class="text-accent">B<span class="lowercase">oot</span></span>`
`27`	`27`	`<span class="text-base-content">V<span class="lowercase">ue</span></span>`
`@@ -40,7 +40,7 @@ defineOptions({`
`40`	`40`	`aria-label="Github"`
`41`	`41`	`target="_blank"`
`42`	`42`	`href="https://github.com/kirklin/boot-vue"`
`43`		`- class="drawer-button normal-case btn btn-square btn-ghost"`
	`43`	`+ class="gap-1 btn btn-ghost btn-sm"`
`44`	`44`	`>`
`45`	`45`	`<UnoCSSIconButton icon="i-mdi-github" />`
`46`	`46`	`</a>`