From 275ebb26f7369134c720eefcb9993813b9e5ee88 Mon Sep 17 00:00:00 2001
From: mac-mini-2024 <mac-mini-2024@oo1.dev>
Date: Wed, 20 Nov 2024 21:54:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=BB=E9=99=A4=20postcss-prefix-sel?=
 =?UTF-8?q?ector=20=E4=BE=9D=E8=B5=96=EF=BC=8C=E6=9B=B4=E6=96=B0=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BB=A5=E6=94=AF=E6=8C=81=E6=B7=B1=E8=89=B2=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E4=BC=98=E5=8C=96=20TutorialForm=20=E5=92=8C?=
 =?UTF-8?q?=20ZodForm=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                |  2 --
 pnpm-lock.yaml              | 22 ----------------------
 src/App.vue                 | 10 ----------
 src/assets/main.css         | 24 ++++++++++++++++++++++++
 src/tutorial-form/index.vue | 26 ++++++--------------------
 src/zod-form/index.vue      |  5 +++--
 6 files changed, 33 insertions(+), 56 deletions(-)

diff --git a/package.json b/package.json
index e0051bf..9f51159 100644
--- a/package.json
+++ b/package.json
@@ -19,13 +19,11 @@
     "autoprefixer": "latest",
     "i18next": "^23.16.6",
     "postcss": "latest",
-    "postcss-prefix-selector": "^2.1.0",
     "tailwindcss": "latest",
     "vue": "^3.5.13",
     "zod-i18n-map": "^2.27.0"
   },
   "devDependencies": {
-    "@types/postcss-prefix-selector": "^1.16.3",
     "@vitejs/plugin-vue": "^5.2.0",
     "typescript": "~5.6.3",
     "vite": "^5.4.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1272e3b..0db6af0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,9 +35,6 @@ importers:
       postcss:
         specifier: latest
         version: 8.4.49
-      postcss-prefix-selector:
-        specifier: ^2.1.0
-        version: 2.1.0(postcss@8.4.49)
       tailwindcss:
         specifier: latest
         version: 3.4.15
@@ -48,9 +45,6 @@ importers:
         specifier: ^2.27.0
         version: 2.27.0(i18next@23.16.6)(zod@3.23.8)
     devDependencies:
-      '@types/postcss-prefix-selector':
-        specifier: ^1.16.3
-        version: 1.16.3
       '@vitejs/plugin-vue':
         specifier: ^5.2.0
         version: 5.2.0(vite@5.4.11)(vue@3.5.13(typescript@5.6.3))
@@ -417,9 +411,6 @@ packages:
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
-  '@types/postcss-prefix-selector@1.16.3':
-    resolution: {integrity: sha512-YZLPWRkJIrYjwaqojVDXzaRCAEYslRAm8Shznwwn+ZFA4iKQR4LZlS3d+ZMVteFz4iyQnngZZG7k/GIzV1f3mQ==}
-
   '@vitejs/plugin-vue@5.2.0':
     resolution: {integrity: sha512-7n7KdUEtx/7Yl7I/WVAMZ1bEb0eVvXF3ummWTeLcs/9gvo9pJhuLdouSXGjdZ/MKD1acf1I272+X0RMua4/R3g==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -810,11 +801,6 @@ packages:
     peerDependencies:
       postcss: ^8.2.14
 
-  postcss-prefix-selector@2.1.0:
-    resolution: {integrity: sha512-UJjQ5CJZuvDGbrGzanqZyH1R/dUSxil/IxfQyeUg+POmZGhG4nz4FERhrgy75+JiUESw0ws3+GxXofapOBbdkg==}
-    peerDependencies:
-      postcss: ^8.0.0
-
   postcss-selector-parser@6.1.2:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
@@ -1276,10 +1262,6 @@ snapshots:
 
   '@types/estree@1.0.6': {}
 
-  '@types/postcss-prefix-selector@1.16.3':
-    dependencies:
-      postcss: 8.4.49
-
   '@vitejs/plugin-vue@5.2.0(vite@5.4.11)(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       vite: 5.4.11
@@ -1672,10 +1654,6 @@ snapshots:
       postcss: 8.4.49
       postcss-selector-parser: 6.1.2
 
-  postcss-prefix-selector@2.1.0(postcss@8.4.49):
-    dependencies:
-      postcss: 8.4.49
-
   postcss-selector-parser@6.1.2:
     dependencies:
       cssesc: 3.0.0
diff --git a/src/App.vue b/src/App.vue
index cc6551a..1e06ee2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,13 +7,3 @@ import ZodForm from './zod-form/index.vue'
   <ZodForm />
   <TutorialForm />
 </template>
-
-<style>
-.attributes-group {
-  padding: 1.5rem;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
-  margin-bottom: 1rem;
-  background-color: #f9fafb;
-}
-</style>
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index 17edaf7..81abd99 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -4,4 +4,28 @@
 
 body {
   background-color:#f3f4f6;
+  color:#1f2937;
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color:#1a202c;
+    color:#e5e7eb;
+  }
+}
+
+
+.attributes-group {
+  padding: 1.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+  background-color: #f9fafb;
+}
+
+@media (prefers-color-scheme: dark) {
+  .attributes-group {
+    border-color: #374151;
+    background-color: #1f2937;
+  }
+}
\ No newline at end of file
diff --git a/src/tutorial-form/index.vue b/src/tutorial-form/index.vue
index 8e3f430..6879c5f 100644
--- a/src/tutorial-form/index.vue
+++ b/src/tutorial-form/index.vue
@@ -58,11 +58,6 @@ const SCHEMA: FormKitSchemaDefinition = [
   }
 ];
 
-function onChangeName() {
-  const nameNode = getNode('nameNodeId')
-  nameNode?.input('测试')
-}
-
 import autoAnimate from "@formkit/auto-animate"
 onMounted(() => {
   // setTimeout(() => {
@@ -73,9 +68,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="bg-white rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px]">
+  <div class="bg-white rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px] dark:bg-gray-800 ">
     <h1
-      class="font-bold text-2xl mb-4"
+      class="font-bold text-2xl mb-4 color:gray-800 dark:text-white"
       data-foo="bar"
     >Tutorial Form</h1>
     <FormKit
@@ -116,7 +111,7 @@ onMounted(() => {
             :help="`现在 confirmName 的值是：${attributes?.confirmName}`"
             some-attr="some-attr-value"
           >
-            <template #label="{ classes, attrs, label }">
+            <template #label="{ classes, attrs, label, node: nameNode }">
               <!-- <pre
                 class="font-mono text-sm p-4 bg-slate-100 mb-4">{{ JSON.stringify({ classes, attrs, label }, null, 2) }}</pre> -->
               <label
@@ -126,7 +121,7 @@ onMounted(() => {
               >{{ label }}<button
                   class="ml-2 px-2 py-1 bg-blue-500 text-white rounded"
                   type="button"
-                  @click="onChangeName"
+                  @click="nameNode?.input('测试')"
                 >点击赋值</button>
               </label>
             </template>
@@ -156,7 +151,6 @@ onMounted(() => {
           <FormKit
             type="range"
             name="strength"
-            id="strength"
             label="力量"
             value="5"
             validation="min:2|max:9"
@@ -207,7 +201,7 @@ onMounted(() => {
         class="mb-4"
       />
 
-      <pre class="font-mono text-sm p-4 bg-slate-100 mb-4">{{ value }}</pre>
+      <pre class="font-mono text-sm p-4 bg-slate-100 mb-4 dark:bg-gray-800 ">{{ value }}</pre>
 
     </FormKit>
   </div>
@@ -229,12 +223,4 @@ ul.error-box p {
 }
 </style>
 
-<style>
-.attributes-group {
-  padding: 1.5rem;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
-  margin-bottom: 1rem;
-  background-color: #f9fafb;
-}
-</style>
\ No newline at end of file
+<style></style>
\ No newline at end of file
diff --git a/src/zod-form/index.vue b/src/zod-form/index.vue
index 42e92d9..9d5b3eb 100644
--- a/src/zod-form/index.vue
+++ b/src/zod-form/index.vue
@@ -6,6 +6,7 @@ import i18next from "i18next";
 import { zodI18nMap } from "zod-i18n-map";
 // Import your language translation files
 import translation from "zod-i18n-map/locales/zh-CN/zod.json";
+import { text } from '@formkit/inputs';
 
 // lng and resources key depend on your locale.
 i18next.init({
@@ -38,8 +39,8 @@ const [zodPlugin, submitHandler] = createZodPlugin(
 </script>
 
 <template>
-  <div class="bg-white rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px]">
-    <h1>Validation from Zod schema</h1>
+  <div class="bg-white rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px] dark:bg-gray-800 ">
+    <h1 class="text-2xl font-bold mb-4 color:gray-800 dark:text-white">Validation from Zod schema</h1>
     <FormKit
       type="form"
       :plugins="[zodPlugin]"