feat: add VbenForm component (#4352)

* feat: add form component

* fix: build error

* feat: add form adapter

* feat: add some component

* feat: add some component

* feat: add example

* feat: suppoer custom action button

* chore: update

* feat: add example

* feat: add formModel,formDrawer demo

* fix: build error

* fix: typo

* fix: ci error

---------

Co-authored-by: jinmao <jinmao88@qq.com>
Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>

packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
 
+import { $t } from '@vben/locales';
+import { useVbenForm, z } from '@vben-core/form-ui';
 import { useVbenModal } from '@vben-core/popup-ui';
-import {
-  VbenAvatar,
-  VbenButton,
-  VbenInputPassword,
-} from '@vben-core/shadcn-ui';
+import { VbenAvatar, VbenButton } from '@vben-core/shadcn-ui';
 
 interface Props {
   avatar?: string;
@@ -34,10 +32,29 @@ const emit = defineEmits<{
   submit: RegisterEmits['submit'];
 }>();
 
-const formState = reactive({
-  lockScreenPassword: '',
-  submitted: false,
-});
+const [Form, { resetForm, validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => [
+      {
+        component: 'VbenInputPassword' as const,
+        componentProps: {
+          placeholder: $t('widgets.lockScreen.placeholder'),
+        },
+        fieldName: 'lockScreenPassword',
+        formFieldProps: { validateOnBlur: false },
+        label: $t('authentication.password'),
+        rules: z
+          .string()
+          .min(1, { message: $t('widgets.lockScreen.placeholder') }),
+      },
+    ]),
+    showDefaultActions: false,
+  }),
+);
 
 const [Modal] = useVbenModal({
   onConfirm() {
@@ -45,27 +62,16 @@ const [Modal] = useVbenModal({
   },
   onOpenChange(isOpen) {
     if (isOpen) {
-      // reset value reopen
-      formState.submitted = false;
-      formState.lockScreenPassword = '';
+      resetForm();
     }
   },
 });
 
-const passwordStatus = computed(() => {
-  return formState.submitted && !formState.lockScreenPassword
-    ? 'error'
-    : 'default';
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-  if (passwordStatus.value !== 'default') {
-    return;
+async function handleSubmit() {
+  const { valid, values } = await validate();
+  if (valid) {
+    emit('submit', values?.lockScreenPassword);
   }
-  emit('submit', {
-    lockScreenPassword: formState.lockScreenPassword,
-  });
 }
 </script>
 
@@ -90,17 +96,8 @@ function handleSubmit() {
             {{ text }}
           </div>
         </div>
-        <VbenInputPassword
-          v-model="formState.lockScreenPassword"
-          :error-tip="$t('widgets.lockScreen.placeholder')"
-          :label="$t('widgets.lockScreen.password')"
-          :placeholder="$t('widgets.lockScreen.placeholder')"
-          :status="passwordStatus"
-          name="password"
-          required
-          type="password"
-        />
-        <VbenButton class="w-full" @click="handleSubmit">
+        <Form />
+        <VbenButton class="mt-1 w-full" @click="handleSubmit">
           {{ $t('widgets.lockScreen.screenButton') }}
         </VbenButton>
       </div>