Merge pull request #206978 in DEC/fineui from master to feature/x

* commit '616f473ea979f9a4083c085061a351e4c01eda89':
  auto upgrade version to 2.0.20221115175620
  KERNEL-13523 chore: 修复下fui-cli命令
  KERNEL-13521 refactor: segment调整&行列布局的类名方法抽到layout上
  KERNEL-13521 refactor: segment使用grid布局，使其默认使用最长项宽度等分

bin/cli/cli.js

@@ -1,44 +1,21 @@
 #!/usr/bin/env node
+const yargs = require('yargs/yargs');
+const { hideBin } = require('yargs/helpers');
 
 const workerCmd = require('./worker/cli.worker');
 
-function getArgs (startIndex = 1) {
-    const args = {};
-    process.argv
-        .slice(startIndex, process.argv.length)
-        .forEach(arg => {
-        // long arg
-        if (arg.slice(0, 2) === '--') {
-            const longArg = arg.split('=');
-            const longArgFlag = longArg[0].slice(2, longArg[0].length);
-            const longArgValue = longArg.length > 1 ? longArg[1] : true;
-            args[longArgFlag] = longArgValue;
-            // flags
-        } else if (arg[0] === '-') {
-            const flags = arg.slice(1, arg.length);
-            args[flags] = true;
-        }
-    });
+const argv = yargs(hideBin(process.argv)).argv;
 
-    return args;
-}
+const cmd = argv._[0];
 
 const cmds = new Map([
     ['worker', workerCmd],
 ]);
 
-const baseCmd = 'fui-cli';
-
-const startIndex = process.argv.findIndex(argv => argv.indexOf(baseCmd) !== -1);
-
-if (startIndex === -1) {
-    throw new Error(`Command ${baseCmd} not found in args`);
-}
-
-const cmd = process.argv[startIndex + 1];
+if (!cmd) throw new Error('Command is undefined!');
 
 if (cmds.has(cmd)) {
-    cmds.get(cmd)?.exec(getArgs(startIndex + 2));
+    cmds.get(cmd)?.exec(argv);
 } else {
     throw new Error(`Command ${cmd} not supported`);
 }

bin/cli/worker/cli.worker.js

@@ -5,7 +5,7 @@ function first2UpperCase(str) {
     return str.toLowerCase().replace(/( |^)[a-z]/g, L => L.toUpperCase());
 }
 
-function scanAndCreate(structure, workerName, root = process.env.INIT_CWD) {
+function scanAndCreate(structure, workerName, root) {
     Object.keys(structure)
         .forEach(name => {
             if (typeof structure[name] === 'object') {
@@ -60,7 +60,7 @@ module.exports = {
             },
         };
 
-        scanAndCreate(structure, name);
+        scanAndCreate(structure, name, args.where ? path.resolve(args.where) : process.cwd());
     },
 };
 

demo/js/case/demo.segment.js

@@ -1,28 +1,28 @@
 Demo.Func = BI.inherit(BI.Widget, {
     props: {
-        baseCls: "demo-func"
+        baseCls: "demo-func",
     },
 
     render: function () {
         BI.createWidget({
-            type: "bi.vertical",
+            type: "bi.horizontal",
             element: this,
             vgap: 20,
             hgap: 30,
             items: [{
                 type: "bi.segment",
                 items: [{
-                    text: "1",
-                    value: 1
+                    text: "较长的选项1",
+                    value: 1,
                 }, {
-                    text: "2",
-                    value: 2
+                    text: "选项2",
+                    value: 2,
                 }, {
-                    text: "3",
-                    value: 3
-                }]
-            }]
+                    text: "选项3",
+                    value: 3,
+                }],
+            }],
         });
-    }
+    },
 });
 BI.shortcut("demo.segment", Demo.Func);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fineui",
-  "version": "2.0.20221114221310",
+  "version": "2.0.20221115175620",
   "description": "fineui",
   "main": "dist/fineui_without_conflict.min.js",
   "types": "dist/lib/index.d.ts",
@@ -86,5 +86,9 @@
     "registry": "https://registry.npmjs.org"
   },
   "author": "fanruan",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "@types/yargs": "17.0.13",
+    "yargs": "17.6.2"
+  }
 }

src/case/segment/segment.js

@@ -10,7 +10,7 @@ BI.Segment = BI.inherit(BI.Widget, {
         return BI.extend(BI.Segment.superclass._defaultConfig.apply(this, arguments), {
             baseCls: "bi-segment",
             items: [],
-            height: 24
+            height: 24,
         });
     },
     _init: function () {
@@ -20,16 +20,15 @@ BI.Segment = BI.inherit(BI.Widget, {
             element: this,
             type: "bi.button_group",
             value: o.value,
-            items: BI.createItems(o.items, {
+            items: [BI.createItems(o.items, {
                 type: "bi.segment_button",
                 height: BI.toPix(o.height, 2),
-                whiteSpace: o.whiteSpace
-            }),
-            layout: [
-                {
-                    type: "bi.center"
-                }
-            ]
+                whiteSpace: o.whiteSpace,
+            })],
+            layouts: [{
+                type: "bi.table",
+                columnSize: BI.makeArrayByArray(o.items, "fill"),
+            }],
         });
         this.buttonGroup.on(BI.Controller.EVENT_CHANGE, function () {
             self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
@@ -58,7 +57,7 @@ BI.Segment = BI.inherit(BI.Widget, {
 
     getValue: function () {
         return this.buttonGroup.getValue();
-    }
+    },
 });
 BI.Segment.EVENT_CHANGE = "EVENT_CHANGE";
 BI.shortcut("bi.segment", BI.Segment);

src/core/wrapper/layout.js

@@ -16,7 +16,7 @@ BI.Layout = BI.inherit(BI.Widget, {
             scrolly: false, // true, false
             items: [],
             innerHgap: 0,
-            innerVgap: 0
+            innerVgap: 0,
         };
     },
 
@@ -727,6 +727,25 @@ BI.Layout = BI.inherit(BI.Widget, {
         });
     },
 
+    getRowColumnCls: function (rowIndex, colIndex, lastRowIndex, lastColIndex) {
+        var cls = "";
+        if (rowIndex === 0) {
+            cls += " first-row";
+        } else if (rowIndex === lastRowIndex) {
+            cls += " last-row";
+        }
+        if (colIndex === 0) {
+            cls += " first-col";
+        } else if (colIndex === lastColIndex) {
+            cls += " last-col";
+        }
+        BI.isOdd(rowIndex + 1) ? (cls += " odd-row") : (cls += " even-row");
+        BI.isOdd(colIndex + 1) ? (cls += " odd-col") : (cls += " even-col");
+        cls += " center-element";
+
+        return cls;
+    },
+
     removeWidget: function (nameOrWidget) {
         var removeIndex, self = this;
         if (BI.isWidget(nameOrWidget)) {

src/core/wrapper/layout/layout.division.js

@@ -28,44 +28,31 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
     },
 
     stroke: function (items) {
-        var o = this.options;
+        var o = this.options, self = this;
         var rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
         var map = BI.makeArray(rows), widths = {}, heights = {};
 
-        function firstElement (item, row, col) {
-            if (row === 0) {
-                item.addClass("first-row");
-            }
-            if (col === 0) {
-                item.addClass("first-col");
-            }
-            item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
-            item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
-            item.addClass("center-element");
-        }
+        function firstElement (item, cls) {
+            item.addClass(cls);
 
-        function firstObject (item, row, col) {
-            var cls = "";
-            if (row === 0) {
-                cls += " first-row";
-            }
-            if (col === 0) {
-                cls += " first-col";
+            return item;
         }
-            BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
-            BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
-            item.cls = (item.cls || "") + cls + " center-element";
+
+        function firstObject (item, cls) {
+            item.cls = (item.cls || "") + cls;
+
+            return item;
         }
 
-        function first (item, row, col) {
+        function first (item, cls) {
             if (item instanceof BI.Widget) {
-                firstElement(item.element, row, col);
+                firstElement(item.element, cls);
             } else if (item.el instanceof BI.Widget) {
-                firstElement(item.el.element, row, col);
+                firstElement(item.el.element, cls);
             } else if (item.el) {
-                firstObject(item.el, row, col);
+                firstObject(item.el, cls);
             } else {
-                firstObject(item, row, col);
+                firstObject(item, cls);
             }
         }
 
@@ -79,6 +66,7 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
                     heights[j] = (heights[j] || 0) + item.height;
                     map[i][j] = el;
                 });
+
                 return;
             }
             widths[item.row] = (widths[item.row] || 0) + item.width;
@@ -106,7 +94,7 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
                 if (j == o.columns - 1) {
                     w.element.css({right: "0%"});
                 }
-                first(w, i, j);
+                first(w, self.getRowColumnCls(i, j, rows - 1, columns - 1));
                 totalW += map[i][j].width;
             }
         }

src/core/wrapper/layout/layout.grid.js

@@ -36,29 +36,16 @@ BI.GridLayout = BI.inherit(BI.Layout, {
             els[i] = [];
         }
 
-        function firstElement (item, row, col) {
-            if (row === 0) {
-                item.addClass("first-row");
-            }
-            if (col === 0) {
-                item.addClass("first-col");
-            }
-            item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
-            item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
-            item.addClass("center-element");
-        }
+        function firstElement (item, cls) {
+            item.addClass(cls);
 
-        function firstObject (item, row, col) {
-            var cls = "";
-            if (row === 0) {
-                cls += " first-row";
+            return item;
         }
-            if (col === 0) {
-                cls += " first-col";
-            }
-            BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
-            BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
-            item.cls = (item.cls || "") + cls + " center-element";
+
+        function firstObject (item, cls) {
+            item.cls = (item.cls || "") + cls;
+
+            return item;
         }
 
         function first (item, row, col) {
@@ -89,7 +76,7 @@ BI.GridLayout = BI.inherit(BI.Layout, {
                         type: "bi.layout"
                     });
                 }
-                first(els[i][j], i, j);
+                first(els[i][j], self.getRowColumnCls(i, j, rows - 1, columns - 1));
                 els[i][j].element.css({
                     position: "absolute",
                     top: height * i + "%",

src/core/wrapper/layout/layout.table.js

@@ -16,7 +16,7 @@ BI.TableLayout = BI.inherit(BI.Layout, {
             // rowSize: 30,  // or [30,30,30]
             hgap: 0,
             vgap: 0,
-            items: []
+            items: [],
         });
     },
     render: function () {
@@ -45,57 +45,43 @@ BI.TableLayout = BI.inherit(BI.Layout, {
                     return self._optimiseGap(size);
                 }).join(" ") : BI.range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "),
                 "grid-row-gap": this._optimiseGap(o.vgap),
-                "grid-column-gap": this._optimiseGap(o.hgap)
+                "grid-column-gap": this._optimiseGap(o.hgap),
             });
         }
+        
         return {
             type: "bi.default",
             ref: function (_ref) {
                 self.layout = _ref;
             },
-            items: this._formatItems(items)
+            items: this._formatItems(items),
         };
     },
 
     _formatItems: function (items) {
-        var o = this.options;
+        var o = this.options, self = this;
+
+        function firstElement (item, cls) {
+            item.addClass(cls);
 
-        function firstElement (item, row, col) {
-            if (row === 0) {
-                item.addClass("first-row");
-            }
-            if (col === 0) {
-                item.addClass("first-col");
-            }
-            item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
-            item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
-            item.addClass("center-element");
             return item;
         }
 
-        function firstObject (item, row, col) {
-            var cls = "";
-            if (row === 0) {
-                cls += " first-row";
-            }
-            if (col === 0) {
-                cls += " first-col";
-            }
-            BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
-            BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
-            item.cls = (item.cls || "") + cls + " center-element";
+        function firstObject (item, cls) {
+            item.cls = (item.cls || "") + cls;
+
             return item;
         }
 
-        function first (item, row, col) {
+        function first (item, cls) {
             if (item instanceof BI.Widget) {
-                return firstElement(item.element, row, col);
+                return firstElement(item.element, cls);
             } else if (item.el instanceof BI.Widget) {
-                return firstElement(item.el.element, row, col);
+                return firstElement(item.el.element, cls);
             } else if (item.el) {
-                return firstObject(item.el, row, col);
+                return firstObject(item.el, cls);
             } else {
-                return firstObject(item, row, col);
+                return firstObject(item, cls);
             }
         }
 
@@ -105,18 +91,20 @@ BI.TableLayout = BI.inherit(BI.Layout, {
                 columnSize: ["fill"],
                 horizontalAlign: o.horizontalAlign,
                 verticalAlign: o.verticalAlign,
-                items: [BI.formatEL(item)]
+                items: [BI.formatEL(item)],
             };
         }
 
-        return BI.reduce(items, function (row, result, i) {
-            return result.concat(BI.map(row, function (j, item) {
+        return BI.reduce(items, function (rowItems, result, rowIndex) {
+            return result.concat(BI.map(rowItems, function (colIndex, item) {
+                var cls = self.getRowColumnCls(rowIndex, colIndex, items.length - 1, rowItems.length - 1);
                 if (BI.isEmpty(item)) {
                     return first(wrapLayout({
-                        type: "bi.layout"
-                    }), i, j);
+                        type: "bi.layout",
+                    }), cls);
                 }
-                return first(wrapLayout(item), i, j);
+                
+                return first(wrapLayout(item), cls);
             }));
         }, []);
     },
@@ -127,6 +115,6 @@ BI.TableLayout = BI.inherit(BI.Layout, {
 
     populate: function (items) {
         this.layout.populate(this._formatItems(items));
-    }
+    },
 });
 BI.shortcut("bi.table", BI.TableLayout);

src/core/wrapper/layout/layout.window.js

@@ -35,7 +35,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
     },
 
     stroke: function (items) {
-        var o = this.options;
+        var o = this.options, self = this;
         if (BI.isNumber(o.rowSize)) {
             o.rowSize = BI.makeArray(o.items.length, 1 / o.items.length);
         }
@@ -43,29 +43,16 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
             o.columnSize = BI.makeArray(o.items[0].length, 1 / o.items[0].length);
         }
 
-        function firstElement (item, row, col) {
-            if (row === 0) {
-                item.addClass("first-row");
-            }
-            if (col === 0) {
-                item.addClass("first-col");
-            }
-            item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
-            item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
-            item.addClass("center-element");
-        }
+        function firstElement (item, cls) {
+            item.addClass(cls);
 
-        function firstObject (item, row, col) {
-            var cls = "";
-            if (row === 0) {
-                cls += " first-row";
+            return item;
         }
-            if (col === 0) {
-                cls += " first-col";
-            }
-            BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
-            BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
-            item.cls = (item.cls || "") + cls + " center-element";
+
+        function firstObject (item, cls) {
+            item.cls = (item.cls || "") + cls;
+
+            return item;
         }
 
         function first (item, row, col) {
@@ -109,7 +96,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
                     h = this._optimiseGap(o.rowSize[i]);
                 }
                 wi.element.css({top: t, height: h});
-                first(wi, i, j);
+                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
             }
             if (!BI.isNumber(o.rowSize[i])) {
                 break;
@@ -127,7 +114,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
                     h = this._optimiseGap(o.rowSize[i]);
                 }
                 wi.element.css({bottom: b, height: h});
-                first(wi, i, j);
+                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
             }
             if (!BI.isNumber(o.rowSize[i])) {
                 break;
@@ -145,7 +132,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
                     w = this._optimiseGap(o.columnSize[j]);
                 }
                 wi.element.css({left: l, width: w});
-                first(wi, i, j);
+                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
             }
             if (!BI.isNumber(o.columnSize[j])) {
                 break;
@@ -163,7 +150,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
                     w = this._optimiseGap(o.columnSize[j]);
                 }
                 wi.element.css({right: r, width: w});
-                first(wi, i, j);
+                first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
             }
             if (!BI.isNumber(o.columnSize[j])) {
                 break;

src/less/base/segment/segment.less

@@ -7,14 +7,14 @@
     border-top: 1px solid @color-bi-split-segment;
     border-bottom: 1px solid @color-bi-split-segment;
   }
-  & > .first-element{
+  & > .first-col{
     border-left: 1px solid @color-bi-split-segment;
     .border-corner-radius(2px,0px,0px,2px)
   }
-  & > .last-element{
+  & > .last-col{
     .border-corner-radius(0px,2px,2px,0px)
   }
-  &.disabled > .center-element, &.disabled > .first-element{
+  &.disabled > .center-element, &.disabled > .first-col{
     border-color: @color-bi-split-disabled-segment;
   }
 }
@@ -34,7 +34,7 @@
       border-top: 1px solid @color-bi-split-segment-theme-dark;
       border-bottom: 1px solid @color-bi-split-segment-theme-dark;
     }
-    & > .first-element{
+    & > .first-col{
       border-left: 1px solid @color-bi-split-segment-theme-dark;
     }
   }