@lowdefy/client 4.7.3 → 5.1.0

package/dist/Client.js

@@ -44,6 +44,7 @@ const Client = ({ auth, Components, config: rawConfig, jsMap, lowdefy, resetCont
         id: "lowdefy-display-message",
         key: `${config.pageConfig.id}-display-message`,
         Component: lowdefy._internal.blockComponents.Message,
+        components: lowdefy._internal.components,
         methods: {
             registerMethod: (_, method)=>{
                 lowdefy._internal.displayMessage = method;
@@ -59,10 +60,10 @@ const Client = ({ auth, Components, config: rawConfig, jsMap, lowdefy, resetCont
         if (!context._internal.onInitDone) return '';
         return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Head, {
             Component: Components.Head,
-            properties: context._internal.RootAreas.map[config.pageConfig.blockId].eval.properties
+            properties: context._internal.RootSlots.map[config.pageConfig.blockId].eval.properties
         }), /*#__PURE__*/ React.createElement(Block, {
-            block: context._internal.RootAreas.map[config.pageConfig.blockId],
-            Blocks: context._internal.RootAreas,
+            block: context._internal.RootSlots.map[config.pageConfig.blockId],
+            Blocks: context._internal.RootSlots,
             context: context,
             lowdefy: lowdefy,
             parentLoading: false

package/dist/Context.js

@@ -12,9 +12,20 @@
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-*/ import React from 'react';
+*/ import React, { useEffect } from 'react';
 import getContext from '@lowdefy/engine';
+import createShortcutManager from './createShortcutManager.js';
 import MountEvents from './MountEvents.js';
+const ShortcutEffect = ({ context })=>{
+    useEffect(()=>{
+        const manager = createShortcutManager();
+        manager.init(context);
+        return ()=>manager.destroy();
+    }, [
+        context
+    ]);
+    return null;
+};
 const Context = ({ children, config, jsMap, lowdefy, resetContext })=>{
     const context = getContext({
         config,
@@ -40,7 +51,9 @@ const Context = ({ children, config, jsMap, lowdefy, resetContext })=>{
         }
     }, (loadingOnInit)=>{
         if (loadingOnInit) return '';
-        return children(context);
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ShortcutEffect, {
+            context: context
+        }), children(context));
     });
 };
 export default Context;

package/dist/DisplayMessage.js

@@ -13,13 +13,12 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { makeCssClass } from '@lowdefy/block-utils';
-const DisplayMessage = ({ Component, id, methods })=>{
+const DisplayMessage = ({ Component, components, id, methods })=>{
     return /*#__PURE__*/ React.createElement(Component, {
         blockId: id,
+        components: components,
         key: id,
         methods: {
-            makeCssClass,
             registerMethod: methods.registerMethod,
             triggerEvent: ()=>undefined
         },

package/dist/ProgressBarController.js

@@ -13,7 +13,6 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useReducer, useEffect } from 'react';
-import { makeCssClass } from '@lowdefy/block-utils';
 const initialState = {
     progress: 0,
     onMounts: 0
@@ -72,9 +71,7 @@ const ProgressBarController = ({ id, lowdefy, resetContext })=>{
         blockId: id,
         components: lowdefy._internal.components,
         menus: lowdefy.menus,
-        methods: {
-            makeCssClass
-        },
+        methods: {},
         pageId: lowdefy.pageId,
         properties: state
     });

package/dist/block/CategorySwitch.js

@@ -14,12 +14,12 @@
   limitations under the License.
 */ import React from 'react';
 import { BlockLayout } from '@lowdefy/layout';
-import { makeCssClass } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
 import InputContainer from './InputContainer.js';
 import Container from './Container.js';
 import List from './List.js';
 import LoadingBlock from './LoadingBlock.js';
+import resolveClassNames from './resolveClassNames.js';
 const CategorySwitch = ({ block, Blocks, context, loading, lowdefy })=>{
     if (!block.eval) return null; // TODO: check Renderer updates before eval is executed for the first time on lists. See #520
     if (block.eval.visible === false) return /*#__PURE__*/ React.createElement("div", {
@@ -29,17 +29,20 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy })=>{
         }
     });
     const Component = lowdefy._internal.blockComponents[block.type];
+    const classNames = resolveClassNames(block.eval.class);
     if (loading && type.isObject(block.eval.skeleton)) {
         return /*#__PURE__*/ React.createElement(LoadingBlock, {
             blockLayout: block.eval.layout,
             blockProperties: block.eval.properties,
-            blockStyle: block.eval.style,
+            blockStyle: block.eval.style?.block,
+            blockClass: classNames,
             context: context,
             lowdefy: lowdefy,
             skeleton: block.eval.skeleton
         });
     }
-    switch(Component.meta.category){
+    const category = lowdefy._internal.blockMetas[block.type]?.category;
+    switch(category){
         case 'list':
             return /*#__PURE__*/ React.createElement(List, {
                 block: block,
@@ -61,12 +64,11 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy })=>{
         case 'input':
             return /*#__PURE__*/ React.createElement(BlockLayout, {
                 id: `bl-${block.blockId}`,
-                blockStyle: block.eval.style,
-                layout: block.eval.layout,
-                makeCssClass: makeCssClass
+                style: block.eval.style?.block,
+                className: classNames.block,
+                layout: block.eval.layout
             }, /*#__PURE__*/ React.createElement(Component, {
                 methods: Object.assign(block.methods, {
-                    makeCssClass,
                     registerEvent: block.registerEvent,
                     registerMethod: block.registerMethod,
                     setValue: block.setValue,
@@ -74,14 +76,16 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy })=>{
                 }),
                 basePath: lowdefy.basePath,
                 blockId: block.blockId,
+                classNames: classNames,
                 components: lowdefy._internal.components,
-                events: block.eval.events,
+                events: block.eval.events ?? {},
                 key: block.blockId,
                 loading: loading,
                 menus: lowdefy.menus,
                 pageId: lowdefy.pageId,
                 properties: block.eval.properties,
                 required: block.eval.required,
+                styles: block.eval.style ?? {},
                 validation: block.eval.validation,
                 value: block.value
             }));
@@ -97,26 +101,27 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy })=>{
         default:
             return /*#__PURE__*/ React.createElement(BlockLayout, {
                 id: `bl-${block.blockId}`,
-                blockStyle: block.eval.style,
-                layout: block.eval.layout,
-                makeCssClass: makeCssClass
+                style: block.eval.style?.block,
+                className: classNames.block,
+                layout: block.eval.layout
             }, /*#__PURE__*/ React.createElement(Component, {
                 methods: Object.assign(block.methods, {
-                    makeCssClass,
                     registerEvent: block.registerEvent,
                     registerMethod: block.registerMethod,
                     triggerEvent: block.triggerEvent
                 }),
                 basePath: lowdefy.basePath,
                 blockId: block.blockId,
+                classNames: classNames,
                 components: lowdefy._internal.components,
-                events: block.eval.events,
+                events: block.eval.events ?? {},
                 key: block.blockId,
                 loading: loading,
                 menus: lowdefy.menus,
                 pageId: lowdefy.pageId,
                 properties: block.eval.properties,
                 required: block.eval.required,
+                styles: block.eval.style ?? {},
                 validation: block.eval.validation
             }));
     }

package/dist/block/Container.js

@@ -14,27 +14,29 @@
   limitations under the License.
 */ import React from 'react';
 import { Area, BlockLayout } from '@lowdefy/layout';
-import { makeCssClass } from '@lowdefy/block-utils';
+import { cn } from '@lowdefy/block-utils';
 import Block from './Block.js';
+import resolveClassNames from './resolveClassNames.js';
 const Container = ({ block, Blocks, Component, context, loading, lowdefy })=>{
+    const classNames = resolveClassNames(block.eval.class);
     const content = {};
     // eslint-disable-next-line prefer-destructuring
-    const areas = Blocks.subAreas[block.id][0].areas;
-    Object.keys(areas).forEach((areaKey, i)=>{
-        content[areaKey] = (areaStyle)=>/*#__PURE__*/ React.createElement(Area, {
-                area: block.eval.areas[areaKey],
-                areaKey: areaKey,
-                areaStyle: [
-                    areaStyle,
-                    block.eval.areas[areaKey]?.style
-                ],
-                id: `ar-${block.blockId}-${areaKey}`,
-                key: `ar-${block.blockId}-${areaKey}-${i}`,
-                layout: block.eval.layout,
-                makeCssClass: makeCssClass
-            }, areas[areaKey].blocks.map((bl, k)=>/*#__PURE__*/ React.createElement(Block, {
+    const slots = Blocks.subSlots[block.id][0].slots;
+    Object.keys(slots).forEach((slotKey, i)=>{
+        content[slotKey] = (contentStyle)=>/*#__PURE__*/ React.createElement(Area, {
+                area: block.eval.slots[slotKey],
+                areaKey: slotKey,
+                style: {
+                    ...block.eval.slots[slotKey]?.style,
+                    ...contentStyle
+                },
+                className: cn(block.eval.class?.[slotKey]),
+                id: `ar-${block.blockId}-${slotKey}`,
+                key: `ar-${block.blockId}-${slotKey}-${i}`,
+                layout: block.eval.layout
+            }, slots[slotKey].blocks.map((bl, k)=>/*#__PURE__*/ React.createElement(Block, {
                     block: bl,
-                    Blocks: Blocks.subAreas[block.id][0],
+                    Blocks: Blocks.subSlots[block.id][0],
                     context: context,
                     key: `co-${bl.blockId}-${k}`,
                     lowdefy: lowdefy,
@@ -42,28 +44,29 @@ const Container = ({ block, Blocks, Component, context, loading, lowdefy })=>{
                 })));
     });
     return /*#__PURE__*/ React.createElement(BlockLayout, {
-        blockStyle: block.eval.style,
+        style: block.eval.style?.block,
+        className: classNames.block,
         id: `bl-${block.blockId}`,
-        layout: block.eval.layout,
-        makeCssClass: makeCssClass
+        layout: block.eval.layout
     }, /*#__PURE__*/ React.createElement(Component, {
         methods: Object.assign(block.methods, {
-            makeCssClass,
             registerEvent: block.registerEvent,
             registerMethod: block.registerMethod,
             triggerEvent: block.triggerEvent
         }),
         basePath: lowdefy.basePath,
         blockId: block.blockId,
+        classNames: classNames,
         components: lowdefy._internal.components,
         content: content,
-        events: block.eval.events,
+        events: block.eval.events ?? {},
         key: block.blockId,
         loading: loading,
         menus: lowdefy.menus,
         pageId: lowdefy.pageId,
         properties: block.eval.properties,
         required: block.eval.required,
+        styles: block.eval.style ?? {},
         validation: block.eval.validation
     }));
 };

package/dist/block/InputContainer.js

@@ -14,27 +14,29 @@
   limitations under the License.
 */ import React from 'react';
 import { Area, BlockLayout } from '@lowdefy/layout';
-import { makeCssClass } from '@lowdefy/block-utils';
+import { cn } from '@lowdefy/block-utils';
 import Block from './Block.js';
+import resolveClassNames from './resolveClassNames.js';
 const InputContainer = ({ block, Blocks, Component, context, loading, lowdefy })=>{
+    const classNames = resolveClassNames(block.eval.class);
     const content = {};
     // eslint-disable-next-line prefer-destructuring
-    const areas = Blocks.subAreas[block.id][0].areas;
-    Object.keys(areas).forEach((areaKey, i)=>{
-        content[areaKey] = (areaStyle)=>/*#__PURE__*/ React.createElement(Area, {
-                area: block.eval.areas[areaKey],
-                areaKey: areaKey,
-                areaStyle: [
-                    areaStyle,
-                    block.eval.areas[areaKey]?.style
-                ],
-                id: `ar-${block.blockId}-${areaKey}`,
-                key: `ar-${block.blockId}-${areaKey}-${i}`,
-                layout: block.eval.layout,
-                makeCssClass: makeCssClass
-            }, areas[areaKey].blocks.map((bl, k)=>/*#__PURE__*/ React.createElement(Block, {
+    const slots = Blocks.subSlots[block.id][0].slots;
+    Object.keys(slots).forEach((slotKey, i)=>{
+        content[slotKey] = (contentStyle)=>/*#__PURE__*/ React.createElement(Area, {
+                area: block.eval.slots[slotKey],
+                areaKey: slotKey,
+                style: {
+                    ...block.eval.slots[slotKey]?.style,
+                    ...contentStyle
+                },
+                className: cn(block.eval.class?.[slotKey]),
+                id: `ar-${block.blockId}-${slotKey}`,
+                key: `ar-${block.blockId}-${slotKey}-${i}`,
+                layout: block.eval.layout
+            }, slots[slotKey].blocks.map((bl, k)=>/*#__PURE__*/ React.createElement(Block, {
                     block: bl,
-                    Blocks: Blocks.subAreas[block.id][0],
+                    Blocks: Blocks.subSlots[block.id][0],
                     context: context,
                     key: `co-${bl.blockId}-${k}`,
                     lowdefy: lowdefy,
@@ -42,13 +44,12 @@ const InputContainer = ({ block, Blocks, Component, context, loading, lowdefy })
                 })));
     });
     return /*#__PURE__*/ React.createElement(BlockLayout, {
-        blockStyle: block.eval.style,
+        style: block.eval.style?.block,
+        className: classNames.block,
         id: `bl-${block.blockId}`,
-        layout: block.eval.layout,
-        makeCssClass: makeCssClass
+        layout: block.eval.layout
     }, /*#__PURE__*/ React.createElement(Component, {
         methods: Object.assign(block.methods, {
-            makeCssClass,
             registerEvent: block.registerEvent,
             registerMethod: block.registerMethod,
             triggerEvent: block.triggerEvent,
@@ -61,15 +62,17 @@ const InputContainer = ({ block, Blocks, Component, context, loading, lowdefy })
         }),
         basePath: lowdefy.basePath,
         blockId: block.blockId,
+        classNames: classNames,
         components: lowdefy._internal.components,
         content: content,
-        events: block.eval.events,
+        events: block.eval.events ?? {},
         key: block.blockId,
         loading: loading,
         menus: lowdefy.menus,
         pageId: lowdefy.pageId,
         properties: block.eval.properties,
         required: block.eval.required,
+        styles: block.eval.style ?? {},
         validation: block.eval.validation,
         value: block.value
     }));

package/dist/block/List.js

@@ -14,25 +14,27 @@
   limitations under the License.
 */ import React from 'react';
 import { Area, BlockLayout } from '@lowdefy/layout';
-import { makeCssClass } from '@lowdefy/block-utils';
+import { cn } from '@lowdefy/block-utils';
 import Block from './Block.js';
+import resolveClassNames from './resolveClassNames.js';
 const List = ({ block, Blocks, Component, context, loading, lowdefy })=>{
+    const classNames = resolveClassNames(block.eval.class);
     const content = {};
     const contentList = [];
-    Blocks.subAreas[block.id].forEach((SBlock)=>{
-        Object.keys(SBlock.areas).forEach((areaKey)=>{
-            content[areaKey] = (areaStyle)=>/*#__PURE__*/ React.createElement(Area, {
-                    area: block.eval.areas[areaKey],
-                    areaKey: areaKey,
-                    areaStyle: [
-                        areaStyle,
-                        block.eval.areas[areaKey]?.style
-                    ],
-                    id: `ar-${block.blockId}-${SBlock.id}-${areaKey}`,
-                    key: `ar-${block.blockId}-${SBlock.id}-${areaKey}`,
-                    layout: block.eval.layout,
-                    makeCssClass: makeCssClass
-                }, SBlock.areas[areaKey].blocks.map((bl)=>/*#__PURE__*/ React.createElement(Block, {
+    Blocks.subSlots[block.id].forEach((SBlock)=>{
+        Object.keys(SBlock.slots).forEach((slotKey)=>{
+            content[slotKey] = (contentStyle)=>/*#__PURE__*/ React.createElement(Area, {
+                    area: block.eval.slots[slotKey],
+                    areaKey: slotKey,
+                    style: {
+                        ...block.eval.slots[slotKey]?.style,
+                        ...contentStyle
+                    },
+                    className: cn(block.eval.class?.[slotKey]),
+                    id: `ar-${block.blockId}-${SBlock.id}-${slotKey}`,
+                    key: `ar-${block.blockId}-${SBlock.id}-${slotKey}`,
+                    layout: block.eval.layout
+                }, SBlock.slots[slotKey].blocks.map((bl)=>/*#__PURE__*/ React.createElement(Block, {
                         block: bl,
                         Blocks: SBlock,
                         context: context,
@@ -46,13 +48,12 @@ const List = ({ block, Blocks, Component, context, loading, lowdefy })=>{
         });
     });
     return /*#__PURE__*/ React.createElement(BlockLayout, {
-        blockStyle: block.eval.style,
+        style: block.eval.style?.block,
+        className: classNames.block,
         id: `bl-${block.blockId}`,
-        layout: block.eval.layout,
-        makeCssClass: makeCssClass
+        layout: block.eval.layout
     }, /*#__PURE__*/ React.createElement(Component, {
         methods: Object.assign(block.methods, {
-            makeCssClass,
             moveItemDown: block.moveItemDown,
             moveItemUp: block.moveItemUp,
             pushItem: block.pushItem,
@@ -64,8 +65,9 @@ const List = ({ block, Blocks, Component, context, loading, lowdefy })=>{
         }),
         basePath: lowdefy.basePath,
         blockId: block.blockId,
+        classNames: classNames,
         components: lowdefy._internal.components,
-        events: block.eval.events,
+        events: block.eval.events ?? {},
         key: block.blockId,
         list: contentList,
         loading: loading,
@@ -73,6 +75,7 @@ const List = ({ block, Blocks, Component, context, loading, lowdefy })=>{
         pageId: lowdefy.pageId,
         properties: block.eval.properties,
         required: block.eval.required,
+        styles: block.eval.style ?? {},
         validation: block.eval.validation
     }));
 };

package/dist/block/LoadingBlock.js

@@ -14,11 +14,9 @@
   limitations under the License.
 */ import React, { useEffect } from 'react';
 import { BlockLayout } from '@lowdefy/layout';
-import { makeCssClass } from '@lowdefy/block-utils';
 import LoadingContainer from './LoadingContainer.js';
 import LoadingList from './LoadingList.js';
 const blockMethods = {
-    makeCssClass,
     moveItemDown: ()=>{},
     moveItemUp: ()=>{},
     pushItem: ()=>{},
@@ -29,7 +27,7 @@ const blockMethods = {
     triggerEvent: ()=>{},
     unshiftItem: ()=>{}
 };
-const LoadingBlock = ({ blockId, blockLayout, blockProperties, blockStyle, context, lowdefy, skeleton })=>{
+const LoadingBlock = ({ blockClass, blockId, blockLayout, blockProperties, blockStyle, context, lowdefy, skeleton })=>{
     let Component = lowdefy._internal.blockComponents[skeleton.type];
     useEffect(()=>{
         if (!lowdefy._internal.blockComponents[skeleton.type]) {
@@ -41,7 +39,9 @@ const LoadingBlock = ({ blockId, blockLayout, blockProperties, blockStyle, conte
         // default to box when a skeleton block is not found - should be a basic or loader block.
         Component = lowdefy._internal.blockComponents.Box;
     }
-    switch(Component.meta.category){
+    const resolvedType = Component === lowdefy._internal.blockComponents.Box ? 'Box' : skeleton.type;
+    const category = lowdefy._internal.blockMetas[resolvedType]?.category;
+    switch(category){
         case 'list':
             return /*#__PURE__*/ React.createElement(LoadingList, {
                 blockId: blockId,
@@ -52,6 +52,7 @@ const LoadingBlock = ({ blockId, blockLayout, blockProperties, blockStyle, conte
             });
         case 'container':
             return /*#__PURE__*/ React.createElement(LoadingContainer, {
+                blockClass: blockClass,
                 blockId: blockId,
                 blockLayout: blockLayout,
                 blockProperties: blockProperties,
@@ -63,10 +64,10 @@ const LoadingBlock = ({ blockId, blockLayout, blockProperties, blockStyle, conte
             });
         default:
             return /*#__PURE__*/ React.createElement(BlockLayout, {
-                blockStyle: skeleton.style ?? blockStyle,
+                style: skeleton.style ?? blockStyle,
                 id: `s-bl-${blockId}-${skeleton.id}`,
                 layout: skeleton.layout ?? blockLayout,
-                makeCssClass: makeCssClass
+                className: skeleton.class ?? blockClass
             }, /*#__PURE__*/ React.createElement(Component, {
                 basePath: lowdefy.basePath,
                 blockId: blockId,

package/dist/block/LoadingContainer.js

@@ -14,24 +14,19 @@
   limitations under the License.
 */ import React from 'react';
 import { Area, BlockLayout } from '@lowdefy/layout';
-import { makeCssClass } from '@lowdefy/block-utils';
 import LoadingBlock from './LoadingBlock.js';
-const LoadingContainer = ({ blockId, blockLayout, blockProperties, blockStyle, Component, context, lowdefy, skeleton })=>{
+const LoadingContainer = ({ blockClass, blockId, blockLayout, blockProperties, blockStyle, Component, context, lowdefy, skeleton })=>{
     const content = {};
     // eslint-disable-next-line prefer-destructuring
-    Object.keys(skeleton.areas).forEach((areaKey, i)=>{
-        content[areaKey] = (areaStyle)=>/*#__PURE__*/ React.createElement(Area, {
-                area: skeleton.areas[areaKey],
-                areaKey: areaKey,
-                areaStyle: [
-                    areaStyle,
-                    skeleton.areas[areaKey]?.style
-                ],
-                id: `s-ar-${blockId}-${skeleton.id}-${areaKey}`,
-                key: `s-ar-${blockId}-${skeleton.id}-${areaKey}-${i}`,
-                layout: skeleton.layout ?? blockLayout,
-                makeCssClass: makeCssClass
-            }, skeleton.areas[areaKey].blocks.map((skl, k)=>/*#__PURE__*/ React.createElement(LoadingBlock, {
+    Object.keys(skeleton.slots).forEach((slotKey, i)=>{
+        content[slotKey] = ()=>/*#__PURE__*/ React.createElement(Area, {
+                area: skeleton.slots[slotKey],
+                areaKey: slotKey,
+                style: skeleton.slots[slotKey]?.style,
+                id: `s-ar-${blockId}-${skeleton.id}-${slotKey}`,
+                key: `s-ar-${blockId}-${skeleton.id}-${slotKey}-${i}`,
+                layout: skeleton.layout ?? blockLayout
+            }, skeleton.slots[slotKey].blocks.map((skl, k)=>/*#__PURE__*/ React.createElement(LoadingBlock, {
                     blockId: blockId,
                     context: context,
                     key: `s-co-${skl.id}-${k}`,
@@ -40,10 +35,10 @@ const LoadingContainer = ({ blockId, blockLayout, blockProperties, blockStyle, C
                 })));
     });
     return /*#__PURE__*/ React.createElement(BlockLayout, {
-        blockStyle: skeleton.style ?? blockStyle,
+        style: skeleton.style ?? blockStyle,
         id: `s-bl-${blockId}-${skeleton.id}`,
         layout: skeleton.layout ?? blockLayout,
-        makeCssClass: makeCssClass
+        className: skeleton.class ?? blockClass
     }, /*#__PURE__*/ React.createElement(Component, {
         basePath: lowdefy.basePath,
         blockId: blockId,
@@ -51,9 +46,7 @@ const LoadingContainer = ({ blockId, blockLayout, blockProperties, blockStyle, C
         content: content,
         key: skeleton.id,
         menus: lowdefy.menus,
-        methods: {
-            makeCssClass
-        },
+        methods: {},
         pageId: lowdefy.pageId,
         properties: skeleton.properties ?? blockProperties
     }));

package/dist/block/LoadingList.js

@@ -14,25 +14,20 @@
   limitations under the License.
 */ import React from 'react';
 import { Area, BlockLayout } from '@lowdefy/layout';
-import { makeCssClass } from '@lowdefy/block-utils';
 import LoadingBlock from './LoadingBlock.js';
-const LoadingList = ({ blockId, blockLayout, blockProperties, blockStyle, Component, context, lowdefy, skeleton })=>{
+const LoadingList = ({ blockClass, blockId, blockLayout, blockProperties, blockStyle, Component, context, lowdefy, skeleton })=>{
     const content = {};
     const contentList = [];
     new Array(3).forEach(()=>{
-        Object.keys(skeleton.areas).forEach((areaKey, i)=>{
-            content[areaKey] = (areaStyle)=>/*#__PURE__*/ React.createElement(Area, {
-                    area: skeleton.areas[areaKey],
-                    areaKey: areaKey,
-                    areaStyle: [
-                        areaStyle,
-                        skeleton.areas[areaKey]?.style
-                    ],
-                    id: `s-ar-${blockId}-${skeleton.id}-${areaKey}`,
-                    key: `s-ar-${blockId}-${skeleton.id}-${areaKey}-${i}`,
-                    layout: skeleton.layout ?? blockLayout,
-                    makeCssClass: makeCssClass
-                }, skeleton.areas[areaKey].blocks.map((skl, k)=>/*#__PURE__*/ React.createElement(LoadingBlock, {
+        Object.keys(skeleton.slots).forEach((slotKey, i)=>{
+            content[slotKey] = ()=>/*#__PURE__*/ React.createElement(Area, {
+                    area: skeleton.slots[slotKey],
+                    areaKey: slotKey,
+                    style: skeleton.slots[slotKey]?.style,
+                    id: `s-ar-${blockId}-${skeleton.id}-${slotKey}`,
+                    key: `s-ar-${blockId}-${skeleton.id}-${slotKey}-${i}`,
+                    layout: skeleton.layout ?? blockLayout
+                }, skeleton.slots[slotKey].blocks.map((skl, k)=>/*#__PURE__*/ React.createElement(LoadingBlock, {
                         blockId: blockId,
                         context: context,
                         key: `s-co-${skl.id}-${k}`,
@@ -45,19 +40,17 @@ const LoadingList = ({ blockId, blockLayout, blockProperties, blockStyle, Compon
         });
     });
     return /*#__PURE__*/ React.createElement(BlockLayout, {
-        blockStyle: skeleton.style ?? blockStyle,
+        style: skeleton.style ?? blockStyle,
         id: `s-bl-${blockId}-${skeleton.id}`,
         layout: skeleton.layout ?? blockLayout,
-        makeCssClass: makeCssClass
+        className: skeleton.class ?? blockClass
     }, /*#__PURE__*/ React.createElement(Component, {
         basePath: lowdefy.basePath,
         blockId: blockId,
         components: lowdefy._internal.components,
         list: contentList,
         menus: lowdefy.menus,
-        methods: {
-            makeCssClass
-        },
+        methods: {},
         pageId: lowdefy.pageId,
         properties: skeleton.properties ?? blockProperties
     }));

package/dist/{style.less → block/resolveClassNames.js}

@@ -12,18 +12,13 @@
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-*/
-
-.icon-spin {
-  animation: spin 1s infinite linear;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
+*/ import { cn } from '@lowdefy/block-utils';
+function resolveClassNames(evalClass) {
+    if (!evalClass) return {};
+    const resolved = {};
+    for (const [key, value] of Object.entries(evalClass)){
+        resolved[key] = cn(value);
+    }
+    return resolved;
 }
+export default resolveClassNames;