diff --git a/es6.js b/es6.js index afc7ff8e1..40633a425 100644 --- a/es6.js +++ b/es6.js @@ -3,7 +3,8 @@ const path = require("path"); const prettier = require("prettier"); const { exec } = require("child_process"); const { search, initDepts, depts } = require("./es6.xtype"); -const _ = require("lodash"); +const lodash = require("lodash"); +const DEPTS = depts; // const XTYPE_ONLY = false; // const THIS_REPLACE = false; @@ -12,6 +13,10 @@ const ConflictImport = []; const CircularDependency = []; function objHaveFunction(obj) { + if (obj === null) { + return false; + } + return Object.keys(obj).some(key => { const value = obj[key]; if (typeof value === "object") { @@ -32,10 +37,11 @@ function parserImport(code) { while (regResult) { importMap[regResult[2]] = regResult[1] .split(",") - .map(el => el.trim()).filter(el => el); + .map(el => el.trim()) + .filter(el => el); regResult = reg.exec(code); } - + return importMap; } @@ -46,7 +52,7 @@ async function saveAndFixCode(path, code) { } const prettierCode = prettier.format(_code, { tabWidth: 4, - parser: 'babel', + parser: "babel", printWidth: 120, }); fs.writeFileSync(path, prettierCode); @@ -58,56 +64,18 @@ async function saveAndFixCode(path, code) { }); } -const target = [ - "isNull", - "toPix", - "isKey", - "isObject", - "map", - "extend", - "isFunction", - "isEmptyArray", - "isArray", - "Controller", - "createWidget", - "Events", - "emptyFn", - "nextTick", - "bind", - "i18nText", - "isNotNull", - "isString", - "isNumber", - "isEmpty", - "isEmptyString", - "any", - "deepContains", - "isNotEmptyString", - "each", - "contains", - "remove", - "createItems", - "makeArrayByArray", - "VerticalAlign", - "pushDistinct", - "endWith", - "transformItems", - "print", - "Tree", - "Func", - "Selection", -]; +// const target = []; // 加载模块 const loader = { // G: { "@/core": { shortcut: true } }, load(srcName, module) { const G = loader.G; - if (target.indexOf(module) >= 0) { - G["@/core"][module] = true; + // if (target.indexOf(module) >= 0) { + // G["@/core"][module] = true; - return true; - } + // return true; + // } if (module.startsWith('"bi.')) { const key = search(srcName, module); if (key) { @@ -136,15 +104,16 @@ const loader = { async function handleFile(srcName) { await saveAndFixCode(srcName); // 全局状态回归 - let G = loader.G = { }; - + let G = (loader.G = {}); + const sourceCode = fs.readFileSync(srcName).toString(); const result = /BI\.(.*?)\s=\sBI\.inherit\(/.exec(sourceCode); + if (!result) { // console.log(`已经es6过，替换 xtype => ${srcName}`); if (!/export class/.test(sourceCode)) { - console.log("忽略文件", srcName); + // console.log("忽略文件", srcName); return; } @@ -165,9 +134,9 @@ async function handleFile(srcName) { }); // 识别 import const importMap = parserImport(noXtypeCode); - + // 合并原来的 import 到 G - _.forEach(importMap, (depts, module) => { + lodash.forEach(importMap, (depts, module) => { depts.forEach(dept => { if (!G[module]) { G[module] = {}; @@ -176,56 +145,113 @@ async function handleFile(srcName) { G[module][dept] = true; }); }); + - // 合并 core - const crossPackages = fs.readdirSync("src"); - _.forEach(G, (depts, module) => { + // 合并包 + const crossPackages = fs.readdirSync("src").map(el => `@/${el}`); + lodash.forEach(G, (depts, module) => { crossPackages.forEach(crosspackage => { - if (module.indexOf(crosspackage) >= 0) { - if (!G[`@/${crosspackage}`]) { - G[`@/${crosspackage}`] = {}; + if (module.indexOf(crosspackage.replace(/^@\//, "")) >= 0) { + if (!G[crosspackage]) { + G[crosspackage] = {}; } - Object.assign(G[`@/${crosspackage}`], depts); + Object.assign(G[crosspackage], depts); } }); }); - const tmpG = {}; - _.forEach(G, (depts, module) => { - const flag = _.some(crossPackages, crosspackage => module.indexOf(crosspackage) >= 0 && !module.startsWith("@")); + lodash.forEach(G, (depts, module) => { + const flag = lodash.some( + crossPackages, + crosspackage => + module.indexOf(crosspackage) >= 0 && !module.startsWith("@"), + ); if (!flag) { tmpG[module] = depts; } }); + + let circle = false; + // 处理循环依赖，base: ["@/case", "@/base", "@/widget"] 等于 base 不能直接引数组内的包 + const forbiddenCrossRules = { + base: ["@/case", "@/base", "@/widget"], + "case": ["@/case", "@/widget"], + widget: ["@/widget"], + component: ["@/component"], + core: ["@/core", "@base", "@/widget", "@/case"], + }; + + const forbiddenKeys = []; + const circleG = {}; + + lodash.forEach(G, (depts, module) => { + // 找出 rule + const packages = Object.keys(forbiddenCrossRules); + + let key = packages.filter( + _package => srcName.indexOf(_package) >= 0, + ); + if (key.length !== 1) { + throw new Error( + "理论不可能出现这个问题，需要 treecat 优化下找包逻辑1", + ); + } + key = key[0]; + const rule = forbiddenCrossRules[key]; + + if (lodash.includes(rule, module)) { + circle = true; + + const deptsArr = Object.keys(depts); + if (deptsArr.filter(dept => !DEPTS[dept]).length > 0) { + throw new Error( + "理论不可能出现这个问题，需要 treecat 优化下找包逻辑2", + ); + } + deptsArr + .filter(dept => DEPTS[dept]) + .forEach(dept => { + const value = `@${DEPTS[dept].replace(path.resolve("src"), "").replace(/\\/g, "/").replace(/\.js$/, "")}`; + if (!tmpG[value]) { + tmpG[value] = {}; + } + tmpG[value][dept] = true; + }); + forbiddenKeys.push(module); + } + }); + Object.assign(tmpG, circleG); + forbiddenKeys.forEach(key => { + delete tmpG[key]; + }); // 较验手工 import 错误 const map = {}; let conflict = false; - let circle = false; - _.forEach(tmpG, (imports, fromStr) => { - if (srcName.indexOf("base") >= 0) { - if (fromStr === "@/case" || fromStr === "@/base") { - circle = true; - } - } - _.forEach(imports, (bools, _import) => { - if (map[_import] && map[_import] !== fromStr) { + lodash.forEach(tmpG, (depts, module) => { + lodash.forEach(depts, (_, _import) => { + if (map[_import] && map[_import] !== module) { conflict = true; } - - map[_import] = fromStr; + + map[_import] = module; }); }); conflict && ConflictImport.push(srcName); circle && CircularDependency.push(srcName); + + G = tmpG; - - const noImportCode = noXtypeCode.replace(/import {([\s\S]*?)} from "(.*?)";/g, ""); - + + const noImportCode = noXtypeCode.replace( + /import {([\s\S]*?)} from "(.*?)";/g, + "", + ); + let I = ""; Object.keys(G).forEach(key => { let moduleKey = key; @@ -236,14 +262,13 @@ async function handleFile(srcName) { Object.keys(G[moduleKey]).forEach(key => { i += `${key}, `; }); - + // 必须以 . 开头 const moduleInValid = /^[^@.]/.test(moduleKey); if (moduleInValid) { moduleKey = `./${moduleKey}`; } - - + I += `import {${i}} from '${moduleKey}'\n`; }); const code = `${I}\n${noImportCode}`; @@ -255,17 +280,16 @@ async function handleFile(srcName) { G["@/core"] = { shortcut: true }; - const clzName = result[1]; if (!clzName) { console.log(`${srcName} 不需要 es6 化`); - + return; } const superName = /inherit\(BI\.(.*?),/.exec(sourceCode)[1]; - + // const xtype = /BI.shortcut\(\"(.*?)\"/.exec(sourceCode)[1]; const collection = { @@ -391,6 +415,10 @@ async function handleFile(srcName) { M += `${f}\n`; }); + if (!collection.xtype) { + delete G["@/core"].shortcut; + } + Object.keys(G).forEach(key => { let moduleKey = key; if (moduleKey === path.basename(srcName).replace(/.js$/g, "")) { @@ -413,9 +441,9 @@ async function handleFile(srcName) { const outputCode = ` ${I} -@shortcut() +${collection.xtype ? "@shortcut()" : ""} export class ${clzName} extends ${superName} { -\tstatic xtype = "${collection.xtype}" +${collection.xtype ? `static xtype = "${collection.xtype}"` : ""} ${A} @@ -463,19 +491,6 @@ async function traverse(srcName) { const srcName = process.argv[2]; initDepts().then(async () => { - const content = fs.readFileSync("src/core/2.base.js").toString(); - - let result = content.match(/export function (.*?)\(/g); - target.push( - ...result.map(el => - el.replace("export function ", "").replace("(", ""), - ), - ); - result = content.match(/export const (.*?) =/g); - target.push( - ...result.map(el => el.replace("export const ", "").replace(" =", "")), - ); - await traverse(srcName); // 对数据处理 @@ -483,6 +498,6 @@ initDepts().then(async () => { console.log(`导入冲突 ${el}`); }); CircularDependency.forEach(el => { - console.log(`出现循环依赖 ${el}`); + console.log(`出现循环依赖(已经fixed) ${el}`); }); }); diff --git a/es6.xtype.js b/es6.xtype.js index 351134bf3..db1babcbb 100644 --- a/es6.xtype.js +++ b/es6.xtype.js @@ -1,35 +1,49 @@ const fs = require("fs"); const path = require("path"); +const lodash = require("lodash"); const depts = {}; async function handle(filename) { - // 找clzName - const code = fs.readFileSync(filename); + if (path.extname(filename) !== ".js") { + return; + } + const code = fs.readFileSync(filename).toString(); + const inheritRegResult = /BI\.(.*?)\s=\sBI\.inherit\(/.exec(code); - let clzName; if (inheritRegResult) { - clzName = inheritRegResult[1]; + const clzName = inheritRegResult[1]; + depts[clzName] = filename; } else { - const clzRegResult = /export\s+class\s+(.*?)\s+/.exec(code); - - if (clzRegResult) { - clzName = clzRegResult[1]; - } else { - return; - } - const xtypeResult = /static xtype = (.*?)(;|\s)/.exec(code); - // 找一下 xtype - if (xtypeResult) { - depts[xtypeResult[1]] = { - clzName, + // 一个文件夹里面可能有多个 xtype + const reg = /export\s+class\s+(.*?)([\s|{])([\w\W]*?)static xtype\s?=\s?((["|'])(.*?)(\5))/g; + Array.from(code.matchAll(reg)).forEach(res => { + const xtype = res[4]; + depts[xtype] = { + clzName: res[1], clzPath: filename, }; - } else { - // console.log(`${filename} 没有 xtype`); + }); + // 同时找一下 export + if (path.basename(filename) !== "index.js") { + const regs = [ + /export function (.*?)\(/g, + /export const (.*?) =/g, + /export class (.*?) /g, + /export \{([\w\W]*?)\}/g, + ]; + regs.forEach((reg, index) => { + Array.from(code.matchAll(reg)).forEach(el => { + depts[el[1]] = filename; + if (index === 3) { + el[1].split(",").map(el => el.trim()).forEach(key => { + depts[key] = filename; + }); + } + }); + }); } } - depts[clzName] = filename; } function isExist(filePath) { @@ -53,6 +67,13 @@ async function bfs(filename) { async function initDepts() { // dfs 构建依赖关系 await bfs(path.resolve("src")); + const m = {}; + lodash.forEach(depts, value => { + if (typeof value === "object") { + m[value.clzName] = value.clzPath; + } + }); + Object.assign(depts, m); } diff --git a/src/base/1.pane.js b/src/base/1.pane.js index 3f07c307f..31176dbd5 100644 --- a/src/base/1.pane.js +++ b/src/base/1.pane.js @@ -1,5 +1,5 @@ -import { Label, Text } from "./single"; import { + AbsoluteCenterLayout, CenterAdaptLayout, HorizontalAdaptLayout, VerticalLayout, @@ -12,7 +12,8 @@ import { createWidget, Providers } from "@/core"; -import { Layers } from "@/base"; +import { Label, Text } from "./single"; +import { Layers } from "@/base/0.base"; /** * 当没有元素时有提示信息的view @@ -43,7 +44,7 @@ export class Pane extends Widget { _assertTip() { if (!this._tipText) { createWidget({ - type: "bi.absolute_center_adapt", + type: AbsoluteCenterLayout.xtype, element: this, items: [ { diff --git a/src/base/combination/group.button.js b/src/base/combination/group.button.js index 5dca70655..99437247c 100644 --- a/src/base/combination/group.button.js +++ b/src/base/combination/group.button.js @@ -1,4 +1,5 @@ import { + Selection, CenterLayout, shortcut, Widget, @@ -24,14 +25,16 @@ import { removeAt, deepContains, has, - any + any, + BehaviorFactory, + Events } from "@/core"; import { TextButton } from "../single"; /** * Created by GUY on 2015/6/26. - * @class BI.ButtonGroup - * @extends BI.Widget + * @class ButtonGroup + * @extends Widget */ @shortcut() @@ -39,6 +42,12 @@ export class ButtonGroup extends Widget { static xtype = "bi.button_group"; static EVENT_CHANGE = "EVENT_CHANGE"; + + static CHOOSE_TYPE_SINGLE = Selection.Single; + static CHOOSE_TYPE_MULTI = Selection.Multi; + static CHOOSE_TYPE_ALL = Selection.All; + static CHOOSE_TYPE_NONE = Selection.None; + static CHOOSE_TYPE_DEFAULT = Selection.Default; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -46,7 +55,7 @@ export class ButtonGroup extends Widget { behaviors: {}, items: [], value: "", - chooseType: BI.Selection.Single, + chooseType: Selection.Single, layouts: [ { type: CenterLayout.xtype, @@ -61,7 +70,7 @@ export class ButtonGroup extends Widget { const { behaviors: optionsBehaviors, items: optionsItems, value } = this.options; const behaviors = {}; each(optionsBehaviors, (key, rule) => { - behaviors[key] = BI.BehaviorFactory.createBehavior(key, { + behaviors[key] = BehaviorFactory.createBehavior(key, { rule, }); }); @@ -107,7 +116,7 @@ export class ButtonGroup extends Widget { each(buttons, (i, btn) => { btn.on(Controller.EVENT_CHANGE, (...arg) => { const [type, value, obj] = arg; - if (type === BI.Events.CLICK) { + if (type === Events.CLICK) { switch (chooseType) { case ButtonGroup.CHOOSE_TYPE_SINGLE: this.setValue(btn.getValue()); @@ -124,7 +133,7 @@ export class ButtonGroup extends Widget { this.fireEvent(Controller.EVENT_CHANGE, ...arg); } }); - btn.on(BI.Events.DESTROY, () => { + btn.on(Events.DESTROY, () => { remove(this.buttons, btn); }); }); @@ -418,11 +427,3 @@ export class ButtonGroup extends Widget { this.options.items = []; } } - -extend(ButtonGroup, { - CHOOSE_TYPE_SINGLE: BI.Selection.Single, - CHOOSE_TYPE_MULTI: BI.Selection.Multi, - CHOOSE_TYPE_ALL: BI.Selection.All, - CHOOSE_TYPE_NONE: BI.Selection.None, - CHOOSE_TYPE_DEFAULT: BI.Selection.Default, -}); diff --git a/src/base/combination/searcher.js b/src/base/combination/searcher.js index aaa0a1694..eaf583485 100644 --- a/src/base/combination/searcher.js +++ b/src/base/combination/searcher.js @@ -13,7 +13,8 @@ import { deepWithout, nextTick, isEmptyString, - isNull + isNull, + BlankSplitChar } from "@/core"; import { ButtonGroup } from "./group.button"; import { Maskers } from "@/base/0.base"; @@ -109,7 +110,7 @@ export class Searcher extends Widget { search(); break; case BI.Events.PAUSE: - if (endWith(this.getValue(), BI.BlankSplitChar)) { + if (endWith(this.editor.getValue(), BlankSplitChar)) { this._pauseSearch(); } break; @@ -229,14 +230,14 @@ export class Searcher extends Widget { keyword, selectedValues: adapter && adapter.getValue(), }, - (searchResult, matchResult, ...arg) => { + (...args) => { if (!this._stop && keyword === this.editor.getValue()) { - const args = [searchResult, matchResult, ...arg]; - if (args.length > 0) { - args.push(keyword); + const _args = args; + if (_args.length > 0) { + _args.push(keyword); } Maskers.show(this.getName()); - this.popupView.populate.apply(this.popupView, args); + this.popupView.populate.apply(this.popupView, _args); isAutoSync && adapter && adapter.getValue && this.popupView.setValue(adapter.getValue()); this.popupView.loaded && this.popupView.loaded(); this.fireEvent(Searcher.EVENT_SEARCHING); diff --git a/src/base/index.js b/src/base/index.js index 1dc04c850..1edd6b127 100644 --- a/src/base/index.js +++ b/src/base/index.js @@ -1,32 +1,12 @@ -import { Pane } from "./1.pane"; -import * as single from "./single"; -import * as layer from "./layer"; -import * as list from "./list"; -import { GridView } from "./grid/grid"; -import { Pager } from "./pager/pager"; -import * as combination from "./combination"; -import { Msg } from "./foundation/message"; -import * as base from "./0.base"; -import { CollectionView } from "./collection/collection"; -import { CustomTree } from "./tree/customtree"; - -Object.assign(BI, { - Pane, - ...layer, - ...list, - ...single, - GridView, - Pager, - ...combination, - Msg, - ...base, - CollectionView, - CustomTree, -}); +export { Pane } from "./1.pane"; +export { GridView } from "./grid/grid"; +export { Pager } from "./pager/pager"; +export { Msg } from "./foundation/message"; +export { CollectionView } from "./collection/collection"; +export { CustomTree } from "./tree/customtree"; export * from "./0.base"; export * from "./combination"; export * from "./layer"; export * from "./list"; export * from "./single"; -export { Pane, GridView, Pager, Msg, CollectionView, CustomTree }; diff --git a/src/base/layer/layer.drawer.js b/src/base/layer/layer.drawer.js index 395bd9a6c..0b1fdf81f 100644 --- a/src/base/layer/layer.drawer.js +++ b/src/base/layer/layer.drawer.js @@ -1,4 +1,14 @@ -import { HTapeLayout, AbsoluteLayout, Layout, VerticalLayout, Widget, shortcut, isPlainObject, extend } from "@/core"; +import { + VTapeLayout, + HTapeLayout, + AbsoluteLayout, + Layout, + VerticalLayout, + Widget, + shortcut, + isPlainObject, + extend +} from "@/core"; import { Label, IconButton } from "../single"; /** @@ -128,7 +138,7 @@ export class Drawer extends Widget { return extend( { - type: "bi.vtape", + type: VTapeLayout.xtype, items, }, this._getSuitableSize() diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index 4b766acff..7b4c56a54 100644 --- a/src/base/layer/layer.popover.js +++ b/src/base/layer/layer.popover.js @@ -1,4 +1,6 @@ import { + VTapeLayout, + RightVerticalAdaptLayout, HTapeLayout, AbsoluteLayout, VerticalLayout, @@ -202,7 +204,7 @@ export class Popover extends Widget { scrolly: false, } : { - type: "bi.vtape", + type: VTapeLayout.xtype, height: this._getSuitableHeight(size.height), } ); @@ -302,7 +304,7 @@ export class BarPopover extends Popover { const { footer, warningTitle } = this.options; footer || (this.options.footer = { - type: "bi.right_vertical_adapt", + type: RightVerticalAdaptLayout.xtype, lgap: 10, items: [ { diff --git a/src/base/single/0.single.js b/src/base/single/0.single.js index 34ee4ca98..6d2408b4f 100644 --- a/src/base/single/0.single.js +++ b/src/base/single/0.single.js @@ -1,5 +1,5 @@ import { Widget, shortcut, Actions, extend, isKey, isNotNull, isFunction, isPlainObject, isNull, delay } from "@/core"; -import { Tooltips } from "@/base"; +import { Tooltips } from "@/base/0.base"; /** * guy diff --git a/src/base/single/bar/bar.loading.js b/src/base/single/bar/bar.loading.js index 3bfa473b1..03a90fcb4 100644 --- a/src/base/single/bar/bar.loading.js +++ b/src/base/single/bar/bar.loading.js @@ -26,7 +26,7 @@ export class LoadingBar extends Single { handler: this.options.handler, }); this.loaded.on(BI.Controller.EVENT_CHANGE, (...args) => { - this.fireEvent(BI.Controller.EVENT_CHANGE, args); + this.fireEvent(BI.Controller.EVENT_CHANGE, ...args); }); this.loading = BI.createWidget({ diff --git a/src/base/single/button/button.basic.js b/src/base/single/button/button.basic.js index fe952f2ac..1962bccc8 100644 --- a/src/base/single/button/button.basic.js +++ b/src/base/single/button/button.basic.js @@ -12,6 +12,7 @@ import { } from "@/core"; import { BubbleCombo } from "@/case/combo/bubblecombo/combo.bubble"; import { Single } from "../0.single"; +import { BubblePopupView } from "@/case/combo/bubblecombo/popup.bubble"; /** * guy @@ -56,8 +57,8 @@ export class BasicButton extends Single { const opts = this.options; opts.selected = isFunction(opts.selected) ? this.__watch(opts.selected, (context, newValue) => { - this.setSelected(newValue); - }) + this.setSelected(newValue); + }) : opts.selected; super._init(arguments); @@ -105,7 +106,7 @@ export class BasicButton extends Single { right: 0, top: 0, bottom: 0, - }, + } ], }); } @@ -117,7 +118,7 @@ export class BasicButton extends Single { this.$mask.invisible(); } }); - this.element.on(`mouseenter.${this.getName()}`, (e) => { + this.element.on(`mouseenter.${this.getName()}`, e => { if (this.element.__isMouseInBounds__(e)) { if (this.isEnabled() && !this._hover && (o.isShadowShowingOnSelected || !this.isSelected())) { assertMask(); @@ -125,7 +126,7 @@ export class BasicButton extends Single { } } }); - this.element.on(`mousemove.${this.getName()}`, (e) => { + this.element.on(`mousemove.${this.getName()}`, e => { if (!this.element.__isMouseInBounds__(e)) { if (this.isEnabled() && !this._hover) { assertMask(); @@ -158,7 +159,7 @@ export class BasicButton extends Single { return bubble; }; - const clk = (e) => { + const clk = e => { ev(e); if (!this.isEnabled() || !this.isValid()) { return; @@ -179,7 +180,7 @@ export class BasicButton extends Single { trigger: "", // bubble的提示不需要一直存在在界面上 destroyWhenHide: true, - ref: (_ref) => { + ref: _ref => { this.combo = _ref; }, el: { @@ -187,9 +188,9 @@ export class BasicButton extends Single { height: "100%", }, popup: { - type: "bi.text_bubble_bar_popup_view", + type: BubblePopupView.xtype, text: getBubble(), - ref: (_ref) => { + ref: _ref => { popup = _ref; }, listeners: [ @@ -202,7 +203,7 @@ export class BasicButton extends Single { onClick.apply(this, args); } }, - }, + } ], }, listeners: [ @@ -211,14 +212,14 @@ export class BasicButton extends Single { action() { popup.populate(getBubble()); }, - }, + } ], }, left: 0, right: 0, bottom: 0, top: 0, - }, + } ], }); } @@ -234,117 +235,117 @@ export class BasicButton extends Single { }; const triggerArr = (o.trigger || "").split(","); - triggerArr.forEach((trigger) => { + triggerArr.forEach(trigger => { let mouseDown = false; let selected = false; let interval; switch (trigger) { - case "mouseup": - hand.mousedown(() => { - mouseDown = true; - }); - hand.mouseup((e) => { - if (mouseDown === true) { - clk(e); - } - mouseDown = false; - ev(e); - }); - break; - case "mousedown": - // let mouseDown = false; - hand.mousedown((e) => { + case "mouseup": + hand.mousedown(() => { + mouseDown = true; + }); + hand.mouseup(e => { + if (mouseDown === true) { + clk(e); + } + mouseDown = false; + ev(e); + }); + break; + case "mousedown": + // let mouseDown = false; + hand.mousedown(e => { + // if (e.button === 0) { + Widget._renderEngine.createElement(document).bind(`mouseup.${this.getName()}`, e => { // if (e.button === 0) { - Widget._renderEngine.createElement(document).bind(`mouseup.${this.getName()}`, (e) => { - // if (e.button === 0) { - if ( - BI.DOM.isExist(this) && + if ( + BI.DOM.isExist(this) && !hand.__isMouseInBounds__(e) && mouseDown === true && !selected - ) { - // self.setSelected(!self.isSelected()); - this._trigger(); - } - mouseDown = false; - Widget._renderEngine.createElement(document).unbind(`mouseup.${this.getName()}`); - // } - }); - if (mouseDown === true) { - return; - } - if (this.isSelected()) { - selected = true; - } else { - clk(e); + ) { + // self.setSelected(!self.isSelected()); + this._trigger(); } - mouseDown = true; - ev(e); + mouseDown = false; + Widget._renderEngine.createElement(document).unbind(`mouseup.${this.getName()}`); // } }); - hand.mouseup((e) => { - // if (e.button === 0) { - if (BI.DOM.isExist(this) && mouseDown === true && selected === true) { - clk(e); - } + if (mouseDown === true) { + return; + } + if (this.isSelected()) { + selected = true; + } else { + clk(e); + } + mouseDown = true; + ev(e); + // } + }); + hand.mouseup(e => { + // if (e.button === 0) { + if (BI.DOM.isExist(this) && mouseDown === true && selected === true) { + clk(e); + } + mouseDown = false; + selected = false; + Widget._renderEngine.createElement(document).unbind(`mouseup.${this.getName()}`); + // } + }); + break; + case "dblclick": + hand.dblclick(clk); + break; + case "lclick": + hand.mousedown(e => { + Widget._renderEngine.createElement(document).bind(`mouseup.${this.getName()}`, () => { + interval && clearInterval(interval); + interval = null; mouseDown = false; - selected = false; Widget._renderEngine.createElement(document).unbind(`mouseup.${this.getName()}`); - // } }); - break; - case "dblclick": - hand.dblclick(clk); - break; - case "lclick": - hand.mousedown((e) => { - Widget._renderEngine.createElement(document).bind(`mouseup.${this.getName()}`, () => { - interval && clearInterval(interval); - interval = null; - mouseDown = false; - Widget._renderEngine.createElement(document).unbind(`mouseup.${this.getName()}`); - }); - if (mouseDown === true) { - return; - } - if (!this.isEnabled() || !this.isValid()) { - return; - } - if (this.isOnce() && this.isSelected()) { - return; - } - interval = setInterval(() => { - clk(e); - }, 180); - mouseDown = true; + if (mouseDown === true) { + return; + } + if (!this.isEnabled() || !this.isValid()) { + return; + } + if (this.isOnce() && this.isSelected()) { + return; + } + interval = setInterval(() => { + clk(e); + }, 180); + mouseDown = true; + ev(e); + }); + break; + default: + if (o.stopEvent || o.stopPropagation) { + hand.mousedown(e => { ev(e); }); - break; - default: - if (o.stopEvent || o.stopPropagation) { - hand.mousedown((e) => { - ev(e); - }); - } - hand.click(clk); - // enter键等同于点击 - o.attributes && + } + hand.click(clk); + // enter键等同于点击 + o.attributes && o.attributes.zIndex >= 0 && - hand.keyup((e) => { + hand.keyup(e => { if (e.keyCode === BI.KeyCode.ENTER) { clk(e); } }); - break; + break; } }); // 之后的300ms点击无效 const onClick = o.debounce ? BI.debounce(this._doClick, BI.EVENT_RESPONSE_TIME, { - leading: true, - trailing: false, - }) + leading: true, + trailing: false, + }) : this._doClick; function ev(e) { @@ -366,8 +367,8 @@ export class BasicButton extends Single { this.isForceSelected() ? this.setSelected(true) : this.isForceNotSelected() - ? this.setSelected(false) - : this.setSelected(!this.isSelected()); + ? this.setSelected(false) + : this.setSelected(!this.isSelected()); } if (this.isValid()) { const v = this.getValue(); diff --git a/src/base/single/editor/editor.js b/src/base/single/editor/editor.js index 7aba92760..85174dfd6 100644 --- a/src/base/single/editor/editor.js +++ b/src/base/single/editor/editor.js @@ -13,7 +13,7 @@ import { } from "@/core"; import { Label } from "../label"; import { Single } from "../0.single"; -import { Bubbles } from "@/base"; +import { Bubbles } from "@/base/0.base"; /** * Created by GUY on 2015/4/15. diff --git a/src/base/single/editor/editor.textarea.js b/src/base/single/editor/editor.textarea.js index cdfa0966a..50c9b404f 100644 --- a/src/base/single/editor/editor.textarea.js +++ b/src/base/single/editor/editor.textarea.js @@ -16,7 +16,7 @@ import { } from "@/core"; import { Label } from "../label"; import { Single } from "../0.single"; -import { Bubbles } from "@/base"; +import { Bubbles } from "@/base/0.base"; /** * diff --git a/src/bundle.js b/src/bundle.js new file mode 100644 index 000000000..75b93152f --- /dev/null +++ b/src/bundle.js @@ -0,0 +1,4 @@ +import * as fineui from "./index"; +import { shortcut, provider } from "@/core/5.inject"; + +Object.assign(BI, fineui, { shortcut, provider }); diff --git a/src/case/button/icon/icon.change.js b/src/case/button/icon/icon.change.js index 16ebd501d..b56d7c696 100644 --- a/src/case/button/icon/icon.change.js +++ b/src/case/button/icon/icon.change.js @@ -1,6 +1,5 @@ -import { Single } from "../../../base/single/0.single"; -import { IconButton } from "../../../base/single/button/buttons/button.icon"; -import { shortcut, extend, emptyFn, isFunction, createWidget, Controller } from "../../../core"; +import { IconButton, Single } from "@/base"; +import { shortcut, extend, emptyFn, isFunction, createWidget, Controller } from "@/core"; /** * 可以改变图标的button @@ -15,10 +14,9 @@ export class IconChangeButton extends Single { static xtype = "bi.icon_change_button"; static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: "bi-icon-change-button", iconCls: "", @@ -42,12 +40,14 @@ export class IconChangeButton extends Single { _init() { const o = this.options; - o.iconCls = isFunction(o.iconCls) ? this.__watch(o.iconCls, (context, newValue) => { - this.setIcon(newValue); - }) : o.iconCls; + o.iconCls = isFunction(o.iconCls) + ? this.__watch(o.iconCls, (context, newValue) => { + this.setIcon(newValue); + }) + : o.iconCls; super._init(...arguments); this.button = createWidget({ - type: "bi.icon_button", + type: IconButton.xtype, element: this, cls: o.iconCls, height: o.height, diff --git a/src/case/button/icon/icon.trigger.js b/src/case/button/icon/icon.trigger.js index a7606d59b..b22c54cec 100644 --- a/src/case/button/icon/icon.trigger.js +++ b/src/case/button/icon/icon.trigger.js @@ -1,5 +1,5 @@ -import { IconButton } from "../../../base/single/button/buttons/button.icon"; -import { shortcut, extend } from "../../../core"; +import { IconButton } from "@/base"; +import { shortcut, extend } from "@/core"; /** * 统一的trigger图标按钮 @@ -12,10 +12,10 @@ import { shortcut, extend } from "../../../core"; export class TriggerIconButton extends IconButton { static xtype = "bi.trigger_icon_button"; static EVENT_CHANGE = IconButton.EVENT_CHANGE; - + _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-trigger-icon-button overflow-hidden`, extraCls: "pull-down-font", diff --git a/src/case/button/icon/iconhalf/icon.half.image.js b/src/case/button/icon/iconhalf/icon.half.image.js index 24d2d0cea..ca51f65f4 100644 --- a/src/case/button/icon/iconhalf/icon.half.image.js +++ b/src/case/button/icon/iconhalf/icon.half.image.js @@ -1,6 +1,5 @@ -import { IconButton } from "../../../../base/single/button/buttons/button.icon"; -import { shortcut, extend } from "../../../../core"; - +import { IconButton } from "@/base"; +import { shortcut, extend } from "@/core"; /** * guy @@ -10,11 +9,11 @@ import { shortcut, extend } from "../../../../core"; @shortcut() export class HalfIconButton extends IconButton { static xtype = "bi.half_icon_button"; - static EVENT_CHANGE = IconButton.EVENT_CHANGE + static EVENT_CHANGE = IconButton.EVENT_CHANGE; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { extraCls: "bi-half-icon-button check-half-select-icon", height: 16, @@ -25,4 +24,3 @@ export class HalfIconButton extends IconButton { }); } } - diff --git a/src/case/button/icon/iconhalf/icon.half.js b/src/case/button/icon/iconhalf/icon.half.js index a0db816ed..0e84aedae 100644 --- a/src/case/button/icon/iconhalf/icon.half.js +++ b/src/case/button/icon/iconhalf/icon.half.js @@ -1,5 +1,5 @@ -import { BasicButton } from "../../../../base/single/button/button.basic"; -import { shortcut, extend } from "../../../../core"; +import { CenterAdaptLayout, DefaultLayout, shortcut, extend } from "@/core"; +import { BasicButton } from "@/base"; /** * guy @@ -13,7 +13,7 @@ export class HalfButton extends BasicButton { _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { selected: false, width: 14, @@ -25,15 +25,17 @@ export class HalfButton extends BasicButton { render() { const o = this.options; - + return { - type: "bi.center_adapt", - items: [{ - type: "bi.default", - cls: "bi-half-button bi-high-light-border", - width: o.iconWidth, - height: o.iconHeight, - }], + type: CenterAdaptLayout.xtype, + items: [ + { + type: DefaultLayout.xtype, + cls: "bi-half-button bi-high-light-border", + width: o.iconWidth, + height: o.iconHeight, + }, + ], }; } diff --git a/src/case/button/item.multiselect.js b/src/case/button/item.multiselect.js index bd82f2dcc..d39bb97fc 100644 --- a/src/case/button/item.multiselect.js +++ b/src/case/button/item.multiselect.js @@ -1,5 +1,5 @@ -import { BasicButton } from "../../base/single/button/button.basic"; -import { shortcut, extend, createWidget } from "../../core"; +import { Checkbox, Label, BasicButton } from "@/base"; +import { VerticalAdaptLayout, CenterAdaptLayout, shortcut, extend, createWidget } from "@/core"; /** * guy @@ -10,7 +10,6 @@ import { shortcut, extend, createWidget } from "../../core"; export class MultiSelectItem extends BasicButton { static xtype = "bi.multi_select_item"; static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -26,36 +25,39 @@ export class MultiSelectItem extends BasicButton { render() { const o = this.options; this.checkbox = createWidget({ - type: "bi.checkbox", + type: Checkbox.xtype, }); - + return { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: [o.iconWrapperWidth || o.height, "fill"], - items: [{ - type: "bi.center_adapt", - items: [this.checkbox], - }, { - el: { - type: "bi.label", - ref: _ref => { - this.text = _ref; + items: [ + { + type: CenterAdaptLayout.xtype, + items: [this.checkbox], + }, + { + el: { + type: Label.xtype, + ref: (_ref) => { + this.text = _ref; + }, + cls: "list-item-text", + textAlign: "left", + whiteSpace: "nowrap", + textHeight: o.height, + height: o.height, + hgap: o.textHgap, + rgap: o.textRgap, + lgap: o.textLgap, + vgap: o.textVgap, + text: o.text, + keyword: o.keyword, + value: o.value, + py: o.py, }, - cls: "list-item-text", - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.textHgap, - rgap: o.textRgap, - lgap: o.textLgap, - vgap: o.textVgap, - text: o.text, - keyword: o.keyword, - value: o.value, - py: o.py, }, - }], + ], }; } @@ -88,4 +90,3 @@ export class MultiSelectItem extends BasicButton { this.checkbox.setSelected(v); } } - diff --git a/src/case/button/item.singleselect.icontext.js b/src/case/button/item.singleselect.icontext.js index 58e329ff4..c55de1e17 100644 --- a/src/case/button/item.singleselect.icontext.js +++ b/src/case/button/item.singleselect.icontext.js @@ -1,5 +1,5 @@ -import { Single } from "../../base/single/0.single"; -import { shortcut, extend, createWidget, Controller } from "../../core"; +import { IconTextItem, Single } from "@/base"; +import { shortcut, extend, createWidget, Controller } from "@/core"; /** * Created by GUY on 2016/2/2. @@ -25,7 +25,7 @@ export class SingleSelectIconTextItem extends Single { render() { const o = this.options; this.text = createWidget({ - type: "bi.icon_text_item", + type: IconTextItem.xtype, element: this, cls: o.iconCls, once: o.once, @@ -73,5 +73,3 @@ export class SingleSelectIconTextItem extends Single { this.text.unRedMark(...arguments); } } - - diff --git a/src/case/button/item.singleselect.js b/src/case/button/item.singleselect.js index a3fd34b01..9a66ef5f3 100644 --- a/src/case/button/item.singleselect.js +++ b/src/case/button/item.singleselect.js @@ -1,6 +1,6 @@ -import { BasicButton } from "../../base/single/button/button.basic"; -import { shortcut, extend, createWidget } from "../../core"; - +import { Label, BasicButton } from "@/base"; +import { shortcut, extend, createWidget } from "@/core"; + @shortcut() export class SingleSelectItem extends BasicButton { static xtype = "bi.single_select_item"; @@ -21,7 +21,7 @@ export class SingleSelectItem extends BasicButton { render() { const o = this.options; this.text = createWidget({ - type: "bi.label", + type: Label.xtype, element: this, textAlign: o.textAlign, whiteSpace: "nowrap", @@ -66,6 +66,3 @@ export class SingleSelectItem extends BasicButton { super.setSelected(...arguments); } } - - - diff --git a/src/case/button/item.singleselect.radio.js b/src/case/button/item.singleselect.radio.js index 0fd83a4b6..cdee75636 100644 --- a/src/case/button/item.singleselect.radio.js +++ b/src/case/button/item.singleselect.radio.js @@ -1,5 +1,5 @@ -import { BasicButton } from "../../base/single/button/button.basic"; -import { shortcut, extend } from "../../core"; +import { VerticalAdaptLayout, CenterAdaptLayout, shortcut, extend } from "@/core"; +import { Radio, Label, BasicButton } from "@/base"; /** * guy @@ -27,37 +27,42 @@ export class SingleSelectRadioItem extends BasicButton { const o = this.options; return { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: [o.iconWrapperWidth || o.height, "fill"], - items: [{ - type: "bi.center_adapt", - items: [{ - type: "bi.radio", - ref: _ref => { - this.radio = _ref; - }, - }], - }, { - el: { - type: "bi.label", - ref: _ref => { - this.text = _ref; + items: [ + { + type: CenterAdaptLayout.xtype, + items: [ + { + type: Radio.xtype, + ref: (_ref) => { + this.radio = _ref; + }, + }, + ], + }, + { + el: { + type: Label.xtype, + ref: (_ref) => { + this.text = _ref; + }, + cls: "list-item-text", + textAlign: "left", + whiteSpace: "nowrap", + textHeight: o.height, + height: o.height, + hgap: o.hgap || o.textHgap, + vgap: o.textVgap, + lgap: o.textLgap, + rgap: o.textRgap, + text: o.text, + keyword: o.keyword, + value: o.value, + py: o.py, }, - cls: "list-item-text", - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap || o.textHgap, - vgap: o.textVgap, - lgap: o.textLgap, - rgap: o.textRgap, - text: o.text, - keyword: o.keyword, - value: o.value, - py: o.py, }, - }], + ], }; } @@ -90,4 +95,3 @@ export class SingleSelectRadioItem extends BasicButton { this.radio.setSelected(v); } } - diff --git a/src/case/button/node/node.arrow.js b/src/case/button/node/node.arrow.js index dc1834c88..7d1d0118b 100644 --- a/src/case/button/node/node.arrow.js +++ b/src/case/button/node/node.arrow.js @@ -1,5 +1,6 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget } from "../../../core"; +import { ArrowTreeGroupNodeCheckbox } from "../../checkbox"; +import { VerticalAdaptLayout, shortcut, extend, createWidget } from "@/core"; +import { Label, NodeButton } from "@/base"; /** * Created by roy on 15/10/16. @@ -10,7 +11,7 @@ export class ArrowNode extends NodeButton { _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-arrow-group-node bi-list-item`, id: "", @@ -24,34 +25,37 @@ export class ArrowNode extends NodeButton { render() { const o = this.options; this.checkbox = createWidget({ - type: "bi.arrow_group_node_checkbox", + type: ArrowTreeGroupNodeCheckbox.xtype, expandIcon: o.expandIcon, collapseIcon: o.collapseIcon, }); - + return { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: [o.iconWrapperWidth || o.height, "fill"], - items: [this.checkbox, { - el: { - type: "bi.label", - ref: _ref => { - this.text = _ref; + items: [ + this.checkbox, + { + el: { + type: Label.xtype, + ref: (_ref) => { + this.text = _ref; + }, + textAlign: "left", + whiteSpace: "nowrap", + textHeight: o.height, + height: o.height, + hgap: o.hgap || o.textHgap, + vgap: o.textVgap, + lgap: o.textLgap, + rgap: o.textRgap, + text: o.text, + value: o.value, + py: o.py, + keyword: o.keyword, }, - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap || o.textHgap, - vgap: o.textVgap, - lgap: o.textLgap, - rgap: o.textRgap, - text: o.text, - value: o.value, - py: o.py, - keyword: o.keyword, }, - }], + ], }; } @@ -78,4 +82,3 @@ export class ArrowNode extends NodeButton { this.checkbox.setSelected(v); } } - diff --git a/src/case/button/node/node.icon.arrow.js b/src/case/button/node/node.icon.arrow.js index 866568b95..575a8c1c0 100644 --- a/src/case/button/node/node.icon.arrow.js +++ b/src/case/button/node/node.icon.arrow.js @@ -1,5 +1,6 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, Controller, isNotNull } from "../../../core"; +import { ArrowTreeGroupNodeCheckbox } from "../../checkbox"; +import { IconLabel, Label, NodeButton } from "@/base"; +import { shortcut, extend, createWidget, Controller, isNotNull } from "@/core"; /** * Created by User on 2016/3/31. @@ -14,7 +15,7 @@ export class IconArrowNode extends NodeButton { _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-icon-arrow-node bi-list-item`, logic: { @@ -35,7 +36,7 @@ export class IconArrowNode extends NodeButton { super._init.apply(this, arguments); const o = this.options; this.checkbox = createWidget({ - type: "bi.arrow_group_node_checkbox", + type: ArrowTreeGroupNodeCheckbox.xtype, expandIcon: o.expandIcon, collapseIcon: o.collapseIcon, width: 24, @@ -43,7 +44,7 @@ export class IconArrowNode extends NodeButton { }); const icon = createWidget({ - type: "bi.icon_label", + type: IconLabel.xtype, width: 24, cls: o.iconCls, iconWidth: o.iconWidth, @@ -51,7 +52,7 @@ export class IconArrowNode extends NodeButton { }); createWidget({ - type: "bi.label", + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -62,7 +63,7 @@ export class IconArrowNode extends NodeButton { py: o.py, keyword: o.keyword, }); - this.checkbox.on(Controller.EVENT_CHANGE, type => { + this.checkbox.on(Controller.EVENT_CHANGE, (type) => { if (type === BI.Events.CLICK) { if (this.checkbox.isSelected()) { this.triggerExpand(); @@ -72,22 +73,35 @@ export class IconArrowNode extends NodeButton { } }); const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - const items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: o.iconWrapperWidth, - el: this.checkbox, - }, { - width: 16, - el: icon, - }, this.text); - createWidget(extend({ - element: this, - }, BI.LogicFactory.createLogic(type, extend(o.logic, { - items, - rgap: 5, - })))); + const items = BI.LogicFactory.createLogicItemsByDirection( + BI.Direction.Left, + { + width: o.iconWrapperWidth, + el: this.checkbox, + }, + { + width: 16, + el: icon, + }, + this.text + ); + createWidget( + extend( + { + element: this, + }, + BI.LogicFactory.createLogic( + type, + extend(o.logic, { + items, + rgap: 5, + }) + ) + ) + ); } - doRedMark () { + doRedMark() { this.text.doRedMark(...arguments); } diff --git a/src/case/button/node/node.multilayer.icon.arrow.js b/src/case/button/node/node.multilayer.icon.arrow.js index 995bc0327..fb4554741 100644 --- a/src/case/button/node/node.multilayer.icon.arrow.js +++ b/src/case/button/node/node.multilayer.icon.arrow.js @@ -1,5 +1,6 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, Controller, count, makeArray } from "../../../core"; +import { IconArrowNode } from "./node.icon.arrow"; +import { Layout, HorizontalAdaptLayout, shortcut, extend, createWidget, Controller, count, makeArray } from "@/core"; +import { NodeButton } from "@/base"; @shortcut() export class MultiLayerIconArrowNode extends NodeButton { @@ -7,7 +8,7 @@ export class MultiLayerIconArrowNode extends NodeButton { _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { extraCls: "bi-multilayer-icon-arrow-node bi-list-item", layer: 0, // 第几层级 @@ -25,7 +26,7 @@ export class MultiLayerIconArrowNode extends NodeButton { super._init(...arguments); const o = this.options; this.node = createWidget({ - type: "bi.icon_arrow_node", + type: IconArrowNode.xtype, iconCls: o.iconCls, cls: "bi-list-item-none", id: o.id, @@ -48,14 +49,14 @@ export class MultiLayerIconArrowNode extends NodeButton { const items = []; count(0, o.layer, () => { items.push({ - type: "bi.layout", + type: Layout.xtype, width: 15, height: o.height, }); }); items.push(this.node); createWidget({ - type: "bi.horizontal_adapt", + type: HorizontalAdaptLayout.xtype, element: this, columnSize: makeArray(o.layer, 15), items, diff --git a/src/case/button/node/node.plus.js b/src/case/button/node/node.plus.js index 4a4e1b042..d8c632fce 100644 --- a/src/case/button/node/node.plus.js +++ b/src/case/button/node/node.plus.js @@ -1,5 +1,6 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend, createWidget, Controller } from "../../../core"; +import { TreeNodeCheckbox } from "../../checkbox"; +import { VerticalAdaptLayout, shortcut, extend, createWidget, Controller } from "@/core"; +import { Label, NodeButton } from "@/base"; /** * 加号表示的组节点 @@ -10,10 +11,10 @@ import { shortcut, extend, createWidget, Controller } from "../../../core"; @shortcut() export class PlusGroupNode extends NodeButton { static xtype = "bi.plus_group_node"; - + _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-plus-group-node bi-list-item`, id: "", @@ -26,7 +27,7 @@ export class PlusGroupNode extends NodeButton { render() { const o = this.options; this.checkbox = createWidget({ - type: "bi.tree_node_checkbox", + type: TreeNodeCheckbox.xtype, iconHeight: o.height, iconWidth: o.iconWrapperWidth || o.height, }); @@ -37,30 +38,33 @@ export class PlusGroupNode extends NodeButton { } this.fireEvent(Controller.EVENT_CHANGE, args); }); - + return { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: [o.iconWrapperWidth || o.height, "fill"], - items: [this.checkbox, { - el: { - type: "bi.label", - ref: _ref => { - this.text = _ref; + items: [ + this.checkbox, + { + el: { + type: Label.xtype, + ref: (_ref) => { + this.text = _ref; + }, + textAlign: "left", + whiteSpace: "nowrap", + textHeight: o.height, + height: o.height, + hgap: o.hgap || o.textHgap, + vgap: o.textVgap, + lgap: o.textLgap, + rgap: o.textRgap, + text: o.text, + value: o.value, + keyword: o.keyword, + py: o.py, }, - textAlign: "left", - whiteSpace: "nowrap", - textHeight: o.height, - height: o.height, - hgap: o.hgap || o.textHgap, - vgap: o.textVgap, - lgap: o.textLgap, - rgap: o.textRgap, - text: o.text, - value: o.value, - keyword: o.keyword, - py: o.py, }, - }], + ], }; } diff --git a/src/case/button/node/siwtcher.tree.node.js b/src/case/button/node/siwtcher.tree.node.js index 502deb48f..316340039 100644 --- a/src/case/button/node/siwtcher.tree.node.js +++ b/src/case/button/node/siwtcher.tree.node.js @@ -1,11 +1,11 @@ -import { NodeButton } from "../../../base/single/button/button.node"; -import { shortcut, extend } from "../../../core"; +import { IconLabel, NodeButton } from "@/base"; +import { shortcut, extend } from "@/core"; @shortcut() export class TreeNodeSwitcher extends NodeButton { static xtype = "bi.tree_node_switcher"; static EVENT_CHANGE = "EVENT_CHANGE"; - + _defaultConfig() { return extend(super._defaultConfig(...arguments), { baseCls: "bi-tree-node-switcher", @@ -21,7 +21,7 @@ export class TreeNodeSwitcher extends NodeButton { const [collapse, expand] = this.getIconCls(); return { - type: "bi.icon_label", + type: IconLabel.xtype, iconWidth: this.options.iconWidth, iconHeight: this.options.iconHeight, cls: this.options.open ? expand : collapse, @@ -32,16 +32,24 @@ export class TreeNodeSwitcher extends NodeButton { const options = this.options; if (options.layer === 0 && options.isFirstNode && options.isLastNode) { // 只有一层，并且是第一个节点，并且是最后一个节点 - return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type1", "tree-expand-icon-type1"]; + return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] + : ["tree-collapse-icon-type1", "tree-expand-icon-type1"]; } else if (options.layer === 0 && options.isFirstNode) { // 第一层，并且是第一个节点 - return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type2", "tree-expand-icon-type2"]; + return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] + : ["tree-collapse-icon-type2", "tree-expand-icon-type2"]; } else if (options.isLastNode) { // 最后一个节点 - return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type4", "tree-expand-icon-type4"]; + return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] + : ["tree-collapse-icon-type4", "tree-expand-icon-type4"]; } else { // 其他情况 - return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type3", "tree-expand-icon-type3"]; + return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] + : ["tree-collapse-icon-type3", "tree-expand-icon-type3"]; } } diff --git a/src/case/button/switch.js b/src/case/button/switch.js index f40cf3cf4..f51939219 100644 --- a/src/case/button/switch.js +++ b/src/case/button/switch.js @@ -1,10 +1,11 @@ +import { AbsoluteLayout, shortcut } from "@/core"; +import { TextButton, Label, BasicButton } from "@/base"; + + /** * Created by Windy on 2018/2/1. */ -import { BasicButton } from "../../base/single/button/button.basic"; -import { shortcut } from "../../core"; - @shortcut() export class Switch extends BasicButton { static xtype = "bi.switch"; @@ -28,16 +29,16 @@ export class Switch extends BasicButton { const o = this.options, c = this.constants; const tgap = (o.height - c.CIRCLE_SIZE) / 2; - + return { - type: "bi.absolute", - ref: _ref => { + type: AbsoluteLayout.xtype, + ref: (_ref) => { this.layout = _ref; }, items: [ { el: { - type: "bi.text_button", + type: TextButton.xtype, cls: "circle-button", }, width: 12, @@ -46,27 +47,27 @@ export class Switch extends BasicButton { left: o.selected ? 28 : 4, }, { - type: "bi.label", + type: Label.xtype, text: BI.i18nText("BI-Basic_Simple_Open"), cls: "content-tip", left: 8, top: tgap - 2, invisible: !(o.showTip && o.selected), - ref: _ref => { + ref: (_ref) => { this.openTip = _ref; }, }, { - type: "bi.label", + type: Label.xtype, text: BI.i18nText("BI-Basic_Simple_Close"), cls: "content-tip", right: 8, top: tgap - 2, invisible: !(o.showTip && !o.selected), - ref: _ref => { + ref: (_ref) => { this.closeTip = _ref; }, - } + }, ], }; } diff --git a/src/case/button/treeitem/item.icon.treeleaf.js b/src/case/button/treeitem/item.icon.treeleaf.js index dee13e086..a4dd0d3b8 100644 --- a/src/case/button/treeitem/item.icon.treeleaf.js +++ b/src/case/button/treeitem/item.icon.treeleaf.js @@ -1,5 +1,5 @@ -import { BasicButton } from "../../../base/single/button/button.basic"; -import { shortcut, extend, createWidget } from "../../../core"; +import { CenterAdaptLayout, shortcut, extend, createWidget } from "@/core"; +import { Icon, Label, BasicButton } from "@/base"; @shortcut() export class IconTreeLeafItem extends BasicButton { @@ -23,18 +23,20 @@ export class IconTreeLeafItem extends BasicButton { const o = this.options; const icon = createWidget({ - type: "bi.center_adapt", + type: CenterAdaptLayout.xtype, width: 24, cls: o.iconCls, - items: [{ - type: "bi.icon", - width: o.iconWidth, - height: o.iconHeight, - }], + items: [ + { + type: Icon.xtype, + width: o.iconWidth, + height: o.iconHeight, + }, + ], }); this.text = createWidget({ - type: "bi.label", + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -46,18 +48,30 @@ export class IconTreeLeafItem extends BasicButton { keyword: o.keyword, }); const type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left); - const items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, { - width: 16, - el: icon, - }, { - el: this.text, - }); - createWidget(extend({ - element: this, - }, BI.LogicFactory.createLogic(type, extend(o.logic, { - items, - hgap: 5, - })))); + const items = BI.LogicFactory.createLogicItemsByDirection( + BI.Direction.Left, + { + width: 16, + el: icon, + }, + { + el: this.text, + } + ); + createWidget( + extend( + { + element: this, + }, + BI.LogicFactory.createLogic( + type, + extend(o.logic, { + items, + hgap: 5, + }) + ) + ) + ); } doRedMark() { diff --git a/src/case/button/treeitem/item.multilayer.icon.treeleaf.js b/src/case/button/treeitem/item.multilayer.icon.treeleaf.js index 75d67b090..e9fac6ea5 100644 --- a/src/case/button/treeitem/item.multilayer.icon.treeleaf.js +++ b/src/case/button/treeitem/item.multilayer.icon.treeleaf.js @@ -1,5 +1,6 @@ -import { BasicButton } from "../../../base/single/button/button.basic"; -import { shortcut, extend, createWidget, Controller, makeArray, count } from "../../../core"; +import { IconTreeLeafItem } from "./item.icon.treeleaf"; +import { Layout, HorizontalAdaptLayout, shortcut, extend, createWidget, Controller, makeArray, count } from "@/core"; +import { BasicButton } from "@/base"; /** * @class BI.MultiLayerIconTreeLeafItem @@ -8,7 +9,7 @@ import { shortcut, extend, createWidget, Controller, makeArray, count } from ".. @shortcut() export class MultiLayerIconTreeLeafItem extends BasicButton { static xtype = "bi.multilayer_icon_tree_leaf_item"; - + _defaultConfig() { return extend(super._defaultConfig(...arguments), { extraCls: "bi-multilayer-icon-tree-leaf-item bi-list-item-active", @@ -24,7 +25,7 @@ export class MultiLayerIconTreeLeafItem extends BasicButton { super._init(...arguments); const o = this.options; this.item = createWidget({ - type: "bi.icon_tree_leaf_item", + type: IconTreeLeafItem.xtype, cls: "bi-list-item-none", iconCls: o.iconCls, id: o.id, @@ -41,7 +42,8 @@ export class MultiLayerIconTreeLeafItem extends BasicButton { }); this.item.on(Controller.EVENT_CHANGE, (...args) => { const [type] = args; - if (type === BI.Events.CLICK) {// 本身实现click功能 + if (type === BI.Events.CLICK) { + // 本身实现click功能 return; } this.fireEvent(Controller.EVENT_CHANGE, ...args); @@ -50,45 +52,45 @@ export class MultiLayerIconTreeLeafItem extends BasicButton { const items = []; count(0, o.layer, () => { items.push({ - type: "bi.layout", + type: Layout.xtype, width: 15, height: o.height, }); }); items.push(this.item); createWidget({ - type: "bi.horizontal_adapt", + type: HorizontalAdaptLayout.xtype, element: this, columnSize: makeArray(o.layer, 15), items, }); } - doRedMark () { + doRedMark() { this.item.doRedMark(...arguments); } - unRedMark () { + unRedMark() { this.item.unRedMark(...arguments); } - + doHighLight() { this.item.doHighLight(...arguments); } - unHighLight () { + unHighLight() { this.item.unHighLight(...arguments); } - getId () { + getId() { return this.options.id; } - getPId () { + getPId() { return this.options.pId; } - doClick () { + doClick() { super.doClick(...arguments); this.item.setSelected(this.isSelected()); } @@ -102,5 +104,3 @@ export class MultiLayerIconTreeLeafItem extends BasicButton { return this.options.value; } } - - diff --git a/src/case/calendar/calendar.date.item.js b/src/case/calendar/calendar.date.item.js index b1b4ef5c5..f5ea79b1d 100644 --- a/src/case/calendar/calendar.date.item.js +++ b/src/case/calendar/calendar.date.item.js @@ -1,5 +1,5 @@ -import { shortcut } from "@/core"; -import { BasicButton } from "@/base"; +import { AbsoluteLayout, shortcut } from "@/core"; +import { TextItem, BasicButton } from "@/base"; /** * 专门为calendar的视觉加的button，作为私有button,不能配置任何属性，也不要用这个玩意 @@ -15,50 +15,52 @@ export class CalendarDateItem extends BasicButton { static xtype = "bi.calendar_date_item"; - render () { + render() { const { text, value, lgap, rgap, tgap, bgap } = this.options; return { - type: "bi.absolute", - items: [{ - el: { - type: "bi.text_item", - cls: "bi-border-radius bi-list-item-select", - textAlign: "center", - text, - value, - ref: _ref => { - this.text = _ref; + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: TextItem.xtype, + cls: "bi-border-radius bi-list-item-select", + textAlign: "center", + text, + value, + ref: _ref => { + this.text = _ref; + }, }, - }, - left: lgap, - right: rgap, - top: tgap, - bottom: bgap, - }], + left: lgap, + right: rgap, + top: tgap, + bottom: bgap, + } + ], }; } - doHighLight () { + doHighLight() { this.text.doHighLight(...arguments); } - unHighLight () { + unHighLight() { this.text.unHighLight(...arguments); } - setValue () { + setValue() { if (!this.isReadOnly()) { this.text.setValue(...arguments); } } - setSelected (b) { + setSelected(b) { super.setSelected(...arguments); this.text.setSelected(b); } - getValue () { + getValue() { return this.text.getValue(); } } diff --git a/src/case/calendar/calendar.js b/src/case/calendar/calendar.js index b049e18b4..82d97b039 100644 --- a/src/case/calendar/calendar.js +++ b/src/case/calendar/calendar.js @@ -1,4 +1,27 @@ -import { shortcut, Widget, getDate, each, range, extend, isLeapYear, Date, StartOfWeek, checkDateVoid, map, createWidget, createItems, LogicFactory, Controller, getShortDayName, getOffsetDate, isNotEmptyString, parseInt } from "@/core"; +import { Label, ButtonGroup } from "@/base"; +import { + CenterLayout, + shortcut, + Widget, + getDate, + each, + range, + extend, + isLeapYear, + Date, + StartOfWeek, + checkDateVoid, + map, + createWidget, + createItems, + LogicFactory, + Controller, + getShortDayName, + getOffsetDate, + isNotEmptyString, + parseInt +} from "@/core"; +import { CalendarDateItem } from "./calendar.date.item"; /** * Created by GUY on 2015/8/28. @@ -8,17 +31,17 @@ import { shortcut, Widget, getDate, each, range, extend, isLeapYear, Date, Start @shortcut() export class Calendar extends Widget { static xtype = "bi.calendar"; - - static getPageByDateJSON (json) { + + static getPageByDateJSON(json) { const year = getDate().getFullYear(); const month = getDate().getMonth(); let page = (json.year - year) * 12; page += json.month - 1 - month; - + return page; } - static getDateJSONByPage (v) { + static getDateJSONByPage(v) { const months = getDate().getMonth(); let page = v; @@ -29,17 +52,17 @@ export class Calendar extends Widget { if (page < 0 && page % 12 !== 0) { year--; } - const month = page >= 0 ? (page % 12) : ((12 + page % 12) % 12); - + const month = page >= 0 ? page % 12 : (12 + (page % 12)) % 12; + return { year: getDate().getFullYear() + year, month: month + 1, }; } - _defaultConfig () { + _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: "bi-calendar", logic: { @@ -52,8 +75,10 @@ export class Calendar extends Widget { day: 25, }); } - _dateCreator (Y, M, D) { - const { min, max } = this.options, log = {}, De = getDate(); + _dateCreator(Y, M, D) { + const { min, max } = this.options, + log = {}, + De = getDate(); const mins = min.match(/\d+/g); const maxs = max.match(/\d+/g); @@ -78,7 +103,9 @@ export class Calendar extends Widget { const items = []; each(range(42), i => { const td = {}; - let YY = log.ymd[0], MM = log.ymd[1] + 1, DD; + let YY = log.ymd[0], + MM = log.ymd[1] + 1, + DD; // 上个月的日期 if (i < offSetFDay) { td.lastMonth = true; @@ -103,83 +130,101 @@ export class Calendar extends Widget { td.text = DD; items.push(td); }); - + return items; } - _init () { + _init() { super._init(...arguments); const { year, month, day, logic } = this.options; const items = map(this._getWeekLabel(), (i, value) => { return { - type: "bi.label", + type: Label.xtype, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, text: value, }; }); const title = createWidget({ - type: "bi.button_group", + type: ButtonGroup.xtype, height: 44, items, - layouts: [{ - type: "bi.center", - hgap: 5, - vgap: 10, - }], + layouts: [ + { + type: CenterLayout.xtype, + hgap: 5, + vgap: 10, + } + ], }); this.days = createWidget({ - type: "bi.button_group", + type: ButtonGroup.xtype, items: createItems(this._getItems(), {}), value: `${year}-${month}-${day}`, - layouts: [LogicFactory.createLogic("table", extend({}, logic, { - columns: 7, - rows: 6, - columnSize: [1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7], - rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8, - }))], + layouts: [ + LogicFactory.createLogic( + "table", + extend({}, logic, { + columns: 7, + rows: 6, + columnSize: [1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7, 1 / 7], + rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 8, + }) + ) + ], }); this.days.on(Controller.EVENT_CHANGE, (...args) => { this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - createWidget(extend({ - element: this, - - }, LogicFactory.createLogic("vertical", extend({}, logic, { - items: LogicFactory.createLogicItemsByDirection("top", title, { - el: this.days, - tgap: -5, - }), - })))); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + "vertical", + extend({}, logic, { + items: LogicFactory.createLogicItemsByDirection("top", title, { + el: this.days, + tgap: -5, + }), + }) + ) + ) + ); } - _getWeekLabel () { + _getWeekLabel() { return map(range(0, 7), (idx, v) => getShortDayName((v + StartOfWeek) % 7)); } - isFrontDate () { + isFrontDate() { const { year, month, min, max } = this.options; let Y = year; - const M = month, De = getDate(), day = De.getDay(); + const M = month, + De = getDate(), + day = De.getDay(); Y = Y | 0; De.setFullYear(Y, M, 1); const newDate = getOffsetDate(De, -1 * (day + 1)); - + return !!checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), min, max)[0]; } - isFinalDate () { + isFinalDate() { const { year, month, min, max } = this.options; let Y = year; - const M = month, De = getDate(), day = De.getDay(); + const M = month, + De = getDate(), + day = De.getDay(); Y = Y | 0; De.setFullYear(Y, M, 1); const newDate = getOffsetDate(De, 42 - day); - + return !!checkDateVoid(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), min, max)[0]; } - _getItems () { + _getItems() { const o = this.options; const days = this._dateCreator(o.year, o.month - 1, o.day); const items = []; @@ -190,38 +235,40 @@ export class Calendar extends Widget { items.push(days.slice(28, 35)); items.push(days.slice(35, 42)); - return map(items, (i, item) => map(item, (j, td) => { - let month = td.lastMonth ? o.month - 1 : (td.nextMonth ? o.month + 1 : o.month); - let year = o.year; - if (month > 12) { - month = 1; - year++; - } else if (month < 1) { - month = 12; - year--; - } - - return extend(td, { - type: "bi.calendar_date_item", - once: false, - forceSelected: true, - value: `${year}-${month}-${td.text}`, - disabled: td.disabled, - cls: td.lastMonth || td.nextMonth ? "bi-tips" : "", - lgap: 2, - rgap: 2, - tgap: 4, - bgap: 4, - // selected: td.currentDay - }); - })); + return map(items, (i, item) => + map(item, (j, td) => { + let month = td.lastMonth ? o.month - 1 : td.nextMonth ? o.month + 1 : o.month; + let year = o.year; + if (month > 12) { + month = 1; + year++; + } else if (month < 1) { + month = 12; + year--; + } + + return extend(td, { + type: CalendarDateItem.xtype, + once: false, + forceSelected: true, + value: `${year}-${month}-${td.text}`, + disabled: td.disabled, + cls: td.lastMonth || td.nextMonth ? "bi-tips" : "", + lgap: 2, + rgap: 2, + tgap: 4, + bgap: 4, + // selected: td.currentDay + }); + }) + ); } _populate() { this.days.populate(this._getItems()); } - setMinDate (minDate) { + setMinDate(minDate) { const o = this.options; if (isNotEmptyString(o.min)) { o.min = minDate; @@ -229,7 +276,7 @@ export class Calendar extends Widget { } } - setMaxDate (maxDate) { + setMaxDate(maxDate) { const o = this.options; if (isNotEmptyString(o.max)) { o.max = maxDate; @@ -237,13 +284,13 @@ export class Calendar extends Widget { } } - setValue (ob) { + setValue(ob) { this.days.setValue([`${ob.year}-${ob.month}-${ob.day}`]); } - getValue () { + getValue() { const date = this.days.getValue()[0].match(/\d+/g); - + return { year: date[0] | 0, month: date[1] | 0, diff --git a/src/case/calendar/calendar.year.js b/src/case/calendar/calendar.year.js index c8ebc58b0..85321b145 100644 --- a/src/case/calendar/calendar.year.js +++ b/src/case/calendar/calendar.year.js @@ -1,4 +1,23 @@ -import { shortcut, Widget, extend, parseDateTime, range, checkDateVoid, print, getDate, each, createWidget, createItems, LogicFactory, Controller, makeArray, map, isNotEmptyString } from "@/core"; +import { ButtonGroup, TextItem } from "@/base"; +import { + CenterAdaptLayout, + shortcut, + Widget, + extend, + parseDateTime, + range, + checkDateVoid, + print, + getDate, + each, + createWidget, + createItems, + LogicFactory, + Controller, + makeArray, + map, + isNotEmptyString +} from "@/core"; /** * Created by GUY on 2015/8/28. @@ -11,26 +30,26 @@ export class YearCalendar extends Widget { static INTERVAL = 12; // 获取显示的第一年 - static getStartYear (year) { + static getStartYear(year) { const cur = getDate().getFullYear(); - - return year - ((year - cur + 3) % YearCalendar.INTERVAL + 12) % YearCalendar.INTERVAL; + + return year - ((((year - cur + 3) % YearCalendar.INTERVAL) + 12) % YearCalendar.INTERVAL); } - static getEndYear (year) { + static getEndYear(year) { return YearCalendar.getStartYear(year) + YearCalendar.INTERVAL - 1; } - static getPageByYear (year) { + static getPageByYear(year) { const cur = getDate().getFullYear(); year = YearCalendar.getStartYear(year); - + return (year - cur + 3) / YearCalendar.INTERVAL; } - _defaultConfig () { + _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: "bi-year-calendar", behaviors: {}, @@ -43,7 +62,7 @@ export class YearCalendar extends Widget { }); } - _yearCreator (Y) { + _yearCreator(Y) { const { min, max } = this.options; Y = Y | 0; const start = YearCalendar.getStartYear(Y); @@ -53,69 +72,92 @@ export class YearCalendar extends Widget { const endDate = parseDateTime(max, "%Y-%X-%d"); each(range(YearCalendar.INTERVAL), i => { const td = {}; - if (checkDateVoid(start + i, 1, 1, print(getDate(startDate.getFullYear(), 0, 1), "%Y-%X-%d"), print(getDate(endDate.getFullYear(), 0, 1), "%Y-%X-%d"))[0]) { + if ( + checkDateVoid( + start + i, + 1, + 1, + print(getDate(startDate.getFullYear(), 0, 1), "%Y-%X-%d"), + print(getDate(endDate.getFullYear(), 0, 1), "%Y-%X-%d") + )[0] + ) { td.disabled = true; } td.text = start + i; items.push(td); }); - + return items; } - _init () { + _init() { super._init(...arguments); const { behaviors, logic } = this.options; this.currentYear = getDate().getFullYear(); this.years = createWidget({ - type: "bi.button_group", + type: ButtonGroup.xtype, behaviors, items: createItems(this._getItems(), {}), - layouts: [LogicFactory.createLogic("table", extend({}, logic, { - columns: 2, - rows: 6, - columnSize: [1 / 2, 1 / 2], - rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - })), { - type: "bi.center_adapt", - vgap: 2, - }], + layouts: [ + LogicFactory.createLogic( + "table", + extend({}, logic, { + columns: 2, + rows: 6, + columnSize: [1 / 2, 1 / 2], + rowSize: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + }) + ), + { + type: CenterAdaptLayout.xtype, + vgap: 2, + } + ], }); this.years.on(Controller.EVENT_CHANGE, (...args) => { this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - createWidget(extend({ - element: this, - }, LogicFactory.createLogic("vertical", extend({}, logic, { - scrolly: true, - vgap: 5, - hgap: 6, - items: LogicFactory.createLogicItemsByDirection("top", this.years), - })))); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + "vertical", + extend({}, logic, { + scrolly: true, + vgap: 5, + hgap: 6, + items: LogicFactory.createLogicItemsByDirection("top", this.years), + }) + ) + ) + ); } - isFrontYear () { + isFrontYear() { const { min, max } = this.options; let Y = this.options.year; Y = Y | 0; - + return !!checkDateVoid(YearCalendar.getStartYear(Y) - 1, 1, 1, min, max)[0]; } - isFinalYear () { + isFinalYear() { const { min, max } = this.options; let Y = this.options.year; Y = Y | 0; - + return !!checkDateVoid(YearCalendar.getEndYear(Y) + 1, 1, 1, min, max)[0]; } - _getItems () { + _getItems() { const { year } = this.options; const years = this._yearCreator(year || this.currentYear); // 纵向排列年 - const len = years.length, tyears = makeArray(len, ""); + const len = years.length, + tyears = makeArray(len, ""); const mapArr = [0, 6, 1, 7, 2, 8, 3, 9, 4, 10, 5, 11]; each(years, (i, y) => { tyears[i] = years[mapArr[i]]; @@ -129,25 +171,29 @@ export class YearCalendar extends Widget { items.push(tyears.slice(8, 10)); items.push(tyears.slice(10, 12)); - return map(items, (i, item) => map(item, (j, td) => extend(td, { - type: "bi.text_item", - cls: "bi-list-item-select bi-border-radius", - textAlign: "center", - whiteSpace: "normal", - once: false, - forceSelected: true, - height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, - width: 45, - value: td.text, - disabled: td.disabled, - }))); + return map(items, (i, item) => + map(item, (j, td) => + extend(td, { + type: TextItem.xtype, + cls: "bi-list-item-select bi-border-radius", + textAlign: "center", + whiteSpace: "normal", + once: false, + forceSelected: true, + height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, + width: 45, + value: td.text, + disabled: td.disabled, + }) + ) + ); } - _populate () { + _populate() { this.years.populate(this._getItems()); } - setMinDate (minDate) { + setMinDate(minDate) { const o = this.options; if (isNotEmptyString(o.min)) { o.min = minDate; @@ -155,7 +201,7 @@ export class YearCalendar extends Widget { } } - setMaxDate (maxDate) { + setMaxDate(maxDate) { const o = this.options; if (isNotEmptyString(this.options.max)) { o.max = maxDate; @@ -163,11 +209,11 @@ export class YearCalendar extends Widget { } } - setValue (val) { + setValue(val) { this.years.setValue([val]); } - getValue () { + getValue() { return this.years.getValue()[0]; } } diff --git a/src/case/calendar/index.js b/src/case/calendar/index.js index 17c7f5fac..d07f7b8ef 100644 --- a/src/case/calendar/index.js +++ b/src/case/calendar/index.js @@ -1,3 +1,3 @@ -export { CalendarDateItem } from "./calendar.date.item"; -export { Calendar } from "./calendar"; -export { YearCalendar } from "./calendar.year"; +export { CalendarDateItem } from "./calendar.date.item"; +export { Calendar } from "./calendar"; +export { YearCalendar } from "./calendar.year"; diff --git a/src/case/checkbox/check.arrownode.js b/src/case/checkbox/check.arrownode.js index 625e7a6e4..b34751edc 100644 --- a/src/case/checkbox/check.arrownode.js +++ b/src/case/checkbox/check.arrownode.js @@ -1,9 +1,10 @@ +import { shortcut } from "@/core"; +import { IconButton } from "@/base"; + /** * Created by roy on 15/10/16. * 右与下箭头切换的树节点 */ -import { shortcut } from "@/core"; -import { IconButton } from "@/base"; @shortcut() export class ArrowTreeGroupNodeCheckbox extends IconButton { diff --git a/src/case/checkbox/check.checkingmarknode.js b/src/case/checkbox/check.checkingmarknode.js index 4f51a02c1..159988ed0 100644 --- a/src/case/checkbox/check.checkingmarknode.js +++ b/src/case/checkbox/check.checkingmarknode.js @@ -1,10 +1,11 @@ +import { extend, shortcut } from "@/core"; +import { IconButton } from "@/base"; + /** * 十字型的树节点 * @class BI.CheckingMarkNode * @extends BI.IconButton */ -import { extend, shortcut } from "@/core"; -import { IconButton } from "@/base"; @shortcut() export class CheckingMarkNode extends IconButton { diff --git a/src/case/checkbox/check.first.treenode.js b/src/case/checkbox/check.first.treenode.js index bade32c4d..0f7342a25 100644 --- a/src/case/checkbox/check.first.treenode.js +++ b/src/case/checkbox/check.first.treenode.js @@ -1,10 +1,11 @@ +import { extend, shortcut } from "@/core"; +import { IconButton } from "@/base"; + /** * 十字型的树节点 * @class BI.FirstTreeNodeCheckbox * @extends BI.IconButton */ -import { extend, shortcut } from "@/core"; -import { IconButton } from "@/base"; @shortcut() export class FirstTreeNodeCheckbox extends IconButton { @@ -12,7 +13,10 @@ export class FirstTreeNodeCheckbox extends IconButton { _defaultConfig() { return extend(super._defaultConfig(...arguments), { - extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type2" : "tree-collapse-icon-type2", + extraCls: + BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? "tree-solid-collapse-icon-type2" + : "tree-collapse-icon-type2", iconWidth: 24, iconHeight: 24, }); diff --git a/src/case/checkbox/check.last.treenode.js b/src/case/checkbox/check.last.treenode.js index 93ebc9c66..14875f550 100644 --- a/src/case/checkbox/check.last.treenode.js +++ b/src/case/checkbox/check.last.treenode.js @@ -1,10 +1,11 @@ +import { extend, shortcut } from "@/core"; +import { IconButton } from "@/base"; + /** * 十字型的树节点 * @class BI.LastTreeNodeCheckbox * @extends BI.IconButton */ -import { extend, shortcut } from "@/core"; -import { IconButton } from "@/base"; @shortcut() export class LastTreeNodeCheckbox extends IconButton { @@ -12,7 +13,10 @@ export class LastTreeNodeCheckbox extends IconButton { _defaultConfig() { return extend(super._defaultConfig(...arguments), { - extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type4" : "tree-collapse-icon-type4", + extraCls: + BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? "tree-solid-collapse-icon-type4" + : "tree-collapse-icon-type4", iconWidth: 24, iconHeight: 24, }); diff --git a/src/case/checkbox/check.mid.treenode.js b/src/case/checkbox/check.mid.treenode.js index a9d44de0e..e670d87e0 100644 --- a/src/case/checkbox/check.mid.treenode.js +++ b/src/case/checkbox/check.mid.treenode.js @@ -1,10 +1,11 @@ +import { extend, shortcut } from "@/core"; +import { IconButton } from "@/base"; + /** * 十字型的树节点 * @class BI.MidTreeNodeCheckbox * @extends BI.IconButton */ -import { extend, shortcut } from "@/core"; -import { IconButton } from "@/base"; @shortcut() export class MidTreeNodeCheckbox extends IconButton { @@ -12,7 +13,10 @@ export class MidTreeNodeCheckbox extends IconButton { _defaultConfig() { return extend(super._defaultConfig(...arguments), { - extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type3" : "tree-collapse-icon-type3", + extraCls: + BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? "tree-solid-collapse-icon-type3" + : "tree-collapse-icon-type3", iconWidth: 24, iconHeight: 24, }); diff --git a/src/case/checkbox/check.treenode.js b/src/case/checkbox/check.treenode.js index fa1b54404..6dec8d452 100644 --- a/src/case/checkbox/check.treenode.js +++ b/src/case/checkbox/check.treenode.js @@ -1,18 +1,22 @@ +import { extend, shortcut } from "@/core"; +import { IconButton } from "@/base"; + /** * 十字型的树节点 * @class BI.TreeNodeCheckbox * @extends BI.IconButton */ -import { extend, shortcut } from "@/core"; -import { IconButton } from "@/base"; @shortcut() export class TreeNodeCheckbox extends IconButton { static xtype = "bi.tree_node_checkbox"; - + _defaultConfig() { return extend(super._defaultConfig(...arguments), { - extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type1" : "tree-collapse-icon-type1", + extraCls: + BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" + ? "tree-solid-collapse-icon-type1" + : "tree-collapse-icon-type1", iconWidth: 24, iconHeight: 24, }); diff --git a/src/case/colorchooser/colorchooser.custom.js b/src/case/colorchooser/colorchooser.custom.js index dd8bf8350..3b260d339 100644 --- a/src/case/colorchooser/colorchooser.custom.js +++ b/src/case/colorchooser/colorchooser.custom.js @@ -1,6 +1,7 @@ -import { shortcut, Widget, extend, createWidget } from "@/core"; -import { ColorPickerEditor } from "./colorpicker"; +import { SimpleHexColorPickerEditor, ColorPickerEditor } from "./colorpicker"; import { Farbtastic } from "./farbtastic/farbtastic"; +import { VTapeLayout, AbsoluteLayout, shortcut, Widget, extend, createWidget } from "@/core"; + /** * 自定义选色 @@ -27,14 +28,14 @@ export class CustomColorChooser extends Widget { super._init(...arguments); const o = this.options; this.editor = createWidget(o.editor, { - type: "bi.simple_hex_color_picker_editor", + type: SimpleHexColorPickerEditor.xtype, value: o.value, }); this.editor.on(ColorPickerEditor.EVENT_CHANGE, () => { this.setValue(this.editor.getValue()); }); this.farbtastic = createWidget({ - type: "bi.farbtastic", + type: Farbtastic.xtype, value: o.value, }); this.farbtastic.on(Farbtastic.EVENT_CHANGE, () => { @@ -42,27 +43,34 @@ export class CustomColorChooser extends Widget { }); createWidget({ - type: "bi.vtape", + type: VTapeLayout.xtype, element: this, - items: [{ - type: "bi.absolute", - items: [{ - el: this.editor, - left: 10, - top: 0, - right: 10, - }], - height: 50, - }, { - type: "bi.absolute", - items: [{ - el: this.farbtastic, - left: 46, - right: 46, - top: 7, - }], - height: 215, - }], + items: [ + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.editor, + left: 10, + top: 0, + right: 10, + }, + ], + height: 50, + }, + { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.farbtastic, + left: 46, + right: 46, + top: 7, + }, + ], + height: 215, + }, + ], }); } @@ -75,4 +83,3 @@ export class CustomColorChooser extends Widget { return this.editor.getValue(); } } - diff --git a/src/case/colorchooser/colorchooser.js b/src/case/colorchooser/colorchooser.js index 20b410a68..7b075eae0 100644 --- a/src/case/colorchooser/colorchooser.js +++ b/src/case/colorchooser/colorchooser.js @@ -1,5 +1,6 @@ -import { shortcut, Widget, extend, createWidget, toPix, isNotEmptyString } from "@/core"; import { Combo } from "@/base"; +import { HexColorChooserPopup } from "./colorchooser.popup.hex"; +import { shortcut, Widget, extend, createWidget, toPix, isNotEmptyString } from "@/core"; import { ColorChooserPopup } from "./colorchooser.popup"; /** @@ -36,47 +37,56 @@ export class ColorChooser extends Widget { super._init(...arguments); o.value = (o.value || "").toLowerCase(); this.combo = createWidget({ - type: "bi.combo", + type: Combo.xtype, element: this, container: o.container, adjustLength: 1, destroyWhenHide: o.destroyWhenHide, isNeedAdjustWidth: false, isNeedAdjustHeight: false, - el: extend({ - type: o.width <= 24 ? "bi.color_chooser_trigger" : "bi.long_color_chooser_trigger", - simple: o.simple, - ref: _ref => { - this.trigger = _ref; + el: extend( + { + type: o.width <= 24 ? "bi.color_chooser_trigger" : "bi.long_color_chooser_trigger", + simple: o.simple, + ref: _ref => { + this.trigger = _ref; + }, + value: o.value, + width: o.el.type ? o.width : toPix(o.width, 2), + height: o.el.type ? o.height : toPix(o.height, 2), }, - value: o.value, - width: o.el.type ? o.width : toPix(o.width, 2), - height: o.el.type ? o.height : toPix(o.height, 2), - }, o.el), + o.el + ), popup: () => { return { - el: extend({ - type: "bi.hex_color_chooser_popup", - recommendColorsGetter: o.recommendColorsGetter, - ref: _ref => { - this.colorPicker = _ref; - }, - listeners: [{ - eventName: ColorChooserPopup.EVENT_VALUE_CHANGE, - action: () => { - fn(); - if (!this._isRGBColor(this.colorPicker.getValue())) { - this.combo.hideView(); - } - }, - }, { - eventName: ColorChooserPopup.EVENT_CHANGE, - action: () => { - fn(); - this.combo.hideView(); + el: extend( + { + type: HexColorChooserPopup.xtype, + recommendColorsGetter: o.recommendColorsGetter, + ref: _ref => { + this.colorPicker = _ref; }, - }], - }, o.popup), + listeners: [ + { + eventName: ColorChooserPopup.EVENT_VALUE_CHANGE, + action: () => { + fn(); + if (!this._isRGBColor(this.colorPicker.getValue())) { + this.combo.hideView(); + } + }, + }, + { + eventName: ColorChooserPopup.EVENT_CHANGE, + action: () => { + fn(); + this.combo.hideView(); + }, + } + ], + }, + o.popup + ), value: o.value, width: 300, }; diff --git a/src/case/colorchooser/colorchooser.popup.hex.js b/src/case/colorchooser/colorchooser.popup.hex.js index ce0506e95..7d0f5b02a 100644 --- a/src/case/colorchooser/colorchooser.popup.hex.js +++ b/src/case/colorchooser/colorchooser.popup.hex.js @@ -1,7 +1,26 @@ -import { shortcut, Widget, isNotNull, extend, isNotEmptyString, array2String, map, count, string2Array, filter, isArray, Cache, Queue } from "@/core"; -import { Combo } from "@/base"; +import { + VerticalLayout, + Layout, + AbsoluteLayout, + shortcut, + Widget, + isNotNull, + extend, + isNotEmptyString, + array2String, + map, + count, + string2Array, + filter, + isArray, + Cache, + Queue +} from "@/core"; +import { Label, Combo, TextItem } from "@/base"; +import { PopupPanel } from "../layer"; +import { CustomColorChooser } from "./colorchooser.custom"; import { ColorChooserPopup } from "./colorchooser.popup"; -import { ColorPickerEditor, ColorPicker } from "./colorpicker"; +import { ColorPickerEditor, ColorPicker, HexColorPicker } from "./colorpicker"; /** * @author windy @@ -20,203 +39,244 @@ export class HexColorChooserPopup extends Widget { width: 300, recommendColorsGetter: BI.emptyFn, // 推荐色获取接口 simple: false, // 简单模式, popup中没有自动和透明 - } + }; render() { const o = this.options; const hasRecommendColors = isNotNull(o.recommendColorsGetter()); - - return [{ - type: "bi.vertical", - items: [{ - el: { - type: "bi.vertical", - hgap: 15, - items: [extend({ - type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor", - value: o.value, - height: o.simple ? 36 : 70, - listeners: [{ - eventName: ColorPickerEditor.EVENT_CHANGE, - action: (...args) => { - this.setValue(this.colorEditor.getValue()); - this._dealStoreColors(); - this.fireEvent(ColorChooserPopup.EVENT_VALUE_CHANGE, ...args); - }, - }], - ref: _ref => { - this.colorEditor = _ref; - }, - }, o.editor), { + + return [ + { + type: VerticalLayout.xtype, + items: [ + { el: { - type: "bi.hex_color_picker", - cls: "bi-border-bottom bi-border-right", - items: [this._digestStoreColors(this._getStoreColors())], - height: 22, - value: o.value, - listeners: [{ - eventName: ColorPicker.EVENT_CHANGE, - action: (...args) => { - this.setValue(this.storeColors.getValue()[0]); - this._dealStoreColors(); - this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); + type: VerticalLayout.xtype, + hgap: 15, + items: [ + extend( + { + type: o.simple + ? "bi.simple_hex_color_picker_editor" + : "bi.hex_color_picker_editor", + value: o.value, + height: o.simple ? 36 : 70, + listeners: [ + { + eventName: ColorPickerEditor.EVENT_CHANGE, + action: (...args) => { + this.setValue(this.colorEditor.getValue()); + this._dealStoreColors(); + this.fireEvent(ColorChooserPopup.EVENT_VALUE_CHANGE, ...args); + }, + } + ], + ref: _ref => { + this.colorEditor = _ref; + }, + }, + o.editor + ), + { + el: { + type: HexColorPicker.xtype, + cls: "bi-border-bottom bi-border-right", + items: [this._digestStoreColors(this._getStoreColors())], + height: 22, + value: o.value, + listeners: [ + { + eventName: ColorPicker.EVENT_CHANGE, + action: (...args) => { + this.setValue(this.storeColors.getValue()[0]); + this._dealStoreColors(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); + }, + } + ], + ref: _ref => { + this.storeColors = _ref; + }, + }, + tgap: 10, + height: 22, }, - }], - ref: _ref => { - this.storeColors = _ref; - }, - }, - tgap: 10, - height: 22, - }, { - el: hasRecommendColors ? { - type: "bi.vertical", - items: [{ - type: "bi.label", - text: BI.i18nText("BI-Basic_Recommend_Color"), - textAlign: "left", - height: 24, - }, { - type: "bi.hex_color_picker", - cls: "bi-border-bottom bi-border-right", - items: [this._digestStoreColors(o.recommendColorsGetter())], - height: 22, - value: o.value, - listeners: [{ - eventName: ColorPicker.EVENT_CHANGE, - action: (...args) => { - this.setValue(this.recommendColors.getValue()[0]); - this._dealStoreColors(); - this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); + { + el: hasRecommendColors + ? { + type: VerticalLayout.xtype, + items: [ + { + type: Label.xtype, + text: BI.i18nText("BI-Basic_Recommend_Color"), + textAlign: "left", + height: 24, + }, + { + type: HexColorPicker.xtype, + cls: "bi-border-bottom bi-border-right", + items: [this._digestStoreColors(o.recommendColorsGetter())], + height: 22, + value: o.value, + listeners: [ + { + eventName: ColorPicker.EVENT_CHANGE, + action: (...args) => { + this.setValue(this.recommendColors.getValue()[0]); + this._dealStoreColors(); + this.fireEvent( + ColorChooserPopup.EVENT_CHANGE, + ...args + ); + }, + } + ], + ref: _ref => { + this.recommendColors = _ref; + }, + } + ], + } + : { type: Layout.xtype }, + tgap: hasRecommendColors ? 10 : 0, + height: hasRecommendColors ? 47 : 0, + }, + { + el: { + type: Layout.xtype, + cls: "bi-border-top", }, - }], - ref: _ref => { - this.recommendColors = _ref; + vgap: 10, + height: 1, }, - }], - } : { type: "bi.layout" }, - tgap: hasRecommendColors ? 10 : 0, - height: hasRecommendColors ? 47 : 0, - }, { + { + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: HexColorPicker.xtype, + space: true, + value: o.value, + listeners: [ + { + eventName: ColorPicker.EVENT_CHANGE, + action: (...args) => { + this.setValue(this.colorPicker.getValue()[0]); + this._dealStoreColors(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); + }, + } + ], + ref: _ref => { + this.colorPicker = _ref; + }, + }, + top: 0, + left: 0, + right: 0, + bottom: 1, + } + ], + height: 80, + } + ], + }, + }, + { el: { - type: "bi.layout", + type: Combo.xtype, cls: "bi-border-top", - }, - vgap: 10, - height: 1, - }, { - type: "bi.absolute", - items: [{ + container: null, + direction: "right,top", + isNeedAdjustHeight: false, el: { - type: "bi.hex_color_picker", - space: true, - value: o.value, - listeners: [{ - eventName: ColorPicker.EVENT_CHANGE, - action: (...args) => { - this.setValue(this.colorPicker.getValue()[0]); - this._dealStoreColors(); - this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args); + type: TextItem.xtype, + cls: "color-chooser-popup-more bi-list-item", + textAlign: "center", + height: 24, + textLgap: 10, + text: `${BI.i18nText("BI-Basic_More")}...`, + }, + popup: { + type: PopupPanel.xtype, + buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")], + title: BI.i18nText("BI-Custom_Color"), + el: { + type: CustomColorChooser.xtype, + value: o.value, + editor: o.editor, + ref: _ref => { + this.customColorChooser = _ref; }, - }], - ref: _ref => { - this.colorPicker = _ref; }, + stopPropagation: false, + bgap: -1, + rgap: 1, + lgap: 1, + minWidth: 227, + listeners: [ + { + eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, + action: (index, ...args) => { + switch (index) { + case 0: + this.more.hideView(); + break; + case 1: { + const color = this.customColorChooser.getValue(); + // farbtastic选择器没有透明和自动选项，点击保存不应该设置透明 + if (isNotEmptyString(color)) { + this.setValue(color); + this._dealStoreColors(); + } + this.more.hideView(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args); + break; + } + default: + break; + } + }, + } + ], }, - top: 0, - left: 0, - right: 0, - bottom: 1, - }], - height: 80, - }], - }, - }, { - el: { - type: "bi.combo", - cls: "bi-border-top", - container: null, - direction: "right,top", - isNeedAdjustHeight: false, - el: { - type: "bi.text_item", - cls: "color-chooser-popup-more bi-list-item", - textAlign: "center", - height: 24, - textLgap: 10, - text: `${BI.i18nText("BI-Basic_More")}...`, - }, - popup: { - type: "bi.popup_panel", - buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")], - title: BI.i18nText("BI-Custom_Color"), - el: { - type: "bi.custom_color_chooser", - value: o.value, - editor: o.editor, + listeners: [ + { + eventName: Combo.EVENT_AFTER_POPUPVIEW, + action: () => { + this.customColorChooser.setValue(this.getValue()); + }, + } + ], ref: _ref => { - this.customColorChooser = _ref; + this.more = _ref; }, }, - stopPropagation: false, - bgap: -1, - rgap: 1, - lgap: 1, - minWidth: 227, - listeners: [{ - eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, - action: (index, ...args) => { - switch (index) { - case 0: - this.more.hideView(); - break; - case 1: { - const color = this.customColorChooser.getValue(); - // farbtastic选择器没有透明和自动选项，点击保存不应该设置透明 - if (isNotEmptyString(color)) { - this.setValue(color); - this._dealStoreColors(); - } - this.more.hideView(); - this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args); - break; - } - default: - break; - } + tgap: 10, + height: 24, + } + ], + }, + { + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: Layout.xtype, + cls: "disable-mask", + invisible: !o.disabled, + ref: () => { + this.mask = this; }, - }], - }, - listeners: [{ - eventName: Combo.EVENT_AFTER_POPUPVIEW, - action: () => { - this.customColorChooser.setValue(this.getValue()); }, - }], - ref: _ref => { - this.more = _ref; - }, - }, - tgap: 10, - height: 24, - }], - }, { - type: "bi.absolute", - items: [{ - el: { - type: "bi.layout", - cls: "disable-mask", - invisible: !o.disabled, - ref: () => { - this.mask = this; - }, - }, - left: 0, - right: 0, - top: 0, - bottom: 0, - }], - }]; + left: 0, + right: 0, + top: 0, + bottom: 0, + } + ], + } + ]; } // 这里就实现的不好了，setValue里面有个editor，editor的setValue会检测错误然后出bubble提示 @@ -256,15 +316,15 @@ export class HexColorChooserPopup extends Widget { disabled: true, }); }); - + return items; } _getStoreColors() { const o = this.options; const colorsArray = string2Array(Cache.getItem("colors") || ""); - - return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true); + + return filter(colorsArray, (idx, color) => (o.simple ? this._isRGBColor(color) : true)); } _isRGBColor(color) { diff --git a/src/case/colorchooser/colorchooser.popup.hex.simple.js b/src/case/colorchooser/colorchooser.popup.hex.simple.js index 608017de2..7ccaa9558 100644 --- a/src/case/colorchooser/colorchooser.popup.hex.simple.js +++ b/src/case/colorchooser/colorchooser.popup.hex.simple.js @@ -1,3 +1,4 @@ +import { HexColorChooserPopup } from "./colorchooser.popup.hex"; import { shortcut, Widget } from "@/core"; import { ColorChooserPopup } from "./colorchooser.popup"; import { SimpleColorChooserPopup } from "./colorchooser.popup.simple"; @@ -16,27 +17,30 @@ export class SimpleHexColorChooserPopup extends Widget { props = { baseCls: "bi-color-chooser-popup", - } + }; render() { const o = this.options; return { - type: "bi.hex_color_chooser_popup", + type: HexColorChooserPopup.xtype, recommendColorsGetter: o.recommendColorsGetter, value: o.value, simple: true, // 是否有自动 - listeners: [{ - eventName: ColorChooserPopup.EVENT_CHANGE, - action: (...args) => { - this.fireEvent(SimpleColorChooserPopup.EVENT_CHANGE, ...args); - }, - }, { - eventName: ColorChooserPopup.EVENT_VALUE_CHANGE, - action: (...args) => { - this.fireEvent(SimpleColorChooserPopup.EVENT_VALUE_CHANGE, ...args); + listeners: [ + { + eventName: ColorChooserPopup.EVENT_CHANGE, + action: (...args) => { + this.fireEvent(SimpleColorChooserPopup.EVENT_CHANGE, ...args); + }, }, - }], + { + eventName: ColorChooserPopup.EVENT_VALUE_CHANGE, + action: (...args) => { + this.fireEvent(SimpleColorChooserPopup.EVENT_VALUE_CHANGE, ...args); + }, + } + ], ref: _ref => { this.popup = _ref; }, diff --git a/src/case/colorchooser/colorchooser.popup.js b/src/case/colorchooser/colorchooser.popup.js index 7580e7a52..30ffe11fc 100644 --- a/src/case/colorchooser/colorchooser.popup.js +++ b/src/case/colorchooser/colorchooser.popup.js @@ -1,5 +1,24 @@ -import { shortcut, Widget, createWidget, Cache, string2Array, isNotNull, Queue, array2String, map, count, filter, isNotEmptyString, isArray } from "@/core"; -import { Combo } from "@/base"; +import { CustomColorChooser } from "./colorchooser.custom"; +import { PopupPanel } from "../layer"; +import { Combo, TextItem } from "@/base"; +import { + AbsoluteLayout, + VTapeLayout, + Layout, + shortcut, + Widget, + createWidget, + Cache, + string2Array, + isNotNull, + Queue, + array2String, + map, + count, + filter, + isNotEmptyString, + isArray +} from "@/core"; import { ColorPickerEditor, ColorPicker } from "./colorpicker"; /** @@ -21,9 +40,9 @@ export class ColorChooserPopup extends Widget { width: 230, height: 145, simple: false, // 简单模式, popup中没有自动和透明 - } + }; - render () { + render() { const o = this.options; this.colorEditor = createWidget(o.editor, { type: o.simple ? "bi.simple_color_picker_editor" : "bi.color_picker_editor", @@ -39,7 +58,7 @@ export class ColorChooserPopup extends Widget { }); this.storeColors = createWidget({ - type: "bi.color_picker", + type: ColorPicker.xtype, cls: "bi-border-bottom bi-border-right", items: [this._digestStoreColors(this._getStoreColors())], width: 210, @@ -53,7 +72,7 @@ export class ColorChooserPopup extends Widget { }); this.colorPicker = createWidget({ - type: "bi.color_picker", + type: ColorPicker.xtype, width: 210, height: 50, value: o.value, @@ -66,12 +85,12 @@ export class ColorChooserPopup extends Widget { }); this.customColorChooser = createWidget({ - type: "bi.custom_color_chooser", + type: CustomColorChooser.xtype, editor: o.editor, }); const panel = createWidget({ - type: "bi.popup_panel", + type: PopupPanel.xtype, buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")], title: BI.i18nText("BI-Custom_Color"), el: this.customColorChooser, @@ -83,13 +102,13 @@ export class ColorChooserPopup extends Widget { }); this.more = createWidget({ - type: "bi.combo", + type: Combo.xtype, cls: "bi-border-top", container: null, direction: "right,top", isNeedAdjustHeight: false, el: { - type: "bi.text_item", + type: TextItem.xtype, cls: "color-chooser-popup-more bi-list-item", textAlign: "center", height: 24, @@ -104,88 +123,100 @@ export class ColorChooserPopup extends Widget { }); panel.on(BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, (index, ...args) => { switch (index) { - case 0: - this.more.hideView(); - break; - case 1: - this.setValue(this.customColorChooser.getValue()); - this._dealStoreColors(); - this.more.hideView(); - this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args); - break; - default: - break; + case 0: + this.more.hideView(); + break; + case 1: + this.setValue(this.customColorChooser.getValue()); + this._dealStoreColors(); + this.more.hideView(); + this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args); + break; + default: + break; } }); return { - type: "bi.absolute", - items: [{ - el: { - type: "bi.vtape", - items: [this.colorEditor, { - el: { - type: "bi.absolute", - items: [{ - el: this.storeColors, - left: 10, - right: 10, - top: 5, - }], - }, - height: 29, - }, { - el: { - type: "bi.absolute", - items: [{ - el: this.colorPicker, - left: 10, - right: 10, - top: 5, - bottom: 5, - }], - }, - height: 60, - }, { - el: this.more, - height: 24, - }], + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: VTapeLayout.xtype, + items: [ + this.colorEditor, + { + el: { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.storeColors, + left: 10, + right: 10, + top: 5, + }, + ], + }, + height: 29, + }, + { + el: { + type: AbsoluteLayout.xtype, + items: [ + { + el: this.colorPicker, + left: 10, + right: 10, + top: 5, + bottom: 5, + }, + ], + }, + height: 60, + }, + { + el: this.more, + height: 24, + }, + ], + }, + left: 0, + right: 0, + top: 0, + bottom: 0, }, - left: 0, - right: 0, - top: 0, - bottom: 0, - }, { - el: { - type: "bi.layout", - cls: "disable-mask", - invisible: !o.disabled, - ref: () => { - this.mask = this; + { + el: { + type: Layout.xtype, + cls: "disable-mask", + invisible: !o.disabled, + ref: () => { + this.mask = this; + }, }, + left: 0, + right: 0, + top: 0, + bottom: 0, }, - left: 0, - right: 0, - top: 0, - bottom: 0, - }], + ], }; } // 这里就实现的不好了，setValue里面有个editor，editor的setValue会检测错误然后出bubble提示 - mounted () { + mounted() { const o = this.options; if (isNotNull(o.value)) { this.setValue(o.value); } } - _setEnable (enable) { + _setEnable(enable) { super._setEnable(...arguments); this.mask.setVisible(!enable); } - _dealStoreColors () { + _dealStoreColors() { const color = this.getValue(); const colors = this._getStoreColors(); const que = new Queue(8); @@ -197,34 +228,34 @@ export class ColorChooserPopup extends Widget { this.setStoreColors(array); } - _digestStoreColors (colors) { + _digestStoreColors(colors) { const items = map(colors, (i, color) => { return { value: color, }; }); - count(colors.length, 8, i => { + count(colors.length, 8, (i) => { items.push({ value: "", disabled: true, }); }); - + return items; } _getStoreColors() { const o = this.options; const colorsArray = string2Array(Cache.getItem("colors") || ""); - - return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true); + + return filter(colorsArray, (idx, color) => (o.simple ? this._isRGBColor(color) : true)); } - _isRGBColor (color) { + _isRGBColor(color) { return isNotEmptyString(color) && color !== "transparent"; } - setStoreColors (colors) { + setStoreColors(colors) { if (isArray(colors)) { this.storeColors.populate([this._digestStoreColors(colors)]); // BI-66973 选中颜色的同时选中历史 @@ -232,13 +263,13 @@ export class ColorChooserPopup extends Widget { } } - setValue (color) { + setValue(color) { this.colorEditor.setValue(color); this.colorPicker.setValue(color); this.storeColors.setValue(color); } - getValue () { + getValue() { return this.colorEditor.getValue(); } } diff --git a/src/case/colorchooser/colorchooser.simple.js b/src/case/colorchooser/colorchooser.simple.js index 6cf9d9ded..f6eaf762d 100644 --- a/src/case/colorchooser/colorchooser.simple.js +++ b/src/case/colorchooser/colorchooser.simple.js @@ -1,3 +1,4 @@ +import { SimpleHexColorChooserPopup } from "./colorchooser.popup.hex.simple"; import { shortcut, Widget, extend, createWidget } from "@/core"; import { ColorChooser } from "./colorchooser"; @@ -27,7 +28,7 @@ export class SimpleColorChooser extends Widget { const o = this.options; this.combo = createWidget({ - type: "bi.color_chooser", + type: ColorChooser.xtype, simple: o.simple, element: this, container: o.container, @@ -36,7 +37,7 @@ export class SimpleColorChooser extends Widget { height: o.height, destroyWhenHide: o.destroyWhenHide, popup: { - type: "bi.simple_hex_color_chooser_popup", + type: SimpleHexColorChooserPopup.xtype, recommendColorsGetter: o.recommendColorsGetter, }, }); diff --git a/src/case/colorchooser/colorchooser.trigger.js b/src/case/colorchooser/colorchooser.trigger.js index 1187a8460..8412362d0 100644 --- a/src/case/colorchooser/colorchooser.trigger.js +++ b/src/case/colorchooser/colorchooser.trigger.js @@ -1,5 +1,5 @@ -import { shortcut, extend, createWidget, isNotNull } from "@/core"; -import { Trigger } from "@/base"; +import { Layout, AbsoluteLayout, shortcut, extend, createWidget, isNotNull } from "@/core"; +import { IconButton, Trigger } from "@/base"; /** * 选色控件 @@ -14,24 +14,26 @@ export class ColorChooserTrigger extends Trigger { static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig (config) { + _defaultConfig(config) { const conf = super._defaultConfig(...arguments); - + return extend(conf, { - baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`, + baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${ + config.simple ? "bi-border-bottom" : "bi-border bi-border-radius" + }`, height: 22, }); } - _init () { + _init() { super._init(...arguments); this.colorContainer = createWidget({ - type: "bi.layout", - cls: "color-chooser-trigger-content" + (BI.isIE9Below && BI.isIE9Below() ? " hack" : "") + type: Layout.xtype, + cls: `color-chooser-trigger-content${BI.isIE9Below && BI.isIE9Below() ? " hack" : ""}`, }); const down = createWidget({ - type: "bi.icon_button", + type: IconButton.xtype, disableSelected: true, cls: "icon-combo-down-icon trigger-triangle-font icon-size-12", width: 12, @@ -39,33 +41,45 @@ export class ColorChooserTrigger extends Trigger { }); createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.colorContainer, - left: 2, - right: 2, - top: 2, - bottom: 2, - }, { - el: down, - right: -1, - bottom: 1, - }], + items: [ + { + el: this.colorContainer, + left: 2, + right: 2, + top: 2, + bottom: 2, + }, + { + el: down, + right: -1, + bottom: 1, + } + ], }); if (isNotNull(this.options.value)) { this.setValue(this.options.value); } } - setValue (color) { + setValue(color) { super.setValue(...arguments); if (color === "") { - this.colorContainer.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background"); + this.colorContainer.element + .css("background-color", "") + .removeClass("trans-color-background") + .addClass("auto-color-background"); } else if (color === "transparent") { - this.colorContainer.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background"); + this.colorContainer.element + .css("background-color", "") + .removeClass("auto-color-background") + .addClass("trans-color-background"); } else { - this.colorContainer.element.css({ "background-color": color }).removeClass("auto-color-background").removeClass("trans-color-background"); + this.colorContainer.element + .css({ "background-color": color }) + .removeClass("auto-color-background") + .removeClass("trans-color-background"); } } } diff --git a/src/case/colorchooser/colorchooser.trigger.long.js b/src/case/colorchooser/colorchooser.trigger.long.js index 8210e111e..5f80f9979 100644 --- a/src/case/colorchooser/colorchooser.trigger.long.js +++ b/src/case/colorchooser/colorchooser.trigger.long.js @@ -1,5 +1,6 @@ -import { shortcut, extend, createWidget } from "@/core"; -import { Trigger } from "@/base"; +import { HTapeLayout, AbsoluteLayout, shortcut, extend, createWidget } from "@/core"; +import { IconChangeButton } from "../button"; +import { Label, IconButton, Trigger } from "@/base"; /** * 选色控件 @@ -14,46 +15,51 @@ export class LongColorChooserTrigger extends Trigger { static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig (config) { + _defaultConfig(config) { const conf = super._defaultConfig(...arguments); - + return extend(conf, { - baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`, + baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${ + config.simple ? "bi-border-bottom" : "bi-border bi-border-radius" + }`, height: 24, }); } - _init () { + _init() { super._init(...arguments); this.colorContainer = createWidget({ - type: "bi.htape", + type: HTapeLayout.xtype, cls: "color-chooser-trigger-content", - items: [{ - type: "bi.icon_change_button", - ref: _ref => { - this.changeIcon = _ref; - }, - disableSelected: true, - iconCls: "auto-color-icon", - width: 24, - iconWidth: 16, - iconHeight: 16, - }, { - el: { - type: "bi.label", + items: [ + { + type: IconChangeButton.xtype, ref: _ref => { - this.label = _ref; + this.changeIcon = _ref; }, - textAlign: "left", - hgap: 5, - height: 18, - text: BI.i18nText("BI-Basic_Auto"), + disableSelected: true, + iconCls: "auto-color-icon", + width: 24, + iconWidth: 16, + iconHeight: 16, }, - }], + { + el: { + type: Label.xtype, + ref: _ref => { + this.label = _ref; + }, + textAlign: "left", + hgap: 5, + height: 18, + text: BI.i18nText("BI-Basic_Auto"), + }, + } + ], }); const down = createWidget({ - type: "bi.icon_button", + type: IconButton.xtype, disableSelected: true, cls: "icon-combo-down-icon trigger-triangle-font icon-size-12", width: 12, @@ -61,26 +67,29 @@ export class LongColorChooserTrigger extends Trigger { }); createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.colorContainer, - left: 2, - right: 2, - top: 2, - bottom: 2, - }, { - el: down, - right: 3, - bottom: 3, - }], + items: [ + { + el: this.colorContainer, + left: 2, + right: 2, + top: 2, + bottom: 2, + }, + { + el: down, + right: 3, + bottom: 3, + } + ], }); if (this.options.value) { this.setValue(this.options.value); } } - setValue (color) { + setValue(color) { super.setValue(...arguments); if (color === "") { this.colorContainer.element.css("background-color", ""); diff --git a/src/case/colorchooser/colorpicker/button/button.colorpicker.js b/src/case/colorchooser/colorpicker/button/button.colorpicker.js index e690eb1f3..8b8702bbc 100644 --- a/src/case/colorchooser/colorpicker/button/button.colorpicker.js +++ b/src/case/colorchooser/colorpicker/button/button.colorpicker.js @@ -16,7 +16,7 @@ export class ColorPickerButton extends BasicButton { _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-color-picker-button bi-background bi-border-top bi-border-left`, }); @@ -34,21 +34,25 @@ export class ColorPickerButton extends BasicButton { this.element.css("background-color", o.value); } const name = this.getName(); - this.element.hover(() => { - this._createMask(); - if (this.isEnabled()) { - Maskers.show(name); - } - }, () => { - if (!this.isSelected()) { - Maskers.hide(name); + this.element.hover( + () => { + this._createMask(); + if (this.isEnabled()) { + Maskers.show(name); + } + }, + () => { + if (!this.isSelected()) { + Maskers.hide(name); + } } - }); + ); } } _createMask() { - const o = this.options, name = this.getName(); + const o = this.options, + name = this.getName(); if (this.isEnabled() && !Maskers.has(name)) { const w = Maskers.make(name, this, { offset: { diff --git a/src/case/colorchooser/colorpicker/button/button.colorshow.js b/src/case/colorchooser/colorpicker/button/button.colorshow.js index 104dfabf2..dd82301c0 100644 --- a/src/case/colorchooser/colorpicker/button/button.colorshow.js +++ b/src/case/colorchooser/colorpicker/button/button.colorshow.js @@ -1,5 +1,5 @@ -import { shortcut } from "@/core"; -import { BasicButton } from "@/base"; +import { HTapeLayout, shortcut } from "@/core"; +import { IconLabel, Label, BasicButton } from "@/base"; /** * @author windy @@ -14,17 +14,17 @@ export class ColorChooserShowButton extends BasicButton { props = { baseCls: "bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius", - } + }; render() { const o = this.options; - + return { - type: "bi.htape", + type: HTapeLayout.xtype, items: [ { el: { - type: "bi.icon_label", + type: IconLabel.xtype, ref: _ref => { this.icon = _ref; }, @@ -33,8 +33,9 @@ export class ColorChooserShowButton extends BasicButton { }, hgap: 20, width: 16, - }, { - type: "bi.label", + }, + { + type: Label.xtype, textAlign: "left", text: o.text, } diff --git a/src/case/colorchooser/colorpicker/button/index.js b/src/case/colorchooser/colorpicker/button/index.js index 59b5c9378..68da81f74 100644 --- a/src/case/colorchooser/colorpicker/button/index.js +++ b/src/case/colorchooser/colorpicker/button/index.js @@ -1,2 +1,2 @@ -export { ColorPickerButton } from "./button.colorpicker"; -export { ColorChooserShowButton } from "./button.colorshow"; \ No newline at end of file +export { ColorPickerButton } from "./button.colorpicker"; +export { ColorChooserShowButton } from "./button.colorshow"; diff --git a/src/case/colorchooser/colorpicker/colorpicker.hex.js b/src/case/colorchooser/colorpicker/colorpicker.hex.js index 5a1b4162b..ef57023df 100644 --- a/src/case/colorchooser/colorpicker/colorpicker.hex.js +++ b/src/case/colorchooser/colorpicker/colorpicker.hex.js @@ -1,5 +1,6 @@ -import { shortcut, Widget, extend, each } from "@/core"; import { ButtonGroup } from "@/base"; +import { GridLayout, Layout, shortcut, Widget, extend, each } from "@/core"; +import { ColorPickerButton } from "./button"; /** * @author windy @@ -15,7 +16,7 @@ export class HexColorPicker extends Widget { props = { baseCls: "bi-hex-color-picker", items: null, - } + }; _items = [ [ @@ -163,17 +164,17 @@ export class HexColorPicker extends Widget { value: "#B30072", } ] - ] + ]; render() { const o = this.options; return { - type: "bi.button_group", + type: ButtonGroup.xtype, items: this._digest(o.items || this._items), layouts: [ { - type: "bi.grid", + type: GridLayout.xtype, } ], value: o.value, @@ -197,13 +198,18 @@ export class HexColorPicker extends Widget { each(items, (idx, row) => { const bRow = []; each(row, (idx, item) => { - bRow.push(extend({ - type: "bi.color_picker_button", - once: false, - cls: o.space ? "bi-border-right" : "", - }, item)); + bRow.push( + extend( + { + type: ColorPickerButton.xtype, + once: false, + cls: o.space ? "bi-border-right" : "", + }, + item + ) + ); if (o.space && idx < row.length - 1) { - bRow.push({ type: "bi.layout" }); + bRow.push({ type: Layout.xtype }); } }); blocks.push(bRow); diff --git a/src/case/colorchooser/colorpicker/colorpicker.js b/src/case/colorchooser/colorpicker/colorpicker.js index fa4bd5c9d..f645ec6f6 100644 --- a/src/case/colorchooser/colorpicker/colorpicker.js +++ b/src/case/colorchooser/colorpicker/colorpicker.js @@ -1,5 +1,6 @@ -import { shortcut, Widget, extend, createItems, createWidget } from "@/core"; import { ButtonGroup } from "@/base"; +import { ColorPickerButton } from "./button"; +import { GridLayout, shortcut, Widget, extend, createItems, createWidget } from "@/core"; /** * 简单选色控件 @@ -22,153 +23,223 @@ export class ColorPicker extends Widget { } _items = [ - [{ - value: "#ffffff", - }, { - value: "#f2f2f2", - }, { - value: "#e5e5e5", - }, { - value: "#d9d9d9", - }, { - value: "#cccccc", - }, { - value: "#bfbfbf", - }, { - value: "#b2b2b2", - }, { - value: "#a6a6a6", - }, { - value: "#999999", - }, { - value: "#8c8c8c", - }, { - value: "#808080", - }, { - value: "#737373", - }, { - value: "#666666", - }, { - value: "#4d4d4d", - }, { - value: "#333333", - }, { - value: "#000000", - }], - [{ - value: "#d8b5a6", - }, { - value: "#ff9e9a", - }, { - value: "#ffc17d", - }, { - value: "#f5e56b", - }, { - value: "#d8e698", - }, { - value: "#e0ebaf", - }, { - value: "#c3d825", - }, { - value: "#bbe2e7", - }, { - value: "#85d3cd", - }, { - value: "#bde1e6", - }, { - value: "#a0d8ef", - }, { - value: "#89c3eb", - }, { - value: "#bbc8e6", - }, { - value: "#bbbcde", - }, { - value: "#d6b4cc", - }, { - value: "#fbc0d3", - }], - [{ - value: "#bb9581", - }, { - value: "#f37d79", - }, { - value: "#fba74f", - }, { - value: "#ffdb4f", - }, { - value: "#c7dc68", - }, { - value: "#b0ca71", - }, { - value: "#99ab4e", - }, { - value: "#84b9cb", - }, { - value: "#00a3af", - }, { - value: "#2ca9e1", - }, { - value: "#0095d9", - }, { - value: "#4c6cb3", - }, { - value: "#8491c3", - }, { - value: "#a59aca", - }, { - value: "#cc7eb1", - }, { - value: "#e89bb4", - }], - [{ - value: "#9d775f", - }, { - value: "#dd4b4b", - }, { - value: "#ef8b07", - }, { - value: "#fcc800", - }, { - value: "#aacf53", - }, { - value: "#82ae46", - }, { - value: "#69821b", - }, { - value: "#59b9c6", - }, { - value: "#2a83a2", - }, { - value: "#007bbb", - }, { - value: "#19448e", - }, { - value: "#274a78", - }, { - value: "#4a488e", - }, { - value: "#7058a3", - }, { - value: "#884898", - }, { - value: "#d47596", - }] - ] + [ + { + value: "#ffffff", + }, + { + value: "#f2f2f2", + }, + { + value: "#e5e5e5", + }, + { + value: "#d9d9d9", + }, + { + value: "#cccccc", + }, + { + value: "#bfbfbf", + }, + { + value: "#b2b2b2", + }, + { + value: "#a6a6a6", + }, + { + value: "#999999", + }, + { + value: "#8c8c8c", + }, + { + value: "#808080", + }, + { + value: "#737373", + }, + { + value: "#666666", + }, + { + value: "#4d4d4d", + }, + { + value: "#333333", + }, + { + value: "#000000", + } + ], + [ + { + value: "#d8b5a6", + }, + { + value: "#ff9e9a", + }, + { + value: "#ffc17d", + }, + { + value: "#f5e56b", + }, + { + value: "#d8e698", + }, + { + value: "#e0ebaf", + }, + { + value: "#c3d825", + }, + { + value: "#bbe2e7", + }, + { + value: "#85d3cd", + }, + { + value: "#bde1e6", + }, + { + value: "#a0d8ef", + }, + { + value: "#89c3eb", + }, + { + value: "#bbc8e6", + }, + { + value: "#bbbcde", + }, + { + value: "#d6b4cc", + }, + { + value: "#fbc0d3", + } + ], + [ + { + value: "#bb9581", + }, + { + value: "#f37d79", + }, + { + value: "#fba74f", + }, + { + value: "#ffdb4f", + }, + { + value: "#c7dc68", + }, + { + value: "#b0ca71", + }, + { + value: "#99ab4e", + }, + { + value: "#84b9cb", + }, + { + value: "#00a3af", + }, + { + value: "#2ca9e1", + }, + { + value: "#0095d9", + }, + { + value: "#4c6cb3", + }, + { + value: "#8491c3", + }, + { + value: "#a59aca", + }, + { + value: "#cc7eb1", + }, + { + value: "#e89bb4", + } + ], + [ + { + value: "#9d775f", + }, + { + value: "#dd4b4b", + }, + { + value: "#ef8b07", + }, + { + value: "#fcc800", + }, + { + value: "#aacf53", + }, + { + value: "#82ae46", + }, + { + value: "#69821b", + }, + { + value: "#59b9c6", + }, + { + value: "#2a83a2", + }, + { + value: "#007bbb", + }, + { + value: "#19448e", + }, + { + value: "#274a78", + }, + { + value: "#4a488e", + }, + { + value: "#7058a3", + }, + { + value: "#884898", + }, + { + value: "#d47596", + } + ] + ]; _init() { super._init(...arguments); const o = this.options; this.colors = createWidget({ - type: "bi.button_group", + type: ButtonGroup.xtype, element: this, items: createItems(o.items || this._items, { - type: "bi.color_picker_button", + type: ColorPickerButton.xtype, once: false, }), - layouts: [{ - type: "bi.grid", - }], + layouts: [ + { + type: GridLayout.xtype, + } + ], value: o.value, }); this.colors.on(ButtonGroup.EVENT_CHANGE, (...args) => { @@ -179,7 +250,7 @@ export class ColorPicker extends Widget { populate(items) { const args = [].slice.call(arguments); args[0] = createItems(items, { - type: "bi.color_picker_button", + type: ColorPickerButton.xtype, once: false, }); this.colors.populate.apply(this.colors, args); diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js index 7b626a37c..8e8a480ec 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js @@ -1,8 +1,27 @@ -import { shortcut, Widget, createItems, map, isNumeric, range, extend, isEmptyString, isNull, DOM } from "@/core"; -import { ColorPickerEditor } from "./editor.colorpicker"; +import { Label } from "@/base"; +import { + AbsoluteLayout, + VerticalLayout, + VerticalAdaptLayout, + Layout, + shortcut, + Widget, + createItems, + map, + isNumeric, + range, + extend, + isEmptyString, + isNull, + DOM +} from "@/core"; import { ColorChooserShowButton } from "./button"; +import { ColorPickerEditor } from "./editor.colorpicker"; +import { SmallTextEditor } from "@/widget/editor/editor.text.small.js"; -const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1; +const RGB_WIDTH = 32, + HEX_WIDTH = 70, + HEX_PREFIX_POSITION = 1; /** * 简单选色控件 @@ -14,18 +33,18 @@ const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1; @shortcut() export class HexColorPickerEditor extends Widget { static xtype = "bi.hex_color_picker_editor"; - + static EVENT_CHANGE = "EVENT_CHANGE"; - + props = { baseCls: "bi-color-picker-editor", height: 30, - } + }; render() { this.storeValue = {}; const RGB = createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { - type: "bi.label", + type: Label.xtype, cls: "color-picker-editor-label", height: 20, }); @@ -33,7 +52,7 @@ export class HexColorPickerEditor extends Widget { const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; const Ws = map(range(0, 3), () => { return { - type: "bi.small_text_editor", + type: SmallTextEditor.xtype, cls: "color-picker-editor-input bi-border-radius", validationChecker: checker, errorText: BI.i18nText("BI-Color_Picker_Error_Text"), @@ -46,7 +65,11 @@ export class HexColorPickerEditor extends Widget { eventName: BI.TextEditor.EVENT_CHANGE, action: () => { this._checkEditors(); - if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) { + if ( + checker(this.storeValue.r) && + checker(this.storeValue.g) && + checker(this.storeValue.b) + ) { this.colorShow.element.css("background-color", this.getValue()); this.fireEvent(ColorPickerEditor.EVENT_CHANGE); } @@ -57,20 +80,20 @@ export class HexColorPickerEditor extends Widget { }); return { - type: "bi.absolute", + type: AbsoluteLayout.xtype, items: [ { el: { - type: "bi.vertical", + type: VerticalLayout.xtype, tgap: 10, items: [ { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: ["fill", "fill"], height: 24, items: [ { - type: "bi.color_picker_show_button", + type: ColorChooserShowButton.xtype, cls: "trans-color-icon", height: 22, title: BI.i18nText("BI-Transparent_Color"), @@ -87,9 +110,10 @@ export class HexColorPickerEditor extends Widget { ref: _ref => { this.transparent = _ref; }, - }, { + }, + { el: { - type: "bi.color_picker_show_button", + type: ColorChooserShowButton.xtype, cls: "auto-color-icon", height: 22, title: BI.i18nText("BI-Basic_Auto"), @@ -110,16 +134,17 @@ export class HexColorPickerEditor extends Widget { lgap: 10, } ], - }, { + }, + { el: { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, columnSize: [22, 10, "fill", 12, RGB_WIDTH, 12, RGB_WIDTH, 12, RGB_WIDTH], rgap: 5, items: [ { el: { - type: "bi.layout", + type: Layout.xtype, cls: "color-picker-editor-display bi-card bi-border", height: 22, width: 22, @@ -128,12 +153,14 @@ export class HexColorPickerEditor extends Widget { }, }, width: 18, - }, { - type: "bi.label", + }, + { + type: Label.xtype, text: "#", width: 10, - }, { - type: "bi.small_text_editor", + }, + { + type: SmallTextEditor.xtype, ref: _ref => { this.hexEditor = _ref; }, @@ -148,28 +175,41 @@ export class HexColorPickerEditor extends Widget { eventName: "EVENT_CHANGE", action: () => { this._checkHexEditor(); - if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) { - this.colorShow.element.css("background-color", this.getValue()); + if ( + checker(this.storeValue.r) && + checker(this.storeValue.g) && + checker(this.storeValue.b) + ) { + this.colorShow.element.css( + "background-color", + this.getValue() + ); this.fireEvent(ColorPickerEditor.EVENT_CHANGE); } }, } ], - }, RGB[0], { + }, + RGB[0], + { el: extend(Ws[0], { ref: _ref => { this.R = _ref; }, }), width: RGB_WIDTH, - }, RGB[1], { + }, + RGB[1], + { el: extend(Ws[1], { ref: _ref => { this.G = _ref; }, }), width: RGB_WIDTH, - }, RGB[2], { + }, + RGB[2], + { el: extend(Ws[2], { ref: _ref => { this.B = _ref; @@ -235,11 +275,20 @@ export class HexColorPickerEditor extends Widget { _showPreColor(color) { if (color === "") { - this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-square-normal-background"); + this.colorShow.element + .css("background-color", "") + .removeClass("trans-color-background") + .addClass("auto-color-square-normal-background"); } else if (color === "transparent") { - this.colorShow.element.css("background-color", "").removeClass("auto-color-square-normal-background").addClass("trans-color-background"); + this.colorShow.element + .css("background-color", "") + .removeClass("auto-color-square-normal-background") + .addClass("trans-color-background"); } else { - this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-square-normal-background").removeClass("trans-color-background"); + this.colorShow.element + .css({ "background-color": color }) + .removeClass("auto-color-square-normal-background") + .removeClass("trans-color-background"); } } @@ -266,7 +315,7 @@ export class HexColorPickerEditor extends Widget { g: "", b: "", }; - + return; } if (!color) { @@ -293,11 +342,13 @@ export class HexColorPickerEditor extends Widget { if (this._isEmptyRGB() && this.transparent.isSelected()) { return "transparent"; } - - return DOM.rgb2hex(DOM.json2rgb({ - r: this.storeValue.r, - g: this.storeValue.g, - b: this.storeValue.b, - })); + + return DOM.rgb2hex( + DOM.json2rgb({ + r: this.storeValue.r, + g: this.storeValue.g, + b: this.storeValue.b, + }) + ); } } diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js index f055be894..8f12b325e 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js @@ -1,8 +1,27 @@ -import { shortcut, Widget, extend, isEmptyObject, createItems, isNull, isNumeric, map, isEmptyString, range, DOM } from "@/core"; +import { Label } from "@/base"; +import { + VerticalLayout, + VerticalAdaptLayout, + Layout, + shortcut, + Widget, + extend, + isEmptyObject, + createItems, + isNull, + isNumeric, + map, + isEmptyString, + range, + DOM +} from "@/core"; import { SimpleColorPickerEditor } from "./editor.colorpicker.simple"; import { ColorPickerEditor } from "./editor.colorpicker"; +import { SmallTextEditor } from "@/widget/editor/editor.text.small.js"; -const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1; +const RGB_WIDTH = 32, + HEX_WIDTH = 70, + HEX_PREFIX_POSITION = 1; /** * @author windy @@ -18,19 +37,19 @@ export class SimpleHexColorPickerEditor extends Widget { props = { baseCls: "bi-color-picker-editor", height: 36, - } + }; - render () { + render() { const RGB = createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { - type: "bi.label", + type: Label.xtype, cls: "color-picker-editor-label", height: 20, }); - const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; + const checker = (v) => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; const Ws = map(range(0, 3), () => { return { - type: "bi.small_text_editor", + type: SmallTextEditor.xtype, cls: "color-picker-editor-input bi-border-radius", validationChecker: checker, errorText: BI.i18nText("BI-Color_Picker_Error_Text"), @@ -48,39 +67,41 @@ export class SimpleHexColorPickerEditor extends Widget { this.fireEvent(SimpleColorPickerEditor.EVENT_CHANGE); } }, - } + }, ], }; }); return { - type: "bi.vertical", + type: VerticalLayout.xtype, tgap: 10, items: [ { el: { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, rgap: 5, columnSize: [22, 10, "fill", 12, RGB_WIDTH, 12, RGB_WIDTH, 12, RGB_WIDTH], items: [ { el: { - type: "bi.layout", + type: Layout.xtype, cls: "color-picker-editor-display bi-card bi-border", height: 22, width: 22, - ref: _ref => { + ref: (_ref) => { this.colorShow = _ref; }, }, width: 18, - }, { - type: "bi.label", + }, + { + type: Label.xtype, text: "#", width: 10, - }, { - type: "bi.small_text_editor", - ref: _ref => { + }, + { + type: SmallTextEditor.xtype, + ref: (_ref) => { this.hexEditor = _ref; }, cls: "color-picker-editor-input bi-border-radius", @@ -94,49 +115,58 @@ export class SimpleHexColorPickerEditor extends Widget { eventName: "EVENT_CHANGE", action: () => { this._checkHexEditor(); - if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) { + if ( + checker(this.storeValue.r) && + checker(this.storeValue.g) && + checker(this.storeValue.b) + ) { this.colorShow.element.css("background-color", this.getValue()); this.fireEvent(ColorPickerEditor.EVENT_CHANGE); } }, - } + }, ], - }, RGB[0], { + }, + RGB[0], + { el: extend(Ws[0], { - ref: _ref => { + ref: (_ref) => { this.R = _ref; }, }), width: RGB_WIDTH, - }, RGB[1], { + }, + RGB[1], + { el: extend(Ws[1], { - ref: _ref => { + ref: (_ref) => { this.G = _ref; }, }), width: RGB_WIDTH, - }, RGB[2], { + }, + RGB[2], + { el: extend(Ws[2], { - ref: _ref => { + ref: (_ref) => { this.B = _ref; }, }), rgap: -5, width: RGB_WIDTH, - } + }, ], }, - } + }, ], - }; } - _hexChecker (v) { + _hexChecker(v) { return /^[0-9a-fA-F]{6}$/.test(v); } - _checkEditors () { + _checkEditors() { if (isEmptyString(this.R.getValue())) { this.R.setValue(0); } @@ -149,7 +179,7 @@ export class SimpleHexColorPickerEditor extends Widget { this.hexEditor.setValue(this.getValue().slice(HEX_PREFIX_POSITION)); } - _checkHexEditor () { + _checkHexEditor() { if (isEmptyString(this.hexEditor.getValue())) { this.hexEditor.setValue("000000"); } @@ -164,7 +194,7 @@ export class SimpleHexColorPickerEditor extends Widget { this.B.setValue(this.storeValue.b); } - setValue (color) { + setValue(color) { this.colorShow.element.css({ "background-color": color }); const json = DOM.rgb2json(DOM.hex2rgb(color)); this.R.setValue(isNull(json.r) ? "" : json.r); @@ -173,11 +203,13 @@ export class SimpleHexColorPickerEditor extends Widget { this.hexEditor.setValue(isEmptyObject(json) ? "" : color.slice(HEX_PREFIX_POSITION)); } - getValue () { - return DOM.rgb2hex(DOM.json2rgb({ - r: this.R.getValue(), - g: this.G.getValue(), - b: this.B.getValue(), - })); + getValue() { + return DOM.rgb2hex( + DOM.json2rgb({ + r: this.R.getValue(), + g: this.G.getValue(), + b: this.B.getValue(), + }) + ); } } diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.js b/src/case/colorchooser/colorpicker/editor.colorpicker.js index f413ff94d..9f05660f3 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.js @@ -1,5 +1,21 @@ -import { shortcut, Widget, extend, createWidgets, createItems, createWidget, each, isEmptyString, isNumeric, isNull, DOM } from "@/core"; -import { IconButton } from "@/base"; +import { + Layout, + AbsoluteLayout, + VerticalAdaptLayout, + shortcut, + Widget, + extend, + createWidgets, + createItems, + createWidget, + each, + isEmptyString, + isNumeric, + isNull, + DOM +} from "@/core"; +import { Label, IconButton } from "@/base"; +import { SmallTextEditor } from "@/widget/editor/editor.text.small.js"; const RGB_WIDTH = 32; @@ -16,7 +32,7 @@ export class ColorPickerEditor extends Widget { static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig () { + _defaultConfig() { return extend(super._defaultConfig(...arguments), { baseCls: "bi-color-picker-editor", // width: 200, @@ -24,25 +40,27 @@ export class ColorPickerEditor extends Widget { }); } - _init () { + _init() { super._init(...arguments); this.storeValue = {}; this.colorShow = createWidget({ - type: "bi.layout", + type: Layout.xtype, cls: "color-picker-editor-display bi-card bi-border", height: 16, width: 16, }); - const RGB = createWidgets(createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { - type: "bi.label", - cls: "color-picker-editor-label", - width: 20, - height: 20, - })); + const RGB = createWidgets( + createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { + type: Label.xtype, + cls: "color-picker-editor-label", + width: 20, + height: 20, + }) + ); - const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; + const checker = (v) => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; const Ws = createWidgets([{}, {}, {}], { - type: "bi.small_text_editor", + type: SmallTextEditor.xtype, cls: "color-picker-editor-input bi-border-radius", validationChecker: checker, errorText: BI.i18nText("BI-Color_Picker_Error_Text"), @@ -65,7 +83,7 @@ export class ColorPickerEditor extends Widget { this.B = Ws[2]; this.none = createWidget({ - type: "bi.icon_button", + type: IconButton.xtype, cls: "auto-color-icon", width: 16, height: 16, @@ -76,11 +94,11 @@ export class ColorPickerEditor extends Widget { this.none.on(IconButton.EVENT_CHANGE, () => { const value = this.getValue(); this.setValue(""); - (value !== "") && this.fireEvent(ColorPickerEditor.EVENT_CHANGE); + value !== "" && this.fireEvent(ColorPickerEditor.EVENT_CHANGE); }); this.transparent = createWidget({ - type: "bi.icon_button", + type: IconButton.xtype, cls: "trans-color-icon", width: 16, height: 16, @@ -91,59 +109,67 @@ export class ColorPickerEditor extends Widget { this.transparent.on(IconButton.EVENT_CHANGE, () => { const value = this.getValue(); this.setValue("transparent"); - (value !== "transparent") && this.fireEvent(ColorPickerEditor.EVENT_CHANGE); + value !== "transparent" && this.fireEvent(ColorPickerEditor.EVENT_CHANGE); }); createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, items: [ { el: { - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, items: [ { el: this.colorShow, width: 16, - }, { + }, + { el: RGB[0], width: 20, - }, { + }, + { el: this.R, width: RGB_WIDTH, - }, { + }, + { el: RGB[1], width: 20, - }, { + }, + { el: this.G, width: RGB_WIDTH, - }, { + }, + { el: RGB[2], width: 20, - }, { + }, + { el: this.B, width: RGB_WIDTH, - }, { + }, + { el: this.transparent, width: 16, lgap: 5, - }, { + }, + { el: this.none, width: 16, lgap: 5, - } + }, ], }, left: 10, right: 10, top: 0, bottom: 0, - } + }, ], }); } - _checkEditors () { + _checkEditors() { if (isEmptyString(this.R.getValue())) { this.R.setValue(0); } @@ -160,21 +186,30 @@ export class ColorPickerEditor extends Widget { }; } - _isEmptyRGB () { + _isEmptyRGB() { return isEmptyString(this.storeValue.r) && isEmptyString(this.storeValue.g) && isEmptyString(this.storeValue.b); } - _showPreColor (color) { + _showPreColor(color) { if (color === "") { - this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-normal-background"); + this.colorShow.element + .css("background-color", "") + .removeClass("trans-color-background") + .addClass("auto-color-normal-background"); } else if (color === "transparent") { - this.colorShow.element.css("background-color", "").removeClass("auto-color-normal-background").addClass("trans-color-background"); + this.colorShow.element + .css("background-color", "") + .removeClass("auto-color-normal-background") + .addClass("trans-color-background"); } else { - this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-normal-background").removeClass("trans-color-background"); + this.colorShow.element + .css({ "background-color": color }) + .removeClass("auto-color-normal-background") + .removeClass("trans-color-background"); } } - _setEnable (enable) { + _setEnable(enable) { super._setEnable(...arguments); if (enable === true) { this.element.removeClass("base-disabled disabled"); @@ -183,7 +218,7 @@ export class ColorPickerEditor extends Widget { } } - setValue (color) { + setValue(color) { if (color === "transparent") { this.transparent.setSelected(true); this.none.setSelected(false); @@ -196,7 +231,7 @@ export class ColorPickerEditor extends Widget { g: "", b: "", }; - + return; } if (!color) { @@ -222,11 +257,13 @@ export class ColorPickerEditor extends Widget { if (this._isEmptyRGB() && this.transparent.isSelected()) { return "transparent"; } - - return DOM.rgb2hex(DOM.json2rgb({ - r: this.storeValue.r, - g: this.storeValue.g, - b: this.storeValue.b, - })); + + return DOM.rgb2hex( + DOM.json2rgb({ + r: this.storeValue.r, + g: this.storeValue.g, + b: this.storeValue.b, + }) + ); } } diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js b/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js index 590cd1c37..d64c771bc 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js @@ -1,4 +1,20 @@ -import { shortcut, Widget, extend, isNull, createWidget, isNumeric, createItems, createWidgets, each, isEmptyString, DOM } from "@/core"; +import { + Layout, + VerticalAdaptLayout, + shortcut, + Widget, + extend, + isNull, + createWidget, + isNumeric, + createItems, + createWidgets, + each, + isEmptyString, + DOM +} from "@/core"; +import { Label } from "@/base"; +import { SmallTextEditor } from "@/widget/editor/editor.text.small.js"; const RGB_WIDTH = 32; @@ -26,21 +42,23 @@ export class SimpleColorPickerEditor extends Widget { _init() { super._init(...arguments); this.colorShow = createWidget({ - type: "bi.layout", + type: Layout.xtype, cls: "color-picker-editor-display bi-card bi-border", height: 16, width: 16, }); - const RGB = createWidgets(createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { - type: "bi.label", - cls: "color-picker-editor-label", - width: 20, - height: 20, - })); + const RGB = createWidgets( + createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { + type: Label.xtype, + cls: "color-picker-editor-label", + width: 20, + height: 20, + }) + ); - const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; + const checker = (v) => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; const Ws = createWidgets([{}, {}, {}], { - type: "bi.small_text_editor", + type: SmallTextEditor.xtype, cls: "color-picker-editor-input bi-border-radius", validationChecker: checker, errorText: BI.i18nText("BI-Color_Picker_Error_Text"), @@ -63,7 +81,7 @@ export class SimpleColorPickerEditor extends Widget { this.B = Ws[2]; createWidget({ - type: "bi.vertical_adapt", + type: VerticalAdaptLayout.xtype, element: this, items: [ { @@ -71,25 +89,31 @@ export class SimpleColorPickerEditor extends Widget { width: 16, lgap: 20, rgap: 15, - }, { + }, + { el: RGB[0], width: 20, - }, { + }, + { el: this.R, width: RGB_WIDTH, - }, { + }, + { el: RGB[1], width: 20, - }, { + }, + { el: this.G, width: RGB_WIDTH, - }, { + }, + { el: RGB[2], width: 20, - }, { + }, + { el: this.B, width: RGB_WIDTH, - } + }, ], }); } @@ -115,10 +139,12 @@ export class SimpleColorPickerEditor extends Widget { } getValue() { - return DOM.rgb2hex(DOM.json2rgb({ - r: this.R.getValue(), - g: this.G.getValue(), - b: this.B.getValue(), - })); + return DOM.rgb2hex( + DOM.json2rgb({ + r: this.R.getValue(), + g: this.G.getValue(), + b: this.B.getValue(), + }) + ); } } diff --git a/src/case/colorchooser/colorpicker/index.js b/src/case/colorchooser/colorpicker/index.js index 73724cae8..dc05c0270 100644 --- a/src/case/colorchooser/colorpicker/index.js +++ b/src/case/colorchooser/colorpicker/index.js @@ -1,7 +1,7 @@ -export { ColorPicker } from "./colorpicker"; -export { HexColorPicker } from "./colorpicker.hex"; -export { ColorPickerEditor } from "./editor.colorpicker"; -export { HexColorPickerEditor } from "./editor.colorpicker.hex"; -export { SimpleHexColorPickerEditor } from "./editor.colorpicker.hex.simple"; -export { SimpleColorPickerEditor } from "./editor.colorpicker.simple"; -export * from "./button"; +export { ColorPicker } from "./colorpicker"; +export { HexColorPicker } from "./colorpicker.hex"; +export { ColorPickerEditor } from "./editor.colorpicker"; +export { HexColorPickerEditor } from "./editor.colorpicker.hex"; +export { SimpleHexColorPickerEditor } from "./editor.colorpicker.hex.simple"; +export { SimpleColorPickerEditor } from "./editor.colorpicker.simple"; +export * from "./button"; diff --git a/src/case/colorchooser/farbtastic/farbtastic.js b/src/case/colorchooser/farbtastic/farbtastic.js index 9a57fbaf8..527d5529b 100644 --- a/src/case/colorchooser/farbtastic/farbtastic.js +++ b/src/case/colorchooser/farbtastic/farbtastic.js @@ -1,7 +1,9 @@ -import { shortcut, isKey, DOM } from "@/core"; +import { AbsoluteLayout, Layout, shortcut, isKey, DOM } from "@/core"; import { BasicButton } from "@/base"; -const RADIUS = 84, SQUARE = 100, WIDTH = 194; +const RADIUS = 84, + SQUARE = 100, + WIDTH = 194; @shortcut() export class Farbtastic extends BasicButton { @@ -15,72 +17,78 @@ export class Farbtastic extends BasicButton { height: 195, stopPropagation: true, value: "#000000", - } + }; render() { this._defaultState(); - + return { - type: "bi.absolute", - items: [{ - el: { - type: "bi.layout", - cls: "", - ref: _ref => { - this.colorWrapper = _ref; + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: Layout.xtype, + cls: "", + ref: _ref => { + this.colorWrapper = _ref; + }, }, + top: 47, + left: 47, + width: 101, + height: 101, }, - top: 47, - left: 47, - width: 101, - height: 101, - }, { - el: { - type: "bi.layout", - cls: "wheel", - ref: _ref => { - this.wheel = _ref; + { + el: { + type: Layout.xtype, + cls: "wheel", + ref: _ref => { + this.wheel = _ref; + }, }, + left: 0, + right: 0, + top: 0, + bottom: 0, }, - left: 0, - right: 0, - top: 0, - bottom: 0, - }, { - el: { - type: "bi.layout", - cls: "overlay", - ref: _ref => { - this.overlay = _ref; + { + el: { + type: Layout.xtype, + cls: "overlay", + ref: _ref => { + this.overlay = _ref; + }, }, + top: 47, + left: 47, + width: 101, + height: 101, }, - top: 47, - left: 47, - width: 101, - height: 101, - }, { - el: { - type: "bi.layout", - cls: "marker", - ref: _ref => { - this.hMarker = _ref; + { + el: { + type: Layout.xtype, + cls: "marker", + ref: _ref => { + this.hMarker = _ref; + }, + scrollable: false, + width: 17, + height: 17, }, - scrollable: false, - width: 17, - height: 17, }, - }, { - el: { - type: "bi.layout", - cls: "marker", - ref: _ref => { - this.slMarker = _ref; + { + el: { + type: Layout.xtype, + cls: "marker", + ref: _ref => { + this.slMarker = _ref; + }, + scrollable: false, + width: 17, + height: 17, }, - scrollable: false, - width: 17, - height: 17, - }, - }], + } + ], }; } @@ -97,13 +105,17 @@ export class Farbtastic extends BasicButton { _unpack(color) { if (color.length === 7) { - return [parseInt("0x" + color.substring(1, 3)) / 255, - parseInt("0x" + color.substring(3, 5)) / 255, - parseInt("0x" + color.substring(5, 7)) / 255]; + return [ + parseInt(`0x${color.substring(1, 3)}`) / 255, + parseInt(`0x${color.substring(3, 5)}`) / 255, + parseInt(`0x${color.substring(5, 7)}`) / 255 + ]; } else if (color.length === 4) { - return [parseInt("0x" + color.substring(1, 2)) / 15, - parseInt("0x" + color.substring(2, 3)) / 15, - parseInt("0x" + color.substring(3, 4)) / 15]; + return [ + parseInt(`0x${color.substring(1, 2)}`) / 15, + parseInt(`0x${color.substring(2, 3)}`) / 15, + parseInt(`0x${color.substring(3, 4)}`) / 15 + ]; } } @@ -111,10 +123,16 @@ export class Farbtastic extends BasicButton { const r = Math.round(rgb[0] * 255); const g = Math.round(rgb[1] * 255); const b = Math.round(rgb[2] * 255); - - return "#" + (r < 16 ? "0" : "") + r.toString(16) + - (g < 16 ? "0" : "") + g.toString(16) + - (b < 16 ? "0" : "") + b.toString(16); + + return ( + `#${ + r < 16 ? "0" : "" + }${r.toString(16) + }${g < 16 ? "0" : "" + }${g.toString(16) + }${b < 16 ? "0" : "" + }${b.toString(16)}` + ); } _setColor(color) { @@ -132,7 +150,7 @@ export class Farbtastic extends BasicButton { this.rgb = this._HSLToRGB(hsl); this.value = this._pack(this.rgb); this._updateDisplay(); - + return this; } @@ -152,8 +170,8 @@ export class Farbtastic extends BasicButton { }); this.slMarker.element.css({ - left: `${Math.round(SQUARE * (.5 - this.hsl[1]) + WIDTH / 2)}px`, - top: `${Math.round(SQUARE * (.5 - this.hsl[2]) + WIDTH / 2)}px`, + left: `${Math.round(SQUARE * (0.5 - this.hsl[1]) + WIDTH / 2)}px`, + top: `${Math.round(SQUARE * (0.5 - this.hsl[2]) + WIDTH / 2)}px`, }); // Saturation/Luminance gradient @@ -168,7 +186,7 @@ export class Farbtastic extends BasicButton { r.x += tmp.x; r.y += tmp.y; } - + return r; } @@ -218,7 +236,7 @@ export class Farbtastic extends BasicButton { x = (event.pageX || 0) - pos.x; y = (event.pageY || 0) - pos.y; } - + // Subtract distance to middle return { x: x - WIDTH / 2, y: y - WIDTH / 2 }; } @@ -232,8 +250,8 @@ export class Farbtastic extends BasicButton { if (hue < 0) hue += 1; this._setHSL([hue, this.hsl[1], this.hsl[2]]); } else { - const sat = Math.max(0, Math.min(1, -(pos.x / SQUARE) + .5)); - const lum = Math.max(0, Math.min(1, -(pos.y / SQUARE) + .5)); + const sat = Math.max(0, Math.min(1, -(pos.x / SQUARE) + 0.5)); + const lum = Math.max(0, Math.min(1, -(pos.y / SQUARE) + 0.5)); this._setHSL([this.hsl[0], sat, lum]); } this.fireEvent(Farbtastic.EVENT_CHANGE, this.getValue(), this); @@ -245,7 +263,7 @@ export class Farbtastic extends BasicButton { // Process this._doMouseMove(event); - + return false; } diff --git a/src/case/colorchooser/index.js b/src/case/colorchooser/index.js index 582eac086..24d8bc806 100644 --- a/src/case/colorchooser/index.js +++ b/src/case/colorchooser/index.js @@ -1,11 +1,11 @@ -export { ColorChooser } from "./colorchooser"; -export { CustomColorChooser } from "./colorchooser.custom"; -export { ColorChooserPopup } from "./colorchooser.popup"; -export { HexColorChooserPopup } from "./colorchooser.popup.hex"; -export { SimpleHexColorChooserPopup } from "./colorchooser.popup.hex.simple"; -export { SimpleColorChooserPopup } from "./colorchooser.popup.simple"; -export { SimpleColorChooser } from "./colorchooser.simple"; -export { ColorChooserTrigger } from "./colorchooser.trigger"; -export { LongColorChooserTrigger } from "./colorchooser.trigger.long"; -export { Farbtastic } from "./farbtastic/farbtastic"; -export * from "./colorpicker"; +export { ColorChooser } from "./colorchooser"; +export { CustomColorChooser } from "./colorchooser.custom"; +export { ColorChooserPopup } from "./colorchooser.popup"; +export { HexColorChooserPopup } from "./colorchooser.popup.hex"; +export { SimpleHexColorChooserPopup } from "./colorchooser.popup.hex.simple"; +export { SimpleColorChooserPopup } from "./colorchooser.popup.simple"; +export { SimpleColorChooser } from "./colorchooser.simple"; +export { ColorChooserTrigger } from "./colorchooser.trigger"; +export { LongColorChooserTrigger } from "./colorchooser.trigger.long"; +export { Farbtastic } from "./farbtastic/farbtastic"; +export * from "./colorpicker"; diff --git a/src/case/combo/bubblecombo/combo.bubble.js b/src/case/combo/bubblecombo/combo.bubble.js index f7e79c93d..df03267e4 100644 --- a/src/case/combo/bubblecombo/combo.bubble.js +++ b/src/case/combo/bubblecombo/combo.bubble.js @@ -1,11 +1,5 @@ -import { - shortcut, - Widget, - extend, - emptyFn, - createWidget, - isFunction -} from "@/core"; +import { BubblePopupView } from "./popup.bubble"; +import { shortcut, Widget, extend, emptyFn, createWidget, isFunction } from "@/core"; import { Combo } from "@/base"; @shortcut() @@ -76,14 +70,12 @@ export class BubbleCombo extends Widget { popup: () => extend( { - type: "bi.bubble_popup_view", + type: BubblePopupView.xtype, animation: "bi-zoom-big", animationDuring: 200, primary: o.primary, }, - isFunction(this.options.popup) - ? this.options.popup() - : this.options.popup + isFunction(this.options.popup) ? this.options.popup() : this.options.popup ), }); this.combo.on(Combo.EVENT_TRIGGER_CHANGE, (...args) => { @@ -135,5 +127,3 @@ export class BubbleCombo extends Widget { this.combo.adjustHeight(); } } - - diff --git a/src/case/combo/bubblecombo/popup.bubble.js b/src/case/combo/bubblecombo/popup.bubble.js index 2a6050af0..aceb1729d 100644 --- a/src/case/combo/bubblecombo/popup.bubble.js +++ b/src/case/combo/bubblecombo/popup.bubble.js @@ -4,14 +4,14 @@ import { Label } from "@/base/single/label/label"; @shortcut() export class BubblePopupView extends PopupView { - static xtype = "bi.bubble_popup_view"; - + static xtype = "bi.text_bubble_bar_popup_view"; + static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON"; static EVENT_CHANGE = "EVENT_CLICK_TOOLBAR_BUTTON"; _defaultConfig() { const config = super._defaultConfig(...arguments); - + return extend(config, { baseCls: `${config.baseCls} bi-text-bubble-bar-popup-view`, text: "", @@ -20,13 +20,13 @@ export class BubblePopupView extends PopupView { _createContent() { const o = this.options; - + return { type: Label.xtype, text: o.text, whiteSpace: "normal", textAlign: "left", - ref: _ref => { + ref: (_ref) => { this.text = _ref; }, }; diff --git a/src/case/combo/editoriconcheckcombo/combo.editiconcheck.js b/src/case/combo/editoriconcheckcombo/combo.editiconcheck.js index b3bb8e29f..4d06ab584 100644 --- a/src/case/combo/editoriconcheckcombo/combo.editiconcheck.js +++ b/src/case/combo/editoriconcheckcombo/combo.editiconcheck.js @@ -1,14 +1,7 @@ -import { - shortcut, - Widget, - extend, - emptyFn, - createWidget, - Controller -} from "@/core"; +import { TextValueCheckComboPopup } from "../textvaluecheckcombo/popup.textvaluecheck"; +import { shortcut, Widget, extend, emptyFn, createWidget, Controller } from "@/core"; import { ButtonGroup, Combo } from "@/base"; import { EditorTrigger } from "../../trigger"; -import { TextValueCheckComboPopup } from "../textvaluecheckcombo/popup.textvaluecheck"; @shortcut() export class EditorIconCheckCombo extends Widget { @@ -66,7 +59,7 @@ export class EditorIconCheckCombo extends Widget { }); this.popup = createWidget({ - type: "bi.text_value_check_combo_popup", + type: TextValueCheckComboPopup.xtype, chooseType: o.chooseType, items: o.items, value: o.value, @@ -105,4 +98,4 @@ export class EditorIconCheckCombo extends Widget { this.options.items = items; this.editorIconCheckCombo.populate(items); } -} \ No newline at end of file +} diff --git a/src/case/combo/iconcombo/combo.icon.js b/src/case/combo/iconcombo/combo.icon.js index 338e10183..d7aaf3f63 100644 --- a/src/case/combo/iconcombo/combo.icon.js +++ b/src/case/combo/iconcombo/combo.icon.js @@ -1,13 +1,5 @@ -import { - shortcut, - Widget, - extend, - isFunction, - createWidget, - Controller, - isNull, - isArray -} from "@/core"; +import { IconComboTrigger } from "./trigger.iconcombo"; +import { shortcut, Widget, extend, isFunction, createWidget, Controller, isNull, isArray } from "@/core"; import { ButtonGroup, Combo } from "@/base"; import { IconComboPopup } from "./popup.iconcombo"; @@ -52,7 +44,7 @@ export class IconCombo extends Widget { : o.items; super._init(...arguments); this.trigger = createWidget(o.el, { - type: "bi.icon_combo_trigger", + type: IconComboTrigger.xtype, iconCls: o.iconCls, title: o.title, items: o.items, @@ -113,7 +105,7 @@ export class IconCombo extends Widget { getValue() { const value = this.popup.getValue(); - + return isNull(value) ? [] : isArray(value) ? value : [value]; } diff --git a/src/case/combo/iconcombo/popup.iconcombo.js b/src/case/combo/iconcombo/popup.iconcombo.js index a503dd427..6b28bdd81 100644 --- a/src/case/combo/iconcombo/popup.iconcombo.js +++ b/src/case/combo/iconcombo/popup.iconcombo.js @@ -1,12 +1,4 @@ -import { - shortcut, - extend, - createWidget, - createItems, - Controller, - Events, - VerticalLayout -} from "@/core"; +import { shortcut, extend, createWidget, createItems, Controller, Events, VerticalLayout } from "@/core"; import { Pane, ButtonGroup } from "@/base"; import { SingleSelectIconTextItem } from "../../button"; diff --git a/src/case/combo/iconcombo/trigger.iconcombo.js b/src/case/combo/iconcombo/trigger.iconcombo.js index 67293f2fc..4a94241e5 100644 --- a/src/case/combo/iconcombo/trigger.iconcombo.js +++ b/src/case/combo/iconcombo/trigger.iconcombo.js @@ -1,13 +1,4 @@ -import { - shortcut, - extend, - isKey, - createWidget, - isNotEmptyString, - AbsoluteLayout, - isArray, - any -} from "@/core"; +import { shortcut, extend, isKey, createWidget, isNotEmptyString, AbsoluteLayout, isArray, any } from "@/core"; import { Trigger, IconButton } from "@/base"; import { IconChangeButton } from "../../button"; @@ -83,11 +74,11 @@ export class IconComboTrigger extends Trigger { any(items, (i, item) => { if (v === item.value) { iconCls = item.iconCls; - + return true; } }); - + return iconCls; } diff --git a/src/case/combo/icontextvaluecombo/combo.icontextvalue.js b/src/case/combo/icontextvaluecombo/combo.icontextvalue.js index 85004eb22..6080de4ea 100644 --- a/src/case/combo/icontextvaluecombo/combo.icontextvalue.js +++ b/src/case/combo/icontextvaluecombo/combo.icontextvalue.js @@ -1,3 +1,4 @@ +import { IconTextValueComboPopup } from "./popup.icontextvalue"; import { shortcut, Widget, @@ -14,7 +15,6 @@ import { find, contains } from "@/core"; -import { IconTextValueComboPopup } from "./popup.icontextvalue"; import { SelectIconTextTrigger } from "../../trigger"; import { Combo } from "@/base"; @@ -26,11 +26,7 @@ export class IconTextValueCombo extends Widget { _defaultConfig(config) { return extend(super._defaultConfig(...arguments), { - baseCls: - `bi-icon-text-value-combo ${ - config.simple - ? "bi-border-bottom" - : "bi-border bi-border-radius"}`, + baseCls: `bi-icon-text-value-combo ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`, height: 24, iconHeight: null, iconWidth: null, @@ -42,13 +38,13 @@ export class IconTextValueCombo extends Widget { const o = this.options; o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { - this.setValue(newValue); - }) + this.setValue(newValue); + }) : o.value; o.items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { - this.populate(newValue); - }) + this.populate(newValue); + }) : o.items; super._init(...arguments); this.trigger = createWidget({ @@ -66,7 +62,7 @@ export class IconTextValueCombo extends Widget { warningTitle: o.warningTitle, }); this.popup = createWidget({ - type: "bi.icon_text_value_combo_popup", + type: IconTextValueComboPopup.xtype, items: o.items, value: o.value, iconHeight: o.iconHeight, @@ -126,7 +122,7 @@ export class IconTextValueCombo extends Widget { getValue() { const value = this.popup.getValue(); - + return isNull(value) ? [] : isArray(value) ? value : [value]; } diff --git a/src/case/combo/icontextvaluecombo/popup.icontextvalue.js b/src/case/combo/icontextvaluecombo/popup.icontextvalue.js index 02edd74f3..98dd00b1a 100644 --- a/src/case/combo/icontextvaluecombo/popup.icontextvalue.js +++ b/src/case/combo/icontextvaluecombo/popup.icontextvalue.js @@ -1,12 +1,4 @@ -import { - shortcut, - extend, - createWidget, - createItems, - Controller, - Events, - VerticalLayout -} from "@/core"; +import { shortcut, extend, createWidget, createItems, Controller, Events, VerticalLayout } from "@/core"; import { Pane, ButtonGroup } from "@/base"; import { SingleSelectIconTextItem } from "../../button"; @@ -20,7 +12,7 @@ export class IconTextValueComboPopup extends Pane { return extend(super._defaultConfig(...arguments), { baseCls: "bi-icon-text-icon-popup", behaviors: { - redmark () { + redmark() { return true; }, }, diff --git a/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js b/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js index a5c586773..1db1dec92 100644 --- a/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js +++ b/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js @@ -1,3 +1,5 @@ +import { SearchTextValueTrigger } from "./trigger.searchtextvalue"; +import { TextValueComboPopup } from "../textvaluecombo/popup.textvalue"; import { shortcut, Widget, @@ -11,9 +13,7 @@ import { find, contains } from "@/core"; -import { SearchTextValueTrigger } from "./trigger.searchtextvalue"; import { ButtonGroup, Combo } from "@/base"; -import { TextValueComboPopup } from "../textvaluecombo/popup.textvalue"; @shortcut() export class SearchTextValueCombo extends Widget { @@ -38,32 +38,30 @@ export class SearchTextValueCombo extends Widget { const o = this.options; o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { - this.setValue(newValue); - }) + this.setValue(newValue); + }) : o.value; o.items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { - this.populate(newValue); - }) + this.populate(newValue); + }) : o.items; return { type: Combo.xtype, - cls: - `${o.simple ? "bi-border-bottom" : "bi-border bi-border-radius" - } bi-focus-shadow`, + cls: `${o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"} bi-focus-shadow`, container: o.container, adjustLength: 2, height: toPix(o.height, o.simple ? 1 : 2), width: toPix(o.width, 2), - ref: _ref => { + ref: (_ref) => { this.combo = _ref; }, el: { - type: "bi.search_text_value_trigger", + type: SearchTextValueTrigger.xtype, cls: "search-text-value-trigger", watermark: o.watermark, - ref: _ref => { + ref: (_ref) => { this.trigger = _ref; }, items: o.items, @@ -90,16 +88,16 @@ export class SearchTextValueCombo extends Widget { this._clear(); this.fireEvent(SearchTextValueCombo.EVENT_CHANGE); }, - } + }, ], }, popup: { el: { - type: "bi.text_value_combo_popup", + type: TextValueComboPopup.xtype, chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE, value: o.value, items: o.items, - ref: _ref => { + ref: (_ref) => { this.popup = _ref; this.trigger.getSearcher().setAdapter(this.popup); }, @@ -109,11 +107,9 @@ export class SearchTextValueCombo extends Widget { action: () => { this.setValue(this.getValue()[0]); this.combo.hideView(); - this.fireEvent( - SearchTextValueCombo.EVENT_CHANGE - ); + this.fireEvent(SearchTextValueCombo.EVENT_CHANGE); }, - } + }, ], }, value: o.value, @@ -125,19 +121,15 @@ export class SearchTextValueCombo extends Widget { eventName: Combo.EVENT_AFTER_HIDEVIEW, action: () => { this.trigger.stopEditing(); - this.fireEvent( - SearchTextValueCombo.EVENT_AFTER_HIDEVIEW - ); + this.fireEvent(SearchTextValueCombo.EVENT_AFTER_HIDEVIEW); }, }, { eventName: Combo.EVENT_BEFORE_POPUPVIEW, action: () => { - this.fireEvent( - SearchTextValueCombo.EVENT_BEFORE_POPUPVIEW - ); + this.fireEvent(SearchTextValueCombo.EVENT_BEFORE_POPUPVIEW); }, - } + }, ], }; } @@ -182,7 +174,7 @@ export class SearchTextValueCombo extends Widget { getValue() { const value = this.combo.getValue(); - + return isNull(value) ? [] : isArray(value) ? value : [value]; } } diff --git a/src/case/combo/searchtextvaluecombo/popup.searchtextvalue.js b/src/case/combo/searchtextvaluecombo/popup.searchtextvalue.js index 36975c1d7..64baf06d7 100644 --- a/src/case/combo/searchtextvaluecombo/popup.searchtextvalue.js +++ b/src/case/combo/searchtextvaluecombo/popup.searchtextvalue.js @@ -1,12 +1,4 @@ -import { - shortcut, - Controller, - Events, - VerticalLayout, - map, - extend, - concat -} from "@/core"; +import { shortcut, Controller, Events, VerticalLayout, map, extend, concat } from "@/core"; import { ButtonGroup, Pane } from "@/base"; import { SingleSelectItem } from "../../button"; @@ -20,7 +12,7 @@ export class SearchTextValueComboPopup extends Pane { render() { const o = this.options; - + return { type: VerticalLayout.xtype, vgap: 5, @@ -38,7 +30,7 @@ export class SearchTextValueComboPopup extends Pane { } ], behaviors: { - redmark () { + redmark() { return true; }, }, @@ -48,16 +40,9 @@ export class SearchTextValueComboPopup extends Pane { eventName: Controller.EVENT_CHANGE, action: (...args) => { const [type, val, obj] = args; - this.fireEvent( - Controller.EVENT_CHANGE, - ...args - ); + this.fireEvent(Controller.EVENT_CHANGE, ...args); if (type === Events.CLICK) { - this.fireEvent( - SearchTextValueComboPopup.EVENT_CHANGE, - val, - obj - ); + this.fireEvent(SearchTextValueComboPopup.EVENT_CHANGE, val, obj); } }, } @@ -69,15 +54,17 @@ export class SearchTextValueComboPopup extends Pane { _formatItems(items) { const o = this.options; - - return map(items, (i, item) => extend( - { - type: SingleSelectItem.xtype, - textAlign: o.textAlign, - title: item.title || item.text, - }, - item - )); + + return map(items, (i, item) => + extend( + { + type: SingleSelectItem.xtype, + textAlign: o.textAlign, + title: item.title || item.text, + }, + item + ) + ); } mounted() { diff --git a/src/case/combo/searchtextvaluecombo/trigger.searchtextvalue.js b/src/case/combo/searchtextvaluecombo/trigger.searchtextvalue.js index a090b4c66..96dfd15ec 100644 --- a/src/case/combo/searchtextvaluecombo/trigger.searchtextvalue.js +++ b/src/case/combo/searchtextvaluecombo/trigger.searchtextvalue.js @@ -1,16 +1,6 @@ -import { - shortcut, - find, - i18nText, - isNotEmptyString, - VerticalAdaptLayout -} from "@/core"; -import { - ButtonGroup, - Trigger, - Searcher, - IconButton -} from "@/base"; +import { HorizontalFillLayout, shortcut, find, i18nText, isNotEmptyString, VerticalAdaptLayout } from "@/core"; +import { SearchTextValueComboPopup } from "./popup.searchtextvalue"; +import { ButtonGroup, Trigger, Searcher, IconButton } from "@/base"; import { TriggerIconButton } from "../../button"; import { DefaultTextEditor } from "../../editor"; @@ -50,7 +40,7 @@ export class SearchTextValueTrigger extends Trigger { const stateText = this._digest(o.value, o.items) || o.text; return { - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, columnSize: ["fill", 24], items: [ { @@ -72,17 +62,14 @@ export class SearchTextValueTrigger extends Trigger { height: o.height, }, popup: { - type: "bi.search_text_value_combo_popup", + type: SearchTextValueComboPopup.xtype, cls: "bi-card", chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE, tipText: i18nText("BI-No_Select"), }, - onSearch (obj, callback) { + onSearch(obj, callback) { const keyword = obj.keyword; - const finding = BI.Func.getSearchResult( - o.items, - keyword - ); + const finding = BI.Func.getSearchResult(o.items, keyword); const matched = finding.match, find = finding.find; callback(matched, find); @@ -91,9 +78,7 @@ export class SearchTextValueTrigger extends Trigger { { eventName: Searcher.EVENT_CHANGE, action: () => { - this.fireEvent( - SearchTextValueTrigger.EVENT_CHANGE - ); + this.fireEvent(SearchTextValueTrigger.EVENT_CHANGE); }, } ], @@ -112,20 +97,13 @@ export class SearchTextValueTrigger extends Trigger { ref: _ref => { this.clearBtn = _ref; }, - cls: - `close-h-font ${ - o.allowClear - ? "clear-button" - : ""}`, + cls: `close-h-font ${o.allowClear ? "clear-button" : ""}`, stopPropagation: true, - invisible: - !isNotEmptyString(stateText), + invisible: !isNotEmptyString(stateText), width: o.height, height: o.height, handler: () => { - this.fireEvent( - SearchTextValueTrigger.EVENT_CLEAR - ); + this.fireEvent(SearchTextValueTrigger.EVENT_CLEAR); }, }, }, @@ -147,7 +125,7 @@ export class SearchTextValueTrigger extends Trigger { _digest(value, items) { const result = find(items, (i, item) => item.value === value); - + return result?.text; } @@ -166,8 +144,7 @@ export class SearchTextValueTrigger extends Trigger { setValue(vals) { const digestText = this._digest(vals, this.options.items); this._setState(digestText); - this.options.allowClear && - this.clearBtn.setVisible(isNotEmptyString(digestText)); + this.options.allowClear && this.clearBtn.setVisible(isNotEmptyString(digestText)); } getValue() { diff --git a/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js b/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js index c2fcfe901..cd8079878 100644 --- a/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js +++ b/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js @@ -1,15 +1,4 @@ -import { - shortcut, - Widget, - extend, - isFunction, - createWidget, - toPix, - Controller, - isKey, - isNull, - isArray -} from "@/core"; +import { shortcut, Widget, extend, isFunction, createWidget, toPix, Controller, isKey, isNull, isArray } from "@/core"; import { ButtonGroup, Combo } from "@/base"; import { TextValueCheckComboPopup } from "./popup.textvaluecheck"; import { SelectTextTrigger } from "../../trigger"; @@ -22,9 +11,7 @@ export class TextValueCheckCombo extends Widget { _defaultConfig(config) { return extend(super._defaultConfig(...arguments), { - baseCls: - `bi-text-value-check-combo ${ - config.simple ? "bi-border-bottom" : "bi-border"}`, + baseCls: `bi-text-value-check-combo ${config.simple ? "bi-border-bottom" : "bi-border"}`, width: 100, height: 24, chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE, @@ -64,9 +51,12 @@ export class TextValueCheckCombo extends Widget { this.textIconCheckCombo.hideView(); this.fireEvent(TextValueCheckCombo.EVENT_CHANGE); }); - this.popup.on(Controller.EVENT_CHANGE, ...args => { - this.fireEvent(Controller.EVENT_CHANGE, ...args); - }); + this.popup.on( + Controller.EVENT_CHANGE, + ...args => { + this.fireEvent(Controller.EVENT_CHANGE, ...args); + } + ); this.textIconCheckCombo = createWidget({ type: Combo.xtype, container: o.container, @@ -102,7 +92,7 @@ export class TextValueCheckCombo extends Widget { getValue() { const value = this.popup.getValue(); - + return isNull(value) ? [] : isArray(value) ? value : [value]; } diff --git a/src/case/combo/textvaluecheckcombo/popup.textvaluecheck.js b/src/case/combo/textvaluecheckcombo/popup.textvaluecheck.js index 9c32c2b68..6520d1099 100644 --- a/src/case/combo/textvaluecheckcombo/popup.textvaluecheck.js +++ b/src/case/combo/textvaluecheckcombo/popup.textvaluecheck.js @@ -1,12 +1,4 @@ -import { - shortcut, - extend, - createWidget, - Controller, - Events, - VerticalLayout, - map -} from "@/core"; +import { shortcut, extend, createWidget, Controller, Events, VerticalLayout, map } from "@/core"; import { Pane, ButtonGroup } from "@/base"; import { SingleSelectItem } from "../../button"; @@ -56,16 +48,18 @@ export class TextValueCheckComboPopup extends Pane { _formatItems(items) { const o = this.options; - - return map(items, (i, item) => extend( - { - type: SingleSelectItem.xtype, - cls: "bi-list-item", - textAlign: o.textAlign, - title: item.title || item.text, - }, - item - )); + + return map(items, (i, item) => + extend( + { + type: SingleSelectItem.xtype, + cls: "bi-list-item", + textAlign: o.textAlign, + title: item.title || item.text, + }, + item + ) + ); } populate(items) { diff --git a/src/case/combo/textvaluecombo/combo.textvalue.js b/src/case/combo/textvaluecombo/combo.textvalue.js index a9bf892b5..d6b307026 100644 --- a/src/case/combo/textvaluecombo/combo.textvalue.js +++ b/src/case/combo/textvaluecombo/combo.textvalue.js @@ -1,3 +1,4 @@ +import { TextValueComboPopup } from "./popup.textvalue"; import { shortcut, Widget, @@ -15,7 +16,6 @@ import { } from "@/core"; import { ButtonGroup, Combo } from "@/base"; import { SelectTextTrigger } from "../../trigger"; -import { TextValueComboPopup } from "./popup.textvalue"; @shortcut() export class TextValueCombo extends Widget { @@ -25,11 +25,7 @@ export class TextValueCombo extends Widget { _defaultConfig(config) { return extend(super._defaultConfig(...arguments), { - baseCls: - `bi-text-value-combo ${ - config.simple - ? "bi-border-bottom" - : "bi-border bi-border-radius"}`, + baseCls: `bi-text-value-combo ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`, height: 24, chooseType: ButtonGroup.CHOOSE_TYPE_SINGLE, text: "", @@ -47,13 +43,13 @@ export class TextValueCombo extends Widget { const o = this.options; o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { - this.setValue(newValue); - }) + this.setValue(newValue); + }) : o.value; o.items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { - this.populate(newValue); - }) + this.populate(newValue); + }) : o.items; super._init(...arguments); } @@ -71,7 +67,7 @@ export class TextValueCombo extends Widget { text: o.warningTitle, }; } - + return { level: "success", }; @@ -79,7 +75,7 @@ export class TextValueCombo extends Widget { const trigger = { type: SelectTextTrigger.xtype, - ref: ref => (this.trigger = ref), + ref: (ref) => (this.trigger = ref), cls: "text-value-trigger", items: o.items, height: toPix(o.height, o.simple ? 1 : 2), @@ -95,14 +91,14 @@ export class TextValueCombo extends Widget { this._clear(); this.fireEvent(TextValueCombo.EVENT_CHANGE); }, - } + }, ], ...o.el, }; let changeTag = false; const popup = { - type: "bi.text_value_combo_popup", - ref: ref => (this.popup = ref), + type: TextValueComboPopup.xtype, + ref: (ref) => (this.popup = ref), chooseType: o.chooseType, items: o.items, allowSelectAll: o.allowSelectAll, @@ -115,15 +111,9 @@ export class TextValueCombo extends Widget { this.setValue(value); if (o.chooseType === ButtonGroup.CHOOSE_TYPE_SINGLE) { this.combo.hideView(...args); - this.fireEvent( - TextValueCombo.EVENT_CHANGE, - ...args - ); + this.fireEvent(TextValueCombo.EVENT_CHANGE, ...args); } - if ( - o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI && - isEmptyArray(value) - ) { + if (o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI && isEmptyArray(value)) { this._clear(); } }, @@ -147,7 +137,7 @@ export class TextValueCombo extends Widget { action: (...args) => { this.combo.hideView(); }, - } + }, ], }; @@ -155,7 +145,7 @@ export class TextValueCombo extends Widget { type: Combo.xtype, height: toPix(o.height, 2), width: toPix(o.width, 2), - ref: ref => (this.combo = ref), + ref: (ref) => (this.combo = ref), container: o.container, direction: o.direction, adjustLength: 2, @@ -170,27 +160,17 @@ export class TextValueCombo extends Widget { { eventName: Combo.EVENT_AFTER_HIDEVIEW, action: (...args) => { - if ( - o.chooseType !== ButtonGroup.CHOOSE_TYPE_SINGLE && - changeTag - ) { - this.fireEvent( - TextValueCombo.EVENT_CHANGE, - ...args - ); + if (o.chooseType !== ButtonGroup.CHOOSE_TYPE_SINGLE && changeTag) { + this.fireEvent(TextValueCombo.EVENT_CHANGE, ...args); } }, - } + }, ], popup: { el: popup, value: o.value, maxHeight: 240, - minHeight: - o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI && - o.allowSelectAll - ? 55 - : 25, + minHeight: o.chooseType === ButtonGroup.CHOOSE_TYPE_MULTI && o.allowSelectAll ? 55 : 25, }, }; } @@ -211,7 +191,7 @@ export class TextValueCombo extends Widget { _checkError(v) { if (isNull(v)) { this.setStatus("success"); - + return; } @@ -247,7 +227,7 @@ export class TextValueCombo extends Widget { getValue() { const value = this.combo.getValue(); - + return isNull(value) ? [] : isArray(value) ? value : [value]; } diff --git a/src/case/combo/textvaluecombo/combo.textvaluesmall.js b/src/case/combo/textvaluecombo/combo.textvaluesmall.js index d531e1885..c6bfe6180 100644 --- a/src/case/combo/textvaluecombo/combo.textvaluesmall.js +++ b/src/case/combo/textvaluecombo/combo.textvaluesmall.js @@ -1,11 +1,7 @@ -import { - shortcut, - Widget, - extend -} from "@/core"; +import { TextValueCombo } from "./combo.textvalue"; +import { shortcut, Widget, extend } from "@/core"; import { ButtonGroup } from "@/base"; import { SmallSelectTextTrigger } from "../../trigger"; -import { TextValueCombo } from "./combo.textvalue"; @shortcut() export class SmallTextValueCombo extends Widget { @@ -25,10 +21,10 @@ export class SmallTextValueCombo extends Widget { render() { const o = this.options; - + return { - type: "bi.text_value_combo", - ref: _ref => { + type: TextValueCombo.xtype, + ref: (_ref) => { this.combo = _ref; }, height: o.height, @@ -47,12 +43,9 @@ export class SmallTextValueCombo extends Widget { { eventName: TextValueCombo.EVENT_CHANGE, action: (...args) => { - this.fireEvent( - SmallTextValueCombo.EVENT_CHANGE, - ...args - ); + this.fireEvent(SmallTextValueCombo.EVENT_CHANGE, ...args); }, - } + }, ], }; } diff --git a/src/case/combo/textvaluecombo/popup.textvalue.js b/src/case/combo/textvaluecombo/popup.textvalue.js index a9fa0caaf..b0b22a048 100644 --- a/src/case/combo/textvaluecombo/popup.textvalue.js +++ b/src/case/combo/textvaluecombo/popup.textvalue.js @@ -55,16 +55,9 @@ export class TextValueComboPopup extends Pane { { eventName: Controller.EVENT_CHANGE, action: (type, val, obj) => { - this.fireEvent( - Controller.EVENT_CHANGE, - arguments - ); + this.fireEvent(Controller.EVENT_CHANGE, arguments); if (type === Events.CLICK) { - this.fireEvent( - TextValueComboPopup.EVENT_CHANGE, - val, - obj - ); + this.fireEvent(TextValueComboPopup.EVENT_CHANGE, val, obj); } }, } @@ -73,7 +66,7 @@ export class TextValueComboPopup extends Pane { ], }; } - + return { type: VerticalLayout.xtype, verticalAlign: VerticalAlign.Stretch, @@ -104,11 +97,8 @@ export class TextValueComboPopup extends Pane { listeners: [ { eventName: SelectList.EVENT_CHANGE, - action (val) { - this.fireEvent( - TextValueComboPopup.EVENT_CHANGE, - val - ); + action(val) { + this.fireEvent(TextValueComboPopup.EVENT_CHANGE, val); }, } ], @@ -123,18 +113,14 @@ export class TextValueComboPopup extends Pane { type: TextButton.xtype, text: i18nText("BI-Basic_Clears"), handler: () => { - this.fireEvent( - TextValueComboPopup.EVENT_CLEAR - ); + this.fireEvent(TextValueComboPopup.EVENT_CLEAR); }, }, { type: TextButton.xtype, text: i18nText("BI-Basic_OK"), handler: () => { - this.fireEvent( - TextValueComboPopup.EVENT_CONFIRM - ); + this.fireEvent(TextValueComboPopup.EVENT_CONFIRM); }, } ], @@ -168,10 +154,7 @@ export class TextValueComboPopup extends Pane { { eventName: ListPane.EVENT_CHANGE, action: val => { - this.fireEvent( - TextValueComboPopup.EVENT_CHANGE, - val - ); + this.fireEvent(TextValueComboPopup.EVENT_CHANGE, val); }, } ], @@ -188,19 +171,19 @@ export class TextValueComboPopup extends Pane { _formatItems(items) { const o = this.options; - - return map(items, (i, item) => extend( - { - type: - o.chooseType !== ButtonGroup.CHOOSE_TYPE_MULTI - ? SingleSelectItem.xtype - : MultiSelectItem.xtype, - iconWrapperWidth: 36, - textAlign: o.textAlign, - title: item.title || item.text, - }, - item - )); + + return map(items, (i, item) => + extend( + { + type: + o.chooseType !== ButtonGroup.CHOOSE_TYPE_MULTI ? SingleSelectItem.xtype : MultiSelectItem.xtype, + iconWrapperWidth: 36, + textAlign: o.textAlign, + title: item.title || item.text, + }, + item + ) + ); } populate(items) { @@ -229,7 +212,7 @@ export class TextValueComboPopup extends Pane { } if (!this.options.allowSelectAll) { this.popup.setValue(v); - + return; } this.popup.setValue({ diff --git a/src/case/editor/editor.clear.js b/src/case/editor/editor.clear.js index c536e3ec1..a35a4302e 100644 --- a/src/case/editor/editor.clear.js +++ b/src/case/editor/editor.clear.js @@ -1,5 +1,16 @@ -import { shortcut, Widget, extend, emptyFn, isKey, isFunction, createWidget, Controller, Events } from "@/core"; import { Editor, IconButton } from "@/base"; +import { + HTapeLayout, + shortcut, + Widget, + extend, + emptyFn, + isKey, + isFunction, + createWidget, + Controller, + Events +} from "@/core"; /** * 有清除按钮的文本框 @@ -9,31 +20,31 @@ import { Editor, IconButton } from "@/base"; */ @shortcut() export class ClearEditor extends Widget { - static xtype = "bi.clear_editor" + static xtype = "bi.clear_editor"; - static EVENT_CHANGE = "EVENT_CHANGE" - static EVENT_FOCUS = "EVENT_FOCUS" - static EVENT_BLUR = "EVENT_BLUR" - static EVENT_CLICK = "EVENT_CLICK" - static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" - static EVENT_SPACE = "EVENT_SPACE" - static EVENT_BACKSPACE = "EVENT_BACKSPACE" - static EVENT_CLEAR = "EVENT_CLEAR" - static EVENT_START = "EVENT_START" - static EVENT_PAUSE = "EVENT_PAUSE" - static EVENT_STOP = "EVENT_STOP" - static EVENT_CONFIRM = "EVENT_CONFIRM" - static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" - static EVENT_VALID = "EVENT_VALID" - static EVENT_ERROR = "EVENT_ERROR" - static EVENT_ENTER = "EVENT_ENTER" - static EVENT_RESTRICT = "EVENT_RESTRICT" - static EVENT_REMOVE = "EVENT_REMOVE" - static EVENT_EMPTY = "EVENT_EMPTY" + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_CLICK = "EVENT_CLICK"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_SPACE = "EVENT_SPACE"; + static EVENT_BACKSPACE = "EVENT_BACKSPACE"; + static EVENT_CLEAR = "EVENT_CLEAR"; + static EVENT_START = "EVENT_START"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_ENTER = "EVENT_ENTER"; + static EVENT_RESTRICT = "EVENT_RESTRICT"; + static EVENT_REMOVE = "EVENT_REMOVE"; + static EVENT_EMPTY = "EVENT_EMPTY"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: "bi-clear-editor", height: 24, @@ -46,12 +57,14 @@ export class ClearEditor extends Widget { _init() { const o = this.options; - o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { - this.setValue(newValue); - }) : o.value; + o.value = isFunction(o.value) + ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); + }) + : o.value; super._init(...arguments); this.editor = createWidget({ - type: "bi.editor", + type: Editor.xtype, simple: o.simple, height: o.height, watermark: o.watermark, @@ -63,7 +76,7 @@ export class ClearEditor extends Widget { autoTrim: o.autoTrim, }); this.clear = createWidget({ - type: "bi.icon_button", + type: IconButton.xtype, stopEvent: true, invisible: !isKey(o.value), cls: "search-close-h-font", @@ -75,14 +88,15 @@ export class ClearEditor extends Widget { }); createWidget({ element: this, - type: "bi.htape", - items: [{ - el: this.editor, - }, - { - el: this.clear, - width: 24, - } + type: HTapeLayout.xtype, + items: [ + { + el: this.editor, + }, + { + el: this.clear, + width: 24, + } ], }); this.editor.on(Controller.EVENT_CHANGE, (...args) => { @@ -112,7 +126,6 @@ export class ClearEditor extends Widget { this.fireEvent(ClearEditor.EVENT_BACKSPACE); }); - this.editor.on(Editor.EVENT_VALID, () => { this.fireEvent(ClearEditor.EVENT_VALID); }); diff --git a/src/case/editor/editor.defaulttext.js b/src/case/editor/editor.defaulttext.js index 7597347d7..d8db6f2da 100644 --- a/src/case/editor/editor.defaulttext.js +++ b/src/case/editor/editor.defaulttext.js @@ -1,6 +1,15 @@ - -import { shortcut, Widget, emptyFn, isKey, isFunction, createWidget, nextTick, Controller } from "@/core"; import { Editor, TextButton } from "@/base"; +import { + AbsoluteLayout, + shortcut, + Widget, + emptyFn, + isKey, + isFunction, + createWidget, + nextTick, + Controller +} from "@/core"; /** * dailer @@ -10,25 +19,25 @@ import { Editor, TextButton } from "@/base"; */ @shortcut() export class DefaultTextEditor extends Widget { - static xtype = "bi.default_text_editor" - - static EVENT_CHANGE = "EVENT_CHANGE" - static EVENT_FOCUS = "EVENT_FOCUS" - static EVENT_BLUR = "EVENT_BLUR" - static EVENT_CLICK = "EVENT_CLICK" - static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" - static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" - static EVENT_START = "EVENT_START" - static EVENT_PAUSE = "EVENT_PAUSE" - static EVENT_STOP = "EVENT_STOP" - static EVENT_CONFIRM = "EVENT_CONFIRM" - static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" - static EVENT_VALID = "EVENT_VALID" - static EVENT_ERROR = "EVENT_ERROR" - static EVENT_ENTER = "EVENT_ENTER" - static EVENT_RESTRICT = "EVENT_RESTRICT" - static EVENT_SPACE = "EVENT_SPACE" - static EVENT_EMPTY = "EVENT_EMPTY" + static xtype = "bi.default_text_editor"; + + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_CLICK = "EVENT_CLICK"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; + static EVENT_START = "EVENT_START"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_ENTER = "EVENT_ENTER"; + static EVENT_RESTRICT = "EVENT_RESTRICT"; + static EVENT_SPACE = "EVENT_SPACE"; + static EVENT_EMPTY = "EVENT_EMPTY"; props() { return { @@ -54,7 +63,7 @@ export class DefaultTextEditor extends Widget { render() { const o = this.options; this.editor = createWidget(o.el, { - type: "bi.editor", + type: Editor.xtype, simple: o.simple, height: o.height, hgap: o.hgap, @@ -76,7 +85,7 @@ export class DefaultTextEditor extends Widget { const showText = isFunction(o.text) ? o.text() : o.text; this.text = createWidget({ - type: "bi.text_button", + type: TextButton.xtype, cls: isKey(showText) ? "tip-text-style" : "bi-water-mark tip-text-style", textAlign: "left", height: o.height, @@ -153,20 +162,23 @@ export class DefaultTextEditor extends Widget { }); return { - type: "bi.absolute", - items: [{ - el: this.editor, - left: 0, - right: 0, - top: 0, - bottom: 0, - }, { - el: this.text, - left: 0, - right: 0, - top: 0, - bottom: 0, - }], + type: AbsoluteLayout.xtype, + items: [ + { + el: this.editor, + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + { + el: this.text, + left: 0, + right: 0, + top: 0, + bottom: 0, + } + ], }; } @@ -273,7 +285,7 @@ export class DefaultTextEditor extends Widget { if (isKey(v)) { this.text.setText(v); this.text.element.removeClass("bi-water-mark"); - + return; } this.text.setText(o.defaultText); diff --git a/src/case/editor/editor.shelter.js b/src/case/editor/editor.shelter.js index 7517c6320..054bb37b6 100644 --- a/src/case/editor/editor.shelter.js +++ b/src/case/editor/editor.shelter.js @@ -1,5 +1,17 @@ -import { shortcut, Widget, extend, emptyFn, isFunction, createWidget, Controller, isKey, nextTick, bind } from "@/core"; import { Editor, TextButton } from "@/base"; +import { + AbsoluteLayout, + shortcut, + Widget, + extend, + emptyFn, + isFunction, + createWidget, + Controller, + isKey, + nextTick, + bind +} from "@/core"; /** * 带标记的文本框 @@ -9,29 +21,29 @@ import { Editor, TextButton } from "@/base"; */ @shortcut() export class ShelterEditor extends Widget { - static xtype = "bi.shelter_editor" + static xtype = "bi.shelter_editor"; - static EVENT_CHANGE = "EVENT_CHANGE" - static EVENT_FOCUS = "EVENT_FOCUS" - static EVENT_BLUR = "EVENT_BLUR" - static EVENT_CLICK = "EVENT_CLICK" - static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" - static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" - static EVENT_START = "EVENT_START" - static EVENT_PAUSE = "EVENT_PAUSE" - static EVENT_STOP = "EVENT_STOP" - static EVENT_CONFIRM = "EVENT_CONFIRM" - static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" - static EVENT_VALID = "EVENT_VALID" - static EVENT_ERROR = "EVENT_ERROR" - static EVENT_ENTER = "EVENT_ENTER" - static EVENT_RESTRICT = "EVENT_RESTRICT" - static EVENT_SPACE = "EVENT_SPACE" - static EVENT_EMPTY = "EVENT_EMPTY" + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_CLICK = "EVENT_CLICK"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; + static EVENT_START = "EVENT_START"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_ENTER = "EVENT_ENTER"; + static EVENT_RESTRICT = "EVENT_RESTRICT"; + static EVENT_SPACE = "EVENT_SPACE"; + static EVENT_EMPTY = "EVENT_EMPTY"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-shelter-editor`, hgap: 4, @@ -49,15 +61,17 @@ export class ShelterEditor extends Widget { textAlign: "left", }); } - + _init() { const o = this.options; - o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { - this.setValue(newValue); - }) : o.value; + o.value = isFunction(o.value) + ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); + }) + : o.value; super._init(...arguments); this.editor = createWidget({ - type: "bi.editor", + type: Editor.xtype, simple: o.simple, height: o.height, hgap: o.hgap, @@ -75,7 +89,7 @@ export class ShelterEditor extends Widget { autoTrim: o.autoTrim, }); this.text = createWidget({ - type: "bi.text_button", + type: TextButton.xtype, cls: "shelter-editor-text", title: o.title, warningTitle: o.warningTitle, @@ -149,131 +163,136 @@ export class ShelterEditor extends Widget { this.fireEvent(ShelterEditor.EVENT_EMPTY, ...args); }); createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - }], + items: [ + { + el: this.text, + inset: 0, + }, + { + el: this.editor, + inset: 0, + } + ], }); this._showHint(); this._checkText(); } - + _checkText() { const o = this.options; - nextTick(bind(function () { - if (this.editor.getValue() === "") { - this.text.setValue(o.watermark || ""); - this.text.element.addClass("bi-water-mark"); - } else { - this.text.setValue(this.editor.getValue()); - this.text.element.removeClass("bi-water-mark"); - } - isKey(o.keyword) && this.text.doRedMark(o.keyword); - }, this)); + nextTick( + bind(function () { + if (this.editor.getValue() === "") { + this.text.setValue(o.watermark || ""); + this.text.element.addClass("bi-water-mark"); + } else { + this.text.setValue(this.editor.getValue()); + this.text.element.removeClass("bi-water-mark"); + } + isKey(o.keyword) && this.text.doRedMark(o.keyword); + }, this) + ); } - + _showInput() { this.editor.visible(); this.text.invisible(); } - + _showHint() { this.editor.invisible(); this.text.visible(); } - + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); } - + setTitle(title) { this.text.setTitle(title); } - + setWarningTitle(title) { this.text.setWarningTitle(title); } - + focus() { this._showInput(); this.editor.focus(); } - + blur() { this.editor.blur(); this._showHint(); this._checkText(); } - + doRedMark() { if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } this.text.doRedMark(...arguments); } - + unRedMark() { this.text.unRedMark(...arguments); } - + doHighLight() { if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } this.text.doHighLight(...arguments); } - + unHighLight() { this.text.unHighLight(...arguments); } - + isValid() { return this.editor.isValid(); } - + setErrorText(text) { this.editor.setErrorText(text); } - + getErrorText() { return this.editor.getErrorText(); } - + isEditing() { return this.editor.isEditing(); } - + getLastValidValue() { return this.editor.getLastValidValue(); } - + getLastChangedValue() { return this.editor.getLastChangedValue(); } - + setTextStyle(style) { this.text.setStyle(style); } - + setValue(k) { this.editor.setValue(k); this._checkText(); } - + getValue() { return this.editor.getValue(); } - + getState() { return this.text.getValue(); } - + setState(v) { this._showHint(); this.text.setValue(v); diff --git a/src/case/editor/editor.sign.js b/src/case/editor/editor.sign.js index 08feca088..f5b4712b4 100644 --- a/src/case/editor/editor.sign.js +++ b/src/case/editor/editor.sign.js @@ -1,5 +1,17 @@ -import { shortcut, Widget, extend, emptyFn, isFunction, createWidget, nextTick, isKey, bind, Controller } from "@/core"; import { Editor, TextButton } from "@/base"; +import { + AbsoluteLayout, + shortcut, + Widget, + extend, + emptyFn, + isFunction, + createWidget, + nextTick, + isKey, + bind, + Controller +} from "@/core"; /** * 带标记的文本框 @@ -9,30 +21,30 @@ import { Editor, TextButton } from "@/base"; */ @shortcut() export class SignEditor extends Widget { - static xtype = "bi.sign_editor" + static xtype = "bi.sign_editor"; - static EVENT_CHANGE = "EVENT_CHANGE" - static EVENT_FOCUS = "EVENT_FOCUS" - static EVENT_BLUR = "EVENT_BLUR" - static EVENT_CLICK = "EVENT_CLICK" - static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" - static EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN" - static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" - static EVENT_START = "EVENT_START" - static EVENT_PAUSE = "EVENT_PAUSE" - static EVENT_STOP = "EVENT_STOP" - static EVENT_CONFIRM = "EVENT_CONFIRM" - static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" - static EVENT_VALID = "EVENT_VALID" - static EVENT_ERROR = "EVENT_ERROR" - static EVENT_ENTER = "EVENT_ENTER" - static EVENT_RESTRICT = "EVENT_RESTRICT" - static EVENT_SPACE = "EVENT_SPACE" - static EVENT_EMPTY = "EVENT_EMPTY" + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_CLICK = "EVENT_CLICK"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN"; + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; + static EVENT_START = "EVENT_START"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_ENTER = "EVENT_ENTER"; + static EVENT_RESTRICT = "EVENT_RESTRICT"; + static EVENT_SPACE = "EVENT_SPACE"; + static EVENT_EMPTY = "EVENT_EMPTY"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-sign-editor`, hgap: 4, @@ -53,12 +65,14 @@ export class SignEditor extends Widget { _init() { const o = this.options; - o.value = isFunction(o.value) ? this.__watch(o.value, (context, newValue) => { - this.setValue(newValue); - }) : o.value; + o.value = isFunction(o.value) + ? this.__watch(o.value, (context, newValue) => { + this.setValue(newValue); + }) + : o.value; super._init(...arguments); this.editor = createWidget({ - type: "bi.editor", + type: Editor.xtype, simple: o.simple, height: o.height, hgap: o.hgap, @@ -76,7 +90,7 @@ export class SignEditor extends Widget { autoTrim: o.autoTrim, }); this.text = createWidget({ - type: "bi.text_button", + type: TextButton.xtype, cls: "sign-editor-text", title: o.title, warningTitle: o.warningTitle, @@ -156,15 +170,18 @@ export class SignEditor extends Widget { this.fireEvent(SignEditor.EVENT_EMPTY, ...args); }); createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - }], + items: [ + { + el: this.text, + inset: 0, + }, + { + el: this.editor, + inset: 0, + } + ], }); this._showHint(); this._checkText(); @@ -172,16 +189,18 @@ export class SignEditor extends Widget { _checkText() { const o = this.options; - nextTick(bind(function () { - if (this.editor.getValue() === "") { - this.text.setValue(o.watermark || ""); - this.text.element.addClass("bi-water-mark"); - } else { - this.text.setValue(this.editor.getValue()); - this.text.element.removeClass("bi-water-mark"); - isKey(o.keyword) && this.text.doRedMark(o.keyword); - } - }, this)); + nextTick( + bind(function () { + if (this.editor.getValue() === "") { + this.text.setValue(o.watermark || ""); + this.text.element.addClass("bi-water-mark"); + } else { + this.text.setValue(this.editor.getValue()); + this.text.element.removeClass("bi-water-mark"); + isKey(o.keyword) && this.text.doRedMark(o.keyword); + } + }, this) + ); } _showInput() { @@ -256,7 +275,7 @@ export class SignEditor extends Widget { getErrorText() { return this.editor.getErrorText(); } - + isEditing() { return this.editor.isEditing(); } diff --git a/src/case/editor/editor.state.js b/src/case/editor/editor.state.js index d11dc059d..bdb731adc 100644 --- a/src/case/editor/editor.state.js +++ b/src/case/editor/editor.state.js @@ -1,5 +1,23 @@ -import { shortcut, Widget, extend, emptyFn, i18nText, isArray, createWidget, nextTick, Controller, isNotNull, isString, isKey, isFunction, isNumber, isEmpty } from "@/core"; -import { TextButton, Editor } from "@/base"; +import { Editor, TextButton } from "@/base"; +import { + AbsoluteLayout, + shortcut, + Widget, + extend, + emptyFn, + i18nText, + isArray, + createWidget, + nextTick, + Controller, + isNotNull, + isString, + isKey, + isFunction, + isNumber, + isEmpty, + Selection +} from "@/core"; /** * guy @@ -9,29 +27,29 @@ import { TextButton, Editor } from "@/base"; */ @shortcut() export class StateEditor extends Widget { - static xtype = "bi.state_editor" + static xtype = "bi.state_editor"; - static EVENT_CHANGE = "EVENT_CHANGE" - static EVENT_FOCUS = "EVENT_FOCUS" - static EVENT_BLUR = "EVENT_BLUR" - static EVENT_CLICK = "EVENT_CLICK" - static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" - static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" - static EVENT_START = "EVENT_START" - static EVENT_PAUSE = "EVENT_PAUSE" - static EVENT_STOP = "EVENT_STOP" - static EVENT_CONFIRM = "EVENT_CONFIRM" - static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" - static EVENT_VALID = "EVENT_VALID" - static EVENT_ERROR = "EVENT_ERROR" - static EVENT_ENTER = "EVENT_ENTER" - static EVENT_RESTRICT = "EVENT_RESTRICT" - static EVENT_SPACE = "EVENT_SPACE" - static EVENT_EMPTY = "EVENT_EMPTY" + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_CLICK = "EVENT_CLICK"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; + static EVENT_START = "EVENT_START"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_ENTER = "EVENT_ENTER"; + static EVENT_RESTRICT = "EVENT_RESTRICT"; + static EVENT_SPACE = "EVENT_SPACE"; + static EVENT_EMPTY = "EVENT_EMPTY"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-state-editor`, hgap: 4, @@ -51,12 +69,12 @@ export class StateEditor extends Widget { el: {}, }); } - + _init() { super._init(...arguments); const o = this.options; this.editor = createWidget(o.el, { - type: "bi.editor", + type: Editor.xtype, simple: o.simple, height: o.height, hgap: o.hgap, @@ -74,7 +92,7 @@ export class StateEditor extends Widget { autoTrim: o.autoTrim, }); this.text = createWidget({ - type: "bi.text_button", + type: TextButton.xtype, cls: "bi-water-mark tip-text-style", textAlign: "left", height: o.height, @@ -85,17 +103,19 @@ export class StateEditor extends Widget { this.editor.focus(); this.editor.setValue(""); }, - title: isNotNull(o.tipText) ? o.tipText : () => { - let title = ""; - if (isString(this.stateValue)) { - title = this.stateValue; - } - if (isArray(this.stateValue) && this.stateValue.length === 1) { - title = this.stateValue[0]; - } - - return title; - }, + title: isNotNull(o.tipText) + ? o.tipText + : () => { + let title = ""; + if (isString(this.stateValue)) { + title = this.stateValue; + } + if (isArray(this.stateValue) && this.stateValue.length === 1) { + title = this.stateValue[0]; + } + + return title; + }, warningTitle: o.warningTitle, tipType: o.tipType, }); @@ -159,112 +179,115 @@ export class StateEditor extends Widget { this.fireEvent(StateEditor.EVENT_EMPTY, ...args); }); createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.text, - inset: 0, - }, { - el: this.editor, - inset: 0, - }], + items: [ + { + el: this.text, + inset: 0, + }, + { + el: this.editor, + inset: 0, + } + ], }); this._showHint(); if (isNotNull(o.text)) { this.setState(o.text); } } - + setWaterMark(v) { this.options.watermark = v; this.editor.setWaterMark(v); } - + doRedMark() { if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } this.text.doRedMark(...arguments); } - + unRedMark() { this.text.unRedMark(...arguments); } - + doHighLight() { if (this.editor.getValue() === "" && isKey(this.options.watermark)) { return; } this.text.doHighLight(...arguments); } - + unHighLight() { this.text.unHighLight(...arguments); } - + focus() { if (this.options.disabled === false) { this._showInput(); this.editor.focus(); } } - + blur() { this.editor.blur(); this._showHint(); } - + _showInput() { this.editor.visible(); this.text.invisible(); } - + _showHint() { this.editor.invisible(); this.text.visible(); } - + _setText(v) { this.text.setText(v); this.text.setTitle(v); } - + isValid() { return this.editor.isValid(); } - + setErrorText(text) { this.editor.setErrorText(text); } - + getErrorText() { return this.editor.getErrorText(); } - + isEditing() { return this.editor.isEditing(); } - + getLastValidValue() { return this.editor.getLastValidValue(); } - + getLastChangedValue() { return this.editor.getLastChangedValue(); } - + setValue(k) { this.editor.setValue(k); } - + getValue() { return this.editor.getValue(); } - + getState() { return this.editor.getValue().match(/[^\s]+/g); } - + setState(v) { const o = this.options; const defaultText = isFunction(o.defaultText) ? o.defaultText() : o.defaultText; @@ -279,22 +302,28 @@ export class StateEditor extends Widget { this.text.element.removeClass("bi-water-mark"); } else { this._setText(isKey(defaultText) ? defaultText : o.text); - isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); + isKey(defaultText) + ? this.text.element.addClass("bi-water-mark") + : this.text.element.removeClass("bi-water-mark"); } - + return; } if (isString(v)) { this._setText(v); // 配置了defaultText才判断标灰，其他情况不标灰 - (isKey(defaultText) && defaultText === v) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); - + isKey(defaultText) && defaultText === v + ? this.text.element.addClass("bi-water-mark") + : this.text.element.removeClass("bi-water-mark"); + return; } if (isArray(v)) { if (isEmpty(v)) { this._setText(isKey(defaultText) ? defaultText : o.text); - isKey(defaultText) ? this.text.element.addClass("bi-water-mark") : this.text.element.removeClass("bi-water-mark"); + isKey(defaultText) + ? this.text.element.addClass("bi-water-mark") + : this.text.element.removeClass("bi-water-mark"); } else if (v.length === 1) { this._setText(v[0]); this.text.element.removeClass("bi-water-mark"); @@ -304,11 +333,11 @@ export class StateEditor extends Widget { } } } - + setTipType(v) { this.text.options.tipType = v; } - + getText() { return this.text.getText(); } diff --git a/src/case/editor/editor.state.simple.js b/src/case/editor/editor.state.simple.js index 807a8c158..367b3a34e 100644 --- a/src/case/editor/editor.state.simple.js +++ b/src/case/editor/editor.state.simple.js @@ -1,5 +1,23 @@ -import { shortcut, Widget, extend, emptyFn, i18nText, Controller, createWidget, nextTick, isNotNull, isKey, isFunction, isArray, isNumber, isEmpty } from "@/core"; import { Editor, TextButton } from "@/base"; +import { + AbsoluteLayout, + VerticalLayout, + shortcut, + Widget, + extend, + emptyFn, + i18nText, + Controller, + createWidget, + nextTick, + isNotNull, + isKey, + isFunction, + isArray, + isNumber, + isEmpty, + Selection +} from "@/core"; /** * 无限制-已选择状态输入框 @@ -9,29 +27,29 @@ import { Editor, TextButton } from "@/base"; */ @shortcut() export class SimpleStateEditor extends Widget { - static xtype = "bi.simple_state_editor" + static xtype = "bi.simple_state_editor"; - static EVENT_CHANGE = "EVENT_CHANGE" - static EVENT_FOCUS = "EVENT_FOCUS" - static EVENT_BLUR = "EVENT_BLUR" - static EVENT_CLICK = "EVENT_CLICK" - static EVENT_KEY_DOWN = "EVENT_KEY_DOWN" - static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL" - static EVENT_START = "EVENT_START" - static EVENT_PAUSE = "EVENT_PAUSE" - static EVENT_STOP = "EVENT_STOP" - static EVENT_CONFIRM = "EVENT_CONFIRM" - static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM" - static EVENT_VALID = "EVENT_VALID" - static EVENT_ERROR = "EVENT_ERROR" - static EVENT_ENTER = "EVENT_ENTER" - static EVENT_RESTRICT = "EVENT_RESTRICT" - static EVENT_SPACE = "EVENT_SPACE" - static EVENT_EMPTY = "EVENT_EMPTY" + static EVENT_CHANGE = "EVENT_CHANGE"; + static EVENT_FOCUS = "EVENT_FOCUS"; + static EVENT_BLUR = "EVENT_BLUR"; + static EVENT_CLICK = "EVENT_CLICK"; + static EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; + static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL"; + static EVENT_START = "EVENT_START"; + static EVENT_PAUSE = "EVENT_PAUSE"; + static EVENT_STOP = "EVENT_STOP"; + static EVENT_CONFIRM = "EVENT_CONFIRM"; + static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM"; + static EVENT_VALID = "EVENT_VALID"; + static EVENT_ERROR = "EVENT_ERROR"; + static EVENT_ENTER = "EVENT_ENTER"; + static EVENT_RESTRICT = "EVENT_RESTRICT"; + static EVENT_SPACE = "EVENT_SPACE"; + static EVENT_EMPTY = "EVENT_EMPTY"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-simple-state-editor`, hgap: 4, @@ -56,7 +74,7 @@ export class SimpleStateEditor extends Widget { super._init(...arguments); const o = this.options; this.editor = createWidget({ - type: "bi.editor", + type: Editor.xtype, simple: o.simple, height: o.height, hgap: o.hgap, @@ -74,7 +92,7 @@ export class SimpleStateEditor extends Widget { autoTrim: o.autoTrim, }); this.text = createWidget({ - type: "bi.text_button", + type: TextButton.xtype, cls: "bi-water-mark", textAlign: "left", text: o.text, @@ -92,15 +110,17 @@ export class SimpleStateEditor extends Widget { }); }); createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, element: this, - items: [{ - el: this.text, - left: 0, - right: 0, - top: 0, - bottom: 0, - }], + items: [ + { + el: this.text, + left: 0, + right: 0, + top: 0, + bottom: 0, + } + ], }); this.editor.on(Controller.EVENT_CHANGE, (...args) => { this.fireEvent(Controller.EVENT_CHANGE, ...args); @@ -157,7 +177,7 @@ export class SimpleStateEditor extends Widget { this.fireEvent(SimpleStateEditor.EVENT_EMPTY, ...args); }); createWidget({ - type: "bi.vertical", + type: VerticalLayout.xtype, scrolly: false, element: this, items: [this.editor], @@ -271,7 +291,7 @@ export class SimpleStateEditor extends Widget { this._setText(isKey(defaultText) ? defaultText : o.text); this.text.element.addClass("bi-water-mark"); } - + return; } if (!isArray(v) || v.length === 1) { diff --git a/src/case/index.js b/src/case/index.js index bc43a3dff..4e025e7de 100644 --- a/src/case/index.js +++ b/src/case/index.js @@ -1,36 +1,5 @@ -import * as button from "./button"; -import * as calendarItem from "./calendar"; -import * as pager from "./pager"; -import * as editor from "./editor"; -import * as tree from "./tree"; -import * as ztree from "./ztree"; -import * as trigger from "./trigger"; -import * as loader from "./loader"; -import * as segment from "./segment"; -import { MultiSelectBar } from "./toolbar/toolbar.multiselect"; -import * as layer from "./layer"; -import * as linearSegment from "./linearsegment"; -import * as colorchooser from "./colorchooser"; -import { SelectList } from "./list/list.select"; -import * as combo from "./combo"; - -Object.assign(BI, { - ...combo, - ...button, - ...calendarItem, - ...pager, - ...editor, - ...ztree, - ...tree, - ...trigger, - ...loader, - ...segment, - MultiSelectBar, - ...layer, - ...linearSegment, - ...colorchooser, - SelectList, -}); +export { MultiSelectBar } from "./toolbar/toolbar.multiselect"; +export { SelectList } from "./list/list.select"; export * from "./combo"; export * from "./button"; @@ -39,7 +8,6 @@ export * from "./pager"; export * from "./editor"; export * from "./tree"; export * from "./ztree"; - export * from "./trigger"; export * from "./loader"; export * from "./segment"; @@ -47,8 +15,4 @@ export * from "./layer"; export * from "./linearsegment"; export * from "./checkbox"; export * from "./colorchooser"; -export { - MultiSelectBar, - SelectList -}; diff --git a/src/case/layer/index.js b/src/case/layer/index.js index 73a7ea575..2737f6b07 100644 --- a/src/case/layer/index.js +++ b/src/case/layer/index.js @@ -1,4 +1,4 @@ -export { MultiPopupView } from "./layer.multipopup"; -export { PopupPanel } from "./layer.panel"; -export { ListPane } from "./pane.list"; -export { Panel } from "./panel"; +export { MultiPopupView } from "./layer.multipopup"; +export { PopupPanel } from "./layer.panel"; +export { ListPane } from "./pane.list"; +export { Panel } from "./panel"; diff --git a/src/case/layer/layer.multipopup.js b/src/case/layer/layer.multipopup.js index d531f57c7..cf0e2a5a5 100644 --- a/src/case/layer/layer.multipopup.js +++ b/src/case/layer/layer.multipopup.js @@ -1,26 +1,27 @@ +import { ButtonGroup, TextButton, PopupView } from "@/base"; +import { CenterLayout, shortcut, extend, i18nText, each, createWidget, createItems } from "@/core"; + /** * 下拉框弹出层的多选版本，toolbar带有若干按钮, zIndex在1000w * @class BI.MultiPopupView * @extends BI.Widget */ -import { shortcut, extend, i18nText, each, createWidget, createItems } from "@/core"; -import { PopupView, ButtonGroup } from "@/base"; @shortcut() export class MultiPopupView extends PopupView { static xtype = "bi.multi_popup_view"; static EVENT_CHANGE = "EVENT_CHANGE"; static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON"; - _defaultConfig () { + _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { _baseCls: `${conf._baseCls || ""} bi-multi-list-view`, buttons: [i18nText("BI-Basic_OK")], }); } - _createToolBar () { + _createToolBar() { const o = this.options; if (o.buttons.length === 0) { return; @@ -35,20 +36,22 @@ export class MultiPopupView extends PopupView { }); this.buttongroup = createWidget({ - type: "bi.button_group", + type: ButtonGroup.xtype, cls: "list-view-toolbar bi-high-light bi-split-top", height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, items: createItems(text, { - type: "bi.text_button", + type: TextButton.xtype, once: false, shadow: true, isShadowShowingOnSelected: true, }), - layouts: [{ - type: "bi.center", - hgap: 0, - vgap: 0, - }], + layouts: [ + { + type: CenterLayout.xtype, + hgap: 0, + vgap: 0, + } + ], }); this.buttongroup.on(ButtonGroup.EVENT_CHANGE, (value, obj) => { diff --git a/src/case/layer/layer.panel.js b/src/case/layer/layer.panel.js index cc5701e61..386186025 100644 --- a/src/case/layer/layer.panel.js +++ b/src/case/layer/layer.panel.js @@ -1,31 +1,32 @@ +import { IconButton, Label } from "@/base"; +import { HTapeLayout, shortcut, extend, createWidget } from "@/core"; +import { MultiPopupView } from "./layer.multipopup"; + /** * 可以理解为MultiPopupView和Panel两个面板的结合体 * @class BI.PopupPanel * @extends BI.MultiPopupView */ -import { shortcut, extend, createWidget } from "@/core"; -import { IconButton } from "@/base"; -import { MultiPopupView } from "./layer.multipopup"; @shortcut() export class PopupPanel extends MultiPopupView { static xtype = "bi.popup_panel"; static EVENT_CHANGE = "EVENT_CHANGE"; static EVENT_CLOSE = "EVENT_CLOSE"; static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON"; - _defaultConfig () { + _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-popup-panel`, title: "", }); } - _createTool () { + _createTool() { const o = this.options; const close = createWidget({ - type: "bi.icon_button", + type: IconButton.xtype, cls: "close-h-font", width: 25, height: 25, @@ -34,23 +35,26 @@ export class PopupPanel extends MultiPopupView { this.setVisible(false); this.fireEvent(PopupPanel.EVENT_CLOSE); }); - + return createWidget({ - type: "bi.htape", + type: HTapeLayout.xtype, cls: "popup-panel-title bi-header-background", height: 25, - items: [{ - el: { - type: "bi.label", - textAlign: "left", - text: o.title, - height: 25, - lgap: 10, + items: [ + { + el: { + type: Label.xtype, + textAlign: "left", + text: o.title, + height: 25, + lgap: 10, + }, }, - }, { - el: close, - width: 25, - }], + { + el: close, + width: 25, + } + ], }); } } diff --git a/src/case/layer/pane.list.js b/src/case/layer/pane.list.js index 70d79c4f0..d70eaebc3 100644 --- a/src/case/layer/pane.list.js +++ b/src/case/layer/pane.list.js @@ -1,10 +1,3 @@ -/** - * list面板 - * - * Created by GUY on 2015/10/30. - * @class BI.ListPane - * @extends BI.Pane - */ import { shortcut, extend, @@ -27,6 +20,14 @@ import { } from "@/core"; import { Pane, ButtonGroup } from "@/base"; +/** + * list面板 + * + * Created by GUY on 2015/10/30. + * @class BI.ListPane + * @extends BI.Pane + */ + @shortcut() export class ListPane extends Pane { static xtype = "bi.list_pane"; @@ -102,19 +103,31 @@ export class ListPane extends Pane { }); this.check(); - createWidget(extend({ - element: this, - }, LogicFactory.createLogic(LogicFactory.createLogicTypeByDirection(Direction.Top), extend({ - scrolly: true, - lgap: o.lgap, - rgap: o.rgap, - tgap: o.tgap, - bgap: o.bgap, - vgap: o.vgap, - hgap: o.hgap, - }, o.logic, { - items: LogicFactory.createLogicItemsByDirection(Direction.Top, this.button_group), - })))); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + LogicFactory.createLogicTypeByDirection(Direction.Top), + extend( + { + scrolly: true, + lgap: o.lgap, + rgap: o.rgap, + tgap: o.tgap, + bgap: o.bgap, + vgap: o.vgap, + hgap: o.hgap, + }, + o.logic, + { + items: LogicFactory.createLogicItemsByDirection(Direction.Top, this.button_group), + } + ) + ) + ) + ); } hasPrev() { @@ -146,9 +159,11 @@ export class ListPane extends Pane { populate(items) { const o = this.options; - if (arguments.length === 0 && (isFunction(this.button_group.attr("itemsCreator")))) {// 接管loader的populate方法 + if (arguments.length === 0 && isFunction(this.button_group.attr("itemsCreator"))) { + // 接管loader的populate方法 this.button_group.attr("itemsCreator").apply(this, [ - { times: 1 }, (...args) => { + { times: 1 }, + (...args) => { if (args.length === 0) { throw new Error("参数不能为空"); } @@ -229,4 +244,3 @@ export class ListPane extends Pane { return this.button_group.getNodeByValue(value); } } - diff --git a/src/case/layer/panel.js b/src/case/layer/panel.js index de18dc35f..2ce1be1ac 100644 --- a/src/case/layer/panel.js +++ b/src/case/layer/panel.js @@ -1,15 +1,21 @@ - -import { shortcut, Widget, extend, toPix, Controller, createWidget } from "@/core"; -import { ButtonGroup } from "@/base"; +import { + VerticalFillLayout, + CenterAdaptLayout, + LeftRightVerticalAdaptLayout, + shortcut, + Widget, + extend, + toPix, + Controller, + createWidget +} from "@/core"; +import { Label, ButtonGroup } from "@/base"; @shortcut() export class Panel extends Widget { - static xtype = "bi.panel" - - - - static EVENT_CHANGE = "EVENT_CHANGE" + static xtype = "bi.panel"; + static EVENT_CHANGE = "EVENT_CHANGE"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -26,7 +32,7 @@ export class Panel extends Widget { render() { return { - type: "bi.vertical_fill", + type: VerticalFillLayout.xtype, rowSize: ["", "fill"], items: [this._createTitle(), this.options.el], }; @@ -35,19 +41,21 @@ export class Panel extends Widget { _createTitle() { const o = this.options; this.text = createWidget({ - type: "bi.label", + type: Label.xtype, cls: "panel-title-text", text: o.title, height: o.titleHeight, }); this.button_group = createWidget({ - type: "bi.button_group", + type: ButtonGroup.xtype, items: o.titleButtons, - layouts: [{ - type: "bi.center_adapt", - lgap: 10, - }], + layouts: [ + { + type: CenterAdaptLayout.xtype, + lgap: 10, + } + ], }); this.button_group.on(Controller.EVENT_CHANGE, (...args) => { @@ -60,7 +68,7 @@ export class Panel extends Widget { return { // el: { - type: "bi.left_right_vertical_adapt", + type: LeftRightVerticalAdaptLayout.xtype, cls: "panel-title bi-header-background bi-border-bottom", height: toPix(o.titleHeight, 1), items: { diff --git a/src/case/linearsegment/button.linear.segment.js b/src/case/linearsegment/button.linear.segment.js index 11c2b20b5..44316cb76 100644 --- a/src/case/linearsegment/button.linear.segment.js +++ b/src/case/linearsegment/button.linear.segment.js @@ -1,47 +1,55 @@ - -import { shortcut, toPix } from "@/core"; -import { BasicButton } from "@/base"; +import { Label, BasicButton } from "@/base"; +import { AbsoluteLayout, Layout, shortcut, toPix } from "@/core"; @shortcut() export class LinearSegmentButton extends BasicButton { - static xtype = "bi.linear_segment_button" - - props = { extraCls:"bi-line-segment-button bi-list-item-effect", once:true, readonly:true, hgap:10, height:24 }; - + static xtype = "bi.linear_segment_button"; + props = { + extraCls: "bi-line-segment-button bi-list-item-effect", + once: true, + readonly: true, + hgap: 10, + height: 24, + }; - render () { + render() { const o = this.options; - return [{ - type: "bi.label", - text: o.text, - height: o.height, - textHeight: toPix(o.height, 2), - value: o.value, - hgap: o.hgap, - ref : _ref => { - this.text = _ref; - }, - }, { - type: "bi.absolute", - items: [{ - el: { - type: "bi.layout", - cls: "line-segment-button-line", - height: 2, - ref : _ref => { - this.line = _ref; - }, + return [ + { + type: Label.xtype, + text: o.text, + height: o.height, + textHeight: toPix(o.height, 2), + value: o.value, + hgap: o.hgap, + ref: _ref => { + this.text = _ref; }, - left: 0, - right: 0, - bottom: 0, - }], - }]; + }, + { + type: AbsoluteLayout.xtype, + items: [ + { + el: { + type: Layout.xtype, + cls: "line-segment-button-line", + height: 2, + ref: _ref => { + this.line = _ref; + }, + }, + left: 0, + right: 0, + bottom: 0, + } + ], + } + ]; } - setSelected (v) { + setSelected(v) { super.setSelected(...arguments); if (v) { this.line.element.addClass("bi-high-light-background"); @@ -50,7 +58,7 @@ export class LinearSegmentButton extends BasicButton { } } - setText (text) { + setText(text) { this.text.setText(text); } } diff --git a/src/case/linearsegment/index.js b/src/case/linearsegment/index.js index bf437ca2b..339335d84 100644 --- a/src/case/linearsegment/index.js +++ b/src/case/linearsegment/index.js @@ -1,2 +1,2 @@ -export { LinearSegmentButton } from "./button.linear.segment"; -export { LinearSegment } from "./linear.segment"; +export { LinearSegmentButton } from "./button.linear.segment"; +export { LinearSegment } from "./linear.segment"; diff --git a/src/case/linearsegment/linear.segment.js b/src/case/linearsegment/linear.segment.js index c44265704..98c5a5bb8 100644 --- a/src/case/linearsegment/linear.segment.js +++ b/src/case/linearsegment/linear.segment.js @@ -1,62 +1,70 @@ - -import { shortcut, Widget, createItems, makeArrayByArray } from "@/core"; +import { ButtonGroup } from "@/base"; +import { LinearSegmentButton } from "./button.linear.segment"; +import { TableLayout, shortcut, Widget, createItems, makeArrayByArray } from "@/core"; @shortcut() export class LinearSegment extends Widget { - static xtype = "bi.linear_segment" - - props = { baseCls:"bi-linear-segment", items:[], height:30 }; + static xtype = "bi.linear_segment"; + props = { baseCls: "bi-linear-segment", items: [], height: 30 }; - - render () { + render() { const o = this.options; - + return { - type: "bi.button_group", - items: [createItems(o.items, { - type: "bi.linear_segment_button", - height: o.height, - })], - layouts: [{ - type: "bi.table", - columnSize: makeArrayByArray(o.items, "fill"), - }], + type: ButtonGroup.xtype, + items: [ + createItems(o.items, { + type: LinearSegmentButton.xtype, + height: o.height, + }) + ], + layouts: [ + { + type: TableLayout.xtype, + columnSize: makeArrayByArray(o.items, "fill"), + } + ], value: o.value, - listeners: [{ - eventName: "__EVENT_CHANGE__", - action: (...args) => { - this.fireEvent("__EVENT_CHANGE__", ...args); - }, - }, { - eventName: "EVENT_CHANGE", - action: () => { - this.fireEvent("EVENT_CHANGE"); + listeners: [ + { + eventName: "__EVENT_CHANGE__", + action: (...args) => { + this.fireEvent("__EVENT_CHANGE__", ...args); + }, }, - }], + { + eventName: "EVENT_CHANGE", + action: () => { + this.fireEvent("EVENT_CHANGE"); + }, + } + ], ref: _ref => { this.buttonGroup = _ref; }, }; } - setValue (v) { + setValue(v) { this.buttonGroup.setValue(v); } - setEnabledValue (v) { + setEnabledValue(v) { this.buttonGroup.setEnabledValue(v); } - getValue () { + getValue() { return this.buttonGroup.getValue(); } - populate (buttons) { + populate(buttons) { const o = this.options; - this.buttonGroup.populate([createItems(buttons, { - type: "bi.linear_segment_button", - height: o.height, - })]); + this.buttonGroup.populate([ + createItems(buttons, { + type: LinearSegmentButton.xtype, + height: o.height, + }) + ]); } } diff --git a/src/case/list/list.select.js b/src/case/list/list.select.js index 9c5896a30..4301aff57 100644 --- a/src/case/list/list.select.js +++ b/src/case/list/list.select.js @@ -1,5 +1,3 @@ -/* eslint-disable no-mixed-spaces-and-tabs */ - import { shortcut, Widget, @@ -21,6 +19,8 @@ import { ButtonGroup } from "@/base"; import { MultiSelectBar } from "../toolbar/toolbar.multiselect"; import { ListPane } from "../layer/pane.list"; +/* eslint-disable no-mixed-spaces-and-tabs */ + @shortcut() export class SelectList extends Widget { static xtype = "bi.select_list"; @@ -94,13 +94,25 @@ export class SelectList extends Widget { this.fireEvent(Controller.EVENT_CHANGE, ...args); }); - createWidget(extend({ - element: this, - }, LogicFactory.createLogic(LogicFactory.createLogicTypeByDirection(o.direction), extend({ - scrolly: true, - }, o.logic, { - items: LogicFactory.createLogicItemsByDirection(o.direction, this.toolbar, this.list), - })))); + createWidget( + extend( + { + element: this, + }, + LogicFactory.createLogic( + LogicFactory.createLogicTypeByDirection(o.direction), + extend( + { + scrolly: true, + }, + o.logic, + { + items: LogicFactory.createLogicItemsByDirection(o.direction, this.toolbar, this.list), + } + ) + ) + ) + ); if (o.items.length <= 0) { this.toolbar.setVisible(false); @@ -214,8 +226,9 @@ export class SelectList extends Widget { resetHeight(h) { const toolHeight = (this.toolbar.element.outerHeight() || 25) * (this.toolbar.isVisible() ? 1 : 0); - this.list.resetHeight ? this.list.resetHeight(h - toolHeight) : - this.list.element.css({ "max-height": pixFormat(h - toolHeight) }); + this.list.resetHeight + ? this.list.resetHeight(h - toolHeight) + : this.list.element.css({ "max-height": pixFormat(h - toolHeight) }); } setNotSelectedValue() { diff --git a/src/case/loader/loader.lazy.js b/src/case/loader/loader.lazy.js index 54f983ee6..eddfa82c6 100644 --- a/src/case/loader/loader.lazy.js +++ b/src/case/loader/loader.lazy.js @@ -1,15 +1,15 @@ -import { shortcut, Widget, extend, createWidget, takeRight, take } from "@/core"; import { Loader } from "@/base"; +import { shortcut, Widget, extend, createWidget, takeRight, take } from "@/core"; @shortcut() export class LazyLoader extends Widget { - static xtype = "bi.lazy_loader" + static xtype = "bi.lazy_loader"; _const = { PAGE: 100, }; - static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_CHANGE = "EVENT_CHANGE"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -24,7 +24,7 @@ export class LazyLoader extends Widget { super._init(...arguments); const all = o.items.length; this.loader = createWidget({ - type: "bi.loader", + type: Loader.xtype, element: this, // 下面是button_group的属性 el: o.el, @@ -44,7 +44,7 @@ export class LazyLoader extends Widget { const lastNum = o.items.length - this._const.PAGE * (options.times - 1); const lastItems = takeRight(o.items, lastNum); const nextItems = take(lastItems, this._const.PAGE); - + return nextItems; } diff --git a/src/case/loader/loader.list.js b/src/case/loader/loader.list.js index a8aa011e3..3bb61f829 100644 --- a/src/case/loader/loader.list.js +++ b/src/case/loader/loader.list.js @@ -1,4 +1,23 @@ -import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, nextTick, bind, isEmpty, isNumber, isObject, isFunction, each, isNotEmptyArray, DOM } from "@/core"; +import { ButtonGroup, LoadingBar } from "@/base"; +import { + VerticalLayout, + shortcut, + Widget, + extend, + emptyFn, + Controller, + createWidget, + Events, + nextTick, + bind, + isEmpty, + isNumber, + isObject, + isFunction, + each, + isNotEmptyArray, + DOM +} from "@/core"; /** * 恶心的加载控件， 为解决排序问题引入的控件 @@ -9,9 +28,9 @@ import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, ne */ @shortcut() export class ListLoader extends Widget { - static xtype = "bi.list_loader" + static xtype = "bi.list_loader"; - static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_CHANGE = "EVENT_CHANGE"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -19,7 +38,7 @@ export class ListLoader extends Widget { isDefaultInit: true, // 是否默认初始化数据 // 下面是button_group的属性 el: { - type: "bi.button_group", + type: ButtonGroup.xtype, }, items: [], itemsCreator: emptyFn, @@ -34,12 +53,15 @@ export class ListLoader extends Widget { _nextLoad() { const o = this.options; this.next.setLoading(); - o.itemsCreator.apply(this, [{ - times: ++this.times, - }, (...args) => { - this.next.setLoaded(); - this.addItems(...args); - }]); + o.itemsCreator.apply(this, [ + { + times: ++this.times, + }, + (...args) => { + this.next.setLoaded(); + this.addItems(...args); + } + ]); } _init() { @@ -50,14 +72,16 @@ export class ListLoader extends Widget { } this.button_group = createWidget(o.el, { - type: "bi.button_group", + type: ButtonGroup.xtype, element: this, chooseType: 0, items: o.items, behaviors: {}, - layouts: [{ - type: "bi.vertical", - }], + layouts: [ + { + type: VerticalLayout.xtype, + } + ], }); this.button_group.on(Controller.EVENT_CHANGE, (...args) => { const [type, , obj] = args; @@ -68,9 +92,14 @@ export class ListLoader extends Widget { }); if (o.next !== false) { - this.next = createWidget(extend({ - type: "bi.loading_bar", - }, o.next)); + this.next = createWidget( + extend( + { + type: LoadingBar.xtype, + }, + o.next + ) + ); this.next.on(Controller.EVENT_CHANGE, type => { if (type === Events.CLICK) { this._nextLoad(); @@ -79,14 +108,18 @@ export class ListLoader extends Widget { } createWidget({ - type: "bi.vertical", + type: VerticalLayout.xtype, element: this, items: [this.next], }); - o.isDefaultInit && isEmpty(o.items) && nextTick(bind(function () { - this.populate(); - }, this)); + o.isDefaultInit && + isEmpty(o.items) && + nextTick( + bind(function () { + this.populate(); + }, this) + ); if (isNotEmptyArray(o.items)) { this.populate(o.items); } @@ -97,11 +130,13 @@ export class ListLoader extends Widget { if (isNumber(o.count)) { return this.count < o.count; } - - return !!o.hasNext.apply(this, [{ - times: this.times, - count: this.count, - }]); + + return !!o.hasNext.apply(this, [ + { + times: this.times, + count: this.count, + } + ]); } addItems(items) { @@ -120,17 +155,20 @@ export class ListLoader extends Widget { populate(items) { const o = this.options; - if (arguments.length === 0 && (isFunction(o.itemsCreator))) { - o.itemsCreator.apply(this, [{ - times: 1, - }, (...args) => { - if (args.length === 0) { - throw new Error("参数不能为空"); + if (arguments.length === 0 && isFunction(o.itemsCreator)) { + o.itemsCreator.apply(this, [ + { + times: 1, + }, + (...args) => { + if (args.length === 0) { + throw new Error("参数不能为空"); + } + this.populate(...args); + o.onLoaded(); } - this.populate(...args); - o.onLoaded(); - }]); - + ]); + return; } this.options.items = items; diff --git a/src/case/loader/sort.list.js b/src/case/loader/sort.list.js index b3d147fe3..617aac682 100644 --- a/src/case/loader/sort.list.js +++ b/src/case/loader/sort.list.js @@ -1,4 +1,6 @@ -import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, each, stripEL } from "@/core"; +import { ButtonGroup } from "@/base"; +import { ListLoader } from "./loader.list"; +import { Layout, shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, each, stripEL } from "@/core"; /** * Created by GUY on 2016/4/29. @@ -8,9 +10,9 @@ import { shortcut, Widget, extend, emptyFn, Controller, createWidget, Events, ea */ @shortcut() export class SortList extends Widget { - static xtype = "bi.sort_list" + static xtype = "bi.sort_list"; - static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_CHANGE = "EVENT_CHANGE"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -18,7 +20,7 @@ export class SortList extends Widget { isDefaultInit: true, // 是否默认初始化数据 // 下面是button_group的属性 el: { - type: "bi.button_group", + type: ButtonGroup.xtype, }, items: [], itemsCreator: emptyFn, @@ -36,12 +38,12 @@ export class SortList extends Widget { super._init(...arguments); const o = this.options; this.loader = createWidget({ - type: "bi.list_loader", + type: ListLoader.xtype, element: this, isDefaultInit: o.isDefaultInit, el: o.el, items: this._formatItems(o.items), - itemsCreator (op, callback) { + itemsCreator(op, callback) { o.itemsCreator(op, items => { callback(this._formatItems(items)); }); @@ -66,9 +68,9 @@ export class SortList extends Widget { cursor: o.cursor || "drag", tolerance: o.tolerance || "intersect", placeholder: { - element ($currentItem) { + element($currentItem) { const holder = createWidget({ - type: "bi.layout", + type: Layout.xtype, cls: "bi-sortable-holder", height: $currentItem.outerHeight(), }); @@ -79,22 +81,16 @@ export class SortList extends Widget { "margin-bottom": $currentItem.css("margin-bottom"), margin: $currentItem.css("margin"), }); - - return holder.element; - }, - update () { + return holder.element; }, + update() {}, }, - start (event, ui) { - - }, + start(event, ui) {}, stop: (event, ui) => { this.fireEvent(SortList.EVENT_CHANGE); }, - over (event, ui) { - - }, + over(event, ui) {}, }); } @@ -106,7 +102,7 @@ export class SortList extends Widget { sorted: item.value, }; }); - + return items; } diff --git a/src/case/pager/index.js b/src/case/pager/index.js index ec62a806d..222ce3940 100644 --- a/src/case/pager/index.js +++ b/src/case/pager/index.js @@ -1,3 +1,3 @@ -export { AllCountPager } from "./pager.all.count"; -export { DetailPager } from "./pager.detail"; -export { DirectionPager } from "./pager.direction"; +export { AllCountPager } from "./pager.all.count"; +export { DetailPager } from "./pager.detail"; +export { DirectionPager } from "./pager.direction"; diff --git a/src/case/pager/pager.all.count.js b/src/case/pager/pager.all.count.js index 2dfdc0c3c..05a6f1ac4 100644 --- a/src/case/pager/pager.all.count.js +++ b/src/case/pager/pager.all.count.js @@ -1,15 +1,32 @@ +import { Pager, IconButton, Label } from "@/base"; +import { + HorizontalLayout, + VerticalAdaptLayout, + FloatLeftLayout, + shortcut, + Widget, + extend, + isPositiveInteger, + createWidget, + parseInt, + HorizontalAlign, + isNotEmptyObject +} from "@/core"; +import { SmallTextEditor } from "@/widget/editor/editor.text.small"; +import { TextEditor } from "@/widget/editor/editor.text"; + /** * 有总页数和总行数的分页控件 * Created by Young's on 2016/10/13. */ -import { shortcut, Widget, extend, isPositiveInteger, createWidget, parseInt, HorizontalAlign, isNotEmptyObject } from "@/core"; -// import { TextEditor } from "@/widget/editor/editor.text"; -import { Pager } from "@/base"; + +// + @shortcut() export class AllCountPager extends Widget { static xtype = "bi.all_count_pager"; static EVENT_CHANGE = "EVENT_CHANGE"; - _defaultConfig () { + _defaultConfig() { return extend(super._defaultConfig(...arguments), { extraCls: "bi-all-count-pager", pagerDirection: "vertical", // 翻页按钮方向，可选值：vertical/horizontal @@ -22,13 +39,14 @@ export class AllCountPager extends Widget { showRowInfo: true, }); } - _init () { + _init() { super._init(...arguments); - const { pages, curr, hasPrev, hasNext, firstPage, lastPage, height, showRowCount } = this.options, pagerIconCls = this._getPagerIconCls(); + const { pages, curr, hasPrev, hasNext, firstPage, lastPage, height, showRowCount } = this.options, + pagerIconCls = this._getPagerIconCls(); this.editor = createWidget({ - type: "bi.small_text_editor", + type: SmallTextEditor.xtype, cls: "pager-editor bi-border-radius", - validationChecker (v) { + validationChecker(v) { return (pages === 0 && v === "0") || isPositiveInteger(v); }, hgap: 4, @@ -41,12 +59,14 @@ export class AllCountPager extends Widget { }); this.pager = createWidget({ - type: "bi.pager", + type: Pager.xtype, width: 58, - layouts: [{ - type: "bi.horizontal", - lgap: 5, - }], + layouts: [ + { + type: HorizontalLayout.xtype, + lgap: 5, + } + ], dynamicShow: false, pages, @@ -56,7 +76,7 @@ export class AllCountPager extends Widget { first: false, last: false, prev: { - type: "bi.icon_button", + type: IconButton.xtype, value: "prev", title: BI.i18nText("BI-Previous_Page"), warningTitle: BI.i18nText("BI-Current_Is_First_Page"), @@ -65,7 +85,7 @@ export class AllCountPager extends Widget { cls: `bi-border bi-border-radius all-pager-prev bi-list-item-select2 ${pagerIconCls.preCls}`, }, next: { - type: "bi.icon_button", + type: IconButton.xtype, value: "next", title: BI.i18nText("BI-Next_Page"), warningTitle: BI.i18nText("BI-Current_Is_Last_Page"), @@ -81,8 +101,7 @@ export class AllCountPager extends Widget { invisible: pages <= 1, }); - // TODO:需等到TextEditor 完成es6化后才可替换BI.TextEditor - this.editor.on(BI.TextEditor.EVENT_CONFIRM, () => { + this.editor.on(TextEditor.EVENT_CONFIRM, () => { this.pager.setValue(parseInt(this.editor.getValue())); this.fireEvent(AllCountPager.EVENT_CHANGE); }); @@ -94,7 +113,7 @@ export class AllCountPager extends Widget { }); this.allPages = createWidget({ - type: "bi.label", + type: Label.xtype, title: pages, height, text: `/${pages}`, @@ -102,24 +121,25 @@ export class AllCountPager extends Widget { invisible: pages <= 1, }); - createWidget(showRowCount ? { - type: "bi.vertical_adapt", - element: this, - scrollx: false, - columnSize: ["fill", ""], - horizontalAlign: HorizontalAlign.Right, - items: [ - this._getRowCountObject(), - this.editor, this.allPages, this.pager - ], - } : { - type: "bi.vertical_adapt", - element: this, - items: [this.editor, this.allPages, this.pager], - }); + createWidget( + showRowCount + ? { + type: VerticalAdaptLayout.xtype, + element: this, + scrollx: false, + columnSize: ["fill", ""], + horizontalAlign: HorizontalAlign.Right, + items: [this._getRowCountObject(), this.editor, this.allPages, this.pager], + } + : { + type: VerticalAdaptLayout.xtype, + element: this, + items: [this.editor, this.allPages, this.pager], + } + ); } - _getPagerIconCls () { + _getPagerIconCls() { const { pagerDirection } = this.options; switch (pagerDirection) { case "horizontal": @@ -140,41 +160,46 @@ export class AllCountPager extends Widget { const { height, count, rowInfoObject } = this.options; return { - type: "bi.left", + type: FloatLeftLayout.xtype, height, scrollable: false, - ref: _ref => { + ref: _ref => { this.rowCountObject = _ref; }, - items: [{ - type: "bi.label", - height, - text: BI.i18nText("BI-Basic_Total"), - ref: _ref => { - this.prevText = _ref; - }, - }, { - el: { - type: "bi.label", + items: [ + { + type: Label.xtype, + height, + text: BI.i18nText("BI-Basic_Total"), ref: _ref => { - this.rowCount = _ref; + this.prevText = _ref; }, - cls: "row-count", + }, + { + el: { + type: Label.xtype, + ref: _ref => { + this.rowCount = _ref; + }, + cls: "row-count", + height, + text: count, + title: count, + }, + hgap: 5, + }, + { + type: Label.xtype, height, - text: count, - title: count, + text: BI.i18nText("BI-Tiao_Data"), + textAlign: "left", }, - hgap: 5, - }, { - type: "bi.label", - height, - text: BI.i18nText("BI-Tiao_Data"), - textAlign: "left", - }, isNotEmptyObject(rowInfoObject) ? rowInfoObject : null], + isNotEmptyObject(rowInfoObject) ? rowInfoObject : null + ], }; } - setAllPages (v) { + setAllPages(v) { this.allPages.setText(`/${v}`); this.allPages.setTitle(v); this.options.pages = v; @@ -183,55 +208,55 @@ export class AllCountPager extends Widget { this.setPagerVisible(v > 1); } - setShowRowInfo (b) { + setShowRowInfo(b) { this.options.showRowInfo = b; this.rowCountObject.setVisible(b); } - setValue (v) { + setValue(v) { this.pager.setValue(v); } - setVPage (v) { + setVPage(v) { this.pager.setValue(v); } - setCount (count) { + setCount(count) { if (this.options.showRowCount) { this.rowCount.setText(count); this.rowCount.setTitle(count); } } - setCountPrevText (text) { + setCountPrevText(text) { if (this.options.showRowCount) { this.prevText.setText(text); } } - getCurrentPage () { + getCurrentPage() { return this.pager.getCurrentPage(); } - hasPrev () { + hasPrev() { return this.pager.hasPrev(); } - hasNext () { + hasNext() { return this.pager.hasNext(); } - isShowPager () { + isShowPager() { return this.options.showRowInfo || this.options.pages > 1; } - setPagerVisible (b) { + setPagerVisible(b) { this.editor.setVisible(b); this.allPages.setVisible(b); this.pager.setVisible(b); } - populate () { + populate() { this.pager.populate(); this.setPagerVisible(this.options.pages > 1); } diff --git a/src/case/pager/pager.detail.js b/src/case/pager/pager.detail.js index 37e56edc5..72ca03d49 100644 --- a/src/case/pager/pager.detail.js +++ b/src/case/pager/pager.detail.js @@ -1,3 +1,21 @@ +import { + HorizontalLayout, + shortcut, + Widget, + extend, + emptyFn, + result, + debounce, + isKey, + createWidget, + createItems, + Controller, + Events, + MIN, + MAX +} from "@/core"; +import { Label, ButtonGroup } from "@/base"; + /** * 分页控件 * @@ -6,26 +24,27 @@ * @extends BI.Widget */ -import { shortcut, Widget, extend, emptyFn, result, debounce, isKey, createWidget, createItems, Controller, Events, MIN, MAX } from "@/core"; @shortcut() export class DetailPager extends Widget { static xtype = "bi.detail_pager"; static EVENT_CHANGE = "EVENT_CHANGE"; static EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE"; - _defaultConfig () { + _defaultConfig() { return extend(super._defaultConfig(...arguments), { baseCls: "bi-detail-pager", behaviors: {}, - layouts: [{ - type: "bi.horizontal", - }], + layouts: [ + { + type: HorizontalLayout.xtype, + } + ], dynamicShow: true, // 是否动态显示上一页、下一页、首页、尾页， 若为false，则指对其设置使能状态 // dynamicShow为false时以下两个有用 dynamicShowFirstLast: false, // 是否动态显示首页、尾页 dynamicShowPrevNext: false, // 是否动态显示上一页、下一页 pages: false, // 总页数 - curr () { + curr() { return 1; }, // 初始化当前页 groups: 0, // 连续显示分页数 @@ -37,14 +56,15 @@ export class DetailPager extends Widget { next: "下一页", firstPage: 1, - lastPage () { // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法 + lastPage() { + // 在万不得已时才会调用这个函数获取最后一页的页码, 主要作用于setValue方法 return 1; }, hasPrev: emptyFn, // pages不可用时有效 hasNext: emptyFn, // pages不可用时有效 }); } - _init () { + _init() { super._init(...arguments); this.currPage = result(this.options, "curr"); // 翻页太灵敏 @@ -54,9 +74,12 @@ export class DetailPager extends Widget { }, 300); this._populate(); } - _populate () { - const o = this.options, view = [], dict = {}; - const { dynamicShow, dynamicShowPrevNext, hasPrev, dynamicShowFirstLast, hasNext, behaviors, layouts, jump } = this.options; + _populate() { + const o = this.options, + view = [], + dict = {}; + const { dynamicShow, dynamicShowPrevNext, hasPrev, dynamicShowFirstLast, hasNext, behaviors, layouts, jump } = + this.options; this.empty(); const pages = result(o, "pages"); const curr = result(this, "currPage"); @@ -75,7 +98,7 @@ export class DetailPager extends Widget { } // 计算当前组 - dict.index = Math.ceil((curr + ((groups > 1 && groups !== pages) ? 1 : 0)) / (groups === 0 ? 1 : groups)); + dict.index = Math.ceil((curr + (groups > 1 && groups !== pages ? 1 : 0)) / (groups === 0 ? 1 : groups)); // 当前页非首页，则输出上一页 if (((!dynamicShow && !dynamicShowPrevNext) || curr > 1) && prev !== false) { @@ -86,9 +109,14 @@ export class DetailPager extends Widget { disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false), }); } else { - view.push(extend({ - disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false), - }, prev)); + view.push( + extend( + { + disabled: pages === false ? hasPrev(curr) === false : !(curr > 1 && prev !== false), + }, + prev + ) + ); } } @@ -101,7 +129,7 @@ export class DetailPager extends Widget { }); if (dict.index > 1 && groups !== 0) { view.push({ - type: "bi.label", + type: Label.xtype, cls: "page-ellipsis", text: "\u2026", }); @@ -111,16 +139,21 @@ export class DetailPager extends Widget { // 输出当前页组 dict.poor = Math.floor((groups - 1) / 2); dict.start = dict.index > 1 ? curr - dict.poor : 1; - dict.end = dict.index > 1 ? (function () { - const max = curr + (groups - dict.poor - 1); - - return max > pages ? pages : max; - }()) : groups; - if (dict.end - dict.start < groups - 1) { // 最后一组状态 + dict.end = + dict.index > 1 + ? (function () { + const max = curr + (groups - dict.poor - 1); + + return max > pages ? pages : max; + }()) + : groups; + if (dict.end - dict.start < groups - 1) { + // 最后一组状态 dict.start = dict.end - groups + 1; } - let s = dict.start, e = dict.end; - if (first && last && (dict.index > 1 && groups !== 0) && (pages > groups && dict.end < pages && groups !== 0)) { + let s = dict.start, + e = dict.end; + if (first && last && dict.index > 1 && groups !== 0 && pages > groups && dict.end < pages && groups !== 0) { s++; e--; } @@ -143,7 +176,7 @@ export class DetailPager extends Widget { if (((!dynamicShow && !dynamicShowFirstLast) || (pages > groups && dict.end < pages && groups !== 0)) && last) { if (pages > groups && dict.end < pages && groups !== 0) { view.push({ - type: "bi.label", + type: Label.xtype, cls: "page-ellipsis", text: "\u2026", }); @@ -157,28 +190,32 @@ export class DetailPager extends Widget { // 当前页不为尾页时，输出下一页 dict.flow = !prev && groups === 0; - if (((!dynamicShow && !dynamicShowPrevNext) && next) || (curr !== pages && next || dict.flow)) { - view.push((function () { - if (isKey(next)) { - if (pages === false) { - return { text: next, value: "next", disabled: hasNext(curr) === false }; + if ((!dynamicShow && !dynamicShowPrevNext && next) || (curr !== pages && next) || dict.flow) { + view.push( + (function () { + if (isKey(next)) { + if (pages === false) { + return { text: next, value: "next", disabled: hasNext(curr) === false }; + } + + return dict.flow && curr === pages + ? { text: next, value: "next", disabled: true } + : { text: next, value: "next", disabled: !((curr !== pages && next) || dict.flow) }; } - - return (dict.flow && curr === pages) - ? - { text: next, value: "next", disabled: true } - : - { text: next, value: "next", disabled: !(curr !== pages && next || dict.flow) }; - } - - return extend({ - disabled: pages === false ? hasNext(curr) === false : !(curr !== pages && next || dict.flow), - }, next); - }())); + + return extend( + { + disabled: + pages === false ? hasNext(curr) === false : !((curr !== pages && next) || dict.flow), + }, + next + ); + })() + ); } this.button_group = createWidget({ - type: "bi.button_group", + type: ButtonGroup.xtype, element: this, items: createItems(view, { cls: "page-item bi-border bi-list-item-active", @@ -212,10 +249,12 @@ export class DetailPager extends Widget { this.currPage = v; break; } - jump.apply(this, [{ - pages, - curr: this.currPage, - }]); + jump.apply(this, [ + { + pages, + curr: this.currPage, + } + ]); this._populate(); this.fireEvent(DetailPager.EVENT_CHANGE, obj); } @@ -224,32 +263,32 @@ export class DetailPager extends Widget { this.fireEvent(DetailPager.EVENT_AFTER_POPULATE); } - getCurrentPage () { + getCurrentPage() { return this.currPage; } - setAllPages (pages) { + setAllPages(pages) { this.options.pages = pages; this._populate(); } - hasPrev (v) { + hasPrev(v) { v || (v = 1); const { hasPrev } = this.options; const pages = this.options.pages; - + return pages === false ? hasPrev(v) : v > 1; } - hasNext (v) { + hasNext(v) { v || (v = 1); const { hasNext } = this.options; const pages = this.options.pages; - + return pages === false ? hasNext(v) : v < pages; } - setValue (v) { + setValue(v) { const o = this.options; const { pages } = this.options; v = v || 0; @@ -257,7 +296,8 @@ export class DetailPager extends Widget { if (pages === false) { const lastPage = result(o, "lastPage"); let firstPage = 1; - this.currPage = v > lastPage ? lastPage : ((firstPage = result(o, "firstPage")), (v < firstPage ? firstPage : v)); + this.currPage = + v > lastPage ? lastPage : ((firstPage = result(o, "firstPage")), v < firstPage ? firstPage : v); } else { v = v > pages ? pages : v; this.currPage = v; @@ -265,7 +305,7 @@ export class DetailPager extends Widget { this._populate(); } - getValue () { + getValue() { const val = this.button_group.getValue()[0]; switch (val) { case "prev": @@ -276,19 +316,19 @@ export class DetailPager extends Widget { return MIN; case "last": return MAX; - default : + default: return val; } } - attr (key, value) { + attr(key, value) { super.attr(...arguments); if (key === "curr") { this.currPage = result(this.options, "curr"); } } - populate () { + populate() { this._populate(); } } diff --git a/src/case/pager/pager.direction.js b/src/case/pager/pager.direction.js index 512b2cc20..b114beb4b 100644 --- a/src/case/pager/pager.direction.js +++ b/src/case/pager/pager.direction.js @@ -1,3 +1,6 @@ +import { AbsoluteLayout, HorizontalLayout, shortcut, Widget, extend, emptyFn, createWidget } from "@/core"; +import { Label, Pager, IconButton } from "@/base"; + /** * 显示页码的分页控件 * @@ -6,14 +9,12 @@ * @extends BI.Widget */ -import { shortcut, Widget, extend, emptyFn, createWidget } from "@/core"; -import { Pager } from "@/base"; @shortcut() export class DirectionPager extends Widget { static EVENT_CHANGE = "EVENT_CHANGE"; static xtype = "bi.direction_pager"; - _defaultConfig () { + _defaultConfig() { return extend(super._defaultConfig(...arguments), { baseCls: "bi-direction-pager", height: 24, @@ -37,38 +38,43 @@ export class DirectionPager extends Widget { }, }); } - _init () { + _init() { super._init(...arguments); this._createVPager(); this._createHPager(); this.layout = createWidget({ - type: "bi.absolute", + type: AbsoluteLayout.xtype, scrollable: false, element: this, - items: [{ - el: this.vpager, - top: 0, - right: 86, - }, { - el: this.vlabel, - top: 0, - right: 110, - }, { - el: this.hpager, - top: 0, - right: 0, - }, { - el: this.hlabel, - top: 0, - right: 24, - }], + items: [ + { + el: this.vpager, + top: 0, + right: 86, + }, + { + el: this.vlabel, + top: 0, + right: 110, + }, + { + el: this.hpager, + top: 0, + right: 0, + }, + { + el: this.hlabel, + top: 0, + right: 24, + } + ], }); } - _createVPager () { + _createVPager() { const v = this.options.vertical; this.vlabel = createWidget({ - type: "bi.label", + type: Label.xtype, width: 24, height: 24, value: v.curr, @@ -76,13 +82,15 @@ export class DirectionPager extends Widget { invisible: true, }); this.vpager = createWidget({ - type: "bi.pager", + type: Pager.xtype, width: 72, - layouts: [{ - type: "bi.horizontal", - scrollx: false, - rgap: 24, - }], + layouts: [ + { + type: HorizontalLayout.xtype, + scrollx: false, + rgap: 24, + } + ], invisible: true, dynamicShow: false, @@ -93,7 +101,7 @@ export class DirectionPager extends Widget { first: false, last: false, prev: { - type: "bi.icon_button", + type: IconButton.xtype, value: "prev", title: BI.i18nText("BI-Up_Page"), warningTitle: BI.i18nText("BI-Current_Is_First_Page"), @@ -102,7 +110,7 @@ export class DirectionPager extends Widget { cls: "bi-border bi-border-radius direction-pager-prev column-pre-page-h-font bi-list-item-select2", }, next: { - type: "bi.icon_button", + type: IconButton.xtype, value: "next", title: BI.i18nText("BI-Down_Page"), warningTitle: BI.i18nText("BI-Current_Is_Last_Page"), @@ -125,10 +133,10 @@ export class DirectionPager extends Widget { this.vlabel.setTitle(this.vpager.getCurrentPage()); }); } - _createHPager () { + _createHPager() { const h = this.options.horizontal; this.hlabel = createWidget({ - type: "bi.label", + type: Label.xtype, width: 24, height: 24, value: h.curr, @@ -136,13 +144,15 @@ export class DirectionPager extends Widget { invisible: true, }); this.hpager = createWidget({ - type: "bi.pager", + type: Pager.xtype, width: 72, - layouts: [{ - type: "bi.horizontal", - scrollx: false, - rgap: 24, - }], + layouts: [ + { + type: HorizontalLayout.xtype, + scrollx: false, + rgap: 24, + } + ], invisible: true, dynamicShow: false, @@ -153,7 +163,7 @@ export class DirectionPager extends Widget { first: false, last: false, prev: { - type: "bi.icon_button", + type: IconButton.xtype, value: "prev", title: BI.i18nText("BI-Left_Page"), warningTitle: BI.i18nText("BI-Current_Is_First_Page"), @@ -162,7 +172,7 @@ export class DirectionPager extends Widget { cls: "bi-border bi-border-radius direction-pager-prev row-pre-page-h-font bi-list-item-select2", }, next: { - type: "bi.icon_button", + type: IconButton.xtype, value: "next", title: BI.i18nText("BI-Right_Page"), warningTitle: BI.i18nText("BI-Current_Is_Last_Page"), @@ -186,56 +196,57 @@ export class DirectionPager extends Widget { }); } - getVPage () { + getVPage() { return this.vpager.getCurrentPage(); } - getHPage () { + getHPage() { return this.hpager.getCurrentPage(); } - setVPage (v) { + setVPage(v) { this.vpager.setValue(v); this.vlabel.setValue(v); this.vlabel.setTitle(v); } - setHPage (v) { + setHPage(v) { this.hpager.setValue(v); this.hlabel.setValue(v); this.hlabel.setTitle(v); } - hasVNext () { + hasVNext() { return this.vpager.hasNext(); } - hasHNext () { + hasHNext() { return this.hpager.hasNext(); } - hasVPrev () { + hasVPrev() { return this.vpager.hasPrev(); } - hasHPrev () { + hasHPrev() { return this.hpager.hasPrev(); } - setHPagerVisible (b) { + setHPagerVisible(b) { this.hpager.setVisible(b); this.hlabel.setVisible(b); } - setVPagerVisible (b) { + setVPagerVisible(b) { this.vpager.setVisible(b); this.vlabel.setVisible(b); } - populate () { + populate() { this.vpager.populate(); this.hpager.populate(); - let vShow = false, hShow = false; + let vShow = false, + hShow = false; if (!this.hasHNext() && !this.hasHPrev()) { this.setHPagerVisible(false); } else { @@ -268,7 +279,7 @@ export class DirectionPager extends Widget { this.layout.resize(); } - clear () { + clear() { this.vpager.attr("curr", 1); this.hpager.attr("curr", 1); } diff --git a/src/case/segment/button.segment.js b/src/case/segment/button.segment.js index 9508a686c..160fb645d 100644 --- a/src/case/segment/button.segment.js +++ b/src/case/segment/button.segment.js @@ -1,5 +1,5 @@ +import { Label, BasicButton } from "@/base"; import { shortcut, extend, createWidget } from "@/core"; -import { BasicButton } from "@/base"; /** * 分段控件使用的button @@ -10,11 +10,11 @@ import { BasicButton } from "@/base"; */ @shortcut() export class SegmentButton extends BasicButton { - static xtype = "bi.segment_button" + static xtype = "bi.segment_button"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-segment-button bi-list-item-select bi-card`, shadow: true, @@ -27,7 +27,7 @@ export class SegmentButton extends BasicButton { super._init(...arguments); const opts = this.options; this.text = createWidget({ - type: "bi.label", + type: Label.xtype, element: this, textHeight: opts.height, whiteSpace: opts.whiteSpace, diff --git a/src/case/segment/segment.js b/src/case/segment/segment.js index ac16eba20..0adc0866a 100644 --- a/src/case/segment/segment.js +++ b/src/case/segment/segment.js @@ -1,5 +1,16 @@ -import { shortcut, Widget, extend, toPix, Controller, createWidget, createItems, makeArrayByArray } from "@/core"; import { ButtonGroup } from "@/base"; +import { SegmentButton } from "./button.segment"; +import { + TableLayout, + shortcut, + Widget, + extend, + toPix, + Controller, + createWidget, + createItems, + makeArrayByArray +} from "@/core"; /** * 单选按钮组 @@ -10,9 +21,9 @@ import { ButtonGroup } from "@/base"; */ @shortcut() export class Segment extends Widget { - static xtype = "bi.segment" + static xtype = "bi.segment"; - static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_CHANGE = "EVENT_CHANGE"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -27,17 +38,21 @@ export class Segment extends Widget { const o = this.options; this.buttonGroup = createWidget({ element: this, - type: "bi.button_group", + type: ButtonGroup.xtype, value: o.value, - items: [createItems(o.items, { - type: "bi.segment_button", - height: toPix(o.height, 2), - whiteSpace: o.whiteSpace, - })], - layouts: [{ - type: "bi.table", - columnSize: makeArrayByArray(o.items, "fill"), - }], + items: [ + createItems(o.items, { + type: SegmentButton.xtype, + height: toPix(o.height, 2), + whiteSpace: o.whiteSpace, + }) + ], + layouts: [ + { + type: TableLayout.xtype, + columnSize: makeArrayByArray(o.items, "fill"), + } + ], }); this.buttonGroup.on(Controller.EVENT_CHANGE, (...args) => { this.fireEvent(Controller.EVENT_CHANGE, ...args); @@ -70,10 +85,12 @@ export class Segment extends Widget { populate(buttons) { const o = this.options; - this.buttonGroup.populate([createItems(buttons, { - type: "bi.segment_button", - height: toPix(o.height, 2), - whiteSpace: o.whiteSpace, - })]); + this.buttonGroup.populate([ + createItems(buttons, { + type: SegmentButton.xtype, + height: toPix(o.height, 2), + whiteSpace: o.whiteSpace, + }) + ]); } } diff --git a/src/case/toolbar/toolbar.multiselect.js b/src/case/toolbar/toolbar.multiselect.js index f5fb1bf45..f0df9ce78 100644 --- a/src/case/toolbar/toolbar.multiselect.js +++ b/src/case/toolbar/toolbar.multiselect.js @@ -1,6 +1,16 @@ -import { shortcut, extend, emptyFn, i18nText, Controller, createWidget, Events } from "@/core"; -import { BasicButton, Checkbox } from "@/base"; +import { Checkbox, Label, BasicButton } from "@/base"; import { HalfIconButton } from "../button"; +import { + HTapeLayout, + CenterAdaptLayout, + shortcut, + extend, + emptyFn, + i18nText, + Controller, + createWidget, + Events +} from "@/core"; /** * guy @@ -11,9 +21,9 @@ import { HalfIconButton } from "../button"; */ @shortcut() export class MultiSelectBar extends BasicButton { - static xtype = "bi.multi_select_bar" + static xtype = "bi.multi_select_bar"; - static EVENT_CHANGE = "EVENT_CHANGE" + static EVENT_CHANGE = "EVENT_CHANGE"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -23,7 +33,7 @@ export class MultiSelectBar extends BasicButton { isAllCheckedBySelectedValue: emptyFn, // 手动控制选中 disableSelected: true, - isHalfCheckedBySelectedValue (selectedValues) { + isHalfCheckedBySelectedValue(selectedValues) { return selectedValues.length > 0; }, halfSelected: false, @@ -39,7 +49,7 @@ export class MultiSelectBar extends BasicButton { const isSelect = o.selected === true; const isHalfSelect = !o.selected && o.halfSelected; this.checkbox = createWidget({ - type: "bi.checkbox", + type: Checkbox.xtype, stopPropagation: true, handler: () => { this.setSelected(this.isSelected()); @@ -50,7 +60,7 @@ export class MultiSelectBar extends BasicButton { iconHeight: o.iconHeight, }); this.half = createWidget({ - type: "bi.half_icon_button", + type: HalfIconButton.xtype, stopPropagation: true, handler: () => { this.setSelected(true); @@ -72,7 +82,7 @@ export class MultiSelectBar extends BasicButton { this.fireEvent(MultiSelectBar.EVENT_CHANGE, this.isSelected(), this); }); this.text = createWidget({ - type: "bi.label", + type: Label.xtype, textAlign: "left", whiteSpace: "nowrap", textHeight: o.height, @@ -84,17 +94,20 @@ export class MultiSelectBar extends BasicButton { py: o.py, }); createWidget({ - type: "bi.htape", + type: HTapeLayout.xtype, element: this, - items: [{ - width: o.iconWrapperWidth, - el: { - type: "bi.center_adapt", - items: [this.checkbox, this.half], + items: [ + { + width: o.iconWrapperWidth, + el: { + type: CenterAdaptLayout.xtype, + items: [this.checkbox, this.half], + }, }, - }, { - el: this.text, - }], + { + el: this.text, + } + ], }); } diff --git a/src/case/tree/tree.level.js b/src/case/tree/tree.level.js index 426175b54..7f49ece0f 100644 --- a/src/case/tree/tree.level.js +++ b/src/case/tree/tree.level.js @@ -9,11 +9,14 @@ import { isNotEmptyArray, Tree, createWidget, - VerticalLayout, Controller, Events + VerticalLayout, + Controller, + Events } from "@/core"; import { ButtonTree, CustomTree } from "@/base"; import { TreeExpander } from "./treeexpander/tree.expander"; -import { BasicTreeItem, BasicTreeNode } from "@/case"; +import { BasicTreeItem } from "@/case/button/treeitem/treeitem"; +import { BasicTreeNode } from "@/case/button/node/treenode"; @shortcut() export class LevelTree extends Widget { @@ -74,33 +77,40 @@ export class LevelTree extends Widget { } initTree(nodes) { - const self = this, o = this.options; + const self = this, + o = this.options; this.empty(); this._assertId(nodes); this.tree = createWidget({ type: CustomTree.xtype, element: this, - expander: extend({ - type: TreeExpander.xtype, - el: {}, - isDefaultInit: false, - selectable: false, - popup: { - type: CustomTree.xtype, + expander: extend( + { + type: TreeExpander.xtype, + el: {}, + isDefaultInit: false, + selectable: false, + popup: { + type: CustomTree.xtype, + }, }, - }, o.expander), + o.expander + ), items: this._formatItems(Tree.transformToTreeFormat(nodes), 0), value: o.value, - el: extend({ - type: ButtonTree.xtype, - chooseType: 0, - layouts: [ - { - type: VerticalLayout.xtype, - } - ], - }, o.el), + el: extend( + { + type: ButtonTree.xtype, + chooseType: 0, + layouts: [ + { + type: VerticalLayout.xtype, + } + ], + }, + o.el + ), }); this.tree.on(Controller.EVENT_CHANGE, function (type, value, ob) { self.fireEvent(Controller.EVENT_CHANGE, arguments); diff --git a/src/case/tree/treeexpander/tree.expander.popup.js b/src/case/tree/treeexpander/tree.expander.popup.js index d00c790f7..a07829d3b 100644 --- a/src/case/tree/treeexpander/tree.expander.popup.js +++ b/src/case/tree/treeexpander/tree.expander.popup.js @@ -19,10 +19,13 @@ export class TreeExpanderPopup extends Widget { const { el, value, layer, showLine, isLastNode } = this.options; const offset = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2; - this.popupView = createWidget({ - ...el, - value, - }, this); + this.popupView = createWidget( + { + ...el, + value, + }, + this + ); this.popupView.on(Controller.EVENT_CHANGE, function () { self.fireEvent(Controller.EVENT_CHANGE, arguments); @@ -35,11 +38,9 @@ export class TreeExpanderPopup extends Widget { return { type: VerticalLayout.xtype, - cls: (showLine && !isLastNode) ? (BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "line solid" : "line") : "", + cls: showLine && !isLastNode ? (BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "line solid" : "line") : "", scrolly: null, - items: [ - this.popupView - ], + items: [this.popupView], }; } diff --git a/src/case/trigger/trigger.editor.js b/src/case/trigger/trigger.editor.js index 3bb8439ac..2ea76e859 100644 --- a/src/case/trigger/trigger.editor.js +++ b/src/case/trigger/trigger.editor.js @@ -1,6 +1,7 @@ -import { shortcut, extend, emptyFn, createWidget, toPix, Controller } from "@/core"; -import { Trigger } from "@/base"; import { SignEditor } from "../editor"; +import { HorizontalFillLayout, shortcut, extend, emptyFn, createWidget, toPix, Controller } from "@/core"; +import { TriggerIconButton } from "../button"; +import { Trigger } from "@/base"; /** * 文本输入框trigger @@ -20,9 +21,11 @@ export class EditorTrigger extends Trigger { _defaultConfig(config) { const conf = super._defaultConfig(...arguments); - + return extend(conf, { - baseCls: `${conf.baseCls || ""} bi-editor-trigger bi-border-radius ${config.simple ? "bi-border-bottom" : "bi-border"}`, + baseCls: `${conf.baseCls || ""} bi-editor-trigger bi-border-radius ${ + config.simple ? "bi-border-bottom" : "bi-border" + }`, height: 24, validationChecker: emptyFn, quitChecker: emptyFn, @@ -36,7 +39,7 @@ export class EditorTrigger extends Trigger { super._init(...arguments); const o = this.options; this.editor = createWidget({ - type: "bi.sign_editor", + type: SignEditor.xtype, height: toPix(o.height, 2), value: o.value, validationChecker: o.validationChecker, @@ -67,15 +70,16 @@ export class EditorTrigger extends Trigger { createWidget({ element: this, - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, height: toPix(o.height, 2), items: [ { el: this.editor, width: "fill", - }, { + }, + { el: { - type: "bi.trigger_icon_button", + type: TriggerIconButton.xtype, width: o.triggerWidth || toPix(o.height, 2), }, width: "", diff --git a/src/case/trigger/trigger.icon.js b/src/case/trigger/trigger.icon.js index 3368dd070..c1f3b1ffe 100644 --- a/src/case/trigger/trigger.icon.js +++ b/src/case/trigger/trigger.icon.js @@ -1,3 +1,4 @@ +import { TriggerIconButton } from "../button"; import { shortcut, extend, createWidget } from "@/core"; import { Trigger } from "@/base"; @@ -10,7 +11,7 @@ import { Trigger } from "@/base"; */ @shortcut() export class IconTrigger extends Trigger { - static xtype = "bi.icon_trigger" + static xtype = "bi.icon_trigger"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -25,7 +26,7 @@ export class IconTrigger extends Trigger { const o = this.options; super._init(...arguments); this.iconButton = createWidget(o.el, { - type: "bi.trigger_icon_button", + type: TriggerIconButton.xtype, element: this, width: o.width, height: o.height, diff --git a/src/case/trigger/trigger.icon.text.js b/src/case/trigger/trigger.icon.text.js index b93c3181b..658a8ccf3 100644 --- a/src/case/trigger/trigger.icon.text.js +++ b/src/case/trigger/trigger.icon.text.js @@ -1,5 +1,6 @@ -import { shortcut, extend, isKey, createWidget, isEmptyString } from "@/core"; -import { Trigger } from "@/base"; +import { Label, Trigger } from "@/base"; +import { TriggerIconButton, IconChangeButton } from "../button"; +import { HorizontalFillLayout, shortcut, extend, isKey, createWidget, isEmptyString } from "@/core"; /** * 文字trigger @@ -10,11 +11,11 @@ import { Trigger } from "@/base"; */ @shortcut() export class IconTextTrigger extends Trigger { - static xtype = "bi.icon_text_trigger" + static xtype = "bi.icon_text_trigger"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-text-trigger`, height: 24, @@ -28,8 +29,8 @@ export class IconTextTrigger extends Trigger { super._init(...arguments); const o = this.options; this.text = createWidget({ - type: "bi.label", - cls: `select-text-label${isKey(o.textCls) ? (` ${o.textCls}`) : ""}`, + type: Label.xtype, + cls: `select-text-label${isKey(o.textCls) ? ` ${o.textCls}` : ""}`, textAlign: "left", height: o.height, hgap: o.textHgap, @@ -41,37 +42,41 @@ export class IconTextTrigger extends Trigger { text: o.text, }); this.trigerButton = createWidget({ - type: "bi.trigger_icon_button", + type: TriggerIconButton.xtype, width: o.triggerWidth || o.height, }); createWidget({ element: this, - type: "bi.horizontal_fill", + type: HorizontalFillLayout.xtype, columnSize: ["", "fill", ""], ref: _ref => { this.wrapper = _ref; }, - items: [{ - el: { - type: "bi.icon_change_button", - cls: "icon-combo-trigger-icon", - width: o.triggerWidth || o.height, - iconCls: o.iconCls, - invisible: !o.iconCls, - ref: _ref => { - this.icon = _ref; + items: [ + { + el: { + type: IconChangeButton.xtype, + cls: "icon-combo-trigger-icon", + width: o.triggerWidth || o.height, + iconCls: o.iconCls, + invisible: !o.iconCls, + ref: _ref => { + this.icon = _ref; + }, + iconHeight: o.iconHeight, + iconWidth: o.iconWidth, + disableSelected: true, }, - iconHeight: o.iconHeight, - iconWidth: o.iconWidth, - disableSelected: true, }, - }, { - el: this.text, - lgap: isEmptyString(o.iconCls) ? 5 : 0, - }, { - el: this.trigerButton, - }], + { + el: this.text, + lgap: isEmptyString(o.iconCls) ? 5 : 0, + }, + { + el: this.trigerButton, + } + ], }); } diff --git a/src/case/trigger/trigger.icon.text.select.js b/src/case/trigger/trigger.icon.text.select.js index 0045972a4..76c02d519 100644 --- a/src/case/trigger/trigger.icon.text.select.js +++ b/src/case/trigger/trigger.icon.text.select.js @@ -1,3 +1,4 @@ +import { IconTextTrigger } from "./trigger.icon.text"; import { shortcut, extend, createWidget, isFunction, isArray, isNotNull, any, deepContains, Tree } from "@/core"; import { Trigger } from "@/base"; @@ -6,7 +7,7 @@ import { Trigger } from "@/base"; */ @shortcut() export class SelectIconTextTrigger extends Trigger { - static xtype = "bi.select_icon_text_trigger" + static xtype = "bi.select_icon_text_trigger"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -23,7 +24,7 @@ export class SelectIconTextTrigger extends Trigger { const o = this.options; const obj = this._digist(o.value, o.items); this.trigger = createWidget({ - type: "bi.icon_text_trigger", + type: IconTextTrigger.xtype, element: this, text: obj.text, textCls: obj.textCls, @@ -52,7 +53,7 @@ export class SelectIconTextTrigger extends Trigger { text: item.text || item.value, iconCls: item.iconCls, }; - + return true; } }); diff --git a/src/case/trigger/trigger.text.js b/src/case/trigger/trigger.text.js index f4e15110d..dfe9cef1b 100644 --- a/src/case/trigger/trigger.text.js +++ b/src/case/trigger/trigger.text.js @@ -1,5 +1,6 @@ -import { shortcut, isFunction, isKey, isNotEmptyString } from "@/core"; -import { Trigger } from "@/base"; +import { Label, IconButton, Trigger } from "@/base"; +import { TriggerIconButton } from "../button"; +import { HorizontalFillLayout, VerticalAdaptLayout, shortcut, isFunction, isKey, isNotEmptyString } from "@/core"; /** * 文字trigger @@ -10,9 +11,9 @@ import { Trigger } from "@/base"; */ @shortcut() export class TextTrigger extends Trigger { - static xtype = "bi.text_trigger" + static xtype = "bi.text_trigger"; - static EVENT_CLEAR = "EVENT_CLEAR" + static EVENT_CLEAR = "EVENT_CLEAR"; props() { return { @@ -35,11 +36,13 @@ export class TextTrigger extends Trigger { const defaultText = this.getDefaultText(); const label = { - type: "bi.label", + type: Label.xtype, ref: _ref => { this.text = _ref; }, - cls: `select-text-label ${o.textCls} ${!isNotEmptyString(text) && isNotEmptyString(defaultText) ? "bi-tips" : ""}`, + cls: `select-text-label ${o.textCls} ${ + !isNotEmptyString(text) && isNotEmptyString(defaultText) ? "bi-tips" : "" + }`, textAlign: "left", height: o.height, text: text || o.defaultText, @@ -55,57 +58,65 @@ export class TextTrigger extends Trigger { }; const triggerButton = { - type: "bi.trigger_icon_button", + type: TriggerIconButton.xtype, ref: _ref => { this.triggerButton = _ref; }, width: o.triggerWidth || o.height, }; - return ({ - type: "bi.horizontal_fill", + return { + type: HorizontalFillLayout.xtype, columnSize: ["fill", ""], - items: [{ - el: label, - width: "fill", - }, { - el: o.allowClear ? { - type: "bi.vertical_adapt", - width: o.triggerWidth || o.height, - height: o.height, - horizontalAlign: "left", - scrollable: false, - items: [{ - el: { - type: "bi.icon_button", - ref: _ref => { - this.clearBtn = _ref; - }, - cls: `close-h-font ${o.allowClear ? "clear-button" : ""}`, - stopPropagation: true, + items: [ + { + el: label, + width: "fill", + }, + { + el: o.allowClear + ? { + type: VerticalAdaptLayout.xtype, width: o.triggerWidth || o.height, - invisible: !isNotEmptyString(o.text), - handler: () => { - this.fireEvent(TextTrigger.EVENT_CLEAR); - }, - }, - }, { - el: triggerButton, - }], - } : triggerButton, - }], - }); + height: o.height, + horizontalAlign: "left", + scrollable: false, + items: [ + { + el: { + type: IconButton.xtype, + ref: _ref => { + this.clearBtn = _ref; + }, + cls: `close-h-font ${o.allowClear ? "clear-button" : ""}`, + stopPropagation: true, + width: o.triggerWidth || o.height, + invisible: !isNotEmptyString(o.text), + handler: () => { + this.fireEvent(TextTrigger.EVENT_CLEAR); + }, + }, + }, + { + el: triggerButton, + } + ], + } + : triggerButton, + } + ], + }; } getText() { const o = this.options; - + return isFunction(o.text) ? o.text() : o.text; } getDefaultText() { const o = this.options; - + return isFunction(o.defaultText) ? o.defaultText() : o.defaultText; } diff --git a/src/case/trigger/trigger.text.select.js b/src/case/trigger/trigger.text.select.js index 8094a424d..48af5c5de 100644 --- a/src/case/trigger/trigger.text.select.js +++ b/src/case/trigger/trigger.text.select.js @@ -1,6 +1,6 @@ +import { TextTrigger } from "./trigger.text"; import { shortcut, extend, emptyFn, createWidget, isFunction, isArray, Tree, each, contains, remove } from "@/core"; import { Trigger } from "@/base"; -import { TextTrigger } from "./trigger.text"; /** * 选择字段trigger @@ -11,9 +11,9 @@ import { TextTrigger } from "./trigger.text"; */ @shortcut() export class SelectTextTrigger extends Trigger { - static xtype = "bi.select_text_trigger" + static xtype = "bi.select_text_trigger"; - static EVENT_CLEAR = "EVENT_CLEAR" + static EVENT_CLEAR = "EVENT_CLEAR"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -30,7 +30,7 @@ export class SelectTextTrigger extends Trigger { const o = this.options; const text = this._digest(o.value, o.items); this.trigger = createWidget({ - type: "bi.text_trigger", + type: TextTrigger.xtype, element: this, height: o.height, readonly: o.readonly, @@ -45,13 +45,15 @@ export class SelectTextTrigger extends Trigger { tipType: o.tipType, title: null, allowClear: o.allowClear, - listeners: [{ - eventName: TextTrigger.EVENT_CLEAR, - action: () => { - this.setText(""); - this.fireEvent(SelectTextTrigger.EVENT_CLEAR); + listeners: [ + { + eventName: TextTrigger.EVENT_CLEAR, + action: () => { + this.setText(""); + this.fireEvent(SelectTextTrigger.EVENT_CLEAR); + }, }, - }], + ], }); } @@ -67,7 +69,7 @@ export class SelectTextTrigger extends Trigger { each(val, (index, v) => { result.push(o.valueFormatter(v)); }); - + return result.join(","); } diff --git a/src/case/trigger/trigger.text.select.small.js b/src/case/trigger/trigger.text.select.small.js index 944ee1a51..2f3106a3b 100644 --- a/src/case/trigger/trigger.text.select.small.js +++ b/src/case/trigger/trigger.text.select.small.js @@ -1,3 +1,4 @@ +import { SmallTextTrigger } from "./trigger.text.small"; import { shortcut, extend, toPix, createWidget, isArray, deepContains, each, contains, Tree } from "@/core"; import { Trigger } from "@/base"; @@ -9,7 +10,7 @@ import { Trigger } from "@/base"; */ @shortcut() export class SmallSelectTextTrigger extends Trigger { - static xtype = "bi.small_select_text_trigger" + static xtype = "bi.small_select_text_trigger"; _defaultConfig() { return extend(super._defaultConfig(...arguments), { @@ -23,7 +24,7 @@ export class SmallSelectTextTrigger extends Trigger { const o = this.options; const obj = this._digest(o.value, o.items); this.trigger = createWidget({ - type: "bi.small_text_trigger", + type: SmallTextTrigger.xtype, element: this, height: toPix(o.height, 2), text: obj.text, diff --git a/src/case/trigger/trigger.text.small.js b/src/case/trigger/trigger.text.small.js index 9269a4210..524c2e711 100644 --- a/src/case/trigger/trigger.text.small.js +++ b/src/case/trigger/trigger.text.small.js @@ -1,5 +1,6 @@ -import { shortcut, extend, createWidget } from "@/core"; -import { Trigger } from "@/base"; +import { Label, Trigger } from "@/base"; +import { TriggerIconButton } from "../button"; +import { HorizontalFillLayout, shortcut, extend, createWidget } from "@/core"; /** * 文字trigger(右边小三角小一号的) == @@ -9,11 +10,11 @@ import { Trigger } from "@/base"; */ @shortcut() export class SmallTextTrigger extends Trigger { - static xtype = "bi.small_text_trigger" + static xtype = "bi.small_text_trigger"; _defaultConfig() { const conf = super._defaultConfig(...arguments); - + return extend(conf, { baseCls: `${conf.baseCls || ""} bi-text-trigger`, height: 20, @@ -25,7 +26,7 @@ export class SmallTextTrigger extends Trigger { super._init(...arguments); const o = this.options; this.text = createWidget({ - type: "bi.label", + type: Label.xtype, textAlign: "left", height: o.height, text: o.text, @@ -37,20 +38,23 @@ export class SmallTextTrigger extends Trigger { bgap: o.textBgap, }); this.trigerButton = createWidget({ - type: "bi.trigger_icon_button", + type: TriggerIconButton.xtype, width: o.triggerWidth || o.height, }); createWidget({ element: this, - type: "bi.horizontal_fill", - items: [{ - el: this.text, - width: "fill", - }, { - el: this.trigerButton, - width: "", - }], + type: HorizontalFillLayout.xtype, + items: [ + { + el: this.text, + width: "fill", + }, + { + el: this.trigerButton, + width: "", + } + ], }); } diff --git a/src/case/ztree/asynctree.js b/src/case/ztree/asynctree.js index d8d7028c6..fd186ae20 100644 --- a/src/case/ztree/asynctree.js +++ b/src/case/ztree/asynctree.js @@ -162,14 +162,15 @@ export class Asynctree extends TreeView { // 展开节点 _beforeExpandNode(treeId, treeNode) { - const self = this, o = this.options; + const self = this, + o = this.options; function complete(d) { const nodes = d.items || []; if (nodes.length > 0) { callback(self._dealWidthNodes(nodes), !!d.hasNext); } - }; + } function callback(nodes, hasNext) { self.nodes.addNodes(treeNode, nodes); @@ -184,12 +185,17 @@ export class Asynctree extends TreeView { // console.log(times); options = options || {}; const parentValues = treeNode.parentValues || self._getParentValues(treeNode); - const op = extend({}, o.paras, { - id: treeNode.id, - times: options.times, - parentValues: parentValues.concat(self._getNodeValue(treeNode)), - checkState: treeNode.getCheckStatus(), - }, options); + const op = extend( + {}, + o.paras, + { + id: treeNode.id, + times: options.times, + parentValues: parentValues.concat(self._getNodeValue(treeNode)), + checkState: treeNode.getCheckStatus(), + }, + options + ); o.itemsCreator(op, complete); } diff --git a/src/case/ztree/jquery.ztree.core-3.5.js b/src/case/ztree/jquery.ztree.core-3.5.js index f4e899044..0e1aedf39 100644 --- a/src/case/ztree/jquery.ztree.core-3.5.js +++ b/src/case/ztree/jquery.ztree.core-3.5.js @@ -13,7 +13,9 @@ */ (function ($) { - var settings = {}, roots = {}, caches = {}, + var settings = {}, + roots = {}, + caches = {}, //default consts of core _consts = { className: { @@ -22,7 +24,7 @@ LEVEL: "level", ICO_LOADING: "ico_loading", SWITCH: "switch", - NAME: 'node_name' + NAME: "node_name", }, event: { NODECREATED: "ztree_nodeCreated", @@ -33,14 +35,14 @@ ASYNC_ERROR: "ztree_async_error", REMOVE: "ztree_remove", SELECTED: "ztree_selected", - UNSELECTED: "ztree_unselected" + UNSELECTED: "ztree_unselected", }, id: { A: "_a", ICON: "_ico", SPAN: "_span", SWITCH: "_switch", - UL: "_ul" + UL: "_ul", }, line: { ROOT: "root", @@ -48,16 +50,16 @@ CENTER: "center", BOTTOM: "bottom", NOLINE: "noline", - LINE: "line" + LINE: "line", }, folder: { OPEN: "open", CLOSE: "close", - DOCU: "docu" + DOCU: "docu", }, node: { - CURSELECTED: "curSelectedNode" - } + CURSELECTED: "curSelectedNode", + }, }, //default setting of core _setting = { @@ -75,7 +77,7 @@ showIcon: true, showLine: true, showTitle: true, - txtSelectedEnable: false + txtSelectedEnable: false, }, data: { key: { @@ -84,7 +86,7 @@ name: "name", title: "", url: "url", - icon: "icon" + icon: "icon", }, render: { name: null, @@ -94,12 +96,12 @@ enable: false, idKey: "id", pIdKey: "pId", - rootPId: null + rootPId: null, }, keep: { parent: false, - leaf: false - } + leaf: false, + }, }, async: { enable: false, @@ -111,7 +113,7 @@ url: "", autoParam: [], otherParam: [], - dataFilter: null + dataFilter: null, }, callback: { beforeAsync: null, @@ -134,8 +136,8 @@ onMouseUp: null, onExpand: null, onCollapse: null, - onRemove: null - } + onRemove: null, + }, }, //default root of core //zTree use root to save full data @@ -151,7 +153,7 @@ r.noSelection = true; r.createdNodes = []; r.zId = 0; - r._ver = (new Date()).getTime(); + r._ver = new Date().getTime(); }, //default cache of core _initCache = function (setting) { @@ -188,7 +190,14 @@ }); o.bind(c.ASYNC_ERROR, function (event, treeId, node, XMLHttpRequest, textStatus, errorThrown) { - tools.apply(setting.callback.onAsyncError, [event, treeId, node, XMLHttpRequest, textStatus, errorThrown]); + tools.apply(setting.callback.onAsyncError, [ + event, + treeId, + node, + XMLHttpRequest, + textStatus, + errorThrown, + ]); }); o.bind(c.REMOVE, function (event, treeId, treeNode) { @@ -219,9 +228,12 @@ _eventProxy = function (event) { var target = event.target, setting = data.getSetting(event.data.treeId), - tId = "", node = null, - nodeEventType = "", treeEventType = "", - nodeEventCallback = null, treeEventCallback = null, + tId = "", + node = null, + nodeEventType = "", + treeEventType = "", + nodeEventCallback = null, + treeEventCallback = null, tmp = null; if (tools.eqs(event.type, "mousedown")) { @@ -259,34 +271,41 @@ if (tId.length > 0) { node = data.getNodeCache(setting, tId); switch (nodeEventType) { - case "switchNode" : + case "switchNode": var isParent = data.nodeIsParent(setting, node); if (!isParent) { nodeEventType = ""; - } else if (tools.eqs(event.type, "click") - || (tools.eqs(event.type, "dblclick") && tools.apply(setting.view.dblClickExpand, [setting.treeId, node], setting.view.dblClickExpand))) { + } else if ( + tools.eqs(event.type, "click") || + (tools.eqs(event.type, "dblclick") && + tools.apply( + setting.view.dblClickExpand, + [setting.treeId, node], + setting.view.dblClickExpand + )) + ) { nodeEventCallback = handler.onSwitchNode; } else { nodeEventType = ""; } break; - case "clickNode" : + case "clickNode": nodeEventCallback = handler.onClickNode; break; } } // event to zTree switch (treeEventType) { - case "mousedown" : + case "mousedown": treeEventCallback = handler.onZTreeMousedown; break; - case "mouseup" : + case "mouseup": treeEventCallback = handler.onZTreeMouseup; break; - case "dblclick" : + case "dblclick": treeEventCallback = handler.onZTreeDblclick; break; - case "contextmenu" : + case "contextmenu": treeEventCallback = handler.onZTreeContextmenu; break; } @@ -296,7 +315,7 @@ nodeEventType: nodeEventType, nodeEventCallback: nodeEventCallback, treeEventType: treeEventType, - treeEventCallback: treeEventCallback + treeEventCallback: treeEventCallback, }; return proxyResult; }, @@ -306,16 +325,16 @@ var r = data.getRoot(setting), children = data.nodeChildren(setting, n); n.level = level; - n.tId = setting.treeId + "_" + (++r.zId); + n.tId = setting.treeId + "_" + ++r.zId; n.parentTId = parentNode ? parentNode.tId : null; - n.open = (typeof n.open == "string") ? tools.eqs(n.open, "true") : !!n.open; + n.open = typeof n.open == "string" ? tools.eqs(n.open, "true") : !!n.open; var isParent = data.nodeIsParent(setting, n); if (tools.isArray(children)) { data.nodeIsParent(setting, n, true); n.zAsync = true; } else { isParent = data.nodeIsParent(setting, n, isParent); - n.open = (isParent && !setting.async.enable) ? n.open : false; + n.open = isParent && !setting.async.enable ? n.open : false; n.zAsync = !isParent; } n.isFirstNode = isFirstNode; @@ -349,7 +368,7 @@ afterA: [], innerBeforeA: [], innerAfterA: [], - zTreeTools: [] + zTreeTools: [], }, //method of operate data data = { @@ -394,7 +413,8 @@ _init.roots.push(initRoot); }, addNodesData: function (setting, parentNode, index, nodes) { - var children = data.nodeChildren(setting, parentNode), params; + var children = data.nodeChildren(setting, parentNode), + params; if (!children) { children = data.nodeChildren(setting, parentNode, []); index = -1; @@ -438,7 +458,9 @@ }, fixPIdKeyValue: function (setting, node) { if (setting.data.simpleData.enable) { - node[setting.data.simpleData.pIdKey] = node.parentTId ? node.getParentNode()[setting.data.simpleData.idKey] : setting.data.simpleData.rootPId; + node[setting.data.simpleData.pIdKey] = node.parentTId + ? node.getParentNode()[setting.data.simpleData.idKey] + : setting.data.simpleData.rootPId; } }, getAfterA: function (setting, node, array) { @@ -481,7 +503,7 @@ children = data.nodeChildren(setting, p); for (var i = 0, l = children.length - 1; i <= l; i++) { if (children[i] === node) { - return (i == l ? null : children[i + 1]); + return i == l ? null : children[i + 1]; } } return null; @@ -551,7 +573,7 @@ return result; }, getNodesByFilter: function (setting, nodes, filter, isSingle, invokeParam) { - if (!nodes) return (isSingle ? null : []); + if (!nodes) return isSingle ? null : []; var result = isSingle ? null : []; for (var i = 0, l = nodes.length; i < l; i++) { var node = nodes[i]; @@ -576,7 +598,7 @@ children = data.nodeChildren(setting, p); for (var i = 0, l = children.length; i < l; i++) { if (children[i] === node) { - return (i == 0 ? null : children[i - 1]); + return i == 0 ? null : children[i - 1]; } } return null; @@ -624,7 +646,7 @@ return null; } var key = setting.data.key.children; - if (typeof newChildren !== 'undefined') { + if (typeof newChildren !== "undefined") { node[key] = newChildren; } return node[key]; @@ -634,7 +656,7 @@ return false; } var key = setting.data.key.isParent; - if (typeof newIsParent !== 'undefined') { + if (typeof newIsParent !== "undefined") { if (typeof newIsParent === "string") { newIsParent = tools.eqs(newIsParent, "true"); } @@ -649,11 +671,11 @@ }, nodeName: function (setting, node, newName) { var key = setting.data.key.name; - if (typeof newName !== 'undefined') { + if (typeof newName !== "undefined") { node[key] = newName; } var rawName = "" + node[key]; - if (typeof setting.data.render.name === 'function') { + if (typeof setting.data.render.name === "function") { return setting.data.render.name.call(this, rawName, node); } return rawName; @@ -661,7 +683,7 @@ nodeTitle: function (setting, node) { var t = setting.data.key.title === "" ? setting.data.key.name : setting.data.key.title; var rawTitle = "" + node[t]; - if (typeof setting.data.render.title === 'function') { + if (typeof setting.data.render.title === "function") { return setting.data.render.title.call(this, rawTitle, node); } return rawTitle; @@ -719,7 +741,8 @@ } }, transformTozTreeFormat: function (setting, sNodes) { - var i, l, + var i, + l, key = setting.data.simpleData.idKey, parentKey = setting.data.simpleData.pIdKey; if (!key || key == "" || !sNodes) return []; @@ -746,7 +769,7 @@ } else { return [sNodes]; } - } + }, }, //method of event proxy event = { @@ -762,33 +785,33 @@ }, bindTree: function (setting) { var eventParam = { - treeId: setting.treeId + treeId: setting.treeId, }, o = setting.treeObj; if (!setting.view.txtSelectedEnable) { // for can't select text - o.bind('selectstart', handler.onSelectStart).css({ - "-moz-user-select": "-moz-none" + o.bind("selectstart", handler.onSelectStart).css({ + "-moz-user-select": "-moz-none", }); } - o.bind('click', eventParam, event.proxy); - o.bind('dblclick', eventParam, event.proxy); - o.bind('mouseover', eventParam, event.proxy); - o.bind('mouseout', eventParam, event.proxy); - o.bind('mousedown', eventParam, event.proxy); - o.bind('mouseup', eventParam, event.proxy); - o.bind('contextmenu', eventParam, event.proxy); + o.bind("click", eventParam, event.proxy); + o.bind("dblclick", eventParam, event.proxy); + o.bind("mouseover", eventParam, event.proxy); + o.bind("mouseout", eventParam, event.proxy); + o.bind("mousedown", eventParam, event.proxy); + o.bind("mouseup", eventParam, event.proxy); + o.bind("contextmenu", eventParam, event.proxy); }, unbindTree: function (setting) { var o = setting.treeObj; - o.unbind('selectstart', handler.onSelectStart) - .unbind('click', event.proxy) - .unbind('dblclick', event.proxy) - .unbind('mouseover', event.proxy) - .unbind('mouseout', event.proxy) - .unbind('mousedown', event.proxy) - .unbind('mouseup', event.proxy) - .unbind('contextmenu', event.proxy); + o.unbind("selectstart", handler.onSelectStart) + .unbind("click", event.proxy) + .unbind("dblclick", event.proxy) + .unbind("mouseover", event.proxy) + .unbind("mouseout", event.proxy) + .unbind("mousedown", event.proxy) + .unbind("mouseup", event.proxy) + .unbind("contextmenu", event.proxy); }, doProxy: function (e) { var results = []; @@ -805,7 +828,8 @@ var setting = data.getSetting(e.data.treeId); if (!tools.uCanDo(setting, e)) return true; var results = event.doProxy(e), - r = true, x = false; + r = true, + x = false; for (var i = 0, l = results.length; i < l; i++) { var proxyResult = results[i]; if (proxyResult.nodeEventCallback) { @@ -818,14 +842,15 @@ } } return r; - } + }, }, //method of event handler handler = { onSwitchNode: function (event, node) { var setting = data.getSetting(event.data.treeId); if (node.open) { - if (tools.apply(setting.callback.beforeCollapse, [setting.treeId, node], true) == false) return true; + if (tools.apply(setting.callback.beforeCollapse, [setting.treeId, node], true) == false) + return true; data.getRoot(setting).expandTriggerFlag = true; view.switchNode(setting, node); } else { @@ -837,8 +862,18 @@ }, onClickNode: function (event, node) { var setting = data.getSetting(event.data.treeId), - clickFlag = ((setting.view.autoCancelSelected && (event.ctrlKey || event.metaKey)) && data.isSelectedNode(setting, node)) ? 0 : (setting.view.autoCancelSelected && (event.ctrlKey || event.metaKey) && setting.view.selectedMulti) ? 2 : 1; - if (tools.apply(setting.callback.beforeClick, [setting.treeId, node, clickFlag], true) == false) return true; + clickFlag = + setting.view.autoCancelSelected && + (event.ctrlKey || event.metaKey) && + data.isSelectedNode(setting, node) + ? 0 + : setting.view.autoCancelSelected && + (event.ctrlKey || event.metaKey) && + setting.view.selectedMulti + ? 2 + : 1; + if (tools.apply(setting.callback.beforeClick, [setting.treeId, node, clickFlag], true) == false) + return true; if (clickFlag === 0) { view.cancelPreSelectedNode(setting, node); } else { @@ -873,17 +908,17 @@ if (tools.apply(setting.callback.beforeRightClick, [setting.treeId, node], true)) { tools.apply(setting.callback.onRightClick, [event, setting.treeId, node]); } - return (typeof setting.callback.onRightClick) != "function"; + return typeof setting.callback.onRightClick != "function"; }, onSelectStart: function (e) { var n = e.originalEvent.srcElement.nodeName.toLowerCase(); - return (n === "input" || n === "textarea"); - } + return n === "input" || n === "textarea"; + }, }, //method of tools for zTree tools = { apply: function (fun, param, defaultValue) { - if ((typeof fun) == "function") { + if (typeof fun == "function") { return fun.apply(zt, param ? param : []); } return defaultValue; @@ -891,13 +926,18 @@ canAsync: function (setting, node) { var children = data.nodeChildren(setting, node); var isParent = data.nodeIsParent(setting, node); - return (setting.async.enable && node && isParent && !(node.zAsync || (children && children.length > 0))); + return setting.async.enable && node && isParent && !(node.zAsync || (children && children.length > 0)); }, clone: function (obj) { if (obj === null) return null; var o = tools.isArray(obj) ? [] : {}; for (var i in obj) { - o[i] = (obj[i] instanceof Date) ? new Date(obj[i].getTime()) : (typeof obj[i] === "object" ? tools.clone(obj[i]) : obj[i]); + o[i] = + obj[i] instanceof Date + ? new Date(obj[i].getTime()) + : typeof obj[i] === "object" + ? tools.clone(obj[i]) + : obj[i]; } return o; }, @@ -908,10 +948,9 @@ return Object.prototype.toString.apply(arr) === "[object Array]"; }, isElement: function (o) { - return ( - typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2 - o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string" - ); + return typeof HTMLElement === "object" + ? o instanceof HTMLElement //DOM2 + : o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string"; }, $: function (node, exp, setting) { if (!!exp && typeof exp != "string") { @@ -928,7 +967,10 @@ if (!curDom) return null; while (curDom && curDom.id !== setting.treeId) { for (var i = 0, l = targetExpr.length; curDom.tagName && i < l; i++) { - if (tools.eqs(curDom.tagName, targetExpr[i].tagName) && curDom.getAttribute(targetExpr[i].attrName) !== null) { + if ( + tools.eqs(curDom.tagName, targetExpr[i].tagName) && + curDom.getAttribute(targetExpr[i].attrName) !== null + ) { return curDom; } } @@ -937,14 +979,14 @@ return null; }, getNodeMainDom: function (target) { - return ($(target).parent("li").get(0) || $(target).parentsUntil("li").parent().get(0)); + return $(target).parent("li").get(0) || $(target).parentsUntil("li").parent().get(0); }, isChildOrSelf: function (dom, parentId) { - return ($(dom).closest("#" + parentId).length > 0); + return $(dom).closest("#" + parentId).length > 0; }, uCanDo: function (setting, e) { return true; - } + }, }, //method of operate ztree dom view = { @@ -969,7 +1011,7 @@ view.replaceIcoClass(parentNode, target_icoObj, consts.folder.CLOSE); parentNode.open = false; target_ulObj.css({ - "display": "none" + display: "none", }); } @@ -987,9 +1029,10 @@ if (!nodes) return []; var html = []; - var tmpPNode = (parentNode) ? parentNode : data.getRoot(setting), + var tmpPNode = parentNode ? parentNode : data.getRoot(setting), tmpPChild = data.nodeChildren(setting, tmpPNode), - isFirstNode, isLastNode; + isFirstNode, + isLastNode; if (!tmpPChild || index >= tmpPChild.length - nodes.length) { index = -1; @@ -998,8 +1041,8 @@ for (var i = 0, l = nodes.length; i < l; i++) { var node = nodes[i]; if (initFlag) { - isFirstNode = ((index === 0 || tmpPChild.length == nodes.length) && (i == 0)); - isLastNode = (index < 0 && i == (nodes.length - 1)); + isFirstNode = (index === 0 || tmpPChild.length == nodes.length) && i == 0; + isLastNode = index < 0 && i == nodes.length - 1; data.initNode(setting, level, node, parentNode, isFirstNode, isLastNode, openFlag); data.addNodeCache(setting, node); } @@ -1009,7 +1052,15 @@ var children = data.nodeChildren(setting, node); if (children && children.length > 0) { //make child html first, because checkType - childHtml = view.appendNodes(setting, level + 1, children, node, -1, initFlag, openFlag && node.open); + childHtml = view.appendNodes( + setting, + level + 1, + children, + node, + -1, + initFlag, + openFlag && node.open + ); } if (openFlag) { view.makeDOMNodeMainBefore(html, setting, node); @@ -1022,7 +1073,7 @@ view.makeDOMNodeNameAfter(html, setting, node); data.getAfterA(setting, node, html); if (isParent && node.open) { - view.makeUlHtml(setting, node, html, childHtml.join('')); + view.makeUlHtml(setting, node, html, childHtml.join("")); } view.makeDOMNodeMainAfter(html, setting, node); data.addCreatedNode(setting, node); @@ -1043,8 +1094,8 @@ } var children = data.nodeChildren(setting, node), childHtml = view.appendNodes(setting, node.level + 1, children, node, -1, false, true); - view.makeUlHtml(setting, node, html, childHtml.join('')); - nObj.append(html.join('')); + view.makeUlHtml(setting, node, html, childHtml.join("")); + nObj.append(html.join("")); }, asyncNode: function (setting, node, isSilent, callback) { var i, l; @@ -1061,20 +1112,25 @@ if (node) { node.isAjaxing = true; var icoObj = $$(node, consts.id.ICON, setting); - icoObj.attr({ "style": "", "class": consts.className.BUTTON + " " + consts.className.ICO_LOADING }); + icoObj.attr({ style: "", class: consts.className.BUTTON + " " + consts.className.ICO_LOADING }); } var tmpParam = {}; var autoParam = tools.apply(setting.async.autoParam, [setting.treeId, node], setting.async.autoParam); for (i = 0, l = autoParam.length; node && i < l; i++) { - var pKey = autoParam[i].split("="), spKey = pKey; + var pKey = autoParam[i].split("="), + spKey = pKey; if (pKey.length > 1) { spKey = pKey[1]; pKey = pKey[0]; } tmpParam[spKey] = node[pKey]; } - var otherParam = tools.apply(setting.async.otherParam, [setting.treeId, node], setting.async.otherParam); + var otherParam = tools.apply( + setting.async.otherParam, + [setting.treeId, node], + setting.async.otherParam + ); if (tools.isArray(otherParam)) { for (i = 0, l = otherParam.length; i < l; i += 2) { tmpParam[otherParam[i]] = otherParam[i + 1]; @@ -1091,7 +1147,10 @@ cache: false, type: setting.async.type, url: tools.apply(setting.async.url, [setting.treeId, node], setting.async.url), - data: setting.async.contentType.indexOf('application/json') > -1 ? JSON.stringify(tmpParam) : tmpParam, + data: + setting.async.contentType.indexOf("application/json") > -1 + ? JSON.stringify(tmpParam) + : tmpParam, dataType: setting.async.dataType, headers: setting.async.headers, xhrFields: setting.async.xhrFields, @@ -1118,7 +1177,11 @@ } view.setNodeLineIcos(setting, node); if (newNodes && newNodes !== "") { - newNodes = tools.apply(setting.async.dataFilter, [setting.treeId, node, newNodes], newNodes); + newNodes = tools.apply( + setting.async.dataFilter, + [setting.treeId, node, newNodes], + newNodes + ); view.addNodes(setting, node, -1, !!newNodes ? tools.clone(newNodes) : [], !!isSilent); } else { view.addNodes(setting, node, -1, [], !!isSilent); @@ -1132,14 +1195,21 @@ } if (node) node.isAjaxing = null; view.setNodeLineIcos(setting, node); - setting.treeObj.trigger(consts.event.ASYNC_ERROR, [setting.treeId, node, XMLHttpRequest, textStatus, errorThrown]); - } + setting.treeObj.trigger(consts.event.ASYNC_ERROR, [ + setting.treeId, + node, + XMLHttpRequest, + textStatus, + errorThrown, + ]); + }, }); return true; }, cancelPreSelectedNode: function (setting, node, excludeNode) { var list = data.getRoot(setting).curSelectedList, - i, n; + i, + n; for (i = list.length - 1; i >= 0; i--) { n = list[i]; if (node === n || (!node && (!excludeNode || excludeNode !== n))) { @@ -1169,10 +1239,14 @@ createNodes: function (setting, level, nodes, parentNode, index) { if (!nodes || nodes.length == 0) return; var root = data.getRoot(setting), - openFlag = !parentNode || parentNode.open || !!$$(data.nodeChildren(setting, parentNode)[0], setting).get(0); + openFlag = + !parentNode || + parentNode.open || + !!$$(data.nodeChildren(setting, parentNode)[0], setting).get(0); root.createdNodes = []; var zTreeHtml = view.appendNodes(setting, level, nodes, parentNode, index, true, openFlag), - parentObj, nextObj; + parentObj, + nextObj; if (!parentNode) { parentObj = setting.treeObj; @@ -1189,9 +1263,9 @@ nextObj = parentObj.children()[index]; } if (index >= 0 && nextObj) { - $(nextObj).before(zTreeHtml.join('')); + $(nextObj).before(zTreeHtml.join("")); } else { - parentObj.append(zTreeHtml.join('')); + parentObj.append(zTreeHtml.join("")); } } @@ -1228,7 +1302,12 @@ callback = tmpCb; root.expandTriggerFlag = false; } - if (!node.open && isParent && ((!$$(node, consts.id.UL, setting).get(0)) || (children && children.length > 0 && !$$(children[0], setting).get(0)))) { + if ( + !node.open && + isParent && + (!$$(node, consts.id.UL, setting).get(0) || + (children && children.length > 0 && !$$(children[0], setting).get(0))) + ) { view.appendParentULDom(setting, node); view.createNodeCallback(setting); } @@ -1263,7 +1342,11 @@ } else { view.replaceSwitchClass(node, switchObj, consts.folder.CLOSE); view.replaceIcoClass(node, icoObj, consts.folder.CLOSE); - if (animateFlag == false || setting.view.expandSpeed == "" || !(children && children.length > 0)) { + if ( + animateFlag == false || + setting.view.expandSpeed == "" || + !(children && children.length > 0) + ) { ulObj.hide(); tools.apply(callback, []); } else { @@ -1288,13 +1371,14 @@ }, expandCollapseSonNode: function (setting, node, expandFlag, animateFlag, callback) { var root = data.getRoot(setting), - treeNodes = (node) ? data.nodeChildren(setting, node) : data.nodeChildren(setting, root), - selfAnimateSign = (node) ? false : animateFlag, + treeNodes = node ? data.nodeChildren(setting, node) : data.nodeChildren(setting, root), + selfAnimateSign = node ? false : animateFlag, expandTriggerFlag = data.getRoot(setting).expandTriggerFlag; data.getRoot(setting).expandTriggerFlag = false; if (treeNodes) { for (var i = 0, l = treeNodes.length; i < l; i++) { - if (treeNodes[i]) view.expandCollapseSonNode(setting, treeNodes[i], expandFlag, selfAnimateSign); + if (treeNodes[i]) + view.expandCollapseSonNode(setting, treeNodes[i], expandFlag, selfAnimateSign); } } data.getRoot(setting).expandTriggerFlag = expandTriggerFlag; @@ -1315,21 +1399,53 @@ }, makeDOMNodeIcon: function (html, setting, node) { var nameStr = data.nodeName(setting, node), - name = setting.view.nameIsHTML ? nameStr : nameStr.replace(/&/g, '&').replace(//g, '>'); - html.push("", name, ""); + name = setting.view.nameIsHTML + ? nameStr + : nameStr.replace(/&/g, "&").replace(//g, ">"); + html.push( + "", + name, + "" + ); }, makeDOMNodeLine: function (html, setting, node) { - html.push(""); + html.push( + "" + ); }, makeDOMNodeMainAfter: function (html, setting, node) { html.push(""); }, makeDOMNodeMainBefore: function (html, setting, node) { - html.push("
  • "); + html.push( + "
  • " + ); }, makeDOMNodeNameAfter: function (html, setting, node) { html.push(""); @@ -1343,24 +1459,36 @@ for (var f in fontcss) { fontStyle.push(f, ":", fontcss[f], ";"); } - html.push(" 0) ? " href='" + url + "'" : ""), " target='", view.makeNodeTarget(node), "' style='", fontStyle.join(''), - "'"); + html.push( + " 0 ? " href='" + url + "'" : "", + " target='", + view.makeNodeTarget(node), + "' style='", + fontStyle.join(""), + "'" + ); if (tools.apply(setting.view.showTitle, [setting.treeId, node], setting.view.showTitle) && title) { - html.push("title='", title.replace(/'/g, "'").replace(//g, '>'), "'"); + html.push("title='", title.replace(/'/g, "'").replace(//g, ">"), "'"); } html.push(">"); }, makeNodeFontCss: function (setting, node) { var fontCss = tools.apply(setting.view.fontCss, [setting.treeId, node], setting.view.fontCss); - return (fontCss && ((typeof fontCss) != "function")) ? fontCss : {}; + return fontCss && typeof fontCss != "function" ? fontCss : {}; }, makeNodeClasses: function (setting, node) { var classes = tools.apply(setting.view.nodeClasses, [setting.treeId, node], setting.view.nodeClasses); - return (classes && (typeof classes !== "function")) ? classes : { add: [], remove: [] }; + return classes && typeof classes !== "function" ? classes : { add: [], remove: [] }; }, makeNodeIcoClass: function (setting, node) { var icoCss = ["ico"]; @@ -1373,19 +1501,27 @@ icoCss.push(consts.folder.DOCU); } } - return "x-icon b-font " + consts.className.ICON + " " + icoCss.join('_'); + return "x-icon b-font " + consts.className.ICON + " " + icoCss.join("_"); }, makeNodeIcoStyle: function (setting, node) { var icoStyle = []; if (!node.isAjaxing) { var isParent = data.nodeIsParent(setting, node); - var icon = (isParent && node.iconOpen && node.iconClose) ? (node.open ? node.iconOpen : node.iconClose) : node[setting.data.key.icon]; + var icon = + isParent && node.iconOpen && node.iconClose + ? node.open + ? node.iconOpen + : node.iconClose + : node[setting.data.key.icon]; if (icon) icoStyle.push("background:url(", icon, ") 0 0 no-repeat;"); - if (setting.view.showIcon == false || !tools.apply(setting.view.showIcon, [setting.treeId, node], true)) { + if ( + setting.view.showIcon == false || + !tools.apply(setting.view.showIcon, [setting.treeId, node], true) + ) { icoStyle.push("display:none;"); } } - return icoStyle.join(''); + return icoStyle.join(""); }, makeNodeLineClass: function (setting, node) { var lineClass = []; @@ -1407,25 +1543,45 @@ } else { lineClass.push(consts.folder.DOCU); } - return view.makeNodeLineClassEx(node) + lineClass.join('_'); + return view.makeNodeLineClassEx(node) + lineClass.join("_"); }, makeNodeLineClassEx: function (node) { - return consts.className.BUTTON + " " + consts.className.LEVEL + node.level + " " + consts.className.SWITCH + " "; + return ( + consts.className.BUTTON + + " " + + consts.className.LEVEL + + node.level + + " " + + consts.className.SWITCH + + " " + ); }, makeNodeTarget: function (node) { - return (node.target || "_blank"); + return node.target || "_blank"; }, makeNodeUrl: function (setting, node) { var urlKey = setting.data.key.url; return node[urlKey] ? node[urlKey] : null; }, makeUlHtml: function (setting, node, html, content) { - html.push("