jsbox-cview 1.3.5 → 1.4.0

package/dist/components/pageviewer.js

@@ -1,23 +1,25 @@
 "use strict";
-/**
- * # CView PageViewer
- *
- * props:
- * - 读写 page: number
- * - 只写 cviews: cview[] cview的布局会被自动指定为占用一整页
- *
- * events:
- * - changed: (cview, page) => void 页面改变时回调
- * - floatPageChanged: (cview, floatPage) => void 滚动时回调（用于绑定其他联合滚动的控件）
- *
- * methods:
- * - scrollToPage(page: number) 滚动到某一页（带有动画效果）
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageViewer = void 0;
 const base_1 = require("./base");
 const single_views_1 = require("./single-views");
+/**
+ * 与JSBox内置的Gallery功能类似，但是效果更好，可以伴随翻页实现联动效果，参见[pageviewer-titlebar.ts](./pageviewer-titlebar.ts)
+ *
+ * @property page: number 当前页码（无动画效果）
+ * @method scrollToPage(page: number) 滚动到某一页（带有动画效果）
+ */
 class PageViewer extends base_1.Base {
+    /**
+     *
+     * @param props 属性
+     * - page: number
+     * - cviews: Base<any, any>[]
+     * @param layout 布局
+     * @param events 事件
+     * - changed: (cview, page) => void 页面改变时回调
+     * - floatPageChanged: (cview, floatPage) => void 滚动时回调（用于绑定其他联合滚动的控件）
+     */
     constructor({ props, layout, events = {} }) {
         super();
         this._props = Object.assign({ page: 0 }, props);

package/dist/components/rotating-view.js

@@ -1,27 +1,28 @@
 "use strict";
-/**
- * 创建一个可以旋转的视图。理论上来说，这个视图的布局必须是方形的。
- *
- * props:
- * - image 图片
- * - tintColor
- * - contentMode = 1
- * - cview 使用自定义的cview，上面两项将失效
- * - rps = 0.5 每秒转多少圈
- * - clockwise = true 是否顺时针旋转
- *
- * events:
- * - ready: cview => void 可以在ready事件中启动旋转
- *
- * methods:
- * - startRotating() 开始旋转
- * - stopRotating() 结束旋转，请注意旋转是不能立即结束的，必须等到动画归位
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RotatingView = void 0;
 const base_1 = require("./base");
 const single_views_1 = require("./single-views");
+/**
+ * 创建一个可以旋转的视图。理论上来说，这个视图的布局必须是方形的。
+ *
+ * @method startRotating() 开始旋转
+ * @method stopRotating() 结束旋转，请注意旋转是不能立即结束的，必须等到动画归位
+ */
 class RotatingView extends base_1.Base {
+    /**
+     *
+     * @param props 属性
+     * - image: UIImage
+     * - tintColor: UIColor
+     * - contentMode = 1
+     * - cview 使用自定义的cview，如果设置上面三项将失效
+     * - rps = 0.5 每秒转多少圈
+     * - clockwise = true 是否顺时针旋转
+     * @param layout 布局
+     * @param events 事件
+     * - ready?: (cview: RotatingView) => void 默认的ready事件是自动开始旋转；也可以手动指定其他效果
+     */
     constructor({ props, layout, events = {} }) {
         super();
         this._props = Object.assign({ contentMode: 1, rps: 0.5, clockwise: true }, props);
@@ -50,8 +51,12 @@ class RotatingView extends base_1.Base {
                 layout,
                 events: {
                     ready: sender => {
-                        if (events.ready)
+                        if (events.ready) {
                             events.ready(this);
+                        }
+                        else {
+                            this.startRotating();
+                        }
                     }
                 },
                 views: [this._innerView.definition]

package/dist/components/searchbar.js

@@ -1,28 +1,4 @@
 "use strict";
-/**
- * # CView SearchBar
- *
- * props
- *
- * - 读写 text: string
- * - style: number 搜索框的样式
- *   - 0: 取消按钮在输入框内，聚焦时显示取消按钮
- *   - 1: 取消按钮在输入框右侧，聚焦时会有左右移动的动画
- *   - 2: 取消按钮布局同 1，但是 placeholder 平时显示在中间，聚焦时才会移动到左边。
- *     如果使用此样式，建议每次 blur 的时候都清除 text
- * - accessoryCview: cview 请通过下面的事件来和 SearchBar 互相操作
- * - placeholder: string
- * - cancelText: string
- * - tintColor: \$color("systemLink")
- * - bgcolor: colors.searchBarBgcolor
- *
- * events
- *
- * - didBeginEditing: cview => void
- * - didEndEditing: cview => void
- * - changed: cview => void
- * - returned: cview => void
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchBar = void 0;
 const base_1 = require("./base");
@@ -30,7 +6,36 @@ const single_views_1 = require("./single-views");
 const colors_1 = require("../utils/colors");
 const l10n_1 = require("../utils/l10n");
 const uitools_1 = require("../utils/uitools");
+/**
+ * 搜索框
+ *
+ * 有三种样式可供选择，通过 style 属性设置
+ *
+ * @method focus() 聚焦
+ * @method blur() 失焦
+ * @property text: string 文本
+ */
 class SearchBar extends base_1.Base {
+    /**
+     *
+     * @param props 属性
+     * - text: string
+     * - style: number 搜索框的样式
+     *   - 0: 取消按钮在输入框内，聚焦时显示取消按钮
+     *   - 1: 取消按钮在输入框右侧，聚焦时会有左右移动的动画
+     *   - 2: 取消按钮布局同 1，但是 placeholder 平时显示在中间，聚焦时才会移动到左边。如果使用此样式，建议每次 blur 的时候都清除 text。
+     * - accessoryCview: cview 请通过下面的事件来和 SearchBar 互相操作
+     * - placeholder: string
+     * - cancelText: string
+     * - tintColor: \$color("systemLink")
+     * - bgcolor: colors.searchBarBgcolor
+     * @param layout 布局
+     * @param events 事件
+     * - didBeginEditing: cview => void
+     * - didEndEditing: cview => void
+     * - changed: cview => void
+     * - returned: cview => void
+     */
     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);

package/dist/components/sheet.js

@@ -1,8 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sheet = void 0;
+const cvid_1 = require("../utils/cvid");
+const UIModalPresentationStyle = {
+    automatic: -2,
+    pageSheet: 1,
+    formSheet: 2,
+    fullScreen: 0,
+    currentContext: 3,
+    custom: 4,
+    overFullScreen: 5,
+    overCurrentContext: 6,
+    popover: 7,
+    none: -1
+};
 /**
- * # cview Sheet
  *
  * 创建新的 UIViewController，主要用于 formSheet 和 pageSheet
  *
@@ -19,19 +31,6 @@ exports.Sheet = void 0;
  * - dismiss()
  *
  */
-const cvid_1 = require("../utils/cvid");
-const UIModalPresentationStyle = {
-    automatic: -2,
-    pageSheet: 1,
-    formSheet: 2,
-    fullScreen: 0,
-    currentContext: 3,
-    custom: 4,
-    overFullScreen: 5,
-    overCurrentContext: 6,
-    popover: 7,
-    none: -1
-};
 class Sheet {
     constructor({ presentMode = UIModalPresentationStyle.pageSheet, animated = true, interactiveDismissalDisabled = false, bgcolor = $color("secondarySurface"), cview, dismissalHandler }) {
         this._animated = animated;

package/dist/components/single-views.js

@@ -3,7 +3,7 @@
  * 实现单个视图的定义
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Runtime = exports.Code = exports.Chart = exports.Lottie = exports.Markdown = exports.Canvas = exports.Picker = exports.DatePicker = exports.Gradient = exports.Blur = exports.Matrix = exports.List = exports.Web = exports.Map = exports.Menu = exports.Tab = exports.Stack = exports.Scroll = exports.Video = exports.Image = exports.Text = exports.Stepper = exports.Gallery = exports.Progress = exports.Spinner = exports.Switch = exports.Slider = exports.Input = exports.Button = exports.Label = exports.MaskView = exports.ContentView = exports.RootView = exports.SingleView = void 0;
+exports.Runtime = exports.Code = exports.Chart = exports.Lottie = exports.Markdown = exports.Canvas = exports.Picker = exports.DatePicker = exports.Gradient = exports.Blur = exports.Matrix = exports.List = exports.Web = exports.Map = exports.Menu = exports.Tab = exports.Stack = exports.Scroll = exports.Video = exports.Image = exports.Text = exports.Stepper = exports.Gallery = exports.Progress = exports.Spinner = exports.Switch = exports.Slider = exports.Input = exports.Button = exports.Label = exports.MaskView = exports.ContentView = exports.ClearView = exports.SingleView = void 0;
 const base_1 = require("./base");
 class SingleView extends base_1.Base {
     constructor({ type, props, layout, events, views }) {
@@ -25,18 +25,18 @@ class SingleView extends base_1.Base {
     }
 }
 exports.SingleView = SingleView;
-class RootView extends SingleView {
-    constructor({ layout = $layout.fill, events, views }) {
+class ClearView extends SingleView {
+    constructor({ props, layout = $layout.fill, events, views }) {
         super({
             type: "view",
-            props: { bgcolor: $color("clear") },
+            props: Object.assign({}, props),
             layout,
             events,
             views
         });
     }
 }
-exports.RootView = RootView;
+exports.ClearView = ClearView;
 class ContentView extends SingleView {
     constructor({ props, layout = $layout.fillSafeArea, events = {}, views }) {
         super({

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

@@ -1,7 +1,4 @@
 "use strict";
-/**
- * # cview LoadingDualRing
- */
 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) {
@@ -33,7 +30,7 @@ class CanvasComponet extends base_1.Base {
                         ctx.setLineWidth(20);
                         ctx.setLineCap(1);
                         ctx.setLineJoin(1);
-                        ctx.addArc(radius / 2, radius / 2, radius / 2 - 20, this.startAngle, this.startAngle + (Math.PI * 2 * 1) / 4, true);
+                        ctx.addArc(radius / 2, radius / 2, radius / 2 - 20, this.startAngle, this.startAngle + (Math.PI * 2 * 1) / 4, false);
                         ctx.strokePath();
                     }
                 }
@@ -44,14 +41,24 @@ class CanvasComponet extends base_1.Base {
         this.view.ocValue().invoke("setNeedsDisplay");
     }
 }
+/**
+ * 两个圆环旋转的加载动画
+ *
+ * 这是一个示例组件，由于帧数有限而且不稳定，不建议在实际项目中使用。
+ *
+ */
 class DualRing extends base_1.Base {
+    /**
+     * @param colors 颜色（必须是2个），默认为 [$color("#f5542e"), $color("#f2c327")]
+     * @param layout 布局
+     */
     constructor({ colors = [$color("#f5542e"), $color("#f2c327")], layout }) {
         super();
         const interval = 1 / 60;
         this._defineView = () => {
             const canvas1 = new CanvasComponet({
                 tintColor: colors[0],
-                startAngle: (-Math.PI * 3) / 4
+                startAngle: -Math.PI * 3 / 4
             });
             const canvas2 = new CanvasComponet({
                 tintColor: colors[1],

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

@@ -1,7 +1,4 @@
 "use strict";
-/**
- * # cview LoadingWedges
- */
 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) {
@@ -44,7 +41,14 @@ class CanvasComponet extends base_1.Base {
         this.view.ocValue().invoke("setNeedsDisplay");
     }
 }
+/**
+ * 饼图加载动画, 4个颜色的饼图以不同的速度旋转，产生华丽的效果
+ */
 class Wedges extends base_1.Base {
+    /**
+     * @param colors 饼图颜色（必须是4个颜色），默认为 [$color("#f5542e"), $color("#f2c327"), $color("#008b6e"), $color("#00aede")]
+     * @param layout 布局
+     */
     constructor({ colors = [
         $color("#f5542e"),
         $color("#f2c327"),

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

@@ -1,22 +1,20 @@
 "use strict";
-/**
- * 安卓风格的加载指示器，基于Lottie实现
- *
- * Props:
- *
- * - id 可以重新指定 id，以供 list 或者 matrix 的 template 使用
- * - weight = 2
- * - diameter = 24
- * - color = $color("gray")
- * - bgcolor = $color("clear")
- *
- * Layout 默认居中
- *
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AndroidStyleSpinner = void 0;
 const base_1 = require("../base");
+/**
+ * 安卓风格的加载指示器, 基于Lottie实现, 效果是一个圆环一边旋转一边缩放。由于帧数有限，不建议在大视图上使用。
+ */
 class AndroidStyleSpinner extends base_1.Base {
+    /**
+     * @param props AndroidStyleSpinnerProps
+     *        - id?: string 可以重新指定 id，以供 list 或者 matrix 的 template 使用
+     *        - weight: number
+     *        - diameter: number
+     *        - color: UIColor, 默认 gray
+     *        - bgcolor: UIColor, 默认 clear
+     * @param layout 可选布局，默认居中
+     */
     constructor({ props, layout }) {
         super();
         this._props = Object.assign({ weight: 2, diameter: 24, color: $color("gray"), bgcolor: $color("clear") }, props);
@@ -232,7 +230,7 @@ class AndroidStyleSpinner extends base_1.Base {
                     circular: true,
                     json,
                     bgcolor: this._props.bgcolor,
-                    id: this.id
+                    id: this._props.id || this.id
                 },
                 layout: layout || ((make, view) => {
                     make.size.equalTo($size(this._props.diameter, this._props.diameter));

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

@@ -1,98 +1,4 @@
 "use strict";
-/**
- * # cview PreferenceListView_static
- *
- * 便捷的设置列表实现. 其所有 cell 均为静态 cell, 可以同时使用 list 控件的 props(除了 template, data)和 events(除了 didSelect), 同时具有独特方法 set(key, value), 以及独特方法 changed
- *
- * sections 为 Array, 里面的 section 定义:
- *
- * - title?: string 标题.
- * - rows: {type: string}[] 内容
- *
- * row定义:
- *
- * - 通用:
- *
- *     - type: string 类型. 包括'string', 'number', 'integer', 'stepper','boolean', 'slider', 'list', 'tab', 'interactive-info', 'info', 'link', 'action'
- *     - key?: string 键. 如没有则不会返回其值.
- *     - title?: string 标题
- *     - value?: any 在下面专项里详解.
- *     - titleColor?: $color = $color("primaryText") 标题颜色
- *
- * -  string:
- *
- *     - value?: string
- *     - placeholder?: string
- *     - textColor?: $color = $color("primaryText")
- *
- * -  number, integer:
- *
- *     - value?: number
- *     - placeholder?: string
- *     - textColor?: $color = $color("primaryText")
- *     - min?: number 最小值
- *     - max?: number 最大值
- *
- * - stepper:
- *
- *     - value?: number
- *     - placeholder?: string
- *     - min?: number 最小值
- *     - max?: number 最大值
- *
- * - boolean:
- *
- *     - value?: boolean
- *     - onColor?: $color = $color("#34C85A")
- *     - thumbColor
- *
- * - slider:
- *
- *     - value?: number 即 slider.value
- *     - decimal?: number = 1 精度
- *     - min?: number
- *     - max?: number
- *     - minColor?: $color = $color("systemLink")
- *     - maxColor?: $color
- *     - thumbColor?: $color
- *
- * - list:
- *
- *     - value?: number 即 index, -1 时为不选
- *     - items?: string[]
- *
- * - tab:
- *
- *     - value?: number 即 index, -1 时为不选
- *     - items?: string[]
- *
- * - info:
- *
- *     - value?: string
- *
- * - interactive-info:
- *
- *    - value?: string
- *    - copyable?: boolean = false
- *
- * - link:
- *
- *     - value?: string url
- *
- * - action:
- *
- *     - value?: function 点击后会执行的函数
- *     - destructive?: boolean = false 是否为危险动作，若是则为红色
- *
- * Methods:
- *
- * - set(key, value) 设定 key 对应的 value
- * - cview.values 获取全部的 values
- *
- * Events:
- *
- * - changed: values => {}
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PreferenceListView = exports.excludedTypes = exports.selectableTypes = void 0;
 const base_1 = require("./base");
@@ -695,6 +601,100 @@ class ActionCell extends Cell {
         return;
     }
 }
+/**
+ * # cview PreferenceListView_static
+ *
+ * 便捷的设置列表实现. 其所有 cell 均为静态 cell, 可以同时使用 list 控件的 props(除了 template, data)和 events(除了 didSelect), 同时具有独特方法 set(key, value), 以及独特方法 changed
+ *
+ * sections 为 Array, 里面的 section 定义:
+ *
+ * - title?: string 标题.
+ * - rows: {type: string}[] 内容
+ *
+ * row定义:
+ *
+ * - 通用:
+ *
+ *     - type: string 类型. 包括'string', 'number', 'integer', 'stepper','boolean', 'slider', 'list', 'tab', 'interactive-info', 'info', 'link', 'action'
+ *     - key?: string 键. 如没有则不会返回其值.
+ *     - title?: string 标题
+ *     - value?: any 在下面专项里详解.
+ *     - titleColor?: $color = $color("primaryText") 标题颜色
+ *
+ * -  string:
+ *
+ *     - value?: string
+ *     - placeholder?: string
+ *     - textColor?: $color = $color("primaryText")
+ *
+ * -  number, integer:
+ *
+ *     - value?: number
+ *     - placeholder?: string
+ *     - textColor?: $color = $color("primaryText")
+ *     - min?: number 最小值
+ *     - max?: number 最大值
+ *
+ * - stepper:
+ *
+ *     - value?: number
+ *     - placeholder?: string
+ *     - min?: number 最小值
+ *     - max?: number 最大值
+ *
+ * - boolean:
+ *
+ *     - value?: boolean
+ *     - onColor?: $color = $color("#34C85A")
+ *     - thumbColor
+ *
+ * - slider:
+ *
+ *     - value?: number 即 slider.value
+ *     - decimal?: number = 1 精度
+ *     - min?: number
+ *     - max?: number
+ *     - minColor?: $color = $color("systemLink")
+ *     - maxColor?: $color
+ *     - thumbColor?: $color
+ *
+ * - list:
+ *
+ *     - value?: number 即 index, -1 时为不选
+ *     - items?: string[]
+ *
+ * - tab:
+ *
+ *     - value?: number 即 index, -1 时为不选
+ *     - items?: string[]
+ *
+ * - info:
+ *
+ *     - value?: string
+ *
+ * - interactive-info:
+ *
+ *    - value?: string
+ *    - copyable?: boolean = false
+ *
+ * - link:
+ *
+ *     - value?: string url
+ *
+ * - action:
+ *
+ *     - value?: function 点击后会执行的函数
+ *     - destructive?: boolean = false 是否为危险动作，若是则为红色
+ *
+ * Methods:
+ *
+ * - set(key, value) 设定 key 对应的 value
+ * - cview.values 获取全部的 values
+ *
+ * Events:
+ *
+ * - changed: values => {}
+ */
 class PreferenceListView extends base_1.Base {
     constructor({ sections, props = {}, layout, events = {} }) {
         super();

package/dist/components/symbol-button.js

@@ -1,18 +1,4 @@
 "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");

package/dist/components/tabbar.js

@@ -1,28 +1,4 @@
 "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");
@@ -169,6 +145,30 @@ class ImageCell extends base_1.Base {
         this.view.get("image").remakeLayout(this.layouts.image_loosed);
     }
 }
+/**
+ * 本组件是为了仿制 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) 显示
+ */
 class TabBar extends base_1.Base {
     constructor({ props, events = {} }) {
         super();