@opendesign-plus-test/components 0.0.1-rc.20 → 0.0.1-rc.201

package/dist/treeshaking/components/user-center/OAccountSetting.css

@@ -0,0 +1,233 @@
+.hover-icon-rotate .o-icon[data-v-a743e445] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-a743e445] {
+    transform: rotate(-180deg);
+}
+}
+.user-info-setting[data-v-a743e445] {
+  border-bottom: 1px solid var(--o-color-control4);
+}
+@media (max-width: 840px) {
+.user-info-setting[data-v-a743e445] {
+    border-bottom: none;
+}
+}
+.title[data-v-a743e445] {
+  font-size: var(--font-size1);
+  line-height: var(--line-height1);
+  font-weight: 600;
+  color: var(--o-color-info1);
+  margin-bottom: 12px;
+}
+.login-setting[data-v-a743e445] {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: normal;
+  color: var(--o-color-info2);
+  padding-bottom: var(--layout-gap2);
+  border-bottom: 1px solid var(--o-color-control4);
+  margin-bottom: var(--layout-gap2);
+}
+@media (max-width: 840px) {
+.login-setting[data-v-a743e445] {
+    border-bottom: none;
+}
+}
+.section-label[data-v-a743e445] {
+  font-size: var(--font-size3);
+  line-height: var(--line-height3);
+  font-weight: 600;
+  margin-top: var(--layout-gap2);
+  margin-bottom: var(--layout-gap2);
+}
+
+/* 移动端：白色卡片行（与三方账号绑定一致） */
+.setting-content-pad[data-v-a743e445] {
+  background-color: var(--o-color-fill2);
+  padding-bottom: 0;
+  border-radius: 4px;
+  margin-top: 4px;
+  padding: 0 16px;
+}
+.setting-content-pad .opt-item[data-v-a743e445] {
+  width: 100%;
+  /* 重置基础规则的 max-width:592px，移动端卡片行始终通栏（与三方账号绑定一致） */
+  max-width: 100%;
+  height: 52px;
+  line-height: normal;
+  margin: 0;
+  border-bottom: 1px solid var(--o-color-control4);
+}
+.setting-content-pad .opt-item[data-v-a743e445]:last-child {
+  border-bottom: none;
+}
+.setting-content-pad .opt-item .left-content[data-v-a743e445] {
+  flex: 1;
+  align-items: center;
+  margin-left: 0;
+}
+.setting-content-pad .opt-item .left-content .content-info[data-v-a743e445] {
+  /* 基础规则的 flex-grow:1 会占满剩余空间导致值紧贴标签（auto margin 失效），
+     移动端需与三方账号绑定行一致：值靠右、紧贴箭头 */
+  flex-grow: 0;
+  margin-left: auto;
+  margin-right: 0;
+  justify-content: flex-end;
+}
+.setting-content-pad .opt-item .left-content .content-label[data-v-a743e445] {
+  color: var(--o-color-info1);
+}
+.opt-item[data-v-a743e445] {
+  margin: var(--layout-gap2) 0;
+  line-height: 40px;
+  display: flex;
+  width: 592px;
+  justify-content: space-between;
+  color: var(--o-color-info1);
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.opt-item[data-v-a743e445] {
+    width: 540px;
+}
+}
+.opt-item .opt-label[data-v-a743e445] {
+  color: var(--o-color-info1);
+}
+.opt-item .o-link + .o-link[data-v-a743e445] {
+  margin-left: var(--o-spacing-h4);
+}
+.opt-item .left-content .content-label[data-v-a743e445],
+.opt-item .left-content .content-info[data-v-a743e445] {
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.opt-item .left-content .content-label[data-v-a743e445],
+  .opt-item .left-content .content-info[data-v-a743e445] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.opt-item .left-content .content-label[data-v-a743e445],
+  .opt-item .left-content .content-info[data-v-a743e445] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.opt-item .left-content .content-label[data-v-a743e445],
+  .opt-item .left-content .content-info[data-v-a743e445] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.opt-item .left-content .content-label[data-v-a743e445],
+  .opt-item .left-content .content-info[data-v-a743e445] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.opt-item .left-content .content-label[data-v-a743e445] {
+  min-width: 120px;
+  color: var(--o-color-info2);
+  padding-left: 8px;
+}
+.opt-item .left-content[data-v-a743e445] {
+  /* 用户信息值 */
+}
+.opt-item .left-content .content-info[data-v-a743e445],
+.opt-item .left-content .opt-label[data-v-a743e445] {
+  color: var(--o-color-info2);
+}
+.opt-item .left-content .content-info[data-v-a743e445] {
+  flex-grow: 1;
+  margin-right: 16px;
+}
+.opt-item .left-content .content-label-en[data-v-a743e445] {
+  min-width: 160px;
+  padding-left: 8px;
+}
+.opt-item .left-content .mask-icon[data-v-a743e445]:hover {
+  color: var(--o-color-link2);
+}
+.opt-item.lang-en[data-v-a743e445] {
+  width: 592px;
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.opt-item.lang-en[data-v-a743e445] {
+    width: 540px;
+}
+}
+.fs16[data-v-a743e445] {
+  font-size: 16px;
+}
+.icon[data-v-a743e445] {
+  font-size: 24px;
+  line-height: 1;
+}
+.center[data-v-a743e445] {
+  display: flex;
+  align-items: center;
+}
+.center .unbind[data-v-a743e445] {
+  margin-right: 16px;
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.center .unbind[data-v-a743e445] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.center .unbind[data-v-a743e445] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.center .unbind[data-v-a743e445] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.center .unbind[data-v-a743e445] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.center .unbind[data-v-a743e445] .o-link-label {
+  color: var(--o-color-info3);
+  transition: none;
+  background: none;
+  background-size: 0;
+}
+.skeleton-text[data-v-a743e445] {
+  --skeleton-item-gap: 0px;
+  --skeleton-height: 32px;
+  width: 440px;
+}
+[data-v-a743e445] .o-link-normal {
+  --link-color-hover: var(--o-color-link2);
+}
+@media screen and (max-width: 1440px) {
+.skeleton-text[data-v-a743e445] {
+    --skeleton-height: 28px;
+}
+}
+@media screen and (max-width: 1200px) {
+.skeleton-text[data-v-a743e445] {
+    --skeleton-height: 24px;
+}
+}
+@media screen and (max-width: 840px) {
+.skeleton-text[data-v-a743e445] {
+    --skeleton-height: 24px;
+}
+}

package/dist/treeshaking/components/user-center/OAccountSetting.vue.d.ts

@@ -0,0 +1,22 @@
+import { QueryCodeParams, BindAccountParams } from './types/usercenter.interface';
+import { IObject } from './types/interface';
+import { CaptchaApisT } from './types/captcha';
+type __VLS_Props = {
+    userInfo: IObject;
+    phoneUnbindable?: boolean;
+    phoneVisible?: boolean;
+    bindAccountPost: (data: BindAccountParams) => Promise<any>;
+    modifyAccountPost: (body: any, params?: any) => Promise<any>;
+    sendUnbindCodePost: (data: QueryCodeParams) => Promise<any>;
+    unbindAccountPost: (data: BindAccountParams) => Promise<any>;
+    captchaApis: CaptchaApisT;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    refresh: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRefresh?: ((...args: any[]) => any) | undefined;
+}>, {
+    phoneUnbindable: boolean;
+    phoneVisible: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/treeshaking/components/user-center/OAccountSetting.vue.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from "./OAccountSetting.vue2.mjs";
+import './OAccountSetting.css';
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const _OAccountSetting = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a743e445"]]);
+export {
+  _OAccountSetting as default
+};

package/dist/treeshaking/components/user-center/OAccountSetting.vue2.mjs

@@ -0,0 +1,393 @@
+import { defineComponent, ref, computed, onMounted, watch, openBlock, createElementBlock, Fragment, createElementVNode, toDisplayString, unref, createCommentVNode, normalizeClass, createVNode, withCtx, renderList, createBlock, resolveDynamicComponent, createTextVNode } from "vue";
+import IconMail from "../../_virtual/icon-email.mjs";
+import IconPhone from "../../_virtual/icon-phone.mjs";
+import { useMessage, OSkeleton, OIcon, OLink, OSkeletonText } from "@opensig/opendesign";
+import { useI18n } from "../../i18n/index.mjs";
+import { useTheme } from "../../shared/theme.mjs";
+import { useScreen } from "@opendesign-plus/composables";
+import OAppDialog from "./internal/OAppDialog.vue.mjs";
+import OMaskEye from "./internal/OMaskEye.vue.mjs";
+import { maskUserInfo, isSendCodeEmail } from "./utils/utils.mjs";
+import LeftArrowLight from "../../assets/user-center/images/left-arrow-light.svg.mjs";
+import LeftArrowDark from "../../assets/user-center/images/left-arrow-dark.svg.mjs";
+const _hoisted_1 = { class: "user-info-setting" };
+const _hoisted_2 = { class: "title" };
+const _hoisted_3 = { class: "login-setting" };
+const _hoisted_4 = {
+  key: 0,
+  class: "section-label"
+};
+const _hoisted_5 = { class: "center left-content" };
+const _hoisted_6 = { class: "center left-content" };
+const _hoisted_7 = {
+  key: 0,
+  class: "content-info"
+};
+const _hoisted_8 = { class: "opt-label" };
+const _hoisted_9 = {
+  key: 1,
+  class: "content-info"
+};
+const _hoisted_10 = { class: "center" };
+const _hoisted_11 = {
+  key: 0,
+  class: "fs16 unbind"
+};
+const _hoisted_12 = ["src", "onClick"];
+const _hoisted_13 = ["src", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OAccountSetting",
+  props: {
+    userInfo: {},
+    phoneUnbindable: { type: Boolean, default: true },
+    phoneVisible: { type: Boolean, default: true },
+    bindAccountPost: {},
+    modifyAccountPost: {},
+    sendUnbindCodePost: {},
+    unbindAccountPost: {},
+    captchaApis: {}
+  },
+  emits: ["refresh"],
+  setup(__props, { emit: __emit }) {
+    const { t, locale } = useI18n();
+    const message = useMessage(null);
+    const { lePadV } = useScreen();
+    const { isLight } = useTheme();
+    const props = __props;
+    const emit = __emit;
+    const accountData = ref([
+      {
+        key: "email",
+        icon: IconMail,
+        label: t("common.EMAIL_ADDRESS"),
+        operate: [""],
+        value: "",
+        isMask: true
+      },
+      {
+        key: "phone",
+        icon: IconPhone,
+        label: t("common.BINDING_PHONE"),
+        operate: ["unbind"],
+        value: "",
+        isMask: true
+      }
+    ]);
+    const visibleAccountData = computed(() => accountData.value.filter((item) => item.key !== "phone" || props.phoneVisible));
+    const initData = () => {
+      accountData.value.forEach((item) => {
+        if (item.key in props.userInfo) {
+          const key = item.key === "phone" ? "phoneCountry" : item.key;
+          item.value = props.userInfo[key];
+        }
+      });
+    };
+    const vilible = ref(false);
+    const modifyAccountFuc = (data) => {
+      (isSendCodeEmail(data == null ? void 0 : data.oldaccount) ? props.modifyAccountPost : props.bindAccountPost)(data).then(() => {
+        message.success({
+          content: t("common.MODIFY_SUCCESS")
+        });
+        vilible.value = false;
+        emit("refresh");
+      });
+    };
+    const bindAccountFuc = (data) => {
+      props.bindAccountPost(data).then(() => {
+        message.success({
+          content: t("common.BIND_SUCCESS")
+        });
+        vilible.value = false;
+        emit("refresh");
+      });
+    };
+    const unbindAccountFuc = (data) => {
+      props.unbindAccountPost(data).then(() => {
+        message.success({
+          content: t("common.UNBIND_SUCCESS")
+        });
+        vilible.value = false;
+        emit("refresh");
+      });
+    };
+    const sendCodeFuc = (data) => {
+      return new Promise((resolve, rejects) => {
+        props.sendUnbindCodePost(data).then(() => {
+          resolve(true);
+        }).catch((err) => {
+          rejects(err);
+        });
+      });
+    };
+    const operateKey = ref("bind_email");
+    const config = {
+      confirm_bind_email: {
+        key: "confirm_bind_email",
+        account_type: "email",
+        field: "change",
+        header: "BIND_EMAIL",
+        content: "CONFIRM_BIND_EMAIL",
+        confirm: () => {
+          operateKey.value = "bind_email";
+          vilible.value = true;
+        }
+      },
+      bind_email: {
+        key: "bind_email",
+        account_type: "email",
+        field: "change",
+        header: "BIND_EMAIL",
+        account: {
+          label: "EMAIL",
+          placeholder: "INPUT_NEW_EMAIL"
+        },
+        code: {
+          label: "EMAIL_CODE",
+          placeholder: "ENTER_EMAIL_CODE"
+        },
+        confirm: (data) => {
+          bindAccountFuc(data);
+        }
+      },
+      modify_email: {
+        key: "modify_email",
+        account_type: "email",
+        field: "change",
+        header: "MODIFY_EMAIL",
+        content: "",
+        oldaccount: {
+          label: "AUTHENTICATION"
+        },
+        oldcode: {
+          placeholder: "INPUT_EMAIL_CODE"
+        },
+        account: {
+          label: "BIND_NEW_EMAIL",
+          placeholder: "INPUT_NEW_EMAIL"
+        },
+        code: {
+          placeholder: "INPUT_EMAIL_CODE"
+        },
+        confirm: (data) => {
+          modifyAccountFuc(data);
+        }
+      },
+      bind_phone: {
+        key: "bind_phone",
+        account_type: "phone",
+        field: "change",
+        header: "BIND_PHONE",
+        account: {
+          label: "PHONE",
+          placeholder: "INPUT_NEW_PHONE"
+        },
+        code: {
+          label: "SMS_CODE",
+          placeholder: "INPUT_PHONE_CODE"
+        },
+        confirm: (data) => {
+          bindAccountFuc(data);
+        }
+      },
+      modify_phone: {
+        key: "modify_phone",
+        account_type: "phone",
+        field: "change",
+        header: "MODIFY_PHONE",
+        content: "",
+        oldaccount: {
+          label: "AUTHENTICATION"
+        },
+        oldcode: {
+          placeholder: "INPUT_PHONE_CODE"
+        },
+        account: {
+          label: "BIND_NEW_PHONE",
+          placeholder: "INPUT_NEW_PHONE"
+        },
+        code: {
+          placeholder: "INPUT_PHONE_CODE"
+        },
+        confirm: (data) => {
+          modifyAccountFuc(data);
+        }
+      },
+      unbind_phone: {
+        key: "unbind_phone",
+        account_type: "phone",
+        field: "change",
+        header: "UNBIND_PHONE",
+        oldaccount: {
+          label: "PHONE"
+        },
+        code: {
+          placeholder: "INPUT_PHONE_CODE",
+          getCode: (data) => {
+            data.account = props.userInfo.phoneCountry;
+            return sendCodeFuc(data);
+          }
+        },
+        confirm: (data) => {
+          data.account = props.userInfo.phoneCountry;
+          unbindAccountFuc(data);
+        }
+      }
+    };
+    const showDialog = (str, key) => {
+      if (!isSendCodeEmail(props.userInfo.email) && str === "unbind") {
+        operateKey.value = "confirm_bind_email";
+      } else {
+        const _key = `${str}_${key}`;
+        operateKey.value = _key;
+      }
+      vilible.value = true;
+    };
+    onMounted(() => {
+      initData();
+    });
+    watch(
+      () => props.userInfo,
+      () => {
+        initData();
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, toDisplayString(unref(t)("common.settingText")), 1),
+          createElementVNode("div", _hoisted_3, toDisplayString(unref(t)("common.settingTextDesc")), 1),
+          !unref(lePadV) ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(unref(t)("common.EMAIL_AND_PHONE_BIND")), 1)) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(["setting-content", { "setting-content-pad": unref(lePadV) }])
+          }, [
+            createVNode(unref(OSkeleton), {
+              animation: true,
+              loading: __props.userInfo.loading
+            }, {
+              template: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(visibleAccountData.value, (item, index) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: item.key,
+                    class: normalizeClass(["opt-item", { itemGap: index, "lang-en": unref(locale) === "en" }])
+                  }, [
+                    createElementVNode("div", _hoisted_5, [
+                      createVNode(unref(OIcon), { class: "icon" }, {
+                        default: withCtx(() => [
+                          (openBlock(), createBlock(resolveDynamicComponent(item.icon)))
+                        ]),
+                        _: 2
+                      }, 1024),
+                      createElementVNode("span", {
+                        class: normalizeClass(["content-label nowrap", { "content-label-en": unref(locale) === "en" }])
+                      }, toDisplayString(item.label), 3)
+                    ]),
+                    createVNode(unref(OSkeletonText), {
+                      rows: 1,
+                      class: "skeleton-text"
+                    })
+                  ], 2);
+                }), 128))
+              ]),
+              default: withCtx(() => [
+                !__props.userInfo.loading ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(visibleAccountData.value, (item, index) => {
+                  var _a;
+                  return openBlock(), createElementBlock("div", {
+                    key: item.key,
+                    class: normalizeClass(["opt-item", { itemGap: index, "lang-en": unref(locale) === "en" }])
+                  }, [
+                    createElementVNode("div", _hoisted_6, [
+                      createVNode(unref(OIcon), { class: "icon" }, {
+                        default: withCtx(() => [
+                          (openBlock(), createBlock(resolveDynamicComponent(item.icon)))
+                        ]),
+                        _: 2
+                      }, 1024),
+                      createElementVNode("span", {
+                        class: normalizeClass(["content-label nowrap", { "content-label-en": unref(locale) === "en" }])
+                      }, toDisplayString(item.label), 3),
+                      item.value ? (openBlock(), createElementBlock("span", _hoisted_7, [
+                        createElementVNode("span", _hoisted_8, toDisplayString(unref(maskUserInfo)(item.value, item.isMask)), 1)
+                      ])) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(t)("common.UNBIND")), 1)),
+                      item.value && !unref(lePadV) ? (openBlock(), createBlock(unref(OIcon), {
+                        key: 2,
+                        class: "icon mask-icon"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(OMaskEye, {
+                            modelValue: item.isMask,
+                            "onUpdate:modelValue": ($event) => item.isMask = $event
+                          }, null, 8, ["modelValue", "onUpdate:modelValue"])
+                        ]),
+                        _: 2
+                      }, 1024)) : createCommentVNode("", true)
+                    ]),
+                    createElementVNode("div", _hoisted_10, [
+                      !unref(lePadV) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                        item.value && ((_a = item.operate) == null ? void 0 : _a.includes("unbind")) && __props.phoneUnbindable ? (openBlock(), createElementBlock("span", _hoisted_11, [
+                          createVNode(unref(OLink), {
+                            onClick: ($event) => showDialog("unbind", item.key)
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(unref(t)("common.UNBIND_EMAIL")), 1)
+                            ]),
+                            _: 1
+                          }, 8, ["onClick"])
+                        ])) : createCommentVNode("", true),
+                        item.value ? (openBlock(), createBlock(unref(OLink), {
+                          key: 1,
+                          color: "primary",
+                          class: "fs16",
+                          onClick: ($event) => showDialog("modify", item.key)
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("common.MODIFY")), 1)
+                          ]),
+                          _: 1
+                        }, 8, ["onClick"])) : (openBlock(), createBlock(unref(OLink), {
+                          key: 2,
+                          color: "primary",
+                          class: "fs16",
+                          onClick: ($event) => showDialog("bind", item.key)
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("common.BIND")), 1)
+                          ]),
+                          _: 1
+                        }, 8, ["onClick"]))
+                      ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        item.value ? (openBlock(), createElementBlock("img", {
+                          key: 0,
+                          src: unref(isLight) ? unref(LeftArrowLight) : unref(LeftArrowDark),
+                          alt: "",
+                          onClick: ($event) => showDialog("modify", item.key)
+                        }, null, 8, _hoisted_12)) : (openBlock(), createElementBlock("img", {
+                          key: 1,
+                          src: unref(isLight) ? unref(LeftArrowLight) : unref(LeftArrowDark),
+                          alt: "",
+                          onClick: ($event) => showDialog("bind", item.key)
+                        }, null, 8, _hoisted_13))
+                      ], 64))
+                    ])
+                  ], 2);
+                }), 128)) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["loading"])
+          ], 2)
+        ]),
+        createVNode(OAppDialog, {
+          modelValue: vilible.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vilible.value = $event),
+          config: config[operateKey.value],
+          "operate-key": operateKey.value,
+          "user-info": __props.userInfo,
+          "send-code-post": __props.sendUnbindCodePost,
+          "captcha-apis": __props.captchaApis
+        }, null, 8, ["modelValue", "config", "operate-key", "user-info", "send-code-post", "captcha-apis"])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/user-center/OAppHeader.css

@@ -0,0 +1,14 @@
+.hover-icon-rotate .o-icon[data-v-15810903] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-15810903] {
+    transform: rotate(-180deg);
+}
+}
+.header-toolbar[data-v-15810903] {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  gap: 16px;
+}