examples/vue-formkit-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 移除 postcss-prefix-selector 依赖，更新样式以支持深色模式，优化 TutorialForm 和 ZodForm 组件
Some checks failed
/ surge (push) Failing after 11s
Details

Browse Source
This commit is contained in:
mac-mini-2024
2024-11-20 21:54:13 +08:00
parent c7edd1a65c
commit 275ebb26f7
6 changed files with 33 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

22
pnpm-lock.yaml generated
View File

@ -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

10
src/App.vue
View File

@ -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>

24
src/assets/main.css
View File

@ -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;
}
}

26
src/tutorial-form/index.vue
View File

@ -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>
<style></style>

5
src/zod-form/index.vue
View File

@ -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]"