jsbox-cview 1.1.1 → 1.2.0

package/components/custom-navigation-bar.ts

@@ -97,7 +97,7 @@ export interface NavigationBarProps {
 }
 
 interface BarButtonItem {
-  cview?: Base<AllUIView, UiTypes.AllViewOptions>;
+  cview?: Base<any, any>;
   width?: number;
   title?: string;
   symbol?: string;

package/components/dynamic-preference-listview.ts

@@ -26,111 +26,25 @@
  */
 
 import { Base } from "./base";
+import { 
+  PreferenceSection,
+  PrefsRow,
+  PrefsRowString,
+  PrefsRowNumber,
+  PrefsRowInteger,
+  PrefsRowStepper,
+  PrefsRowBoolean,
+  PrefsRowSlider,
+  PrefsRowList,
+  PrefsRowTab,
+  PrefsRowInfo,
+  PrefsRowInteractiveInfo,
+  PrefsRowLink,
+  PrefsRowAction,
+  selectableTypes,
+  excludedTypes
+ } from "./static-preference-listview";
 
-interface PreferenceSection {
-  title: string;
-  rows: PrefsRow[]
-}
-
-type PreferenceCellTypes = "string" | "number" | "integer" | "stepper" | "boolean" | "slider" | "list" | "tab" | "info" | "link" | "action";
-
-type PrefsRow = PrefsRowString | PrefsRowNumber | PrefsRowInteger | PrefsRowStepper | PrefsRowBoolean | PrefsRowSlider | PrefsRowList | PrefsRowTab | PrefsRowInfo | PrefsRowLink | PrefsRowAction;
-
-interface PrefsRowBase {
-  type: PreferenceCellTypes;
-  key?: string;
-  title?: string;
-  titleColor?: UIColor;
-  changedEvent?: () => void;
-}
-
-interface PrefsRowString extends PrefsRowBase {
-  type: "string";
-  value?: string;
-  placeholder?: string;
-  textColor?: UIColor;
-}
-
-interface PrefsRowNumber extends PrefsRowBase {
-  type: "number";
-  value?: number;
-  placeholder?: string;
-  textColor?: UIColor;
-  min?: number;
-  max?: number;
-}
-
-interface PrefsRowInteger extends PrefsRowBase {
-  type: "integer";
-  value?: number;
-  placeholder?: string;
-  textColor?: UIColor;
-  min?: number;
-  max?: number;
-}
-
-interface PrefsRowStepper extends PrefsRowBase {
-  type: "stepper";
-  value?: number;
-  min?: number;
-  max?: number;
-}
-
-interface PrefsRowBoolean extends PrefsRowBase {
-  type: "boolean";
-  value?: boolean;
-  onColor?: UIColor;
-  thumbColor?: UIColor;
-}
-
-interface PrefsRowSlider extends PrefsRowBase {
-  type: "slider";
-  value?: number;
-  min?: number;
-  max?: number;
-  decimal?: number;
-  minColor?: UIColor;
-  maxColor?: UIColor;
-  thumbColor?: UIColor;
-}
-
-interface PrefsRowList extends PrefsRowBase {
-  type: "list";
-  value?: number;
-  items: string[];
-}
-
-interface PrefsRowTab extends PrefsRowBase {
-  type: "tab";
-  value?: number;
-  items: string[];
-}
-
-interface PrefsRowInfo extends PrefsRowBase {
-  type: "info";
-  value?: string;
-}
-
-interface PrefsRowLink extends PrefsRowBase {
-  type: "link";
-  value?: string;
-}
-
-interface PrefsRowAction extends PrefsRowBase {
-  type: "action";
-  value?: () => void;
-  destructive?: boolean;
-}
-
-const selectableTypes = [
-  "string",
-  "number",
-  "integer",
-  "stepper",
-  "list",
-  "link",
-  "action"
-];
 
 interface CunstomProps extends UiTypes.ListProps {
   stringLeftInset?: number;
@@ -468,6 +382,31 @@ export class DynamicPreferenceListView extends Base<UIListView, UiTypes.ListOpti
                 });
                 break;
               }
+              case "interactive-info": {
+                if (row.copyable) {
+                  $ui.alert({
+                    title: row.title,
+                    message: row.value,
+                    actions: [
+                      {
+                        title: "取消"
+                      },
+                      {
+                        title: "复制",
+                        handler: () => {
+                          $clipboard.text = row.value || "";
+                        }
+                      }
+                    ]
+                  })
+                } else {
+                  $ui.alert({
+                    title: row.title,
+                    message: row.value
+                  });
+                }
+                break;
+              }
               case "link": {
                 if (row.value) $safari.open({ url: row.value });
                 break;
@@ -634,6 +573,14 @@ export class DynamicPreferenceListView extends Base<UIListView, UiTypes.ListOpti
             };
             break;
           }
+          case "interactive-info": {
+            data.label_info_link = {
+              hidden: false,
+              textColor: $color("secondaryText"),
+              text: n.value
+            };
+            break;
+          }
           case "link": {
             data.label_info_link = {
               hidden: false,
@@ -669,7 +616,6 @@ export class DynamicPreferenceListView extends Base<UIListView, UiTypes.ListOpti
 
   get values() {
     const values: { [key: string]: any } = {};
-    const excludedTypes = ["action", "info", "link"];
     this._sections.forEach(section => {
       section.rows.forEach(row => {
         if (row.key && !excludedTypes.includes(row.type)) {

package/components/static-preference-listview.ts

@@ -12,7 +12,7 @@
  * 
  * - 通用:
  * 
- *     - type: string 类型. 包括'string', 'number', 'integer', 'stepper','boolean', 'slider', 'list', 'tab','info', 'link', 'action'
+ *     - type: string 类型. 包括'string', 'number', 'integer', 'stepper','boolean', 'slider', 'list', 'tab', 'interactive-info', 'info', 'link', 'action'
  *     - key?: string 键. 如没有则不会返回其值.
  *     - title?: string 标题
  *     - value?: any 在下面专项里详解.
@@ -69,6 +69,11 @@
  * 
  *     - value?: string
  * 
+ * - interactive-info:
+ * 
+ *    - value?: string
+ *    - copyable?: boolean = false
+ * 
  * - link:
  * 
  *     - value?: string url
@@ -91,14 +96,14 @@
 import { Base } from "./base";
 import { getTextWidth } from "../utils/uitools";
 
-type PreferenceCellTypes = "string" | "number" | "integer" | "stepper" | "boolean" | "slider" | "list" | "tab" | "info" | "link" | "action";
+type PreferenceCellTypes = "string" | "number" | "integer" | "stepper" | "boolean" | "slider" | "list" | "tab" | "info" | "interactive-info" | "link" | "action";
 
 export interface PreferenceSection {
   title: string;
   rows: PrefsRow[]
 }
 
-type PrefsRow = PrefsRowString | PrefsRowNumber | PrefsRowInteger | PrefsRowStepper | PrefsRowBoolean | PrefsRowSlider | PrefsRowList | PrefsRowTab | PrefsRowInfo | PrefsRowLink | PrefsRowAction;
+export type PrefsRow = PrefsRowString | PrefsRowNumber | PrefsRowInteger | PrefsRowStepper | PrefsRowBoolean | PrefsRowSlider | PrefsRowList | PrefsRowTab | PrefsRowInfo | PrefsRowInteractiveInfo | PrefsRowLink | PrefsRowAction;
 
 interface PrefsRowBase {
   type: PreferenceCellTypes;
@@ -108,14 +113,14 @@ interface PrefsRowBase {
   changedEvent?: () => void;
 }
 
-interface PrefsRowString extends PrefsRowBase {
+export interface PrefsRowString extends PrefsRowBase {
   type: "string";
   value?: string;
   placeholder?: string;
   textColor?: UIColor;
 }
 
-interface PrefsRowNumber extends PrefsRowBase {
+export interface PrefsRowNumber extends PrefsRowBase {
   type: "number";
   value?: number;
   placeholder?: string;
@@ -124,7 +129,7 @@ interface PrefsRowNumber extends PrefsRowBase {
   max?: number;
 }
 
-interface PrefsRowInteger extends PrefsRowBase {
+export interface PrefsRowInteger extends PrefsRowBase {
   type: "integer";
   value?: number;
   placeholder?: string;
@@ -133,21 +138,21 @@ interface PrefsRowInteger extends PrefsRowBase {
   max?: number;
 }
 
-interface PrefsRowStepper extends PrefsRowBase {
+export interface PrefsRowStepper extends PrefsRowBase {
   type: "stepper";
   value?: number;
   min?: number;
   max?: number;
 }
 
-interface PrefsRowBoolean extends PrefsRowBase {
+export interface PrefsRowBoolean extends PrefsRowBase {
   type: "boolean";
   value?: boolean;
   onColor?: UIColor;
   thumbColor?: UIColor;
 }
 
-interface PrefsRowSlider extends PrefsRowBase {
+export interface PrefsRowSlider extends PrefsRowBase {
   type: "slider";
   value?: number;
   min?: number;
@@ -158,37 +163,61 @@ interface PrefsRowSlider extends PrefsRowBase {
   thumbColor?: UIColor;
 }
 
-interface PrefsRowList extends PrefsRowBase {
+export interface PrefsRowList extends PrefsRowBase {
   type: "list";
   value?: number;
   items: string[];
 }
 
-interface PrefsRowTab extends PrefsRowBase {
+export interface PrefsRowTab extends PrefsRowBase {
   type: "tab";
   value?: number;
   items: string[];
 }
 
-interface PrefsRowInfo extends PrefsRowBase {
+export interface PrefsRowInfo extends PrefsRowBase {
   type: "info";
   value?: string;
 }
 
-interface PrefsRowLink extends PrefsRowBase {
+export interface PrefsRowInteractiveInfo extends PrefsRowBase {
+  type: "interactive-info";
+  value?: string;
+  copyable?: boolean;
+}
+
+export interface PrefsRowLink extends PrefsRowBase {
   type: "link";
   value?: string;
 }
 
-interface PrefsRowAction extends PrefsRowBase {
+export interface PrefsRowAction extends PrefsRowBase {
   type: "action";
   value?: () => void;
   destructive?: boolean;
 }
 
+export const selectableTypes = [
+  "string",
+  "number",
+  "integer",
+  "stepper",
+  "list",
+  "interactive-info",
+  "link",
+  "action"
+];
+
+export const excludedTypes = [
+  "info",
+  "interactive-info",
+  "link",
+  "action"
+];
+
 type PreferenceValues = { [key: string]: any };
 
-type AllCells = StringCell | NumberCell | IntegerCell | StepperCell | BooleanCell | SliderCell | ListCell | TabCell | InfoCell | LinkCell | ActionCell;
+type AllCells = StringCell | NumberCell | IntegerCell | StepperCell | BooleanCell | SliderCell | ListCell | TabCell | InteractiveInfoCell | InfoCell | LinkCell | ActionCell;
 
 abstract class Cell extends Base<UIView, UiTypes.ViewOptions> {
   abstract _type: string;
@@ -221,15 +250,6 @@ abstract class Cell extends Base<UIView, UiTypes.ViewOptions> {
     this._titleColor = titleColor;
     this._changedEvent = changedEvent;
     this._values = values;
-    const selectableTypes = [
-      "string",
-      "number",
-      "integer",
-      "stepper",
-      "list",
-      "link",
-      "action"
-    ];
     this._defineView = () => {
       return {
         type: "view",
@@ -743,6 +763,39 @@ class InfoCell extends Cell {
   }
 }
 
+class InteractiveInfoCell extends Cell {
+  readonly _type = "interactive-info";
+  _copyable: boolean;
+  constructor(props: PrefsRowInteractiveInfo, values: PreferenceValues) {
+    super(props, values);
+    const { copyable = false } = props;
+    this._copyable = copyable;
+  }
+
+  _defineValueView(): UiTypes.LabelOptions {
+    return {
+      type: "label",
+      props: {
+        id: "label",
+        text: this._value,
+        textColor: $color("secondaryText"),
+        align: $align.right
+      },
+      layout: (make, view) => {
+        make.top.bottom.inset(0);
+        make.left.equalTo(view.prev.right).inset(10);
+        make.right.inset(15);
+      }
+    };
+  }
+
+  _handleValue(text: string) {
+    const label = this.view.get("label") as UILabelView;
+    label.text = text;
+    return text;
+  }
+}
+
 class LinkCell extends Cell {
   readonly _type = "link";
   constructor(props: PrefsRowLink, values: PreferenceValues) {
@@ -850,7 +903,6 @@ export class PreferenceListView extends Base<UIListView, UiTypes.ListOptions> {
     super();
     this._sections = sections;
     this._values = {};
-    const excludedTypes = ["action", "info", "link"];
     sections.forEach(section => {
       section.rows.forEach(row => {
         if (row.key && !excludedTypes.includes(row.type)) {
@@ -931,6 +983,31 @@ export class PreferenceListView extends Base<UIListView, UiTypes.ListOptions> {
                 });
                 break;
               }
+              case "interactive-info": {
+                if (cell._copyable) {
+                  $ui.alert({
+                    title: cell._title,
+                    message: cell.value,
+                    actions: [
+                      {
+                        title: "取消"
+                      },
+                      {
+                        title: "复制",
+                        handler: () => {
+                          $clipboard.text = cell.value;
+                        }
+                      }
+                    ]
+                  })
+                } else {
+                  $ui.alert({
+                    title: cell._title,
+                    message: cell.value
+                  });
+                }
+                break;
+              }
               case "link": {
                 $safari.open({ url: cell.value });
                 break;
@@ -968,6 +1045,8 @@ export class PreferenceListView extends Base<UIListView, UiTypes.ListOptions> {
         return new TabCell(props, this._values);
       case "info":
         return new InfoCell(props, this._values);
+      case "interactive-info":
+        return new InteractiveInfoCell(props, this._values);
       case "link":
         return new LinkCell(props, this._values);
       case "action":

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

@@ -28,15 +28,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DynamicPreferenceListView = void 0;
 const base_1 = require("./base");
-const selectableTypes = [
-    "string",
-    "number",
-    "integer",
-    "stepper",
-    "list",
-    "link",
-    "action"
-];
+const static_preference_listview_1 = require("./static-preference-listview");
 class DynamicPreferenceListView extends base_1.Base {
     constructor({ sections, props, layout, events = {} }) {
         super();
@@ -266,7 +258,7 @@ class DynamicPreferenceListView extends base_1.Base {
                 events: {
                     didSelect: (sender, indexPath, data) => {
                         const row = this._sections[indexPath.section].rows[indexPath.row];
-                        if (!selectableTypes.includes(row.type))
+                        if (!static_preference_listview_1.selectableTypes.includes(row.type))
                             return;
                         switch (row.type) {
                             case "string": {
@@ -334,6 +326,32 @@ class DynamicPreferenceListView extends base_1.Base {
                                 });
                                 break;
                             }
+                            case "interactive-info": {
+                                if (row.copyable) {
+                                    $ui.alert({
+                                        title: row.title,
+                                        message: row.value,
+                                        actions: [
+                                            {
+                                                title: "取消"
+                                            },
+                                            {
+                                                title: "复制",
+                                                handler: () => {
+                                                    $clipboard.text = row.value || "";
+                                                }
+                                            }
+                                        ]
+                                    });
+                                }
+                                else {
+                                    $ui.alert({
+                                        title: row.title,
+                                        message: row.value
+                                    });
+                                }
+                                break;
+                            }
                             case "link": {
                                 if (row.value)
                                     $safari.open({ url: row.value });
@@ -393,7 +411,7 @@ class DynamicPreferenceListView extends base_1.Base {
     _map(sections) {
         function generateDefaultRow(options) {
             return {
-                bgview: { hidden: selectableTypes.includes(options.type) }, // bgview其实是用于调整selectable, 显示此视图就没有highlight效果
+                bgview: { hidden: static_preference_listview_1.selectableTypes.includes(options.type) }, // bgview其实是用于调整selectable, 显示此视图就没有highlight效果
                 title: {
                     text: options.title,
                     textColor: options.titleColor || $color("primaryText")
@@ -502,6 +520,14 @@ class DynamicPreferenceListView extends base_1.Base {
                         };
                         break;
                     }
+                    case "interactive-info": {
+                        data.label_info_link = {
+                            hidden: false,
+                            textColor: $color("secondaryText"),
+                            text: n.value
+                        };
+                        break;
+                    }
                     case "link": {
                         data.label_info_link = {
                             hidden: false,
@@ -534,10 +560,9 @@ class DynamicPreferenceListView extends base_1.Base {
     }
     get values() {
         const values = {};
-        const excludedTypes = ["action", "info", "link"];
         this._sections.forEach(section => {
             section.rows.forEach(row => {
-                if (row.key && !excludedTypes.includes(row.type)) {
+                if (row.key && !static_preference_listview_1.excludedTypes.includes(row.type)) {
                     values[row.key] = row.value;
                 }
             });

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

@@ -13,7 +13,7 @@
  *
  * - 通用:
  *
- *     - type: string 类型. 包括'string', 'number', 'integer', 'stepper','boolean', 'slider', 'list', 'tab','info', 'link', 'action'
+ *     - type: string 类型. 包括'string', 'number', 'integer', 'stepper','boolean', 'slider', 'list', 'tab', 'interactive-info', 'info', 'link', 'action'
  *     - key?: string 键. 如没有则不会返回其值.
  *     - title?: string 标题
  *     - value?: any 在下面专项里详解.
@@ -70,6 +70,11 @@
  *
  *     - value?: string
  *
+ * - interactive-info:
+ *
+ *    - value?: string
+ *    - copyable?: boolean = false
+ *
  * - link:
  *
  *     - value?: string url
@@ -89,9 +94,25 @@
  * - changed: values => {}
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PreferenceListView = void 0;
+exports.PreferenceListView = exports.excludedTypes = exports.selectableTypes = void 0;
 const base_1 = require("./base");
 const uitools_1 = require("../utils/uitools");
+exports.selectableTypes = [
+    "string",
+    "number",
+    "integer",
+    "stepper",
+    "list",
+    "interactive-info",
+    "link",
+    "action"
+];
+exports.excludedTypes = [
+    "info",
+    "interactive-info",
+    "link",
+    "action"
+];
 class Cell extends base_1.Base {
     constructor({ key, title, value, titleColor = $color("primaryText"), changedEvent }, values) {
         super();
@@ -101,20 +122,11 @@ class Cell extends base_1.Base {
         this._titleColor = titleColor;
         this._changedEvent = changedEvent;
         this._values = values;
-        const selectableTypes = [
-            "string",
-            "number",
-            "integer",
-            "stepper",
-            "list",
-            "link",
-            "action"
-        ];
         this._defineView = () => {
             return {
                 type: "view",
                 props: {
-                    selectable: selectableTypes.includes(this._type),
+                    selectable: exports.selectableTypes.includes(this._type),
                     id: this.id
                 },
                 layout: $layout.fill,
@@ -577,6 +589,35 @@ class InfoCell extends Cell {
         return text;
     }
 }
+class InteractiveInfoCell extends Cell {
+    constructor(props, values) {
+        super(props, values);
+        this._type = "interactive-info";
+        const { copyable = false } = props;
+        this._copyable = copyable;
+    }
+    _defineValueView() {
+        return {
+            type: "label",
+            props: {
+                id: "label",
+                text: this._value,
+                textColor: $color("secondaryText"),
+                align: $align.right
+            },
+            layout: (make, view) => {
+                make.top.bottom.inset(0);
+                make.left.equalTo(view.prev.right).inset(10);
+                make.right.inset(15);
+            }
+        };
+    }
+    _handleValue(text) {
+        const label = this.view.get("label");
+        label.text = text;
+        return text;
+    }
+}
 class LinkCell extends Cell {
     constructor(props, values) {
         super(props, values);
@@ -659,10 +700,9 @@ class PreferenceListView extends base_1.Base {
         super();
         this._sections = sections;
         this._values = {};
-        const excludedTypes = ["action", "info", "link"];
         sections.forEach(section => {
             section.rows.forEach(row => {
-                if (row.key && !excludedTypes.includes(row.type)) {
+                if (row.key && !exports.excludedTypes.includes(row.type)) {
                     this._values[row.key] = row.value;
                 }
             });
@@ -739,6 +779,32 @@ class PreferenceListView extends base_1.Base {
                                 });
                                 break;
                             }
+                            case "interactive-info": {
+                                if (cell._copyable) {
+                                    $ui.alert({
+                                        title: cell._title,
+                                        message: cell.value,
+                                        actions: [
+                                            {
+                                                title: "取消"
+                                            },
+                                            {
+                                                title: "复制",
+                                                handler: () => {
+                                                    $clipboard.text = cell.value;
+                                                }
+                                            }
+                                        ]
+                                    });
+                                }
+                                else {
+                                    $ui.alert({
+                                        title: cell._title,
+                                        message: cell.value
+                                    });
+                                }
+                                break;
+                            }
                             case "link": {
                                 $safari.open({ url: cell.value });
                                 break;
@@ -775,6 +841,8 @@ class PreferenceListView extends base_1.Base {
                 return new TabCell(props, this._values);
             case "info":
                 return new InfoCell(props, this._values);
+            case "interactive-info":
+                return new InteractiveInfoCell(props, this._values);
             case "link":
                 return new LinkCell(props, this._values);
             case "action":

package/dist/test/dynamic-preference-listview.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const dynamic_preference_listview_1 = require("../components/dynamic-preference-listview");
+const sections = [
+    {
+        title: "Section 1",
+        rows: [
+            {
+                type: "string",
+                title: "string",
+                key: "string",
+                value: "测试一号测试二号测试三号测试四号测试五号测试六号"
+            },
+            {
+                type: "number",
+                title: "number",
+                key: "number",
+                value: 1111.1
+            },
+            {
+                type: "integer",
+                title: "integer",
+                key: "integer",
+                value: 1111
+            },
+            {
+                type: "stepper",
+                title: "stepper",
+                key: "stepper",
+                value: 2,
+                min: 2,
+                max: 5
+            }
+        ]
+    },
+    {
+        title: "Section 2",
+        rows: [
+            {
+                type: "boolean",
+                title: "boolean",
+                key: "boolean",
+                value: true
+            },
+            {
+                type: "slider",
+                title: "slider",
+                key: "slider",
+                value: 1,
+                decimal: 0,
+                min: 0,
+                max: 100
+            },
+            {
+                type: "list",
+                title: "list",
+                key: "list",
+                items: ["测试一号", "测试bbb"],
+                value: 0
+            },
+            {
+                type: "tab",
+                title: "tab",
+                key: "tab",
+                items: ["测试aaa", "测试bbb"],
+                value: 0
+            }
+        ]
+    },
+    {
+        title: "Section 3",
+        rows: [
+            {
+                type: "info",
+                title: "info",
+                value: "this is info"
+            },
+            {
+                type: "link",
+                title: "link",
+                value: "https://apple.com"
+            },
+            {
+                type: "action",
+                title: "action",
+                value: () => console.info(0)
+            }
+        ]
+    }
+];
+const v = new dynamic_preference_listview_1.DynamicPreferenceListView({
+    props: { data: [] },
+    sections: sections,
+    layout: $layout.fill,
+    events: {
+        changed: (values) => console.info(values)
+    }
+});
+$ui.render({
+    props: {
+        title: "",
+        navButtons: [
+            {
+                symbol: "plus",
+                handler: () => {
+                    sections.push({
+                        title: "Section " + (sections.length + 1),
+                        rows: [
+                            {
+                                type: "interactive-info",
+                                title: "interactive-info",
+                                key: "interactive-info",
+                                value: "测试一号测试二号测试三号测试四号测试五号测试六号"
+                            },
+                            {
+                                type: "interactive-info",
+                                title: "interactive-info2",
+                                key: "interactive-info2",
+                                value: "测试一号测试二号测试三号测试四号测试五号测试六号",
+                                copyable: true
+                            }
+                        ]
+                    });
+                    v.sections = sections;
+                }
+            }
+        ]
+    },
+    views: [v.definition]
+});

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

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const static_preference_listview_1 = require("../components/static-preference-listview");
+const sections = [
+    {
+        title: "Section 1",
+        rows: [
+            {
+                type: "string",
+                title: "string",
+                key: "string",
+                value: "测试一号测试二号测试三号测试四号测试五号测试六号"
+            },
+            {
+                type: "number",
+                title: "number",
+                key: "number",
+                value: 1111.1
+            },
+            {
+                type: "integer",
+                title: "integer",
+                key: "integer",
+                value: 1111
+            },
+            {
+                type: "stepper",
+                title: "stepper",
+                key: "stepper",
+                value: 2,
+                min: 2,
+                max: 5
+            }
+        ]
+    },
+    {
+        title: "Section 2",
+        rows: [
+            {
+                type: "boolean",
+                title: "boolean",
+                key: "boolean",
+                value: true
+            },
+            {
+                type: "slider",
+                title: "slider",
+                key: "slider",
+                value: 1,
+                decimal: 0,
+                min: 0,
+                max: 100
+            },
+            {
+                type: "list",
+                title: "list",
+                key: "list",
+                items: ["测试一号", "测试bbb"],
+                value: 0
+            },
+            {
+                type: "tab",
+                title: "tab",
+                key: "tab",
+                items: ["测试aaa", "测试bbb"],
+                value: 0
+            }
+        ]
+    },
+    {
+        title: "Section 3",
+        rows: [
+            {
+                type: "info",
+                title: "info",
+                value: "this is info"
+            },
+            {
+                type: "link",
+                title: "link",
+                value: "https://apple.com"
+            },
+            {
+                type: "action",
+                title: "action",
+                value: () => console.info(0)
+            }
+        ]
+    },
+    {
+        title: "Section 4",
+        rows: [
+            {
+                type: "interactive-info",
+                title: "interactive-info",
+                key: "interactive-info",
+                value: "测试一号测试二号测试三号测试四号测试五号测试六号"
+            },
+            {
+                type: "interactive-info",
+                title: "interactive-info2",
+                key: "interactive-info2",
+                value: "测试一号测试二号测试三号测试四号测试五号测试六号",
+                copyable: true
+            }
+        ]
+    }
+];
+const v = new static_preference_listview_1.PreferenceListView({
+    props: { data: [] },
+    sections: sections,
+    layout: $layout.fill,
+    events: {
+        changed: (values) => console.info(values)
+    }
+});
+$ui.render({
+    props: {
+        title: "",
+        navButtons: [
+            {
+                symbol: "plus",
+                handler: () => {
+                }
+            }
+        ]
+    },
+    views: [v.definition]
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsbox-cview",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "为 JSBox 设计的微型框架",
   "repository": {
     "type": "git",
@@ -18,7 +18,7 @@
   "license": "MIT",
   "devDependencies": {
     "@types/node": "^20.11.17",
-    "ctix": "^2.3.0",
+    "browserify": "^17.0.0",
     "jsbox-types": "^1.0.19"
   }
 }

package/test/dynamic-preference-listview.ts

@@ -0,0 +1,131 @@
+import { DynamicPreferenceListView } from "../components/dynamic-preference-listview";
+import { PreferenceSection } from "../components/static-preference-listview";
+
+const sections: PreferenceSection[] = [
+  {
+    title: "Section 1",
+    rows: [
+      {
+        type: "string",
+        title: "string",
+        key: "string",
+        value: "测试一号测试二号测试三号测试四号测试五号测试六号"
+      },
+      {
+        type: "number",
+        title: "number",
+        key: "number",
+        value: 1111.1
+      },
+      {
+        type: "integer",
+        title: "integer",
+        key: "integer",
+        value: 1111
+      },
+      {
+        type: "stepper",
+        title: "stepper",
+        key: "stepper",
+        value: 2,
+        min: 2,
+        max: 5
+      }
+    ]
+  },
+  {
+    title: "Section 2",
+    rows: [
+      {
+        type: "boolean",
+        title: "boolean",
+        key: "boolean",
+        value: true
+      },
+      {
+        type: "slider",
+        title: "slider",
+        key: "slider",
+        value: 1,
+        decimal: 0,
+        min: 0,
+        max: 100
+      },
+      {
+        type: "list",
+        title: "list",
+        key: "list",
+        items: ["测试一号", "测试bbb"],
+        value: 0
+      },
+      {
+        type: "tab",
+        title: "tab",
+        key: "tab",
+        items: ["测试aaa", "测试bbb"],
+        value: 0
+      }
+    ]
+  },
+  {
+    title: "Section 3",
+    rows: [
+      {
+        type: "info",
+        title: "info",
+        value: "this is info"
+      },
+      {
+        type: "link",
+        title: "link",
+        value: "https://apple.com"
+      },
+      {
+        type: "action",
+        title: "action",
+        value: () => console.info(0)
+      }
+    ]
+  }
+]
+const v = new DynamicPreferenceListView({
+  props: {data: []},
+  sections: sections,
+  layout: $layout.fill,
+  events: {
+    changed: (values: any) => console.info(values)
+  }
+});
+
+$ui.render({
+  props: {
+    title: "",
+    navButtons: [
+      {
+        symbol: "plus",
+        handler: () => {
+          sections.push({
+            title: "Section " + (sections.length + 1),
+            rows: [
+              {
+                type: "interactive-info",
+                title: "interactive-info",
+                key: "interactive-info",
+                value: "测试一号测试二号测试三号测试四号测试五号测试六号"
+              },
+              {
+                type: "interactive-info",
+                title: "interactive-info2",
+                key: "interactive-info2",
+                value: "测试一号测试二号测试三号测试四号测试五号测试六号",
+                copyable: true
+              }
+            ]
+          })
+          v.sections = sections
+        }
+      }
+    ]
+  },
+  views: [v.definition]
+});

package/test/static-preference-listview.ts

@@ -0,0 +1,129 @@
+import { PreferenceListView, PreferenceSection } from "../components/static-preference-listview";
+const sections: PreferenceSection[] = [
+  {
+    title: "Section 1",
+    rows: [
+      {
+        type: "string",
+        title: "string",
+        key: "string",
+        value: "测试一号测试二号测试三号测试四号测试五号测试六号"
+      },
+      {
+        type: "number",
+        title: "number",
+        key: "number",
+        value: 1111.1
+      },
+      {
+        type: "integer",
+        title: "integer",
+        key: "integer",
+        value: 1111
+      },
+      {
+        type: "stepper",
+        title: "stepper",
+        key: "stepper",
+        value: 2,
+        min: 2,
+        max: 5
+      }
+    ]
+  },
+  {
+    title: "Section 2",
+    rows: [
+      {
+        type: "boolean",
+        title: "boolean",
+        key: "boolean",
+        value: true
+      },
+      {
+        type: "slider",
+        title: "slider",
+        key: "slider",
+        value: 1,
+        decimal: 0,
+        min: 0,
+        max: 100
+      },
+      {
+        type: "list",
+        title: "list",
+        key: "list",
+        items: ["测试一号", "测试bbb"],
+        value: 0
+      },
+      {
+        type: "tab",
+        title: "tab",
+        key: "tab",
+        items: ["测试aaa", "测试bbb"],
+        value: 0
+      }
+    ]
+  },
+  {
+    title: "Section 3",
+    rows: [
+      {
+        type: "info",
+        title: "info",
+        value: "this is info"
+      },
+      {
+        type: "link",
+        title: "link",
+        value: "https://apple.com"
+      },
+      {
+        type: "action",
+        title: "action",
+        value: () => console.info(0)
+      }
+    ]
+  },
+  {
+    title: "Section 4",
+    rows: [
+      {
+        type: "interactive-info",
+        title: "interactive-info",
+        key: "interactive-info",
+        value: "测试一号测试二号测试三号测试四号测试五号测试六号"
+      },
+      {
+        type: "interactive-info",
+        title: "interactive-info2",
+        key: "interactive-info2",
+        value: "测试一号测试二号测试三号测试四号测试五号测试六号",
+        copyable: true
+      }
+    ]
+  }
+]
+const v = new PreferenceListView({
+  props: {data: []},
+  sections: sections,
+  layout: $layout.fill,
+  events: {
+    changed: (values: any) => console.info(values)
+  }
+});
+
+$ui.render({
+  props: {
+    title: "",
+    navButtons: [
+      {
+        symbol: "plus",
+        handler: () => {
+          
+        }
+      }
+    ]
+  },
+  views: [v.definition]
+});

package/tsconfig.json

@@ -114,10 +114,10 @@
     "utils/*.ts",
     "components/*.ts",
     "components/*/*.ts",
-    "controller/*.ts"
+    "controller/*.ts",
+    "test/*.ts"
   ],
   "files": [
-    "test.ts",
     "index.ts"
   ]
 }

package/dist/test.js

@@ -1 +0,0 @@
-"use strict";