jsbox-cview 1.6.4 → 1.6.6

package/dist/components/rotating-view.js

@@ -25,7 +25,12 @@ class RotatingView extends base_1.Base {
      */
     constructor({ props, layout, events = {}, }) {
         super();
-        this._props = Object.assign({ contentMode: 1, rps: 0.5, clockwise: true }, props);
+        this._props = {
+            contentMode: 1,
+            rps: 0.5,
+            clockwise: true,
+            ...props,
+        };
         this._rotatingFlag = false;
         if (this._props.cview) {
             this._innerView = this._props.cview;
@@ -45,7 +50,10 @@ class RotatingView extends base_1.Base {
         this._defineView = () => {
             return {
                 type: "view",
-                props: Object.assign(Object.assign({}, this._props), { id: this.id }),
+                props: {
+                    ...this._props,
+                    id: this.id,
+                },
                 layout,
                 events: {
                     ready: (sender) => {

package/dist/components/searchbar.js

@@ -39,7 +39,14 @@ class SearchBar extends base_1.Base {
      */
     constructor({ props, layout, events = {}, }) {
         super();
-        this._props = Object.assign({ placeholder: (0, l10n_1.l10n)("SEARCH"), cancelText: (0, l10n_1.l10n)("CANCEL"), tintColor: $color("systemLink"), bgcolor: colors_1.searchBarBgcolor, style: 0 }, props);
+        this._props = {
+            placeholder: (0, l10n_1.l10n)("SEARCH"),
+            cancelText: (0, l10n_1.l10n)("CANCEL"),
+            tintColor: $color("systemLink"),
+            bgcolor: colors_1.searchBarBgcolor,
+            style: 0,
+            ...props,
+        };
         const cancelButtonWidth = (0, uitools_1.getTextWidth)(this._props.cancelText, {
             inset: 20,
         });

package/dist/components/single-views.js

@@ -16,7 +16,10 @@ class SingleView extends base_1.Base {
         this._defineView = () => {
             return {
                 type: this._type,
-                props: Object.assign(Object.assign({}, this._props), { id: this.id }),
+                props: {
+                    ...this._props,
+                    id: this.id,
+                },
                 layout: this._layout,
                 events: this._events,
                 views: this._views,
@@ -29,7 +32,7 @@ class ClearView extends SingleView {
     constructor({ props, layout = $layout.fill, events, views, }) {
         super({
             type: "view",
-            props: Object.assign({}, props),
+            props: { ...props },
             layout,
             events,
             views,
@@ -41,7 +44,7 @@ class ContentView extends SingleView {
     constructor({ props, layout = $layout.fillSafeArea, events = {}, views, }) {
         super({
             type: "view",
-            props: Object.assign({ bgcolor: $color("primarySurface") }, props),
+            props: { bgcolor: $color("primarySurface"), ...props },
             layout,
             events,
             views,
@@ -59,7 +62,11 @@ class MaskView extends SingleView {
     constructor({ props, layout = $layout.fill, events, views, }) {
         super({
             type: "view",
-            props: Object.assign(Object.assign({ bgcolor: $rgba(0, 0, 0, 0.2) }, props), { userInteractionEnabled: true }),
+            props: {
+                bgcolor: $rgba(0, 0, 0, 0.2),
+                ...props,
+                userInteractionEnabled: true,
+            },
             layout,
             events,
             views,

package/dist/components/spinners/loading-dual-ring.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DualRing = void 0;
 const base_1 = require("../base");
@@ -72,15 +63,15 @@ class DualRing extends base_1.Base {
                 views: [canvas1.definition, canvas2.definition],
                 layout,
                 events: {
-                    ready: (sender) => __awaiter(this, void 0, void 0, function* () {
+                    ready: async (sender) => {
                         while (sender.super) {
                             canvas1.startAngle += Math.PI * interval * 2;
                             canvas1.redraw();
                             canvas2.startAngle += Math.PI * interval * 2;
                             canvas2.redraw();
-                            yield $wait(interval);
+                            await $wait(interval);
                         }
-                    }),
+                    },
                 },
             };
         };

package/dist/components/spinners/loading-wedges.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wedges = void 0;
 const base_1 = require("../base");
@@ -77,7 +68,7 @@ class Wedges extends base_1.Base {
                 views: [canvas1.definition, canvas2.definition, canvas3.definition, canvas4.definition],
                 layout,
                 events: {
-                    ready: (sender) => __awaiter(this, void 0, void 0, function* () {
+                    ready: async (sender) => {
                         while (sender.super) {
                             canvas1.startAngle += Math.PI * interval * 4;
                             canvas1.redraw();
@@ -87,9 +78,9 @@ class Wedges extends base_1.Base {
                             canvas3.redraw();
                             canvas4.startAngle += Math.PI * interval * 1;
                             canvas4.redraw();
-                            yield $wait(interval);
+                            await $wait(interval);
                         }
-                    }),
+                    },
                 },
             };
         };

package/dist/components/spinners/spinner-androidstyle.js

@@ -18,7 +18,13 @@ class AndroidStyleSpinner extends base_1.Base {
      */
     constructor({ props, layout, }) {
         super();
-        this._props = Object.assign({ weight: 2, diameter: 24, color: $color("gray"), bgcolor: $color("clear") }, props);
+        this._props = {
+            weight: 2,
+            diameter: 24,
+            color: $color("gray"),
+            bgcolor: $color("clear"),
+            ...props,
+        };
         this._defineView = () => {
             const weight = this._props.weight;
             const color = this._props.color;

package/dist/components/static-preference-listview.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreferenceListView = exports.dateToString = exports.excludedTypes = exports.selectableTypes = void 0;
+exports.PreferenceListView = exports.excludedTypes = exports.selectableTypes = void 0;
+exports.dateToString = dateToString;
 const base_1 = require("./base");
 const uitools_1 = require("../utils/uitools");
 exports.selectableTypes = [
@@ -78,7 +79,6 @@ class BaseStringCell extends Cell {
         this._textColor = textColor;
     }
     _defineValueView() {
-        var _a;
         return {
             type: "view",
             props: {},
@@ -105,7 +105,7 @@ class BaseStringCell extends Cell {
                     type: "label",
                     props: {
                         id: "label",
-                        text: (_a = this._handleText(this._value)) === null || _a === void 0 ? void 0 : _a.toString(),
+                        text: this._handleText(this._value)?.toString(),
                         align: $align.right,
                         font: $font(17),
                         textColor: this._textColor,
@@ -483,7 +483,6 @@ function dateToString(mode, date) {
         return `${year}-${month}-${day} ${hours}:${minutes}`;
     }
 }
-exports.dateToString = dateToString;
 class DateCell extends Cell {
     constructor(props, values) {
         super(props, values);
@@ -642,13 +641,12 @@ class LinkCell extends Cell {
 }
 class SymbolActionCell extends Cell {
     constructor(props, values) {
-        var _a, _b, _c;
         super(props, values);
         this._type = "symbol-action";
         this._symbol = props.symbol || "";
-        this._tintColor = (_a = props.tintColor) !== null && _a !== void 0 ? _a : $color("primaryText");
-        this._contentMode = (_b = props.contentMode) !== null && _b !== void 0 ? _b : 1;
-        this._symbolSize = (_c = props.symbolSize) !== null && _c !== void 0 ? _c : $size(24, 24);
+        this._tintColor = props.tintColor ?? $color("primaryText");
+        this._contentMode = props.contentMode ?? 1;
+        this._symbolSize = props.symbolSize ?? $size(24, 24);
     }
     _defineValueView() {
         return {
@@ -845,10 +843,15 @@ class PreferenceListView extends base_1.Base {
         this._defineView = () => {
             return {
                 type: "list",
-                props: Object.assign(Object.assign({ style: 2 }, this._props), { id: this.id, data: this._cells.map((section) => ({
+                props: {
+                    style: 2,
+                    ...this._props,
+                    id: this.id,
+                    data: this._cells.map((section) => ({
                         title: section.title,
                         rows: section.rows.map((cell) => cell.definition),
-                    })) }),
+                    })),
+                },
                 layout: this._layout,
                 events: {
                     didSelect: (sender, indexPath, data) => {

package/dist/components/symbol-button.js

@@ -18,7 +18,14 @@ const base_1 = require("./base");
 class SymbolButton extends base_1.Base {
     constructor({ props, layout, events = {}, }) {
         super();
-        this._props = Object.assign({ enabled: true, contentMode: 1, insets: $insets(12.5, 12.5, 12.5, 12.5), tintColor: $color("primaryText"), hidden: false }, props);
+        this._props = {
+            enabled: true,
+            contentMode: 1,
+            insets: $insets(12.5, 12.5, 12.5, 12.5),
+            tintColor: $color("primaryText"),
+            hidden: false,
+            ...props,
+        };
         this._layout = layout;
         this._defineView = () => {
             const props = this._props.menu

package/dist/components/tabbar.js

@@ -168,7 +168,14 @@ class ImageCell extends base_1.Base {
 class TabBar extends base_1.Base {
     constructor({ props, events = {}, }) {
         super();
-        this._props = Object.assign({ height: 50, index: 0, selectedSegmentTintColor: $color("systemLink"), defaultSegmentTintColor: colors_1.footBarDefaultSegmentColor }, props);
+        this._props = {
+            height: 50,
+            index: 0,
+            selectedSegmentTintColor: $color("systemLink"),
+            defaultSegmentTintColor: colors_1.footBarDefaultSegmentColor,
+            //bgcolor: $color("secondarySurface"),
+            ...props,
+        };
         this._index = this._props.index;
         this._events = events;
         this._cells = this._defineCells();

package/dist/controller/pageviewer-controller.js

@@ -51,7 +51,10 @@ class PageViewerController extends base_controller_1.BaseController {
             },
         });
         this.cviews.navbar = new custom_navigation_bar_1.CustomNavigationBar({
-            props: Object.assign(Object.assign({}, this._props.navBarProps), { titleView: this.cviews.titlebar }),
+            props: {
+                ...this._props.navBarProps,
+                titleView: this.cviews.titlebar,
+            },
         });
         this.rootView.views = [this.cviews.navbar, this.cviews.pageviewer];
     }

package/dist/controller/presented-page-controller.js

@@ -26,24 +26,22 @@ const sheet_1 = require("../components/sheet");
  */
 class PresentedPageController extends base_controller_1.BaseController {
     constructor({ props, layout, events, } = {}) {
-        var _a, _b;
         super({
             props: {
-                id: props === null || props === void 0 ? void 0 : props.id,
-                bgcolor: props === null || props === void 0 ? void 0 : props.bgcolor,
+                id: props?.id,
+                bgcolor: props?.bgcolor,
             },
             layout,
             events,
         });
         this._sheet = new sheet_1.Sheet({
-            presentMode: (_a = props === null || props === void 0 ? void 0 : props.presentMode) !== null && _a !== void 0 ? _a : 1,
-            animated: (_b = props === null || props === void 0 ? void 0 : props.animated) !== null && _b !== void 0 ? _b : true,
-            interactiveDismissalDisabled: (props === null || props === void 0 ? void 0 : props.interactiveDismissalDisabled) || false,
-            bgcolor: (props === null || props === void 0 ? void 0 : props.bgcolor) || $color("secondarySurface"),
+            presentMode: props?.presentMode ?? 1,
+            animated: props?.animated ?? true,
+            interactiveDismissalDisabled: props?.interactiveDismissalDisabled || false,
+            bgcolor: props?.bgcolor || $color("secondarySurface"),
             cview: this.rootView,
             dismissalHandler: () => {
-                var _a;
-                (_a = events === null || events === void 0 ? void 0 : events.dismissed) === null || _a === void 0 ? void 0 : _a.call(events, this);
+                events?.dismissed?.(this);
                 this.remove();
             },
         });

package/dist/controller/splitview-controller.js

@@ -8,7 +8,10 @@ const cvid_1 = require("../utils/cvid");
 class SecondaryView extends base_1.Base {
     constructor({ props, layout, views = [], }) {
         super();
-        this._props = Object.assign({ bgcolor: $color("groupedBackground", "secondarySurface") }, props);
+        this._props = {
+            bgcolor: $color("groupedBackground", "secondarySurface"),
+            ...props,
+        };
         this._layouts = {
             hidden: (make, view) => {
                 make.top.bottom.inset(0);
@@ -37,7 +40,10 @@ class SecondaryView extends base_1.Base {
         this._defineView = () => {
             return {
                 type: "view",
-                props: Object.assign(Object.assign({}, this._props), { id: this.id }),
+                props: {
+                    ...this._props,
+                    id: this.id,
+                },
                 layout,
                 views: [...views, this.line.definition],
             };
@@ -65,7 +71,7 @@ class SecondaryView extends base_1.Base {
 class MaskView extends base_1.Base {
     constructor({ props, layout = $layout.fill, }) {
         super();
-        this._props = Object.assign({ bgcolor: $color("clear") }, props);
+        this._props = { bgcolor: $color("clear"), ...props };
         this._shown = false;
         this._dismissEvent = () => {
             if (!this._shown)
@@ -76,7 +82,11 @@ class MaskView extends base_1.Base {
         this._defineView = () => {
             return {
                 type: "view",
-                props: Object.assign(Object.assign({}, this._props), { hidden: true, id: this.id }),
+                props: {
+                    ...this._props,
+                    hidden: true,
+                    id: this.id,
+                },
                 layout,
                 events: {
                     ready: (sender) => this._addGesture(sender, this._dismissEvent),
@@ -140,21 +150,23 @@ class SplitViewController extends base_controller_1.BaseController {
                 bgcolor: props.bgcolor,
             },
             layout,
-            events: Object.assign(Object.assign({}, events), { didAppear: (sender) => {
-                    var _a;
+            events: {
+                ...events,
+                didAppear: (sender) => {
                     if (this._sideBarShown) {
                         this._secondaryController.appear();
                     }
                     else {
                         this._primaryController.appear();
                     }
-                    (_a = events === null || events === void 0 ? void 0 : events.didAppear) === null || _a === void 0 ? void 0 : _a.call(events, this);
-                }, didDisappear: () => {
-                    var _a;
+                    events?.didAppear?.(this);
+                },
+                didDisappear: () => {
                     this._primaryController.disappear();
                     this._secondaryController.disappear();
-                    (_a = events === null || events === void 0 ? void 0 : events.didDisappear) === null || _a === void 0 ? void 0 : _a.call(events, this);
-                } }),
+                    events?.didDisappear?.(this);
+                },
+            },
         });
         this._sideBarShown = false;
         this._canShowSidebar = true;

package/dist/controller/tabbar-controller.js

@@ -27,15 +27,17 @@ class TabBarController extends base_controller_1.BaseController {
                 bgcolor: props.bgcolor,
             },
             layout,
-            events: Object.assign(Object.assign({}, events), { didAppear: () => {
-                    var _a;
+            events: {
+                ...events,
+                didAppear: () => {
                     this._props.items[this.index].controller.appear();
-                    (_a = events.didAppear) === null || _a === void 0 ? void 0 : _a.call(events, this);
-                }, didDisappear: () => {
-                    var _a;
+                    events.didAppear?.(this);
+                },
+                didDisappear: () => {
                     this._props.items[this.index].controller.disappear();
-                    (_a = events.didDisappear) === null || _a === void 0 ? void 0 : _a.call(events, this);
-                } }),
+                    events.didDisappear?.(this);
+                },
+            },
         });
         this._props = {
             items: props.items,
@@ -49,15 +51,13 @@ class TabBarController extends base_controller_1.BaseController {
             },
             events: {
                 changed: (cview, index) => {
-                    var _a, _b;
                     this.index = index;
-                    (_a = this._props.items.find((item) => item.controller.status === 2)) === null || _a === void 0 ? void 0 : _a.controller.disappear();
+                    this._props.items.find((item) => item.controller.status === 2)?.controller.disappear();
                     this._props.items[index].controller.appear();
-                    (_b = events.changed) === null || _b === void 0 ? void 0 : _b.call(events, this, index);
+                    events.changed?.(this, index);
                 },
                 doubleTapped: (cview, index) => {
-                    var _a;
-                    (_a = events.doubleTapped) === null || _a === void 0 ? void 0 : _a.call(events, this, index);
+                    events.doubleTapped?.(this, index);
                 },
             },
         });
@@ -81,7 +81,6 @@ class TabBarController extends base_controller_1.BaseController {
         this.rootView.views = [this.cviews.pageContentView, this.cviews.tabbar];
     }
     set index(num) {
-        var _a;
         if (this._props.index === num)
             return;
         this.cviews.tabbar.index = num;
@@ -89,7 +88,7 @@ class TabBarController extends base_controller_1.BaseController {
             n.view.hidden = i !== num;
         });
         this._props.index = num;
-        (_a = this._props.items.find((item) => item.controller.status === 2)) === null || _a === void 0 ? void 0 : _a.controller.disappear();
+        this._props.items.find((item) => item.controller.status === 2)?.controller.disappear();
         this._props.items[num].controller.appear();
     }
     get index() {

package/dist/index.js

@@ -18,6 +18,7 @@ __exportStar(require("./components/base"), exports);
 __exportStar(require("./components/custom-navigation-bar"), exports);
 __exportStar(require("./components/dynamic-contextmenu-view"), exports);
 __exportStar(require("./components/dynamic-itemsize-matrix"), exports);
+__exportStar(require("./components/dynamic-itemsize-section-matrix"), exports);
 __exportStar(require("./components/dynamic-preference-listview"), exports);
 __exportStar(require("./components/dynamic-rowheight-list"), exports);
 __exportStar(require("./components/enhanced-imageview"), exports);

package/dist/test/dialog-sheet.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const dialog_sheet_1 = require("../components/dialogs/dialog-sheet");
 const single_views_1 = require("../components/single-views");
@@ -26,7 +17,7 @@ $ui.render({
             },
             layout: $layout.center,
             events: {
-                tapped: () => __awaiter(void 0, void 0, void 0, function* () {
+                tapped: async () => {
                     const sheet = new dialog_sheet_1.DialogSheet({
                         title: "Dialog Sheet",
                         cview,
@@ -41,8 +32,8 @@ $ui.render({
                         },
                         doneButtonTitle: "完成",
                     });
-                    yield sheet.present();
-                }),
+                    await sheet.present();
+                },
             },
         },
     ],

package/dist/test/dynamic-itemsize-section-matrix.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const dynamic_itemsize_section_matrix_1 = require("../components/dynamic-itemsize-section-matrix");
+const makeItem = (sectionName, index) => {
+    return {
+        symbol: { symbol: index % 2 === 0 ? "sparkles" : "square.grid.2x2" },
+        title: { text: `${sectionName} ${index}` },
+        subtitle: { text: `Item index ${index}` },
+        badge: { text: `${index}` },
+    };
+};
+const sections = [
+    {
+        title: "Pinned",
+        items: [makeItem("Pinned", 1), makeItem("Pinned", 2), makeItem("Pinned", 3)],
+    },
+    {
+        title: "Long Section Title To Verify The Custom Title Cell Uses Dynamic Height\nLine 2\nLine 3",
+        items: [makeItem("Recent", 1), makeItem("Recent", 2), makeItem("Recent", 3), makeItem("Recent", 4)],
+    },
+    {
+        title: "",
+        items: [makeItem("Untitled", 1), makeItem("Untitled", 2)],
+    },
+];
+const matrix = new dynamic_itemsize_section_matrix_1.DynamicItemSizeSectionMatrix({
+    props: {
+        spacing: 8,
+        minItemWidth: $device.isIpad ? 180 : 142,
+        maxColumns: $device.isIpad ? 4 : 2,
+        data: sections,
+        template: {
+            views: [
+                {
+                    type: "view",
+                    props: {
+                        bgcolor: $color("yellow"),
+                        cornerRadius: 8,
+                    },
+                    layout: $layout.fill,
+                    views: [
+                        {
+                            type: "image",
+                            props: {
+                                id: "symbol",
+                                contentMode: $contentMode.scaleAspectFit,
+                                tintColor: $color("tint"),
+                            },
+                            layout: (make, view) => {
+                                make.left.top.inset(12);
+                                make.size.equalTo($size(32, 32));
+                            },
+                        },
+                        {
+                            type: "label",
+                            props: {
+                                id: "badge",
+                                align: $align.center,
+                                font: $font(12),
+                                textColor: $color("white"),
+                                bgcolor: $color("tint"),
+                                cornerRadius: 10,
+                            },
+                            layout: (make, view) => {
+                                make.top.right.inset(12);
+                                make.size.equalTo($size(28, 20));
+                            },
+                        },
+                        {
+                            type: "label",
+                            props: {
+                                id: "title",
+                                font: $font("bold", 15),
+                                textColor: $color("primaryText"),
+                            },
+                            layout: (make, view) => {
+                                make.left.right.inset(12);
+                                make.top.equalTo(view.prev.prev.bottom).offset(10);
+                                make.height.equalTo(20);
+                            },
+                        },
+                        {
+                            type: "label",
+                            props: {
+                                id: "subtitle",
+                                font: $font(12),
+                                textColor: $color("secondaryText"),
+                            },
+                            layout: (make, view) => {
+                                make.left.right.inset(12);
+                                make.top.equalTo(view.prev.bottom).offset(4);
+                                make.bottom.inset(12);
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+    layout: $layout.fill,
+    events: {
+        itemHeight: (width) => Math.max(112, width * 0.72),
+        didSelect: (sender, indexPath, data) => {
+            const section = matrix.data[indexPath.section];
+            const title = data.title.text;
+            $ui.toast(`${section.title || "Untitled"} / ${title}`);
+        },
+        didLongPress: (sender, indexPath, data) => {
+            const title = data.title.text;
+            $ui.alert(`Long pressed ${title}`);
+        },
+    },
+});
+$ui.render({
+    props: {
+        navButtons: [
+            {
+                symbol: "plus",
+                handler: () => {
+                    const nextIndex = matrix.data[0].items.length + 1;
+                    matrix.insert({
+                        indexPath: $indexPath(0, matrix.data[0].items.length),
+                        value: makeItem("Pinned", nextIndex),
+                    });
+                },
+            },
+            {
+                symbol: "trash",
+                handler: () => {
+                    if (matrix.data[0].items.length === 0)
+                        return;
+                    matrix.delete($indexPath(0, matrix.data[0].items.length - 1));
+                },
+            },
+        ],
+    },
+    views: [matrix.definition],
+});