jsbox-cview 1.0.0 → 1.1.0

package/dist/components/symbol-button.js

@@ -0,0 +1,79 @@
+"use strict";
+/**
+ * #cview symbolButton
+ *
+ * 创建可以自动规范symbol大小的button，兼容image，可以设定insets
+ *
+ * props:
+ *   - symbol
+ *   - image
+ *   - tintColor
+ *   - insets
+ *
+ * events:
+ *  - tapped
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SymbolButton = void 0;
+const base_1 = require("./base");
+/**
+ * 创建可以自动规范symbol大小的button，兼容image，可以设定insets
+ * props:
+ *   - symbol
+ *   - image
+ *   - tintColor
+ *   - insets
+ * events:
+ *   - tapped
+ */
+class SymbolButton extends base_1.Base {
+    constructor({ props, layout, events = {} }) {
+        super();
+        this._props = Object.assign({ insets: $insets(12.5, 12.5, 12.5, 12.5), tintColor: $color("primaryText") }, props);
+        this._layout = layout;
+        this._events = events;
+        this._defineView = () => {
+            return {
+                type: "button",
+                props: {
+                    radius: 0,
+                    bgcolor: $color("clear"),
+                    id: this.id
+                },
+                views: [
+                    {
+                        type: "image",
+                        props: {
+                            id: "image",
+                            symbol: this._props.symbol,
+                            image: this._props.image,
+                            src: this._props.src,
+                            tintColor: this._props.tintColor,
+                            contentMode: 1
+                        },
+                        layout: (make, view) => {
+                            make.edges.insets(this._props.insets);
+                            make.centerX.equalTo(view.super);
+                            make.width.equalTo(view.height);
+                        }
+                    }
+                ],
+                layout: this._layout,
+                events: Object.assign({}, this._events)
+            };
+        };
+    }
+    set tintColor(tintColor) {
+        const image = this.view.get("image");
+        image.tintColor = tintColor;
+    }
+    set symbol(symbol) {
+        this._props.symbol = symbol;
+        const image = this.view.get("image");
+        image.symbol = symbol;
+    }
+    get symbol() {
+        return this._props.symbol;
+    }
+}
+exports.SymbolButton = SymbolButton;

package/dist/components/tabbar.js

@@ -0,0 +1,357 @@
+"use strict";
+/**
+ * 本组件是为了仿制 UITabBar
+ * 本组件不能指定布局而是应该指定 height（如果需要的话）
+ * 典型的使用方式是添加在布局为$layout.fill的视图中，并指定 items
+ *
+ * props:
+ *
+ * - 只写 height: number = 50
+ * - 只写 items: {symbol?: string, image?:UIImage, title?: string}[]
+ * - 只写 bgcolor?: UIColor 如果不指定则背景使用blur（style 10），若指定则使用纯色视图
+ * - 读写 index: number = 0
+ * - 只写 selectedSegmentTintColor = $color("tintColor")
+ * - 只写 defaultSegmentTintColor = colors.footBarDefaultSegmentColor
+ *
+ * events:
+ *
+ * - changed: (cview, index) => void
+ * - doubleTapped: (cview, index) => void
+ *
+ * methods:
+ *
+ * - hide(animated=true) 隐藏
+ * - show(animated=true) 显示
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabBar = void 0;
+const colors_1 = require("../utils/colors");
+const base_1 = require("./base");
+class ImageLabelCell extends base_1.Base {
+    constructor({ props, events = {} }) {
+        super();
+        this._props = props;
+        this.layouts = {
+            image_tightened: (make, view) => {
+                make.centerX.equalTo(view.super);
+                make.size.equalTo($size(25, 25));
+                make.top.inset(7);
+            },
+            label_tightened: (make, view) => {
+                make.centerX.equalTo(view.super);
+                make.top.equalTo(view.prev.bottom);
+            },
+            image_loosed: (make, view) => {
+                make.centerX.equalTo(view.super).offset(-35);
+                make.centerY.equalTo(view.super);
+                make.size.equalTo($size(25, 25));
+            },
+            label_loosed: (make, view) => {
+                make.left.equalTo(view.prev.right).inset(10);
+                make.centerY.equalTo(view.super);
+            }
+        };
+        this._defineView = () => {
+            return {
+                type: "view",
+                props: {
+                    id: this.id,
+                    userInteractionEnabled: true
+                },
+                views: [
+                    {
+                        type: "image",
+                        props: {
+                            id: "image",
+                            symbol: this._props.symbol,
+                            image: this._props.image,
+                            contentMode: 1
+                        }
+                    },
+                    {
+                        type: "label",
+                        props: {
+                            id: "label",
+                            text: this._props.text,
+                            align: $align.center
+                        }
+                    }
+                ],
+                events: {
+                    tapped: sender => {
+                        if (events.tapped)
+                            events.tapped(this._props.index);
+                    }
+                }
+            };
+        };
+    }
+    set selected(selected) {
+        this._props.selected = selected;
+        const color = selected
+            ? this._props.selectedSegmentTintColor
+            : this._props.defaultSegmentTintColor;
+        this.view.get("image").tintColor = color;
+        const label = this.view.get("label");
+        label.textColor = color;
+    }
+    get selected() {
+        return this._props.selected;
+    }
+    _useTightenedLayout() {
+        this.view.get("image").remakeLayout(this.layouts.image_tightened);
+        this.view.get("label").remakeLayout(this.layouts.label_tightened);
+        const label = this.view.get("label");
+        label.font = $font(10);
+    }
+    _useLoosedLayout() {
+        this.view.get("image").remakeLayout(this.layouts.image_loosed);
+        this.view.get("label").remakeLayout(this.layouts.label_loosed);
+        const label = this.view.get("label");
+        label.font = $font(14);
+    }
+}
+class ImageCell extends base_1.Base {
+    constructor({ props, events = {} }) {
+        super();
+        this._props = props;
+        this.layouts = {
+            image_tightened: (make, view) => {
+                make.center.equalTo(view.super);
+                make.size.equalTo($size(30, 30));
+            },
+            image_loosed: (make, view) => {
+                make.center.equalTo(view.super);
+                make.size.equalTo($size(30, 30));
+            }
+        };
+        this._defineView = () => {
+            return {
+                type: "view",
+                props: {
+                    id: this.id,
+                    userInteractionEnabled: true
+                },
+                views: [
+                    {
+                        type: "image",
+                        props: {
+                            id: "image",
+                            symbol: this._props.symbol,
+                            image: this._props.image,
+                            contentMode: 1
+                        }
+                    }
+                ],
+                events: {
+                    tapped: sender => {
+                        if (events.tapped)
+                            events.tapped(this._props.index);
+                    }
+                }
+            };
+        };
+    }
+    set selected(selected) {
+        this._props.selected = selected;
+        const color = selected
+            ? this._props.selectedSegmentTintColor
+            : this._props.defaultSegmentTintColor;
+        this.view.get("image").tintColor = color;
+    }
+    get selected() {
+        return this._props.selected;
+    }
+    _useTightenedLayout() {
+        this.view.get("image").remakeLayout(this.layouts.image_tightened);
+    }
+    _useLoosedLayout() {
+        this.view.get("image").remakeLayout(this.layouts.image_loosed);
+    }
+}
+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._index = this._props.index;
+        this._events = events;
+        this._cells = this._defineCells();
+        this._defineView = () => {
+            const stack = {
+                type: "stack",
+                props: {
+                    axis: $stackViewAxis.horizontal,
+                    distribution: $stackViewDistribution.fillEqually,
+                    spacing: 0,
+                    stack: {
+                        views: this._cells.map(n => n.definition)
+                    }
+                },
+                layout: (make, view) => {
+                    make.height.equalTo(this._props.height - 0.5);
+                    make.left.right.equalTo(view.super.safeArea);
+                    make.top.equalTo(view.prev.bottom);
+                }
+            };
+            const line = {
+                type: "view",
+                props: {
+                    bgcolor: $color("separatorColor")
+                },
+                layout: (make, view) => {
+                    make.top.left.right.inset(0);
+                    make.height.equalTo(0.5);
+                }
+            };
+            if (this._props.bgcolor) {
+                return {
+                    type: "view",
+                    props: {
+                        id: this.id,
+                        bgcolor: this._props.bgcolor
+                    },
+                    layout: (make, view) => {
+                        make.left.right.bottom.inset(0);
+                        make.top.equalTo(view.super.safeAreaBottom).inset(-this._props.height);
+                    },
+                    views: [line, stack],
+                    events: {
+                        ready: sender => (this.index = this._index),
+                        layoutSubviews: sender => {
+                            const windowWidth = sender.frame.width;
+                            if (windowWidth > 600) {
+                                this._useLoosedLayout();
+                            }
+                            else {
+                                this._useTightenedLayout();
+                            }
+                        }
+                    }
+                };
+            }
+            else {
+                return {
+                    type: "blur",
+                    props: {
+                        id: this.id,
+                        style: 10
+                    },
+                    layout: (make, view) => {
+                        make.left.right.bottom.inset(0);
+                        make.top.equalTo(view.super.safeAreaBottom).inset(-this._props.height);
+                    },
+                    views: [line, stack],
+                    events: {
+                        ready: sender => (this.index = this._index),
+                        layoutSubviews: sender => {
+                            const windowWidth = sender.frame.width;
+                            if (windowWidth > 600) {
+                                this._useLoosedLayout();
+                            }
+                            else {
+                                this._useTightenedLayout();
+                            }
+                        }
+                    }
+                };
+            }
+        };
+    }
+    _defineCells() {
+        return this._props.items.map((n, i) => {
+            if (n.title) {
+                return new ImageLabelCell({
+                    props: {
+                        symbol: n.symbol,
+                        image: n.image ? n.image.alwaysTemplate : undefined,
+                        text: n.title,
+                        index: i,
+                        selectedSegmentTintColor: this._props.selectedSegmentTintColor,
+                        defaultSegmentTintColor: this._props.defaultSegmentTintColor
+                    },
+                    events: {
+                        tapped: index => {
+                            if (index !== this.index) {
+                                this.index = index;
+                                if (this._events.changed)
+                                    this._events.changed(this, index);
+                            }
+                            else {
+                                if (this._events.doubleTapped)
+                                    this._events.doubleTapped(this, index);
+                            }
+                        }
+                    }
+                });
+            }
+            else {
+                return new ImageCell({
+                    props: {
+                        symbol: n.symbol,
+                        image: n.image ? n.image.alwaysTemplate : undefined,
+                        index: i,
+                        selectedSegmentTintColor: this._props.selectedSegmentTintColor,
+                        defaultSegmentTintColor: this._props.defaultSegmentTintColor
+                    },
+                    events: {
+                        tapped: index => {
+                            if (index !== this.index) {
+                                this.index = index;
+                                if (this._events.changed)
+                                    this._events.changed(this, index);
+                            }
+                            else {
+                                if (this._events.doubleTapped)
+                                    this._events.doubleTapped(this, index);
+                            }
+                        }
+                    }
+                });
+            }
+        });
+    }
+    get index() {
+        return this._index;
+    }
+    set index(index) {
+        this._index = index;
+        this._cells.forEach((n, i) => {
+            n.selected = i === this._index;
+        });
+    }
+    hide(animated = true) {
+        this.view.remakeLayout((make, view) => {
+            make.left.right.bottom.inset(0);
+            make.height.equalTo(0);
+        });
+        if (animated) {
+            $ui.animate({
+                duration: 0.3,
+                animation: () => this.view.relayout()
+            });
+        }
+    }
+    show(animated = true) {
+        this.view.remakeLayout((make, view) => {
+            make.left.right.bottom.inset(0);
+            make.top.equalTo(view.super.safeAreaBottom).inset(-this._props.height);
+        });
+        if (animated) {
+            $ui.animate({
+                duration: 0.3,
+                animation: () => this.view.relayout()
+            });
+        }
+    }
+    _useTightenedLayout() {
+        this._cells.forEach(n => {
+            n._useTightenedLayout();
+        });
+    }
+    _useLoosedLayout() {
+        this._cells.forEach(n => {
+            n._useLoosedLayout();
+        });
+    }
+}
+exports.TabBar = TabBar;

package/dist/controller/base-controller.js

@@ -0,0 +1,178 @@
+"use strict";
+/**
+ * # CView Base Controller
+ *
+ * Cview 控件尽量保持非侵入性和功能专注。而控制器负责控件之间的关联和数据更新。
+ * 另外，控制器可以实现一些常用的页面构建形式，比如底部Tab分页，左侧滑动分页，弹出式页面等。
+ *
+ * ## 属性
+ *
+ * - id?: string 可以指定 id，如不指定，会自动赋值全局唯一 id
+ * - 只写 bgcolor?: UIColor = $color("primarySurface") rootView 的 bgcolor
+ * - 只读 cviews: {}
+ * - 只读 rootView
+ * - 只读 status
+ *   - created = 0 被创建，未被加载
+ *   - loaded = 1 被加载，显示状态未知
+ *   - appearing = 2 处于可显示状态
+ *   - disappearing = 3 处于不显示状态
+ *   - removed = 4 根视图被移除
+ *
+ * ## 事件
+ *
+ * 5 个生命周期节点：创建、加载、显示、隐藏、销毁。后面四个具有生命周期事件。
+ *
+ * 创建阶段没有对应事件，此阶段适合为 rootView 添加子 view，不能涉及对 UIView 的任何操作，因为此时 rootView 还未加载。
+ *
+ * 生命周期事件：
+ *
+ * 1. didLoad: controller => void 在 rootView 被加载之后执行
+ *    - 可以在 rootView 的 ready 事件中自动执行，也可以手动执行加快速度
+ *    - 也可以在这个节点为 rootView 添加子 view
+ *    - 这个节点可以对 UIView 进行操作了
+ *    - 可以向 Model 层请求初始数据
+ * 2. didAppear: controller => void 在 rootView 显现的时候执行
+ *    - 向 Model 层请求刷新数据
+ * 3. didDisappear: controller => void 在 rootView 不可见的时候执行
+ *    - 如果是持续执行的刷新行为，可以在此处转为暂停
+ * 4. didRemove: controller => void 在 rootView 被移除的时候执行
+ *    - 应该在此节点释放自定义的 objc
+ *    - 数据持久化
+ *
+ * ## 方法
+ *
+ * 加载方法：
+ *
+ * 1. uirender(props) 此方法只能使用一次，对应的 Controller 将成为顶级 Controller
+ * 2. uipush(props)
+ * 3. 直接让 rootView.definition 包含在其他 View 的 views 参数中
+ *
+ * 生命周期管理：
+ *
+ * 1. load() 会在 rootView 的 ready 事件中自动调用，也可以手动调用，以加速运行
+ * 2. appear()
+ * 3. disappear()
+ * 4. remove() 用来移除 Router 中的当前 Controller，**请注意此方法和 rootView 的移除无关**，如果通过 uirender 和 uipush，可以在销毁时自动执行 remove()
+ *
+ * ## 其他
+ *
+ * - rootView 可以直接通过 rootView.views 设置其_views 属性，其中元素可以为 view 定义也可以为 cview
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseController = exports.ControllerRootView = void 0;
+const base_1 = require("../components/base");
+const single_views_1 = require("../components/single-views");
+const cvid_1 = require("../utils/cvid");
+const controller_router_1 = require("./controller-router");
+/**
+ * status
+ *   - created = 0 被创建，未被加载
+ *   - loaded = 1 被加载，显示状态未知
+ *   - appeared= 2 处于可显示状态
+ *   - disappeared = 3 处于不显示状态
+ *   - removed = 4 根视图被移除
+ * 其中只有 2 和 3 可以相互转化，其他不可以
+ */
+const controllerStatus = {
+    created: 0,
+    loaded: 1,
+    appeared: 2,
+    disappeared: 3,
+    removed: 4
+};
+class ControllerRootView extends single_views_1.ContentView {
+    constructor({ props, layout, events }) {
+        super({ props, layout, events });
+    }
+    set views(views) {
+        const _views = views.map(v => {
+            if (v instanceof base_1.Base)
+                return v.definition;
+            return v;
+        });
+        this._views = _views;
+    }
+}
+exports.ControllerRootView = ControllerRootView;
+class BaseController {
+    constructor({ props, layout = $layout.fill, events = {} } = {}) {
+        this._props = props || {};
+        this._events = events;
+        this.id = this._props.id || cvid_1.cvid.newId;
+        this._status = controllerStatus.created; // status使用额外的get来使其只读
+        this.rootView = new ControllerRootView({
+            props: {
+                bgcolor: this._props.bgcolor || $color("primarySurface")
+            },
+            layout,
+            events: {
+                ready: sender => this.load()
+            }
+        });
+        this.cviews = {};
+    }
+    load() {
+        // 只有status为created才可以运行
+        if (this._status !== controllerStatus.created)
+            return;
+        this._status = controllerStatus.loaded;
+        if (this._events.didLoad)
+            this._events.didLoad(this);
+        controller_router_1.router.add(this);
+    }
+    appear() {
+        // 只有status为loaded或者disappeared，才可以运行
+        if (this._status !== controllerStatus.loaded &&
+            this._status !== controllerStatus.disappeared)
+            return;
+        if (this._events.didAppear)
+            this._events.didAppear(this);
+        this._status = controllerStatus.appeared;
+    }
+    disappear() {
+        // 只有status为loaded或者appeared，才可以运行
+        if (this._status !== controllerStatus.loaded &&
+            this._status !== controllerStatus.appeared)
+            return;
+        if (this._events.didDisappear)
+            this._events.didDisappear(this);
+        this._status = controllerStatus.disappeared;
+    }
+    // 此方法不能用于移除rootView，其作用是将控制器从Router中移除，并触发didRemove事件
+    remove() {
+        // 如果已经移除，不可以再次运行
+        if (this._status === controllerStatus.removed)
+            return;
+        if (this._events.didRemove)
+            this._events.didRemove(this);
+        controller_router_1.router.delete(this);
+        this._status = controllerStatus.removed;
+    }
+    uirender(props) {
+        controller_router_1.router.root = this;
+        $ui.render({
+            props,
+            views: [this.rootView.definition],
+            events: {
+                appeared: () => this.appear(),
+                disappeared: () => this.disappear(),
+                dealloc: () => this.remove()
+            }
+        });
+    }
+    uipush(props) {
+        $ui.push({
+            props,
+            views: [this.rootView.definition],
+            events: {
+                appeared: () => this.appear(),
+                disappeared: () => this.disappear(),
+                dealloc: () => this.remove()
+            }
+        });
+    }
+    get status() {
+        return this._status;
+    }
+}
+exports.BaseController = BaseController;

package/dist/controller/controller-router.js

@@ -0,0 +1,68 @@
+"use strict";
+/**
+ * 控制器的路由器，用于管理控制器的集合和操作。
+ *
+ * ## 属性
+ * - `root`：根控制器。
+ * - `appeared`：状态为appeared的控制器列表。
+ * - `controllerSet`：控制器集合。
+ *
+ * ## 方法
+ * - `add(controller: BaseController)`：添加控制器到路由器中。
+ * - `delete(controller: BaseController)`：从路由器中删除控制器。
+ * - `get(id: string)`：根据控制器的ID获取控制器。
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.router = void 0;
+class Router {
+    constructor() {
+        this._set = new Set();
+    }
+    /**
+     * 添加控制器到路由器中。
+     * @param controller 要添加的控制器。
+     */
+    add(controller) {
+        this._set.add(controller);
+    }
+    /**
+     * 从路由器中删除控制器。
+     * @param controller 要删除的控制器。
+     */
+    delete(controller) {
+        this._set.delete(controller);
+    }
+    /**
+     * 根据控制器的ID获取控制器。
+     * @param id 控制器的ID。
+     * @returns 匹配的控制器，如果找不到则返回undefined。
+     */
+    get(id) {
+        for (const c of this._set) {
+            if (c.id === id)
+                return c;
+        }
+        return;
+    }
+    /**
+     * 获取状态为appeared的控制器集合。
+     * @returns 控制器集合。
+     */
+    get appeared() {
+        const appearedControllers = [];
+        for (const c of this._set) {
+            if (c.status === 2)
+                appearedControllers.push(c);
+        }
+        return appearedControllers;
+    }
+    /**
+     * 获取控制器集合。
+     * @returns 控制器集合。
+     */
+    get controllerSet() {
+        return this._set;
+    }
+}
+exports.router = new Router();