@das-fed/ui 6.4.0-test.2 → 6.4.0-test.3

package/packages/business-components/change-pwd/index.js

@@ -1,20 +1,20 @@
 import '@das-fed/ui/packages/business-components/change-pwd/style.css';
-import { ref as L, reactive as z, defineComponent as T, openBlock as D, createBlock as U, unref as i, isRef as F, withCtx as g, createElementVNode as _, createVNode as h, createTextVNode as b, toDisplayString as S, createCommentVNode as B } from "vue";
-import { withInstall as $ } from "@das-fed/utils/with-install/index";
-import { i18n as x } from "@das-fed/web/packages/i18n/index";
-import { DasDialog as I } from "@das-fed/ui/packages/components/dialog/index";
-import { DasFormRef as Z, DasForm as W } from "@das-fed/ui/packages/components/form/index";
+import { ref as L, reactive as T, defineComponent as F, openBlock as D, createBlock as U, unref as r, isRef as $, withCtx as h, createElementVNode as _, createVNode as R, createTextVNode as S, toDisplayString as x, createCommentVNode as B } from "vue";
+import { withInstall as I } from "@das-fed/utils/with-install/index";
+import { t as a, i18n as A, setI18nRule as Z } from "@das-fed/web/packages/i18n/index";
+import { DasDialog as W } from "@das-fed/ui/packages/components/dialog/index";
+import { DasFormRef as G, DasForm as O } from "@das-fed/ui/packages/components/form/index";
 import { DasFormItem as y } from "@das-fed/ui/packages/components/form-item/index";
-import { DasButton as A } from "@das-fed/ui/packages/components/button/index";
-import { DasMessage as G } from "@das-fed/ui/packages/components/message/index";
-import { enterpriseright as E, superadminPortal as O, systemConfiguration as j } from "@das-fed/utils/api-services/modules";
+import { DasButton as M } from "@das-fed/ui/packages/components/button/index";
+import { DasMessage as j } from "@das-fed/ui/packages/components/message/index";
+import { enterpriseright as k, superadminPortal as H, systemConfiguration as J } from "@das-fed/utils/api-services/modules";
 import { encryption as V } from "@das-fed/utils/atob";
-const M = E.get("/user/change-pwd", (n) => (n.ignoreErrorMessage = !0, n)), N = E.put("/user/change-pwd", (n) => (n.csrf = !0, n)), H = O.put("/change-pwd"), J = j.get("/visitor/login/with-default"), K = (n, f) => {
-  const u = L(!1), w = Z(), s = L({
+const N = k.get("/user/change-pwd", (o) => (o.ignoreErrorMessage = !0, o)), E = k.put("/user/change-pwd", (o) => (o.csrf = !0, o)), K = H.put("/change-pwd"), Q = J.get("/visitor/login/with-default"), X = (o, f) => {
+  const w = L(!1), m = G(), d = L({
     prePwd: "",
     pwd: "",
     confirmPwd: ""
-  }), r = z({
+  }), t = T({
     pwdStrongLimit: !1,
     // 是否开启密码强度校验
     pwdRequireLength: !1,
@@ -29,117 +29,117 @@ const M = E.get("/user/change-pwd", (n) => (n.ignoreErrorMessage = !0, n)), N =
     // 密码要求包含大写字母
     pwdRequireSpecialCharacter: !1
     // 密码要求特殊字符
-  }), C = async () => {
-    const [t, e] = await J().run();
-    t || (r.pwdStrongLimit = e.pwdStrongLimit, r.pwdRequireLength = e.pwdRequireLength, r.pwdMinLength = e.pwdMinLength, r.pwdRequireNum = e.pwdRequireNum, r.pwdRequireLowercaseLetters = e.pwdRequireLowercaseLetters, r.pwdRequireUppercaseLetters = e.pwdRequireUppercaseLetters, r.pwdRequireSpecialCharacter = e.pwdRequireSpecialCharacter);
-  }, l = (t) => {
+  }), P = async () => {
+    const [i, e] = await Q().run();
+    i || (t.pwdStrongLimit = e.pwdStrongLimit, t.pwdRequireLength = e.pwdRequireLength, t.pwdMinLength = e.pwdMinLength, t.pwdRequireNum = e.pwdRequireNum, t.pwdRequireLowercaseLetters = e.pwdRequireLowercaseLetters, t.pwdRequireUppercaseLetters = e.pwdRequireUppercaseLetters, t.pwdRequireSpecialCharacter = e.pwdRequireSpecialCharacter);
+  }, p = (i) => {
     let e = "";
-    return r.pwdStrongLimit ? e = k(t) : e = p(t), e;
-  }, P = (t, e, o) => {
-    var a;
-    if (!e) return o(new Error("新密码不能为空"));
-    if (n.mainApp === "enterpriseadmin") {
-      const c = l(e);
-      if ((a = w.value) == null || a.validateField("confirmPwd", () => null), c) return o(new Error(c));
+    return t.pwdStrongLimit ? e = z(i) : e = u(i), e;
+  }, q = (i, e, n) => {
+    var s;
+    if (!e) return n(new Error(a("新密码不能为空")));
+    if (o.mainApp === "enterpriseadmin") {
+      const g = p(e);
+      if ((s = m.value) == null || s.validateField("confirmPwd", () => null), g) return n(new Error(g));
     }
-    o();
-  }, q = (t, e, o) => {
-    if (!e) return o(new Error("确认密码不能为空"));
-    if (s.value.pwd !== e) return o(new Error("与新密码不一致"));
-    if (n.mainApp === "enterpriseadmin") {
-      const a = l(e);
-      if (a) return o(new Error(a));
+    n();
+  }, v = (i, e, n) => {
+    if (!e) return n(new Error(a("确认密码不能为空")));
+    if (d.value.pwd !== e) return n(new Error(a("与新密码不一致")));
+    if (o.mainApp === "enterpriseadmin") {
+      const s = p(e);
+      if (s) return n(new Error(s));
     }
-    o();
-  }, R = L({
+    n();
+  }, C = L({
     prePwd: [
       {
-        required: !n.forceUpdate,
-        message: "旧密码不能为空",
+        required: !o.forceUpdate,
+        message: a("旧密码不能为空"),
         trigger: "blur"
       }
     ],
-    pwd: [{ validator: P, trigger: "blur" }],
-    confirmPwd: [{ validator: q, trigger: "blur" }]
-  }), m = L(""), v = (t) => {
-    n.mainApp === "enterpriseadmin" && C(), u.value = !0, m.value = t || "";
-  }, d = (t = !1) => {
+    pwd: [{ validator: q, trigger: "blur" }],
+    confirmPwd: [{ validator: v, trigger: "blur" }]
+  }), c = L(""), b = (i) => {
+    o.mainApp === "enterpriseadmin" && P(), w.value = !0, c.value = i || "";
+  }, l = (i = !1) => {
     var e;
-    s.value.prePwd = "", s.value.pwd = "", s.value.confirmPwd = "", (e = w.value) == null || e.resetField(), u.value = !1, t || f("onCancel");
-  }, p = (t) => {
-    const e = "8～20个字符，至少包含数字和字母，不包含空格";
-    return /^(?=.*[a-zA-Z])(?=.*[\d])(?=.*[\w])[a-zA-Z\d\W_]{8,20}$/.test(t) ? "" : e;
-  }, k = (t) => {
-    let e = "", o = !1;
-    e += `${r.pwdMinLength}~20个字符，`;
-    const a = `\\S{${r.pwdMinLength},}`;
-    return new RegExp(a).test(t) || (o = !0), (r.pwdRequireNum || r.pwdRequireLowercaseLetters || r.pwdRequireUppercaseLetters || r.pwdRequireSpecialCharacter) && (e += "必须包含"), r.pwdRequireNum && (e += "数字，", /\d+/.test(t) || (o = !0)), r.pwdRequireLowercaseLetters && (e += "小写字母，", /[a-z]+/.test(t) || (o = !0)), r.pwdRequireUppercaseLetters && (e += "大写字母，", /[A-Z]+/.test(t) || (o = !0)), r.pwdRequireSpecialCharacter && (e += "符号，", /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~]+/.test(t) || (o = !0)), o ? e.slice(0, -1) : "";
+    d.value.prePwd = "", d.value.pwd = "", d.value.confirmPwd = "", (e = m.value) == null || e.resetField(), w.value = !1, i || f("onCancel");
+  }, u = (i) => {
+    const e = a("8～20个字符，至少包含数字和字母，不包含空格");
+    return /^(?=.*[a-zA-Z])(?=.*[\d])(?=.*[\w])[a-zA-Z\d\W_]{8,20}$/.test(i) ? "" : e;
+  }, z = (i) => {
+    let e = "", n = !1;
+    e += a("das-ui-business-components-change-pwd-limit-number", t.pwdMinLength);
+    const s = `\\S{${t.pwdMinLength},}`;
+    return new RegExp(s).test(i) || (n = !0), (t.pwdRequireNum || t.pwdRequireLowercaseLetters || t.pwdRequireUppercaseLetters || t.pwdRequireSpecialCharacter) && (e += a("必须包含")), t.pwdRequireNum && (e += a("数字，"), /\d+/.test(i) || (n = !0)), t.pwdRequireLowercaseLetters && (e += a("小写字母，"), /[a-z]+/.test(i) || (n = !0)), t.pwdRequireUppercaseLetters && (e += a("大写字母，"), /[A-Z]+/.test(i) || (n = !0)), t.pwdRequireSpecialCharacter && (e += a("符号，"), /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~]+/.test(i) || (n = !0)), n ? e.slice(0, -1) : "";
   };
   return {
-    visible: u,
-    formData: s,
-    form: w,
-    rules: R,
-    openDialog: v,
-    onCancel: d,
+    visible: w,
+    formData: d,
+    form: m,
+    rules: C,
+    openDialog: b,
+    onCancel: l,
     onConfirm: async () => {
-      var t;
-      (t = w.value) == null || t.validate(async (e) => {
+      var i;
+      (i = m.value) == null || i.validate(async (e) => {
         if (e) {
-          const o = {
-            pwd: V(s.value.pwd),
-            confirmPwd: V(s.value.confirmPwd)
+          const n = {
+            pwd: V(d.value.pwd),
+            confirmPwd: V(d.value.confirmPwd)
           };
-          if (n.mainApp === "enterpriseadmin" && n.forceUpdate) {
-            let a = {};
-            m.value && (a = { headers: { Authorization: m.value } }), await M({}, a).run();
-            const [c] = await N({}, a).run(o);
-            if (c) return;
-          } else if (o.prePwd = V(s.value.prePwd), n.mainApp === "enterpriseadmin") {
-            await M().run();
-            const [a] = await N().run(o);
-            if (a) return;
+          if (o.mainApp === "enterpriseadmin" && o.forceUpdate) {
+            let s = {};
+            c.value && (s = { headers: { Authorization: c.value } }), await N({}, s).run();
+            const [g] = await E({}, s).run(n);
+            if (g) return;
+          } else if (n.prePwd = V(d.value.prePwd), o.mainApp === "enterpriseadmin") {
+            await N().run();
+            const [s] = await E().run(n);
+            if (s) return;
           } else {
-            const [a] = await H().run(o);
-            if (a) return;
+            const [s] = await K().run(n);
+            if (s) return;
           }
-          d(!0), G.success("修改密码成功！"), f("onConfirm");
+          l(!0), j.success(a("修改密码成功！")), f("onConfirm");
         }
       });
     }
   };
-}, Q = { class: "dialog-content" }, X = {
+}, Y = { class: "dialog-content" }, ee = {
   name: "ChangePwd"
-}, Y = /* @__PURE__ */ T({
-  ...X,
+}, re = /* @__PURE__ */ F({
+  ...ee,
   props: {
     mainApp: { default: "enterpriseadmin" },
     forceUpdate: { type: Boolean }
   },
   emits: ["onCancel", "onConfirm"],
-  setup(n, { expose: f, emit: u }) {
-    const w = n, s = u, { visible: r, form: C, formData: l, rules: P, openDialog: q, onCancel: R, onConfirm: m } = K(w, s);
+  setup(o, { expose: f, emit: w }) {
+    const m = o, d = w, { visible: t, form: P, formData: p, rules: q, openDialog: v, onCancel: C, onConfirm: c } = X(m, d);
     return f({
-      openDialog: q
-    }), (v, d) => (D(), U(i(I), {
-      title: "修改密码",
+      openDialog: v
+    }), (b, l) => (D(), U(r(W), {
+      title: r(a)("修改密码"),
       width: "460px",
       height: "360px",
       bodyStyle: { padding: 0 },
-      modelValue: i(r),
-      "onUpdate:modelValue": d[3] || (d[3] = (p) => F(r) ? r.value = p : null),
-      "before-close": i(R)
+      modelValue: r(t),
+      "onUpdate:modelValue": l[3] || (l[3] = (u) => $(t) ? t.value = u : null),
+      "before-close": r(C)
     }, {
-      footer: g(() => [
+      footer: h(() => [
         _("div", null, [
-          h(i(A), {
+          R(r(M), {
             size: "middle",
             style: { "margin-right": "12px" },
-            onClick: i(R)
+            onClick: r(C)
           }, {
-            default: g(() => [
-              b(
-                S(i(x)("取消").value),
+            default: h(() => [
+              S(
+                x(r(A)("取消").value),
                 1
                 /* TEXT */
               )
@@ -147,14 +147,14 @@ const M = E.get("/user/change-pwd", (n) => (n.ignoreErrorMessage = !0, n)), N =
             _: 1
             /* STABLE */
           }, 8, ["onClick"]),
-          h(i(A), {
+          R(r(M), {
             btnType: "primary",
             size: "middle",
-            onClick: i(m)
+            onClick: r(c)
           }, {
-            default: g(() => [
-              b(
-                S(i(x)("确定").value),
+            default: h(() => [
+              S(
+                x(r(A)("确定").value),
                 1
                 /* TEXT */
               )
@@ -164,52 +164,52 @@ const M = E.get("/user/change-pwd", (n) => (n.ignoreErrorMessage = !0, n)), N =
           }, 8, ["onClick"])
         ])
       ]),
-      default: g(() => [
-        _("div", Q, [
-          h(i(W), {
+      default: h(() => [
+        _("div", Y, [
+          R(r(O), {
             ref_key: "form",
-            ref: C,
-            rules: i(P),
+            ref: P,
+            rules: r(q),
             style: { "overflow-x": "hidden !important" }
           }, {
-            default: g(() => [
-              v.forceUpdate ? B("v-if", !0) : (D(), U(i(y), {
+            default: h(() => [
+              b.forceUpdate ? B("v-if", !0) : (D(), U(r(y), {
                 key: 0,
                 type: "password",
                 isTitle: !1,
                 autocomplete: "new-password",
                 "show-password": "",
                 prop: "prePwd",
-                label: "旧密码",
-                modelValue: i(l).prePwd,
-                "onUpdate:modelValue": d[0] || (d[0] = (p) => i(l).prePwd = p),
+                label: r(a)("旧密码"),
+                modelValue: r(p).prePwd,
+                "onUpdate:modelValue": l[0] || (l[0] = (u) => r(p).prePwd = u),
                 modelModifiers: { trim: !0 },
                 required: ""
-              }, null, 8, ["modelValue"])),
-              h(i(y), {
+              }, null, 8, ["label", "modelValue"])),
+              R(r(y), {
                 type: "password",
                 isTitle: !1,
                 autocomplete: "new-password",
                 "show-password": "",
                 prop: "pwd",
-                label: "新密码",
-                modelValue: i(l).pwd,
-                "onUpdate:modelValue": d[1] || (d[1] = (p) => i(l).pwd = p),
+                label: r(a)("新密码"),
+                modelValue: r(p).pwd,
+                "onUpdate:modelValue": l[1] || (l[1] = (u) => r(p).pwd = u),
                 modelModifiers: { trim: !0 },
                 required: ""
-              }, null, 8, ["modelValue"]),
-              h(i(y), {
+              }, null, 8, ["label", "modelValue"]),
+              R(r(y), {
                 type: "password",
                 isTitle: !1,
                 autocomplete: "new-password",
                 "show-password": "",
                 prop: "confirmPwd",
-                label: "确认新密码",
-                modelValue: i(l).confirmPwd,
-                "onUpdate:modelValue": d[2] || (d[2] = (p) => i(l).confirmPwd = p),
+                label: r(a)("确认新密码"),
+                modelValue: r(p).confirmPwd,
+                "onUpdate:modelValue": l[2] || (l[2] = (u) => r(p).confirmPwd = u),
                 modelModifiers: { trim: !0 },
                 required: ""
-              }, null, 8, ["modelValue"])
+              }, null, 8, ["label", "modelValue"])
             ]),
             _: 1
             /* STABLE */
@@ -218,15 +218,19 @@ const M = E.get("/user/change-pwd", (n) => (n.ignoreErrorMessage = !0, n)), N =
       ]),
       _: 1
       /* STABLE */
-    }, 8, ["modelValue", "before-close"]));
+    }, 8, ["title", "modelValue", "before-close"]));
   }
-}), ee = (n, f) => {
-  const u = n.__vccOpts || n;
-  for (const [w, s] of f)
-    u[w] = s;
-  return u;
-}, re = /* @__PURE__ */ ee(Y, [["__scopeId", "data-v-00a9bee9"]]), fe = $(re), me = () => L(null);
+}), te = (o, f) => {
+  const w = o.__vccOpts || o;
+  for (const [m, d] of f)
+    w[m] = d;
+  return w;
+}, ie = /* @__PURE__ */ te(re, [["__scopeId", "data-v-ec4cee0a"]]), ne = {
+  "das-ui-business-components-change-pwd-limit-number": { "zh-CN": "$0~20个字符，", en: "home" }
+};
+Z(ne);
+const ge = I(ie), he = () => L(null);
 export {
-  fe as DasChangePwd,
-  me as DasChangePwdRef
+  ge as DasChangePwd,
+  he as DasChangePwdRef
 };

package/packages/business-components/change-pwd/src/hooks/use-changePwd.d.ts

@@ -19,7 +19,7 @@ export declare const useChangePwd: (props: Props, emit: Emits) => {
             readonly isSearchForm?: boolean | undefined;
             readonly errorMode?: ("default" | "overlay") | undefined;
             readonly autoMarginRight?: boolean | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("../../../../components/form/src/type").Props> & Readonly<{}>;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
         $attrs: {
             [x: string]: unknown;
         };
@@ -39,14 +39,14 @@ export declare const useChangePwd: (props: Props, emit: Emits) => {
             validateField: (prop: string, callback: any) => Promise<void>;
             resetField: () => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-            alignItems: string;
-            marginBottom: string;
-            marginRight: string;
             errorMode: "default" | "overlay";
             labelLength: number | string;
             contentWidth: number | string;
             labelPosition: "left" | "right" | "top";
             alignType: "vertical" | "horizontal";
+            alignItems: string;
+            marginBottom: string;
+            marginRight: string;
             rules: any;
             labelMarginRight: string;
             isSearchForm: boolean;
@@ -72,19 +72,19 @@ export declare const useChangePwd: (props: Props, emit: Emits) => {
         $nextTick: typeof import("vue").nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
     } & Readonly<{
-        alignItems: string;
-        marginBottom: string;
-        marginRight: string;
         errorMode: "default" | "overlay";
         labelLength: number | string;
         contentWidth: number | string;
         labelPosition: "left" | "right" | "top";
         alignType: "vertical" | "horizontal";
+        alignItems: string;
+        marginBottom: string;
+        marginRight: string;
         rules: any;
         labelMarginRight: string;
         isSearchForm: boolean;
         autoMarginRight: boolean;
-    }> & Omit<Readonly<import("../../../../components/form/src/type").Props> & Readonly<{}>, "validate" | "validateField" | "resetField" | ("alignItems" | "marginBottom" | "marginRight" | "errorMode" | "labelLength" | "contentWidth" | "labelPosition" | "alignType" | "rules" | "labelMarginRight" | "isSearchForm" | "autoMarginRight")> & import("vue").ShallowUnwrapRef<{
+    }> & Omit<Readonly<import("../../../../components/form/src/type").Props> & Readonly<{}>, "validate" | "validateField" | "resetField" | ("errorMode" | "labelLength" | "contentWidth" | "labelPosition" | "alignType" | "alignItems" | "marginBottom" | "marginRight" | "rules" | "labelMarginRight" | "isSearchForm" | "autoMarginRight")> & import("vue").ShallowUnwrapRef<{
         validate: (callback: any) => Promise<void>;
         validateField: (prop: string, callback: any) => Promise<void>;
         resetField: () => void;
@@ -109,7 +109,7 @@ export declare const useChangePwd: (props: Props, emit: Emits) => {
             readonly isSearchForm?: boolean | undefined;
             readonly errorMode?: ("default" | "overlay") | undefined;
             readonly autoMarginRight?: boolean | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("../../../../components/form/src/type").Props> & Readonly<{}>;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
         $attrs: {
             [x: string]: unknown;
         };
@@ -129,14 +129,14 @@ export declare const useChangePwd: (props: Props, emit: Emits) => {
             validateField: (prop: string, callback: any) => Promise<void>;
             resetField: () => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-            alignItems: string;
-            marginBottom: string;
-            marginRight: string;
             errorMode: "default" | "overlay";
             labelLength: number | string;
             contentWidth: number | string;
             labelPosition: "left" | "right" | "top";
             alignType: "vertical" | "horizontal";
+            alignItems: string;
+            marginBottom: string;
+            marginRight: string;
             rules: any;
             labelMarginRight: string;
             isSearchForm: boolean;
@@ -162,19 +162,19 @@ export declare const useChangePwd: (props: Props, emit: Emits) => {
         $nextTick: typeof import("vue").nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
     } & Readonly<{
-        alignItems: string;
-        marginBottom: string;
-        marginRight: string;
         errorMode: "default" | "overlay";
         labelLength: number | string;
         contentWidth: number | string;
         labelPosition: "left" | "right" | "top";
         alignType: "vertical" | "horizontal";
+        alignItems: string;
+        marginBottom: string;
+        marginRight: string;
         rules: any;
         labelMarginRight: string;
         isSearchForm: boolean;
         autoMarginRight: boolean;
-    }> & Omit<Readonly<import("../../../../components/form/src/type").Props> & Readonly<{}>, "validate" | "validateField" | "resetField" | ("alignItems" | "marginBottom" | "marginRight" | "errorMode" | "labelLength" | "contentWidth" | "labelPosition" | "alignType" | "rules" | "labelMarginRight" | "isSearchForm" | "autoMarginRight")> & import("vue").ShallowUnwrapRef<{
+    }> & Omit<Readonly<import("../../../../components/form/src/type").Props> & Readonly<{}>, "validate" | "validateField" | "resetField" | ("errorMode" | "labelLength" | "contentWidth" | "labelPosition" | "alignType" | "alignItems" | "marginBottom" | "marginRight" | "rules" | "labelMarginRight" | "isSearchForm" | "autoMarginRight")> & import("vue").ShallowUnwrapRef<{
         validate: (callback: any) => Promise<void>;
         validateField: (prop: string, callback: any) => Promise<void>;
         resetField: () => void;

package/packages/business-components/change-pwd/style.css

@@ -1 +1 @@
-.dialog-content[data-v-00a9bee9]{width:100%;height:100%;display:flex;justify-content:center;align-items:center}
+.dialog-content[data-v-ec4cee0a]{width:100%;height:100%;display:flex;justify-content:center;align-items:center}