native-document 1.0.164 → 1.0.166

package/src/ui/components/modal/ModalRender.js

@@ -1,7 +1,7 @@
 import {Dialog, Div, Span} from '../../../core/elements';
 import Button from '../../../components/button/Button';
-import {ElementCreator} from "../../../core/wrappers/ElementCreator";
-import {createPortal} from "../../../core/elements/anchor/anchor";
+import {ElementCreator} from '../../../core/wrappers/ElementCreator';
+import {createPortal} from '../../../core/elements/anchor/anchor';
 
 import './modal.css';
 
@@ -69,13 +69,13 @@ export default function ModalRender($desc, instance) {
 const buildHeader = ($desc, instance) => {
     const content = [];
 
-    content.push(Div({class: 'modal-title'}, $desc.title))
+    content.push(Div({class: 'modal-title'}, $desc.title));
 
     if($desc.closable) {
         content.push(
             Button('×', {class: 'modal-close'})
                 .ghost()
-                .nd.onClick(() => instance.close())
+                .nd.onClick(() => instance.close()),
         );
     }
 

package/src/ui/components/pagination/PaginationRender.js

@@ -20,8 +20,8 @@ export default function PaginationRender($desc, instance) {
                 () => instance.first(),
                 $desc,
                 'renderFirst',
-                $isFirstPage
-            )
+                $isFirstPage,
+            ),
         );
     }
 
@@ -32,8 +32,8 @@ export default function PaginationRender($desc, instance) {
                 () => instance.previous(),
                 $desc,
                 'renderPrevious',
-                $isFirstPage
-            )
+                $isFirstPage,
+            ),
         );
     }
 
@@ -46,8 +46,8 @@ export default function PaginationRender($desc, instance) {
                 () => instance.next(),
                 $desc,
                 'renderNext',
-                $isLastPage
-            )
+                $isLastPage,
+            ),
         );
     }
 
@@ -58,8 +58,8 @@ export default function PaginationRender($desc, instance) {
                 () => instance.last(),
                 $desc,
                 'renderLast',
-                $isLastPage
-            )
+                $isLastPage,
+            ),
         );
     }
 
@@ -85,7 +85,7 @@ const buildPages = ($desc, instance) => {
                 return buildEllipsis($desc);
             }
             return buildPage(page, $desc, instance);
-        })
+        }),
     );
 };
 

package/src/ui/components/popover/PopoverRender.js

@@ -26,7 +26,7 @@ const PLACEMENT_MAP = {
 };
 
 const supportsPopover = () => {
-    return Object.hasOwn(HTMLElement.prototype, "popover");
+    return Object.hasOwn(HTMLElement.prototype, 'popover');
 };
 
 export default function PopoverRender($desc, instance, classPrefix = 'popover') {
@@ -41,7 +41,7 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
     const $x        = Observable(10).intercept(toUnit);
     const $y        = Observable(0).intercept(toUnit);
 
-    let popoverArrow = $desc.arrow ? Span({class: classPrefix+'-arrow'}) : null;
+    const popoverArrow = $desc.arrow ? Span({class: classPrefix+'-arrow'}) : null;
 
     editableProps.class.add(classPrefix);
     editableProps.class.add('is-'+$desc.variant);
@@ -51,7 +51,7 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
         popover: 'manual',
         role:    'dialog',
         id:      popoverId,
-        ...instance.resolveProps()
+        ...instance.resolveProps(),
     }, [
         buildContent($desc, instance, classPrefix),
         popoverArrow,
@@ -94,7 +94,7 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
                 middleware.push(size({
                     apply({rects, elements}) {
                         elements.floating.style.width = rects.reference.width + 'px';
-                    }
+                    },
                 }));
             }
 
@@ -211,21 +211,21 @@ const buildContent = ($desc, instance, classPrefix = 'popover') => {
     if($desc.renderHeader || $desc.header) {
         content.push(Div({class: classPrefix+'-header'}, $desc.renderHeader
             ? $desc.renderHeader($desc, instance)
-            : $desc.header
+            : $desc.header,
         ));
     }
 
     if($desc.renderContent || $desc.content) {
         content.push(Div({class: classPrefix+'-body'}, $desc.renderContent
             ? $desc.renderContent($desc, instance)
-            : $desc.content
+            : $desc.content,
         ));
     }
 
     if($desc.renderFooter || $desc.footer) {
         content.push(Div({class: classPrefix+'-footer'}, $desc.renderFooter
             ? $desc.renderFooter($desc, instance)
-            : $desc.footer
+            : $desc.footer,
         ));
     }
 

package/src/ui/components/progress/ProgressRender.js

@@ -93,35 +93,35 @@ const buildBar = ($desc, instance) => {
             Div({class: 'progress-header'}, [
                 $desc.label ? Span({class: 'progress-label'}, $desc.label) : null,
                 valueLabel  ? Span({class: 'progress-value'}, valueLabel)  : null,
-            ])
+            ]),
         );
     }
 
     content.push(
         Div({class: trackClass.join(' ')},
-            Div({class: fillClass.join(' '), style: fillStyle})
-        )
+            Div({class: fillClass.join(' '), style: fillStyle}),
+        ),
     );
 
     return Div(instance.resolveProps(), content);
-}
+};
 
 const CIRCLE_SIZES = {
     small: { size: 32, stroke: 2 },
     medium: { size: 64, stroke: 6 },
-    large: { size: 128, stroke: 10 }
+    large: { size: 128, stroke: 10 },
 };
 
 const getCircleSize = ($desc) => {
     if(typeof $desc.size === 'number') {
         return {
             size: $desc.size,
-            stroke: $desc.stroke || 3
+            stroke: $desc.stroke || 3,
         };
     }
 
     return CIRCLE_SIZES[$desc.size] || CIRCLE_SIZES.medium;
-}
+};
 
 const buildCircle = ($desc, instance) => {
     const circleSize = getCircleSize($desc);
@@ -141,7 +141,7 @@ const buildCircle = ($desc, instance) => {
             SvgCircle({
                 cx: size / 2, cy: size / 2, r: radius,
                 class: 'progress-circle-track',
-                'stroke-width': stroke
+                'stroke-width': stroke,
             }),
             SvgCircle({
                 cx: size / 2, cy: size / 2, r: radius,
@@ -150,12 +150,12 @@ const buildCircle = ($desc, instance) => {
                 'stroke-dasharray': circumference,
                 'stroke-dashoffset': offset,
                 'stroke-linecap': 'round',
-                transform: `rotate(-90 ${size / 2} ${size / 2})`
-            })
+                transform: `rotate(-90 ${size / 2} ${size / 2})`,
+            }),
         ]),
-        $desc.showValue ? Span({ class: 'progress-circle-label' }, getLabel($desc)) : null
+        $desc.showValue ? Span({ class: 'progress-circle-label' }, getLabel($desc)) : null,
     ]);
-}
+};
 
 const toUnit = (value) => {
     if(typeof value === 'number') {

package/src/ui/components/skeleton/SkeletonRender.js

@@ -1,6 +1,8 @@
 import {Div, Span} from '../../../core/elements';
 
 import './skeleton.css';
+import Skeleton from '../../../components/skeleton/Skeleton';
+import {HStack, VStack} from '../../../components/stacks';
 
 export default function SkeletonRender($desc, instance) {
     const props  = instance.getEditableProps();
@@ -77,4 +79,58 @@ const toUnit = (value) => {
         return value.transform(v => typeof v === 'number' ? v + 'px' : v);
     }
     return value;
+};
+
+
+/**
+ * @param {string} [type]
+ * @returns {*}
+ */
+Skeleton.card = function(type) {
+    return VStack([
+        Skeleton().type('image').height(200),
+        VStack([
+            Skeleton().text(1),
+            Skeleton().text(2),
+        ]).spacing('cozy'),
+    ], { class: 'skeleton-card '+type }).spacing('cozy');
+};
+
+/**
+ * @param {number} [items=3]
+ * @returns {*}
+ */
+Skeleton.list = function(items = 3) {
+    return VStack(
+        Array.from({length: items}, () =>
+            HStack([
+                Div({ class: 'skeleton-list-item-avatar' }, Skeleton().circle().size(40, 40)),
+                Div({ class: 'skeleton-list-item-text' }, Skeleton().text(2)),
+            ], { class: 'skeleton-list-item' }).spacing('comfortable').alignCenter(),
+        ),
+    ).spacing('comfortable');
+};
+
+/**
+ * @param {number} [rows=5]
+ * @param {number} [cols=4]
+ * @returns {*}
+ */
+Skeleton.table = function(rows = 5, cols = 4) {
+    const buildRow = () =>
+        HStack(
+            Array.from({length: cols}, () =>
+                Div({ class: 'skeleton-table-col' }, Skeleton().rect().height(16)),
+            ),
+            { class: 'skeleton-table-row' },
+        ).spacing('comfortable').alignCenter();
+
+    return VStack([
+        buildRow(),
+        ...Array.from({length: rows}, () => buildRow()),
+    ]).spacing('cozy');
+};
+
+Skeleton.paragraph = function(lines = 3) {
+    return Skeleton().text(lines);
 };

package/src/ui/components/splitter/SplitterGutterRender.js

@@ -12,7 +12,7 @@ export default function SplitterGutterRender($desc, instance) {
     // });
 
     const gutter = Div(instance.resolveProps(),
-        Div({class: 'splitter-gutter-handle'})
+        Div({class: 'splitter-gutter-handle'}),
     );
 
     setupDrag(gutter, $desc, instance);

package/src/ui/components/splitter/SplitterPanelRender.js

@@ -24,7 +24,7 @@ const setupVerticalLimit = (props, $desc) => {
     }
 
     props.style.add('height', $desc.size.transform(toUnit));
-}
+};
 const setupHorizontalLimit = (props, $desc) => {
     if($desc.minSize) {
         props.style.add('minWidth', toUnit($desc.minSize));
@@ -33,6 +33,6 @@ const setupHorizontalLimit = (props, $desc) => {
         props.style.add('maxWidth', toUnit($desc.maxSize));
     }
     props.style.add('width', $desc.size.transform(toUnit));
-}
+};
 
 const toUnit = (value) => typeof value === 'number' ? value + 'px' : value;

package/src/ui/components/stacks/PositionStackRender.js

@@ -1,4 +1,4 @@
-import {Div} from "../../../core/elements";
+import {Div} from '../../../core/elements';
 
 import './position-stack.css';
 

package/src/ui/components/stacks/StackRender.js

@@ -1,4 +1,4 @@
-import {Div} from "../../../core/elements";
+import {Div} from '../../../core/elements';
 
 import './stack.css';
 

package/src/ui/components/stacks/absolute-stack/AbsoluteStackRender.js

@@ -1,4 +1,4 @@
-import PositionStackRender from "../PositionStackRender";
+import PositionStackRender from '../PositionStackRender';
 
 const AbsoluteStackRender = PositionStackRender.bind(null, 'absolute-stack');
 

package/src/ui/components/stacks/fixed-stack/FixedStackRender.js

@@ -1,4 +1,4 @@
-import PositionStackRender from "../PositionStackRender";
+import PositionStackRender from '../PositionStackRender';
 
 const FixedStackRender = PositionStackRender.bind(null, 'fixed-stack');
 

package/src/ui/components/stacks/h-stack/HStackRender.js

@@ -1,4 +1,4 @@
-import StackRender from "../StackRender";
+import StackRender from '../StackRender';
 
 import './h-stack.css';
 

package/src/ui/components/stacks/index.js

@@ -1,5 +1,5 @@
-export { default as VStackRender } from "./v-stack/VStackRender";
-export { default as HStackRender } from "./h-stack/HStackRender";
-export { default as AbsoluteStackRender } from "./absolute-stack/AbsoluteStackRender";
-export { default as RelativeStackRender } from "./relative-stack/RelativeStackRender";
-export { default as FixedStackRender } from "./fixed-stack/FixedStackRender";
+export { default as VStackRender } from './v-stack/VStackRender';
+export { default as HStackRender } from './h-stack/HStackRender';
+export { default as AbsoluteStackRender } from './absolute-stack/AbsoluteStackRender';
+export { default as RelativeStackRender } from './relative-stack/RelativeStackRender';
+export { default as FixedStackRender } from './fixed-stack/FixedStackRender';

package/src/ui/components/stacks/relative-stack/RelativeStackRender.js

@@ -1,4 +1,4 @@
-import PositionStackRender from "../PositionStackRender";
+import PositionStackRender from '../PositionStackRender';
 
 import './relative-stack.css';
 

package/src/ui/components/stacks/v-stack/VStackRender.js

@@ -1,4 +1,4 @@
-import StackRender from "../StackRender";
+import StackRender from '../StackRender';
 
 import './v-stack.css';
 

package/src/ui/components/stepper/StepperRender.js

@@ -35,7 +35,7 @@ const buildNav = ($desc, instance) => {
             }
 
             return Div({class: 'stepper-step-wrapper'}, items);
-        })
+        }),
     );
 };
 
@@ -65,7 +65,7 @@ const buildContent = ($desc, instance) => {
                 class: isActive.transform(a => 'stepper-panel' + (a ? '' : ' is-hidden')),
             }, step.$description.content);
         };
-    })
+    });
 
     return Div({class: 'stepper-content'}, Match($desc.currentStep, contents));
 };

package/src/ui/components/stepper/StepperStepRender.js

@@ -1,5 +1,5 @@
 import {Div, Span} from '../../../core/elements';
-import { Observable } from "../../../core/data/Observable";
+import { Observable } from '../../../core/data/Observable';
 
 export default function StepperStepRender($desc, instance) {
     if($desc.render) {
@@ -13,13 +13,13 @@ export default function StepperStepRender($desc, instance) {
     props.class.add('stepper-step');
 
     const isActive = Observable.computed(() => {
-        return stepper.$description.currentStep.val() === index.val()
+        return stepper.$description.currentStep.val() === index.val();
     }, [stepper.$description.currentStep, index]) ;
 
     const indicatorClass = {
         'step-indicator' : true,
         '_': $desc.status.transform((status) => 'is-' + status),
-        'is-active': isActive
+        'is-active': isActive,
     };
 
     const stateIndicator = $desc.status.transform((status) => {
@@ -32,7 +32,7 @@ export default function StepperStepRender($desc, instance) {
         return '';
     });
 
-    let indicatorContent = $desc.icon || (stepper.$description.showNumbers ? index.transform((value) => value + 1) : null);
+    const indicatorContent = $desc.icon || (stepper.$description.showNumbers ? index.transform((value) => value + 1) : null);
 
     const labelClass = isActive.transform(a => 'step-label' + (a ? ' is-active' : ''));
 

package/src/ui/components/switch/SwitchRender.js

@@ -13,7 +13,7 @@ export default function SwitchRender($desc, instance) {
         '_':   $desc.variant.transform((value) => `is-${value}`),
         'is-outline':   $desc.outline,
         'is-checked':   $desc.value,
-        '___': $desc.value.transform(value => `is-state-${value ? 'on' : 'off'}`)
+        '___': $desc.value.transform(value => `is-state-${value ? 'on' : 'off'}`),
     });
 
     if($desc.labelPosition) {
@@ -63,8 +63,8 @@ const buildThumb = ($desc) => {
                 Match($desc.value, {
                     true:  $desc.onIcon,
                     false: $desc.offIcon,
-                })
-            )
+                }),
+            ),
         );
     }
 
@@ -78,6 +78,6 @@ const buildInnerLabel = ($desc) => {
         Match($desc.value, {
             true:  $desc.innerOnLabel  || '',
             false: $desc.innerOffLabel || '',
-        })
+        }),
     );
 };

package/src/ui/components/table/data-table/DataTableRender.js

@@ -1,17 +1,17 @@
 import {Div} from '../../../../../elements';
 import './data-table.css';
 
-import {buildColumnsBtn, buildExportBtn, buildFiltersBtn, buildSearch, buildToolbar} from "./toolbar";
-import {buildBulkActions, buildBulkButtons, buildBulkCount} from "./bulk-actions";
-import {buildTable} from "./tables";
-import {buildPageInfo, buildPageNav, buildPageSize, buildPagination} from "./pagination";
+import {buildColumnsBtn, buildExportBtn, buildFiltersBtn, buildSearch, buildToolbar} from './toolbar';
+import {buildBulkActions, buildBulkButtons, buildBulkCount} from './bulk-actions';
+import {buildTable} from './tables';
+import {buildPageInfo, buildPageNav, buildPageSize, buildPagination} from './pagination';
 
 export default function DataTableRender($desc, instance) {
     const props = instance.getEditableProps();
     props.class.add('data-table');
 
     const visibleColumns = $desc.columns.filter(col =>
-        col.$description.visible !== false
+        col.$description.visible !== false,
     );
 
 

package/src/ui/components/table/data-table/bulk-actions.js

@@ -1,7 +1,7 @@
-import {Div, Span, ShowIf} from "../../../../../elements";
-import {Button} from "../../../../components/button";
+import {Div, Span, ShowIf} from '../../../../../elements';
+import {Button} from '../../../../components/button';
 
-export const buildBulkActions = ({bulkCount, bulkButtons}, $desc, instance) => {
+export const buildBulkActions = ({bulkCount, bulkButtons}, $desc) => {
     if(!$desc.bulkActions?.length) return null;
 
     return ShowIf($desc.$selectedRows.is(items => items.length > 0), () => {
@@ -9,13 +9,13 @@ export const buildBulkActions = ({bulkCount, bulkButtons}, $desc, instance) => {
     });
 };
 
-export const buildBulkCount = ($desc, instance) => {
+export const buildBulkCount = ($desc) => {
     return Span({ class: 'data-table-bulk-count' },
-        $desc.$selectedRows.transform(rows => $desc.labels.selected(rows.length))
+        $desc.$selectedRows.transform(rows => $desc.labels.selected(rows.length)),
     );
 };
 
-export const buildBulkButtons = ($desc, instance) => {
+export const buildBulkButtons = ($desc) => {
     if(!$desc.bulkActions?.length) return null;
 
     return Div({class: 'data-table-bulk-buttons'},
@@ -29,6 +29,6 @@ export const buildBulkButtons = ($desc, instance) => {
             }
             btn.nd.onClick(() => action.onClick($desc.$selectedRows.val()));
             return btn;
-        })
+        }),
     );
 };

package/src/ui/components/table/data-table/pagination.js

@@ -1,7 +1,7 @@
-import {Div, Span} from "../../../../../elements";
-import { $ } from "../../../../core/data/Observable";
-import {SelectField} from "../../../../components/form";
-import {Pagination} from "../../../../components/pagination";
+import {Div, Span} from '../../../../../elements';
+import { $ } from '../../../../core/data/Observable';
+import {SelectField} from '../../../../components/form';
+import {Pagination} from '../../../../components/pagination';
 
 export const buildPagination = ({ pageInfo, pageSize, pageNav }) => {
     return Div({class: 'data-table-pagination'}, [
@@ -10,7 +10,7 @@ export const buildPagination = ({ pageInfo, pageSize, pageNav }) => {
     ]);
 };
 
-export const buildPageInfo = ($desc, instance) => {
+export const buildPageInfo = ($desc) => {
     const pageInfo = $.computed((total, data, pageSize, page) => {
         total = total || data?.length || 0;
         const pages = Math.ceil(total / pageSize);
@@ -51,6 +51,6 @@ export const buildPageNav = ($desc, instance) => {
             .showPreviousNext(true)
             .onPageChange((page) => {
                 instance.emit('page', page, $desc.$pageSize.val());
-            })
+            }),
     ]);
 };