Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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布局，使其默认使用最长项宽度等分
research/test
superman 2 years ago
parent
3b49f7ce68 616f473ea9
commit
1f0aec7948
11 changed files with 123 additions and 174 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      bin/cli/cli.js
  2. 4
      bin/cli/worker/cli.worker.js
  3. 22
      demo/js/case/demo.segment.js
  4. 8
      package.json
  5. 19
      src/case/segment/segment.js
  6. 21
      src/core/wrapper/layout.js
  7. 44
      src/core/wrapper/layout/layout.division.js
  8. 31
      src/core/wrapper/layout/layout.grid.js
  9. 62
      src/core/wrapper/layout/layout.table.js
  10. 39
      src/core/wrapper/layout/layout.window.js
  11. 8
      src/less/base/segment/segment.less

35
bin/cli/cli.js
Unescape View File

@ -1,44 +1,21 @@
#!/usr/bin/env node #!/usr/bin/env node
const yargs = require('yargs/yargs');
const { hideBin } = require('yargs/helpers');
const workerCmd = require('./worker/cli.worker'); const workerCmd = require('./worker/cli.worker');
function getArgs (startIndex = 1) { const argv = yargs(hideBin(process.argv)).argv;
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;
}
});
return args; const cmd = argv._[0];
}
const cmds = new Map([ const cmds = new Map([
['worker', workerCmd], ['worker', workerCmd],
]); ]);
const baseCmd = 'fui-cli'; if (!cmd) throw new Error('Command is undefined!');
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 (cmds.has(cmd)) { if (cmds.has(cmd)) {
cmds.get(cmd)?.exec(getArgs(startIndex + 2)); cmds.get(cmd)?.exec(argv);
} else { } else {
throw new Error(`Command ${cmd} not supported`); throw new Error(`Command ${cmd} not supported`);
} }

4
bin/cli/worker/cli.worker.js
Unescape View File

@ -5,7 +5,7 @@ function first2UpperCase(str) {
return str.toLowerCase().replace(/( |^)[a-z]/g, L => L.toUpperCase()); 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) Object.keys(structure)
.forEach(name => { .forEach(name => {
if (typeof structure[name] === 'object') { 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());
}, },
}; };

22
demo/js/case/demo.segment.js
Unescape View File

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

8
package.json
Unescape View File

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

19
src/case/segment/segment.js
Unescape View File

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

21
src/core/wrapper/layout.js
Unescape View File

@ -16,7 +16,7 @@ BI.Layout = BI.inherit(BI.Widget, {
scrolly: false, // true, false scrolly: false, // true, false
items: [], items: [],
innerHgap: 0, 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) { removeWidget: function (nameOrWidget) {
var removeIndex, self = this; var removeIndex, self = this;
if (BI.isWidget(nameOrWidget)) { if (BI.isWidget(nameOrWidget)) {

44
src/core/wrapper/layout/layout.division.js
Unescape View File

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

31
src/core/wrapper/layout/layout.grid.js
Unescape View File

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

62
src/core/wrapper/layout/layout.table.js
Unescape View File

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

39
src/core/wrapper/layout/layout.window.js
Unescape View File

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

8
src/less/base/segment/segment.less
Unescape View File

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

Write Preview
Loading…
Cancel
Save