diff --git a/components.d.ts b/components.d.ts new file mode 100644 index 0000000..66e84c7 --- /dev/null +++ b/components.d.ts @@ -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'] + } +} diff --git a/formkit.config.ts b/formkit.config.ts index 247ad30..d8d00a1 100644 --- a/formkit.config.ts +++ b/formkit.config.ts @@ -2,37 +2,38 @@ import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formki import type { FormKitOptions } from '@formkit/core' import { createI18nPlugin, zh } from '@formkit/i18n' import { genesisIcons } from '@formkit/icons' -import { createLibraryPlugin } from '@formkit/inputs' +import { createLibraryPlugin, submit } from '@formkit/inputs' import { createProPlugin, toggle } from '@formkit/pro' import * as defaultRules from '@formkit/rules' import { createThemePlugin } from '@formkit/themes' import { createValidationPlugin } from '@formkit/validation' import { /* defaultConfig, */ bindings, createInput } from '@formkit/vue' import { addAsteriskPlugin } from './formkit.addAsteriskPlugin' -import { fkLibrary } from './formkit.config.fkLibrary' +// import { fkLibrary } from './formkit.config.fkLibrary' import { rootClasses } from "./formkit.config.theme" import HeadlessuiToggle from "./src/headlessui-switch.vue" +import { register as decodeErrors } from '@formkit/dev' + +decodeErrors(); const validation = createValidationPlugin(defaultRules) -const i18n = createI18nPlugin({ zh }) + const theme = undefined; const icons = genesisIcons; -const themePlugin = createThemePlugin(theme, icons/* , iconLoaderUrl, iconLoader */) const apiKey = 'fk-6cdd5192223' export default { plugins: [ createProPlugin(apiKey, { toggle }), - - createLibraryPlugin(fkLibrary), - - createLibraryPlugin( - { - 'headlessuiSwitch': createInput(HeadlessuiToggle), - } - ), - - themePlugin, bindings, i18n, validation, addAsteriskPlugin, + // createLibraryPlugin(fkLibrary), + createLibraryPlugin({ + submit, + }), + createThemePlugin(theme, icons/* , iconLoaderUrl, iconLoader */), + bindings, + createI18nPlugin({ zh }), + validation, + addAsteriskPlugin, // https://github.com/formkit/formkit/blob/ac1947a305eb5082ba95f53800305d080787cb32/packages/addons/src/plugins/autoHeightTextarea.ts createAutoHeightTextareaPlugin(), @@ -54,5 +55,7 @@ export default { // } ) ], - config: { rootClasses }, + config: { + // rootClasses, + }, } satisfies FormKitOptions \ No newline at end of file diff --git a/index.html b/index.html index dcae95e..68588ce 100644 --- a/index.html +++ b/index.html @@ -15,12 +15,13 @@ Vue FormKit Example + diff --git a/package.json b/package.json index 6da38db..755d980 100644 --- a/package.json +++ b/package.json @@ -19,19 +19,25 @@ "@formkit/vue": "latest", "@formkit/zod": "^1.6.9", "@headlessui/vue": "^1.7.23", + "@primevue/forms": "^4.2.3", + "@primevue/themes": "^4.2.3", "autoprefixer": "latest", "i18next": "^23.16.6", "postcss": "latest", + "primeicons": "^7.0.0", + "primevue": "^4.2.3", "sweetalert2": "^11.14.5", "tailwindcss": "latest", "vue": "^3.5.13", "zod-i18n-map": "^2.27.0" }, "devDependencies": { + "@primevue/auto-import-resolver": "^4.2.3", "@unocss/extractor-arbitrary-variants": "^0.64.1", "@vitejs/plugin-vue": "^5.2.0", "typescript": "~5.6.3", "unocss": "^0.64.1", + "unplugin-vue-components": "^0.27.4", "vite": "^5.4.11", "vue-tsc": "^2.1.10" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b4f746d..3e90e80 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,12 @@ importers: '@headlessui/vue': specifier: ^1.7.23 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: specifier: latest version: 10.4.20(postcss@8.4.49) @@ -41,6 +47,12 @@ importers: postcss: specifier: latest 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: specifier: ^11.14.5 version: 11.14.5 @@ -54,6 +66,9 @@ importers: specifier: ^2.27.0 version: 2.27.0(i18next@23.16.6)(zod@3.23.8) devDependencies: + '@primevue/auto-import-resolver': + specifier: ^4.2.3 + version: 4.2.3 '@unocss/extractor-arbitrary-variants': specifier: ^0.64.1 version: 0.64.1 @@ -66,6 +81,9 @@ importers: unocss: 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)) + 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: specifier: ^5.4.11 version: 5.4.11 @@ -515,6 +533,44 @@ packages: '@polka/url@1.0.0-next.28': 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': resolution: {integrity: sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==} engines: {node: '>=14.0.0'} @@ -1226,6 +1282,13 @@ packages: resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==} 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: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} @@ -1369,6 +1432,23 @@ packages: vite: 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: resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==} hasBin: true @@ -1431,6 +1511,9 @@ packages: typescript: optional: true + webpack-virtual-modules@0.6.2: + resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==} + which@2.0.2: resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} engines: {node: '>= 8'} @@ -1787,6 +1870,47 @@ snapshots: '@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)': dependencies: '@types/estree': 1.0.6 @@ -2541,6 +2665,17 @@ snapshots: picocolors: 1.1.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: {} read-cache@1.0.0: @@ -2739,6 +2874,30 @@ snapshots: - supports-color - 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): dependencies: browserslist: 4.24.2 @@ -2778,6 +2937,8 @@ snapshots: optionalDependencies: typescript: 5.6.3 + webpack-virtual-modules@0.6.2: {} + which@2.0.2: dependencies: isexe: 2.0.0 diff --git a/src/App.vue b/src/App.vue index 1e06ee2..8b83eaa 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,9 +1,22 @@ diff --git a/src/all-custom-primevue/all-custom-primevue.vue b/src/all-custom-primevue/all-custom-primevue.vue new file mode 100644 index 0000000..2a26460 --- /dev/null +++ b/src/all-custom-primevue/all-custom-primevue.vue @@ -0,0 +1,76 @@ + + + diff --git a/src/all-custom/all-custom.vue b/src/all-custom/all-custom.vue new file mode 100644 index 0000000..0429103 --- /dev/null +++ b/src/all-custom/all-custom.vue @@ -0,0 +1,31 @@ + + + diff --git a/src/inputs/form.ts b/src/inputs/form.ts new file mode 100644 index 0000000..57f0986 --- /dev/null +++ b/src/inputs/form.ts @@ -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', +} diff --git a/src/main.ts b/src/main.ts index aabfa62..46f0e5a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,11 +4,25 @@ import { createApp } from 'vue' import formKitConfig from '../formkit.config' 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.css' + import 'virtual:uno.css' +import 'primeicons/primeicons.css' 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 app.use(autoAnimatePlugin) // v-auto-animate="{ duration: 100 }" diff --git a/vite.config.ts b/vite.config.ts index 6643f8a..257a9b9 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,10 +1,19 @@ import UnoCSS from 'unocss/vite' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' +import Components from 'unplugin-vue-components/vite'; +import { PrimeVueResolver } from '@primevue/auto-import-resolver'; // https://vite.dev/config/ export default defineConfig({ - plugins: [vue(), UnoCSS(),], + plugins: [vue(), UnoCSS(), + Components({ + resolvers: [ + PrimeVueResolver() + ] + }) + + ], build: { sourcemap: true }