jsbox-cview 1.5.26 → 1.5.28

package/components/dynamic-preference-listview.ts

@@ -14,6 +14,7 @@ import {
   PrefsRowInfo,
   PrefsRowInteractiveInfo,
   PrefsRowLink,
+  PrefsRowSymbolAction,
   PrefsRowAction,
   selectableTypes,
   excludedTypes,
@@ -25,6 +26,7 @@ interface CunstomProps extends UiTypes.ListProps {
   infoAndLinkLeftInset?: number;
   sliderWidth?: number;
   tabWidth?: number;
+  symbolSizeForSymbolAction?: JBSize;
 }
 
 interface RequiredCunstomProps extends UiTypes.ListProps {
@@ -32,6 +34,7 @@ interface RequiredCunstomProps extends UiTypes.ListProps {
   infoAndLinkLeftInset: number;
   sliderWidth: number;
   tabWidth: number;
+  symbolSizeForSymbolAction: JBSize;
 }
 
 /**
@@ -55,6 +58,7 @@ interface RequiredCunstomProps extends UiTypes.ListProps {
  * - infoAndLinkLeftInset?: number = 120 作用于 info, link
  * - sliderWidth?: number = 200 作用于 slider
  * - tabWidth?: number = 200 作用于 tab
+ * - symbolSizeForSymbolAction?: size = $size(24, 24) 作用于symbol-action
  *   注意以上的修改是应用于 template, 而不是应用于单个 cell 的
  *
  * 独特方法:
@@ -91,6 +95,7 @@ export class DynamicPreferenceListView extends Base<
       infoAndLinkLeftInset: 120,
       sliderWidth: 200,
       tabWidth: 200,
+      symbolSizeForSymbolAction: $size(24, 24),
       ...props,
     };
     this._layout = layout;
@@ -317,6 +322,17 @@ export class DynamicPreferenceListView extends Base<
                       make.right.inset(0);
                     },
                   },
+                  {
+                    type: "image",
+                    props: {
+                      id: "symbol",
+                    },
+                    layout: (make, view) => {
+                      make.centerY.equalTo(view.super);
+                      make.size.equalTo(this._props.symbolSizeForSymbolAction);
+                      make.right.inset(0);
+                    },
+                  },
                 ],
               },
             ],
@@ -433,6 +449,10 @@ export class DynamicPreferenceListView extends Base<
                 if (row.value) $safari.open({ url: row.value });
                 break;
               }
+              case "symbol-action": {
+                if (row.value) row.value();
+                break;
+              }
               case "action": {
                 if (row.value) row.value();
                 break;
@@ -499,6 +519,7 @@ export class DynamicPreferenceListView extends Base<
         switch: { hidden: true }, // 用于boolean
         tab: { hidden: true }, // 用于tab
         label_info_link: { hidden: true }, // 用于info, link
+        symbol: { hidden: true },
       };
     }
     return sections.map((section, sectionIndex) => ({
@@ -626,6 +647,15 @@ export class DynamicPreferenceListView extends Base<
             };
             break;
           }
+          case "symbol-action": {
+            data.symbol = {
+              hidden: n.symbol ? false : true,
+              symbol: n.symbol,
+              tintColor: n.tintColor ?? $color("primaryText"),
+              contentMode: n.contentMode ?? 1,
+            };
+            break;
+          }
           case "action": {
             data.title.textColor = n.destructive
               ? $color("red")

package/components/static-preference-listview.ts

@@ -14,6 +14,7 @@ type PreferenceCellTypes =
   | "info"
   | "interactive-info"
   | "link"
+  | "symbol-action"
   | "action";
 
 export interface PreferenceSection {
@@ -34,6 +35,7 @@ export type PrefsRow =
   | PrefsRowInfo
   | PrefsRowInteractiveInfo
   | PrefsRowLink
+  | PrefsRowSymbolAction
   | PrefsRowAction;
 
 interface PrefsRowBase {
@@ -131,6 +133,15 @@ export interface PrefsRowLink extends PrefsRowBase {
   value?: string;
 }
 
+export interface PrefsRowSymbolAction extends PrefsRowBase {
+  type: "symbol-action";
+  symbol?: string;
+  tintColor?: UIColor;
+  contentMode?: number;
+  symbolSize?: JBSize;
+  value?: () => void;
+}
+
 export interface PrefsRowAction extends PrefsRowBase {
   type: "action";
   value?: () => void;
@@ -146,10 +157,17 @@ export const selectableTypes = [
   "date",
   "interactive-info",
   "link",
+  "symbol-action",
   "action",
 ];
 
-export const excludedTypes = ["info", "interactive-info", "link", "action"];
+export const excludedTypes = [
+  "info",
+  "interactive-info",
+  "link",
+  "symbol-action",
+  "action",
+];
 
 type PreferenceValues = { [key: string]: any };
 
@@ -166,6 +184,7 @@ type AllCells =
   | InteractiveInfoCell
   | InfoCell
   | LinkCell
+  | SymbolActionCell
   | ActionCell;
 
 abstract class Cell extends Base<UIView, UiTypes.ViewOptions> {
@@ -875,6 +894,42 @@ class LinkCell extends Cell {
   }
 }
 
+class SymbolActionCell extends Cell {
+  readonly _type = "symbol-action";
+  _symbol: string;
+  _tintColor: UIColor;
+  _contentMode: number;
+  _symbolSize: JBSize;
+  constructor(props: PrefsRowSymbolAction, values: PreferenceValues) {
+    super(props, values);
+    this._symbol = props.symbol || "";
+    this._tintColor = props.tintColor ?? $color("primaryText");
+    this._contentMode = props.contentMode ?? 1;
+    this._symbolSize = props.symbolSize ?? $size(24, 24);
+  }
+
+  _defineValueView(): UiTypes.ImageOptions {
+    return {
+      type: "image",
+      props: {
+        id: "image",
+        symbol: this._symbol,
+        tintColor: this._tintColor,
+        contentMode: this._contentMode,
+      },
+      layout: (make, view) => {
+        make.centerY.equalTo(view.super);
+        make.size.equalTo(this._symbolSize);
+        make.right.inset(15);
+      },
+    };
+  }
+
+  _handleValue() {
+    return;
+  }
+}
+
 class ActionCell extends Cell {
   readonly _type = "action";
   _destructive: boolean;
@@ -1005,6 +1060,14 @@ class ActionCell extends Cell {
  *
  *     - value?: string url
  *
+ * - symbol-action:
+ *
+ *    - symbol?: string;
+ *    - tintColor?: UIColor;
+ *    - contentMode?: number;
+ *    - symbolSize?: JBSize;
+ *    - value?: function 点击后会执行的函数
+ *
  * - action:
  *
  *     - value?: function 点击后会执行的函数
@@ -1173,8 +1236,12 @@ export class PreferenceListView extends Base<UIListView, UiTypes.ListOptions> {
                 $safari.open({ url: cell.value });
                 break;
               }
+              case "symbol-action": {
+                if (cell.value) cell.value();
+                break;
+              }
               case "action": {
-                cell.value();
+                if (cell.value) cell.value();
                 break;
               }
               default:
@@ -1212,6 +1279,8 @@ export class PreferenceListView extends Base<UIListView, UiTypes.ListOptions> {
         return new InteractiveInfoCell(props, this._values);
       case "link":
         return new LinkCell(props, this._values);
+      case "symbol-action":
+        return new SymbolActionCell(props, this._values);
       case "action":
         return new ActionCell(props, this._values);
       default:

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

@@ -24,6 +24,7 @@ const static_preference_listview_1 = require("./static-preference-listview");
  * - infoAndLinkLeftInset?: number = 120 作用于 info, link
  * - sliderWidth?: number = 200 作用于 slider
  * - tabWidth?: number = 200 作用于 tab
+ * - symbolSizeForSymbolAction?: size = $size(24, 24) 作用于symbol-action
  *   注意以上的修改是应用于 template, 而不是应用于单个 cell 的
  *
  * 独特方法:
@@ -37,7 +38,7 @@ class DynamicPreferenceListView extends base_1.Base {
             title: n.title,
             rows: n.rows.map((r) => (Object.assign({}, r))),
         }));
-        this._props = Object.assign({ stringLeftInset: 120, infoAndLinkLeftInset: 120, sliderWidth: 200, tabWidth: 200 }, props);
+        this._props = Object.assign({ stringLeftInset: 120, infoAndLinkLeftInset: 120, sliderWidth: 200, tabWidth: 200, symbolSizeForSymbolAction: $size(24, 24) }, props);
         this._layout = layout;
         this._defineView = () => {
             return {
@@ -250,6 +251,17 @@ class DynamicPreferenceListView extends base_1.Base {
                                             make.right.inset(0);
                                         },
                                     },
+                                    {
+                                        type: "image",
+                                        props: {
+                                            id: "symbol",
+                                        },
+                                        layout: (make, view) => {
+                                            make.centerY.equalTo(view.super);
+                                            make.size.equalTo(this._props.symbolSizeForSymbolAction);
+                                            make.right.inset(0);
+                                        },
+                                    },
                                 ],
                             },
                         ],
@@ -384,6 +396,11 @@ class DynamicPreferenceListView extends base_1.Base {
                                     $safari.open({ url: row.value });
                                 break;
                             }
+                            case "symbol-action": {
+                                if (row.value)
+                                    row.value();
+                                break;
+                            }
                             case "action": {
                                 if (row.value)
                                     row.value();
@@ -451,12 +468,13 @@ class DynamicPreferenceListView extends base_1.Base {
                 switch: { hidden: true }, // 用于boolean
                 tab: { hidden: true }, // 用于tab
                 label_info_link: { hidden: true }, // 用于info, link
+                symbol: { hidden: true },
             };
         }
         return sections.map((section, sectionIndex) => ({
             title: section.title,
             rows: section.rows.map((n, rowIndex) => {
-                var _a;
+                var _a, _b, _c;
                 const data = generateDefaultRow(n);
                 switch (n.type) {
                     case "string": {
@@ -574,6 +592,15 @@ class DynamicPreferenceListView extends base_1.Base {
                         };
                         break;
                     }
+                    case "symbol-action": {
+                        data.symbol = {
+                            hidden: n.symbol ? false : true,
+                            symbol: n.symbol,
+                            tintColor: (_b = n.tintColor) !== null && _b !== void 0 ? _b : $color("primaryText"),
+                            contentMode: (_c = n.contentMode) !== null && _c !== void 0 ? _c : 1,
+                        };
+                        break;
+                    }
                     case "action": {
                         data.title.textColor = n.destructive
                             ? $color("red")

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

@@ -12,9 +12,16 @@ exports.selectableTypes = [
     "date",
     "interactive-info",
     "link",
+    "symbol-action",
+    "action",
+];
+exports.excludedTypes = [
+    "info",
+    "interactive-info",
+    "link",
+    "symbol-action",
     "action",
 ];
-exports.excludedTypes = ["info", "interactive-info", "link", "action"];
 class Cell extends base_1.Base {
     constructor({ key, title, value, titleColor = $color("primaryText"), changedEvent, }, values) {
         super();
@@ -639,6 +646,36 @@ class LinkCell extends Cell {
         return text;
     }
 }
+class SymbolActionCell extends Cell {
+    constructor(props, values) {
+        var _a, _b, _c;
+        super(props, values);
+        this._type = "symbol-action";
+        this._symbol = props.symbol || "";
+        this._tintColor = (_a = props.tintColor) !== null && _a !== void 0 ? _a : $color("primaryText");
+        this._contentMode = (_b = props.contentMode) !== null && _b !== void 0 ? _b : 1;
+        this._symbolSize = (_c = props.symbolSize) !== null && _c !== void 0 ? _c : $size(24, 24);
+    }
+    _defineValueView() {
+        return {
+            type: "image",
+            props: {
+                id: "image",
+                symbol: this._symbol,
+                tintColor: this._tintColor,
+                contentMode: this._contentMode,
+            },
+            layout: (make, view) => {
+                make.centerY.equalTo(view.super);
+                make.size.equalTo(this._symbolSize);
+                make.right.inset(15);
+            },
+        };
+    }
+    _handleValue() {
+        return;
+    }
+}
 class ActionCell extends Cell {
     constructor(props, values) {
         super(props, values);
@@ -764,6 +801,14 @@ class ActionCell extends Cell {
  *
  *     - value?: string url
  *
+ * - symbol-action:
+ *
+ *    - symbol?: string;
+ *    - tintColor?: UIColor;
+ *    - contentMode?: number;
+ *    - symbolSize?: JBSize;
+ *    - value?: function 点击后会执行的函数
+ *
  * - action:
  *
  *     - value?: function 点击后会执行的函数
@@ -917,8 +962,14 @@ class PreferenceListView extends base_1.Base {
                                 $safari.open({ url: cell.value });
                                 break;
                             }
+                            case "symbol-action": {
+                                if (cell.value)
+                                    cell.value();
+                                break;
+                            }
                             case "action": {
-                                cell.value();
+                                if (cell.value)
+                                    cell.value();
                                 break;
                             }
                             default:
@@ -955,6 +1006,8 @@ class PreferenceListView extends base_1.Base {
                 return new InteractiveInfoCell(props, this._values);
             case "link":
                 return new LinkCell(props, this._values);
+            case "symbol-action":
+                return new SymbolActionCell(props, this._values);
             case "action":
                 return new ActionCell(props, this._values);
             default:

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

@@ -86,6 +86,14 @@ const sections = [
                 title: "link",
                 value: "https://apple.com",
             },
+            {
+                type: "symbol-action",
+                title: "种类1",
+                symbol: "checkmark",
+                tintColor: $color("systemLink"),
+                titleColor: $color("systemLink"),
+                value: () => console.info(0),
+            },
             {
                 type: "action",
                 title: "action",
@@ -95,7 +103,10 @@ const sections = [
     },
 ];
 const v = new dynamic_preference_listview_1.DynamicPreferenceListView({
-    props: { data: [] },
+    props: {
+        data: [],
+        //symbolSizeForSymbolAction: $size(40, 40)
+    },
     sections: sections,
     layout: $layout.fill,
     events: {

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

@@ -87,6 +87,14 @@ const sections = [
                 title: "link",
                 value: "https://apple.com",
             },
+            {
+                type: "symbol-action",
+                title: "种类1",
+                symbol: "checkmark",
+                tintColor: $color("systemLink"),
+                titleColor: $color("systemLink"),
+                value: () => console.info(0),
+            },
             {
                 type: "action",
                 title: "action",

package/dist/utils/colors.js

@@ -1,7 +1,7 @@
 "use strict";
 // 自定义的语义化颜色
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sectionHeaderColor = exports.gold = exports.searchBarBgcolor = exports.searchBarSymbolColor = exports.footBarDefaultSegmentColor = exports.sheetNavBarColor = void 0;
+exports.sliderMaxColor = exports.sectionHeaderColor = exports.gold = exports.searchBarBgcolor = exports.searchBarSymbolColor = exports.footBarDefaultSegmentColor = exports.sheetNavBarColor = void 0;
 exports.sheetNavBarColor = $color("tint", $color("tertiarySurface"));
 exports.footBarDefaultSegmentColor = $color("#b7bec6", "#6e6e6e");
 exports.searchBarSymbolColor = $color("#777", "#aaa");
@@ -12,3 +12,8 @@ exports.sectionHeaderColor = $color({
     dark: "#acacac",
     black: "#ababab",
 });
+exports.sliderMaxColor = $color({
+    light: "#E4E4E6",
+    dark: "#38373B",
+    black: "#2B2A2E",
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsbox-cview",
-  "version": "1.5.26",
+  "version": "1.5.28",
   "description": "为 JSBox 设计的微型框架",
   "repository": {
     "type": "git",

package/test/dynamic-preference-listview.ts

@@ -86,6 +86,14 @@ const sections: PreferenceSection[] = [
         title: "link",
         value: "https://apple.com",
       },
+      {
+        type: "symbol-action",
+        title: "种类1",
+        symbol: "checkmark",
+        tintColor: $color("systemLink"),
+        titleColor: $color("systemLink"),
+        value: () => console.info(0),
+      },
       {
         type: "action",
         title: "action",
@@ -95,7 +103,10 @@ const sections: PreferenceSection[] = [
   },
 ];
 const v = new DynamicPreferenceListView({
-  props: { data: [] },
+  props: {
+    data: [],
+    //symbolSizeForSymbolAction: $size(40, 40)
+  },
   sections: sections,
   layout: $layout.fill,
   events: {

package/test/static-preference-listview.ts

@@ -88,6 +88,14 @@ const sections: PreferenceSection[] = [
         title: "link",
         value: "https://apple.com",
       },
+      {
+        type: "symbol-action",
+        title: "种类1",
+        symbol: "checkmark",
+        tintColor: $color("systemLink"),
+        titleColor: $color("systemLink"),
+        value: () => console.info(0),
+      },
       {
         type: "action",
         title: "action",

package/utils/colors.ts

@@ -10,3 +10,8 @@ export const sectionHeaderColor = $color({
   dark: "#acacac",
   black: "#ababab",
 });
+export const sliderMaxColor = $color({
+  light: "#E4E4E6",
+  dark: "#38373B",
+  black: "#2B2A2E",
+});