@luck-design-biz/luckda 1.0.6-13tl → 1.0.7

package/es/lowcode/constants/event-topics.js

@@ -32,6 +32,8 @@ export var COMPONENT_DRAG_OVER = 'component-drag-over';
 export var COMPONENT_DRAG_END = 'component-drag-end';
 // 保存事件
 export var DESIGN_OPERATE_SAVE = 'design-operate-save';
+// 快捷键触发事件
+export var DESIGN_SHORTCUT_EMIT = 'desdign-shortcut-emit';
 
 /******************************* Design Topic结束 *******************************/
 

package/es/lowcode/constants/index.js

@@ -5,10 +5,11 @@ export var RUNTIME = {
 };
 export var META_TAG_NAME = 'luckda-lcpage';
 export var COOKIE_VIRTUAL_ACCOUNT_KEY = 'Lowcode-Account';
-export var LC_RUNTIME_KEY = 'Lowcode-Runtime';
-export var LC_COMPONENT_UNIT_KEY = 'luckda-unitmark';
-export var LC_COMPONENT_UNIT = 'lc-component';
-export var LC_FORMITEM_UNIT = 'lc-formitem';
+export var LC_RUNTIME_KEY = 'LD-Runtime';
+export var LC_COMPONENT_UNIT_KEY = 'LD-__unitmark';
+export var LC_PAGEPROXY_KEY = 'LD-__pageproxy';
+export var LC_COMPONENT_UNIT = 'LD-__component';
+export var LC_FORMITEM_UNIT = 'LD-__formitem';
 export var LC_BUILDIN_UNIT_KEY = {
   PAGE_ROOT: 'page_root',
   PAGE_HEADER: 'page_header',

package/es/lowcode/engine/meta/components-list.json

@@ -123,6 +123,12 @@
         "desc": "用于展示组织维度层级结构的数据。它提供了层级结构、节点展开/折叠、节点选择、节点操作和展示样式等功能。",
         "icon": "icon-tree"
       },
+      {
+        "component": "Proxy",
+        "name": "页面代理",
+        "desc": "用于代理其他页面的内容，用于实现已有页面的服用。",
+        "icon": "icon-proxy"
+      },
       {
         "component": "Table",
         "name": "表格",

package/es/lowcode/engine/meta/fielddate.props.default.json

@@ -8,6 +8,7 @@
   "order": 1,
   "showTime": false,
   "allowClear": true,
+  "format": 16,
   "col": 1,
   "row": 1,
   "state": {

package/es/lowcode/engine/meta/fielddate.props.json

@@ -29,6 +29,54 @@
       "name": "日期格式",
       "type": "string"
     },
+    {
+      "key": "format",
+      "name": "日期格式",
+      "type": "select",
+      "options": [
+        {
+          "label": "年-月-日 时:分:秒",
+          "value": "YYYY-MM-DD HH:mm:ss"
+        },
+        {
+          "label": "年-月-日 时:分",
+          "value": "YYYY-MM-DD HH:mm"
+        },
+        {
+          "label": "年-月-日 时",
+          "value": "YYYY-MM-DD HH"
+        },
+        {
+          "label": "年-月-日",
+          "value": "YYYY-MM-DD"
+        },
+        {
+          "label": "年-月",
+          "value": "YYYY-MM"
+        },
+        {
+          "label": "年",
+          "value": "YYYY"
+        },
+        {
+          "label": "时:分:秒",
+          "value": "HH:mm:ss"
+        },
+        {
+          "label": "时:分",
+          "value": "HH:mm"
+        },
+        {
+          "label": "分:秒",
+          "value": "mm:ss"
+        },
+        {
+          "label": "年-周",
+          "value": "YYYY-wo"
+        }
+      ],
+      "default": 16
+    },
     {
       "key": "disabledDate",
       "name": "不可选日期",

package/es/lowcode/engine/meta/js-editor/auto-complete.json

@@ -165,6 +165,11 @@
     "triggerWord": "pagemodal",
     "completions": []
   },
+  {
+    "name": "Proxy",
+    "triggerWord": "proxy",
+    "completions": []
+  },
   {
     "name": "Section",
     "triggerWord": "section",

package/es/lowcode/engine/meta/pagecomponent.props.default.json

@@ -0,0 +1,8 @@
+{
+  "component": "PageComponent",
+  "name": "关联页面组件",
+  "group": "build-in",
+  "advance": {
+    "events": {}
+  }
+}

package/es/lowcode/engine/meta/pagecomponent.props.json

@@ -0,0 +1,41 @@
+{
+  "component": "PageComponent",
+  "name": "关联页面组件",
+  "group": "build-in",
+  "props": [
+    {
+      "key": "id",
+      "name": "唯一标识",
+      "type": "string",
+      "disabled": true
+    },
+    {
+      "key": "linkName",
+      "name": "页面名称",
+      "type": "string",
+      "disabled": true
+    },
+    {
+      "key": "linkCode",
+      "name": "页面编码",
+      "type": "string",
+      "disabled": true
+    }
+  ],
+  "advance": {
+    "events": [
+      {
+        "key": "onMount",
+        "name": "组件首次渲染完成",
+        "desc": "在组件首次渲染完成时，执行方法",
+        "func": "function onPageMount(){\n\t\n}"
+      },
+      {
+        "key": "onUnmount",
+        "name": "组件卸载时",
+        "desc": "在组件卸载时，执行方法。",
+        "func": "function onPageUnmount(){\n\t\n}"
+      }
+    ]
+  }
+}

package/es/lowcode/engine/meta/proxy.props.default.json

@@ -0,0 +1,15 @@
+{
+  "component": "Proxy",
+  "name": "页面代理",
+  "desc": "用于代理其他页面的内容，用于实现已有页面的服用。",
+  "icon": "icon-proxy",
+  "group": "advance",
+  "groupName": "高级",
+  "order": 6,
+  "css": "width: 100%; height: 100%; background-color: transparent;",
+  "destroyOnUnmount": false,
+  "proxyParams": [],
+  "advance": {
+    "events": {}
+  }
+}

package/es/lowcode/engine/meta/proxy.props.json

@@ -0,0 +1,66 @@
+{
+  "component": "Proxy",
+  "name": "页面代理",
+  "desc": "用于代理其他页面的内容，用于实现已有页面的服用。",
+  "icon": "icon-proxy",
+  "group": "advance",
+  "groupName": "高级",
+  "order": 6,
+  "props": [
+    {
+      "key": "id",
+      "name": "唯一标识",
+      "type": "string",
+      "disabled": true
+    },
+    {
+      "key": "destroyOnUnmount",
+      "name": "卸载时销毁",
+      "type": "switch",
+      "default": false
+    },
+    {
+      "key": "proxyCode",
+      "name": "页面编码",
+      "type": "_ProxyLinker"
+    },
+    {
+      "key": "proxyParams",
+      "name": "页面参数",
+      "type": "_ProxyParams",
+      "wrapper": "collapse",
+      "wrapperProps": {
+        "suppressIcon": true
+      },
+      "next": {
+        "name": "页面参数对象",
+        "autoClose": true,
+        "props": [
+          {
+            "key": "proxyParams",
+            "name": "#页面参数对象",
+            "type": "_ProxyParamsSetter",
+            "default": []
+          }
+        ]
+      }
+    }
+  ],
+  "css": "width: 100%; height: 100%; background-color: transparent;",
+  "advance": {
+    "events": [
+      {
+        "key": "onMount",
+        "name": "组件首次渲染完成",
+        "desc": "在组件首次渲染完成时，执行方法",
+        "func": "function onPageMount(){\n\t\n}"
+      },
+      {
+        "key": "onUnmount",
+        "name": "组件卸载时",
+        "desc": "在组件卸载时，执行方法。",
+        "func": "function onPageUnmount(){\n\t\n}"
+      }
+    ]
+  }
+}

package/es/lowcode/engine/provider/ContextProvider/index.js

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { createContext, useContext as useReactContext, useRef } from 'react';
 import { useMemoizedFn } from 'ahooks';
@@ -7,7 +10,6 @@ import { useLDEventBus } from "../EventBusProvider";
 import RemoteSourceProvider, { RemoteSourceContext } from "../RemoteSourceProvider";
 import usePageVar from "./usePageVar";
 import useTodo from "./useTodo";
-import { getModuleData } from "./usePageDataStore";
 import API_PREFIX from "@/services/ApiConfig";
 import { getBehaviorUrl } from "../../../constants/api-url";
 import * as topics from "../../../constants/event-topics";
@@ -60,10 +62,27 @@ export default (function (_ref) {
     if (index !== -1) {
       _componentList.current.splice(index, 1);
     }
-    ;
   });
-  var _initRemoteApiMap = useMemoizedFn(function (_apiMap) {
-    _remoteApiMap.current = _apiMap;
+  var _initRemoteApiMap = useMemoizedFn(function (_apiMap, append) {
+    if (append) {
+      _remoteApiMap.current = new Map([].concat(_toConsumableArray(_remoteApiMap.current), _toConsumableArray(_apiMap)));
+    } else {
+      _remoteApiMap.current = _apiMap;
+    }
+  });
+  var _deleteRemoteApis = useMemoizedFn(function (keys) {
+    var _iterator = _createForOfIteratorHelper(keys),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var key = _step.value;
+        _remoteApiMap.current.delete(key);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
   });
   var getElementById = useMemoizedFn(function (compId) {
     var _componentList$curren;
@@ -81,10 +100,9 @@ export default (function (_ref) {
     if (!_parentId) return null;
     return compMap.get(_parentId);
   });
-  var want = useMemoizedFn(function (wanted) {
-    var _getModuleData;
+  var want = useMemoizedFn(function (wanted, _serials) {
     if (isNil(wanted)) return false;
-    var serials = ((_getModuleData = getModuleData()) === null || _getModuleData === void 0 ? void 0 : _getModuleData.resources) || [];
+    var serials = _serials || [];
     var serialMap = serials.reduce(function (acc, cur, index) {
       if (!acc[cur]) {
         acc[cur] = Math.pow(2, index);
@@ -101,6 +119,7 @@ export default (function (_ref) {
     _register: _register,
     _unregister: _unregister,
     _initRemoteApiMap: _initRemoteApiMap,
+    _deleteRemoteApis: _deleteRemoteApis,
     /**
      * @property {boolean} loading - loading状态
      */
@@ -179,9 +198,26 @@ export default (function (_ref) {
         var _privateGetter$curren;
         return (_privateGetter$curren = _privateGetter.current) === null || _privateGetter$curren === void 0 ? void 0 : _privateGetter$curren[property]();
       } else if (property === 'state') {
-        return getState();
+        var state = getState();
+        return new Proxy(Object.assign({}, state), {
+          get: function get(stateTarget, stateProperty, stateReceiver) {
+            return Reflect.get(stateTarget, stateProperty, stateReceiver);
+          },
+          set: function set(stateTarget, stateProperty, stateReceiver) {
+            setState(_defineProperty({}, stateProperty, stateReceiver));
+            return true;
+          }
+        });
       } else if (property === 'global') {
-        return global.current;
+        return new Proxy(Object.assign({}, global.current), {
+          get: function get(globalTarget, globalProperty, globalReceiver) {
+            return Reflect.get(globalTarget, globalProperty, globalReceiver);
+          },
+          set: function set(globalTarget, globalProperty, globalReceiver) {
+            setGlobal(_defineProperty({}, globalProperty, globalReceiver));
+            return true;
+          }
+        });
       }
       return Reflect.get(target, property, receiver);
     },

package/es/lowcode/engine/provider/ContextProvider/usePageDataStore.js

@@ -7,6 +7,7 @@ import { subscribeWithSelector } from 'zustand/middleware';
 import { useShallow } from 'zustand/react/shallow';
 import { isObject, isArray, isNil, isFunction, isString, get, set as _set, unset, assign, forOwn, forEach, omit, debounce } from 'lodash';
 import isDeepEqual from 'fast-deep-equal';
+import { usePageProxyContext } from "../PageProxyProvider";
 import { getPathNodesById, findNodeAndParent } from "../../tools/dataProcess";
 import { LC_BUILDIN_UNIT_KEY } from "../../../constants";
 var temporalStateCreator = function temporalStateCreator(userSet, userGet, options) {
@@ -141,18 +142,12 @@ var findNode = function findNode(obj, id) {
 var usePageDataStore = create()(immer(subscribeWithSelector(temporal(function (set) {
   return {
     pageData: null,
-    moduleData: null,
     needPrompt: false,
     initialize: function initialize(data) {
       return set(function (state) {
         state.pageData = data;
       });
     },
-    initializeModule: function initializeModule(data) {
-      return set(function (state) {
-        state.moduleData = data;
-      });
-    },
     reset: function reset(data) {
       return set(function (state) {
         state.pageData = data || null;
@@ -260,20 +255,20 @@ export var modifyNode = function modifyNode(id, data) {
 
 /**
  * 移动页面中的一个节点到另一个位置。
- * 
+ *
  * @param {string} sid - 源节点的ID。
  * @param {string} tid - 目标节点的ID。
  * @param {string} action - 移动类型，可以是 'inside', 'left', 'right' 中的一个。
  * @param {string} newid - 新节点的ID，仅在创建新节点时使用。
  * @param {Object} json - 新节点的初始属性，仅在创建新节点时使用。
- * 
+ *
  * @description
  * 此函数会更新页面数据状态，根据提供的动作类型（`action`），将源节点（`sourceNode`）移动到目标节点（`targetNode`）的相应位置。
  * - 'inside': 将源节点作为目标节点的子节点。
  * - 'left': 将源节点放在目标节点的左边（同一父节点下）。
  * - 'right': 将源节点放在目标节点的右边（同一父节点下）。
  * 如果 `sid` 是空但提供了 `newid`，则函数会创建一个新的节点。
- * 
+ *
  */
 export var moveNode = function moveNode(sid, tid, action, newid, json) {
   usePageDataStore.setState(function (state) {
@@ -387,30 +382,41 @@ export var useTask = function useTask(type) {
   }, []);
   return task;
 };
-export var useGet = function useGet(_) {
-  var result = usePageDataStore(useShallow(function (state) {
-    if (isNil(_)) {
-      return state.pageData;
-    } else if (isFunction(_)) {
-      return _(state.pageData);
-    } else if (isArray(_)) {
-      return _.map(function (k) {
-        var _findNode;
-        return k.includes('.') ? get(state.pageData, k) : (_findNode = findNode(state.pageData, k)) === null || _findNode === void 0 ? void 0 : _findNode.target;
+var getTargetData = function getTargetData(_, source) {
+  if (isNil(_)) {
+    return source;
+  } else if (isFunction(_)) {
+    return _(source);
+  } else if (isArray(_)) {
+    return _.map(function (k) {
+      var _findNode;
+      return k.includes('.') ? get(source, k) : (_findNode = findNode(source, k)) === null || _findNode === void 0 ? void 0 : _findNode.target;
+    });
+  } else if (isObject(_) && _.id) {
+    var _findNode2;
+    var path = _.path;
+    var _target = _.id === LC_BUILDIN_UNIT_KEY.PAGE_ROOT ? source : (_findNode2 = findNode(source, _.id)) === null || _findNode2 === void 0 ? void 0 : _findNode2.target;
+    if (isNil(path)) {
+      return _target;
+    } else if (isString(path)) {
+      return get(_target, path);
+    } else if (isArray(path)) {
+      return path.map(function (k) {
+        return get(_target, k);
       });
-    } else if (isObject(_) && _.id) {
-      var _findNode2;
-      var path = _.path;
-      var _target = _.id === LC_BUILDIN_UNIT_KEY.PAGE_ROOT ? state.pageData : (_findNode2 = findNode(state.pageData, _.id)) === null || _findNode2 === void 0 ? void 0 : _findNode2.target;
-      return isNil(path) ? _target : get(_target, path);
-    } else if (isString(_)) {
-      return get(state.pageData, _);
     }
-  }));
-  return result;
+  } else if (isString(_)) {
+    return get(state.pageData, _);
+  }
 };
-export var getModuleData = function getModuleData() {
-  return usePageDataStore.getState().moduleData;
+export var useGet = function useGet(_) {
+  var ppCtx = usePageProxyContext();
+  if (ppCtx !== null && ppCtx !== void 0 && ppCtx.proxyCode) {
+    return getTargetData(_, usePageDataStore.getState()[ppCtx.proxyCode]);
+  }
+  return usePageDataStore(useShallow(function (state) {
+    return getTargetData(_, state.pageData);
+  }));
 };
 export var setNeedPrompt = function setNeedPrompt(_need) {
   usePageDataStore.setState(function (state) {

package/es/lowcode/engine/provider/ContextProvider/usePageVar.js

@@ -3,18 +3,24 @@ import { useMemoizedFn } from 'ahooks';
 import { create } from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 import { subscribeWithSelector } from 'zustand/middleware';
-import { forOwn, isNil, isString, isObject } from 'lodash';
+import { forOwn, isNil, isString, isObject, omit } from 'lodash';
 export var useStateStore = create()(immer(subscribeWithSelector(function (set) {
   return {
     state: {},
-    initialize: function initialize(init) {
+    initialize: function initialize(init, append) {
       return set(function (store) {
-        store.state = init;
+        if (append) {
+          forOwn(init, function (value, key) {
+            store.state[key] = value;
+          });
+        } else {
+          store.state = init;
+        }
       });
     },
-    clear: function clear() {
+    clear: function clear(_vars) {
       return set(function (store) {
-        store.state = {};
+        store.state = omit(store.state, _vars);
       });
     }
   };

package/es/lowcode/engine/provider/ContextProvider/useTodo.js

@@ -6,8 +6,7 @@ var _excluded = ["datasetCode"];
 import { useBoolean, useMemoizedFn } from 'ahooks';
 import { message } from 'luck-design/antd';
 import { keys, isNil, isFunction } from 'lodash';
-import { getModuleData } from "./usePageDataStore";
-import { executeCode } from "../../tools/helper";
+import { executeCode, getLDMetaAttr } from "../../tools/helper";
 import { fetchCallBehavior } from "../../../constants/api-url";
 var useTodo = function useTodo() {
   var _useBoolean = useBoolean(),
@@ -54,8 +53,7 @@ var useTodo = function useTodo() {
                 params = _ref4.params,
                 data = _ref4.data,
                 after = _ref4.after;
-              var moduleData = getModuleData();
-              var _moduleCode = moduleCode || moduleData.moduleCode;
+              var _moduleCode = moduleCode || getLDMetaAttr('moduleCode');
               var _dscode = datasetCode || dsCode;
               if (!_moduleCode || !_dscode) {
                 message.warning('接口重要参数（模块编码或数据集编码）丢失');

package/es/lowcode/engine/provider/EventBusProvider.js

@@ -58,7 +58,7 @@ export default (function (_ref) {
       var _ref4 = _slicedToArray(_ref3, 2),
         _id = _ref4[0],
         _subscriber = _ref4[1];
-      var temp = _subscriber._before ? _subscriber._before(payload) : null;
+      var temp = _subscriber._before ? _subscriber._before(payload, _id) : null;
       if (_subscriber._before && !isPromise(temp)) {
         console.error('before hook must return a promise');
         return;
@@ -68,10 +68,10 @@ export default (function (_ref) {
         if (!flag) return flag;
         var func = _subscriber._once || _subscriber._on;
         if (!func) return;
-        return func(payload);
+        return func(payload, _id);
       }).then(function (flag) {
         if (flag === false || !_subscriber._after) return;
-        return _subscriber._after(payload);
+        return _subscriber._after(payload, _id);
       }).finally(function () {
         if (_subscriber._once) {
           $unsubscriber(topic, _id);
@@ -85,6 +85,15 @@ export default (function (_ref) {
       runtime: runtime
     }, payload));
   });
+  var $publisherOnce = useMemoizedFn(function (topic, payload) {
+    return new Promise(function (resolve) {
+      event$.emit(_objectSpread({
+        topic: topic,
+        runtime: runtime
+      }, payload));
+      $subscriber(topic).once(resolve).watch();
+    });
+  });
   var $subscriber = useMemoizedFn(function (topic) {
     if (!subscriberPool.has(topic)) subscriberPool.set(topic, []);
     var id = suid();
@@ -104,7 +113,7 @@ export default (function (_ref) {
         if (!subscriberPool.get(topic).length) {
           subscriberPool.delete(topic);
         }
-        (_subscriber$_off = (_subscriber2 = _subscriber)._off) === null || _subscriber$_off === void 0 || _subscriber$_off.call(_subscriber2);
+        (_subscriber$_off = (_subscriber2 = _subscriber)._off) === null || _subscriber$_off === void 0 || _subscriber$_off.call(_subscriber2, _id);
         _subscriber = null;
       }
     });
@@ -113,6 +122,7 @@ export default (function (_ref) {
     value: {
       runtime: runtime,
       $publisher: $publisher,
+      $publisherOnce: $publisherOnce,
       $subscriber: $subscriber,
       $unsubscriber: $unsubscriber
     }

package/es/lowcode/engine/provider/PageProxyProvider.js

@@ -0,0 +1,95 @@
+import React, { createContext, useContext as useReactContext, useEffect } from 'react';
+import { useRequest, useCreation } from 'ahooks';
+import { Empty, Spin } from 'luck-design/antd';
+import { isNil, reduce } from 'lodash';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useContext } from "./ContextProvider";
+import usePageDataStore from "./ContextProvider/usePageDataStore";
+import { decompress } from "../tools/dataProcess";
+import { fetchPageData } from "../../constants/api-url";
+export var Context = /*#__PURE__*/createContext(null);
+export var usePageProxyContext = function usePageProxyContext() {
+  return useReactContext(Context);
+};
+export default (function (_ref) {
+  var children = _ref.children,
+    id = _ref.id,
+    proxyCode = _ref.proxyCode,
+    destroyOnUnmount = _ref.destroyOnUnmount,
+    proxyParams = _ref.proxyParams;
+  if (isNil(proxyCode)) return /*#__PURE__*/React.createElement(Empty, {
+    description: formatMessage({
+      id: 'luckda.lowcode.view.lc-component.design.nocode',
+      label: '缺少页面代理编码配置'
+    })
+  });
+  var ctx = useContext();
+  var _useRequest = useRequest(fetchPageData, {
+      defaultParams: [{
+        code: proxyCode
+      }],
+      ready: !usePageDataStore.getState()[proxyCode],
+      onFinally: function onFinally() {
+        ctx.$publisher(ctx.topics.PAGE_LOAD_MOUNT, {
+          proxyCode: proxyCode
+        });
+      },
+      onSuccess: function onSuccess(_ref2) {
+        var code = _ref2.code,
+          data = _ref2.data,
+          list = _ref2.list,
+          detail = _ref2.detail;
+        if (code === 1) {
+          usePageDataStore.setState(function (state) {
+            var source = detail[list[0]].source;
+            state[proxyCode] = decompress(source);
+          });
+        }
+      }
+    }),
+    loading = _useRequest.loading;
+  useEffect(function () {
+    if (usePageDataStore.getState()[proxyCode]) {
+      ctx.$publisher(ctx.topics.PAGE_LOAD_MOUNT, {
+        proxyCode: proxyCode
+      });
+    }
+    return function () {
+      if (destroyOnUnmount) {
+        usePageDataStore.setState(function (state) {
+          state[proxyCode] = null;
+        });
+      }
+    };
+  }, []);
+  var _proxyParams = useCreation(function () {
+    return reduce(proxyParams, function (ret, param) {
+      switch (param.origin) {
+        case 'state':
+          ret[param.name] = ctx.state[param.value];
+          return ret;
+        case 'golbal':
+          ret[param.name] = ctx.global[param.value];
+          return ret;
+        case 'url':
+          ret[param.name] = ctx.router.getQuery(param.value);
+          return ret;
+        case 'string':
+        case 'num':
+        case 'bool':
+        default:
+          ret[param.name] = param.value;
+          return ret;
+      }
+    }, {});
+  }, []);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: {
+      id: id,
+      proxyCode: proxyCode,
+      params: _proxyParams
+    }
+  }, /*#__PURE__*/React.createElement(Spin, {
+    spinning: loading
+  }, children));
+});