@vrx-arco/pro-components/dist/LoginForm/index.js

<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const webVue = require("@arco-design/web-vue");
const core = require("@vueuse/core");
const use = require("@vrx-arco/use");
const IconLock = require("@vrx-arco/icons-vue/IconLock");
const IconUser = require("@vrx-arco/icons-vue/IconUser");
const _var = require("../style/var.js");
const config = require("./config.js");
const LoginForm = /* @__PURE__ */ vue.defineComponent({
  name: "vrx-arco-login-form",
  props: {
    forget: {
      type: Boolean,
      default: false
    },
    register: {
      type: Boolean,
      default: false
    },
    remember: {
      type: Boolean,
      default: false
    },
    /**
     * 标题
     */
    title: String,
    /**
     * 副标题
     */
    subtitle: String,
    onSubmit: Function,
    /**
     * 是否使用内置消息提示组件
     */
    submitNotice: {
      type: Boolean,
      default: false
    },
    /**
     * 传入任何数据外部受控表单数据
     */
    model: Object
  },
  emits: config.loginFormEmits(),
  setup: (props, {
    slots,
    expose,
    emit
  }) => {
    const {
      bemClass
    } = _var.style("login-form");
    const model = use.controlVModel(props, "model", emit, () => ({
      username: "",
      password: ""
    }));
    const rules = vue.ref({
      username: {
        required: true,
        message: "用户名不能为空"
      },
      password: {
        required: true,
        message: "密码不能为空"
      }
    });
    const rememberChecked = vue.ref(false);
    const [loading, setLoading] = core.useToggle(false);
    const errorMessage = vue.ref("");
    const setModel = (data) => {
      model.value = vue.unref(data);
    };
    const handleSubmit = () => {
      const {
        submitNotice,
        onSubmit
      } = props;
      setLoading(true);
      errorMessage.value = "";
      return onSubmit == null ? void 0 : onSubmit(vue.toRaw(model.value), rememberChecked.value).then(() => {
        if (!submitNotice) {
          return;
        }
        webVue.Message.success("登录成功");
      }).catch((err) => {
        if (typeof err === "string") {
          errorMessage.value = err;
        }
        if (err instanceof Error) {
          errorMessage.value = err.message;
        }
        if (!submitNotice) {
          return;
        }
        webVue.Message.error(errorMessage.value || "登录出错");
      }).finally(() => {
        setLoading(false);
      });
    };
    expose({
      setModel
    });
    return () => {
      var _a;
      const {
        register,
        remember,
        forget,
        title,
        subtitle
      } = props;
      return vue.createVNode("div", {
        "class": bemClass()
      }, [((_a = slots.title) == null ? void 0 : _a.call(slots)) || vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
        "class": bemClass("__title")
      }, [title]), vue.createVNode("div", {
        "class": bemClass("__subtitle")
      }, [subtitle])]), vue.createVNode("div", {
        "class": bemClass("__error-msg")
      }, [errorMessage.value]), vue.createVNode(webVue.Form, {
        "model": model.value,
        "rules": rules.value,
        "layout": "vertical",
        "onSubmitSuccess": handleSubmit
      }, {
        default: () => {
          var _a2;
          return [vue.createVNode(webVue.Form.Item, {
            "field": "username",
            "hideLabel": true,
            "hideAsterisk": true,
            "validateTrigger": "input"
          }, {
            default: () => [vue.createVNode(webVue.Input, {
              "modelValue": model.value.username,
              "onUpdate:modelValue": ($event) => model.value.username = $event,
              "placeholder": "请输入用户名"
            }, {
              prefix: () => vue.createVNode(IconUser, {
                "class": "arco-icon"
              }, null)
            })]
          }), vue.createVNode(webVue.Form.Item, {
            "field": "password",
            "hideLabel": true,
            "hideAsterisk": true,
            "validateTrigger": "input"
          }, {
            default: () => [vue.createVNode(webVue.Input.Password, vue.mergeProps({
              "modelValue": model.value.password,
              "onUpdate:modelValue": ($event) => model.value.password = $event
            }, {
              placeholder: "请输入密码",
              allowClear: true
            }), {
              prefix: () => vue.createVNode(IconLock, {
                "class": "arco-icon"
              }, null)
            })]
          }), (_a2 = slots.form) == null ? void 0 : _a2.call(slots, {
            model: model.value
          }), vue.createVNode(webVue.Space, {
            "direction": "vertical",
            "size": 16
          }, {
            default: () => [(remember || forget) && vue.createVNode("div", {
              "class": bemClass("__password-actions")
            }, [remember && vue.createVNode(webVue.Checkbox, {
              "modelValue": rememberChecked.value,
              "onUpdate:modelValue": ($event) => rememberChecked.value = $event
            }, {
              default: () => [vue.createTextVNode("记住密码")]
            }), forget && vue.createVNode(webVue.Link, {
              "onClick": () => emit("forget")
            }, {
              default: () => [vue.createTextVNode("忘记密码")]
            })]), vue.createVNode(webVue.Button, {
              "type": "primary",
              "htmlType": "submit",
              "long": true,
              "loading": loading.value
            }, {
              default: () => [vue.createTextVNode("登录")]
            }), register && vue.createVNode(webVue.Button, {
              "type": "text",
              "long": true,
              "class": bemClass("__register-btn"),
              "onClick": () => emit("register")
            }, {
              default: () => [vue.createTextVNode("注册")]
            })]
          })];
        }
      })]);
    };
  }
});
exports.LoginForm = LoginForm;