jsbox-cview 1.5.21 → 1.5.23

package/components/symbol-button.ts

@@ -8,7 +8,7 @@ interface SymbolButtonProps {
   tintColor: UIColor;
   contentMode: number;
   insets: JBInsets;
-  menu?: UiTypes.ContextMenuOptions
+  menu?: UiTypes.ContextMenuOptions;
   hidden: boolean;
 }
 
@@ -26,12 +26,12 @@ interface SymbolButtonProps {
  *   - tapped
  */
 export class SymbolButton extends Base<UIButtonView, UiTypes.ButtonOptions> {
-  _props: SymbolButtonProps
+  _props: SymbolButtonProps;
   _defineView: () => UiTypes.ButtonOptions;
   constructor({
     props,
     layout,
-    events = {}
+    events = {},
   }: {
     props: Partial<SymbolButtonProps>;
     layout?: (make: MASConstraintMaker, view: UIButtonView) => void;
@@ -44,25 +44,26 @@ export class SymbolButton extends Base<UIButtonView, UiTypes.ButtonOptions> {
       insets: $insets(12.5, 12.5, 12.5, 12.5),
       tintColor: $color("primaryText"),
       hidden: false,
-      ...props
+      ...props,
     };
     this._layout = layout;
     this._defineView = () => {
       const props = this._props.menu
         ? {
-          radius: 0,
-          bgcolor: $color("clear"),
-          id: this.id,
-          menu: this._props.menu,
-          enabled: this._props.enabled,
-          hidden: this._props.hidden
-        } : {
-          radius: 0,
-          bgcolor: $color("clear"),
-          id: this.id,
-          enabled: this._props.enabled,
-          hidden: this._props.hidden
-        }
+            radius: 0,
+            bgcolor: $color("clear"),
+            id: this.id,
+            menu: this._props.menu,
+            enabled: this._props.enabled,
+            hidden: this._props.hidden,
+          }
+        : {
+            radius: 0,
+            bgcolor: $color("clear"),
+            id: this.id,
+            enabled: this._props.enabled,
+            hidden: this._props.hidden,
+          };
       return {
         type: "button",
         props,
@@ -75,18 +76,18 @@ export class SymbolButton extends Base<UIButtonView, UiTypes.ButtonOptions> {
               image: this._props.image,
               src: this._props.src,
               tintColor: this._props.tintColor,
-              contentMode: this._props.contentMode
+              contentMode: this._props.contentMode,
             },
             layout: (make, view: UIImageView) => {
               make.edges.insets(this._props.insets);
               make.center.equalTo(view.super);
-            }
-          }
+            },
+          },
         ],
         layout: this._layout,
-        events
+        events,
       };
-    }
+    };
   }
 
   set tintColor(tintColor: UIColor) {

package/components/tabbar.ts

@@ -18,7 +18,10 @@ class ImageLabelCell extends Base<UIView, UiTypes.ViewOptions> {
     label_loosed: (make: MASConstraintMaker, view: AllUIView) => void;
   };
   _defineView: () => UiTypes.ViewOptions;
-  constructor({ props, events = {} }: {
+  constructor({
+    props,
+    events = {},
+  }: {
     props: {
       symbol?: string;
       image?: UIImage;
@@ -27,10 +30,10 @@ class ImageLabelCell extends Base<UIView, UiTypes.ViewOptions> {
       selectedSegmentTintColor: UIColor;
       defaultSegmentTintColor: UIColor;
       selected?: boolean;
-    },
+    };
     events: {
       tapped?: (index: number) => void;
-    }
+    };
   }) {
     super();
     this._props = props;
@@ -52,14 +55,14 @@ class ImageLabelCell extends Base<UIView, UiTypes.ViewOptions> {
       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
+          userInteractionEnabled: true,
         },
         views: [
           {
@@ -68,26 +71,26 @@ class ImageLabelCell extends Base<UIView, UiTypes.ViewOptions> {
               id: "image",
               symbol: this._props.symbol,
               image: this._props.image,
-              contentMode: 1
-            }
+              contentMode: 1,
+            },
           },
           {
             type: "label",
             props: {
               id: "label",
               text: this._props.text,
-              align: $align.center
-            }
-          }
+              align: $align.center,
+            },
+          },
         ],
         events: {
-          tapped: sender => {
+          tapped: (sender) => {
             if (events.tapped) events.tapped(this._props.index);
-          }
-        }
+          },
+        },
       };
-    }
-  } 
+    };
+  }
 
   set selected(selected) {
     this._props.selected = selected;
@@ -132,7 +135,10 @@ class ImageCell extends Base<UIView, UiTypes.ViewOptions> {
     image_loosed: (make: MASConstraintMaker, view: AllUIView) => void;
   };
   _defineView: () => UiTypes.ViewOptions;
-  constructor({ props, events = {} }: {
+  constructor({
+    props,
+    events = {},
+  }: {
     props: {
       symbol?: string;
       image?: UIImage;
@@ -140,10 +146,10 @@ class ImageCell extends Base<UIView, UiTypes.ViewOptions> {
       selectedSegmentTintColor: UIColor;
       defaultSegmentTintColor: UIColor;
       selected?: boolean;
-    },
+    };
     events: {
       tapped?: (index: number) => void;
-    }
+    };
   }) {
     super();
     this._props = props;
@@ -155,14 +161,14 @@ class ImageCell extends Base<UIView, UiTypes.ViewOptions> {
       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
+          userInteractionEnabled: true,
         },
         views: [
           {
@@ -171,17 +177,17 @@ class ImageCell extends Base<UIView, UiTypes.ViewOptions> {
               id: "image",
               symbol: this._props.symbol,
               image: this._props.image,
-              contentMode: 1
-            }
-          }
+              contentMode: 1,
+            },
+          },
         ],
         events: {
-          tapped: sender => {
+          tapped: (sender) => {
             if (events.tapped) events.tapped(this._props.index);
-          }
-        }
+          },
+        },
       };
-    }
+    };
   }
 
   set selected(selected) {
@@ -206,8 +212,8 @@ class ImageCell extends Base<UIView, UiTypes.ViewOptions> {
 }
 
 /**
- * 本组件是为了仿制 UITabBar  
- * 本组件不能指定布局而是应该指定 height（如果需要的话）  
+ * 本组件是为了仿制 UITabBar
+ * 本组件不能指定布局而是应该指定 height（如果需要的话）
  * 典型的使用方式是添加在布局为$layout.fill的视图中，并指定 items
  *
  * props:
@@ -229,7 +235,10 @@ class ImageCell extends Base<UIView, UiTypes.ViewOptions> {
  * - hide(animated=true) 隐藏
  * - show(animated=true) 显示
  */
-export class TabBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTypes.BlurOptions> {
+export class TabBar extends Base<
+  UIView | UIBlurView,
+  UiTypes.ViewOptions | UiTypes.BlurOptions
+> {
   _props: {
     height: number;
     items: { symbol?: string; image?: UIImage; title?: string }[];
@@ -245,7 +254,10 @@ export class TabBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTy
     doubleTapped?: (cview: TabBar, index: number) => void;
   };
   _defineView: () => UiTypes.ViewOptions | UiTypes.BlurOptions;
-  constructor({ props, events = {} }: {
+  constructor({
+    props,
+    events = {},
+  }: {
     props: {
       height?: number;
       items: { symbol?: string; image?: UIImage; title?: string }[];
@@ -253,11 +265,11 @@ export class TabBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTy
       selectedSegmentTintColor?: UIColor;
       defaultSegmentTintColor?: UIColor;
       bgcolor?: UIColor;
-    },
+    };
     events: {
       changed?: (cview: TabBar, index: number) => void;
       doubleTapped?: (cview: TabBar, index: number) => void;
-    }
+    };
   }) {
     super();
     this._props = {
@@ -266,7 +278,7 @@ export class TabBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTy
       selectedSegmentTintColor: $color("systemLink"),
       defaultSegmentTintColor: footBarDefaultSegmentColor,
       //bgcolor: $color("secondarySurface"),
-      ...props
+      ...props,
     };
     this._index = this._props.index;
     this._events = events;
@@ -279,75 +291,79 @@ export class TabBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTy
           distribution: $stackViewDistribution.fillEqually,
           spacing: 0,
           stack: {
-            views: this._cells.map(n => n.definition)
-          }
+            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: UiTypes.ViewOptions = {
         type: "view",
         props: {
-          bgcolor: $color("separatorColor")
+          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
+            bgcolor: this._props.bgcolor,
           },
           layout: (make, view) => {
             make.left.right.bottom.inset(0);
-            make.top.equalTo(view.super.safeAreaBottom).inset(-this._props.height);
+            make.top
+              .equalTo(view.super.safeAreaBottom)
+              .inset(-this._props.height);
           },
           views: [line, stack],
           events: {
-            ready: sender => (this.index = this._index),
-            layoutSubviews: sender => {
+            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
+            style: 10,
           },
           layout: (make, view) => {
             make.left.right.bottom.inset(0);
-            make.top.equalTo(view.super.safeAreaBottom).inset(-this._props.height);
+            make.top
+              .equalTo(view.super.safeAreaBottom)
+              .inset(-this._props.height);
           },
           views: [line, stack],
           events: {
-            ready: sender => (this.index = this._index),
-            layoutSubviews: sender => {
+            ready: (sender) => (this.index = this._index),
+            layoutSubviews: (sender) => {
               const windowWidth = sender.frame.width;
               if (windowWidth > 600) {
                 this._useLoosedLayout();
               } else {
                 this._useTightenedLayout();
               }
-            }
-          }
+            },
+          },
         };
       }
-    }
+    };
   }
 
   _defineCells() {
@@ -360,10 +376,10 @@ export class TabBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTy
             text: n.title,
             index: i,
             selectedSegmentTintColor: this._props.selectedSegmentTintColor,
-            defaultSegmentTintColor: this._props.defaultSegmentTintColor
+            defaultSegmentTintColor: this._props.defaultSegmentTintColor,
           },
           events: {
-            tapped: index => {
+            tapped: (index) => {
               if (index !== this.index) {
                 this.index = index;
                 if (this._events.changed) this._events.changed(this, index);
@@ -371,8 +387,8 @@ export class TabBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTy
                 if (this._events.doubleTapped)
                   this._events.doubleTapped(this, index);
               }
-            }
-          }
+            },
+          },
         });
       } else {
         return new ImageCell({
@@ -381,10 +397,10 @@ export class TabBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTy
             image: n.image ? n.image.alwaysTemplate : undefined,
             index: i,
             selectedSegmentTintColor: this._props.selectedSegmentTintColor,
-            defaultSegmentTintColor: this._props.defaultSegmentTintColor
+            defaultSegmentTintColor: this._props.defaultSegmentTintColor,
           },
           events: {
-            tapped: index => {
+            tapped: (index) => {
               if (index !== this.index) {
                 this.index = index;
                 if (this._events.changed) this._events.changed(this, index);
@@ -392,8 +408,8 @@ export class TabBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTy
                 if (this._events.doubleTapped)
                   this._events.doubleTapped(this, index);
               }
-            }
-          }
+            },
+          },
         });
       }
     });
@@ -418,7 +434,7 @@ export class TabBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTy
     if (animated) {
       $ui.animate({
         duration: 0.3,
-        animation: () => this.view.relayout()
+        animation: () => this.view.relayout(),
       });
     }
   }
@@ -431,19 +447,19 @@ export class TabBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTy
     if (animated) {
       $ui.animate({
         duration: 0.3,
-        animation: () => this.view.relayout()
+        animation: () => this.view.relayout(),
       });
     }
   }
 
   _useTightenedLayout() {
-    this._cells.forEach(n => {
+    this._cells.forEach((n) => {
       n._useTightenedLayout();
     });
   }
 
   _useLoosedLayout() {
-    this._cells.forEach(n => {
+    this._cells.forEach((n) => {
       n._useLoosedLayout();
     });
   }

package/controller/base-controller.ts

@@ -1,5 +1,5 @@
-import { Base } from '../components/base';
-import { ContentView } from '../components/single-views';
+import { Base } from "../components/base";
+import { ContentView } from "../components/single-views";
 import { cvid } from "../utils/cvid";
 import { router } from "./controller-router";
 
@@ -17,14 +17,14 @@ const controllerStatus = {
   loaded: 1,
   appeared: 2,
   disappeared: 3,
-  removed: 4
+  removed: 4,
 };
 
 export class ControllerRootView extends ContentView {
   constructor({
     props,
     layout,
-    events
+    events,
   }: {
     props: { bgcolor: UIColor };
     layout: (make: MASConstraintMaker, view: UIView) => void;
@@ -34,10 +34,10 @@ export class ControllerRootView extends ContentView {
   }
 
   set views(views: UiTypes.AllViewOptions[] | Base<any, any>[]) {
-    const _views: UiTypes.AllViewOptions[] = views.map(v => {
+    const _views: UiTypes.AllViewOptions[] = views.map((v) => {
       if (v instanceof Base) return v.definition;
       return v;
-    })
+    });
     this._views = _views;
   }
 }
@@ -55,14 +55,14 @@ export interface BaseControllerEvents {
   didRemove?: (controller: BaseController) => void;
 }
 
-/** 
+/**
  * # CView Base Controller
- * 
+ *
  * Cview 控件尽量保持非侵入性和功能专注。而控制器负责控件之间的关联和数据更新。
  * 另外，控制器可以实现一些常用的页面构建形式，比如底部Tab分页，左侧滑动分页，弹出式页面等。
- * 
+ *
  * ## 属性
- * 
+ *
  * - id?: string 可以指定 id，如不指定，会自动赋值全局唯一 id
  * - 只写 bgcolor?: UIColor = $color("primarySurface") rootView 的 bgcolor
  * - 只读 cviews: {}
@@ -73,13 +73,14 @@ export interface BaseControllerEvents {
  *   - appearing = 2 处于可显示状态
  *   - disappearing = 3 处于不显示状态
  *   - removed = 4 根视图被移除
- * 
+ *
  * ## 事件
- * 
+ *
  * 5 个生命周期节点：创建、加载、显示、隐藏、销毁。后面四个具有生命周期事件。
- * 
- * 创建阶段没有对应事件，此阶段适合为 rootView 添加子 view，不能涉及对 UIView 的任何操作，因为此时 rootView 还未加载。
- * 
+ *
+ * 创建阶段没有对应事件，此阶段适合为 rootView 添加子 view，
+ * 不能涉及对 UIView 的任何操作，因为此时 rootView 还未加载。
+ *
  * 生命周期事件：
  *
  * 1. didLoad: controller => void 在 rootView 被加载之后执行
@@ -94,25 +95,27 @@ export interface BaseControllerEvents {
  * 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()
- * 
+ * 4. remove() 用来移除 Router 中的当前 Controller，**请注意此方法和 rootView 的移除无关**，
+ *    如果通过 uirender 和 uipush，可以在销毁时自动执行 remove()
+ *
  * ## 其他
- * 
- * - rootView 可以直接通过 rootView.views 设置其_views 属性，其中元素可以为 view 定义也可以为 cview
+ *
+ * - rootView 可以直接通过 rootView.views 设置其_views 属性，
+ *   其中元素可以为 view 定义也可以为 cview
  */
 export class BaseController {
   protected _props: BaseControllerProps;
@@ -123,7 +126,11 @@ export class BaseController {
     [key: string]: Base<any, any>;
   };
   readonly rootView: ControllerRootView;
-  constructor({ props, layout = $layout.fill, events = {} }: {
+  constructor({
+    props,
+    layout = $layout.fill,
+    events = {},
+  }: {
     props?: BaseControllerProps;
     layout?: (make: MASConstraintMaker, view: UIView) => void;
     events?: BaseControllerEvents;
@@ -135,13 +142,13 @@ export class BaseController {
     this._status = controllerStatus.created; // status使用额外的get来使其只读
     this.rootView = new ControllerRootView({
       props: {
-        bgcolor: this._props.bgcolor || $color("primarySurface")
+        bgcolor: this._props.bgcolor || $color("primarySurface"),
       },
       layout,
       events: {
-        ready: sender => this.load()
-      }
-    })
+        ready: (sender) => this.load(),
+      },
+    });
     this.cviews = {};
   }
 
@@ -150,7 +157,7 @@ export class BaseController {
     if (this._status !== controllerStatus.created) return;
     this._status = controllerStatus.loaded;
     if (this._events.didLoad) this._events.didLoad(this);
-    router.add(this)
+    router.add(this);
   }
 
   appear() {
@@ -180,7 +187,7 @@ export class BaseController {
     // 如果已经移除，不可以再次运行
     if (this._status === controllerStatus.removed) return;
     if (this._events.didRemove) this._events.didRemove(this);
-    router.delete(this)
+    router.delete(this);
     this._status = controllerStatus.removed;
   }
 
@@ -192,8 +199,8 @@ export class BaseController {
       events: {
         appeared: () => this.appear(),
         disappeared: () => this.disappear(),
-        dealloc: () => this.remove()
-      }
+        dealloc: () => this.remove(),
+      },
     });
   }
 
@@ -204,8 +211,8 @@ export class BaseController {
       events: {
         appeared: () => this.appear(),
         disappeared: () => this.disappear(),
-        dealloc: () => this.remove()
-      }
+        dealloc: () => this.remove(),
+      },
     });
   }
 

package/controller/controller-router.ts

@@ -2,17 +2,17 @@ import { BaseController } from "./base-controller";
 
 /**
  * 控制器的路由器，用于管理控制器的集合和操作。
- * 
+ *
  * ## 属性
  * - `root`：根控制器。
  * - `appeared`：状态为appeared的控制器列表。
  * - `controllerSet`：控制器集合。
- * 
+ *
  * ## 方法
  * - `add(controller: BaseController)`：添加控制器到路由器中。
  * - `delete(controller: BaseController)`：从路由器中删除控制器。
  * - `get(id: string)`：根据控制器的ID获取控制器。
- * 
+ *
  */
 class Router {
   private _set: Set<BaseController>;
@@ -70,4 +70,4 @@ class Router {
   }
 }
 
-export const router = new Router();
+export const router = new Router();