@epic-designer/antd 1.1.4 → 1.1.5-beta.0

package/dist/chunks/form.cjs

@@ -1,8 +1,32 @@
 'use strict';
 
 const vue = require('vue');
+require('epic-designer');
 const antDesignVue = require('ant-design-vue');
 
+const PAGE_MANAGER_KEY = Symbol("pageManager");
+function usePageManager() {
+  const pageManager = vue.inject(PAGE_MANAGER_KEY);
+  if (!pageManager) {
+    throw new Error("\u672A\u83B7\u53D6\u5230 pageManager \u5B9E\u4F8B");
+  }
+  return pageManager;
+}
+
+const FORM_CONTEXT_KEY = Symbol("FormContext");
+const FORM_INSTANCES_KEY = Symbol("FormInstances");
+function useForm(formName) {
+  const pageManager = usePageManager();
+  const formData = pageManager.setFormData({}, formName);
+  const formInstances = vue.inject(
+    FORM_INSTANCES_KEY,
+    vue.ref({})
+  );
+  vue.provide(FORM_CONTEXT_KEY, formData);
+  vue.provide("formData", formData);
+  return { formData, formInstances };
+}
+
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
@@ -13,16 +37,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     scrollToFirstError: { type: Boolean, required: false, default: false }
   },
   setup(__props, { expose: __expose }) {
-    var _a, _b;
+    var _a, _b, _c;
     const props = __props;
-    const pageManager = vue.inject("pageManager", {});
     const form = vue.ref(null);
-    const forms = vue.inject("forms", {});
-    const formData = pageManager.setFormData(
-      {},
-      (_b = (_a = props.componentSchema) == null ? void 0 : _a.props) == null ? void 0 : _b.name
+    const { formData, formInstances } = useForm(
+      (_c = (_b = (_a = props.componentSchema) == null ? void 0 : _a.props) == null ? void 0 : _b.name) != null ? _c : "default"
     );
-    vue.provide("formData", formData);
     function getData() {
       return formData;
     }
@@ -45,12 +65,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       (_a2 = form.value) == null ? void 0 : _a2.resetFields();
     }
     const mountedForm = (vNode) => {
-      var _a2, _b2, _c, _d, _e, _f, _g;
+      var _a2, _b2, _c2, _d, _e, _f, _g;
       form.value = (_a2 = vNode.component) == null ? void 0 : _a2.exposed;
-      if (((_b2 = props.componentSchema) == null ? void 0 : _b2.type) === "form" && forms.value && form.value) {
-        const name = (_g = (_f = (_d = (_c = props.componentSchema) == null ? void 0 : _c.props) == null ? void 0 : _d.name) != null ? _f : (_e = props.componentSchema) == null ? void 0 : _e.name) != null ? _g : "default";
+      if (((_b2 = props.componentSchema) == null ? void 0 : _b2.type) === "form" && formInstances.value && form.value) {
+        const name = (_g = (_f = (_d = (_c2 = props.componentSchema) == null ? void 0 : _c2.props) == null ? void 0 : _d.name) != null ? _f : (_e = props.componentSchema) == null ? void 0 : _e.name) != null ? _g : "default";
         form.value.validate = validate;
-        forms.value[name] = form.value;
+        formInstances.value[name] = form.value;
         form.value.getData = getData;
         form.value.setData = setData;
         form.value.resetData = resetData;

package/dist/chunks/form.mjs

@@ -1,6 +1,30 @@
-import { defineComponent, inject, ref, provide, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot, createElementBlock, Fragment, renderList } from 'vue';
+import { inject, ref, provide, defineComponent, computed, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot, createElementBlock, Fragment, renderList } from 'vue';
+import 'epic-designer';
 import { Form } from 'ant-design-vue';
 
+const PAGE_MANAGER_KEY = Symbol("pageManager");
+function usePageManager() {
+  const pageManager = inject(PAGE_MANAGER_KEY);
+  if (!pageManager) {
+    throw new Error("\u672A\u83B7\u53D6\u5230 pageManager \u5B9E\u4F8B");
+  }
+  return pageManager;
+}
+
+const FORM_CONTEXT_KEY = Symbol("FormContext");
+const FORM_INSTANCES_KEY = Symbol("FormInstances");
+function useForm(formName) {
+  const pageManager = usePageManager();
+  const formData = pageManager.setFormData({}, formName);
+  const formInstances = inject(
+    FORM_INSTANCES_KEY,
+    ref({})
+  );
+  provide(FORM_CONTEXT_KEY, formData);
+  provide("formData", formData);
+  return { formData, formInstances };
+}
+
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -11,16 +35,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     scrollToFirstError: { type: Boolean, required: false, default: false }
   },
   setup(__props, { expose: __expose }) {
-    var _a, _b;
+    var _a, _b, _c;
     const props = __props;
-    const pageManager = inject("pageManager", {});
     const form = ref(null);
-    const forms = inject("forms", {});
-    const formData = pageManager.setFormData(
-      {},
-      (_b = (_a = props.componentSchema) == null ? void 0 : _a.props) == null ? void 0 : _b.name
+    const { formData, formInstances } = useForm(
+      (_c = (_b = (_a = props.componentSchema) == null ? void 0 : _a.props) == null ? void 0 : _b.name) != null ? _c : "default"
     );
-    provide("formData", formData);
     function getData() {
       return formData;
     }
@@ -43,12 +63,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       (_a2 = form.value) == null ? void 0 : _a2.resetFields();
     }
     const mountedForm = (vNode) => {
-      var _a2, _b2, _c, _d, _e, _f, _g;
+      var _a2, _b2, _c2, _d, _e, _f, _g;
       form.value = (_a2 = vNode.component) == null ? void 0 : _a2.exposed;
-      if (((_b2 = props.componentSchema) == null ? void 0 : _b2.type) === "form" && forms.value && form.value) {
-        const name = (_g = (_f = (_d = (_c = props.componentSchema) == null ? void 0 : _c.props) == null ? void 0 : _d.name) != null ? _f : (_e = props.componentSchema) == null ? void 0 : _e.name) != null ? _g : "default";
+      if (((_b2 = props.componentSchema) == null ? void 0 : _b2.type) === "form" && formInstances.value && form.value) {
+        const name = (_g = (_f = (_d = (_c2 = props.componentSchema) == null ? void 0 : _c2.props) == null ? void 0 : _d.name) != null ? _f : (_e = props.componentSchema) == null ? void 0 : _e.name) != null ? _g : "default";
         form.value.validate = validate;
-        forms.value[name] = form.value;
+        formInstances.value[name] = form.value;
         form.value.getData = getData;
         form.value.setData = setData;
         form.value.resetData = resetData;

package/dist/chunks/input.cjs

@@ -1,8 +1,15 @@
 'use strict';
 
 const vue = require('vue');
+require('epic-designer');
 const antDesignVue = require('ant-design-vue');
 
+const EVENT_BUS_KEY = Symbol("EventBusContext");
+function useEventBus() {
+  const eventBus = vue.inject(EVENT_BUS_KEY, null);
+  return eventBus;
+}
+
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "input",
   props: {
@@ -16,7 +23,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const props = __props;
     const formData = vue.inject("formData", {});
-    const eventBus = vue.inject("eventBus", null);
+    const eventBus = useEventBus();
     const handleDataSelector = () => {
       eventBus == null ? void 0 : eventBus.emit("openDataSelector", props.componentSchema, props.options);
     };
@@ -31,27 +38,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       });
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(
-        vue.unref(antDesignVue.Input),
-        null,
-        vue.createSlots({
-          _: 2
-          /* DYNAMIC */
-        }, [
-          props.dataSelector ? {
-            name: "suffix",
-            fn: vue.withCtx(() => [
-              vue.createElementVNode("span", {
-                onClick: handleDataSelector,
-                class: "iconfont icon--epic icon--epic--search-rounded"
-              })
-            ]),
-            key: "0"
-          } : void 0
+      return vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Input), null, {
+        suffix: vue.withCtx(() => [
+          props.dataSelector ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 0,
+            onClick: handleDataSelector,
+            class: "iconfont icon--epic icon--epic--search-rounded"
+          })) : vue.createCommentVNode("v-if", true),
+          vue.renderSlot(_ctx.$slots, "suffix")
         ]),
-        1024
-        /* DYNAMIC_SLOTS */
-      );
+        _: 3
+        /* FORWARDED */
+      });
     };
   }
 });

package/dist/chunks/input.mjs

@@ -1,6 +1,13 @@
-import { defineComponent, inject, createBlock, openBlock, unref, createSlots, withCtx, createElementVNode } from 'vue';
+import { inject, defineComponent, createBlock, openBlock, unref, withCtx, createElementBlock, createCommentVNode, renderSlot } from 'vue';
+import 'epic-designer';
 import { Input } from 'ant-design-vue';
 
+const EVENT_BUS_KEY = Symbol("EventBusContext");
+function useEventBus() {
+  const eventBus = inject(EVENT_BUS_KEY, null);
+  return eventBus;
+}
+
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "input",
   props: {
@@ -14,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const formData = inject("formData", {});
-    const eventBus = inject("eventBus", null);
+    const eventBus = useEventBus();
     const handleDataSelector = () => {
       eventBus == null ? void 0 : eventBus.emit("openDataSelector", props.componentSchema, props.options);
     };
@@ -29,27 +36,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(
-        unref(Input),
-        null,
-        createSlots({
-          _: 2
-          /* DYNAMIC */
-        }, [
-          props.dataSelector ? {
-            name: "suffix",
-            fn: withCtx(() => [
-              createElementVNode("span", {
-                onClick: handleDataSelector,
-                class: "iconfont icon--epic icon--epic--search-rounded"
-              })
-            ]),
-            key: "0"
-          } : void 0
+      return openBlock(), createBlock(unref(Input), null, {
+        suffix: withCtx(() => [
+          props.dataSelector ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            onClick: handleDataSelector,
+            class: "iconfont icon--epic icon--epic--search-rounded"
+          })) : createCommentVNode("v-if", true),
+          renderSlot(_ctx.$slots, "suffix")
         ]),
-        1024
-        /* DYNAMIC_SLOTS */
-      );
+        _: 3
+        /* FORWARDED */
+      });
     };
   }
 });

package/dist/chunks/modal.cjs

@@ -3,7 +3,7 @@
 const vue = require('vue');
 const antDesignVue = require('ant-design-vue');
 
-const _hoisted_1 = { class: "epic-modal-main epic-scoped" };
+const _hoisted_1 = { class: "epic-modal-main ep-scoped" };
 const _hoisted_2 = {
   key: 0,
   class: "epic-modal-footer"

package/dist/chunks/modal.mjs

@@ -1,7 +1,7 @@
 import { defineComponent, useAttrs, computed, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, createElementVNode, createElementBlock, createCommentVNode, renderSlot, Fragment, renderList, createVNode, createTextVNode, toDisplayString } from 'vue';
 import { version, Modal, Space, Button } from 'ant-design-vue';
 
-const _hoisted_1 = { class: "epic-modal-main epic-scoped" };
+const _hoisted_1 = { class: "epic-modal-main ep-scoped" };
 const _hoisted_2 = {
   key: 0,
   class: "epic-modal-footer"

package/dist/chunks/tabPane.cjs

@@ -1,8 +1,15 @@
 'use strict';
 
 const vue = require('vue');
+require('epic-designer');
 const antDesignVue = require('ant-design-vue');
 
+const NODE_ATTRS_KEY = Symbol("nodeAttrs");
+function useNodeAttrs() {
+  const nodeAttrs = vue.inject(NODE_ATTRS_KEY, {});
+  return nodeAttrs;
+}
+
 const tabPane = vue.defineComponent({
   props: {
     componentSchema: {
@@ -12,7 +19,7 @@ const tabPane = vue.defineComponent({
     }
   },
   setup(props, { slots }) {
-    const nodeAttrs = vue.inject("nodeAttrs", {});
+    const nodeAttrs = useNodeAttrs();
     return () => {
       var _a;
       const componentSchema = {

package/dist/chunks/tabPane.mjs

@@ -1,6 +1,13 @@
-import { defineComponent, inject, h, renderSlot } from 'vue';
+import { inject, defineComponent, h, renderSlot } from 'vue';
+import 'epic-designer';
 import { TabPane } from 'ant-design-vue';
 
+const NODE_ATTRS_KEY = Symbol("nodeAttrs");
+function useNodeAttrs() {
+  const nodeAttrs = inject(NODE_ATTRS_KEY, {});
+  return nodeAttrs;
+}
+
 const tabPane = defineComponent({
   props: {
     componentSchema: {
@@ -10,7 +17,7 @@ const tabPane = defineComponent({
     }
   },
   setup(props, { slots }) {
-    const nodeAttrs = inject("nodeAttrs", {});
+    const nodeAttrs = useNodeAttrs();
     return () => {
       var _a;
       const componentSchema = {

package/dist/index.cjs

@@ -2971,7 +2971,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".epic-designer-main .ant-input-number {\n  width: 100%;\n}\n.epic-designer-main .ant-collapse-content > .ant-collapse-content-box {\n  padding: 8px;\n}\n.epic-designer-main .ant-select {\n  width: 100%;\n}\n.epic-designer-main .epic-upload-image .avatar-uploader > .ant-upload {\n  width: 128px;\n  height: 128px;\n}\n.epic-input-size.ant-input-affix-wrapper {\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n}\n.epic-input-size .ant-select:hover {\n  border: none !important;\n  box-shadow: none !important;\n}\n";
+var css_248z = ".epic-designer-main .ant-input-number {\n  width: 100%;\n}\n.epic-designer-main .ant-collapse-content > .ant-collapse-content-box {\n  padding: 8px;\n}\n.epic-designer-main .ant-select {\n  width: 100%;\n}\n.epic-designer-main .epic-upload-image .avatar-uploader > .ant-upload {\n  width: 128px;\n  height: 128px;\n}\n.ep-input-size.ant-input-affix-wrapper {\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n}\n.ep-input-size .ant-select-selector {\n  border: none !important;\n  box-shadow: none !important;\n  padding: 0 4px !important;\n}\n";
 styleInject(css_248z);
 
 function setupAntd(pluginManager = epicDesigner.pluginManager) {

package/dist/index.d.cts

@@ -27,7 +27,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".epic-designer-main .ant-input-number {\n  width: 100%;\n}\n.epic-designer-main .ant-collapse-content > .ant-collapse-content-box {\n  padding: 8px;\n}\n.epic-designer-main .ant-select {\n  width: 100%;\n}\n.epic-designer-main .epic-upload-image .avatar-uploader > .ant-upload {\n  width: 128px;\n  height: 128px;\n}\n.epic-input-size.ant-input-affix-wrapper {\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n}\n.epic-input-size .ant-select:hover {\n  border: none !important;\n  box-shadow: none !important;\n}\n";
+var css_248z = ".epic-designer-main .ant-input-number {\n  width: 100%;\n}\n.epic-designer-main .ant-collapse-content > .ant-collapse-content-box {\n  padding: 8px;\n}\n.epic-designer-main .ant-select {\n  width: 100%;\n}\n.epic-designer-main .epic-upload-image .avatar-uploader > .ant-upload {\n  width: 128px;\n  height: 128px;\n}\n.ep-input-size.ant-input-affix-wrapper {\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n}\n.ep-input-size .ant-select-selector {\n  border: none !important;\n  box-shadow: none !important;\n  padding: 0 4px !important;\n}\n";
 styleInject(css_248z);
 
 declare function setupAntd(pluginManager?: PluginManager): void;

package/dist/index.d.mts

@@ -27,7 +27,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".epic-designer-main .ant-input-number {\n  width: 100%;\n}\n.epic-designer-main .ant-collapse-content > .ant-collapse-content-box {\n  padding: 8px;\n}\n.epic-designer-main .ant-select {\n  width: 100%;\n}\n.epic-designer-main .epic-upload-image .avatar-uploader > .ant-upload {\n  width: 128px;\n  height: 128px;\n}\n.epic-input-size.ant-input-affix-wrapper {\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n}\n.epic-input-size .ant-select:hover {\n  border: none !important;\n  box-shadow: none !important;\n}\n";
+var css_248z = ".epic-designer-main .ant-input-number {\n  width: 100%;\n}\n.epic-designer-main .ant-collapse-content > .ant-collapse-content-box {\n  padding: 8px;\n}\n.epic-designer-main .ant-select {\n  width: 100%;\n}\n.epic-designer-main .epic-upload-image .avatar-uploader > .ant-upload {\n  width: 128px;\n  height: 128px;\n}\n.ep-input-size.ant-input-affix-wrapper {\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n}\n.ep-input-size .ant-select-selector {\n  border: none !important;\n  box-shadow: none !important;\n  padding: 0 4px !important;\n}\n";
 styleInject(css_248z);
 
 declare function setupAntd(pluginManager?: PluginManager): void;

package/dist/index.d.ts

@@ -27,7 +27,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".epic-designer-main .ant-input-number {\n  width: 100%;\n}\n.epic-designer-main .ant-collapse-content > .ant-collapse-content-box {\n  padding: 8px;\n}\n.epic-designer-main .ant-select {\n  width: 100%;\n}\n.epic-designer-main .epic-upload-image .avatar-uploader > .ant-upload {\n  width: 128px;\n  height: 128px;\n}\n.epic-input-size.ant-input-affix-wrapper {\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n}\n.epic-input-size .ant-select:hover {\n  border: none !important;\n  box-shadow: none !important;\n}\n";
+var css_248z = ".epic-designer-main .ant-input-number {\n  width: 100%;\n}\n.epic-designer-main .ant-collapse-content > .ant-collapse-content-box {\n  padding: 8px;\n}\n.epic-designer-main .ant-select {\n  width: 100%;\n}\n.epic-designer-main .epic-upload-image .avatar-uploader > .ant-upload {\n  width: 128px;\n  height: 128px;\n}\n.ep-input-size.ant-input-affix-wrapper {\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n}\n.ep-input-size .ant-select-selector {\n  border: none !important;\n  box-shadow: none !important;\n  padding: 0 4px !important;\n}\n";
 styleInject(css_248z);
 
 declare function setupAntd(pluginManager?: PluginManager): void;

package/dist/index.mjs

@@ -2969,7 +2969,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".epic-designer-main .ant-input-number {\n  width: 100%;\n}\n.epic-designer-main .ant-collapse-content > .ant-collapse-content-box {\n  padding: 8px;\n}\n.epic-designer-main .ant-select {\n  width: 100%;\n}\n.epic-designer-main .epic-upload-image .avatar-uploader > .ant-upload {\n  width: 128px;\n  height: 128px;\n}\n.epic-input-size.ant-input-affix-wrapper {\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n}\n.epic-input-size .ant-select:hover {\n  border: none !important;\n  box-shadow: none !important;\n}\n";
+var css_248z = ".epic-designer-main .ant-input-number {\n  width: 100%;\n}\n.epic-designer-main .ant-collapse-content > .ant-collapse-content-box {\n  padding: 8px;\n}\n.epic-designer-main .ant-select {\n  width: 100%;\n}\n.epic-designer-main .epic-upload-image .avatar-uploader > .ant-upload {\n  width: 128px;\n  height: 128px;\n}\n.ep-input-size.ant-input-affix-wrapper {\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n}\n.ep-input-size .ant-select-selector {\n  border: none !important;\n  box-shadow: none !important;\n  padding: 0 4px !important;\n}\n";
 styleInject(css_248z);
 
 function setupAntd(pluginManager$1 = pluginManager) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epic-designer/antd",
-  "version": "1.1.4",
+  "version": "1.1.5-beta.0",
   "description": "epic-designer base antd ui",
   "private": false,
   "author": "kchengz",

package/src/form/form.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { PageManager } from '@epic-designer/manager';
 import type { ComponentSchema, FormDataModel } from '@epic-designer/types';
 
 import type { VNode } from 'vue';
 
-import { computed, inject, provide, ref } from 'vue';
+import { computed, ref } from 'vue';
 
+import { useForm } from '@epic-designer/hooks';
 import { Form } from 'ant-design-vue';
 
 interface FormInstance extends InstanceType<typeof Form> {
@@ -33,14 +33,10 @@ const props = withDefaults(
   },
 );
 
-const pageManager = inject<PageManager>('pageManager', {} as PageManager);
 const form = ref<FormInstance | null>(null);
-const forms = inject<{ [name: string]: any }>('forms', {});
-const formData = pageManager.setFormData(
-  {},
-  props.componentSchema?.props?.name,
+const { formData, formInstances } = useForm(
+  props.componentSchema?.props?.name ?? 'default',
 );
-provide('formData', formData);
 
 /**
  * 获取表单数据
@@ -83,14 +79,18 @@ function resetData() {
 const mountedForm = (vNode: VNode) => {
   form.value = vNode.component?.exposed as FormInstance;
 
-  if (props.componentSchema?.type === 'form' && forms.value && form.value) {
+  if (
+    props.componentSchema?.type === 'form' &&
+    formInstances.value &&
+    form.value
+  ) {
     const name =
       props.componentSchema?.props?.name ??
       props.componentSchema?.name ??
       ('default' as string);
 
     form.value.validate = validate;
-    forms.value[name] = form.value;
+    formInstances.value[name] = form.value;
     form.value.getData = getData;
     form.value.setData = setData;
     form.value.resetData = resetData;

package/src/index.less

@@ -19,15 +19,17 @@
   }
 }
 
-// 适配epic-input-size样式
-.epic-input-size {
+// 适配ep-input-size样式
+.ep-input-size {
   &.ant-input-affix-wrapper {
     padding-top: 0;
     padding-right: 0;
     padding-bottom: 0;
   }
-  .ant-select:hover {
+
+  .ant-select-selector{
     border: none !important;
     box-shadow: none !important;
+    padding: 0 4px !important;
   }
 }

package/src/input/input.vue

@@ -3,7 +3,7 @@ import type { ComponentSchema } from '@epic-designer/types';
 
 import { inject } from 'vue';
 
-import { EventBus } from '@epic-designer/hooks';
+import { useEventBus } from '@epic-designer/hooks';
 import { Input } from 'ant-design-vue';
 
 const props = withDefaults(
@@ -23,7 +23,7 @@ const props = withDefaults(
 );
 
 const formData = inject<Record<string, any>>('formData', {});
-const eventBus = inject<EventBus | null>('eventBus', null);
+const eventBus = useEventBus();
 
 const handleDataSelector = () => {
   eventBus?.emit('openDataSelector', props.componentSchema, props.options);
@@ -42,11 +42,13 @@ eventBus?.on('dataSelector:selected', (data) => {
 </script>
 <template>
   <Input>
-    <template #suffix v-if="props.dataSelector">
+    <template #suffix>
       <span
+        v-if="props.dataSelector"
         @click="handleDataSelector"
         class="iconfont icon--epic icon--epic--search-rounded"
       ></span>
+      <slot name="suffix"></slot>
     </template>
   </Input>
 </template>

package/src/modal/modal.vue

@@ -77,7 +77,7 @@ function handleClose() {
 
 <template>
   <Modal v-bind="getProps">
-    <div class="epic-modal-main epic-scoped">
+    <div class="epic-modal-main ep-scoped">
       <slot>
         <slot name="edit-node">
           <slot

package/src/tab-pane/tabPane.ts

@@ -2,8 +2,9 @@ import type { ComponentSchema } from '@epic-designer/types';
 
 import type { PropType } from 'vue';
 
-import { defineComponent, h, inject, renderSlot } from 'vue';
+import { defineComponent, h, renderSlot } from 'vue';
 
+import { useNodeAttrs } from '@epic-designer/hooks';
 import { TabPane } from 'ant-design-vue';
 
 export default defineComponent({
@@ -15,7 +16,7 @@ export default defineComponent({
     },
   },
   setup(props, { slots }) {
-    const nodeAttrs = inject('nodeAttrs', {});
+    const nodeAttrs = useNodeAttrs();
 
     return () => {
       const componentSchema = {