feat: PrimeVue 表单

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>

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>

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>

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',
+}

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 }"