@aplus-frontend/ui 6.41.3 → 6.42.1

package/es/src/ag-grid/hooks/use-columns-def.mjs

@@ -1,7 +1,7 @@
-import { getTableRenderProps as y, objectToString as P } from "../../ap-table/utils.mjs";
-import { rendererMap as h } from "../renderer/index.mjs";
-import { isNumber as f, isFunction as m } from "lodash-unified";
-import { ref as R, unref as x, computed as T } from "vue";
+import { getTableRenderProps as c, objectToString as D } from "../../ap-table/utils.mjs";
+import { rendererMap as x } from "../renderer/index.mjs";
+import { isNumber as u, isFunction as m } from "lodash-unified";
+import { ref as P, unref as v, computed as y } from "vue";
 import "../components/body-cell/index.vue.mjs";
 import "../components/header-cell/index.vue.mjs";
 import "../components/tooltip/index.vue.mjs";
@@ -12,24 +12,24 @@ import { useGlobalConfig as _ } from "../../config-provider/hooks/use-global-con
 import { useNamespace as G } from "../../config-provider/hooks/use-namespace.mjs";
 import W from "../components/body-cell/index.vue2.mjs";
 import z from "../components/tooltip/index.vue2.mjs";
-import v from "../components/header-cell/index.vue2.mjs";
+import h from "../components/header-cell/index.vue2.mjs";
 function F(t) {
-  return f(t) && t > 1;
+  return u(t) && t > 1;
 }
-function M(t, o) {
-  if (o.bodyCellTooltip)
-    return m(o.bodyCellTooltip) ? o.bodyCellTooltip(t.value, t.data) : o.bodyCellTooltip;
-  if (o.renderText)
-    return o.renderText({
+function M(t, a) {
+  if (a.bodyCellTooltip)
+    return m(a.bodyCellTooltip) ? a.bodyCellTooltip(t.value, t.data) : a.bodyCellTooltip;
+  if (a.renderText)
+    return a.renderText({
       value: t.value,
       record: t.data,
-      column: o,
+      column: a,
       text: t.value
     });
-  const n = o.valueType || "text", d = h[n];
-  if (d) {
-    const p = y(
-      { ...o, valueType: n },
+  const d = a.valueType || "text", p = x[d];
+  if (p) {
+    const f = c(
+      { ...a, valueType: d },
       {
         value: t.value,
         text: t.value,
@@ -39,61 +39,61 @@ function M(t, o) {
         pinned: t.node?.rowPinned
       }
     );
-    return d(p);
+    return p(f);
   }
-  return P(t.value);
+  return D(t.value);
 }
-const X = (t, o, n) => {
-  const d = _("valueTypeMap"), u = R(), { em: p } = G("ag-grid"), c = (r) => {
-    const a = {
+const X = (t, a, d) => {
+  const p = _("valueTypeMap"), C = P(), { em: f } = G("ag-grid"), b = (r) => {
+    const i = {
       cellRenderer: W,
       cellRendererParams: {
         column: r,
-        extraValueType: x(d),
-        rowKey: o.rowKey
+        extraValueType: v(p),
+        rowKey: a.rowKey
       }
     };
     if (r.customRender)
-      return a;
+      return i;
     if (r.renderText)
       return {
-        valueFormatter: (i) => r.renderText({
-          value: i.value,
-          record: i.data,
+        valueFormatter: (o) => r.renderText({
+          value: o.value,
+          record: o.data,
           column: r,
-          text: i.value
+          text: o.value
         })
       };
-    const l = r.valueType || "text", e = h[l];
+    const s = r.valueType || "text", e = x[s];
     return e ? {
-      valueFormatter: (i) => {
-        const s = y(
-          { ...r, valueType: l },
+      valueFormatter: (o) => {
+        const l = c(
+          { ...r, valueType: s },
           {
-            value: i.value,
-            text: i.value,
-            record: i.data,
-            column: i.column,
-            rowIndex: i.node?.rowIndex,
-            pinned: i.node?.rowPinned
+            value: o.value,
+            text: o.value,
+            record: o.data,
+            column: o.column,
+            rowIndex: o.node?.rowIndex,
+            pinned: o.node?.rowPinned
           }
         );
-        return e(s);
+        return e(l);
       }
-    } : a;
-  }, b = (r) => {
-    const a = {}, l = r.bodyCellTooltip || !r.customRender && (r.ellipsis === !0 || r.ellipsis === "tooltip" || f(r.ellipsis)), e = f(r.ellipsis) && r.ellipsis > 1, i = f(r.ellipsis) ? r.ellipsis : 1;
-    return a.tooltipValueGetter = l ? (s) => M(s, r) : void 0, a.wrapText = !r.ellipsis || e, a.cellStyle = {
-      "--ag-grid-line-clamp": i
-    }, a.tooltipComponent = z, a.tooltipComponentParams = {
-      lineClamp: i,
-      gridWrapperRef: u
-    }, a;
-  }, g = T(() => {
-    const r = x(t);
-    function a(l) {
-      return l.map((e) => {
-        const i = {
+    } : i;
+  }, w = (r) => {
+    const i = r.valueType || "text", s = x[i], e = {}, o = r.bodyCellTooltip || !r.customRender && s && (r.ellipsis === !0 || r.ellipsis === "tooltip" || u(r.ellipsis)), l = u(r.ellipsis) && r.ellipsis > 1, n = u(r.ellipsis) ? r.ellipsis : 1;
+    return e.tooltipValueGetter = o ? (T) => M(T, r) : void 0, e.wrapText = !r.ellipsis || l, e.cellStyle = {
+      "--ag-grid-line-clamp": n
+    }, e.tooltipComponent = z, e.tooltipComponentParams = {
+      lineClamp: n,
+      gridWrapperRef: C
+    }, e;
+  }, g = y(() => {
+    const r = v(t);
+    function i(s) {
+      return s.map((e) => {
+        const o = {
           field: S(e.dataIndex),
           colId: I(e.key) ? String(e.key) : void 0,
           sortable: !!e.sorter,
@@ -110,44 +110,45 @@ const X = (t, o, n) => {
           pinned: e.fixed || null,
           // undefined to null
           colSpan: e.colSpan,
-          cellClass: n((s) => {
-            const C = e.cellClass || "", D = m(C) ? C(s.data, s.node) : C;
+          spanRows: e.spanRows,
+          cellClass: d((l) => {
+            const n = e.cellClass || "", T = m(n) ? n(l.data, l.node) : n;
             return [
-              `${p("cell", e.align || "left")}`,
-              F(e.ellipsis) ? p("cell", "multiline") : null,
-              D
+              `${f("cell", e.align || "left")}`,
+              F(e.ellipsis) ? f("cell", "multiline") : null,
+              T
             ].flat().filter(Boolean);
           }),
           headerStyle: e.headerStyle,
           headerClass: e.headerClass,
           autoHeight: !0,
           // 设置自动计算高度以自适应多行换行的场景
-          ...b(e),
-          ...c(e)
+          ...w(e),
+          ...b(e)
         };
         return e.children?.length ? {
-          ...i,
-          headerGroupComponent: v,
+          ...o,
+          headerGroupComponent: h,
           headerGroupComponentParams: {
             column: e
           },
-          children: a(e.children)
-        } : i;
+          children: i(e.children)
+        } : o;
       });
     }
-    return a(r);
-  }), w = T(
+    return i(r);
+  }), R = y(
     () => ({
-      headerComponent: v,
-      resizable: o.columnResizable,
+      headerComponent: h,
+      resizable: a.columnResizable,
       suppressMovable: !0,
       cellDataType: !1
     })
   );
   return {
     columnDefs: g,
-    defaultColDef: w,
-    gridWrapperRef: u
+    defaultColDef: R,
+    gridWrapperRef: C
   };
 };
 export {

package/es/src/ag-grid/index.vue.mjs

@@ -507,6 +507,7 @@ const vt = /* @__PURE__ */ io({
               "row-class-rules": e.rowClassRules,
               "no-rows-overlay-component": Uo,
               "suppress-cell-focus": "",
+              "enable-cell-span": "",
               "dom-layout": e.autoHeight ? "autoHeight" : "normal",
               onSortChanged: Fe,
               onGridReady: r[0] || (r[0] = (a) => s.value = a.api),

package/es/src/ag-grid/interface.d.ts

@@ -90,6 +90,7 @@ export type AgGridColumnType<RecordType = any, ExtraValueType = 'text', ValueTyp
     minWidth?: number;
     maxWidth?: number;
     colSpan?: ColDef<RecordType>['colSpan'];
+    spanRows?: ColDef<RecordType>['spanRows'];
     /**
      * 为当前单元格添加类名
      * @returns

package/es/src/ap-download/ap-download.vue.d.ts

@@ -1,4 +1,4 @@
-import { ApDownLoadProps } from './interface';
+import { ApDownLoadProps, downloadCallbackResponse } from './interface';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 import { ButtonType } from '@aplus-frontend/antdv/es/button';
 type __VLS_Props = ApDownLoadProps;
@@ -11,10 +11,10 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    downloadCallback: (...args: any[]) => void;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    downloadCallback: (res?: downloadCallbackResponse | undefined) => any;
 }, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDownloadCallback?: ((...args: any[]) => any) | undefined;
+    onDownloadCallback?: ((res?: downloadCallbackResponse | undefined) => any) | undefined;
 }>, {
     size: "small" | "large" | "middle";
     type: ButtonType;

package/es/src/ap-download/ap-download.vue.mjs

@@ -1,9 +1,9 @@
-import { defineComponent as F, ref as L, useSlots as S, computed as t, unref as a, createBlock as x, openBlock as i, mergeProps as A, withCtx as j, createElementVNode as m, normalizeClass as I, createElementBlock as u, createCommentVNode as f, createVNode as M, renderSlot as T, toDisplayString as U } from "vue";
+import { defineComponent as F, ref as L, useSlots as S, computed as a, unref as l, createBlock as x, openBlock as i, mergeProps as A, withCtx as j, createElementVNode as u, normalizeClass as I, createElementBlock as f, createCommentVNode as g, createVNode as M, renderSlot as T, toDisplayString as U } from "vue";
 import { Button as V } from "@aplus-frontend/antdv";
 import { LoadingOutlined as D } from "@ant-design/icons-vue";
 import "../config-provider/index.mjs";
 import { useOssInit as E } from "./hooks/index.mjs";
-import { getFileInfo as g } from "./utils/getFileInfo.mjs";
+import { getFileInfo as y } from "./utils/getFileInfo.mjs";
 import { useStyle as P } from "./hooks/useStyle.mjs";
 import { useLocale as G } from "../config-provider/hooks/use-locale.mjs";
 import { useGlobalConfig as r } from "../config-provider/hooks/use-global-config.mjs";
@@ -43,58 +43,58 @@ const R = {
     getOssAccess: {}
   },
   emits: ["downloadCallback"],
-  setup(y, { emit: C }) {
-    const N = C, n = L(!1), { lang: b } = G(), v = S(), h = t(() => b.value === "zh-cn" ? "zh_CN" : "en_US"), w = r("uiMode"), e = y, l = r("apUpload"), c = r(
+  setup(C, { emit: b }) {
+    const c = b, s = L(!1), { lang: N } = G(), v = S(), w = a(() => N.value === "zh-cn" ? "zh_CN" : "en_US"), h = r("uiMode"), e = C, n = r("apUpload"), d = r(
       "downloadCenterTriggerConfig"
-    ), d = t(() => e.disabled), _ = t(() => e.color ? e.color : w.value === "aplus" ? "#0070FF" : "#1890FF"), k = t(() => e.size), { getInnerWrapperClass: B } = P(_, k, d), z = t(() => e.getOssAccess || l.value?.getOssAccess), O = async () => {
+    ), p = a(() => e.disabled), _ = a(() => e.color ? e.color : h.value === "aplus" ? "#0070FF" : "#1890FF"), k = a(() => e.size), { getInnerWrapperClass: B } = P(_, k, p), z = a(() => e.getOssAccess || n.value?.getOssAccess), O = async () => {
       if (!e.disabled) {
-        n.value = !0;
+        s.value = !0;
         try {
-          if (c.value?.trigger) {
-            let s = g(
-              e.needName ?? l?.value?.needName,
+          if (d.value?.trigger) {
+            let t = y(
+              e.needName ?? n?.value?.needName,
               e.fileName
-            ).map((p) => ({
-              objectName: p.path,
-              fileName: p.fileName
+            ).map((m) => ({
+              objectName: m.path,
+              fileName: m.fileName
             }));
-            await c.value?.trigger(s);
+            await d.value?.trigger(t), c("downloadCallback", t);
           } else {
-            const s = await (await E(
+            const t = await (await E(
               z.value,
-              a(h)
+              l(w)
             )).downloadFile(
-              g(
-                e.needName ?? l?.value?.needName,
+              y(
+                e.needName ?? n?.value?.needName,
                 e.fileName
               )
             );
-            N("downloadCallback", s);
+            c("downloadCallback", t);
           }
         } catch (o) {
           console.error(o);
         } finally {
-          n.value = !1;
+          s.value = !1;
         }
       }
     };
-    return (o, s) => (i(), x(a(V), A(e, {
+    return (o, t) => (i(), x(l(V), A(e, {
       type: e.type,
       size: e.size,
-      disabled: d.value,
+      disabled: p.value,
       onClick: O
     }), {
       default: j(() => [
-        m("div", {
-          class: I(a(B))
+        u("div", {
+          class: I(l(B))
         }, [
-          n.value ? (i(), u("span", R, [
-            M(a(D), { spin: !0 })
-          ])) : f("", !0),
-          a(v).icon ? (i(), u("span", W, [
+          s.value ? (i(), f("span", R, [
+            M(l(D), { spin: !0 })
+          ])) : g("", !0),
+          l(v).icon ? (i(), f("span", W, [
             T(o.$slots, "icon")
-          ])) : f("", !0),
-          m("span", $, U(o.text), 1)
+          ])) : g("", !0),
+          u("span", $, U(o.text), 1)
         ], 2)
       ]),
       _: 3

package/es/src/ap-download/interface.d.ts

@@ -38,4 +38,8 @@ export declare enum ApDownLoadNeedNameKeyDefault {
     pathKey = "path"
 }
 export type actionResponse = Awaited<ReturnType<typeof client.downloadFile>>;
+export type downloadCallbackResponse = {
+    objectName: string;
+    fileName: string;
+}[] | actionResponse;
 export {};

package/es/src/ap-modal/interface.d.ts

@@ -1,19 +1,19 @@
 import { ModalProps, ModalFuncProps } from '@aplus-frontend/antdv';
 import { ModalFunc, ModalStaticFunctions } from '@aplus-frontend/antdv/lib/modal/confirm';
-import { AppContext } from 'vue';
-export type CreateModalFuncProps<ContentRecord = any> = Omit<ModalProps, 'open' | 'onUpdate:open' | 'destroyOnClose' | 'onCancel' | 'onOk' | 'getContainer' | 'icon'> & Partial<{
+import { AppContext, VNodeChild } from 'vue';
+export type CreateModalFuncProps<ContentRecord = any> = Omit<ModalProps, 'open' | 'onUpdate:open' | 'destroyOnClose' | 'onCancel' | 'onOk' | 'getContainer' | 'icon' | 'footer'> & Partial<{
     /**
      * 点击取消回调
      * @param params content组件内使用defineExpose导出的对象
      * @returns
      */
-    onCancel: (params: ContentRecord) => any | Promise<any>;
+    onCancel: (contentExposed: ContentRecord) => any | Promise<any>;
     /**
      * 点击确定回调
      * @param params content组件内使用defineExpose导出的对象
      * @returns
      */
-    onOk: (params: ContentRecord) => any | Promise<any>;
+    onOk: (contentExposed: ContentRecord) => any | Promise<any>;
     /**
      * 指定弹框挂载的 HTML 节点
      */
@@ -34,8 +34,28 @@ export type CreateModalFuncProps<ContentRecord = any> = Omit<ModalProps, 'open'
      * 弹窗的上下文，一般用于获取全局注册组件、vuex 等内容
      */
     appContext: AppContext;
+    /**
+     * 底部内容，当不需要默认底部按钮时，可以设为 :footer="null"
+     */
+    footer: ((params: {
+        /**
+         * 原始的底部内容
+         */
+        originNode: VNodeChild;
+        /**
+         * 底部按钮
+         */
+        extra: {
+            okBtn: VNodeChild;
+            cancelBtn: VNodeChild;
+        };
+        /**
+         * content组件内使用defineExpose导出的对象
+         */
+        contentExposed: ContentRecord;
+    }) => VNodeChild) | VNodeChild;
 }>;
-export type CreateModalFuncReturn = {
+export type CreateModalFuncReturn<ContentRecord = any> = {
     /**
      * 销毁弹框
      * @returns
@@ -46,7 +66,7 @@ export type CreateModalFuncReturn = {
      * @param newConfig
      * @returns
      */
-    update: (newConfig: CreateModalFuncProps) => void;
+    update: (newConfig: CreateModalFuncProps<ContentRecord>) => void;
     /**
      * 打开弹框
      * @returns
@@ -58,7 +78,7 @@ export type CreateModalFuncReturn = {
      */
     close: () => void;
 };
-export type CreateModalFunc = (props: CreateModalFuncProps) => CreateModalFuncReturn;
+export type CreateModalFunc = <ContentRecord = any>(props: CreateModalFuncProps<ContentRecord>) => CreateModalFuncReturn<ContentRecord>;
 export type ModalStreamNextFunc<ModalType extends ModalStreamTypeKey = ModalStreamTypeKey> = (option?: {
     /**
      * 下一步弹框的id
@@ -121,18 +141,18 @@ export type ModalFuncStream<ModalType extends ModalStreamTypeKey = ModalStreamTy
 export type CreateModalStream<ModalType extends ModalStreamTypeKey = ModalStreamTypeKey> = Omit<CreateModalFuncProps, 'destroyOnClose' | 'onOk' | 'onCancel'> & {
     /**
      * 点击确定回调
-     * * @param params content组件内使用defineExpose导出的对象
+     * * @param contentExposed content组件内使用defineExpose导出的对象
      * @param next 下一步
      * @returns
      */
-    onOk?: (params: any, next: ModalStreamNextFunc<ModalType>) => any | Promise<any>;
+    onOk?: (contentExposed: any, next: ModalStreamNextFunc<ModalType>) => any | Promise<any>;
     /**
      * 点击取消回调
-     * * @param params content组件内使用defineExpose导出的对象
+     * * @param contentExposed content组件内使用defineExpose导出的对象
      * @param next 下一步
      * @returns
      */
-    onCancel?: (params: any, next: ModalStreamNextFunc<ModalType>) => any | Promise<any>;
+    onCancel?: (contentExposed: any, next: ModalStreamNextFunc<ModalType>) => any | Promise<any>;
 };
 export type ModalStreamTypeKey = keyof ModalStreamType;
 export type CreateModalStreamProps<ModalType extends ModalStreamTypeKey = ModalStreamTypeKey> = ModalType extends ModalStreamTypeKey ? {

package/es/src/ap-modal/utils/createModal.mjs

@@ -1,45 +1,45 @@
-import { render as m, defineComponent as b, createVNode as l, mergeProps as k, h as w } from "vue";
+import { render as f, defineComponent as b, createVNode as l, mergeProps as k, h as w } from "vue";
 import { Modal as P } from "@aplus-frontend/antdv";
-import { ConfigProvider as N, globalConfigCached as f } from "../../config-provider/config-provider.mjs";
-import { omit as L } from "lodash-unified";
-import { isNumeric as M } from "@aplus-frontend/utils";
+import { ConfigProvider as N, globalConfigCached as m } from "../../config-provider/config-provider.mjs";
+import { omit as E } from "lodash-unified";
+import { isNumeric as L } from "@aplus-frontend/utils";
 import "../../config-provider/index.mjs";
-import { getContainerDom as u, getModalGlobalAppContext as A } from "./util.mjs";
-import { getTopWindow as E } from "../../utils/index.mjs";
-import { useNamespace as T } from "../../config-provider/hooks/use-namespace.mjs";
-const z = (p) => {
-  let o, t;
+import { getContainerDom as u, getModalGlobalAppContext as M } from "./util.mjs";
+import { getTopWindow as A } from "../../utils/index.mjs";
+import { useNamespace as F } from "../../config-provider/hooks/use-namespace.mjs";
+const q = (o) => {
+  let t, n;
   const {
-    destroyOnClose: a = !0,
-    wrapperOffset: n = !1
-  } = p, {
-    b: s
-  } = T("ap-modal");
-  function i() {
-    o && o(!1), setTimeout(() => {
-      m(null, r), r.parentElement?.removeChild(r);
+    destroyOnClose: i = !0,
+    wrapperOffset: r = !1
+  } = o, {
+    b: p
+  } = F("ap-modal");
+  function s() {
+    t && t(!1), setTimeout(() => {
+      f(null, a), a.parentElement?.removeChild(a);
     }, 500);
   }
   function h() {
-    o && o(!0);
+    t && t(!0);
   }
-  function c() {
-    o && o(!1);
+  function d() {
+    t && t(!1);
   }
   function C(e) {
-    t && t(e);
+    n && n(e);
   }
   const g = /* @__PURE__ */ b({
     data() {
       return {
-        open: a,
-        props: p
+        open: i,
+        props: o
       };
     },
     created() {
-      o = (e) => {
+      t = (e) => {
         this.open = e;
-      }, t = (e) => {
+      }, n = (e) => {
         this.props = {
           ...this.props,
           ...e
@@ -52,61 +52,68 @@ const z = (p) => {
           const e = this.props?.content?.component?.exposed ?? void 0;
           await this.props?.onCancel(e);
         }
-        a ? i() : c();
+        i ? s() : d();
       },
       async handleOk() {
         try {
-          if (t({
+          if (n({
             confirmLoading: !0
           }), this.props?.onOk) {
             const e = this.props?.content?.component?.exposed ?? void 0;
             await this.props.onOk(e);
           }
-          t({
+          n({
             confirmLoading: !1
-          }), a ? i() : c();
+          }), i ? s() : d();
         } catch {
-          t({
+          n({
             confirmLoading: !1
           });
         }
+      },
+      handleFooter(e) {
+        return o?.footer !== void 0 ? typeof o.footer == "function" ? o.footer({
+          ...e,
+          contentExposed: this.props?.content?.component?.exposed ?? void 0
+        }) : o.footer : e?.originNode;
       }
     },
     render() {
-      const e = L(this.props, ["onCancel", "onOk", "open", "onUpdate:open", "getContainer", "icon"]);
-      return l(N, f.value, {
+      const e = E(this.props, ["onCancel", "onOk", "open", "onUpdate:open", "getContainer", "icon", "footer"]);
+      return l(N, m.value, {
         default: () => [l(P, k({
           class: {
-            [s()]: !0,
-            [s("wrapper")]: n
+            [p()]: !0,
+            [p("wrapper")]: r
           },
           centered: !0
         }, e, {
           open: this.open,
           onCancel: this.handleCancel,
-          onOk: this.handleOk
+          onOk: this.handleOk,
+          footer: this?.handleFooter
         }), {
           default: () => [l("div", {
             class: {
-              [s("body-wrapper")]: n
+              [p("body-wrapper")]: r
             },
-            style: n === !1 ? {} : {
-              maxHeight: `calc(100vh - ${(n === !0 ? 100 : M(n) ? Number(n) : 100) * 2}px)`
+            style: r === !1 ? {} : {
+              maxHeight: `calc(100vh - ${(r === !0 ? 100 : L(r) ? Number(r) : 100) * 2}px)`
             }
           }, [this.props?.content])]
         })]
       });
     }
-  }), x = u(f?.value?.getPopupContainer), v = u(p.getContainer), O = x || v || E().document.body, r = document.createElement("div");
-  O.appendChild(r);
-  const d = w(g), y = A();
-  return d.appContext = p.appContext || y || d.appContext, m(d, r), {
-    destroy: i,
+  }), x = u(m?.value?.getPopupContainer), v = u(o.getContainer), y = x || v || A().document.body, a = document.createElement("div");
+  y.appendChild(a);
+  const c = w(g), O = M();
+  return c.appContext = o.appContext || O || c.appContext, f(c, a), {
+    destroy: s,
     update: C,
     open: h,
-    close: c
+    close: d
   };
 };
 export {
-  z as createModal
+  q as createModal
 };