@tachybase/client 0.23.58 → 1.0.6

package/lib/schema-component/antd/action/Action.Designer.js

@@ -398,19 +398,53 @@ function WorkflowConfig() {
     const formAction = null == formBlock ? void 0 : formBlock.type;
     const buttonAction = fieldSchema['x-action'];
     const description = {
-        submit: t('Workflow will be triggered before or after submitting succeeded based on workflow type.', {
+        submit: t('Workflow will be triggered before or after submitting succeeded.', {
             ns: 'workflow'
         }),
-        'customize:save': t('Workflow will be triggered before or after submitting succeeded based on workflow type.', {
+        'customize:save': t('Workflow will be triggered before or after submitting succeeded.', {
             ns: 'workflow'
         }),
         'customize:triggerWorkflows': t('Workflow will be triggered directly once the button clicked, without data saving.', {
             ns: 'workflow'
         }),
-        destroy: t('Workflow will be triggered before deleting succeeded.', {
+        destroy: t('Workflow will be triggered before or after submitting succeeded.', {
             ns: 'workflow'
         })
     }[null == fieldSchema ? void 0 : fieldSchema['x-action']];
+    let orderColumn = {};
+    if ([
+        'submit',
+        'customize:save',
+        'destroy'
+    ].includes(null == fieldSchema ? void 0 : fieldSchema['x-action'])) orderColumn = {
+        order: {
+            type: 'void',
+            'x-component': 'ArrayTable.Column',
+            'x-component-props': {
+                title: t('Sequentially', {
+                    ns: 'workflow'
+                })
+            },
+            properties: {
+                order: {
+                    type: 'string',
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Select',
+                    default: 'after',
+                    enum: [
+                        {
+                            label: t('After'),
+                            value: 'after'
+                        },
+                        {
+                            label: t('Before'),
+                            value: 'before'
+                        }
+                    ]
+                }
+            }
+        }
+    };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SchemaSettings_js_namespaceObject.SchemaSettingsActionModalItem, {
         title: t('Bind workflows', {
             ns: 'workflow'
@@ -511,6 +545,7 @@ function WorkflowConfig() {
                                     }
                                 }
                             },
+                            ...orderColumn,
                             operations: {
                                 type: 'void',
                                 'x-component': 'ArrayTable.Column',

package/lib/schema-component/antd/action/Action.Modal.js

@@ -105,7 +105,6 @@ const ActionModal = (0, schema_namespaceObject.observer)((props)=>{
         if (s['x-component'] === footerNodeName) return s;
         return buf;
     });
-    console.log('%c Line:41 🍧 styles.container', 'font-size:18px;color:#e41a6a;background:#7f2b82', styles.container);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Modal, {
         className: external_classnames_default()(others.className, null == modalProps ? void 0 : modalProps.className, styles.container, 'amplifier-block'),
         style: {

package/lib/schema-component/antd/action/Action.js

@@ -102,9 +102,7 @@ const Action = (0, withDynamicSchemaProps_js_namespaceObject.withDynamicSchemaPr
     const openMode = null == fieldSchema ? void 0 : null === (_fieldSchema_xcomponentprops = fieldSchema['x-component-props']) || void 0 === _fieldSchema_xcomponentprops ? void 0 : _fieldSchema_xcomponentprops['openMode'];
     const openSize = null == fieldSchema ? void 0 : null === (_fieldSchema_xcomponentprops1 = fieldSchema['x-component-props']) || void 0 === _fieldSchema_xcomponentprops1 ? void 0 : _fieldSchema_xcomponentprops1['openSize'];
     const disabled = form.disabled || field.disabled || (null === (_field_data = field.data) || void 0 === _field_data ? void 0 : _field_data.disabled) || propsDisabled;
-    const linkageRules = (0, external_react_namespaceObject.useMemo)(()=>(null == fieldSchema ? void 0 : fieldSchema['x-linkage-rules']) || [], [
-        fieldSchema
-    ]);
+    const linkageRules = (null == fieldSchema ? void 0 : fieldSchema['x-linkage-rules']) || [];
     const { designable } = (0, external_index_js_namespaceObject.useDesignable)();
     const tarComponent = (0, external_hooks_index_js_namespaceObject.useComponent)(component) || component;
     const { modal } = external_antd_namespaceObject.App.useApp();

package/lib/schema-component/antd/association-field/SubTabs/InternalCollapse.js

@@ -204,6 +204,7 @@ const InternalTabs = (0, schema_namespaceObject.observer)((props)=>{
     (0, external_ahooks_namespaceObject.useDeepCompareEffect)(()=>{
         if (!defOptions.length) return;
         const fieldTabs = field.value;
+        if (!fieldTabs) return;
         if (quickAddParentField && (null == quickAddParentField ? void 0 : quickAddParentField.value) !== 'none') {
             const filterParantOptions = tabsParantFilterOptions(defOptions, fieldTabs, quickAddField);
             setDefOptions(filterParantOptions);
@@ -281,7 +282,7 @@ const InternalTabs = (0, schema_namespaceObject.observer)((props)=>{
                                         element.style.color = '#1e1e1e';
                                     });
                                 },
-                                children: item.label
+                                children: item.label || null
                             }, item.id))
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {

package/lib/schema-component/antd/checkbox/Checkbox.js

@@ -45,7 +45,7 @@ __webpack_require__.d(__webpack_exports__, {
     default: ()=>Checkbox_rslib_entry_
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("react");
+const external_react_namespaceObject = require("react");
 const schema_namespaceObject = require("@tachybase/schema");
 const icons_namespaceObject = require("@ant-design/icons");
 const external_antd_namespaceObject = require("antd");
@@ -80,13 +80,15 @@ const InternalCheckbox = (0, schema_namespaceObject.connect)((props)=>{
 }), (0, schema_namespaceObject.mapReadPretty)(ReadPretty));
 const InternalRadioGroup = (0, schema_namespaceObject.connect)((props)=>{
     const { t } = (0, external_react_i18next_namespaceObject.useTranslation)();
-    const field = (0, schema_namespaceObject.useField)();
+    const [value, setValue] = (0, external_react_namespaceObject.useState)();
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio.Group, {
         ...props,
         onChange: (value)=>{
-            if ('null' !== value.target.value) props.onChange(value);
-            else field['value'] = void 0;
+            if ('null' !== value.target.value) props.onChange(value.target.value);
+            else props.onChange(null);
+            setValue(value.target.value);
         },
+        value: props.value || value,
         options: [
             {
                 label: t('?'),

package/lib/schema-component/antd/index.js

@@ -102,6 +102,9 @@ var __webpack_modules__ = {
     "./markdown?ce72": function(module) {
         module.exports = require("./markdown/index.js");
     },
+    "./media-card": function(module) {
+        module.exports = require("./media-card/index.js");
+    },
     "./menu": function(module) {
         module.exports = require("./menu/index.js");
     },
@@ -234,10 +237,10 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     CodeMirror: function() {
-        return _tachybase_components__WEBPACK_IMPORTED_MODULE_60__.CodeMirror;
+        return _tachybase_components__WEBPACK_IMPORTED_MODULE_61__.CodeMirror;
     },
     PageHeader: function() {
-        return _ant_design_pro_layout__WEBPACK_IMPORTED_MODULE_59__.PageHeader;
+        return _ant_design_pro_layout__WEBPACK_IMPORTED_MODULE_60__.PageHeader;
     },
     genStyleHook: function() {
         return _builtins___WEBPACK_IMPORTED_MODULE_2__.genStyleHook;
@@ -872,8 +875,19 @@ for(var __WEBPACK_IMPORT_KEY__ in _variable__WEBPACK_IMPORTED_MODULE_58__)if ([
     return _variable__WEBPACK_IMPORTED_MODULE_58__[key];
 }).bind(0, __WEBPACK_IMPORT_KEY__);
 __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-var _ant_design_pro_layout__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__("@ant-design/pro-layout");
-var _tachybase_components__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__("@tachybase/components");
+var _media_card__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__("./media-card");
+var __WEBPACK_REEXPORT_OBJECT__ = {};
+for(var __WEBPACK_IMPORT_KEY__ in _media_card__WEBPACK_IMPORTED_MODULE_59__)if ([
+    "PageHeader",
+    "CodeMirror",
+    "genStyleHook",
+    "default"
+].indexOf(__WEBPACK_IMPORT_KEY__) < 0) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+    return _media_card__WEBPACK_IMPORTED_MODULE_59__[key];
+}).bind(0, __WEBPACK_IMPORT_KEY__);
+__webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+var _ant_design_pro_layout__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__("@ant-design/pro-layout");
+var _tachybase_components__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__("@tachybase/components");
 var __webpack_export_target__ = exports;
 for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
 if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {

package/lib/schema-component/antd/media-card/MediaCard.js

@@ -0,0 +1,69 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+(()=>{
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    MediaCard: ()=>MediaCard
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_antd_style_namespaceObject = require("antd-style");
+const index_js_namespaceObject = require("../../../icon/index.js");
+const external_style_js_namespaceObject = require("./style.js");
+const MediaCard = (props)=>{
+    const { icon, color, title, layout = 'horizontal', onClick = ()=>{}, className, needHover = true } = props;
+    const { styles } = (0, external_style_js_namespaceObject.useStyles)();
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, external_antd_style_namespaceObject.cx)(styles.mediaCardStyle, {
+            layout: 'vertical' === layout,
+            'need-hover': needHover
+        }, className),
+        onClick: onClick,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "icon-wrapper",
+                style: {
+                    backgroundColor: null != color ? color : '#e5e5e5'
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.Icon, {
+                    className: "icon",
+                    type: null != icon ? icon : 'AppstoreOutlined',
+                    style: {
+                        color: null != color ? color : '#e5e5e5'
+                    }
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "title",
+                children: title
+            })
+        ]
+    });
+};
+var __webpack_export_target__ = exports;
+for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
+});

package/lib/schema-component/antd/media-card/index.js

@@ -0,0 +1,65 @@
+"use strict";
+var __webpack_modules__ = {
+    "./MediaCard": function(module) {
+        module.exports = require("./MediaCard.js");
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.n = function(module) {
+        var getter = module && module.__esModule ? function() {
+            return module['default'];
+        } : function() {
+            return module;
+        };
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+(()=>{
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+var _MediaCard__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./MediaCard");
+var __WEBPACK_REEXPORT_OBJECT__ = {};
+for(var __WEBPACK_IMPORT_KEY__ in _MediaCard__WEBPACK_IMPORTED_MODULE_0__)if ("default" !== __WEBPACK_IMPORT_KEY__) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
+    return _MediaCard__WEBPACK_IMPORTED_MODULE_0__[key];
+}).bind(0, __WEBPACK_IMPORT_KEY__);
+__webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
+var __webpack_export_target__ = exports;
+for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
+});

package/lib/schema-component/antd/media-card/style.js

@@ -0,0 +1,59 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+(()=>{
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useStyles: ()=>useStyles
+});
+const external_antd_style_namespaceObject = require("antd-style");
+function _tagged_template_literal(strings, raw) {
+    if (!raw) raw = strings.slice(0);
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    const data = _tagged_template_literal([
+        "\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      gap: 10px;\n      width: fit-content;\n      padding: 10px;\n      cursor: pointer;\n\n      &.layout {\n        flex-direction: column;\n      }\n      :hover {\n        border-radius: 10px;\n        transform: scale(1.05);\n        transition: all 0.3s;\n      }\n\n      &.need-hover:hover {\n        background-color: var(--colorPrimaryText);\n      }\n\n      .icon-wrapper {\n        padding: 20px;\n        border-radius: 40%;\n        .icon {\n          padding: 10px;\n          border-radius: 50%;\n          background-color: #ffffff;\n          font-size: 20px;\n        }\n      }\n\n      .title {\n        flex: 1;\n        display: inline-block;\n        font-size: 16px;\n        color: #2f2f2f;\n        overflow: hidden;\n      }\n    "
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+const useStyles = (0, external_antd_style_namespaceObject.createStyles)((param)=>{
+    let { css, token } = param;
+    return {
+        mediaCardStyle: css(_templateObject())
+    };
+});
+var __webpack_export_target__ = exports;
+for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
+});

package/lib/schema-component/antd/page/Page.js

@@ -47,6 +47,7 @@ const components_namespaceObject = require("@tachybase/components");
 const schema_namespaceObject = require("@tachybase/schema");
 const icons_namespaceObject = require("@ant-design/icons");
 const pro_layout_namespaceObject = require("@ant-design/pro-layout");
+const core_namespaceObject = require("@dnd-kit/core");
 const external_antd_namespaceObject = require("antd");
 const external_antd_style_namespaceObject = require("antd-style");
 const external_classnames_namespaceObject = require("classnames");
@@ -65,6 +66,7 @@ const useGetAriaLabelOfSchemaInitializer_js_namespaceObject = require("../../../
 const theme_index_js_namespaceObject = require("../../../style/theme/index.js");
 const external_common_index_js_namespaceObject = require("../../common/index.js");
 const sortable_item_index_js_namespaceObject = require("../../common/sortable-item/index.js");
+const DragHandlePageTab_js_namespaceObject = require("../../common/sortable-item/DragHandlePageTab.js");
 const external_core_index_js_namespaceObject = require("../../core/index.js");
 const external_hooks_index_js_namespaceObject = require("../../hooks/index.js");
 const external_error_fallback_index_js_namespaceObject = require("../error-fallback/index.js");
@@ -134,7 +136,7 @@ const PageHeader = (props)=>{
     const { theme } = (0, theme_index_js_namespaceObject.useGlobalTheme)();
     const options = (0, external_react_namespaceObject.useContext)(schema_namespaceObject.SchemaOptionsContext);
     const compile = (0, external_hooks_index_js_namespaceObject.useCompile)();
-    const { hiddenScrollArea } = (0, useContextMenu_js_namespaceObject.useContextMenu)();
+    const { showScrollArea } = (0, useContextMenu_js_namespaceObject.useContextMenu)();
     const hidePageTitle = null === (_fieldSchema_xcomponentprops = fieldSchema['x-component-props']) || void 0 === _fieldSchema_xcomponentprops ? void 0 : _fieldSchema_xcomponentprops.hidePageTitle;
     const pageHeaderTitle = hidePageTitle ? void 0 : fieldSchema.title || compile(title);
     const items = fieldSchema.mapProperties((schema)=>({
@@ -153,12 +155,12 @@ const PageHeader = (props)=>{
             ghost: false,
             title: pageHeaderTitle || ' ',
             ...parentProps,
-            extra: !enablePageTabs && !hiddenScrollArea && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject.ScrollArea, {}),
+            extra: !enablePageTabs && showScrollArea && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject.ScrollArea, {}),
             footer: enablePageTabs && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TabComponent, {
                 activeKey: activeKey,
                 setLoading: setLoading,
                 setSearchParams: setSearchParams,
-                hiddenScrollArea: hiddenScrollArea,
+                showScrollArea: showScrollArea,
                 options: options,
                 theme: theme,
                 items: items
@@ -167,9 +169,14 @@ const PageHeader = (props)=>{
     });
 };
 const TabComponent = (props)=>{
-    const { activeKey, setLoading, setSearchParams, hiddenScrollArea, options, theme, items } = props;
+    const { activeKey, setLoading, setSearchParams, showScrollArea, options, theme, items } = props;
     const { styles } = (0, external_Page_style_js_namespaceObject.useStyles)();
     const [hasMounted, setHasMounted] = (0, external_react_namespaceObject.useState)(false);
+    const sensors = (0, core_namespaceObject.useSensors)((0, core_namespaceObject.useSensor)(core_namespaceObject.PointerSensor, {
+        activationConstraint: {
+            distance: 5
+        }
+    }));
     const handleTabClick = (activeKey)=>{
         setLoading(true);
         setSearchParams([
@@ -188,6 +195,7 @@ const TabComponent = (props)=>{
         });
     }, []);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_common_index_js_namespaceObject.DndContext, {
+        sensors: sensors,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tabs, {
             className: styles.tabComponentClass,
             type: "card",
@@ -198,7 +206,7 @@ const TabComponent = (props)=>{
             onTabClick: handleTabClick,
             tabBarExtraContent: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TabBarExtraContent, {
                 theme: theme,
-                hiddenScrollArea: hiddenScrollArea,
+                showScrollArea: showScrollArea,
                 options: options
             })
         })
@@ -208,31 +216,33 @@ const TabItem = (props)=>{
     const { schema } = props;
     const { t } = (0, external_react_i18next_namespaceObject.useTranslation)();
     const { styles } = (0, external_Page_style_js_namespaceObject.useStyles)();
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(sortable_item_index_js_namespaceObject.SortableItem, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(sortable_item_index_js_namespaceObject.SortableItem, {
         id: schema.name,
         schema: schema,
         className: external_classnames_default()('tb-action-link', 'designerCss', props.className, styles.tabItemClass),
-        children: [
-            schema['x-icon'] && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icon_index_js_namespaceObject.Icon, {
-                style: {
-                    marginRight: 8
-                },
-                type: schema['x-icon']
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                children: schema.title || t('Unnamed')
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                className: "tab-designer-wrapper",
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_PageTabDesigner_js_namespaceObject.PageTabDesigner, {
-                    schema: schema
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(DragHandlePageTab_js_namespaceObject.DragHandlePageTab, {
+            children: [
+                schema['x-icon'] && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icon_index_js_namespaceObject.Icon, {
+                    style: {
+                        marginRight: 8
+                    },
+                    type: schema['x-icon']
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    children: schema.title || t('Unnamed')
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                    className: "tab-designer-wrapper",
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_PageTabDesigner_js_namespaceObject.PageTabDesigner, {
+                        schema: schema
+                    })
                 })
-            })
-        ]
+            ]
+        })
     });
 };
 const TabBarExtraContent = (props)=>{
-    const { hiddenScrollArea, options, theme } = props;
+    const { showScrollArea, options, theme } = props;
     const dn = (0, external_hooks_index_js_namespaceObject.useDesignable)();
     const { t } = (0, external_react_i18next_namespaceObject.useTranslation)();
     const { getAriaLabel } = (0, useGetAriaLabelOfSchemaInitializer_js_namespaceObject.useGetAriaLabelOfSchemaInitializer)();
@@ -265,7 +275,7 @@ const TabBarExtraContent = (props)=>{
                 icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.PlusOutlined, {}),
                 onClick: handleAddTab
             }),
-            !hiddenScrollArea && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject.ScrollArea, {
+            showScrollArea && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject.ScrollArea, {
                 className: "scroll-area-extra-content"
             })
         ]

package/lib/schema-component/common/dnd-context/index.js

@@ -113,13 +113,7 @@ const DndContext = (0, schema_namespaceObject.observer)((props)=>{
                 dropAnimation: {
                     duration: 10,
                     easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)'
-                },
-                children: visible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                    style: {
-                        whiteSpace: 'nowrap'
-                    },
-                    children: t('Dragging')
-                })
+                }
             }),
             props.children
         ]

package/lib/schema-component/common/sortable-item/DragHandlePageTab.js

@@ -0,0 +1,105 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+(()=>{
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    DragHandlePageTab: ()=>DragHandlePageTab
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_antd_style_namespaceObject = require("antd-style");
+const index_js_namespaceObject = require("../../hooks/index.js");
+const external_DragHandlePageTab_style_js_namespaceObject = require("./DragHandlePageTab.style.js");
+const external_SortableItem_js_namespaceObject = require("./SortableItem.js");
+const DragHandlePageTab = (props)=>{
+    const { isSubMenu, children, className: overStyle, isAdminMenu } = props;
+    const { draggable } = (0, external_react_namespaceObject.useContext)(external_SortableItem_js_namespaceObject.SortableContext);
+    const { designable } = (0, index_js_namespaceObject.useDesignable)();
+    const { attributes, listeners, setNodeRef, transform, isDragging } = draggable;
+    const { styles } = (0, external_DragHandlePageTab_style_js_namespaceObject.useStyles)();
+    const ref = (0, external_react_namespaceObject.useRef)(null);
+    const [dimensions, setDimensions] = (0, external_react_namespaceObject.useState)({
+        width: 0,
+        height: 0
+    });
+    const [initialPosition, setInitialPosition] = (0, external_react_namespaceObject.useState)({
+        x: 0,
+        y: 0
+    });
+    const centerOffset = {
+        x: 4 * dimensions.width,
+        y: 3 * dimensions.height
+    };
+    const style = {
+        position: isDragging ? 'fixed' : 'static',
+        top: isDragging ? initialPosition.y - centerOffset.y : 0,
+        left: isDragging ? initialPosition.x - centerOffset.x : 0,
+        width: isDragging ? 'max-content' : '100%',
+        height: isDragging ? 'max-content' : '100%',
+        zIndex: isDragging ? 999 : 'auto',
+        pointerEvents: isDragging ? 'none' : 'auto',
+        transform: transform ? "translate3d(".concat(transform.x, "px, ").concat(transform.y, "px, 0) scale(").concat(isDragging ? 1.05 : 1, ")") : void 0,
+        boxShadow: isDragging ? '0 4px 8px rgba(0, 0, 0, 0.1)' : 'none'
+    };
+    const handleMouseDown = (event)=>{
+        if (ref.current) {
+            const { width, height } = ref.current.getBoundingClientRect();
+            const { clientX, clientY } = event;
+            setDimensions({
+                width,
+                height
+            });
+            setInitialPosition({
+                x: clientX,
+                y: clientY
+            });
+        }
+    };
+    if (!designable) return children;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: setNodeRef,
+        className: (0, external_antd_style_namespaceObject.cx)(styles.dragHandleMenu, {
+            draggable: isDragging,
+            leftBorder: isSubMenu && isDragging,
+            adminMenu: isAdminMenu && isDragging
+        }, overStyle),
+        style: style,
+        ...listeners,
+        ...attributes,
+        role: "none",
+        onMouseDown: handleMouseDown,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            ref: ref,
+            className: 'wrapper',
+            children: children
+        })
+    });
+};
+var __webpack_export_target__ = exports;
+for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
+});