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>
2024-09-10 21:48:51 +08:00
parent 86ed732ca8
commit 524b9badf2
271 changed files with 5974 additions and 1247 deletions
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -20,10 +20,10 @@
    }
  },
  "dependencies": {
+    "@vben-core/form-ui": "workspace:*",
    "@vben-core/popup-ui": "workspace:*",
    "@vben-core/shadcn-ui": "workspace:*",
    "@vben/constants": "workspace:*",
-    "@vben/hooks": "workspace:*",
    "@vben/icons": "workspace:*",
    "@vben/locales": "workspace:*",
    "@vben/types": "workspace:*",
--- a/packages/effects/common-ui/src/components/captcha/index.ts
+++ b/packages/effects/common-ui/src/components/captcha/index.ts
@@ -1,8 +1,2 @@
 export { default as PointSelectionCaptcha } from './point-selection-captcha.vue';
-export interface Point {
-  i: number;
-  x: number;
-  y: number;
-  t: number;
-}
-export type ClearFunction = () => void;
+export type * from './types';
--- a/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
+++ b/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { CaptchaPoint } from './types';
+
 import { computed, ref } from 'vue';

-import { SvgRefreshIcon } from '@vben/icons';
+import { RotateCw } from '@vben/icons';
 import {
  Card,
  CardContent,
@@ -12,8 +14,6 @@ import {
  VbenIconButton,
 } from '@vben-core/shadcn-ui';

-import { type Point } from '.';
-
 interface Props {
  /**
   * 点选的图片
@@ -74,7 +74,7 @@ const props = withDefaults(defineProps<Props>(), {

 const emit = defineEmits<{
  click: [number, number];
-  confirm: [Array<Point>, clear: () => void];
+  confirm: [Array<CaptchaPoint>, clear: () => void];
  refresh: [];
 }>();

@@ -129,10 +129,10 @@ function getElementPosition(element: HTMLElement) {
    y: posY,
  };
 }
-const points = ref<Point[]>([]);
+const points = ref<CaptchaPoint[]>([]);
 const POINT_OFFSET = 11;

-function handleClick(e: any | Event) {
+function handleClick(e: MouseEvent) {
  try {
    const dom = e.currentTarget as HTMLElement;
    if (!dom) throw new Error('Element not found');
@@ -231,7 +231,7 @@ function handleConfirm() {
    </CardContent>
    <CardFooter class="mt-2 flex justify-between p-0">
      <VbenIconButton aria-label="刷新验证码" @click="handleRefresh">
-        <SvgRefreshIcon class="size-6" />
+        <RotateCw class="size-5" />
      </VbenIconButton>
      <VbenButton aria-label="确认选择" @click="handleConfirm">
        确认
--- a/packages/effects/common-ui/src/components/captcha/types.ts
+++ b/packages/effects/common-ui/src/components/captcha/types.ts
@@ -0,0 +1,6 @@
+export interface CaptchaPoint {
+  i: number;
+  x: number;
+  y: number;
+  t: number;
+}
--- a/packages/effects/common-ui/src/components/index.ts
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -1,6 +1,8 @@
 export * from './captcha';
 export * from './ellipsis-text';
 export * from './page';
+export * from '@vben-core/form-ui';
 export * from '@vben-core/popup-ui';

+// 给文档用
 export { VbenButton } from '@vben-core/shadcn-ui';
--- a/packages/effects/common-ui/src/ui/authentication/code-login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/code-login.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
 import type { LoginCodeEmits } from './types';

-import { computed, onBeforeUnmount, reactive, ref } from 'vue';
+import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';

 import { $t } from '@vben/locales';
-import { VbenButton, VbenInput, VbenPinInput } from '@vben-core/shadcn-ui';
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';

 import Title from './auth-title.vue';

 interface Props {
+  formSchema: VbenFormSchema[];
  /**
   * @zh_CN 是否处于加载处理状态
   */
@@ -35,82 +39,31 @@ const emit = defineEmits<{

 const router = useRouter();

-const formState = reactive({
-  code: '',
-  phoneNumber: '',
-  requirePhoneNumber: false,
-  submitted: false,
-});
+const [Form, { validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);

-const countdown = ref(0);
-const timer = ref<ReturnType<typeof setTimeout>>();
+async function handleSubmit() {
+  const { valid, values } = await validate();

-const isValidPhoneNumber = computed(() => {
-  return /^1[3-9]\d{9}$/.test(formState.phoneNumber);
-});
-
-const btnText = computed(() => {
-  return countdown.value > 0
-    ? $t('authentication.sendText', [countdown.value])
-    : $t('authentication.sendCode');
-});
-const btnLoading = computed(() => {
-  return countdown.value > 0;
-});
-
-const phoneNumberStatus = computed(() => {
-  return (formState.submitted || formState.requirePhoneNumber) &&
-    !isValidPhoneNumber.value
-    ? 'error'
-    : 'default';
-});
-
-const codeStatus = computed(() => {
-  return formState.submitted && !formState.code ? 'error' : 'default';
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-  if (phoneNumberStatus.value !== 'default' || codeStatus.value !== 'default') {
-    return;
+  if (valid) {
+    emit('submit', {
+      code: values?.code,
+      phoneNumber: values?.phoneNumber,
+    });
  }
-
-  emit('submit', {
-    code: formState.code,
-    phoneNumber: formState.phoneNumber,
-  });
 }

 function goToLogin() {
  router.push(props.loginPath);
 }
-
-async function handleSendCode() {
-  if (btnLoading.value) {
-    return;
-  }
-  if (!isValidPhoneNumber.value) {
-    formState.requirePhoneNumber = true;
-    return;
-  }
-  countdown.value = 60;
-  // TODO: 调用发送验证码接口
-  startCountdown();
-}
-
-function startCountdown() {
-  if (countdown.value > 0) {
-    timer.value = setTimeout(() => {
-      countdown.value--;
-      startCountdown();
-    }, 1000);
-  }
-}
-
-onBeforeUnmount(() => {
-  countdown.value = 0;
-  clearTimeout(timer.value);
-});
 </script>

 <template>
@@ -123,31 +76,8 @@ onBeforeUnmount(() => {
        </span>
      </template>
    </Title>
-    <VbenInput
-      v-model="formState.phoneNumber"
-      :autofocus="true"
-      :error-tip="$t('authentication.mobile-tip')"
-      :label="$t('authentication.mobile')"
-      :placeholder="$t('authentication.mobile')"
-      :status="phoneNumberStatus"
-      name="phoneNumber"
-      type="number"
-      @keyup.enter="handleSubmit"
-    />
-    <VbenPinInput
-      v-model="formState.code"
-      :btn-loading="btnLoading"
-      :btn-text="btnText"
-      :code-length="4"
-      :error-tip="$t('authentication.codeTip')"
-      :handle-send-code="handleSendCode"
-      :label="$t('authentication.code')"
-      :placeholder="$t('authentication.code')"
-      :status="codeStatus"
-      name="password"
-      @keyup.enter="handleSubmit"
-    />
-    <VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
+    <Form />
+    <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
      {{ $t('common.login') }}
    </VbenButton>
    <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
--- a/packages/effects/common-ui/src/ui/authentication/forget-password.vue
+++ b/packages/effects/common-ui/src/ui/authentication/forget-password.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';

 import { $t } from '@vben/locales';
-import { VbenButton, VbenInput } from '@vben-core/shadcn-ui';
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';

 import Title from './auth-title.vue';

@@ -16,10 +19,12 @@ interface Props {
   * @zh_CN 登陆路径
   */
  loginPath?: string;
+
+  formSchema: VbenFormSchema[];
 }

 defineOptions({
-  name: 'AuthenticationForgetPassword',
+  name: 'ForgetPassword',
 });

 const props = withDefaults(defineProps<Props>(), {
@@ -31,22 +36,25 @@ const emit = defineEmits<{
  submit: [string];
 }>();

+const [Form, { validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
 const router = useRouter();
-const formState = reactive({
-  email: '',
-  submitted: false,
-});

-const emailStatus = computed(() => {
-  return formState.submitted && !formState.email ? 'error' : 'default';
-});
+async function handleSubmit() {
+  const { valid, values } = await validate();

-function handleSubmit() {
-  formState.submitted = true;
-  if (emailStatus.value !== 'default') {
-    return;
+  if (valid) {
+    emit('submit', values?.email);
  }
-  emit('submit', formState.email);
 }

 function goToLogin() {
@@ -62,18 +70,8 @@ function goToLogin() {
        {{ $t('authentication.forgetPasswordSubtitle') }}
      </template>
    </Title>
-    <div class="mb-6">
-      <VbenInput
-        v-model="formState.email"
-        :error-tip="$t('authentication.emailTip')"
-        :label="$t('authentication.email')"
-        :status="emailStatus"
-        autofocus
-        name="email"
-        placeholder="example@example.com"
-        type="text"
-      />
-    </div>
+    <Form />
+
    <div>
      <VbenButton class="mt-2 w-full" @click="handleSubmit">
        {{ $t('authentication.sendResetLink') }}
--- a/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import type { AuthenticationProps, LoginAndRegisterParams } from './types';
+import type { AuthenticationProps } from './types';

 import { watch } from 'vue';

-import { useForwardPropsEmits } from '@vben/hooks';
 import { useVbenModal } from '@vben-core/popup-ui';
-import { VbenAvatar } from '@vben-core/shadcn-ui';
-
-import AuthenticationLogin from './login.vue';
+import { Slot, VbenAvatar } from '@vben-core/shadcn-ui';

 interface Props extends AuthenticationProps {
  avatar?: string;
@@ -17,18 +14,12 @@ defineOptions({
  name: 'LoginExpiredModal',
 });

-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
  avatar: '',
 });

-const emit = defineEmits<{
-  submit: [LoginAndRegisterParams];
-}>();
-
 const open = defineModel<boolean>('open');

-const forwarded = useForwardPropsEmits(props, emit);
-
 const [Modal, modalApi] = useVbenModal();

 watch(
@@ -51,14 +42,15 @@ watch(
      class="border-none px-10 py-6 text-center shadow-xl sm:w-[600px] sm:rounded-2xl md:h-[unset]"
    >
      <VbenAvatar :src="avatar" class="mx-auto mb-6 size-20" />
-      <AuthenticationLogin
-        v-bind="forwarded"
+      <Slot
        :show-forget-password="false"
        :show-register="false"
        :show-remember-me="false"
        :sub-title="$t('authentication.loginAgainSubTitle')"
        :title="$t('authentication.loginAgainTitle')"
-      />
+      >
+        <slot> </slot>
+      </Slot>
    </Modal>
  </div>
 </template>
--- a/packages/effects/common-ui/src/ui/authentication/login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
 import type { AuthenticationProps, LoginEmits } from './types';

-import { computed, reactive } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';

 import { $t } from '@vben/locales';
-import {
-  VbenButton,
-  VbenCheckbox,
-  VbenInput,
-  VbenInputPassword,
-} from '@vben-core/shadcn-ui';
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton, VbenCheckbox } from '@vben-core/shadcn-ui';

 import Title from './auth-title.vue';
 import ThirdPartyLogin from './third-party-login.vue';

-interface Props extends AuthenticationProps {}
+interface Props extends AuthenticationProps {
+  formSchema: VbenFormSchema[];
+}

 defineOptions({
  name: 'AuthenticationLogin',
 });

-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
  codeLoginPath: '/auth/code-login',
  forgetPasswordPath: '/auth/forget-password',
+  formSchema: () => [],
  loading: false,
-  passwordPlaceholder: '',
  qrCodeLoginPath: '/auth/qrcode-login',
  registerPath: '/auth/register',
  showCodeLogin: true,
@@ -36,58 +36,50 @@ withDefaults(defineProps<Props>(), {
  showThirdPartyLogin: true,
  subTitle: '',
  title: '',
-  usernamePlaceholder: '',
 });

 const emit = defineEmits<{
  submit: LoginEmits['submit'];
 }>();

+const [Form, { setFieldValue, validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
 const router = useRouter();

 const REMEMBER_ME_KEY = `REMEMBER_ME_USERNAME_${location.hostname}`;

 const localUsername = localStorage.getItem(REMEMBER_ME_KEY) || '';

-const formState = reactive({
-  password: '',
-  rememberMe: !!localUsername,
-  submitted: false,
-  username: localUsername,
-});
+const rememberMe = ref(!!localUsername);

-const usernameStatus = computed(() => {
-  return formState.submitted && !formState.username ? 'error' : 'default';
-});
-
-const passwordStatus = computed(() => {
-  return formState.submitted && !formState.password ? 'error' : 'default';
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-
-  if (
-    usernameStatus.value !== 'default' ||
-    passwordStatus.value !== 'default'
-  ) {
-    return;
+async function handleSubmit() {
+  const { valid, values } = await validate();
+  if (valid) {
+    localStorage.setItem(
+      REMEMBER_ME_KEY,
+      rememberMe.value ? values?.username : '',
+    );
+    emit('submit', values as { password: string; username: string });
  }
-
-  localStorage.setItem(
-    REMEMBER_ME_KEY,
-    formState.rememberMe ? formState.username : '',
-  );
-
-  emit('submit', {
-    password: formState.password,
-    username: formState.username,
-  });
 }

 function handleGo(path: string) {
  router.push(path);
 }
+
+onMounted(() => {
+  if (localUsername) {
+    setFieldValue('username', localUsername);
+  }
+});
 </script>

 <template>
@@ -103,34 +95,14 @@ function handleGo(path: string) {
      </Title>
    </slot>

-    <VbenInput
-      v-model="formState.username"
-      :autofocus="false"
-      :error-tip="$t('authentication.usernameTip')"
-      :label="$t('authentication.username')"
-      :placeholder="usernamePlaceholder || $t('authentication.username')"
-      :status="usernameStatus"
-      name="username"
-      required
-      type="text"
-    />
-    <VbenInputPassword
-      v-model="formState.password"
-      :error-tip="$t('authentication.passwordTip')"
-      :label="$t('authentication.password')"
-      :placeholder="passwordPlaceholder || $t('authentication.password')"
-      :status="passwordStatus"
-      name="password"
-      required
-      type="password"
-    />
+    <Form />

    <div
      v-if="showRememberMe || showForgetPassword"
-      class="mb-6 mt-4 flex justify-between"
+      class="mb-6 flex justify-between"
    >
      <div v-if="showRememberMe" class="flex-center">
-        <VbenCheckbox v-model:checked="formState.rememberMe" name="rememberMe">
+        <VbenCheckbox v-model:checked="rememberMe" name="rememberMe">
          {{ $t('authentication.rememberMe') }}
        </VbenCheckbox>
      </div>
--- a/packages/effects/common-ui/src/ui/authentication/register.vue
+++ b/packages/effects/common-ui/src/ui/authentication/register.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
 import type { RegisterEmits } from './types';

 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';

 import { $t } from '@vben/locales';
-import {
-  VbenButton,
-  VbenCheckbox,
-  VbenInput,
-  VbenInputPassword,
-} from '@vben-core/shadcn-ui';
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';

 import Title from './auth-title.vue';

 interface Props {
+  formSchema: VbenFormSchema[];
  /**
   * @zh_CN 是否处于加载处理状态
   */
@@ -30,6 +29,7 @@ defineOptions({
 });

 const props = withDefaults(defineProps<Props>(), {
+  formSchema: () => [],
  loading: false,
  loginPath: '/auth/login',
 });
@@ -38,43 +38,24 @@ const emit = defineEmits<{
  submit: RegisterEmits['submit'];
 }>();

+const [Form, { validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
 const router = useRouter();

-const formState = reactive({
-  agreePolicy: false,
-  confirmPassword: '',
-  password: '',
-  submitted: false,
-  username: '',
-});
-
-const usernameStatus = computed(() => {
-  return formState.submitted && !formState.username ? 'error' : 'default';
-});
-
-const passwordStatus = computed(() => {
-  return formState.submitted && !formState.password ? 'error' : 'default';
-});
-
-const confirmPasswordStatus = computed(() => {
-  return formState.submitted && formState.password !== formState.confirmPassword
-    ? 'error'
-    : 'default';
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-  if (
-    usernameStatus.value !== 'default' ||
-    passwordStatus.value !== 'default'
-  ) {
-    return;
+async function handleSubmit() {
+  const { valid, values } = await validate();
+  if (valid) {
+    emit('submit', values as { password: string; username: string });
  }
-
-  emit('submit', {
-    password: formState.password,
-    username: formState.username,
-  });
 }

 function goToLogin() {
@@ -88,73 +69,11 @@ function goToLogin() {
      {{ $t('authentication.createAnAccount') }} 🚀
      <template #desc> {{ $t('authentication.signUpSubtitle') }} </template>
    </Title>
-    <VbenInput
-      v-model="formState.username"
-      :error-tip="$t('authentication.usernameTip')"
-      :label="$t('authentication.username')"
-      :placeholder="$t('authentication.username')"
-      :status="usernameStatus"
-      name="username"
-      type="text"
-    />
-    <!-- Use 8 or more characters with a mix of letters, numbers & symbols. -->
-    <VbenInputPassword
-      v-model="formState.password"
-      :error-tip="$t('authentication.passwordTip')"
-      :label="$t('authentication.password')"
-      :password-strength="true"
-      :placeholder="$t('authentication.password')"
-      :status="passwordStatus"
-      name="password"
-      required
-      type="password"
-    >
-      <template #strengthText>
-        {{ $t('authentication.passwordStrength') }}
-      </template>
-    </VbenInputPassword>
+    <Form />

-    <VbenInputPassword
-      v-model="formState.confirmPassword"
-      :error-tip="$t('authentication.confirmPasswordTip')"
-      :label="$t('authentication.confirmPassword')"
-      :placeholder="$t('authentication.confirmPassword')"
-      :status="confirmPasswordStatus"
-      name="confirmPassword"
-      required
-      type="password"
-    />
-
-    <div class="relative mt-4 flex pb-6">
-      <div class="flex-center">
-        <VbenCheckbox
-          v-model:checked="formState.agreePolicy"
-          name="agreePolicy"
-        >
-          {{ $t('authentication.agree') }}
-          <span class="text-primary hover:text-primary-hover">{{
-            $t('authentication.privacyPolicy')
-          }}</span>
-          &
-          <span class="text-primary hover:text-primary-hover">
-            {{ $t('authentication.terms') }}
-          </span>
-        </VbenCheckbox>
-      </div>
-      <Transition name="slide-up">
-        <p
-          v-show="formState.submitted && !formState.agreePolicy"
-          class="text-destructive absolute bottom-1 left-0 text-xs"
-        >
-          {{ $t('authentication.agreeTip') }}
-        </p>
-      </Transition>
-    </div>
-    <div>
-      <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
-        {{ $t('authentication.signUp') }}
-      </VbenButton>
-    </div>
+    <VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
+      {{ $t('authentication.signUp') }}
+    </VbenButton>
    <div class="mt-4 text-center text-sm">
      {{ $t('authentication.alreadyHaveAccount') }}
      <span
--- a/packages/effects/common-ui/src/ui/authentication/types.ts
+++ b/packages/effects/common-ui/src/ui/authentication/types.ts
@@ -13,11 +13,6 @@ interface AuthenticationProps {
   */
  loading?: boolean;

-  /**
-   * @zh_CN 密码占位符
-   */
-  passwordPlaceholder?: string;
-
  /**
   * @zh_CN 二维码登录路径
   */
@@ -66,11 +61,6 @@ interface AuthenticationProps {
   * @zh_CN 登录框标题
   */
  title?: string;
-
-  /**
-   * @zh_CN 用户名占位符
-   */
-  usernamePlaceholder?: string;
 }

 interface LoginAndRegisterParams {