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

feat: PrimeVue 表单
Some checks failed
/ test (push) Failing after 12s
Details
/ surge (push) Successful in 47s
Details

Browse Source
This commit is contained in:
严浩
2024-11-23 22:00:09 +08:00
parent fa094e68ff
commit 533a762151
11 changed files with 402 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components.d.ts vendored Normal file
View File

@ -0,0 +1,20 @@
/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
Button: typeof import('primevue/button')['default']
BUtton: typeof import('primevue/button')['default']
Fieldset: typeof import('primevue/fieldset')['default']
Form: typeof import('@primevue/forms/form')['default']
FormField: typeof import('@primevue/forms/formfield')['default']
InputText: typeof import('primevue/inputtext')['default']
Message: typeof import('primevue/message')['default']
Password: typeof import('primevue/password')['default']
Toast: typeof import('primevue/toast')['default']
}
}

33
formkit.config.ts
View File

@ -2,37 +2,38 @@ import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formki
import type { FormKitOptions } from '@formkit/core' import type { FormKitOptions } from '@formkit/core'
import { createI18nPlugin, zh } from '@formkit/i18n' import { createI18nPlugin, zh } from '@formkit/i18n'
import { genesisIcons } from '@formkit/icons' import { genesisIcons } from '@formkit/icons'
import { createLibraryPlugin } from '@formkit/inputs' import { createLibraryPlugin, submit } from '@formkit/inputs'
import { createProPlugin, toggle } from '@formkit/pro' import { createProPlugin, toggle } from '@formkit/pro'
import * as defaultRules from '@formkit/rules' import * as defaultRules from '@formkit/rules'
import { createThemePlugin } from '@formkit/themes' import { createThemePlugin } from '@formkit/themes'
import { createValidationPlugin } from '@formkit/validation' import { createValidationPlugin } from '@formkit/validation'
import { /* defaultConfig, */ bindings, createInput } from '@formkit/vue' import { /* defaultConfig, */ bindings, createInput } from '@formkit/vue'
import { addAsteriskPlugin } from './formkit.addAsteriskPlugin' import { addAsteriskPlugin } from './formkit.addAsteriskPlugin'
import { fkLibrary } from './formkit.config.fkLibrary' // import { fkLibrary } from './formkit.config.fkLibrary'
import { rootClasses } from "./formkit.config.theme" import { rootClasses } from "./formkit.config.theme"
import HeadlessuiToggle from "./src/headlessui-switch.vue" import HeadlessuiToggle from "./src/headlessui-switch.vue"
import { register as decodeErrors } from '@formkit/dev'
decodeErrors();
const validation = createValidationPlugin(defaultRules) const validation = createValidationPlugin(defaultRules)
const i18n = createI18nPlugin({ zh })
const theme = undefined; const theme = undefined;
const icons = genesisIcons; const icons = genesisIcons;
const themePlugin = createThemePlugin(theme, icons/* , iconLoaderUrl, iconLoader */)
const apiKey = 'fk-6cdd5192223' const apiKey = 'fk-6cdd5192223'
export default { export default {
plugins: [ plugins: [
createProPlugin(apiKey, { toggle }), createProPlugin(apiKey, { toggle }),
// createLibraryPlugin(fkLibrary),
createLibraryPlugin(fkLibrary), createLibraryPlugin({
submit,
createLibraryPlugin( }),
{ createThemePlugin(theme, icons/* , iconLoaderUrl, iconLoader */),
'headlessuiSwitch': createInput(HeadlessuiToggle), bindings,
} createI18nPlugin({ zh }),
), validation,
addAsteriskPlugin,
themePlugin, bindings, i18n, validation, addAsteriskPlugin,
// https://github.com/formkit/formkit/blob/ac1947a305eb5082ba95f53800305d080787cb32/packages/addons/src/plugins/autoHeightTextarea.ts // https://github.com/formkit/formkit/blob/ac1947a305eb5082ba95f53800305d080787cb32/packages/addons/src/plugins/autoHeightTextarea.ts
createAutoHeightTextareaPlugin(), createAutoHeightTextareaPlugin(),
@ -54,5 +55,7 @@ export default {
// } // }
) )
], ],
config: { rootClasses }, config: {
// rootClasses,
},
} satisfies FormKitOptions } satisfies FormKitOptions

5
index.html
View File

@ -15,12 +15,13 @@
<title>Vue FormKit Example</title> <title>Vue FormKit Example</title>
<link <link
rel="stylesheet" rel="stylesheet"
href="/src/assets/main.css" href="/src/assets/tailwind.css"
> >
<link <link
rel="stylesheet" rel="stylesheet"
href="/src/assets/tailwind.css" href="/src/assets/main.css"
> >
</head> </head>
<body> <body>

6
package.json
View File

@ -19,19 +19,25 @@
"@formkit/vue": "latest", "@formkit/vue": "latest",
"@formkit/zod": "^1.6.9", "@formkit/zod": "^1.6.9",
"@headlessui/vue": "^1.7.23", "@headlessui/vue": "^1.7.23",
"@primevue/forms": "^4.2.3",
"@primevue/themes": "^4.2.3",
"autoprefixer": "latest", "autoprefixer": "latest",
"i18next": "^23.16.6", "i18next": "^23.16.6",
"postcss": "latest", "postcss": "latest",
"primeicons": "^7.0.0",
"primevue": "^4.2.3",
"sweetalert2": "^11.14.5", "sweetalert2": "^11.14.5",
"tailwindcss": "latest", "tailwindcss": "latest",
"vue": "^3.5.13", "vue": "^3.5.13",
"zod-i18n-map": "^2.27.0" "zod-i18n-map": "^2.27.0"
}, },
"devDependencies": { "devDependencies": {
"@primevue/auto-import-resolver": "^4.2.3",
"@unocss/extractor-arbitrary-variants": "^0.64.1", "@unocss/extractor-arbitrary-variants": "^0.64.1",
"@vitejs/plugin-vue": "^5.2.0", "@vitejs/plugin-vue": "^5.2.0",
"typescript": "~5.6.3", "typescript": "~5.6.3",
"unocss": "^0.64.1", "unocss": "^0.64.1",
"unplugin-vue-components": "^0.27.4",
"vite": "^5.4.11", "vite": "^5.4.11",
"vue-tsc": "^2.1.10" "vue-tsc": "^2.1.10"
} }

161
pnpm-lock.yaml generated
View File

@ -32,6 +32,12 @@ importers:
'@headlessui/vue': '@headlessui/vue':
specifier: ^1.7.23 specifier: ^1.7.23
version: 1.7.23(vue@3.5.13(typescript@5.6.3)) version: 1.7.23(vue@3.5.13(typescript@5.6.3))
'@primevue/forms':
specifier: ^4.2.3
version: 4.2.3(vue@3.5.13(typescript@5.6.3))
'@primevue/themes':
specifier: ^4.2.3
version: 4.2.3
autoprefixer: autoprefixer:
specifier: latest specifier: latest
version: 10.4.20(postcss@8.4.49) version: 10.4.20(postcss@8.4.49)
@ -41,6 +47,12 @@ importers:
postcss: postcss:
specifier: latest specifier: latest
version: 8.4.49 version: 8.4.49
primeicons:
specifier: ^7.0.0
version: 7.0.0
primevue:
specifier: ^4.2.3
version: 4.2.3(vue@3.5.13(typescript@5.6.3))
sweetalert2: sweetalert2:
specifier: ^11.14.5 specifier: ^11.14.5
version: 11.14.5 version: 11.14.5
@ -54,6 +66,9 @@ importers:
specifier: ^2.27.0 specifier: ^2.27.0
version: 2.27.0(i18next@23.16.6)(zod@3.23.8) version: 2.27.0(i18next@23.16.6)(zod@3.23.8)
devDependencies: devDependencies:
'@primevue/auto-import-resolver':
specifier: ^4.2.3
version: 4.2.3
'@unocss/extractor-arbitrary-variants': '@unocss/extractor-arbitrary-variants':
specifier: ^0.64.1 specifier: ^0.64.1
version: 0.64.1 version: 0.64.1
@ -66,6 +81,9 @@ importers:
unocss: unocss:
specifier: ^0.64.1 specifier: ^0.64.1
version: 0.64.1(postcss@8.4.49)(rollup@4.27.2)(vite@5.4.11)(vue@3.5.13(typescript@5.6.3)) version: 0.64.1(postcss@8.4.49)(rollup@4.27.2)(vite@5.4.11)(vue@3.5.13(typescript@5.6.3))
unplugin-vue-components:
specifier: ^0.27.4
version: 0.27.4(@babel/parser@7.26.2)(rollup@4.27.2)(vue@3.5.13(typescript@5.6.3))
vite: vite:
specifier: ^5.4.11 specifier: ^5.4.11
version: 5.4.11 version: 5.4.11
@ -515,6 +533,44 @@ packages:
'@polka/url@1.0.0-next.28': '@polka/url@1.0.0-next.28':
resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==} resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
'@primeuix/forms@0.0.2':
resolution: {integrity: sha512-DpecPQd/Qf/kav4LKCaIeGuT3AkwhJzuHCkLANTVlN/zBvo8KIj3OZHsCkm0zlIMVVnaJdtx1ULNlRQdudef+A==}
engines: {node: '>=12.11.0'}
'@primeuix/styled@0.3.2':
resolution: {integrity: sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw==}
engines: {node: '>=12.11.0'}
'@primeuix/utils@0.3.2':
resolution: {integrity: sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw==}
engines: {node: '>=12.11.0'}
'@primevue/auto-import-resolver@4.2.3':
resolution: {integrity: sha512-X3rrTr+HBDnjOegVomq4GmYUSCBeol/DQdwIEU6M/t2+u3kiSpQ346sfwcfdWDOwp3Ks3gPunbcn6iglXSHphQ==}
engines: {node: '>=12.11.0'}
'@primevue/core@4.2.3':
resolution: {integrity: sha512-Qjxl6rPzkvLaUQQeM5wXlmFQK9Pox+rSC+r7sX9ZGXeacD0LJny9YAF0APDv/V5Z1RiXApDvfOQGeu7Xg50vyg==}
engines: {node: '>=12.11.0'}
peerDependencies:
vue: ^3.3.0
'@primevue/forms@4.2.3':
resolution: {integrity: sha512-PX3KmqY5n+VdXsnZpASGmLZmjv77zjRQclihSvQUkwg+5iMnzvcJgbqQsyTtjTaCIel6va6VeUs/Xfk1N4fHHg==}
engines: {node: '>=12.11.0'}
'@primevue/icons@4.2.3':
resolution: {integrity: sha512-2yitSASyLdKtKPy8Fw8A71wycfZ14/lIlJ70JP0yGRy1nYbEBzEteMDGFOnlkFokbK/wdx9oOdYTDEul37FDdg==}
engines: {node: '>=12.11.0'}
'@primevue/metadata@4.2.3':
resolution: {integrity: sha512-ou47oOgcmsEyeXE85VHHXpefb2OS/XlYFWRoWZS6p1W6rHaEWI3TMBD6NwgsFZ5F4zRVnR/SPXuCURIm5HBi+Q==}
engines: {node: '>=12.11.0'}
'@primevue/themes@4.2.3':
resolution: {integrity: sha512-hzHEwUWkTQihUEDmT9U3QADoAsYbA6mif6RJSR/hDTnPdXIcmr5RuZGq3pnLl943KfJTBiSp98F6LvSB8boJAw==}
engines: {node: '>=12.11.0'}
'@rollup/pluginutils@5.1.3': '@rollup/pluginutils@5.1.3':
resolution: {integrity: sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==} resolution: {integrity: sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==}
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}
@ -1226,6 +1282,13 @@ packages:
resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==} resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
engines: {node: ^10 || ^12 || >=14} engines: {node: ^10 || ^12 || >=14}
primeicons@7.0.0:
resolution: {integrity: sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==}
primevue@4.2.3:
resolution: {integrity: sha512-kAkSOHmyBhe0NNzjfmZSAFNlxAWPTuTjWvYSxSv2OLVdy61F+IPQAENygaB7UdB4wY7NNxeBVbphEgjuipwTww==}
engines: {node: '>=12.11.0'}
queue-microtask@1.2.3: queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
@ -1369,6 +1432,23 @@ packages:
vite: vite:
optional: true optional: true
unplugin-vue-components@0.27.4:
resolution: {integrity: sha512-1XVl5iXG7P1UrOMnaj2ogYa5YTq8aoh5jwDPQhemwO/OrXW+lPQKDXd1hMz15qxQPxgb/XXlbgo3HQ2rLEbmXQ==}
engines: {node: '>=14'}
peerDependencies:
'@babel/parser': ^7.15.8
'@nuxt/kit': ^3.2.2
vue: 2 || 3
peerDependenciesMeta:
'@babel/parser':
optional: true
'@nuxt/kit':
optional: true
unplugin@1.16.0:
resolution: {integrity: sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==}
engines: {node: '>=14.0.0'}
update-browserslist-db@1.1.1: update-browserslist-db@1.1.1:
resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==} resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
hasBin: true hasBin: true
@ -1431,6 +1511,9 @@ packages:
typescript: typescript:
optional: true optional: true
webpack-virtual-modules@0.6.2:
resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
which@2.0.2: which@2.0.2:
resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
engines: {node: '>= 8'} engines: {node: '>= 8'}
@ -1787,6 +1870,47 @@ snapshots:
'@polka/url@1.0.0-next.28': {} '@polka/url@1.0.0-next.28': {}
'@primeuix/forms@0.0.2':
dependencies:
'@primeuix/utils': 0.3.2
'@primeuix/styled@0.3.2':
dependencies:
'@primeuix/utils': 0.3.2
'@primeuix/utils@0.3.2': {}
'@primevue/auto-import-resolver@4.2.3':
dependencies:
'@primevue/metadata': 4.2.3
'@primevue/core@4.2.3(vue@3.5.13(typescript@5.6.3))':
dependencies:
'@primeuix/styled': 0.3.2
'@primeuix/utils': 0.3.2
vue: 3.5.13(typescript@5.6.3)
'@primevue/forms@4.2.3(vue@3.5.13(typescript@5.6.3))':
dependencies:
'@primeuix/forms': 0.0.2
'@primeuix/utils': 0.3.2
'@primevue/core': 4.2.3(vue@3.5.13(typescript@5.6.3))
transitivePeerDependencies:
- vue
'@primevue/icons@4.2.3(vue@3.5.13(typescript@5.6.3))':
dependencies:
'@primeuix/utils': 0.3.2
'@primevue/core': 4.2.3(vue@3.5.13(typescript@5.6.3))
transitivePeerDependencies:
- vue
'@primevue/metadata@4.2.3': {}
'@primevue/themes@4.2.3':
dependencies:
'@primeuix/styled': 0.3.2
'@rollup/pluginutils@5.1.3(rollup@4.27.2)': '@rollup/pluginutils@5.1.3(rollup@4.27.2)':
dependencies: dependencies:
'@types/estree': 1.0.6 '@types/estree': 1.0.6
@ -2541,6 +2665,17 @@ snapshots:
picocolors: 1.1.1 picocolors: 1.1.1
source-map-js: 1.2.1 source-map-js: 1.2.1
primeicons@7.0.0: {}
primevue@4.2.3(vue@3.5.13(typescript@5.6.3)):
dependencies:
'@primeuix/styled': 0.3.2
'@primeuix/utils': 0.3.2
'@primevue/core': 4.2.3(vue@3.5.13(typescript@5.6.3))
'@primevue/icons': 4.2.3(vue@3.5.13(typescript@5.6.3))
transitivePeerDependencies:
- vue
queue-microtask@1.2.3: {} queue-microtask@1.2.3: {}
read-cache@1.0.0: read-cache@1.0.0:
@ -2739,6 +2874,30 @@ snapshots:
- supports-color - supports-color
- vue - vue
unplugin-vue-components@0.27.4(@babel/parser@7.26.2)(rollup@4.27.2)(vue@3.5.13(typescript@5.6.3)):
dependencies:
'@antfu/utils': 0.7.10
'@rollup/pluginutils': 5.1.3(rollup@4.27.2)
chokidar: 3.6.0
debug: 4.3.7
fast-glob: 3.3.2
local-pkg: 0.5.1
magic-string: 0.30.12
minimatch: 9.0.5
mlly: 1.7.3
unplugin: 1.16.0
vue: 3.5.13(typescript@5.6.3)
optionalDependencies:
'@babel/parser': 7.26.2
transitivePeerDependencies:
- rollup
- supports-color
unplugin@1.16.0:
dependencies:
acorn: 8.14.0
webpack-virtual-modules: 0.6.2
update-browserslist-db@1.1.1(browserslist@4.24.2): update-browserslist-db@1.1.1(browserslist@4.24.2):
dependencies: dependencies:
browserslist: 4.24.2 browserslist: 4.24.2
@ -2778,6 +2937,8 @@ snapshots:
optionalDependencies: optionalDependencies:
typescript: 5.6.3 typescript: 5.6.3
webpack-virtual-modules@0.6.2: {}
which@2.0.2: which@2.0.2:
dependencies: dependencies:
isexe: 2.0.0 isexe: 2.0.0

17
src/App.vue
View File

@ -1,9 +1,22 @@
<script setup lang="ts"> <script setup lang="ts">
import TutorialForm from './tutorial-form/index.vue' import TutorialForm from './tutorial-form/index.vue'
import ZodForm from './zod-form/index.vue' import ZodForm from './zod-form/index.vue'
import AllCustom from './all-custom/all-custom.vue'
import AllCustomPrimevue from './all-custom-primevue/all-custom-primevue.vue'
</script> </script>
<template> <template>
<ZodForm /> <ZodForm v-if="false" />
<TutorialForm /> <TutorialForm v-if="false" />
<div class="flex items-start">
<div class="w-1/2 p-4 bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white m-4 ">
<AllCustom />
</div>
<div class="w-1/2 p-4 bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white m-4 ">
<AllCustomPrimevue class="w-1/2" />
</div>
</div>
</template> </template>

76
src/all-custom-primevue/all-custom-primevue.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<form @submit.prevent="onFormSubmit">
<Fieldset
legend="Form 1"
pt:content:class="flex flex-col gap-4 w-full sm:w-56"
>
<div class="flex flex-col gap-1">
<label for="username">Username</label>
<InputText
id="username"
type="text"
placeholder="Username"
fluid
:invalid="true"
/>
<Message
icon="pi pi-key"
severity="warn"
size="small"
variant="simple"
>消息 warn</Message>
</div>
<FormField
name="FormField"
initialValue="1"
class="flex flex-col gap-1"
>
<label
for="password"
class="font-bold block mb-2"
>Password</label>
<Password
name="password"
placeholder="Password"
:feedback="false"
toggleMask
fluid
/>
<Message
severity="error"
size="small"
variant="simple"
>
<ul class="my-0 px-4 flex flex-col gap-1">
<li
v-for="(error, index) in [
{ message: '错误1' },
{ message: '错误2' }
]"
:key="index"
>{{ error.message }}</li>
</ul>
</Message>
</FormField>
<Button
type="submit"
severity="secondary"
label="Submit"
/>
</Fieldset>
</form>
</template>
<script setup lang="ts">
import Message from 'primevue/message';
function onFormSubmit(...args: any[]) {
console.debug(`args :>> `, args);
console.log('Form submitted');
}
</script>

31
src/all-custom/all-custom.vue Normal file
View File

@ -0,0 +1,31 @@
<script setup lang="ts">
import Swal from 'sweetalert2';
import { form } from '../inputs/form'
import { FormKitSummary } from '@formkit/vue'
async function submit() {
await new Promise(r => setTimeout(r, 300))
Swal.fire({
title: 'Submitted! 🎉',
icon: 'success',
showConfirmButton: false,
timer: 1500
})
}
</script>
<template>
<!-- https://formkit.com/inputs/form#props-attributes -->
<FormKit
:type="form"
@submit="submit"
submit-label="提交 ✨"
:submit-attrs="{ class: 'btn btn-primary' }"
:errors="['Our server is not working.', 'But we don’t like you anyway!']"
incomplete-message="Please fill out all fields."
>
<FormKitSummary />
<div>content</div>
</FormKit>
</template>

48
src/inputs/form.ts Normal file
View File

@ -0,0 +1,48 @@
import { FormKitTypeDefinition } from '@formkit/core'
import {
formInput,
messages,
message,
actions,
submitInput,
forms,
disablesChildren,
} from '@formkit/inputs'
/**
* Input definition for a form.
* @public
*/
export const form: FormKitTypeDefinition = {
/**
* The actual schema of the input, or a function that returns the schema.
*/
schema: formInput(
'$slots.default',
messages(message('$message.value')),
actions(submitInput())
),
/**
* The type of node, can be a list, group, or input.
*/
type: 'group',
/**
* An array of extra props to accept for this input.
*/
props: [
'actions',
'submit',
'submitLabel',
'submitAttrs',
'submitBehavior',
'incompleteMessage',
],
/**
* Additional features that should be added to your input
*/
features: [forms, disablesChildren],
/**
* The key used to memoize the schema.
*/
schemaMemoKey: 'rorzq1rsrf',
}

14
src/main.ts
View File

@ -4,11 +4,25 @@ import { createApp } from 'vue'
import formKitConfig from '../formkit.config' import formKitConfig from '../formkit.config'
import App from './App.vue' import App from './App.vue'
import PrimeVue from "primevue/config";
import Aura from '@primevue/themes/aura';
import ToastService from 'primevue/toastservice';
// import '@unocss/reset/normalize.css'
// import '@unocss/reset/sanitize/sanitize.css'
// import '@unocss/reset/sanitize/assets.css'
// import '@unocss/reset/eric-meyer.css'
// import '@unocss/reset/tailwind-compat.css' // import '@unocss/reset/tailwind-compat.css'
// import '@unocss/reset/tailwind.css' // import '@unocss/reset/tailwind.css'
import 'virtual:uno.css' import 'virtual:uno.css'
import 'primeicons/primeicons.css'
const app = createApp(App) const app = createApp(App)
app.use(PrimeVue, { theme: { preset: Aura } });
app.use(ToastService);
// https://github.dev/formkit/auto-animate/blob/master/docs/src/examples/formkit/ActualFormKit.vue // https://github.dev/formkit/auto-animate/blob/master/docs/src/examples/formkit/ActualFormKit.vue
app.use(autoAnimatePlugin) // v-auto-animate="{ duration: 100 }" app.use(autoAnimatePlugin) // v-auto-animate="{ duration: 100 }"

11
vite.config.ts
View File

@ -1,10 +1,19 @@
import UnoCSS from 'unocss/vite' import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import { PrimeVueResolver } from '@primevue/auto-import-resolver';
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue(), UnoCSS(),], plugins: [vue(), UnoCSS(),
Components({
resolvers: [
PrimeVueResolver()
]
})
],
build: { build: {
sourcemap: true sourcemap: true
} }