@tachybase/client 0.23.22 → 0.23.35

package/lib/schema-component/antd/form-item/FormItem.Settings.js

@@ -42,10 +42,12 @@ __webpack_require__.d(__webpack_exports__, {
     useIsAddNewForm: ()=>useIsAddNewForm,
     useIsFileField: ()=>useIsFileField,
     useIsFieldReadPretty: ()=>useIsFieldReadPretty,
+    useIsMuiltipleAble: ()=>useIsMuiltipleAble,
+    useIsMultipleSelect: ()=>useIsMultipleSelect,
     useIsSelectFieldMode: ()=>useIsSelectFieldMode,
+    formItemSettings: ()=>formItemSettings,
     useTitleFieldOptions: ()=>useTitleFieldOptions,
     useValidateSchema: ()=>useValidateSchema,
-    formItemSettings: ()=>formItemSettings,
     useIsAssociationField: ()=>useIsAssociationField,
     useIsFormReadPretty: ()=>useIsFormReadPretty,
     useFieldMode: ()=>useFieldMode
@@ -1202,6 +1204,19 @@ function useIsAssociationField() {
     ].includes(null == collectionField ? void 0 : collectionField.interface);
     return isAssociationField;
 }
+function useIsMultipleSelect() {
+    const collectionField = useFormItemCollectionField();
+    const isMultipleSelect = [
+        'select',
+        'radioGroup'
+    ].includes(null == collectionField ? void 0 : collectionField.interface);
+    return isMultipleSelect;
+}
+function useIsMuiltipleAble() {
+    const isAssociationField = useIsAssociationField();
+    const isMultipleSelect = useIsMultipleSelect();
+    return isAssociationField || isMultipleSelect;
+}
 function useIsFileField() {
     const { getCollection } = (0, external_collection_manager_index_js_namespaceObject.useCollectionManager_deprecated)();
     const collectionField = useFormItemCollectionField();

package/lib/schema-component/antd/form-v2/Form.Settings.js

@@ -251,7 +251,8 @@ const formDetailsSettings = new index_js_namespaceObject.SchemaSettings({
                                                     'x-component-props': {
                                                         style: {
                                                             width: 260
-                                                        }
+                                                        },
+                                                        optionLabelProp: 'fullLabel'
                                                     }
                                                 },
                                                 direction: {

package/lib/schema-component/antd/grid-card/GridCard.Designer.js

@@ -201,7 +201,8 @@ const GridCardDesigner = ()=>{
                                                     'x-component-props': {
                                                         style: {
                                                             width: 260
-                                                        }
+                                                        },
+                                                        optionLabelProp: 'fullLabel'
                                                     }
                                                 },
                                                 direction: {

package/lib/schema-component/antd/list/List.Designer.js

@@ -136,7 +136,8 @@ const ListDesigner = ()=>{
                                                 'x-component-props': {
                                                     style: {
                                                         width: 260
-                                                    }
+                                                    },
+                                                    optionLabelProp: 'fullLabel'
                                                 }
                                             },
                                             direction: {

package/lib/schema-component/antd/menu/AdminMenu.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__, {
+    AdminMenu: ()=>AdminMenu
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const schema_namespaceObject = require("@tachybase/schema");
+const external_antd_namespaceObject = require("antd");
+const external_react_i18next_namespaceObject = require("react-i18next");
+const external_index_js_namespaceObject = require("../../index.js");
+const external_index_js_namespaceObject_1 = require("../../../index.js");
+const DragHandleMenu_js_namespaceObject = require("../../common/sortable-item/DragHandleMenu.js");
+const external_AdminMenu_style_js_namespaceObject = require("./AdminMenu.style.js");
+const AdminMenu = (props)=>{
+    const { items, onClick } = props;
+    const { styles } = (0, external_AdminMenu_style_js_namespaceObject.useStyles)();
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Card, {
+        className: styles.adminMenuStyle,
+        children: null == items ? void 0 : items.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AdminMenuCard, {
+                item: item,
+                onClick: onClick
+            }, item.key))
+    });
+};
+const AdminMenuCard = (props)=>{
+    const { item, onClick } = props;
+    const { icon, field, Designer, schema } = (null == item ? void 0 : item.menu) || {};
+    const { t } = (0, external_react_i18next_namespaceObject.useTranslation)();
+    const { styles } = (0, external_AdminMenu_style_js_namespaceObject.useStyles)();
+    const handleClick = ()=>onClick(item);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Card.Grid, {
+        className: styles.adminMenuCardStyle,
+        onClick: handleClick,
+        children: item.menu ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.SchemaContext.Provider, {
+            value: schema,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(schema_namespaceObject.FieldContext.Provider, {
+                value: field,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject.SortableItem, {
+                    role: "button",
+                    "aria-label": t(field.title),
+                    removeParentsIfNoChildren: false,
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(DragHandleMenu_js_namespaceObject.DragHandleMenu, {
+                        className: "drag-handle-menu",
+                        isAdminMenu: true,
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("a", {
+                                className: "field-link",
+                                role: "button",
+                                "aria-label": t(field.title),
+                                title: t(field.title),
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "icon-wrapper",
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_1.Icon, {
+                                            type: null != icon ? icon : 'QuestionCircleOutlined'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        className: "field-title",
+                                        children: t(field.title)
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Designer, {
+                                isAdminMenu: true
+                            })
+                        ]
+                    })
+                })
+            })
+        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+            children: item.label
+        })
+    });
+};
+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/menu/AdminMenu.style.js

@@ -0,0 +1,70 @@
+"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      border: none;\n      border-radius: 8px 8px 8px 8px;\n      background: #ffffff;\n      box-shadow:\n        0px 4px 8px 0px rgba(0, 5, 26, 0.15),\n        0px 0px 8px 0px rgba(0, 5, 26, 0.05);\n\n      .ant-card-body {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        justify-items: center;\n        gap: 10px;\n        grid-row-gap: 10px;\n      }\n\n      .ant-card-body::before {\n        display: none;\n      }\n    "
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    const data = _tagged_template_literal([
+        "\n      &.ant-card-grid {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        width: 100%;\n        height: 5rem;\n        color: inherit;\n        border: 0;\n        border-radius: 8px;\n        box-shadow: none;\n\n        &:hover {\n          background-color: #f4f4f4;\n          box-shadow: none;\n        }\n      }\n\n      &.ant-card-grid .ant-btn {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n\n        width: 100%;\n        padding: 0;\n        border: none;\n        box-shadow: none;\n      }\n\n      .field-link {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-around;\n        align-items: center;\n        color: inherit;\n\n        &:hover {\n          color: inherit;\n        }\n      }\n\n      .icon-wrapper {\n        font-size: 1.2rem;\n        text-align: center;\n        margin-bottom: 0.3rem;\n      }\n\n      .field-title {\n        text-align: center;\n        vertical-align: middle;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        font-size: ",
+        ";\n      }\n\n      .tb-sortable-designer {\n        width: 100%;\n        height: 5rem;\n      }\n\n      .drag-handle-menu {\n        width: 100%;\n        height: 100%;\n      }\n\n      .general-schema-designer {\n        position: absolute;\n        left: 0;\n        bottom: 0;\n\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n\n        width: 100%;\n        height: 45%;\n        border-radius: 1px 1px 8px 8px;\n        background: rgba(0, 0, 0, 0.5);\n        visibility: hidden;\n      }\n\n      &.ant-card-grid:hover .general-schema-designer {\n        visibility: visible;\n      }\n\n      .general-schema-designer .anticon-menu {\n        padding: 1px;\n        border-radius: 2px;\n        background-color: #ffffff;\n        color: #2f2f2f;\n      }\n    "
+    ]);
+    _templateObject1 = function() {
+        return data;
+    };
+    return data;
+}
+const useStyles = (0, external_antd_style_namespaceObject.createStyles)((param)=>{
+    let { css, token } = param;
+    return {
+        adminMenuStyle: css(_templateObject()),
+        adminMenuCardStyle: css(_templateObject1(), token.fontSizeSM)
+    };
+});
+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/menu/Menu.Designer.js

@@ -29,7 +29,6 @@ __webpack_require__.d(__webpack_exports__, {
     MenuDesigner: ()=>MenuDesigner
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("react");
 const components_namespaceObject = require("@tachybase/components");
 const schema_namespaceObject = require("@tachybase/schema");
 const external_antd_namespaceObject = require("antd");
@@ -62,14 +61,10 @@ const findMenuSchema = (fieldSchema)=>{
         parent = parent.parent;
     }
 };
-const InsertMenuItems = (props)=>{
-    const { eventKey, title, insertPosition } = props;
+const InsertMenuItemsGroup = ()=>{
     const { t } = (0, external_react_i18next_namespaceObject.useTranslation)();
     const { dn } = (0, external_index_js_namespaceObject_3.useDesignable)();
-    const fieldSchema = (0, schema_namespaceObject.useFieldSchema)();
-    const isSubMenu = 'Menu.SubMenu' === fieldSchema['x-component'];
     const api = (0, external_index_js_namespaceObject_3.useAPIClient)();
-    if (!isSubMenu && 'beforeEnd' === insertPosition) return null;
     const serverHooks = [
         {
             type: 'onSelfCreate',
@@ -80,23 +75,25 @@ const InsertMenuItems = (props)=>{
             method: 'extractTextToLocale'
         }
     ];
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_index_js_namespaceObject_3.SchemaSettingsSubMenu, {
-        eventKey: eventKey,
-        title: title,
+    const insertPosition = 'beforeEnd';
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_index_js_namespaceObject_3.SchemaSettingsItemGroup, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsModalItem, {
                 eventKey: "".concat(insertPosition, "group"),
-                title: t('Submenu'),
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.Icon, {
+                    type: 'FolderAddOutlined'
+                }),
+                title: t('Create group'),
                 schema: {
                     type: 'object',
-                    title: t('Add group'),
+                    title: t('Create group'),
                     properties: {
                         title: {
                             'x-decorator': 'FormItem',
                             'x-component': 'Input',
+                            'x-component-props': {},
                             title: t('Menu item title'),
-                            required: true,
-                            'x-component-props': {}
+                            required: true
                         },
                         icon: {
                             title: t('Icon'),
@@ -121,10 +118,13 @@ const InsertMenuItems = (props)=>{
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsModalItem, {
                 eventKey: "".concat(insertPosition, "page"),
-                title: t('Page'),
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.Icon, {
+                    type: 'FileOutlined'
+                }),
+                title: t('Create page'),
                 schema: {
                     type: 'object',
-                    title: t('Add page'),
+                    title: t('Create page'),
                     properties: {
                         title: {
                             'x-decorator': 'FormItem',
@@ -171,10 +171,13 @@ const InsertMenuItems = (props)=>{
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsModalItem, {
                 eventKey: "".concat(insertPosition, "link"),
-                title: t('Link'),
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.Icon, {
+                    type: 'GlobalOutlined'
+                }),
+                title: t('Create link'),
                 schema: {
                     type: 'object',
-                    title: t('Add link'),
+                    title: t('Create link'),
                     properties: {
                         title: {
                             title: t('Menu item title'),
@@ -212,10 +215,13 @@ const InsertMenuItems = (props)=>{
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsDivider, {}),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsModalItem, {
                 eventKey: "".concat(insertPosition, "restore"),
-                title: t('Load'),
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.Icon, {
+                    type: 'UploadOutlined'
+                }),
+                title: t('Load menu config'),
                 schema: {
                     type: 'object',
-                    title: t('Load'),
+                    title: t('Load menu config'),
                     properties: {
                         title: {
                             'x-decorator': 'FormItem',
@@ -224,6 +230,13 @@ const InsertMenuItems = (props)=>{
                             required: true,
                             'x-component-props': {}
                         },
+                        bindMenuToRole: {
+                            type: 'boolean',
+                            title: '{{ t("Automatically assign permissions to all matching roles") }}',
+                            'x-decorator': 'FormItem',
+                            'x-component': 'Checkbox',
+                            default: true
+                        },
                         file: {
                             type: 'object',
                             title: '{{ t("File") }}',
@@ -238,12 +251,19 @@ const InsertMenuItems = (props)=>{
                     }
                 },
                 onSubmit: async (param)=>{
-                    let { title, file } = param;
+                    let { title, file, bindMenuToRole } = param;
                     const { data } = await api.request({
                         url: file.url,
                         baseURL: '/'
                     });
                     const s = null != data ? data : {};
+                    if (bindMenuToRole) {
+                        const hooks = data['x-server-hooks'];
+                        if (!hooks.some((v)=>'onSelfCreate' === v.type && 'bindMenuToRole' === v.method)) hooks.push({
+                            type: 'onSelfCreate',
+                            method: 'bindMenuToRole'
+                        });
+                    }
                     s.title = title;
                     dn.insertAdjacent(insertPosition, s);
                 }
@@ -251,7 +271,8 @@ const InsertMenuItems = (props)=>{
         ]
     });
 };
-const MenuDesigner = ()=>{
+const MenuDesigner = (props)=>{
+    const { isAdminMenu } = props;
     const field = (0, schema_namespaceObject.useField)();
     const fieldSchema = (0, schema_namespaceObject.useFieldSchema)();
     const api = (0, external_index_js_namespaceObject_3.useAPIClient)();
@@ -304,8 +325,8 @@ const MenuDesigner = ()=>{
             },
             icon: {
                 title: t('Menu item icon'),
-                'x-component': 'IconPicker',
-                'x-decorator': 'FormItem'
+                'x-decorator': 'FormItem',
+                'x-component': 'IconPicker'
             }
         }
     };
@@ -313,6 +334,8 @@ const MenuDesigner = ()=>{
         title: field.title,
         icon: field.componentProps.icon
     };
+    const isSubMenu = 'Menu.SubMenu' === fieldSchema['x-component'];
+    const hiddenAddMenu = isAdminMenu || !isSubMenu;
     if ('Menu.URL' === fieldSchema['x-component']) {
         schema.properties['href'] = {
             title: t('Link'),
@@ -322,10 +345,15 @@ const MenuDesigner = ()=>{
         initialValues['href'] = field.componentProps.href;
     }
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_index_js_namespaceObject_3.GeneralSchemaDesigner, {
+        draggable: false,
+        AddMenuModalComponent: !hiddenAddMenu && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InsertMenuItemsGroup, {}),
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsModalItem, {
-                title: t('Edit'),
+                title: t('Modify the name and icon'),
                 eventKey: "edit",
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.Icon, {
+                    type: 'FormOutlined'
+                }),
                 schema: schema,
                 initialValues: initialValues,
                 onSubmit: (param)=>{
@@ -366,6 +394,9 @@ const MenuDesigner = ()=>{
                     TreeSelect: components_namespaceObject.TreeSelect
                 },
                 effects: effects,
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.Icon, {
+                    type: 'DragOutlined'
+                }),
                 schema: {
                     type: 'object',
                     title: t('Move to'),
@@ -414,24 +445,11 @@ const MenuDesigner = ()=>{
                 }
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsDivider, {}),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InsertMenuItems, {
-                eventKey: 'insertbeforeBegin',
-                title: t('Insert before'),
-                insertPosition: 'beforeBegin'
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InsertMenuItems, {
-                eventKey: 'insertafterEnd',
-                title: t('Insert after'),
-                insertPosition: 'afterEnd'
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InsertMenuItems, {
-                eventKey: 'insertbeforeEnd',
-                title: t('Insert inner'),
-                insertPosition: 'beforeEnd'
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsDivider, {}),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsItem, {
                 title: t('Dump'),
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.Icon, {
+                    type: 'DownloadOutlined'
+                }),
                 onClick: async ()=>{
                     const deleteUid = (s)=>{
                         delete s['name'];
@@ -455,6 +473,7 @@ const MenuDesigner = ()=>{
                 }
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_js_namespaceObject_3.SchemaSettingsRemove, {
+                icon: "DeleteOutlined",
                 confirm: {
                     title: t('Delete menu item')
                 }