feat: PrimeVue 表单

2024-11-23 22:00:09 +08:00
parent fa094e68ff
commit 533a762151
11 changed files with 402 additions and 20 deletions
--- a/components.d.ts
+++ 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']
+  }
+}
--- 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
--- a/index.html
+++ b/index.html
@ -15,12 +15,13 @@
  <title>Vue FormKit Example</title>
  <link
    rel="stylesheet"
-    href="/src/assets/main.css"
+    href="/src/assets/tailwind.css"
  >
  <link
    rel="stylesheet"
-    href="/src/assets/tailwind.css"
+    href="/src/assets/main.css"
  >
+
 </head>

 <body>
--- 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"
  }
--- 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
--- a/src/App.vue
+++ b/src/App.vue
@ -1,9 +1,22 @@
 <script setup lang="ts">
 import TutorialForm from './tutorial-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>

 <template>
-  <ZodForm />
-  <TutorialForm />
+  <ZodForm v-if="false" />
+  <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>
--- a/src/all-custom-primevue/all-custom-primevue.vue
+++ b/src/all-custom-primevue/all-custom-primevue.vue
@ -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>
--- a/src/all-custom/all-custom.vue
+++ b/src/all-custom/all-custom.vue
@ -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>
--- a/src/inputs/form.ts
+++ 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',
+}
--- 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 }"
--- 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
  }