Treecat
2 years ago
1783 changed files with 38080 additions and 36026 deletions
@ -1,11 +1,2 @@
|
||||
node_modules/ |
||||
/.idea/ |
||||
#demo.js |
||||
#demo.css |
||||
.DS_Store |
||||
coverage |
||||
unit.test.statistic.json |
||||
package-lock.json |
||||
yarn.lock |
||||
*.tgz |
||||
dist/ |
||||
node_modules |
||||
dist |
||||
@ -1,44 +0,0 @@
|
||||
* |
||||
!public/less/*.less |
||||
!src/less/**/* |
||||
!dist/lib/*.d.ts |
||||
!dist/lib/**/*.d.ts |
||||
!dist/font.css |
||||
!dist/fineui.css |
||||
!dist/fineui.js |
||||
!dist/fineui.js.map |
||||
!dist/fineui.min.css |
||||
!dist/fineui_without_normalize.min.css |
||||
!dist/fineui.min.js |
||||
!dist/fineui.min.js.map |
||||
!dist/core.css |
||||
!dist/core.js |
||||
!dist/resource.css |
||||
!dist/resource.js |
||||
!dist/utils.js |
||||
!dist/utils.js.map |
||||
!dist/utils.min.js |
||||
!dist/utils.min.js.map |
||||
!dist/fineui_without_jquery_polyfill.js |
||||
!dist/2.0/fineui.css |
||||
!dist/2.0/fineui.js |
||||
!dist/2.0/fineui.js.map |
||||
!dist/2.0/fineui.min.css |
||||
!dist/2.0/fineui.min.js |
||||
!dist/2.0/fineui.min.js.map |
||||
!dist/2.0/fineui_without_normalize.css |
||||
!dist/2.0/fineui_without_normalize.min.css |
||||
!dist/font/* |
||||
!dist/font/**/* |
||||
!dist/images/* |
||||
!dist/images/**/* |
||||
!dist/router.js |
||||
!babel.config.js |
||||
!babel.config.ie8.js |
||||
!.eslintrc |
||||
!dist/2.0/jsy.min.css |
||||
!dist/2.0/bi.min.css |
||||
!bin/* |
||||
!bin/**/* |
||||
!plugins/* |
||||
!plugins/**/* |
||||
@ -1,2 +1,3 @@
|
||||
puppeteer_download_host=https://npm.taobao.org/mirrors |
||||
@fui:registry=https://npm.fineres.com/ |
||||
# @fui:registry=http://43.143.93.24:4873/ |
||||
@fui:registry=https://npm.fineres.com/ |
||||
@ -0,0 +1,7 @@
|
||||
{ |
||||
"singleQuote": false, |
||||
"tabWidth": 4, |
||||
"printWidth": 120, |
||||
"arrowParens": "avoid", |
||||
"endOfLine": "auto" |
||||
} |
||||
@ -1,201 +0,0 @@
|
||||
Apache License |
||||
Version 2.0, January 2004 |
||||
http://www.apache.org/licenses/ |
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION |
||||
|
||||
1. Definitions. |
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction, |
||||
and distribution as defined by Sections 1 through 9 of this document. |
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by |
||||
the copyright owner that is granting the License. |
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all |
||||
other entities that control, are controlled by, or are under common |
||||
control with that entity. For the purposes of this definition, |
||||
"control" means (i) the power, direct or indirect, to cause the |
||||
direction or management of such entity, whether by contract or |
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the |
||||
outstanding shares, or (iii) beneficial ownership of such entity. |
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity |
||||
exercising permissions granted by this License. |
||||
|
||||
"Source" form shall mean the preferred form for making modifications, |
||||
including but not limited to software source code, documentation |
||||
source, and configuration files. |
||||
|
||||
"Object" form shall mean any form resulting from mechanical |
||||
transformation or translation of a Source form, including but |
||||
not limited to compiled object code, generated documentation, |
||||
and conversions to other media types. |
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or |
||||
Object form, made available under the License, as indicated by a |
||||
copyright notice that is included in or attached to the work |
||||
(an example is provided in the Appendix below). |
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object |
||||
form, that is based on (or derived from) the Work and for which the |
||||
editorial revisions, annotations, elaborations, or other modifications |
||||
represent, as a whole, an original work of authorship. For the purposes |
||||
of this License, Derivative Works shall not include works that remain |
||||
separable from, or merely link (or bind by name) to the interfaces of, |
||||
the Work and Derivative Works thereof. |
||||
|
||||
"Contribution" shall mean any work of authorship, including |
||||
the original version of the Work and any modifications or additions |
||||
to that Work or Derivative Works thereof, that is intentionally |
||||
submitted to Licensor for inclusion in the Work by the copyright owner |
||||
or by an individual or Legal Entity authorized to submit on behalf of |
||||
the copyright owner. For the purposes of this definition, "submitted" |
||||
means any form of electronic, verbal, or written communication sent |
||||
to the Licensor or its representatives, including but not limited to |
||||
communication on electronic mailing lists, source code control systems, |
||||
and issue tracking systems that are managed by, or on behalf of, the |
||||
Licensor for the purpose of discussing and improving the Work, but |
||||
excluding communication that is conspicuously marked or otherwise |
||||
designated in writing by the copyright owner as "Not a Contribution." |
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity |
||||
on behalf of whom a Contribution has been received by Licensor and |
||||
subsequently incorporated within the Work. |
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of |
||||
this License, each Contributor hereby grants to You a perpetual, |
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable |
||||
copyright license to reproduce, prepare Derivative Works of, |
||||
publicly display, publicly perform, sublicense, and distribute the |
||||
Work and such Derivative Works in Source or Object form. |
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of |
||||
this License, each Contributor hereby grants to You a perpetual, |
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable |
||||
(except as stated in this section) patent license to make, have made, |
||||
use, offer to sell, sell, import, and otherwise transfer the Work, |
||||
where such license applies only to those patent claims licensable |
||||
by such Contributor that are necessarily infringed by their |
||||
Contribution(s) alone or by combination of their Contribution(s) |
||||
with the Work to which such Contribution(s) was submitted. If You |
||||
institute patent litigation against any entity (including a |
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work |
||||
or a Contribution incorporated within the Work constitutes direct |
||||
or contributory patent infringement, then any patent licenses |
||||
granted to You under this License for that Work shall terminate |
||||
as of the date such litigation is filed. |
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the |
||||
Work or Derivative Works thereof in any medium, with or without |
||||
modifications, and in Source or Object form, provided that You |
||||
meet the following conditions: |
||||
|
||||
(a) You must give any other recipients of the Work or |
||||
Derivative Works a copy of this License; and |
||||
|
||||
(b) You must cause any modified files to carry prominent notices |
||||
stating that You changed the files; and |
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works |
||||
that You distribute, all copyright, patent, trademark, and |
||||
attribution notices from the Source form of the Work, |
||||
excluding those notices that do not pertain to any part of |
||||
the Derivative Works; and |
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its |
||||
distribution, then any Derivative Works that You distribute must |
||||
include a readable copy of the attribution notices contained |
||||
within such NOTICE file, excluding those notices that do not |
||||
pertain to any part of the Derivative Works, in at least one |
||||
of the following places: within a NOTICE text file distributed |
||||
as part of the Derivative Works; within the Source form or |
||||
documentation, if provided along with the Derivative Works; or, |
||||
within a display generated by the Derivative Works, if and |
||||
wherever such third-party notices normally appear. The contents |
||||
of the NOTICE file are for informational purposes only and |
||||
do not modify the License. You may add Your own attribution |
||||
notices within Derivative Works that You distribute, alongside |
||||
or as an addendum to the NOTICE text from the Work, provided |
||||
that such additional attribution notices cannot be construed |
||||
as modifying the License. |
||||
|
||||
You may add Your own copyright statement to Your modifications and |
||||
may provide additional or different license terms and conditions |
||||
for use, reproduction, or distribution of Your modifications, or |
||||
for any such Derivative Works as a whole, provided Your use, |
||||
reproduction, and distribution of the Work otherwise complies with |
||||
the conditions stated in this License. |
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise, |
||||
any Contribution intentionally submitted for inclusion in the Work |
||||
by You to the Licensor shall be under the terms and conditions of |
||||
this License, without any additional terms or conditions. |
||||
Notwithstanding the above, nothing herein shall supersede or modify |
||||
the terms of any separate license agreement you may have executed |
||||
with Licensor regarding such Contributions. |
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade |
||||
names, trademarks, service marks, or product names of the Licensor, |
||||
except as required for reasonable and customary use in describing the |
||||
origin of the Work and reproducing the content of the NOTICE file. |
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or |
||||
agreed to in writing, Licensor provides the Work (and each |
||||
Contributor provides its Contributions) on an "AS IS" BASIS, |
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or |
||||
implied, including, without limitation, any warranties or conditions |
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A |
||||
PARTICULAR PURPOSE. You are solely responsible for determining the |
||||
appropriateness of using or redistributing the Work and assume any |
||||
risks associated with Your exercise of permissions under this License. |
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory, |
||||
whether in tort (including negligence), contract, or otherwise, |
||||
unless required by applicable law (such as deliberate and grossly |
||||
negligent acts) or agreed to in writing, shall any Contributor be |
||||
liable to You for damages, including any direct, indirect, special, |
||||
incidental, or consequential damages of any character arising as a |
||||
result of this License or out of the use or inability to use the |
||||
Work (including but not limited to damages for loss of goodwill, |
||||
work stoppage, computer failure or malfunction, or any and all |
||||
other commercial damages or losses), even if such Contributor |
||||
has been advised of the possibility of such damages. |
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing |
||||
the Work or Derivative Works thereof, You may choose to offer, |
||||
and charge a fee for, acceptance of support, warranty, indemnity, |
||||
or other liability obligations and/or rights consistent with this |
||||
License. However, in accepting such obligations, You may act only |
||||
on Your own behalf and on Your sole responsibility, not on behalf |
||||
of any other Contributor, and only if You agree to indemnify, |
||||
defend, and hold each Contributor harmless for any liability |
||||
incurred by, or claims asserted against, such Contributor by reason |
||||
of your accepting any such warranty or additional liability. |
||||
|
||||
END OF TERMS AND CONDITIONS |
||||
|
||||
APPENDIX: How to apply the Apache License to your work. |
||||
|
||||
To apply the Apache License to your work, attach the following |
||||
boilerplate notice, with the fields enclosed by brackets "{}" |
||||
replaced with your own identifying information. (Don't include |
||||
the brackets!) The text should be enclosed in the appropriate |
||||
comment syntax for the file format. We also recommend that a |
||||
file or class name and description of purpose be included on the |
||||
same "printed page" as the copyright notice for easier |
||||
identification within third-party archives. |
||||
|
||||
Copyright©2015-present 帆软软件有限公司 |
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
you may not use this file except in compliance with the License. |
||||
You may obtain a copy of the License at |
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
||||
Unless required by applicable law or agreed to in writing, software |
||||
distributed under the License is distributed on an "AS IS" BASIS, |
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
See the License for the specific language governing permissions and |
||||
limitations under the License. |
||||
@ -1,15 +0,0 @@
|
||||
FineUI |
||||
============ |
||||
[](https://www.apache.org/licenses/LICENSE-2.0.html) |
||||
> UI Framework used in FineBI and FineReport |
||||
|
||||
For more details, see the website [http://www.fanruan.com](http://www.fanruan.com). |
||||
|
||||
Documentation |
||||
============= |
||||
|
||||
http://fanruan.design/doc.html?post=0169cf558d |
||||
|
||||
License |
||||
============ |
||||
Please refer to [LICENSE](https://code.fanruan.com/fanruan/fineui/src/branch/master/LICENSE) file. |
||||
@ -1 +0,0 @@
|
||||
module.exports = require('@fui/babel-preset-fineui').configs.base; |
||||
@ -1,52 +0,0 @@
|
||||
{ |
||||
"@color-primary": "#2C60DB", |
||||
"@color-green-100": "#3FC47B", |
||||
"@color-light-blue-100": "#19B8EA", |
||||
"@color-orange-100": "#FAAA39", |
||||
"@color-red-100": "#E65251", |
||||
"@color-black": "#091E40", |
||||
"@color-light-gray": "#ECEEF3", |
||||
"@color-light-gray-theme-dark": "#292F45", |
||||
"@border-color-line": "rgba(9, 30, 64, 0.15)", |
||||
"@border-color-light-line": "#E6E9EF", |
||||
"@border-color-dark-line": "#2E3A4D", |
||||
"@color-sliver-theme-dark": "#363E55", |
||||
"@border-color-disabled": "rgba(9, 30, 64, 0.07)", |
||||
"@font-color-normal": "#091E40", |
||||
"@font-color-gray": "rgba(9, 30, 64, 0.9)", |
||||
"@font-color-light-gray": "rgba(9, 30, 64, 0.66)", |
||||
"@font-color-tips": "rgba(9, 30, 64, 0.47)", |
||||
"@font-color-disabled": "rgba(9, 30, 64, 0.25)", |
||||
"@background-color-normal": "#F8F9FC", |
||||
"@color-bi-background-active-radio": "transparent", |
||||
"@color-bi-border-radio": "rgba(9, 30, 64, 0.37)", |
||||
"@color-bi-border-disabled-radio": "rgba(9, 30, 64, 0.19)", |
||||
"@color-bi-background-active-radio-content": "#2C60DB", |
||||
"@color-bi-border-checkbox-theme-dark": "rgba(255, 255, 255, 0.37)", |
||||
"@color-bi-border-hover-active-radio-theme-dark": "#3869DC", |
||||
"@color-bi-background-active-radio-content-theme-dark": "#3869DC", |
||||
"@color-bi-background-disabled-active-radio-content": "#FFFFFF", |
||||
"@color-bi-background-disabled-active-radio-content-theme-dark": "#606479", |
||||
"@color-bi-background-disabled-active-checkbox-content": "#FFFFFF", |
||||
"@color-bi-background-disabled-active-checkbox-content-theme-dark": "#606479", |
||||
"@color-bi-background-tooltip-success": "#3F506A", |
||||
"@color-bi-background-tooltip-failure": "#E65251", |
||||
"@color-bi-border-tooltip-success": "#2E3A4D", |
||||
"@color-bi-background-toast-success": "#FFFFFF", |
||||
"@color-bi-background-toast-warning": "#FFFFFF", |
||||
"@color-bi-background-toast-error": "#FFFFFF", |
||||
"@color-bi-background-toast-normal": "#FFFFFF", |
||||
"@color-bi-color-toast-success": "#3FC47B", |
||||
"@color-bi-color-toast-warning": "#FAAA39", |
||||
"@color-bi-color-toast-error": "#E65251", |
||||
"@color-bi-color-toast-normal": "#2C60DB", |
||||
"@color-bi-color-toast-text": "#000A19", |
||||
"@color-bi-text-header-background": "rgba(9, 30, 64, 0.9)", |
||||
"@color-bi-text-header-background-theme-dark": "rgba(255, 255, 255, 0.9)", |
||||
"@font-date": "e733", |
||||
"@font-trigger-triangle": "e924", |
||||
"@font-solid-bottom": "e905", |
||||
"@font-solid-right": "e906", |
||||
"@font-dot": "e762", |
||||
"@font-down-triangle": "e70b" |
||||
} |
||||
@ -1,21 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
const yargs = require('yargs/yargs'); |
||||
const { hideBin } = require('yargs/helpers'); |
||||
|
||||
const workerCmd = require('./worker/cli.worker'); |
||||
|
||||
const argv = yargs(hideBin(process.argv)).argv; |
||||
|
||||
const cmd = argv._[0]; |
||||
|
||||
const cmds = new Map([ |
||||
['worker', workerCmd], |
||||
]); |
||||
|
||||
if (!cmd) throw new Error('Command is undefined!'); |
||||
|
||||
if (cmds.has(cmd)) { |
||||
cmds.get(cmd)?.exec(argv); |
||||
} else { |
||||
throw new Error(`Command ${cmd} not supported`); |
||||
} |
||||
@ -1,76 +0,0 @@
|
||||
const fs = require('fs'); |
||||
const path = require('path'); |
||||
|
||||
function first2UpperCase(str) { |
||||
return str.toLowerCase().replace(/( |^)[a-z]/g, L => L.toUpperCase()); |
||||
} |
||||
|
||||
function scanAndCreate(structure, workerName, root) { |
||||
Object.keys(structure) |
||||
.forEach(name => { |
||||
if (typeof structure[name] === 'object') { |
||||
fs.mkdirSync(path.resolve(root, name)); |
||||
|
||||
scanAndCreate(structure[name], workerName, path.resolve(root, `./${name}`)); |
||||
} else if (structure[name] === '') { |
||||
fs.appendFileSync(path.resolve(root, name), ''); |
||||
} else if (typeof structure[name] === 'string') { |
||||
let content = fs.readFileSync(structure[name]).toString(); |
||||
|
||||
content = content |
||||
.replace(/\${WorkerName}/g, first2UpperCase(workerName)) |
||||
.replace(/\${workerName}/g, workerName); |
||||
|
||||
fs.appendFileSync(path.resolve(root, name), content); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
module.exports = { |
||||
exec: async args => { |
||||
if (!args.init) { |
||||
throw new Error(`Command init not found in args`); |
||||
} |
||||
|
||||
if (!args.name) { |
||||
throw new Error('Command --name=... not found in args'); |
||||
} |
||||
|
||||
const name = args.name; |
||||
|
||||
const structure = { |
||||
[`${name}_worker`]: { |
||||
'main_thread': { |
||||
action: { |
||||
'action.worker_ability_test.ts': path.resolve(__dirname, './template/main_thread/action/action.worker_ability_test.t'), |
||||
}, |
||||
[`${name}_main_thread.ts`]: path.resolve(__dirname, './template/main_thread/main_thread.t'), |
||||
}, |
||||
utils: { |
||||
'action_type.ts': path.resolve(__dirname, './template/utils/action_type.t'), |
||||
'payload_type.ts': path.resolve(__dirname, './template/utils/payload_type.t'), |
||||
}, |
||||
'worker_thread': { |
||||
action: { |
||||
'action.worker_ability_test.ts': path.resolve(__dirname, './template/worker_thread/action/action.worker_ability_test.t'), |
||||
}, |
||||
[`${name}_worker_thread.ts`]: path.resolve(__dirname, './template/worker_thread/worker_thread.t'), |
||||
}, |
||||
[`${name}_main_thread.helper.ts`]: path.resolve(__dirname, './template/main_thread.helper.t'), |
||||
}, |
||||
}; |
||||
|
||||
scanAndCreate(structure, name, args.where ? path.resolve(args.where) : process.cwd()); |
||||
}, |
||||
}; |
||||
|
||||
// 结构
|
||||
// -xxx_worker
|
||||
// -|--main_thread
|
||||
// -|--|--action
|
||||
// -|--|--xxx_main_thread.ts
|
||||
// -|--utils
|
||||
// -|--|--action_type.ts
|
||||
// -|--worker_thread
|
||||
// -|--|--action
|
||||
// -|--|--worker_main_thread.ts
|
||||
@ -1,48 +0,0 @@
|
||||
import { ${WorkerName}MainThreadWorker } from './main_thread/${workerName}_main_thread'; |
||||
// 不需要一起打包的话则不需要引入这行 |
||||
// FuiWorkerPlugin中的属性会同步到fui-worker中，同时支持loader行内传入属性 |
||||
// 根据实际需求传入inline，返回格式 true -> blob url，false -> servicePath |
||||
import workerUrl from 'fui-worker!./worker_thread/${workerName}_worker_thread'; |
||||
|
||||
export class ${WorkerName}WorkerHelper { |
||||
private worker: ${WorkerName}MainThreadWorker; |
||||
|
||||
/** |
||||
* 拿到helper中的worker |
||||
*/ |
||||
public getWorker() { |
||||
if (this.worker) { |
||||
return this.worker; |
||||
} |
||||
|
||||
this.worker = BI.Workers.createWorker(${WorkerName}MainThreadWorker, { |
||||
workerUrl: this.urlFormatter(workerUrl), |
||||
workerName: BI.UUID(), |
||||
}); |
||||
|
||||
return this.worker; |
||||
} |
||||
|
||||
/** |
||||
* 格式化worker url，比如补充一些环境信息到参数里 |
||||
* 可通过 #hash 将参数传入blob url |
||||
* @param url worker url |
||||
*/ |
||||
private urlFormatter(url: string) { |
||||
return url; |
||||
} |
||||
|
||||
/** |
||||
* 终止worker |
||||
*/ |
||||
public terminate() { |
||||
this.worker?.terminate(); |
||||
} |
||||
} |
||||
|
||||
// 使用示例 |
||||
// const workerHelper = new ${WorkerName}WorkerHelper(); |
||||
|
||||
// workerHelper.getWorker() |
||||
// .testCommunication() |
||||
// .then(res => console.log(res)); |
||||
@ -1,13 +0,0 @@
|
||||
import { WorkerAbilityTestActionType } from '../../utils/action_type'; |
||||
import { WorkerAbilityTestPayload, WorkerAbilityTestReponse } from '../../utils/payload_type'; |
||||
|
||||
export class WorkerAbilityTestMainThreadAction extends BI.Workers.WorkerBaseAction { |
||||
/** |
||||
* 通信能力检测 |
||||
*/ |
||||
public communicationTest(): Promise<WorkerAbilityTestReponse['CommunicationTest']> { |
||||
const mainThreadPostTime: WorkerAbilityTestPayload['CommunicationTest'] = Date.now(); |
||||
|
||||
return this.controller.requestPromise(WorkerAbilityTestActionType.CommunicationTest, mainThreadPostTime); |
||||
} |
||||
} |
||||
@ -1,13 +0,0 @@
|
||||
import { WorkerAbilityTestMainThreadAction } from './action/action.worker_ability_test'; |
||||
|
||||
export class ${WorkerName}MainThreadWorker extends BI.Workers.MainThreadWorker { |
||||
private communicationTest: WorkerAbilityTestMainThreadAction; |
||||
|
||||
public initActions(): void { |
||||
this.communicationTest = this.createAction(WorkerAbilityTestMainThreadAction); |
||||
} |
||||
|
||||
public testCommunication() { |
||||
return this.communicationTest.communicationTest(); |
||||
} |
||||
} |
||||
@ -1,8 +0,0 @@
|
||||
/* |
||||
* Worker 事务标识 |
||||
* 每类事务有命名空间, 包含多个具体事务 |
||||
*/ |
||||
|
||||
export const enum WorkerAbilityTestActionType { |
||||
CommunicationTest = 'CommunicationTest', |
||||
} |
||||
@ -1,13 +0,0 @@
|
||||
/** |
||||
* 跨线程通信各事务的发送数据类型声明 |
||||
*/ |
||||
export interface WorkerAbilityTestPayload { |
||||
CommunicationTest: number; |
||||
} |
||||
|
||||
/** |
||||
* 跨线程通信各事务的响应数据类型声明 |
||||
*/ |
||||
export interface WorkerAbilityTestReponse { |
||||
CommunicationTest: number; |
||||
} |
||||
@ -1,24 +0,0 @@
|
||||
import { WorkerAbilityTestActionType } from '../../utils/action_type'; |
||||
import { WorkerAbilityTestPayload, WorkerAbilityTestReponse } from '../../utils/payload_type'; |
||||
|
||||
export class WorkerAbilityTestWorkerThreadAction extends BI.Workers.WorkerBaseAction { |
||||
protected addActionHandler(): void { |
||||
this.controller.addActionHandler( |
||||
WorkerAbilityTestActionType.CommunicationTest, |
||||
this.communicationTest.bind(this) |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* 通信能力检测的处理器 |
||||
*/ |
||||
private communicationTest( |
||||
payload: WorkerAbilityTestPayload['CommunicationTest'] |
||||
): WorkerAbilityTestReponse['CommunicationTest'] { |
||||
const mainThreadPostTime = payload; |
||||
// 收到主线程信息的耗时 |
||||
const workerGetMessageDuration = Date.now() - mainThreadPostTime; |
||||
|
||||
return workerGetMessageDuration; |
||||
} |
||||
} |
||||
@ -1,12 +0,0 @@
|
||||
// TODO: 这边需要先import fineui资源 |
||||
import { WorkerAbilityTestWorkerThreadAction } from './action/action.worker_ability_test'; |
||||
|
||||
class ${WorkerName}WorkerTreadWorker extends BI.Workers.WorkerThreadWorker { |
||||
public communicationTest: WorkerAbilityTestWorkerThreadAction; |
||||
|
||||
public initActions(): void { |
||||
this.communicationTest = this.createAction(WorkerAbilityTestWorkerThreadAction); |
||||
} |
||||
} |
||||
|
||||
export const ${workerName}WorkerTreadWorker = BI.Workers.createWorker(${WorkerName}WorkerTreadWorker); |
||||
@ -1,281 +0,0 @@
|
||||
# 更新日志 |
||||
|
||||
3.0(2022-05) |
||||
- 下拉选择框支持清空 |
||||
|
||||
3.0(2022-03) |
||||
- 支持响应式 |
||||
- 全面支持Typescript |
||||
- 增加JSX支持 |
||||
- 布局组件支持更多动态特性 |
||||
- 底层API支持动画 |
||||
- 增加WebWorker支持 |
||||
- 支持路由 |
||||
- 插件支持版本控制 |
||||
- Fix数据流支持proxy版本 |
||||
|
||||
2.0(2022-01) |
||||
- 提供自定义表单 |
||||
|
||||
2.0(2021-12) |
||||
- 新增Context组件 |
||||
- toast支持closable属性，可控制是否显示关闭按钮 |
||||
- 新增气泡弹框控件 |
||||
- BI.point支持widget添加埋点 |
||||
- childContext废弃，替换成provide |
||||
- 支持BI.useContext获取上下文环境 |
||||
- BI.Msg.alert支持message传json格式 |
||||
- 支持BI.config(function(){})进行系统配置 |
||||
|
||||
2.0(2021-11) |
||||
- 限制了复选下拉框一次粘贴添加值个数最大2000 |
||||
|
||||
2.0(2021-10) |
||||
- combo增加window.blur事件触发隐藏 |
||||
|
||||
2.0(2021-09) |
||||
- 支持自动watch |
||||
- 支持h函数传递left、right，优化left_right_vertical_adapt布局的jsx写法 |
||||
- 新增bi.virtual_group_list组件 |
||||
|
||||
2.0(2021-07) |
||||
- layout支持forceUpdate刷新方式 |
||||
- width属性支持calc() |
||||
- 修改了颜色选择器交互 |
||||
- 新增bi.horizontal_fill、bi.vertical_fill布局 |
||||
- 增加module定义插件版本号 |
||||
- bubble使用popper.js实现 |
||||
- 优化了日期类型控件标红时的报错提示 |
||||
- 支持虚拟dom |
||||
- 修复了树控件节点未初始化时调用树的getValue始终为空的问题 |
||||
|
||||
2.0(2021-05) |
||||
- 支持搜索的控件支持搜索包含空格的字符串 |
||||
- 解决了树列表populate调用两次itemsCreator的问题 |
||||
|
||||
2.0(2021-03) |
||||
- 优化left_right_vertical_adapt布局，去掉float属性只使用flex |
||||
- inline布局支持用calc计算fill列宽度 |
||||
- 时间类型控件无翻页限制 |
||||
- 时间类型控件优化动态时间面板的交互 |
||||
|
||||
2.0(2021-02) |
||||
- 增加beforeRender生命周期函数 |
||||
|
||||
2.0(2021-01) |
||||
- 修改了日期下拉面板中的当前时间按钮的交互效果 |
||||
- 新增年区间和年季度区间控件 |
||||
- 日期类型控件不操作下拉面板收起不发Confirm事件 |
||||
- 日期类型控件全系列可设置是否显示动态日期 |
||||
- 日期类型控件全系列可设置最大最小日期 |
||||
- 调整了combo的popup显示位置计算逻辑 |
||||
|
||||
2.0(2020-12) |
||||
- multi_layer_down_list_combo支持无限层级 |
||||
- 新增不带全选的同步复选下拉框 |
||||
- 日期选择控件为年月选择器子组件新增POPUP弹出前事件 |
||||
- 文件上传控件新增API(setMaxFileLength)以动态设置最大上传文件数量 |
||||
- 复选下拉树显示查看已选效果改成和复选下拉列表一致 |
||||
- Pane系列提供small和big两种大小的加载动画 |
||||
- 同步树列表系列支持不显示节点连接线和展开收起图标 |
||||
- 规范了下拉树trigger中显示值的显示顺序 |
||||
- bi.editor支持传入autocomplete |
||||
- [视觉]editor水印间距统一与文本域水印不可选中 |
||||
- 修复bi.file的url参数拼接问题 |
||||
- 修复了colorChooser选择透明后, 打开更多选色面板, 直接点保存会选中自动的问题 |
||||
- bi.file支持限制上传文件数 |
||||
|
||||
2.0(2020-11) |
||||
- bi.file上传文件errorMsg默认调用国际化 |
||||
- 修复了文本标签text传递空字符串后显示value值的问题 |
||||
- 限制了title的最大高度 |
||||
- bi.textarea_editor添加setWatermark方法 |
||||
- 生命周期可以通过属性传递来操作 |
||||
- 修复了颜色选择器hex框不能输入为空的问题 |
||||
- 增加纯文本组件bi.pure_text |
||||
- store支持webworker,引入多线程机制 |
||||
- 修复了Popover小屏幕上看不完整的问题 |
||||
- 颜色选择器支持输入16进制颜色编号 |
||||
- bi.textarea_editor支持气泡提示报错 |
||||
|
||||
2.0(2020-10) |
||||
- 支持Composition API |
||||
- pane和loadingPane支持加载时自定义提示文本 |
||||
|
||||
2.0(2020-09) |
||||
- combo增加click-blur(点击显示,blur消失)作为触发条件功能 |
||||
- allCountPager支持是否显示总行数 |
||||
- 修复区间滑块setEnable(false)滑块不灰化的问题 |
||||
- 修复同步复选下拉框系列setValue所有值后触发器不显示全选的问题 |
||||
- BI.Tree.traversal方法迭代函数增加父节点参数 |
||||
|
||||
2.0(2020-08) |
||||
- bi.sign_editor支持显示值居左/居中/居右显示 |
||||
- bi.iframe新增EVENT_LOADED事件 |
||||
- 修复了searcher在允许搜索的情况下输入空格直接退出搜索的问题 |
||||
- 修复了复选下拉系列'点按空格添加完全匹配项'添加的是显示值而非实际值的问题 |
||||
- search_text_value_combo支持水印 |
||||
- BI.makeObject 方法支持传入iteratee |
||||
|
||||
2.0(2020-07) |
||||
- 修复了日期类型控件先展开切换日期月份面板，再设置区间使得该月份不合法，查看该月份面板灰化不对的问题 |
||||
- bi.file文件上传控件accept属性与 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) 统一 |
||||
- 修复了日期类型控件设置一个不在minDate和maxDate之间的日期值时，面板灰化与翻页按钮状态不对的问题 |
||||
- BI.OB的on方法返回一个解除监听的函数 |
||||
- 修复了grid_view执行_unMount时不调用子组件的_unMount的问题 |
||||
- combo新增belowMouse属性,允许popup在点击处弹出 |
||||
- combo新增hideWhenAnotherComboOpen属性,开启则其他combo下拉时当前combo收起 |
||||
- 修复了datePicker在setValue的时候没有动态刷新可用月份的问题 |
||||
- 同步复选下拉及其面板新增getAllValue获取所有已选值 |
||||
- 同步复选下拉树及其面板新增getAllValue获取完整的选中树节点 |
||||
- 修复date_picker最大值最小值与面板展示判断问题 |
||||
- 复选下拉树和下拉列表添加showView和hideVIew方法 |
||||
- number_editor支持自动检测数值与范围是否合法 |
||||
- 修复了颜色选择器设置值为null的时候,trigger和popup表现不一致的问题 |
||||
|
||||
2.0(2020-06) |
||||
- 修复了复选下拉树半选节点的子节点未加载的时候，点选该半选节点是取消选中的问题 |
||||
- 下拉树系列支持isNeedAdjustWidth以动态变化宽度 |
||||
- 修复了新增值的下拉控件传递valueFormatter搜索完全匹配项提示新增 |
||||
- 修复了选色控件历史记录没有选中的问题的问题 |
||||
- 修复了单选下拉框新增值的时候没有发事件的问题 |
||||
- 修复了单选标红combo类setValue为空字符串会标红的问题 |
||||
- BI.history提供与注册路由对应的卸载路由方法unRoute |
||||
- 修复了单选标红combo类setValue为空和空数组行为不一致的问题 |
||||
- 单选列表支持新增选项 |
||||
- 增加组件shortcut未定义的错误提示 |
||||
|
||||
2.0(2020-05) |
||||
- 修复调用BI.history.navigate(XXX, {trigger: false})时, XXX包含中文空格等字符仍然触发回调的问题 |
||||
- 新增BI.after和BI.before方法 |
||||
- 修复bi.button设置宽度并配置iconCls后，文本很长的情况下显示截断的问题 |
||||
- 填加bi-user-select-enable和bi-user-select-disable通用类名 |
||||
- 修复树系列多层半选状态下,勾选祖先节点,后代节点不受影响的问题 |
||||
- 修复上传控件多个title问题 |
||||
|
||||
2.0(2020-04) |
||||
- 修复树列表通过空格回到初始面板没有刷新的问题 |
||||
- 下拉树系列添加下拉popup弹出前事件 |
||||
- 修复了复选下拉勾选值和搜索结果中含有父子串关系时提示不正确的问题 |
||||
- searcher提供可配是否支持搜索空格的allSearchBlank |
||||
- 修复了复选下拉全选状态下使用空格添加值trigger显示更新不对的问题 |
||||
- 复选下拉树展开节点提供分页加载和滚动加载两种方式 |
||||
- 修复了复选下拉列表初始化的时候发送执行两次itemsCreator的问题 |
||||
- 修复了virtual_list重新populate无效的问题 |
||||
- 复选下拉框新增值的时候外抛事件 |
||||
- 空格不再编码成  |
||||
- 支持文本区域水印可滚动 |
||||
|
||||
2.0(2020-03) |
||||
- 修复了IE9下使用bi.file上传包含特殊字符的excel出错的问题 |
||||
- 修复了下拉类型控件不允许编辑的时候没有title的问题 |
||||
- 修复了连续多次调用BI.Msg.alert后只有最后弹出的可以关闭的问题 |
||||
- 修复了time_combo设置格式为%M:%S后value设置大于30分钟的值时标红的问题 |
||||
- 复选下拉树系列展开节点性能优化 |
||||
|
||||
2.0(2020-02) |
||||
- 拓展BI.concat,使其可以拼接多个数组 |
||||
- 修复勾选节点不影响父子节点勾选状态的树搜索选中getValue不正常的问题 |
||||
|
||||
2.0(2020-01) |
||||
- 修复单值系滑块滑动松手后发两次EVENT_CHANGE的问题 |
||||
|
||||
2.0(2019-12) |
||||
- 修复多层级单选下拉树主动设置container后搜索面板弹出问题 |
||||
- bi.search_editor支持搜索中间含有空格的字符串 |
||||
- 修复了监听日期下拉框before_popup_view事件，调用setMinDate无效的问题 |
||||
- 修复了数值滑块逆向排列滑块后populate显示效果不对的问题 |
||||
- 不影响父节点勾选状态的复选树支持自定义水印和默认值 |
||||
- 修复text组件重新设置文本后标红丢失问题 |
||||
- 添加无全选按钮的复选下拉框组件 |
||||
|
||||
2.0(2019-11) |
||||
- 日期系列新增setMinDate和setMaxDate接口 |
||||
- 修复了同步复选树设置节点默认open后, 叶子节点无法选中的问题 |
||||
- 修复了连续多音字搜索可能导致结果异常或者标红异常的问题 |
||||
- 新增BI.set(object, path, value)方法 |
||||
- getSearchResult兼容了对null值的处理 |
||||
- 增加了异步单选下拉树请求完数据后加载完节点后会自动调整宽高的逻辑 |
||||
|
||||
2.0(2019-10) |
||||
- 修改了下拉树展开图标模糊的问题 |
||||
- 修复了下拉树搜索高亮字符与正常字符间存在间距的问题 |
||||
- 复选下拉系列的计数器从trigger中拆分, 作为独立的部分 |
||||
- 增加BI.createElement方法 |
||||
- 统一了单选下拉和复选下拉添加自定义值的交互效果 |
||||
|
||||
2.0(2019-09) |
||||
- [视觉]popover弹出框增加圆角 |
||||
- 文本列表通过复制粘贴的形式选中值的时候发送事件 |
||||
- 修复tree_value_chooser选中节点的唯一子节点后搜索该子节点，无法取消选中的问题 |
||||
- button的bubble创建的popup在收起的时候会destroy |
||||
- 修复了dynamic_date_pane在切换静态时间和动态时间的时候不会发事件的问题 |
||||
|
||||
2.0(2019-08) |
||||
- 修复valueChooser系列不支持value属性的问题 |
||||
- 更新了若干icon-font的样式 |
||||
- 修复了单选树同步搜索状态下父节点前可能没有展开符号的问题 |
||||
- 单选树可展示并选中不存在的值 |
||||
- 树类型下拉新增可搜索实际值的配置 |
||||
- 可编辑的combo新增水印配置 |
||||
- 单选下拉树同步状态下内置搜索 |
||||
|
||||
2.0(2019-07) |
||||
- 修改了下拉框控件默认值的配色 |
||||
- input及其派生编辑控件在PAUSE事件之前会触发CHANGE事件 |
||||
|
||||
2.0(2019-06) |
||||
- 单选下拉树支持搜索与异步加载节点 |
||||
- 提供了AES加密方法 |
||||
|
||||
2.0(2019-05) |
||||
- editor类控件新增EVENT_CHANGE_CONFIRM事件 |
||||
- 复选下拉控件和树下拉控件支持trigger是否可编辑 |
||||
- 时分秒控件支持自定义时间显示格式和是否可编辑 |
||||
- 日期/时间/日期区间/时间区间支持自定义日期选择范围和是否可编辑 |
||||
- 日期/时间/日期区间/时间区间支持自定义日期显示格式和是否可编辑 |
||||
- 增加less函数: 字体资源添加函数addFontRes和字体激活函数activeFont |
||||
|
||||
> @fontList: "dec", "report"; |
||||
> .addFontRes("dec"); |
||||
> .addFontRes("report"); |
||||
> .activateFont(@fontList); |
||||
|
||||
以上即可使用自定义的dec,report字体和fineui的资源字体 |
||||
|
||||
2.0(2019-04) |
||||
- 新增`bi.multi_tree_list_combo`控件, 此下拉树勾选节点时不会影响父子节点的勾选状态 |
||||
- 新增`bi.multi_tree_insert_combo`控件, 此下拉树可以插入不存在的新值 |
||||
- 新增`bi.list_tree_value_chooser_insert_combo`部件, 封装`bi.multi_tree_list_combo`数据处理逻辑 |
||||
- 新增`bi.tree_value_chooser_insert_combo`部件, 封装`bi.multi_tree_insert_combo`数据处理逻辑 |
||||
- 增加BI.DOM.ready方法 |
||||
|
||||
2.0(2019-03) |
||||
- 新增`bi.time_combo`时分秒控件和`bi.time_periods`时间选择区间，时间区间无有效值校验 |
||||
- Label控件增加highlight参数, 可指定初始化标蓝 |
||||
|
||||
2.0(2019-01) |
||||
- 加载更多的单选下拉系列新增allowNoSelect参数配置, 使得可以不选任意一个值 |
||||
|
||||
2.0(2018-12) |
||||
- 增加Button的点击动画和Combo下拉时下拉图标动画 |
||||
|
||||
|
||||
2.0(2018-11) |
||||
- 增加`bi.html`和`bi.html_label`类型，text支持html文本，不支持keyword |
||||
|
||||
|
||||
2.0(2018-10) |
||||
- popover增加高度自适应，即open的时候回根据内容高度调整popover的高度 |
||||
|
||||
|
||||
2.0(2018-09) |
||||
- 增加Fix对configuable为false的对象的不内部构造响应式数据的性能优化处理，例如: |
||||
|
||||
> this.model.json = Object.freeze({name: "zhang"}); |
||||
|
||||
只会对this.model.json进行响应式处理，不会对内部的name进行响应式处理 |
||||
|
||||
|
||||
2.0(2018-08) |
||||
- 增加BI.mount方法，支持同构 |
||||
@ -1,124 +0,0 @@
|
||||
Demo = { |
||||
version: 1.0 |
||||
}; |
||||
|
||||
BI.EVENT_BLUR = false
|
||||
|
||||
BI.$(function () { |
||||
var ref; |
||||
|
||||
BI.each(Demo.CONFIG, function (index, item) { |
||||
!item.id && (item.id = item.value || item.text); |
||||
}); |
||||
var tree = BI.Tree.transformToTreeFormat(Demo.CONFIG); |
||||
|
||||
var routes = [{ |
||||
path: "/", |
||||
component: function () { |
||||
return Promise.resolve({ |
||||
type: "demo.face" |
||||
}); |
||||
} |
||||
}, { |
||||
name: "component", |
||||
path: "/component/:componentId", |
||||
component: function () { |
||||
return Promise.resolve({ |
||||
type: "demo.router" |
||||
}); |
||||
}, |
||||
}, { |
||||
name: "user", |
||||
path: "/user/:name", |
||||
component: function () { |
||||
return Promise.resolve({ |
||||
type: "bi.vtape", |
||||
items: [{ |
||||
type: "bi.label", |
||||
text: "user", |
||||
height: 50 |
||||
}, { |
||||
type: "bi.router_view", |
||||
deps: 1, |
||||
height: 100 |
||||
}, { |
||||
type: "bi.router_view", |
||||
name: 'tool-buttons', |
||||
deps: 1 |
||||
}] |
||||
}); |
||||
}, |
||||
children: [{ |
||||
path: '', |
||||
components: { |
||||
default: function () { |
||||
return Promise.resolve({ |
||||
type: "bi.label", |
||||
text: 'home' |
||||
}); |
||||
}, |
||||
} |
||||
}, { |
||||
name: 'dashboard', |
||||
path: 'dashboard', |
||||
component: function () { |
||||
return Promise.resolve({ |
||||
type: "bi.label", |
||||
text: 'dashboard' |
||||
}); |
||||
} |
||||
}, { |
||||
name: 'tables', |
||||
path: 'tables/:id', |
||||
components: { |
||||
default: function () { |
||||
return Promise.resolve({ |
||||
type: "bi.label", |
||||
text: 'table-view' |
||||
}); |
||||
}, |
||||
"tool-buttons": function () { |
||||
return Promise.resolve({ |
||||
type: "bi.label", |
||||
text: '预览按钮', |
||||
}); |
||||
}, |
||||
} |
||||
}] |
||||
}]; |
||||
|
||||
// BI.Tree.traversal(tree, function (index, node) {
|
||||
// if (!node.children || BI.isEmptyArray(node.children)) {
|
||||
// routes.push({
|
||||
// path: "/",
|
||||
// component: function () {
|
||||
// return Promise.resolve({
|
||||
// type: node.value
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
|
||||
// var AppRouter = BI.inherit(BI.Router, obj);
|
||||
// new AppRouter;
|
||||
// BI.history.start();
|
||||
|
||||
BI.createWidget({ |
||||
type: "bi.router", |
||||
ref: function (_ref) { |
||||
BI.$router = _ref.$router; |
||||
}, |
||||
element: "#wrapper", |
||||
routes: routes, |
||||
render: function () { |
||||
return { |
||||
type: "demo.main", |
||||
ref: function (_ref) { |
||||
console.log(_ref); |
||||
ref = _ref; |
||||
} |
||||
}; |
||||
} |
||||
}); |
||||
}); |
||||
File diff suppressed because one or more lines are too long
@ -1,4 +0,0 @@
|
||||
export * from "./app"; |
||||
export * from "./config"; |
||||
export * from "./version"; |
||||
export * from "./js"; |
||||
@ -1,449 +0,0 @@
|
||||
import { shortcut, Widget, parseInt, Msg, map } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Button extends Widget { |
||||
static xtype = "demo.button"; |
||||
|
||||
props = { baseCls: "demo-button" }; |
||||
|
||||
render() { |
||||
const items = [ |
||||
{ |
||||
type: "bi.button", |
||||
text: "一般按钮1111111111111", |
||||
level: "common", |
||||
whiteSpace: "nowrap", |
||||
width: 100, |
||||
height: 30, |
||||
handler() { |
||||
console.log("触发点击事件"); |
||||
this.loading(); |
||||
setTimeout(() => { |
||||
this.loaded(); |
||||
}, 5 * 1000); |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "表示成功状态按钮", |
||||
level: "success", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "表示警告状态的按钮", |
||||
level: "warning", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "表示错误状态的按钮", |
||||
level: "error", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "表示忽略状态的按钮", |
||||
level: "ignore", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "普通灰化按钮", |
||||
disabled: true, |
||||
level: "success", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "忽略状态灰化按钮", |
||||
disabled: true, |
||||
level: "ignore", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "带图标的按钮", |
||||
// level: 'ignore',
|
||||
iconCls: "close-font", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "一般按钮", |
||||
block: true, |
||||
level: "common", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "表示成功状态按钮", |
||||
block: true, |
||||
level: "success", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "表示警告状态的按钮", |
||||
block: true, |
||||
level: "warning", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "表示忽略状态的按钮", |
||||
block: true, |
||||
level: "ignore", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "普通灰化按钮", |
||||
block: true, |
||||
disabled: true, |
||||
level: "success", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "忽略状态灰化按钮", |
||||
block: true, |
||||
disabled: true, |
||||
level: "ignore", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "带图标的按钮", |
||||
block: true, |
||||
// level: 'ignore',
|
||||
iconCls: "close-font", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "一般按钮", |
||||
clear: true, |
||||
level: "common", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "表示成功状态按钮", |
||||
clear: true, |
||||
level: "success", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "表示警告状态的按钮", |
||||
clear: true, |
||||
level: "warning", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "表示忽略状态的按钮", |
||||
clear: true, |
||||
level: "ignore", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "普通灰化按钮", |
||||
clear: true, |
||||
disabled: true, |
||||
level: "success", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "忽略状态灰化按钮", |
||||
clear: true, |
||||
disabled: true, |
||||
level: "ignore", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "带图标的按钮", |
||||
clear: true, |
||||
// level: 'ignore',
|
||||
iconCls: "close-font", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.text_button", |
||||
text: "文字按钮", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "幽灵按钮（common）", |
||||
ghost: true, |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
iconCls: "plus-font", |
||||
text: "幽灵按钮（common）", |
||||
ghost: true, |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
iconCls: "plus-font", |
||||
text: "幽灵按钮（common）", |
||||
ghost: true, |
||||
level: "warning", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
iconCls: "plus-font", |
||||
text: "幽灵按钮（common）", |
||||
ghost: true, |
||||
level: "error", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
iconCls: "plus-font", |
||||
text: "幽灵按钮（common）", |
||||
ghost: true, |
||||
level: "success", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "幽灵按钮（common）灰化", |
||||
disabled: true, |
||||
ghost: true, |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "弹出bubble", |
||||
bubble() { |
||||
return `${parseInt(Math.random() * 100) % 10}提示`; |
||||
}, |
||||
handler() { |
||||
Msg.toast("1111"); |
||||
}, |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "自动撑开", |
||||
iconCls: "close-font", |
||||
// textHeight: 32,
|
||||
// height: 32,
|
||||
iconGap: 64, |
||||
vgap: 16, |
||||
hgap: 100, |
||||
iconPosition: "bottom", |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "图标在下面的按钮", |
||||
iconCls: "close-font", |
||||
iconPosition: "bottom", |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "图标在左边的按钮", |
||||
iconCls: "close-font", |
||||
iconPosition: "left", |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "图标在右边的按钮", |
||||
iconCls: "close-font", |
||||
iconPosition: "right", |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "浅色的一般按钮", |
||||
iconCls: "plus-font", |
||||
light: true, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "浅色的成功按钮", |
||||
level: "success", |
||||
iconCls: "plus-font", |
||||
light: true, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "浅色的警告按钮", |
||||
level: "warning", |
||||
iconCls: "plus-font", |
||||
light: true, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
iconCls: "plus-font", |
||||
text: "浅色的失败按钮", |
||||
level: "error", |
||||
cls: "hover-mask", |
||||
light: true, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
iconCls: "plus-font", |
||||
text: "朴素的按钮", |
||||
level: "common", |
||||
plain: true, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
iconCls: "plus-font", |
||||
text: "朴素的按钮", |
||||
level: "success", |
||||
plain: true, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
iconCls: "plus-font", |
||||
text: "朴素的按钮", |
||||
level: "error", |
||||
plain: true, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
iconCls: "plus-font", |
||||
text: "朴素的按钮", |
||||
level: "warning", |
||||
plain: true, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
iconCls: "plus-font", |
||||
text: "朴素的按钮", |
||||
level: "ignore", |
||||
plain: true, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
iconCls: "plus-font", |
||||
plain: true, |
||||
level: "error", |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
iconCls: "plus-font", |
||||
text: "朴素的按钮", |
||||
plain: true, |
||||
disabled: true, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
iconCls: "plus-font", |
||||
text: "点我，更改图标", |
||||
handler() { |
||||
this.i = this.i === undefined ? 0 : ++this.i; |
||||
const arr = [ |
||||
"text-background-font", |
||||
"check-mark-ha-font", |
||||
"close-font", |
||||
"search-font", |
||||
"date-change-h-font" |
||||
]; |
||||
if (this.i >= arr.length) { |
||||
this.i = 0; |
||||
} |
||||
this.setIcon(arr[this.i]); |
||||
}, |
||||
height: 24, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "带加载的按钮", |
||||
handler() { |
||||
console.log("触发点击事件"); |
||||
this.loading(); |
||||
setTimeout(() => { |
||||
this.loaded(); |
||||
}, 5 * 1000); |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "带加载的按钮", |
||||
iconCls: "circle-close-font", |
||||
handler() { |
||||
console.log("触发点击事件"); |
||||
this.loading(); |
||||
setTimeout(() => { |
||||
this.loaded(); |
||||
}, 5 * 1000); |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
clear: true, |
||||
text: "带加载的按钮", |
||||
iconCls: "circle-close-font", |
||||
handler() { |
||||
console.log("触发点击事件"); |
||||
this.loading(); |
||||
setTimeout(() => { |
||||
this.loaded(); |
||||
}, 5 * 1000); |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "加载中的按钮", |
||||
loading: true, |
||||
handler() { |
||||
console.log("我是无法被触发的!"); |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "自定义图标按钮（点我修改）", |
||||
icon: { |
||||
type: "demo.joker.icon", |
||||
}, |
||||
handler() { |
||||
console.log("触发点击事件"); |
||||
this.loading(); |
||||
setTimeout(() => { |
||||
this.loaded(); |
||||
}, 5 * 1000); |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "文字偏左的按钮", |
||||
textAlign: "left", |
||||
width: 200, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "小于最小宽度的按钮", |
||||
width: 50, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "一个文字超级超级长的 button, 他比按钮宽度还长。", |
||||
textWidth: 500, |
||||
width: 100, |
||||
} |
||||
]; |
||||
|
||||
return { |
||||
type: "bi.left", |
||||
scrolly: true, |
||||
vgap: 100, |
||||
hgap: 20, |
||||
items: map(items, (index, value) => { |
||||
return { |
||||
el: value, |
||||
}; |
||||
}), |
||||
}; |
||||
} |
||||
} |
||||
@ -1,28 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Button extends Widget { |
||||
static xtype = "demo.icon_button"; |
||||
|
||||
props = { baseCls: "demo-button" }; |
||||
|
||||
render() { |
||||
const items = [ |
||||
{ |
||||
el: { |
||||
type: "bi.icon_button", |
||||
cls: "close-ha-font", |
||||
width: 25, |
||||
height: 25, |
||||
}, |
||||
} |
||||
]; |
||||
|
||||
return { |
||||
type: "bi.left", |
||||
vgap: 200, |
||||
hgap: 20, |
||||
items, |
||||
}; |
||||
} |
||||
} |
||||
@ -1,28 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Button extends Widget { |
||||
static xtype = "demo.image_button"; |
||||
|
||||
props = { baseCls: "demo-button" }; |
||||
|
||||
render() { |
||||
const items = [ |
||||
{ |
||||
el: { |
||||
type: "bi.image_button", |
||||
src: "http://www.easyicon.net/api/resizeApi.php?id=1206741&size=128", |
||||
width: 100, |
||||
height: 100, |
||||
}, |
||||
} |
||||
]; |
||||
|
||||
return { |
||||
type: "bi.left", |
||||
vgap: 200, |
||||
hgap: 20, |
||||
items, |
||||
}; |
||||
} |
||||
} |
||||
@ -1,26 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class JokerIcon extends Widget { |
||||
static xtype = "demo.joker.icon"; |
||||
|
||||
render() { |
||||
const self = this; |
||||
|
||||
return { |
||||
type: "bi.label", |
||||
cls: "anim-rotate", |
||||
ref (ref) { |
||||
self.text = ref; |
||||
}, |
||||
}; |
||||
} |
||||
|
||||
loading() { |
||||
this.text.setText("🤡"); |
||||
} |
||||
|
||||
loaded() { |
||||
this.text.setText(""); |
||||
} |
||||
} |
||||
@ -1,28 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Button extends Widget { |
||||
static xtype = "demo.text_button"; |
||||
|
||||
props = { baseCls: "demo-button" }; |
||||
|
||||
render() { |
||||
const items = [ |
||||
{ |
||||
el: { |
||||
type: "bi.text_button", |
||||
text: "文字按钮", |
||||
height: 30, |
||||
keyword: "w", |
||||
}, |
||||
} |
||||
]; |
||||
|
||||
return { |
||||
type: "bi.left", |
||||
vgap: 200, |
||||
hgap: 20, |
||||
items, |
||||
}; |
||||
} |
||||
} |
||||
@ -1,5 +0,0 @@
|
||||
export * from "./demo.button"; |
||||
export * from "./demo.icon_button"; |
||||
export * from "./demo.image_button"; |
||||
export * from "./demo.joker.icon"; |
||||
export * from "./demo.text_button"; |
||||
@ -1,26 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Html extends Widget { |
||||
static xtype = "demo.html"; |
||||
|
||||
props = { baseCls: "demo-html" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [ |
||||
{ |
||||
type: "bi.html", |
||||
text: "<h1>在bi.html标签中使用html原生标签</h1>", |
||||
}, |
||||
{ |
||||
type: "bi.html", |
||||
text: "<ul>ul列表<li>list item1</li><li>list item2</li></ul>", |
||||
} |
||||
], |
||||
hgap: 300, |
||||
vgap: 20, |
||||
}; |
||||
} |
||||
} |
||||
@ -1,26 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class IconLabel extends Widget { |
||||
static xtype = "demo.icon_label"; |
||||
|
||||
props = { baseCls: "demo-bubble" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.default", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
text: "这是一个icon标签,在加了border之后仍然是居中显示的", |
||||
}, |
||||
{ |
||||
type: "bi.icon_label", |
||||
cls: "date-font bi-border", |
||||
height: 40, |
||||
width: 40, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,167 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Label extends Widget { |
||||
static xtype = "demo.label"; |
||||
|
||||
props = { baseCls: "demo-label" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
text: "这是一个label控件，默认居中", |
||||
disabled: true, |
||||
textAlign: "center", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
text: "这是一个label控件, 高度为30，默认居中", |
||||
textAlign: "center", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "这是一个label控件，使用水平居左", |
||||
textAlign: "left", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "这是一个label控件，whiteSpace是normal，不设置高度，为了演示这个是真的是normal的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg5", |
||||
text: "这是一个label控件，whiteSpace是默认的nowrap，不设置高度，为了演示这个是真的是nowrap的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg7", |
||||
text: "这是一个label控件，whiteSpace是默认的nowrap，高度为30，为了演示这个是真的是nowrap的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "这是一个label控件，whiteSpace设置为normal，高度为60，为了演示这个是真的是normal的，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
height: 60, |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg5", |
||||
text: "这是一个label控件，whiteSpace设置为normal，textHeight控制text的lineHeight，这样可以实现换行效果，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textHeight: 30, |
||||
height: 60, |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
text: "这是一个label控件，whiteSpace设置为nowrap，textWidth控制text的width", |
||||
textWidth: 200, |
||||
height: 60, |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg8", |
||||
text: "这是一个label控件，whiteSpace设置为normal，textWidth控制text的width，这样可以实现换行效果，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textWidth: 200, |
||||
height: 60, |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg7", |
||||
text: "whiteSpace为默认的nowrap，高度设置为60，宽度设置为300", |
||||
height: 60, |
||||
width: 300, |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
text: "设置了宽度300，高度60，whiteSpace设置为normal", |
||||
whiteSpace: "normal", |
||||
width: 300, |
||||
height: 60, |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg8", |
||||
text: "textWidth设置为200，textHeight设置为30，width设置300，凑点字数看效果", |
||||
width: 300, |
||||
textWidth: 200, |
||||
textHeight: 30, |
||||
height: 60, |
||||
whiteSpace: "normal", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
text: "textWidth设置为200，width设置300，看下水平居左的换行效果", |
||||
textAlign: "left", |
||||
width: 300, |
||||
textWidth: 200, |
||||
textHeight: 30, |
||||
height: 60, |
||||
whiteSpace: "normal", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "使用默认的nowrap，再去设置textHeight，只会有一行的效果", |
||||
textAlign: "left", |
||||
width: 300, |
||||
textWidth: 200, |
||||
textHeight: 30, |
||||
height: 60, |
||||
}, |
||||
{ |
||||
type: "bi.left", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "在float布局中自适应的,不设高度和宽度，文字多长这个就有多长", |
||||
} |
||||
], |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.left", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg4", |
||||
text: "在float布局中自适应的，设置了宽度200，后面还有", |
||||
width: 200, |
||||
} |
||||
], |
||||
height: 30, |
||||
}, |
||||
{ |
||||
type: "bi.left", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
text: "在float布局中自适应的，设置了高度，文字多长这个就有多长", |
||||
cls: "layout-bg5", |
||||
height: 30, |
||||
} |
||||
], |
||||
height: 30, |
||||
} |
||||
], |
||||
hgap: 300, |
||||
vgap: 20, |
||||
}; |
||||
} |
||||
} |
||||
@ -1,673 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class LabelScene extends Widget { |
||||
static xtype = "demo.label_scene"; |
||||
|
||||
props = { baseCls: "demo-label" }; |
||||
|
||||
render() { |
||||
const items = []; |
||||
|
||||
items.push( |
||||
this.createExpander("1.1.1 文字居中,有宽度和高度,有文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
text: "设置了textWidth,则一定是嵌套结构,因此需要用center_adapt布局容纳一下.为了实现不足一行时文字水平居中,超出一行时左对齐,需要设置maxWidth.", |
||||
whiteSpace: "normal", |
||||
height: 50, |
||||
width: 500, |
||||
textWidth: 200, |
||||
textAlign: "center", |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.1.2 居中,有宽度和高度,有文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
text: "居中,有宽度高度,有文字宽度,whiteSpace为nowrap,maxWidth会限制文字", |
||||
whiteSpace: "nowrap", |
||||
height: 50, |
||||
width: 500, |
||||
textWidth: 350, |
||||
textAlign: "center", |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.2.1 居中,有宽度无高度,有文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
text: "居中,有宽度无高度,有文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
width: 500, |
||||
textWidth: 200, |
||||
textAlign: "center", |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.2.1 居中,有宽度无高度,有文字宽度,whiteSpace为normal,高度被父容器拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
text: "此时虽然没有对label设置高度,但由于使用了center_adapt布局,依然会垂直方向居中", |
||||
whiteSpace: "normal", |
||||
width: 500, |
||||
textWidth: 200, |
||||
textAlign: "center", |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.2.2 居中,有宽度无高度,有文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
text: "居中,有宽度无高度,有文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "nowrap", |
||||
width: 500, |
||||
textWidth: 350, |
||||
textAlign: "center", |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.3.1 居中,有宽度和高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,有宽度高度,无文字宽度,whiteSpace为normal,只需用center_adapt布局包一下即可.度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,whiteSpace为normal", |
||||
width: 500, |
||||
whiteSpace: "normal", |
||||
textAlign: "center", |
||||
height: 50, |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.3.2 居中,有宽度无高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,有宽度无高度,无文字宽度,whiteSpace为normal,只需用center_adapt布局包一下即可.度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,下即可.居中,有宽度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,度,无文字宽度,whiteSpace为normal居中,有宽度,无文字宽度,whiteSpace为normal", |
||||
width: 500, |
||||
whiteSpace: "normal", |
||||
textAlign: "center", |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.4 居中,有宽度和高度,无文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,有宽度500有高度50,无文字宽度,whiteSpace为nowrap,此处无需两层div,设置text即可,然后设置line-height为传入高度即可实现垂直方向居中", |
||||
width: 500, |
||||
whiteSpace: "nowrap", |
||||
textAlign: "center", |
||||
height: 50, |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.5.1 居中,有宽度无高度,无文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,有宽度500无高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
width: 500, |
||||
whiteSpace: "nowrap", |
||||
textAlign: "center", |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.5.2 居中,有宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 50, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,有宽度500无高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
width: 500, |
||||
whiteSpace: "nowrap", |
||||
textAlign: "center", |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.6.1 居中,无宽度无高度,有文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度,有文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
textWidth: 500, |
||||
whiteSpace: "nowrap", |
||||
textAlign: "center", |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.6.2 居中,无宽度无高度,有文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度,有文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
textWidth: 500, |
||||
whiteSpace: "normal", |
||||
textAlign: "center", |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.6.3 居中,无宽度无,有文字宽度,whiteSpace为normal,被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度,有文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
textWidth: 500, |
||||
whiteSpace: "normal", |
||||
textAlign: "center", |
||||
}, |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.7.1 居中,无宽度无高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度无高度,无文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "center", |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.7.2 居中,无宽度无高度,无文字宽度,whiteSpace为normal,被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度无高度,无文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "center", |
||||
}, |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.7.3 居中,无宽度有高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度有高度,无文字宽度,whiteSpace为normal,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
height: 50, |
||||
textAlign: "center", |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.8 居中,无宽度有高度,无文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度有高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "nowrap", |
||||
height: 50, |
||||
textAlign: "center", |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.9 居中,无宽度无高度,无文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度无高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "center", |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("1.9.1 居中,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 50, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
text: "居中,无宽度无高度,无文字宽度,whiteSpace为nowrap,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数,凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "center", |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
right: 0, |
||||
bottom: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.1.1 居左,有宽度有高度,有文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度有高度,有文字宽度,whiteSpace为normal，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
height: 50, |
||||
width: 500, |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.1.2 居左,有宽度有高度,有文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度有高度,有文字宽度,whiteSpace为normal，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
height: 50, |
||||
width: 500, |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.2.1 居左,有宽度无高度,有文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度无高度,有文字宽度,whiteSpace为normal，不设置高度，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
width: 500, |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.2.2 居左,有宽度无高度,有文字宽度,whiteSpace为normal,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度无高度,有文字宽度,whiteSpace为normal，不设置高度，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
width: 500, |
||||
}, |
||||
top: 0, |
||||
bottom: 0, |
||||
left: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.2.3 居左,有宽度无高度,有文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度无高度,有文字宽度,whiteSpace为nowrap，不设置高度，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
width: 500, |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.2.4 居左,有宽度无高度,有文字宽度,whiteSpace为nowrap,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度无高度,有文字宽度,whiteSpace为nowrap，不设置高度，为了演示这个是真的是normal的我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
width: 500, |
||||
}, |
||||
top: 0, |
||||
bottom: 0, |
||||
left: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.3.1 居左,有宽度有高度,无文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度有高度,无文字宽度,whiteSpace为nowrap，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
height: 50, |
||||
vgap: 5, |
||||
width: 500, |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.3.2 居左,有宽度有高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度有高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
height: 50, |
||||
width: 500, |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.4.1 居左,有宽度无高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,有宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
width: 500, |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.4.2 居左,有宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
text: "居左,有宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
width: 500, |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.5.1 居左,无宽度无高度,有文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.5.2 居左,无宽度无高度,有文字宽度,whiteSpace为normal,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.5.3 居左,无宽度无高度,有文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.5.4 居左,无宽度无高度,有文字宽度,whiteSpace为nowrap,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,有文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
textWidth: 300, |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.6.1 居左,无宽度有高度,无文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度有高度,无文字宽度,whiteSpace为nowrap，注意这个是设置了vgap的,为了实现居中,lineHeight要做计算,才能准确的垂直居中", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
vgap: 10, |
||||
height: 50, |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.6.2 居左,无宽度有高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度有高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
height: 50, |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.7.1 居左,无宽度无高度,无文字宽度,whiteSpace为normal", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.7.2 居左,无宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.7.3 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap", { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,无文字宽度,whiteSpace为nowrap，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.7.4 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,无文字宽度,whiteSpace为nowrap，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.8 居左,无宽度无高度,无文字宽度,whiteSpace为nowrap,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,无文字宽度,whiteSpace为nowrap，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "nowrap", |
||||
textAlign: "left", |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
items.push( |
||||
this.createExpander("2.8.2 居左,无宽度无高度,无文字宽度,whiteSpace为normal,高度被父级拉满", { |
||||
type: "bi.absolute", |
||||
height: 100, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "居左,无宽度无高度,无文字宽度,whiteSpace为normal，我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数,我凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数，凑点字数", |
||||
whiteSpace: "normal", |
||||
textAlign: "left", |
||||
}, |
||||
top: 0, |
||||
left: 0, |
||||
bottom: 0, |
||||
right: 0, |
||||
} |
||||
], |
||||
}) |
||||
); |
||||
|
||||
return { |
||||
type: "bi.vertical", |
||||
items, |
||||
hgap: 300, |
||||
vgap: 20, |
||||
}; |
||||
} |
||||
|
||||
createExpander(text, popup) { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
cls: "demo-font-weight-bold", |
||||
textAlign: "left", |
||||
text, |
||||
height: 30, |
||||
}, |
||||
{ |
||||
el: popup, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,27 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
import { Msg } from "@/base"; |
||||
|
||||
@shortcut() |
||||
export class Message extends Widget { |
||||
static xtype = "demo.message"; |
||||
|
||||
props = { baseCls: "demo-bubble" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.center_adapt", |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.button", |
||||
text: "点击我弹出一个消息框", |
||||
height: 30, |
||||
handler() { |
||||
Msg.alert("测试消息框", "我是测试消息框的内容"); |
||||
}, |
||||
}, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,126 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.pager"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "默认的分页", |
||||
}, |
||||
{ |
||||
type: "bi.pager", |
||||
height: 50, |
||||
pages: 18, |
||||
groups: 5, |
||||
curr: 6, |
||||
first: "首页", |
||||
last: "尾页", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "显示上一页、下一页、首页、尾页", |
||||
}, |
||||
{ |
||||
type: "bi.pager", |
||||
dynamicShow: false, |
||||
height: 50, |
||||
pages: 18, |
||||
groups: 5, |
||||
curr: 1, |
||||
first: "首页>", |
||||
last: "<尾页", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "显示上一页、下一页", |
||||
}, |
||||
{ |
||||
type: "bi.pager", |
||||
dynamicShow: false, |
||||
dynamicShowFirstLast: true, |
||||
height: 50, |
||||
pages: 18, |
||||
groups: 5, |
||||
curr: 1, |
||||
first: "首页>", |
||||
last: "<尾页", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "自定义上一页、下一页", |
||||
}, |
||||
{ |
||||
type: "bi.pager", |
||||
dynamicShow: false, |
||||
height: 50, |
||||
pages: 18, |
||||
groups: 5, |
||||
curr: 6, |
||||
prev: { |
||||
type: "bi.button", |
||||
cls: "", |
||||
text: "上一页", |
||||
value: "prev", |
||||
once: false, |
||||
height: 30, |
||||
handler() {}, |
||||
}, |
||||
next: { |
||||
type: "bi.button", |
||||
cls: "", |
||||
text: "下一页", |
||||
value: "next", |
||||
once: false, |
||||
handler() {}, |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "不知道总页数的情况(测试条件 1<=page<=3)", |
||||
}, |
||||
{ |
||||
type: "bi.pager", |
||||
dynamicShow: false, |
||||
height: 50, |
||||
pages: false, |
||||
curr: 1, |
||||
prev: { |
||||
type: "bi.button", |
||||
cls: "", |
||||
text: "上一页", |
||||
value: "prev", |
||||
once: false, |
||||
height: 30, |
||||
handler() {}, |
||||
}, |
||||
next: { |
||||
type: "bi.button", |
||||
cls: "", |
||||
text: "下一页", |
||||
value: "next", |
||||
once: false, |
||||
handler() {}, |
||||
}, |
||||
hasPrev(v) { |
||||
return v > 1; |
||||
}, |
||||
hasNext(v) { |
||||
return v < 3; |
||||
}, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,124 +0,0 @@
|
||||
import { shortcut, Widget, createWidget } from "@/core"; |
||||
import { Editor as BIEditor} from "@/base"; |
||||
|
||||
@shortcut() |
||||
export class Editor extends Widget { |
||||
static xtype = "demo.editor"; |
||||
|
||||
props = { baseCls: "demo-editor" }; |
||||
|
||||
render() { |
||||
const editor1 = createWidget({ |
||||
type: "bi.editor", |
||||
cls: "bi-border", |
||||
watermark: "报错信息显示在控件上方", |
||||
errorText: "字段不可重名!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!", |
||||
width: 200, |
||||
height: 24, |
||||
}); |
||||
editor1.on(BIEditor.EVENT_ENTER, () => { |
||||
editor1.blur(); |
||||
}); |
||||
const editor2 = createWidget({ |
||||
type: "bi.editor", |
||||
cls: "bi-border", |
||||
watermark: "输入'a'会有错误信息", |
||||
disabled: true, |
||||
errorText: "字段不可重名", |
||||
validationChecker(v) { |
||||
if (v == "a") { |
||||
return false; |
||||
} |
||||
|
||||
return true; |
||||
}, |
||||
allowBlank: true, |
||||
width: 200, |
||||
height: 24, |
||||
}); |
||||
const editor3 = createWidget({ |
||||
type: "bi.editor", |
||||
cls: "bi-border", |
||||
watermark: "输入'a'会有错误信息且回车键不能退出编辑", |
||||
errorText: "字段不可重名", |
||||
value: "a", |
||||
validationChecker(v) { |
||||
if (v == "a") { |
||||
return false; |
||||
} |
||||
|
||||
return true; |
||||
}, |
||||
quitChecker(v) { |
||||
return false; |
||||
}, |
||||
allowBlank: true, |
||||
width: 300, |
||||
height: 24, |
||||
}); |
||||
const editor4 = createWidget({ |
||||
type: "bi.editor", |
||||
cls: "bi-border", |
||||
inputType: "password", |
||||
autocomplete: "new-password", |
||||
watermark: "请输入密码", |
||||
allowBlank: true, |
||||
width: 300, |
||||
height: 24, |
||||
}); |
||||
createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: editor1, |
||||
left: 0, |
||||
top: 0, |
||||
}, |
||||
{ |
||||
el: editor2, |
||||
left: 250, |
||||
top: 30, |
||||
}, |
||||
{ |
||||
el: editor3, |
||||
left: 500, |
||||
top: 60, |
||||
}, |
||||
{ |
||||
el: editor4, |
||||
left: 700, |
||||
top: 60, |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.button", |
||||
text: "disable", |
||||
handler() { |
||||
editor1.setEnable(false); |
||||
editor2.setEnable(false); |
||||
editor3.setEnable(false); |
||||
}, |
||||
height: 30, |
||||
}, |
||||
left: 100, |
||||
bottom: 60, |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.button", |
||||
text: "enable", |
||||
handler() { |
||||
editor1.setEnable(true); |
||||
editor2.setEnable(true); |
||||
editor3.setEnable(true); |
||||
}, |
||||
height: 30, |
||||
}, |
||||
left: 200, |
||||
bottom: 60, |
||||
} |
||||
], |
||||
}); |
||||
} |
||||
} |
||||
@ -1,33 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class CodeEditor extends Widget { |
||||
static xtype = "demo.multifile_editor"; |
||||
|
||||
props = { baseCls: "demo-editor" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.absolute", |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.adaptive", |
||||
cls: "layout-bg1", |
||||
items: [ |
||||
{ |
||||
type: "bi.multifile_editor", |
||||
width: 400, |
||||
height: 300, |
||||
} |
||||
], |
||||
width: 400, |
||||
height: 300, |
||||
}, |
||||
top: 50, |
||||
left: 50, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,52 +0,0 @@
|
||||
import { shortcut, Widget, createWidget, isNotEmptyString } from "@/core"; |
||||
import { TextAreaEditor, Msg } from "@/base"; |
||||
|
||||
@shortcut() |
||||
export class CodeEditor extends Widget { |
||||
static xtype = "demo.textarea_editor"; |
||||
|
||||
props = { baseCls: "demo-editor" }; |
||||
|
||||
render() { |
||||
const editor = createWidget({ |
||||
type: "bi.textarea_editor", |
||||
cls: "bi-border", |
||||
width: 600, |
||||
height: 400, |
||||
watermark: "请输入内容", |
||||
errorText: "检测内容有误", |
||||
validationChecker(v) { |
||||
return isNotEmptyString(v); |
||||
}, |
||||
}); |
||||
editor.on(TextAreaEditor.EVENT_FOCUS, () => { |
||||
Msg.toast("Focus"); |
||||
}); |
||||
editor.on(TextAreaEditor.EVENT_BLUR, () => { |
||||
Msg.toast("Blur"); |
||||
}); |
||||
createWidget({ |
||||
type: "bi.vertical", |
||||
element: this, |
||||
hgap: 30, |
||||
vgap: 20, |
||||
items: [ |
||||
editor, |
||||
{ |
||||
type: "bi.button", |
||||
text: "getValue", |
||||
handler() { |
||||
Msg.toast(JSON.stringify(editor.getValue())); |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "setValue", |
||||
handler() { |
||||
editor.setValue("测试数据"); |
||||
}, |
||||
} |
||||
], |
||||
}); |
||||
} |
||||
} |
||||
@ -1,11 +0,0 @@
|
||||
export * from "./demo.html"; |
||||
export * from "./demo.icon_label"; |
||||
export * from "./demo.label"; |
||||
export * from "./demo.label.scene"; |
||||
export * from "./demo.message"; |
||||
export * from "./demo.pager"; |
||||
|
||||
export * from "./button"; |
||||
export * from "./editor"; |
||||
export * from "./tip"; |
||||
export * from "./tree"; |
||||
@ -1,84 +0,0 @@
|
||||
import { shortcut, Widget, Bubbles } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Bubble extends Widget { |
||||
static xtype = "demo.bubble"; |
||||
|
||||
props = { baseCls: "demo-bubble" }; |
||||
|
||||
render() { |
||||
const btns = []; |
||||
const items = [ |
||||
{ |
||||
el: { |
||||
ref(_ref) { |
||||
btns.push(_ref); |
||||
}, |
||||
type: "bi.button", |
||||
text: "bubble测试(消息)", |
||||
title: "123", |
||||
height: 30, |
||||
handler() { |
||||
Bubbles.show("singleBubble1", "bubble测试", this, { |
||||
level: "common", |
||||
}); |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
el: { |
||||
ref(_ref) { |
||||
btns.push(_ref); |
||||
}, |
||||
type: "bi.button", |
||||
text: "bubble测试(成功)", |
||||
height: 30, |
||||
handler() { |
||||
Bubbles.show("singleBubble2", "bubble测试", this, { |
||||
offsetStyle: "center", |
||||
level: "success", |
||||
}); |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
el: { |
||||
ref(_ref) { |
||||
btns.push(_ref); |
||||
}, |
||||
type: "bi.button", |
||||
text: "bubble测试(错误)", |
||||
height: 30, |
||||
handler() { |
||||
Bubbles.show("singleBubble3", "bubble测试", this, { |
||||
offsetStyle: "right", |
||||
level: "error", |
||||
}); |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
el: { |
||||
ref(_ref) { |
||||
btns.push(_ref); |
||||
}, |
||||
type: "bi.button", |
||||
text: "bubble测试(警告)", |
||||
height: 30, |
||||
handler() { |
||||
Bubbles.show("singleBubble4", "bubble测试", this, { |
||||
level: "warning", |
||||
}); |
||||
}, |
||||
}, |
||||
} |
||||
]; |
||||
|
||||
return { |
||||
type: "bi.left", |
||||
vgap: 200, |
||||
hgap: 20, |
||||
items, |
||||
}; |
||||
} |
||||
} |
||||
@ -1,68 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Title extends Widget { |
||||
static xtype = "demo.title"; |
||||
|
||||
props = { baseCls: "demo-title" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
height: 50, |
||||
title: "title提示", |
||||
text: "移上去有title提示", |
||||
textAlign: "center", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg6", |
||||
height: 50, |
||||
disabled: true, |
||||
warningTitle: "title错误提示", |
||||
text: "移上去有title错误提示", |
||||
textAlign: "center", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
height: 50, |
||||
disabled: true, |
||||
tipType: "success", |
||||
title: "自定义title提示效果", |
||||
warningTitle: "自定义title提示效果", |
||||
text: "自定义title提示效果", |
||||
textAlign: "center", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg3", |
||||
height: 50, |
||||
title: () => "函数返回值作为title提示", |
||||
text: "title提示支持函数", |
||||
textAlign: "center", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg4", |
||||
height: 50, |
||||
title() { |
||||
return { |
||||
level: "success", |
||||
text: "自定义title\n提示效果", |
||||
textAlign: "center", |
||||
}; |
||||
}, |
||||
text: "title提示支持对象,作为bi.tooltip的props", |
||||
textAlign: "center", |
||||
} |
||||
], |
||||
hgap: 300, |
||||
vgap: 20, |
||||
}; |
||||
} |
||||
} |
||||
@ -1,86 +0,0 @@
|
||||
import { shortcut, Widget, createWidget } from "@/core"; |
||||
import { Msg } from "@/base"; |
||||
|
||||
@shortcut() |
||||
export class Toast extends Widget { |
||||
static xtype = "demo.toast"; |
||||
|
||||
props = { baseCls: "demo-toast" }; |
||||
|
||||
render() { |
||||
const items = [ |
||||
{ |
||||
el: { |
||||
type: "bi.button", |
||||
text: "简单Toast测试(success)", |
||||
height: 30, |
||||
handler() { |
||||
Msg.toast("这是一条简单的数据", { |
||||
level: "success", |
||||
}); |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.button", |
||||
text: "很长的Toast测试(normal)", |
||||
height: 30, |
||||
handler() { |
||||
Msg.toast( |
||||
"这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据", |
||||
{} |
||||
); |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.button", |
||||
text: "非常长的Toast测试(warning)", |
||||
height: 30, |
||||
handler() { |
||||
Msg.toast( |
||||
"这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据", |
||||
{ |
||||
level: "warning", |
||||
autoClose: false, |
||||
} |
||||
); |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.button", |
||||
text: "错误提示Toast测试(error)", |
||||
height: 30, |
||||
handler() { |
||||
Msg.toast("错误提示Toast测试", { |
||||
level: "error", |
||||
}); |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.button", |
||||
text: "错误提示Toast测试(error), 此toast不会自动消失", |
||||
height: 30, |
||||
handler() { |
||||
Msg.toast("错误提示Toast测试", { |
||||
autoClose: false, |
||||
}); |
||||
}, |
||||
}, |
||||
} |
||||
]; |
||||
createWidget({ |
||||
type: "bi.left", |
||||
element: this, |
||||
vgap: 200, |
||||
hgap: 20, |
||||
items, |
||||
}); |
||||
} |
||||
} |
||||
@ -1,98 +0,0 @@
|
||||
import { shortcut, Widget, isNull } from "@/core"; |
||||
import { TreeView } from "@/case"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.part_tree"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
mounted() { |
||||
this.partTree.stroke({ |
||||
keyword: "1", |
||||
}); |
||||
} |
||||
|
||||
render() { |
||||
const self = this; |
||||
|
||||
return { |
||||
type: "bi.vtape", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
height: 50, |
||||
text: "先初始化一份数据，然后再异步获取数据的树", |
||||
}, |
||||
{ |
||||
type: "bi.part_tree", |
||||
ref(_ref) { |
||||
self.partTree = _ref; |
||||
}, |
||||
paras: { |
||||
selectedValues: { 1: {}, 2: { 1: {} } }, |
||||
}, |
||||
itemsCreator(op, callback) { |
||||
if (op.type === TreeView.REQ_TYPE_INIT_DATA) { |
||||
callback({ |
||||
items: [ |
||||
{ |
||||
id: "1", |
||||
text: 1, |
||||
isParent: true, |
||||
open: true, |
||||
}, |
||||
{ |
||||
id: "11", |
||||
pId: "1", |
||||
text: 11, |
||||
isParent: true, |
||||
open: true, |
||||
}, |
||||
{ |
||||
id: "111", |
||||
pId: "11", |
||||
text: 111, |
||||
isParent: true, |
||||
}, |
||||
{ |
||||
id: "2", |
||||
text: 2, |
||||
}, |
||||
{ |
||||
id: "3", |
||||
text: 3, |
||||
} |
||||
], |
||||
hasNext: isNull(op.id), |
||||
}); |
||||
|
||||
return; |
||||
} |
||||
callback({ |
||||
items: [ |
||||
{ |
||||
id: `${op.id || ""}1`, |
||||
pId: op.id, |
||||
text: 1, |
||||
isParent: true, |
||||
}, |
||||
{ |
||||
id: `${op.id || ""}2`, |
||||
pId: op.id, |
||||
text: 2, |
||||
}, |
||||
{ |
||||
id: `${op.id || ""}3`, |
||||
pId: op.id, |
||||
text: 3, |
||||
} |
||||
], |
||||
hasNext: isNull(op.id), |
||||
}); |
||||
}, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,119 +0,0 @@
|
||||
import { shortcut, Widget, isNull } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.sync_tree"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
mounted() { |
||||
this.syncTree1.stroke({ |
||||
keyword: "1", |
||||
}); |
||||
this.syncTree2.stroke({ |
||||
keyword: "1", |
||||
}); |
||||
} |
||||
|
||||
render() { |
||||
const self = this; |
||||
|
||||
return { |
||||
type: "bi.vtape", |
||||
rowSize: [0.5, 0.5], |
||||
items: [ |
||||
{ |
||||
type: "bi.vtape", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
height: 50, |
||||
text: "可以异步获取数据的树", |
||||
}, |
||||
{ |
||||
type: "bi.async_tree", |
||||
ref(_ref) { |
||||
self.syncTree1 = _ref; |
||||
}, |
||||
paras: { |
||||
selectedValues: { 1: {}, 2: { 1: {} } }, |
||||
}, |
||||
itemsCreator(op, callback) { |
||||
callback({ |
||||
items: [ |
||||
{ |
||||
id: `${op.id || ""}1`, |
||||
pId: op.id, |
||||
text: `${op.id || ""}1`, |
||||
isParent: true, |
||||
iconCls: "close-h-font", |
||||
}, |
||||
{ |
||||
id: `${op.id || ""}2`, |
||||
pId: op.id, |
||||
text: `${op.id || ""}2`, |
||||
iconCls: "search-font", |
||||
}, |
||||
{ |
||||
id: `${op.id || ""}3`, |
||||
pId: op.id, |
||||
text: `${op.id || ""}3`, |
||||
iconCls: "date-font", |
||||
} |
||||
], |
||||
hasNext: isNull(op.id), |
||||
}); |
||||
}, |
||||
} |
||||
], |
||||
}, |
||||
{ |
||||
type: "bi.vtape", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
height: 50, |
||||
text: "showIcon属性搭配节点iconCls,可以显示图标", |
||||
}, |
||||
{ |
||||
type: "bi.async_tree", |
||||
ref(_ref) { |
||||
self.syncTree2 = _ref; |
||||
}, |
||||
paras: { |
||||
selectedValues: { 1: {}, 2: { 1: {} } }, |
||||
}, |
||||
showIcon: true, |
||||
itemsCreator(op, callback) { |
||||
callback({ |
||||
items: [ |
||||
{ |
||||
id: `${op.id || ""}1`, |
||||
pId: op.id, |
||||
text: `${op.id || ""}1`, |
||||
isParent: true, |
||||
iconCls: "close-h-font", |
||||
}, |
||||
{ |
||||
id: `${op.id || ""}2`, |
||||
pId: op.id, |
||||
text: `${op.id || ""}2`, |
||||
iconCls: "search-font", |
||||
}, |
||||
{ |
||||
id: `${op.id || ""}3`, |
||||
pId: op.id, |
||||
text: `${op.id || ""}3`, |
||||
iconCls: "date-font", |
||||
} |
||||
], |
||||
hasNext: isNull(op.id), |
||||
}); |
||||
}, |
||||
} |
||||
], |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,57 +0,0 @@
|
||||
import { shortcut, Widget, createWidget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.tree_view"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
_createDefaultTree() { |
||||
const tree = createWidget({ |
||||
type: "bi.tree_view", |
||||
}); |
||||
tree.initTree([ |
||||
{ id: 1, pId: 0, text: "test1", open: true }, |
||||
{ id: 11, pId: 1, text: "test11" }, |
||||
{ id: 12, pId: 1, text: "test12" }, |
||||
{ id: 111, pId: 11, text: "test111" }, |
||||
{ id: 2, pId: 0, text: "test2", open: true }, |
||||
{ id: 21, pId: 2, text: "test21" }, |
||||
{ id: 22, pId: 2, text: "test22" } |
||||
]); |
||||
|
||||
return tree; |
||||
} |
||||
|
||||
render() { |
||||
const self = this; |
||||
createWidget({ |
||||
type: "bi.grid", |
||||
columns: 1, |
||||
rows: 1, |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
column: 0, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.vtape", |
||||
items: [ |
||||
{ |
||||
el: this._createDefaultTree(), |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
text: "tree.initTree([{\"id\":1, \"pId\":0, \"text\":\"test1\", open:true},{\"id\":11, \"pId\":1, \"text\":\"test11\"},{\"id\":12, \"pId\":1, \"text\":\"test12\"},{\"id\":111, \"pId\":11, \"text\":\"test111\"}])", |
||||
whiteSpace: "normal", |
||||
}, |
||||
height: 50, |
||||
} |
||||
], |
||||
}, |
||||
} |
||||
], |
||||
}); |
||||
} |
||||
} |
||||
@ -1,122 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
import { Msg } from "@/base"; |
||||
import { AllValueMultiTextValueCombo } from "@/component"; |
||||
|
||||
@shortcut() |
||||
export class SearchTextValueCombo extends Widget { |
||||
static xtype = "demo.search_text_value_combo"; |
||||
|
||||
props = { baseCls: "" }; |
||||
|
||||
render() { |
||||
let combo, searchCombo; |
||||
|
||||
return { |
||||
type: "bi.horizontal_auto", |
||||
items: [ |
||||
{ |
||||
type: "bi.search_text_value_combo", |
||||
ref() { |
||||
combo = this; |
||||
}, |
||||
warningTitle: "111", |
||||
text: "默认值", |
||||
value: 14, |
||||
width: 300, |
||||
items: [ |
||||
{ |
||||
text: "ABC-1", |
||||
iconCls: "date-font", |
||||
value: 1, |
||||
}, |
||||
{ |
||||
text: "BCD-2", |
||||
iconCls: "search-font", |
||||
value: 2, |
||||
}, |
||||
{ |
||||
text: "CDE-3", |
||||
iconCls: "pull-right-font", |
||||
value: 3, |
||||
}, |
||||
{ |
||||
text: "DEF-3", |
||||
iconCls: "pull-right-font", |
||||
value: 4, |
||||
}, |
||||
{ |
||||
text: "FEG-3", |
||||
iconCls: "pull-right-font", |
||||
value: 5, |
||||
}, |
||||
{ |
||||
text: "FGH-3", |
||||
iconCls: "pull-right-font", |
||||
value: 6, |
||||
}, |
||||
{ |
||||
text: "GHI-3", |
||||
iconCls: "pull-right-font", |
||||
value: 7, |
||||
}, |
||||
{ |
||||
text: "HIJ-3", |
||||
iconCls: "pull-right-font", |
||||
value: 8, |
||||
}, |
||||
{ |
||||
text: "IJK-3", |
||||
iconCls: "pull-right-font", |
||||
value: 9, |
||||
}, |
||||
{ |
||||
text: "JKL-3", |
||||
iconCls: "pull-right-font", |
||||
value: 10, |
||||
} |
||||
], |
||||
}, |
||||
{ |
||||
type: "bi.all_value_multi_text_value_combo", |
||||
items: Demo.CONSTANTS.ITEMS, |
||||
text: "提示文本", |
||||
width: 200, |
||||
value: { |
||||
type: 1, |
||||
value: ["1", "2", "柳州市城贸金属材料有限责任公司", "3"], |
||||
}, |
||||
ref() { |
||||
searchCombo = this; |
||||
}, |
||||
listeners: [ |
||||
{ |
||||
eventName: AllValueMultiTextValueCombo.EVENT_CONFIRM, |
||||
action() { |
||||
BI.Msg.toast(JSON.stringify(searchCombo.getValue())); |
||||
}, |
||||
} |
||||
], |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "setValue(3)", |
||||
width: 90, |
||||
height: 25, |
||||
handler() { |
||||
combo.setValue(11); |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "getValue()", |
||||
width: 90, |
||||
height: 25, |
||||
handler() { |
||||
BI.Msg.toast(JSON.stringify(searchCombo.getValue())); |
||||
}, |
||||
} |
||||
], |
||||
vgap: 20, |
||||
}; |
||||
} |
||||
} |
||||
@ -1,51 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
import { Msg } from "@/base"; |
||||
|
||||
@shortcut() |
||||
export class TextValueCheckCombo extends Widget { |
||||
static xtype = "demo.text_value_check_combo"; |
||||
|
||||
props = { baseCls: "" }; |
||||
|
||||
render() { |
||||
const self = this; |
||||
|
||||
return { |
||||
type: "bi.horizontal_auto", |
||||
items: [ |
||||
{ |
||||
type: "bi.text_value_check_combo", |
||||
ref () { |
||||
self.combo = this; |
||||
}, |
||||
text: "默认值", |
||||
// value: 1,
|
||||
width: 300, |
||||
items: [ |
||||
{ |
||||
text: "MVC-1", |
||||
value: 1, |
||||
}, |
||||
{ |
||||
text: "MVC-2", |
||||
value: 2, |
||||
}, |
||||
{ |
||||
text: "MVC-3", |
||||
value: 3, |
||||
} |
||||
], |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
width: 90, |
||||
height: 25, |
||||
handler () { |
||||
BI.Msg.alert("", JSON.stringify(self.combo.getValue())); |
||||
}, |
||||
} |
||||
], |
||||
vgap: 20, |
||||
}; |
||||
} |
||||
} |
||||
@ -1,15 +0,0 @@
|
||||
export * from "./combo"; |
||||
export * from "./editor"; |
||||
export * from "./item"; |
||||
export * from "./list"; |
||||
export * from "./pager"; |
||||
export * from "./pane"; |
||||
export * from "./tree"; |
||||
export * from "./triggers"; |
||||
|
||||
|
||||
export * from "./demo.calendar"; |
||||
export * from "./demo.click.effect"; |
||||
export * from "./demo.color_chooser"; |
||||
export * from "./demo.color_chooser_popup"; |
||||
export * from "./demo.segment"; |
||||
@ -1,27 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.lazy_loader"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
const self = this; |
||||
BI.createWidget({ |
||||
type: "bi.lazy_loader", |
||||
element: this, |
||||
el: { |
||||
layouts: [ |
||||
{ |
||||
type: "bi.left", |
||||
hgap: 5, |
||||
} |
||||
], |
||||
}, |
||||
items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { |
||||
type: "bi.button", |
||||
}), |
||||
}); |
||||
} |
||||
} |
||||
@ -1,28 +0,0 @@
|
||||
import { shortcut, Widget, createWidget, createItems, deepClone, Selection } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.select_list"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
const self = this; |
||||
createWidget({ |
||||
type: "bi.select_list", |
||||
toolbar: { |
||||
type: "bi.multi_select_bar", |
||||
iconWrapperWidth: 26, |
||||
}, |
||||
element: this, |
||||
el: { |
||||
el: { |
||||
chooseType: Selection.Multi, |
||||
}, |
||||
}, |
||||
items: createItems(deepClone(Demo.CONSTANTS.SIMPLE_ITEMS), { |
||||
type: "bi.multi_select_item", |
||||
}), |
||||
}); |
||||
} |
||||
} |
||||
@ -1,41 +0,0 @@
|
||||
import { shortcut, Widget, createItems, deepClone } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.list_pane"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
const self = this; |
||||
|
||||
return { |
||||
type: "bi.list_pane", |
||||
ref() { |
||||
self.pane = this; |
||||
}, |
||||
itemsCreator(op, callback) { |
||||
setTimeout(() => { |
||||
callback( |
||||
createItems(deepClone(Demo.CONSTANTS.ITEMS), { |
||||
type: "bi.multi_select_item", |
||||
height: 25, |
||||
}) |
||||
); |
||||
}, 2000); |
||||
}, |
||||
el: { |
||||
type: "bi.button_group", |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
} |
||||
], |
||||
}, |
||||
}; |
||||
} |
||||
|
||||
mounted() { |
||||
this.pane.populate(); |
||||
} |
||||
} |
||||
@ -1,46 +0,0 @@
|
||||
import { shortcut, Widget, createItems, deepClone } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.multi_popup_view"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
const self = this; |
||||
|
||||
return { |
||||
type: "bi.absolute", |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.combo", |
||||
width: 200, |
||||
height: 30, |
||||
el: { |
||||
type: "bi.text_button", |
||||
text: "点击", |
||||
cls: "bi-border", |
||||
height: 30, |
||||
}, |
||||
popup: { |
||||
type: "bi.multi_popup_view", |
||||
el: { |
||||
type: "bi.button_group", |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
} |
||||
], |
||||
items: createItems(deepClone(Demo.CONSTANTS.ITEMS), { |
||||
type: "bi.multi_select_item", |
||||
height: 25, |
||||
}), |
||||
}, |
||||
}, |
||||
}, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,35 +0,0 @@
|
||||
import { shortcut, Widget, createItems, deepClone } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.panel"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
const self = this; |
||||
|
||||
return { |
||||
type: "bi.panel", |
||||
title: "title", |
||||
titleButtons: [ |
||||
{ |
||||
type: "bi.button", |
||||
text: "操作", |
||||
} |
||||
], |
||||
el: { |
||||
type: "bi.button_group", |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
} |
||||
], |
||||
items: createItems(deepClone(Demo.CONSTANTS.ITEMS), { |
||||
type: "bi.multi_select_item", |
||||
height: 25, |
||||
}), |
||||
}, |
||||
}; |
||||
} |
||||
} |
||||
@ -1,46 +0,0 @@
|
||||
import { shortcut, Widget, createItems, deepClone } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.popup_panel"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
const self = this; |
||||
|
||||
return { |
||||
type: "bi.absolute", |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.combo", |
||||
width: 200, |
||||
height: 30, |
||||
el: { |
||||
type: "bi.text_button", |
||||
text: "点击", |
||||
cls: "bi-border", |
||||
height: 30, |
||||
}, |
||||
popup: { |
||||
type: "bi.popup_panel", |
||||
el: { |
||||
type: "bi.button_group", |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
} |
||||
], |
||||
items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { |
||||
type: "bi.multi_select_item", |
||||
height: 25, |
||||
}), |
||||
}, |
||||
}, |
||||
}, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,111 +0,0 @@
|
||||
import { shortcut, Widget, createWidget } from "@/core"; |
||||
import { Msg } from "@/base"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.level_tree"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
const tree = BI.createWidget({ |
||||
type: "bi.level_tree", |
||||
chooseType: 0, |
||||
items: [ |
||||
{ |
||||
id: 1, |
||||
text: "第一项", |
||||
value: 1, |
||||
isParent: true, |
||||
}, |
||||
{ |
||||
id: 2, |
||||
text: "第二项", |
||||
value: 2, |
||||
isParent: true, |
||||
}, |
||||
{ |
||||
id: 3, |
||||
text: "第三项", |
||||
value: 1, |
||||
isParent: true, |
||||
open: true, |
||||
}, |
||||
{ |
||||
id: 4, |
||||
text: "第四项", |
||||
value: 1, |
||||
}, |
||||
{ |
||||
id: 11, |
||||
pId: 1, |
||||
text: "子项1", |
||||
value: 11, |
||||
}, |
||||
{ |
||||
id: 12, |
||||
pId: 1, |
||||
text: "子项2", |
||||
value: 12, |
||||
}, |
||||
{ |
||||
id: 13, |
||||
pId: 1, |
||||
text: "子项3", |
||||
value: 13, |
||||
}, |
||||
{ |
||||
id: 111, |
||||
pId: 11, |
||||
text: "子项1-1", |
||||
value: 111, |
||||
}, |
||||
{ |
||||
id: 21, |
||||
pId: 2, |
||||
text: "子项1", |
||||
value: 21, |
||||
}, |
||||
{ |
||||
id: 31, |
||||
pId: 3, |
||||
text: "子项1", |
||||
value: 31, |
||||
}, |
||||
{ |
||||
id: 32, |
||||
pId: 3, |
||||
text: "子项2", |
||||
value: 32, |
||||
}, |
||||
{ |
||||
id: 33, |
||||
pId: 3, |
||||
text: "子项3", |
||||
value: 33, |
||||
} |
||||
], |
||||
}); |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.vtape", |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: tree, |
||||
}, |
||||
{ |
||||
height: 30, |
||||
el: { |
||||
type: "bi.button", |
||||
height: 30, |
||||
text: "getValue", |
||||
handler() { |
||||
BI.Msg.alert("", tree.getValue()); |
||||
}, |
||||
}, |
||||
} |
||||
], |
||||
}); |
||||
} |
||||
} |
||||
@ -1,147 +0,0 @@
|
||||
import { shortcut, Widget, createWidget } from "@/core"; |
||||
import { Msg } from "@/base"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.simple_tree"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
// value值一定要是字符串
|
||||
const tree = BI.createWidget({ |
||||
type: "bi.simple_tree", |
||||
items: [ |
||||
{ |
||||
id: 1, |
||||
text: "第一项", |
||||
value: "1", |
||||
}, |
||||
{ |
||||
id: 2, |
||||
text: "第二项", |
||||
value: "2", |
||||
}, |
||||
{ |
||||
id: 3, |
||||
text: "第三项", |
||||
value: "3", |
||||
open: true, |
||||
}, |
||||
{ |
||||
id: 11, |
||||
pId: 1, |
||||
text: "子项1", |
||||
value: "11", |
||||
}, |
||||
{ |
||||
id: 12, |
||||
pId: 1, |
||||
text: "子项2", |
||||
value: "12", |
||||
}, |
||||
{ |
||||
id: 13, |
||||
pId: 1, |
||||
text: "子项3", |
||||
value: "13", |
||||
}, |
||||
{ |
||||
id: 31, |
||||
pId: 3, |
||||
text: "子项1", |
||||
value: "31", |
||||
}, |
||||
{ |
||||
id: 32, |
||||
pId: 3, |
||||
text: "子项2", |
||||
value: "32", |
||||
}, |
||||
{ |
||||
id: 33, |
||||
pId: 3, |
||||
text: "子项3", |
||||
value: "33", |
||||
} |
||||
], |
||||
value: ["31", "32", "33"], |
||||
}); |
||||
|
||||
// tree.populate([{
|
||||
// id: 1,
|
||||
// text: "第一项",
|
||||
// value: "1"
|
||||
// }, {
|
||||
// id: 2,
|
||||
// text: "第二项",
|
||||
// value: "2"
|
||||
// }, {
|
||||
// id: 3,
|
||||
// text: "第三项",
|
||||
// value: "3",
|
||||
// open: true
|
||||
// }, {
|
||||
// id: 11,
|
||||
// pId: 1,
|
||||
// text: "子项1",
|
||||
// value: "11"
|
||||
// }, {
|
||||
// id: 12,
|
||||
// pId: 1,
|
||||
// text: "子项2",
|
||||
// value: "12"
|
||||
// }, {
|
||||
// id: 13,
|
||||
// pId: 1,
|
||||
// text: "子项3",
|
||||
// value: "13"
|
||||
// }, {
|
||||
// id: 31,
|
||||
// pId: 3,
|
||||
// text: "子项1",
|
||||
// value: "31"
|
||||
// }, {
|
||||
// id: 32,
|
||||
// pId: 3,
|
||||
// text: "子项2",
|
||||
// value: "32"
|
||||
// }, {
|
||||
// id: 33,
|
||||
// pId: 3,
|
||||
// text: "子项3",
|
||||
// value: "33"
|
||||
// }], "z");
|
||||
BI.createWidget({ |
||||
type: "bi.vtape", |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: tree, |
||||
}, |
||||
{ |
||||
height: 30, |
||||
el: { |
||||
type: "bi.button", |
||||
height: 30, |
||||
text: "setValue(['31', '32', '33'])", |
||||
handler() { |
||||
tree.setValue(["31", "32", "33"]); |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
height: 30, |
||||
el: { |
||||
type: "bi.button", |
||||
height: 30, |
||||
text: "getValue", |
||||
handler() { |
||||
BI.Msg.alert("", JSON.stringify(tree.getValue())); |
||||
}, |
||||
}, |
||||
} |
||||
], |
||||
}); |
||||
} |
||||
} |
||||
@ -1,16 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Center extends Widget { |
||||
static xtype = "demo.center"; |
||||
|
||||
props = { baseCls: "demo-center" }; |
||||
|
||||
render() { |
||||
const self = this; |
||||
|
||||
return { |
||||
type: "bi.router_view", |
||||
}; |
||||
} |
||||
} |
||||
@ -1,111 +0,0 @@
|
||||
import { shortcut, Widget, createWidget, isEmpty, isNotEmptyArray } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Form extends Widget { |
||||
static xtype = "demo.form"; |
||||
|
||||
props = { baseCls: "demo-form" }; |
||||
|
||||
render() { |
||||
const widget = BI.createWidget({ |
||||
type: "bi.custom_form", |
||||
width: 300, |
||||
labelWidth: 100, |
||||
items: [ |
||||
{ |
||||
validate(v) { |
||||
return v !== "a" && v !== ""; |
||||
}, |
||||
tip(v) { |
||||
if (BI.isEmpty(v)) { |
||||
return "不能为空"; |
||||
} |
||||
|
||||
return "不合法格式"; |
||||
}, |
||||
label: "E-mail", |
||||
el: { |
||||
type: "bi.text_editor", |
||||
watermark: "输入a报错", |
||||
allowBlank: true, |
||||
}, |
||||
}, |
||||
{ |
||||
validate(v) { |
||||
return BI.isNotEmptyArray(v); |
||||
}, |
||||
tip() { |
||||
return "不能为空"; |
||||
}, |
||||
label: "性别", |
||||
el: { |
||||
type: "bi.text_value_combo", |
||||
text: "请选择", |
||||
items: [ |
||||
{ |
||||
text: "男", |
||||
value: 1, |
||||
}, |
||||
{ |
||||
text: "女", |
||||
value: 2, |
||||
} |
||||
], |
||||
}, |
||||
}, |
||||
{ |
||||
validate(v) { |
||||
return v !== ""; |
||||
}, |
||||
tip() { |
||||
return "不能为空"; |
||||
}, |
||||
label: "姓名", |
||||
el: { |
||||
type: "bi.text_editor", |
||||
watermark: "输入姓名", |
||||
allowBlank: true, |
||||
}, |
||||
}, |
||||
{ |
||||
validate(v) { |
||||
return v !== ""; |
||||
}, |
||||
tip() { |
||||
return "不能为空"; |
||||
}, |
||||
label: "姓名", |
||||
el: { |
||||
type: "bi.textarea_editor", |
||||
cls: "bi-border", |
||||
watermark: "输入简介", |
||||
allowBlank: true, |
||||
height: 200, |
||||
}, |
||||
} |
||||
], |
||||
layout: { |
||||
type: "bi.vertical", |
||||
vgap: 30, |
||||
}, |
||||
}); |
||||
|
||||
return { |
||||
type: "bi.vertical", |
||||
hgap: 200, |
||||
vgap: 10, |
||||
items: [ |
||||
widget, |
||||
{ |
||||
type: "bi.button", |
||||
text: "提交", |
||||
handler() { |
||||
widget.validate(); |
||||
|
||||
console.log(widget.getValue()); |
||||
}, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,27 +0,0 @@
|
||||
import { shortcut, Widget, createWidget, deepClone } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class TreeValueChooser extends Widget { |
||||
static xtype = "demo.tree_value_chooser_combo"; |
||||
|
||||
props = { baseCls: "demo-tree-value-chooser-combo" }; |
||||
|
||||
render() { |
||||
const widget = createWidget({ |
||||
type: "bi.tree_value_chooser_combo", |
||||
width: 300, |
||||
// items: deepClone(Demo.CONSTANTS.TREEITEMS),
|
||||
itemsCreator(op, callback) { |
||||
callback(deepClone(Demo.CONSTANTS.TREEITEMS)); |
||||
}, |
||||
defaultText: "请选择", |
||||
}); |
||||
|
||||
return { |
||||
type: "bi.vertical", |
||||
hgap: 200, |
||||
vgap: 10, |
||||
items: [widget], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,18 +0,0 @@
|
||||
import { shortcut, Widget, deepClone } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class TreeValueChooser extends Widget { |
||||
static xtype = "demo.tree_value_chooser_pane"; |
||||
|
||||
props = { baseCls: "demo-tree-value-chooser" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.tree_value_chooser_pane", |
||||
items: deepClone(Demo.CONSTANTS.TREEITEMS), |
||||
// itemsCreator: function (op, callback) {
|
||||
// callback(tree);
|
||||
// }
|
||||
}; |
||||
} |
||||
} |
||||
@ -1,24 +0,0 @@
|
||||
import { shortcut, Widget, createWidget, deepClone } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class ValueChooserCombo extends Widget { |
||||
static xtype = "demo.value_chooser_combo"; |
||||
|
||||
props = { baseCls: "demo-value-chooser-combo" }; |
||||
|
||||
render() { |
||||
const widget = createWidget({ |
||||
type: "bi.value_chooser_combo", |
||||
itemsCreator (op, callback) { |
||||
callback(deepClone(Demo.CONSTANTS.ITEMS)); |
||||
}, |
||||
}); |
||||
|
||||
return { |
||||
type: "bi.vertical", |
||||
hgap: 200, |
||||
vgap: 10, |
||||
items: [widget], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,18 +0,0 @@
|
||||
import { shortcut, Widget, deepClone } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class ValueChooserPane extends Widget { |
||||
static xtype = "demo.value_chooser_pane"; |
||||
|
||||
props = { baseCls: "demo-value-chooser-pane" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.value_chooser_pane", |
||||
items: deepClone(Demo.CONSTANTS.ITEMS), |
||||
// itemsCreator: function (op, callback) {
|
||||
// callback(deepClone(Demo.CONSTANTS.ITEMS));
|
||||
// }
|
||||
}; |
||||
} |
||||
} |
||||
@ -1,5 +0,0 @@
|
||||
export * from "./demo.form"; |
||||
export * from "./demo.treevaluechoosercombo"; |
||||
export * from "./demo.treevaluechooserpane"; |
||||
export * from "./demo.valuechoosercombo"; |
||||
export * from "./demo.valuechooserpane"; |
||||
@ -1,89 +0,0 @@
|
||||
Demo.BASE_CONFIG = [{ |
||||
id: 2, |
||||
text: "基础控件", |
||||
open: false |
||||
}, { |
||||
pId: 2, |
||||
text: "bi.label", |
||||
value: "demo.label" |
||||
},{ |
||||
pId: 2, |
||||
text: "bi.label_scene", |
||||
value: "demo.label_scene" |
||||
}, { |
||||
pId: 2, |
||||
text: "bi.icon_label", |
||||
value: "demo.icon_label" |
||||
}, { |
||||
pId: 2, |
||||
text: "bi.html", |
||||
value: "demo.html" |
||||
}, { |
||||
pId: 2, |
||||
text: "title提示", |
||||
value: "demo.title" |
||||
}, { |
||||
pId: 2, |
||||
text: "气泡提示", |
||||
value: "demo.bubble" |
||||
}, { |
||||
pId: 2, |
||||
text: "toast提示", |
||||
value: "demo.toast" |
||||
}, { |
||||
pId: 2, |
||||
id: 201, |
||||
text: "button" |
||||
}, { |
||||
pId: 201, |
||||
text: "bi.button", |
||||
value: "demo.button" |
||||
}, { |
||||
pId: 201, |
||||
text: "bi.text_button", |
||||
value: "demo.text_button" |
||||
}, { |
||||
pId: 201, |
||||
text: "bi.icon_button", |
||||
value: "demo.icon_button" |
||||
}, { |
||||
pId: 201, |
||||
text: "bi.image_button", |
||||
value: "demo.image_button" |
||||
}, { |
||||
pId: 2, |
||||
id: 202, |
||||
text: "editor" |
||||
}, { |
||||
pId: 202, |
||||
text: "bi.editor", |
||||
value: "demo.editor" |
||||
}, { |
||||
pId: 202, |
||||
text: "bi.multifile_editor", |
||||
value: "demo.multifile_editor" |
||||
}, { |
||||
pId: 202, |
||||
text: "bi.textarea_editor", |
||||
value: "demo.textarea_editor" |
||||
}, { |
||||
pId: 2, |
||||
id: 203, |
||||
text: "tree" |
||||
}, { |
||||
pId: 203, |
||||
text: "bi.tree_view", |
||||
value: "demo.tree_view" |
||||
}, { |
||||
pId: 203, |
||||
text: "bi.async_tree", |
||||
value: "demo.sync_tree" |
||||
}, { |
||||
pId: 203, |
||||
text: "bi.part_tree", |
||||
value: "demo.part_tree" |
||||
}, { |
||||
pId: 2, |
||||
text: "bi.pager", |
||||
value: "demo.pager" |
||||
}]; |
||||
@ -1,185 +0,0 @@
|
||||
Demo.CASE_CONFIG = [{ |
||||
id: 3, |
||||
text: "实例控件", |
||||
open: false |
||||
}, { |
||||
pId: 3, |
||||
id: 300, |
||||
text: "按钮" |
||||
}, { |
||||
pId: 300, |
||||
text: "bi.multi_select_item", |
||||
value: "demo.multi_select_item" |
||||
}, { |
||||
pId: 300, |
||||
text: "bi.single_select_item", |
||||
value: "demo.single_select_item" |
||||
}, { |
||||
pId: 300, |
||||
text: "bi.single_select_radio_item", |
||||
value: "demo.single_select_radio_item" |
||||
}, { |
||||
pId: 3, |
||||
id: 301, |
||||
text: "editors" |
||||
}, { |
||||
pId: 301, |
||||
text: "bi.shelter_editor", |
||||
value: "demo.shelter_editor" |
||||
}, { |
||||
pId: 301, |
||||
text: "bi.sign_editor", |
||||
value: "demo.sign_editor" |
||||
}, { |
||||
pId: 301, |
||||
text: "bi.state_editor", |
||||
value: "demo.state_editor" |
||||
}, { |
||||
pId: 301, |
||||
text: "bi.simple_state_editor", |
||||
value: "demo.simple_state_editor" |
||||
}, { |
||||
pId: 301, |
||||
text: "bi.clear_editor", |
||||
value: "demo.clear_editor" |
||||
}, { |
||||
pId: 3, |
||||
id: 302, |
||||
text: "列表" |
||||
}, { |
||||
pId: 302, |
||||
text: "bi.select_list", |
||||
value: "demo.select_list" |
||||
}, { |
||||
pId: 302, |
||||
text: "bi.lazy_loader", |
||||
value: "demo.lazy_loader" |
||||
}, { |
||||
pId: 3, |
||||
id: 303, |
||||
text: "面板" |
||||
}, { |
||||
pId: 303, |
||||
text: "bi.list_pane", |
||||
value: "demo.list_pane" |
||||
}, { |
||||
pId: 303, |
||||
text: "bi.panel", |
||||
value: "demo.panel" |
||||
}, { |
||||
pId: 3, |
||||
id: 304, |
||||
text: "popup弹出层" |
||||
}, { |
||||
pId: 304, |
||||
text: "bi.multi_popup_view", |
||||
value: "demo.multi_popup_view" |
||||
}, { |
||||
pId: 304, |
||||
text: "bi.popup_panel", |
||||
value: "demo.popup_panel" |
||||
}, { |
||||
pId: 3, |
||||
id: 305, |
||||
text: "触发器trigger" |
||||
}, { |
||||
pId: 305, |
||||
text: "bi.editor_trigger", |
||||
value: "demo.editor_trigger" |
||||
}, { |
||||
pId: 305, |
||||
text: "bi.icon_trigger", |
||||
value: "demo.icon_trigger" |
||||
}, { |
||||
pId: 305, |
||||
text: "bi.text_trigger", |
||||
value: "demo.text_trigger" |
||||
}, { |
||||
pId: 305, |
||||
text: "bi.select_text_trigger", |
||||
value: "demo.select_text_trigger" |
||||
}, { |
||||
pId: 3, |
||||
id: 306, |
||||
text: "combo" |
||||
}, { |
||||
pId: 306, |
||||
text: "bi.bubble_combo", |
||||
value: "demo.bubble_combo" |
||||
}, { |
||||
pId: 306, |
||||
text: "bi.icon_combo", |
||||
value: "demo.icon_combo" |
||||
}, { |
||||
pId: 306, |
||||
text: "bi.text_value_combo", |
||||
value: "demo.text_value_combo" |
||||
}, { |
||||
pId: 306, |
||||
text: "bi.search_text_value_combo", |
||||
value: "demo.search_text_value_combo" |
||||
}, { |
||||
pId: 306, |
||||
text: "bi.icon_text_value_combo", |
||||
value: "demo.icon_text_value_combo" |
||||
}, { |
||||
pId: 306, |
||||
text: "bi.text_value_check_combo", |
||||
value: "demo.text_value_check_combo" |
||||
}, { |
||||
pId: 306, |
||||
text: "bi.editor_icon_check_combo", |
||||
value: "demo.editor_icon_check_combo" |
||||
}, { |
||||
pId: 306, |
||||
text: "bi.text_value_down_list_combo", |
||||
value: "demo.text_value_down_list_combo" |
||||
}, { |
||||
pId: 3, |
||||
id: 307, |
||||
text: "tree" |
||||
}, { |
||||
pId: 307, |
||||
text: "bi.display_tree", |
||||
value: "demo.display_tree" |
||||
}, { |
||||
pId: 307, |
||||
text: "bi.simple_tree", |
||||
value: "demo.simple_tree" |
||||
}, { |
||||
pId: 307, |
||||
text: "bi.level_tree", |
||||
value: "demo.level_tree" |
||||
}, { |
||||
pId: 3, |
||||
id: 309, |
||||
text: "pager" |
||||
}, { |
||||
pId: 309, |
||||
text: "bi.all_count_pager", |
||||
value: "demo.all_count_pager" |
||||
}, { |
||||
pId: 309, |
||||
text: "bi.direction_pager", |
||||
value: "demo.direction_pager" |
||||
}, { |
||||
pId: 3, |
||||
text: "bi.calendar", |
||||
value: "demo.calendar" |
||||
}, { |
||||
pId: 3, |
||||
text: "bi.color_chooser", |
||||
value: "demo.color_chooser" |
||||
}, { |
||||
pId: 3, |
||||
text: "bi.color_chooser_popup", |
||||
value: "demo.color_chooser_popup" |
||||
}, { |
||||
pId: 3, |
||||
text: "bi.segment", |
||||
value: "demo.segment" |
||||
}, { |
||||
pId: 3, |
||||
text: "点击项样式查看", |
||||
value: "demo.click_item_effect" |
||||
}]; |
||||
@ -1,8 +0,0 @@
|
||||
Demo.CATEGORY_CONFIG = [{ |
||||
id: 100000, |
||||
text: "专题" |
||||
}, { |
||||
pId: 100000, |
||||
text: "可以排序的树", |
||||
value: "demo.sort_tree" |
||||
}]; |
||||
@ -1,27 +0,0 @@
|
||||
/** |
||||
* Created by User on 2017/3/22. |
||||
*/ |
||||
Demo.COMPONENT_CONFIG = [{ |
||||
id: 5, |
||||
text: "部件+服务" |
||||
}, { |
||||
pId: 5, |
||||
text: "bi.value_chooser_combo", |
||||
value: "demo.value_chooser_combo" |
||||
}, { |
||||
pId: 5, |
||||
text: "bi.value_chooser_pane", |
||||
value: "demo.value_chooser_pane" |
||||
}, { |
||||
pId: 5, |
||||
text: "bi.tree_value_chooser_combo", |
||||
value: "demo.tree_value_chooser_combo" |
||||
}, { |
||||
pId: 5, |
||||
text: "bi.tree_value_chooser_pane", |
||||
value: "demo.tree_value_chooser_pane" |
||||
}, { |
||||
pId: 5, |
||||
text: "demo.form", |
||||
value: "demo.form" |
||||
}]; |
||||
@ -1,203 +0,0 @@
|
||||
Demo.CORE_CONFIG = [{ |
||||
id: 1, |
||||
text: "核心控件" |
||||
}, { |
||||
id: 101, |
||||
pId: 1, |
||||
text: "布局" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.absolute", |
||||
value: "demo.absolute" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.center_adapt", |
||||
value: "demo.center_adapt" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.vertical_adapt", |
||||
value: "demo.vertical_adapt" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.horizontal_adapt", |
||||
value: "demo.horizontal_adapt" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.horizontal_auto", |
||||
value: "demo.horizontal_auto" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.horizontal_float", |
||||
value: "demo.horizontal_float" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.left_right_vertical_adapt", |
||||
value: "demo.left_right_vertical_adapt" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.center", |
||||
value: "demo.center_layout" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.float_center", |
||||
value: "demo.float_center" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.vertical", |
||||
value: "demo.vertical" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.horizontal", |
||||
value: "demo.horizontal" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.border", |
||||
value: "demo.border" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.left, bi.right", |
||||
value: "demo.flow" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.htape", |
||||
value: "demo.htape" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.vtape", |
||||
value: "demo.vtape" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.grid", |
||||
value: "demo.grid" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.table", |
||||
value: "demo.table_layout" |
||||
}, { |
||||
pId: 101, |
||||
text: "bi.td", |
||||
value: "demo.td" |
||||
}, { |
||||
pId: 101, |
||||
text: "..." |
||||
}, { |
||||
pId: 1, |
||||
id: 102, |
||||
text: "抽象控件" |
||||
}, { |
||||
pId: 102, |
||||
text: "bi.button_group", |
||||
value: "demo.button_group" |
||||
}, { |
||||
pId: 102, |
||||
text: "bi.button_tree", |
||||
value: "demo.button_tree" |
||||
}, { |
||||
pId: 102, |
||||
text: "bi.virtual_group", |
||||
value: "demo.virtual_group" |
||||
}, { |
||||
pId: 102, |
||||
text: "bi.custom_tree", |
||||
value: "demo.custom_tree" |
||||
}, { |
||||
pId: 102, |
||||
text: "bi.grid_view", |
||||
value: "demo.grid_view" |
||||
}, { |
||||
pId: 102, |
||||
text: "bi.collection_view", |
||||
value: "demo.collection_view" |
||||
}, { |
||||
pId: 102, |
||||
text: "bi.list_view", |
||||
value: "demo.list_view" |
||||
}, { |
||||
pId: 102, |
||||
text: "bi.virtual_list", |
||||
value: "demo.virtual_list" |
||||
}, { |
||||
pId: 102, |
||||
id: 10201, |
||||
text: "组合控件" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.combo", |
||||
value: "demo.combo" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.combo(各种位置)", |
||||
value: "demo.combo2" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.combo(內部位置)", |
||||
value: "demo.combo3" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.expander", |
||||
value: "demo.expander" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.combo_group", |
||||
value: "demo.combo_group" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.loader", |
||||
value: "demo.loader" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.navigation", |
||||
value: "demo.navigation" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.searcher", |
||||
value: "demo.searcher" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.switcher", |
||||
value: "demo.switcher" |
||||
}, { |
||||
pId: 10201, |
||||
text: "bi.tab", |
||||
value: "demo.tab" |
||||
}, { |
||||
pId: 102, |
||||
id: 10202, |
||||
text: "弹出层" |
||||
}, { |
||||
pId: 10202, |
||||
text: "layer", |
||||
value: "demo.layer" |
||||
}, { |
||||
pId: 10202, |
||||
text: "bi.popover", |
||||
value: "demo.popover" |
||||
}, { |
||||
pId: 10202, |
||||
text: "bi.popup_view", |
||||
value: "demo.popup_view" |
||||
}, { |
||||
pId: 10202, |
||||
text: "bi.searcher_view", |
||||
value: "demo.searcher_view" |
||||
}, { |
||||
pId: 1, |
||||
text: "Widget(继承)", |
||||
value: "demo.widget" |
||||
}, { |
||||
pId: 1, |
||||
text: "Single(继承)", |
||||
value: "demo.single" |
||||
}, { |
||||
pId: 1, |
||||
text: "BasicButton(继承)", |
||||
value: "demo.basic_button" |
||||
}, { |
||||
pId: 1, |
||||
text: "NodeButton(继承)", |
||||
value: "demo.node_button" |
||||
}, { |
||||
pId: 1, |
||||
text: "Pane(继承)", |
||||
value: "demo.pane" |
||||
}]; |
||||
@ -1,34 +0,0 @@
|
||||
import { shortcut } from "@/core"; |
||||
import { Pane as BIPane } from "@/base"; |
||||
|
||||
@shortcut() |
||||
export class Pane extends BIPane { |
||||
static xtype = "demo.pane"; |
||||
|
||||
props = {}; |
||||
|
||||
mounted() { |
||||
console.log("loading pane mounted"); |
||||
} |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.center_adapt", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
text: "this is pane center", |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
|
||||
beforeRender(callback) { |
||||
const self = this; |
||||
this.loading(); |
||||
setTimeout(() => { |
||||
self.loaded(); |
||||
callback(); |
||||
}, 3000); |
||||
} |
||||
} |
||||
@ -1,54 +0,0 @@
|
||||
Demo.FIX_CONFIG = [{ |
||||
id: 7, |
||||
text: "数据流框架fix-2.0" |
||||
}, { |
||||
id: 71, |
||||
pId: 7, |
||||
text: "定义响应式数据", |
||||
value: "demo.fix_define" |
||||
}, { |
||||
id: 72, |
||||
pId: 7, |
||||
text: "state属性", |
||||
value: "demo.fix_state" |
||||
}, { |
||||
id: 73, |
||||
pId: 7, |
||||
text: "计算属性", |
||||
value: "demo.fix_computed" |
||||
}, { |
||||
id: 74, |
||||
pId: 7, |
||||
text: "store", |
||||
value: "demo.fix_store" |
||||
}, { |
||||
id: 75, |
||||
pId: 7, |
||||
text: "watcher且或表达式", |
||||
value: "demo.fix_watcher" |
||||
}, { |
||||
id: 76, |
||||
pId: 7, |
||||
text: "watcher星号表达式", |
||||
value: "demo.fix_global_watcher" |
||||
}, { |
||||
id: 77, |
||||
pId: 7, |
||||
text: "context", |
||||
value: "demo.fix_context" |
||||
}, { |
||||
id: 78, |
||||
pId: 7, |
||||
text: "一个混合的例子", |
||||
value: "demo.fix" |
||||
}, { |
||||
id: 79, |
||||
pId: 7, |
||||
text: "场景", |
||||
value: "demo.fix_scene" |
||||
}, { |
||||
id: 80, |
||||
pId: 7, |
||||
text: "inject", |
||||
value: "demo.fix_inject" |
||||
}]; |
||||
@ -1,8 +0,0 @@
|
||||
export * from "./base"; |
||||
export * from "./case"; |
||||
export * from "./category"; |
||||
export * from "./component"; |
||||
export * from "./core"; |
||||
export * from "./demo.pane"; |
||||
export * from "./fix"; |
||||
export * from "./widget"; |
||||
@ -1,205 +0,0 @@
|
||||
Demo.WIDGET_CONFIG = [{ |
||||
id: 4, |
||||
text: "详细控件", |
||||
open: true |
||||
}, { |
||||
pId: 4, |
||||
id: 401, |
||||
text: "各种小控件" |
||||
}, { |
||||
pId: 401, |
||||
text: "各种通用按钮", |
||||
value: "demo.buttons" |
||||
}, { |
||||
pId: 401, |
||||
text: "各种提示性信息", |
||||
value: "demo.tips" |
||||
}, { |
||||
pId: 401, |
||||
text: "各种items", |
||||
value: "demo.items" |
||||
}, { |
||||
pId: 401, |
||||
text: "各种节点node", |
||||
value: "demo.nodes" |
||||
}, { |
||||
pId: 401, |
||||
text: "各种segment", |
||||
value: "demo.segments" |
||||
}, { |
||||
pId: 4, |
||||
id: 402, |
||||
text: "文本框控件" |
||||
}, { |
||||
pId: 402, |
||||
text: "bi.text_editor", |
||||
value: "demo.text_editor" |
||||
}, { |
||||
pId: 402, |
||||
text: "bi.search_editor", |
||||
value: "demo.search_editor" |
||||
}, { |
||||
pId: 402, |
||||
text: "bi.number_editor", |
||||
value: "demo.number_editor" |
||||
}, { |
||||
pId: 4, |
||||
id: 403, |
||||
text: "tree" |
||||
}, { |
||||
pId: 403, |
||||
text: "bi.single_level_tree", |
||||
value: "demo.single_level_tree" |
||||
}, { |
||||
pId: 403, |
||||
text: "bi.select_level_tree", |
||||
value: "demo.select_level_tree" |
||||
}, { |
||||
pId: 403, |
||||
text: "bi.multilayer_single_level_tree", |
||||
value: "demo.multilayer_single_level_tree" |
||||
}, { |
||||
pId: 403, |
||||
text: "bi.multilayer_select_level_tree", |
||||
value: "demo.multilayer_select_level_tree" |
||||
}, { |
||||
pId: 4, |
||||
id: 405, |
||||
text: "下拉列表" |
||||
}, { |
||||
pId: 405, |
||||
text: "bi.down_list_combo", |
||||
value: "demo.down_list" |
||||
}, { |
||||
pId: 4, |
||||
id: 421, |
||||
text: "单选下拉框" |
||||
}, { |
||||
pId: 421, |
||||
text: "bi.single_select_combo", |
||||
value: "demo.single_select_combo" |
||||
}, { |
||||
pId: 4, |
||||
id: 406, |
||||
text: "复选下拉框" |
||||
}, { |
||||
pId: 406, |
||||
text: "bi.multi_select_combo", |
||||
value: "demo.multi_select_combo" |
||||
}, { |
||||
pId: 406, |
||||
text: "bi.multi_select_list", |
||||
value: "demo.multi_select_list" |
||||
}, { |
||||
pId: 4, |
||||
id: 407, |
||||
text: "简单下拉树" |
||||
}, { |
||||
pId: 407, |
||||
text: "bi.single_tree_combo", |
||||
value: "demo.single_tree_combo" |
||||
}, { |
||||
pId: 4, |
||||
id: 408, |
||||
text: "多层级下拉树" |
||||
}, { |
||||
pId: 408, |
||||
text: "bi.multilayer_single_tree_combo", |
||||
value: "demo.multilayer_single_tree_combo" |
||||
}, { |
||||
pId: 4, |
||||
id: 409, |
||||
text: "可选下拉树" |
||||
}, { |
||||
pId: 409, |
||||
text: "bi.select_tree_combo", |
||||
value: "demo.select_tree_combo" |
||||
}, { |
||||
pId: 4, |
||||
id: 410, |
||||
text: "多层级可选下拉树" |
||||
}, { |
||||
pId: 410, |
||||
text: "bi.multilayer_select_tree_combo", |
||||
value: "demo.multilayer_select_tree_combo" |
||||
}, { |
||||
pId: 4, |
||||
id: 411, |
||||
text: "复选下拉树" |
||||
}, { |
||||
pId: 411, |
||||
text: "bi.multi_tree_combo", |
||||
value: "demo.multi_tree_combo" |
||||
}, { |
||||
pId: 411, |
||||
text: "bi.multi_select_tree", |
||||
value: "demo.multi_select_tree" |
||||
}, { |
||||
pId: 4, |
||||
id: 412, |
||||
text: "日期相关控件" |
||||
}, { |
||||
pId: 412, |
||||
text: "bi.year_combo", |
||||
value: "demo.year" |
||||
}, { |
||||
pId: 412, |
||||
text: "bi.year_month_combo", |
||||
value: "demo.year_month_combo" |
||||
}, { |
||||
pId: 412, |
||||
text: "bi.year_quarter_combo", |
||||
value: "demo.year_quarter_combo" |
||||
}, { |
||||
pId: 412, |
||||
text: "bi.date_pane", |
||||
value: "demo.date_pane" |
||||
}, { |
||||
pId: 412, |
||||
text: "bi.multidate_combo", |
||||
value: "demo.multidate_combo" |
||||
}, { |
||||
pId: 412, |
||||
text: "bi.date_time", |
||||
value: "demo.date_time" |
||||
}, { |
||||
pId: 412, |
||||
text: "bi.time_combo", |
||||
value: "demo.time_combo" |
||||
}, { |
||||
pId: 412, |
||||
text: "bi.time_interval", |
||||
value: "demo.time_interval" |
||||
}, { |
||||
pId: 412, |
||||
text: "bi.year_month_interval", |
||||
value: "demo.year_month_interval" |
||||
}, { |
||||
pId: 412, |
||||
text: "bi.year_quarter_interval", |
||||
value: "demo.year_quarter_interval" |
||||
}, { |
||||
pId: 412, |
||||
text: "bi.year_interval", |
||||
value: "demo.year_interval" |
||||
}, { |
||||
pId: 4, |
||||
id: 413, |
||||
text: "数值区间控件" |
||||
}, { |
||||
pId: 413, |
||||
text: "bi.number_interval", |
||||
value: "demo.number_interval" |
||||
}, { |
||||
id: 420, |
||||
text: "数值滑块sliders", |
||||
value: "demo.slider" |
||||
}, { |
||||
pId: 4, |
||||
id: 414, |
||||
text: "折叠面板" |
||||
}, { |
||||
pId: 414, |
||||
text: "bi.collapse", |
||||
value: "demo.collapse" |
||||
}]; |
||||
@ -1,450 +0,0 @@
|
||||
import { shortcut, Widget, createWidget, createItems, deepClone, map, delay, random, makeArray } from "@/core"; |
||||
import { Msg } from "@/base"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.combo"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
years = [ |
||||
{ text: "2010年", value: 2010, iconCls: "close-ha-font" }, |
||||
{ text: "2011年", value: 2011 }, |
||||
{ text: "2012年", value: 2012, iconCls: "close-ha-font" }, |
||||
{ text: "2013年", value: 2013 }, |
||||
{ text: "2014年", value: 2014, iconCls: "close-ha-font" }, |
||||
{ text: "2015年", value: 2015, iconCls: "close-ha-font" }, |
||||
{ text: "2016年", value: 2016, iconCls: "close-ha-font" }, |
||||
{ text: "2017年", value: 2017, iconCls: "close-ha-font" } |
||||
]; |
||||
child = [ |
||||
{ |
||||
type: "bi.combo_group", |
||||
el: { |
||||
type: "bi.icon_text_icon_item", |
||||
text: "2010年", |
||||
value: 2010, |
||||
height: 25, |
||||
iconCls1: "close-ha-font", |
||||
iconCls2: "close-ha-font", |
||||
}, |
||||
items: [ |
||||
{ type: "bi.single_select_item", height: 25, text: "一月", value: 11 }, |
||||
{ |
||||
type: "bi.icon_text_icon_item", |
||||
height: 25, |
||||
text: "二月", |
||||
value: 12, |
||||
iconCls1: "close-ha-font", |
||||
iconCls2: "close-ha-font", |
||||
children: [{ type: "bi.single_select_item", text: "一号", value: 101, height: 25 }], |
||||
} |
||||
], |
||||
}, |
||||
{ text: "2011年", value: 2011 }, |
||||
{ text: "2012年", value: 2012, iconCls: "close-ha-font" }, |
||||
{ text: "2013年", value: 2013 }, |
||||
{ text: "2014年", value: 2014, iconCls: "close-ha-font" }, |
||||
{ text: "2015年", value: 2015, iconCls: "close-ha-font" } |
||||
]; |
||||
months = [ |
||||
[{ el: { text: "一月", value: 1 } }, { el: { text: "二月", value: 2 } }], |
||||
[{ el: { text: "三月", value: 3 } }, { el: { text: "四月", value: 4 } }], |
||||
[{ el: { text: "五月", value: 5 } }, { el: { text: "六月", value: 6 } }], |
||||
[{ el: { text: "七月", value: 7 } }, { el: { text: "八月", value: 8 } }], |
||||
[{ el: { text: "九月", value: 9 } }, { el: { text: "十月", value: 10 } }], |
||||
[{ el: { text: "十一月", value: 11 } }, { el: { text: "十二月", value: 12 } }] |
||||
]; |
||||
dynamic = [ |
||||
{ text: "2010年", value: 1 }, |
||||
{ text: "20112222年", value: 2 }, |
||||
{ text: "201233333年", value: 3 }, |
||||
{ text: "2013年", value: 4 }, |
||||
{ text: "2012324年", value: 5 }, |
||||
{ text: "2015年", value: 6 }, |
||||
{ text: "2016年", value: 7 }, |
||||
{ text: "201744444444444444444444444444444444444年", value: 8 } |
||||
]; |
||||
week = [ |
||||
{ text: "周一", value: 100, iconClsLeft: "close-ha-font", iconClsRight: "close-font" }, |
||||
{ text: "周二", value: 101, iconClsLeft: "close-ha-font" }, |
||||
{ text: "周三", value: 102 }, |
||||
{ text: "周四", value: 103, iconClsRight: "close-ha-font" }, |
||||
{ text: "周五", value: 104, iconClsLeft: "close-ha-font", iconClsRight: "close-font" }, |
||||
{ text: "周六", value: 105, iconClsLeft: "close-font", iconClsRight: "close-ha-font" }, |
||||
{ text: "周日", value: 106, iconClsLeft: "close-font" } |
||||
]; |
||||
|
||||
_createTop() { |
||||
const self = this; |
||||
|
||||
const yearCombo = createWidget({ |
||||
type: "bi.combo", |
||||
el: { |
||||
type: "bi.button", |
||||
text: "简单下拉框", |
||||
height: 30, |
||||
}, |
||||
popup: { |
||||
el: { |
||||
type: "bi.button_group", |
||||
items: createItems(deepClone(this.years), { |
||||
type: "bi.single_select_radio_item", |
||||
height: 25, |
||||
handler(v) {}, |
||||
}), |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
} |
||||
], |
||||
}, |
||||
}, |
||||
width: 200, |
||||
}); |
||||
|
||||
var multiCombo = createWidget({ |
||||
type: "bi.combo", |
||||
el: { |
||||
type: "bi.button", |
||||
text: "多选下拉框", |
||||
height: 30, |
||||
}, |
||||
popup: { |
||||
el: { |
||||
items: createItems(deepClone(this.years), { |
||||
type: "bi.multi_select_item", |
||||
height: 25, |
||||
handler(v) {}, |
||||
}), |
||||
chooseType: 1, |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
} |
||||
], |
||||
}, |
||||
tool: { |
||||
type: "bi.label", |
||||
text: "这是一个下拉框", |
||||
height: 35, |
||||
}, |
||||
tabs: [ |
||||
{ |
||||
type: "bi.multi_select_bar", |
||||
height: 25, |
||||
text: "全选", |
||||
onCheck(v) { |
||||
if (v) { |
||||
multiCombo.setValue(map(deepClone(self.years), "value")); |
||||
} else { |
||||
multiCombo.setValue([]); |
||||
} |
||||
}, |
||||
isAllCheckedBySelectedValue(selectedValue) { |
||||
return selectedValue.length == self.years.length; |
||||
// return true;
|
||||
}, |
||||
} |
||||
], |
||||
buttons: [ |
||||
{ |
||||
type: "bi.text_button", |
||||
text: "清空", |
||||
handler() { |
||||
multiCombo.setValue([]); |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bi.text_button", |
||||
text: "确定", |
||||
handler() { |
||||
Msg.alert("", multiCombo.getValue()); |
||||
}, |
||||
} |
||||
], |
||||
}, |
||||
width: 200, |
||||
}); |
||||
|
||||
const dynamicPopupCombo = createWidget({ |
||||
type: "bi.combo", |
||||
isNeedAdjustWidth: false, |
||||
offsetStyle: "center", |
||||
el: { |
||||
type: "bi.button", |
||||
text: "动态调整宽度", |
||||
height: 30, |
||||
}, |
||||
popup: { |
||||
el: { |
||||
items: createItems(deepClone(this.dynamic), { |
||||
type: "bi.single_select_item", |
||||
height: 25, |
||||
}), |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
} |
||||
], |
||||
}, |
||||
}, |
||||
width: 200, |
||||
}); |
||||
|
||||
var dynamicCombo = createWidget({ |
||||
type: "bi.combo", |
||||
el: { |
||||
type: "bi.button", |
||||
text: "搜索", |
||||
height: 30, |
||||
}, |
||||
popup: { |
||||
el: { |
||||
type: "bi.loader", |
||||
logic: { |
||||
dynamic: true, |
||||
scrolly: true, |
||||
}, |
||||
el: { |
||||
behaviors: { |
||||
redmark() { |
||||
return true; |
||||
}, |
||||
}, |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
} |
||||
], |
||||
}, |
||||
itemsCreator(options, popuplate) { |
||||
const times = options.times; |
||||
delay(() => { |
||||
if (times == 3) { |
||||
popuplate([ |
||||
{ |
||||
type: "bi.single_select_item", |
||||
text: "这是最后一个", |
||||
value: "这是最后一个", |
||||
py: "zszhyg", |
||||
height: 25, |
||||
} |
||||
]); |
||||
|
||||
return; |
||||
} |
||||
|
||||
const map = map(makeArray(3, null), (i, v) => { |
||||
const val = `${i}_${random(1, 100)}`; |
||||
|
||||
return { |
||||
type: "bi.single_select_item", |
||||
text: val, |
||||
value: val, |
||||
height: 25, |
||||
}; |
||||
}); |
||||
popuplate(map); |
||||
}, 1000); |
||||
}, |
||||
hasNext(options) { |
||||
return options.times < 3; |
||||
}, |
||||
}, |
||||
buttons: [ |
||||
{ |
||||
type: "bi.text_button", |
||||
text: "清空", |
||||
handler() { |
||||
dynamicCombo.setValue([]); |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bi.text_button", |
||||
text: "确定", |
||||
handler() { |
||||
Msg.alert("", dynamicCombo.getValue()); |
||||
}, |
||||
} |
||||
], |
||||
}, |
||||
width: 200, |
||||
}); |
||||
|
||||
return createWidget({ |
||||
type: "bi.left", |
||||
items: [yearCombo, multiCombo, dynamicPopupCombo, dynamicCombo], |
||||
hgap: 20, |
||||
vgap: 20, |
||||
}); |
||||
} |
||||
|
||||
_createBottom() { |
||||
const combo = createWidget({ |
||||
type: "bi.combo", |
||||
el: { |
||||
type: "bi.text_button", |
||||
cls: "button-combo", |
||||
height: 30, |
||||
}, |
||||
popup: { |
||||
el: { |
||||
type: "bi.button_group", |
||||
items: createItems(deepClone(this.years), { |
||||
type: "bi.single_select_item", |
||||
iconWidth: 25, |
||||
height: 25, |
||||
handler(v) {}, |
||||
}), |
||||
chooseType: 1, |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
} |
||||
], |
||||
}, |
||||
}, |
||||
width: 200, |
||||
}); |
||||
combo.setValue(deepClone(this.years)[0].value); |
||||
|
||||
const childCombo = createWidget({ |
||||
type: "bi.combo", |
||||
el: { |
||||
type: "bi.text_button", |
||||
cls: "button-combo", |
||||
height: 30, |
||||
}, |
||||
popup: { |
||||
el: { |
||||
type: "bi.button_tree", |
||||
items: createItems(deepClone(this.child), { |
||||
type: "bi.single_select_item", |
||||
height: 25, |
||||
handler(v) {}, |
||||
}), |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
} |
||||
], |
||||
}, |
||||
}, |
||||
width: 200, |
||||
}); |
||||
childCombo.setValue(deepClone(this.child)[0].items[0].value); |
||||
|
||||
const monthCombo = createWidget({ |
||||
type: "bi.combo", |
||||
el: { |
||||
type: "bi.button", |
||||
text: "多层样式下拉框", |
||||
height: 30, |
||||
}, |
||||
popup: { |
||||
el: { |
||||
items: createItems(deepClone(this.months), { |
||||
type: "bi.single_select_item", |
||||
cls: "button-combo", |
||||
handler(v) {}, |
||||
}), |
||||
layouts: [ |
||||
{ |
||||
type: "bi.adaptive", |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.table", |
||||
columns: 2, |
||||
rows: 6, |
||||
columnSize: [0.5, "fill"], |
||||
rowSize: 30, |
||||
}, |
||||
left: 4, |
||||
right: 4, |
||||
top: 2, |
||||
bottom: 2, |
||||
} |
||||
], |
||||
}, |
||||
{ |
||||
type: "bi.absolute", |
||||
el: { left: 4, top: 2, right: 4, bottom: 2 }, |
||||
} |
||||
], |
||||
}, |
||||
}, |
||||
width: 200, |
||||
}); |
||||
|
||||
const yearCombo = createWidget({ |
||||
type: "bi.combo", |
||||
el: { |
||||
type: "bi.button", |
||||
text: "自定义控件", |
||||
height: 30, |
||||
}, |
||||
popup: { |
||||
el: { |
||||
type: "bi.navigation", |
||||
direction: "bottom", |
||||
logic: { |
||||
dynamic: true, |
||||
}, |
||||
tab: { |
||||
height: 30, |
||||
items: [ |
||||
{ |
||||
once: false, |
||||
text: "后退", |
||||
value: -1, |
||||
cls: "mvc-button layout-bg3", |
||||
}, |
||||
{ |
||||
once: false, |
||||
text: "前进", |
||||
value: 1, |
||||
cls: "mvc-button layout-bg4", |
||||
} |
||||
], |
||||
}, |
||||
cardCreator(v) { |
||||
return createWidget({ |
||||
type: "bi.text_button", |
||||
whiteSpace: "normal", |
||||
text: new Date().getFullYear() + v, |
||||
}); |
||||
}, |
||||
}, |
||||
}, |
||||
width: 200, |
||||
}); |
||||
|
||||
return createWidget({ |
||||
type: "bi.left", |
||||
items: [combo, childCombo, monthCombo, yearCombo], |
||||
hgap: 20, |
||||
vgap: 20, |
||||
}); |
||||
} |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.grid", |
||||
columns: 1, |
||||
rows: 2, |
||||
items: [ |
||||
{ |
||||
column: 0, |
||||
row: 0, |
||||
el: this._createTop(), |
||||
}, |
||||
{ |
||||
column: 0, |
||||
row: 1, |
||||
el: this._createBottom(), |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,167 +0,0 @@
|
||||
import { shortcut, Widget, createWidget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.combo2"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
_createEl() { |
||||
return { |
||||
type: "bi.button", |
||||
height: 25, |
||||
text: "点击", |
||||
}; |
||||
} |
||||
|
||||
oneCombo() { |
||||
return createWidget({ |
||||
type: "bi.combo", |
||||
adjustLength: 5, |
||||
el: this._createEl(), |
||||
popup: { |
||||
el: { |
||||
type: "bi.layout", |
||||
height: 500, |
||||
}, |
||||
maxHeight: 400, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
twoCombo() { |
||||
return createWidget({ |
||||
type: "bi.combo", |
||||
adjustXOffset: 25, |
||||
adjustYOffset: 5, |
||||
direction: "bottom,left", |
||||
el: this._createEl(), |
||||
popup: { |
||||
el: { |
||||
type: "bi.layout", |
||||
height: 1200, |
||||
}, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
threeCombo() { |
||||
return createWidget({ |
||||
type: "bi.combo", |
||||
adjustYOffset: 5, |
||||
el: this._createEl(), |
||||
isNeedAdjustHeight: false, |
||||
popup: { |
||||
el: { |
||||
type: "bi.layout", |
||||
height: 1200, |
||||
}, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
fourCombo() { |
||||
return createWidget({ |
||||
type: "bi.combo", |
||||
adjustXOffset: 25, |
||||
adjustYOffset: 5, |
||||
direction: "left", |
||||
el: this._createEl(), |
||||
isNeedAdjustHeight: true, |
||||
popup: { |
||||
el: { |
||||
type: "bi.layout", |
||||
height: 1200, |
||||
}, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
fiveCombo() { |
||||
return createWidget({ |
||||
type: "bi.combo", |
||||
adjustXOffset: 25, |
||||
adjustYOffset: 5, |
||||
direction: "left,top", |
||||
el: this._createEl(), |
||||
isNeedAdjustHeight: true, |
||||
popup: { |
||||
el: { |
||||
type: "bi.layout", |
||||
height: 1200, |
||||
}, |
||||
maxHeight: 2000, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
sixCombo() { |
||||
return createWidget({ |
||||
type: "bi.combo", |
||||
adjustXOffset: 25, |
||||
adjustYOffset: 5, |
||||
direction: "top,left", |
||||
el: this._createEl(), |
||||
isNeedAdjustHeight: true, |
||||
popup: { |
||||
el: { |
||||
type: "bi.layout", |
||||
height: 1200, |
||||
}, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
sevenCombo() { |
||||
return createWidget({ |
||||
type: "bi.combo", |
||||
adjustXOffset: 25, |
||||
adjustYOffset: 5, |
||||
direction: "bottom", |
||||
isNeedAdjustWidth: false, |
||||
// isNeedAdjustHeight: false,
|
||||
offsetStyle: "center", |
||||
el: this._createEl(), |
||||
popup: { |
||||
el: { |
||||
type: "bi.layout", |
||||
width: 200, |
||||
height: 1200, |
||||
}, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
eightCombo() { |
||||
return createWidget({ |
||||
type: "bi.combo", |
||||
adjustXOffset: 25, |
||||
adjustYOffset: 5, |
||||
direction: "right", |
||||
isNeedAdjustWidth: false, |
||||
// isNeedAdjustHeight: false,
|
||||
offsetStyle: "middle", |
||||
el: this._createEl(), |
||||
popup: { |
||||
el: { |
||||
type: "bi.layout", |
||||
width: 200, |
||||
height: 200, |
||||
}, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.grid", |
||||
hgap: 10, |
||||
vgap: 5, |
||||
items: [ |
||||
[this.oneCombo(), this.twoCombo(), this.threeCombo()], |
||||
[this.fourCombo(), this.fiveCombo(), this.sixCombo()], |
||||
[this.sevenCombo(), this.eightCombo()] |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,77 +0,0 @@
|
||||
import { shortcut, Widget, createWidget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.combo3"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
_createEl() { |
||||
return { |
||||
type: "bi.label", |
||||
cls: "bi-border", |
||||
height: "100%", |
||||
text: "点击", |
||||
}; |
||||
} |
||||
|
||||
oneCombo() { |
||||
return createWidget({ |
||||
type: "bi.combo", |
||||
direction: "right,innerRight", |
||||
isNeedAdjustWidth: false, |
||||
isNeedAdjustHeight: false, |
||||
el: this._createEl(), |
||||
popup: { |
||||
el: { |
||||
type: "bi.layout", |
||||
width: 200, |
||||
height: 200, |
||||
}, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
twoCombo() { |
||||
return createWidget({ |
||||
type: "bi.combo", |
||||
direction: "right,innerRight", |
||||
isNeedAdjustWidth: false, |
||||
isNeedAdjustHeight: false, |
||||
el: this._createEl(), |
||||
popup: { |
||||
el: { |
||||
type: "bi.layout", |
||||
width: 1000, |
||||
height: 200, |
||||
}, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
threeCombo() { |
||||
return createWidget({ |
||||
type: "bi.combo", |
||||
direction: "right,innerRight", |
||||
isNeedAdjustWidth: false, |
||||
isNeedAdjustHeight: false, |
||||
el: this._createEl(), |
||||
popup: { |
||||
el: { |
||||
type: "bi.layout", |
||||
width: 400, |
||||
height: 200, |
||||
}, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.grid", |
||||
hgap: 10, |
||||
vgap: 5, |
||||
items: [[this.oneCombo()], [this.twoCombo()], [this.threeCombo()]], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,81 +0,0 @@
|
||||
import { shortcut, Widget, createWidget, createItems, deepClone } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.combo_group"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
child = [ |
||||
{ |
||||
type: "bi.combo_group", |
||||
el: { type: "bi.icon_text_icon_item", text: "2010年", value: 2010, height: 25, iconCls: "close-ha-font" }, |
||||
items: [ |
||||
{ type: "bi.single_select_item", height: 25, text: "一月", value: 11 }, |
||||
{ |
||||
type: "bi.icon_text_icon_item", |
||||
height: 25, |
||||
text: "二月", |
||||
value: 12, |
||||
iconCls1: "close-ha-font", |
||||
iconCls2: "close-ha-font", |
||||
children: [{ type: "bi.single_select_item", text: "一号", value: 101, height: 25 }], |
||||
} |
||||
], |
||||
}, |
||||
{ text: "2011年", value: 2011 }, |
||||
{ text: "2012年", value: 2012, iconCls: "close-ha-font" }, |
||||
{ text: "2013年", value: 2013 }, |
||||
{ text: "2014年", value: 2014, iconCls: "close-ha-font" }, |
||||
{ text: "2015年", value: 2015, iconCls: "close-ha-font" } |
||||
]; |
||||
|
||||
_createBottom() { |
||||
const childCombo = createWidget({ |
||||
type: "bi.combo", |
||||
el: { |
||||
type: "bi.text_button", |
||||
cls: "button-combo", |
||||
height: 30, |
||||
}, |
||||
popup: { |
||||
el: { |
||||
type: "bi.button_tree", |
||||
items: createItems(deepClone(this.child), { |
||||
type: "bi.single_select_item", |
||||
height: 25, |
||||
handler(v) {}, |
||||
}), |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
} |
||||
], |
||||
}, |
||||
}, |
||||
width: 200, |
||||
}); |
||||
childCombo.setValue(deepClone(this.child)[0].items[0].value); |
||||
|
||||
return createWidget({ |
||||
type: "bi.left", |
||||
items: [childCombo], |
||||
hgap: 20, |
||||
vgap: 20, |
||||
}); |
||||
} |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.grid", |
||||
columns: 1, |
||||
rows: 1, |
||||
items: [ |
||||
{ |
||||
column: 0, |
||||
row: 0, |
||||
el: this._createBottom(), |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,54 +0,0 @@
|
||||
import { shortcut, Widget, createItems } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.expander"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.vertical", |
||||
hgap: 30, |
||||
vgap: 20, |
||||
items: [ |
||||
{ |
||||
type: "bi.expander", |
||||
el: { |
||||
type: "bi.icon_text_node", |
||||
cls: "pull-right-ha-font mvc-border", |
||||
height: 25, |
||||
text: "Expander", |
||||
}, |
||||
popup: { |
||||
cls: "mvc-border", |
||||
items: createItems( |
||||
[ |
||||
{ |
||||
text: "项目1", |
||||
value: 1, |
||||
}, |
||||
{ |
||||
text: "项目2", |
||||
value: 2, |
||||
}, |
||||
{ |
||||
text: "项目3", |
||||
value: 3, |
||||
}, |
||||
{ |
||||
text: "项目4", |
||||
value: 4, |
||||
} |
||||
], |
||||
{ |
||||
type: "bi.single_select_item", |
||||
height: 25, |
||||
} |
||||
), |
||||
}, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,33 +0,0 @@
|
||||
import { shortcut, Widget, deepClone, map, extend } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.loader"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
const self = this; |
||||
this.all = 0; |
||||
const items = deepClone(Demo.CONSTANTS.ITEMS); |
||||
|
||||
return { |
||||
type: "bi.loader", |
||||
itemsCreator(options, populate) { |
||||
setTimeout(() => { |
||||
populate( |
||||
map(items.slice((options.times - 1) * 10, options.times * 10), (i, v) => |
||||
extend(v, { |
||||
type: "bi.single_select_item", |
||||
height: 25, |
||||
}) |
||||
) |
||||
); |
||||
}, 1000); |
||||
}, |
||||
hasNext(options) { |
||||
return options.times * 10 < items.length; |
||||
}, |
||||
}; |
||||
} |
||||
} |
||||
@ -1,41 +0,0 @@
|
||||
import { shortcut, Widget, createWidget, random, bind } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.navigation"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
_createNav(v) { |
||||
return createWidget({ |
||||
type: "bi.label", |
||||
cls: `layout-bg${random(1, 8)}`, |
||||
text: `第${v}页`, |
||||
}); |
||||
} |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.navigation", |
||||
showIndex: 0, |
||||
tab: { |
||||
height: 30, |
||||
items: [ |
||||
{ |
||||
once: false, |
||||
text: "后退", |
||||
value: -1, |
||||
cls: "mvc-button layout-bg3", |
||||
}, |
||||
{ |
||||
once: false, |
||||
text: "前进", |
||||
value: 1, |
||||
cls: "mvc-button layout-bg4", |
||||
} |
||||
], |
||||
}, |
||||
cardCreator: bind(this._createNav, this), |
||||
}; |
||||
} |
||||
} |
||||
@ -1,125 +0,0 @@
|
||||
import { shortcut, Widget, createItems, createWidget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.searcher"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
_createItems(items) { |
||||
return createItems(items, { |
||||
type: "bi.multi_select_item", |
||||
height: 25, |
||||
handler(v) {}, |
||||
}); |
||||
} |
||||
|
||||
render() { |
||||
const self = this; |
||||
const items = [ |
||||
{ |
||||
text: "2010年", |
||||
value: 2010, |
||||
py: "2010n", |
||||
title: "1111111111111111111111111111111111", |
||||
}, |
||||
{ |
||||
text: "2011年", |
||||
value: 2011, |
||||
py: "2011n", |
||||
title: "1111111111111111111111111111111111", |
||||
}, |
||||
{ |
||||
text: "2012年", |
||||
value: 2012, |
||||
py: "2012n", |
||||
title: "1111111111111111111111111111111111", |
||||
}, |
||||
{ |
||||
text: "2013年", |
||||
value: 2013, |
||||
py: "2013n", |
||||
title: "1111111111111111111111111111111111", |
||||
}, |
||||
{ |
||||
text: "2014年", |
||||
value: 2014, |
||||
py: "2014n", |
||||
title: "1111111111111111111111111111111111", |
||||
}, |
||||
{ |
||||
text: "2015年", |
||||
value: 2015, |
||||
py: "2015n", |
||||
title: "1111111111111111111111111111111111", |
||||
}, |
||||
{ |
||||
text: "2016年", |
||||
value: 2016, |
||||
py: "2016n", |
||||
title: "1111111111111111111111111111111111", |
||||
}, |
||||
{ |
||||
text: "2017年", |
||||
value: 2017, |
||||
py: "2017n", |
||||
title: "1111111111111111111111111111111111", |
||||
} |
||||
]; |
||||
|
||||
const adapter = createWidget({ |
||||
type: "bi.button_group", |
||||
cls: "layout-bg1", |
||||
items: this._createItems(items), |
||||
chooseType: 1, |
||||
behaviors: {}, |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
} |
||||
], |
||||
}); |
||||
createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: adapter, |
||||
top: 50, |
||||
left: 50, |
||||
width: 200, |
||||
height: 100, |
||||
} |
||||
], |
||||
}); |
||||
createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.absolute", |
||||
width: 200, |
||||
height: 30, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.searcher", |
||||
adapter, |
||||
width: 200, |
||||
height: 30, |
||||
}, |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0, |
||||
} |
||||
], |
||||
}, |
||||
top: 100, |
||||
left: 300, |
||||
} |
||||
], |
||||
}); |
||||
} |
||||
} |
||||
@ -1,73 +0,0 @@
|
||||
import { shortcut, Widget, createWidget, createItems } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.switcher"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
const adapter = createWidget({ |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "将在该处弹出switcher", |
||||
}); |
||||
createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: adapter, |
||||
top: 50, |
||||
left: 20, |
||||
width: 200, |
||||
height: 300, |
||||
} |
||||
], |
||||
}); |
||||
createWidget({ |
||||
type: "bi.vertical", |
||||
element: this, |
||||
hgap: 30, |
||||
vgap: 20, |
||||
items: [ |
||||
{ |
||||
type: "bi.switcher", |
||||
el: { |
||||
type: "bi.button", |
||||
height: 25, |
||||
text: "Switcher", |
||||
}, |
||||
popup: { |
||||
cls: "mvc-border layout-bg5", |
||||
items: createItems( |
||||
[ |
||||
{ |
||||
text: "项目1", |
||||
value: 1, |
||||
}, |
||||
{ |
||||
text: "项目2", |
||||
value: 2, |
||||
}, |
||||
{ |
||||
text: "项目3", |
||||
value: 3, |
||||
}, |
||||
{ |
||||
text: "项目4", |
||||
value: 4, |
||||
} |
||||
], |
||||
{ |
||||
type: "bi.single_select_item", |
||||
height: 25, |
||||
} |
||||
), |
||||
}, |
||||
adapter, |
||||
} |
||||
], |
||||
}); |
||||
} |
||||
} |
||||
@ -1,80 +0,0 @@
|
||||
import { shortcut, Widget, createWidget, bind } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.tab"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
_createTabs(v) { |
||||
switch (v) { |
||||
case 1: |
||||
return createWidget({ |
||||
type: "bi.label", |
||||
cls: "layout-bg1", |
||||
text: "面板1", |
||||
}); |
||||
case 2: |
||||
return createWidget({ |
||||
type: "bi.label", |
||||
cls: "layout-bg2", |
||||
text: "面板2", |
||||
}); |
||||
} |
||||
} |
||||
|
||||
render() { |
||||
this.tab = createWidget({ |
||||
type: "bi.button_group", |
||||
height: 30, |
||||
items: [ |
||||
{ |
||||
text: "Tab1", |
||||
value: 1, |
||||
width: 50, |
||||
cls: "mvc-button layout-bg3", |
||||
}, |
||||
{ |
||||
text: "Tab2", |
||||
value: 2, |
||||
width: 50, |
||||
cls: "mvc-button layout-bg4", |
||||
} |
||||
], |
||||
layouts: [ |
||||
{ |
||||
type: "bi.center_adapt", |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.horizontal", |
||||
width: 100, |
||||
}, |
||||
} |
||||
], |
||||
} |
||||
], |
||||
}); |
||||
|
||||
const tab = createWidget({ |
||||
direction: "custom", |
||||
type: "bi.tab", |
||||
element: this, |
||||
tab: this.tab, |
||||
cardCreator: bind(this._createTabs, this), |
||||
}); |
||||
createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: this.tab, |
||||
left: 200, |
||||
top: 200, |
||||
} |
||||
], |
||||
}); |
||||
|
||||
tab.setSelect(2); |
||||
} |
||||
} |
||||
@ -1,80 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
import { ButtonGroup } from "@/base"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.button_group"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
let ref; |
||||
|
||||
return { |
||||
type: "bi.vertical", |
||||
items: [ |
||||
{ |
||||
type: "bi.button_group", |
||||
ref(_ref) { |
||||
ref = _ref; |
||||
}, |
||||
chooseType: ButtonGroup.CHOOSE_TYPE_NONE, |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
items: [ |
||||
{ |
||||
type: "bi.vtape", |
||||
height: 200, |
||||
} |
||||
], |
||||
} |
||||
], |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
text: "button_group是一类具有相同属性或相似属性的抽象, 本案例实现的是布局的嵌套(vertical布局下内嵌center_adapt布局)", |
||||
}, |
||||
height: 150, |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.button", |
||||
text: "1", |
||||
}, |
||||
} |
||||
], |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "populate", |
||||
handler() { |
||||
ref.populate([ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
text: "1", |
||||
}, |
||||
height: 50, |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.button", |
||||
text: "2", |
||||
}, |
||||
height: 50, |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
text: "3", |
||||
}, |
||||
} |
||||
]); |
||||
}, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,36 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
import { ButtonGroup } from "@/base"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.button_tree"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.button_tree", |
||||
chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
}, |
||||
{ |
||||
type: "bi.center_adapt", |
||||
} |
||||
], |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
text: "0", |
||||
value: 0, |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "1", |
||||
value: 1, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,46 +0,0 @@
|
||||
import { shortcut, Widget, createWidget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.collection_view"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
const items = []; |
||||
const cellCount = 100; |
||||
for (let i = 0; i < cellCount; i++) { |
||||
items[i] = { |
||||
type: "bi.label", |
||||
text: i, |
||||
}; |
||||
} |
||||
const grid = createWidget({ |
||||
type: "bi.collection_view", |
||||
width: 400, |
||||
height: 300, |
||||
items, |
||||
cellSizeAndPositionGetter(index) { |
||||
return { |
||||
x: (index % 10) * 50, |
||||
y: Math.floor(index / 10) * 50, |
||||
width: 50, |
||||
height: 50, |
||||
}; |
||||
}, |
||||
}); |
||||
createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: grid, |
||||
left: 10, |
||||
right: 10, |
||||
top: 10, |
||||
bottom: 10, |
||||
} |
||||
], |
||||
}); |
||||
} |
||||
} |
||||
@ -1,282 +0,0 @@
|
||||
import { shortcut, Widget, createWidget, deepClone } from "@/core"; |
||||
import { Msg } from "@/base"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.custom_tree"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
_createDefaultTree() { |
||||
const TREEITEMS = [ |
||||
{ id: -1, pId: -2, value: "根目录", open: true, type: "bi.plus_group_node", height: 25 }, |
||||
{ id: 1, pId: -1, value: "第一级目录1", type: "bi.plus_group_node", height: 25 }, |
||||
{ id: 11, pId: 1, value: "第二级文件1", type: "bi.single_select_item", height: 25 }, |
||||
{ id: 12, pId: 1, value: "第二级目录2", type: "bi.plus_group_node", height: 25 }, |
||||
{ id: 121, pId: 12, value: "第三级目录1", type: "bi.plus_group_node", height: 25 }, |
||||
{ id: 122, pId: 12, value: "第三级文件1", type: "bi.single_select_item", height: 25 }, |
||||
{ id: 1211, pId: 121, value: "第四级目录1", type: "bi.plus_group_node", height: 25 }, |
||||
{ id: 12111, pId: 1211, value: "第五级文件1", type: "bi.single_select_item", height: 25 }, |
||||
{ id: 2, pId: -1, value: "第一级目录2", type: "bi.plus_group_node", height: 25 }, |
||||
{ id: 21, pId: 2, value: "第二级目录3", type: "bi.plus_group_node", height: 25 }, |
||||
{ id: 22, pId: 2, value: "第二级文件2", type: "bi.single_select_item", height: 25 }, |
||||
{ id: 211, pId: 21, value: "第三级目录2", type: "bi.plus_group_node", height: 25 }, |
||||
{ id: 212, pId: 21, value: "第三级文件2", type: "bi.single_select_item", height: 25 }, |
||||
{ id: 2111, pId: 211, value: "第四级文件1", type: "bi.single_select_item", height: 25 } |
||||
]; |
||||
this.tree = createWidget({ |
||||
type: "bi.custom_tree", |
||||
el: { |
||||
type: "bi.button_tree", |
||||
chooseType: 0, |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
hgap: 30, |
||||
} |
||||
], |
||||
}, |
||||
items: deepClone(TREEITEMS), |
||||
}); |
||||
|
||||
return this.tree; |
||||
} |
||||
|
||||
_createAsyncTree() { |
||||
this.asyncTree = createWidget({ |
||||
type: "bi.custom_tree", |
||||
itemsCreator(op, callback) { |
||||
if (!op.node) { |
||||
// 根节点
|
||||
callback([ |
||||
{ |
||||
id: 1, |
||||
pId: 0, |
||||
type: "bi.plus_group_node", |
||||
text: "test1", |
||||
value: 1, |
||||
height: 25, |
||||
isParent: true, |
||||
}, |
||||
{ |
||||
id: 2, |
||||
pId: 0, |
||||
type: "bi.plus_group_node", |
||||
text: "test2", |
||||
value: 1, |
||||
isParent: true, |
||||
open: true, |
||||
height: 25, |
||||
} |
||||
]); |
||||
} else { |
||||
if (op.node.id == 1) { |
||||
callback([ |
||||
{ |
||||
id: 11, |
||||
pId: 1, |
||||
type: "bi.plus_group_node", |
||||
text: "test11", |
||||
value: 11, |
||||
height: 25, |
||||
isParent: true, |
||||
}, |
||||
{ |
||||
id: 12, |
||||
pId: 1, |
||||
type: "bi.single_select_item", |
||||
text: "test12", |
||||
value: 12, |
||||
height: 35, |
||||
}, |
||||
{ |
||||
id: 13, |
||||
pId: 1, |
||||
type: "bi.single_select_item", |
||||
text: "test13", |
||||
value: 13, |
||||
height: 35, |
||||
}, |
||||
{ |
||||
id: 14, |
||||
pId: 1, |
||||
type: "bi.single_select_item", |
||||
text: "test14", |
||||
value: 14, |
||||
height: 35, |
||||
}, |
||||
{ |
||||
id: 15, |
||||
pId: 1, |
||||
type: "bi.single_select_item", |
||||
text: "test15", |
||||
value: 15, |
||||
height: 35, |
||||
}, |
||||
{ |
||||
id: 16, |
||||
pId: 1, |
||||
type: "bi.single_select_item", |
||||
text: "test16", |
||||
value: 16, |
||||
height: 35, |
||||
}, |
||||
{ id: 17, pId: 1, type: "bi.single_select_item", text: "test17", value: 17, height: 35 } |
||||
]); |
||||
} else if (op.node.id == 2) { |
||||
callback([ |
||||
{ |
||||
id: 21, |
||||
pId: 2, |
||||
type: "bi.single_select_item", |
||||
text: "test21", |
||||
value: 21, |
||||
height: 35, |
||||
}, |
||||
{ |
||||
id: 22, |
||||
pId: 2, |
||||
type: "bi.single_select_item", |
||||
text: "test22", |
||||
value: 22, |
||||
height: 35, |
||||
} |
||||
]); |
||||
} else if (op.node.id == 11) { |
||||
callback([ |
||||
{ |
||||
id: 111, |
||||
pId: 11, |
||||
type: "bi.single_select_item", |
||||
text: "test111", |
||||
value: 111, |
||||
height: 35, |
||||
} |
||||
]); |
||||
} |
||||
} |
||||
}, |
||||
el: { |
||||
type: "bi.loader", |
||||
next: false, |
||||
el: { |
||||
type: "bi.button_tree", |
||||
chooseType: 0, |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
hgap: 30, |
||||
vgap: 0, |
||||
} |
||||
], |
||||
}, |
||||
}, |
||||
}); |
||||
|
||||
return this.asyncTree; |
||||
} |
||||
|
||||
render() { |
||||
const self = this; |
||||
createWidget({ |
||||
type: "bi.grid", |
||||
columns: 2, |
||||
rows: 1, |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
column: 0, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.vtape", |
||||
items: [ |
||||
{ |
||||
el: this._createDefaultTree(), |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.center", |
||||
hgap: 10, |
||||
items: [ |
||||
{ |
||||
type: "bi.text_button", |
||||
cls: "mvc-button layout-bg2", |
||||
text: "getValue", |
||||
height: 30, |
||||
handler() { |
||||
Msg.alert("", JSON.stringify(self.tree.getValue())); |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bi.text_button", |
||||
cls: "mvc-button layout-bg2", |
||||
text: "getNodeByValue(第一级目录1)", |
||||
height: 30, |
||||
handler() { |
||||
Msg.alert( |
||||
"", |
||||
`节点名称为: ${self.tree.getNodeByValue("第一级目录1").getValue()}` |
||||
); |
||||
}, |
||||
} |
||||
], |
||||
}, |
||||
height: 30, |
||||
} |
||||
], |
||||
}, |
||||
}, |
||||
{ |
||||
column: 1, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.vtape", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
text: "异步加载数据", |
||||
height: 30, |
||||
}, |
||||
{ |
||||
el: this._createAsyncTree(), |
||||
}, |
||||
{ |
||||
el: { |
||||
type: "bi.center", |
||||
hgap: 10, |
||||
items: [ |
||||
{ |
||||
type: "bi.text_button", |
||||
cls: "mvc-button layout-bg2", |
||||
text: "getValue", |
||||
height: 30, |
||||
handler() { |
||||
Msg.alert("", JSON.stringify(self.asyncTree.getValue())); |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bi.text_button", |
||||
cls: "mvc-button layout-bg2", |
||||
text: "getNodeById(11)", |
||||
height: 30, |
||||
handler() { |
||||
Msg.alert( |
||||
"", |
||||
`节点名称为: ${ |
||||
self.asyncTree.getNodeById(11) && |
||||
self.asyncTree.getNodeById(11).getText() |
||||
}` |
||||
); |
||||
}, |
||||
} |
||||
], |
||||
}, |
||||
height: 30, |
||||
} |
||||
], |
||||
}, |
||||
} |
||||
], |
||||
}); |
||||
} |
||||
} |
||||
@ -1,62 +0,0 @@
|
||||
import { shortcut, Widget, createWidget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.grid_view"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
const items = []; |
||||
const rowCount = 10000, |
||||
columnCount = 100; |
||||
for (let i = 0; i < rowCount; i++) { |
||||
items[i] = []; |
||||
for (let j = 0; j < columnCount; j++) { |
||||
items[i][j] = { |
||||
type: "bi.label", |
||||
text: `${i}-${j}`, |
||||
}; |
||||
} |
||||
} |
||||
const grid = createWidget({ |
||||
type: "bi.grid_view", |
||||
width: 400, |
||||
height: 300, |
||||
estimatedRowSize: 30, |
||||
estimatedColumnSize: 100, |
||||
items, |
||||
scrollTop: 100, |
||||
rowHeightGetter() { |
||||
return 30; |
||||
}, |
||||
columnWidthGetter() { |
||||
return 100; |
||||
}, |
||||
}); |
||||
createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.grid", |
||||
columns: 1, |
||||
rows: 1, |
||||
items: [ |
||||
{ |
||||
column: 0, |
||||
row: 0, |
||||
el: grid, |
||||
} |
||||
], |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 10, |
||||
bottom: 10, |
||||
} |
||||
], |
||||
}); |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { shortcut, Widget, map, extend } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.list_view"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.list_view", |
||||
el: { |
||||
type: "bi.left", |
||||
}, |
||||
items: map(Demo.CONSTANTS.ITEMS, (i, item) => |
||||
extend({}, item, { |
||||
type: "bi.label", |
||||
width: 200, |
||||
height: 200, |
||||
text: `${i + 1}.${item.text}`, |
||||
}) |
||||
), |
||||
}; |
||||
} |
||||
} |
||||
@ -1,86 +0,0 @@
|
||||
import { shortcut, Widget, map, range, deepClone } from "@/core"; |
||||
import { ButtonGroup } from "@/base"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.virtual_group"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
_createItems() { |
||||
const items = map(range(1000), i => { |
||||
return { |
||||
type: "demo.virtual_group_item", |
||||
value: i, |
||||
key: i + 1, |
||||
}; |
||||
}); |
||||
|
||||
return items; |
||||
} |
||||
|
||||
render() { |
||||
const self = this; |
||||
const buttonGroupItems = self._createItems(); |
||||
const virtualGroupItems = self._createItems(); |
||||
|
||||
return { |
||||
type: "bi.vertical", |
||||
vgap: 20, |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
cls: "layout-bg5", |
||||
height: 50, |
||||
text: "共1000个元素,演示button_group和virtual_group每次删除第一个元素,打开控制台看输出", |
||||
}, |
||||
{ |
||||
type: "bi.button_group", |
||||
width: 500, |
||||
height: 300, |
||||
ref() { |
||||
self.buttonGroup = this; |
||||
}, |
||||
chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
} |
||||
], |
||||
items: this._createItems(), |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "演示button_group的刷新", |
||||
handler() { |
||||
buttonGroupItems.shift(); |
||||
self.buttonGroup.populate(deepClone(buttonGroupItems)); |
||||
}, |
||||
}, |
||||
{ |
||||
type: "bi.virtual_group", |
||||
width: 500, |
||||
height: 300, |
||||
ref() { |
||||
self.virtualGroup = this; |
||||
}, |
||||
chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical", |
||||
} |
||||
], |
||||
items: this._createItems(), |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "演示virtual_group的刷新", |
||||
handler() { |
||||
virtualGroupItems.shift(); |
||||
self.virtualGroup.populate(deepClone(virtualGroupItems)); |
||||
}, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,43 +0,0 @@
|
||||
import { shortcut, Widget, UUID } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Item extends Widget { |
||||
static xtype = "demo.virtual_group_item"; |
||||
|
||||
props = { baseCls: "demo-item", height: 30 }; |
||||
|
||||
render() { |
||||
const self = this, |
||||
o = this.options; |
||||
|
||||
return { |
||||
type: "bi.label", |
||||
ref () { |
||||
self.label = this; |
||||
}, |
||||
height: this.options.height, |
||||
text: `key:${o.key},随机数${UUID()}`, |
||||
}; |
||||
} |
||||
|
||||
shouldUpdate(nextProps) { |
||||
const o = this.options; |
||||
|
||||
return o.type !== nextProps.type || o.key !== nextProps.key || o.value !== nextProps.value; |
||||
} |
||||
|
||||
update(item) { |
||||
this.label.setText(item.value); |
||||
console.log("更新了一项"); |
||||
|
||||
return true; // 返回是不是更新成功
|
||||
} |
||||
|
||||
created() { |
||||
console.log("创建了一项"); |
||||
} |
||||
|
||||
destroyed() { |
||||
console.log("删除了一项"); |
||||
} |
||||
} |
||||
@ -1,21 +0,0 @@
|
||||
import { shortcut, Widget, map, extend } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class Func extends Widget { |
||||
static xtype = "demo.virtual_list"; |
||||
|
||||
props = { baseCls: "demo-func" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.virtual_list", |
||||
items: map(Demo.CONSTANTS.ITEMS, (i, item) => |
||||
extend({}, item, { |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: `${i + 1}.${item.text}` |
||||
}) |
||||
) |
||||
}; |
||||
} |
||||
} |
||||
@ -1,11 +0,0 @@
|
||||
export * from "./combination"; |
||||
|
||||
export * from "./demo.button_group"; |
||||
export * from "./demo.button_tree"; |
||||
export * from "./demo.collection_view"; |
||||
export * from "./demo.custom_tree"; |
||||
export * from "./demo.grid_view"; |
||||
export * from "./demo.list_view"; |
||||
export * from "./demo.virtual_group"; |
||||
export * from "./demo.virtual_group_item"; |
||||
export * from "./demo.virtual_list"; |
||||
@ -1,3 +0,0 @@
|
||||
export * from "./abstract"; |
||||
export * from "./layout"; |
||||
export * from "./popup"; |
||||
@ -1,27 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class AbsoluteLayout extends Widget { |
||||
static xtype = "demo.absolute"; |
||||
|
||||
props = { baseCls: "demo-absolute" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.absolute", |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
text: "绝对布局", |
||||
cls: "layout-bg1", |
||||
width: 300, |
||||
height: 200, |
||||
}, |
||||
left: 100, |
||||
top: 100, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,102 +0,0 @@
|
||||
import { shortcut, Widget, createWidget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class BorderLayout extends Widget { |
||||
static xtype = "demo.border"; |
||||
|
||||
props = { baseCls: "demo-border" }; |
||||
|
||||
_createNorth() { |
||||
return createWidget({ |
||||
type: "bi.label", |
||||
text: "North", |
||||
cls: "layout-bg1", |
||||
height: 30, |
||||
}); |
||||
} |
||||
|
||||
_createWest() { |
||||
return createWidget({ |
||||
type: "bi.center", |
||||
cls: "layout-bg2", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
text: "West", |
||||
whiteSpace: "normal", |
||||
} |
||||
], |
||||
}); |
||||
} |
||||
|
||||
_createCenter() { |
||||
return createWidget({ |
||||
type: "bi.center", |
||||
cls: "layout-bg3", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
text: "Center", |
||||
whiteSpace: "normal", |
||||
} |
||||
], |
||||
}); |
||||
} |
||||
|
||||
_createEast() { |
||||
return createWidget({ |
||||
type: "bi.center", |
||||
cls: "layout-bg5", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
text: "East", |
||||
whiteSpace: "normal", |
||||
} |
||||
], |
||||
}); |
||||
} |
||||
|
||||
_createSouth() { |
||||
return createWidget({ |
||||
type: "bi.label", |
||||
text: "South", |
||||
cls: "layout-bg6", |
||||
height: 50, |
||||
}); |
||||
} |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.border", |
||||
cls: "", |
||||
items: { |
||||
north: { |
||||
el: this._createNorth(), |
||||
height: 30, |
||||
top: 20, |
||||
left: 20, |
||||
right: 20, |
||||
}, |
||||
south: { |
||||
el: this._createSouth(), |
||||
height: 50, |
||||
bottom: 20, |
||||
left: 20, |
||||
right: 20, |
||||
}, |
||||
west: { |
||||
el: this._createWest(), |
||||
width: 200, |
||||
left: 20, |
||||
}, |
||||
east: { |
||||
el: this._createEast(), |
||||
width: 300, |
||||
right: 20, |
||||
}, |
||||
center: this._createCenter(), |
||||
}, |
||||
}; |
||||
} |
||||
} |
||||
@ -1,40 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class CenterLayout extends Widget { |
||||
static xtype = "demo.center_layout"; |
||||
|
||||
props = { baseCls: "demo-center" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.center", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
text: "其实是一个grid嵌套absolute的实现", |
||||
cls: "layout-bg1", |
||||
whiteSpace: "normal", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
text: "Center 2，为了演示label是占满整个的，用了一个whiteSpace:normal", |
||||
cls: "layout-bg2", |
||||
whiteSpace: "normal", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
text: "Center 3", |
||||
cls: "layout-bg3", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
text: "Center 4", |
||||
cls: "layout-bg5", |
||||
} |
||||
], |
||||
hgap: 20, |
||||
vgap: 20, |
||||
}; |
||||
} |
||||
} |
||||
@ -1,23 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class CenterAdapt extends Widget { |
||||
static xtype = "demo.center_adapt"; |
||||
|
||||
props = { baseCls: "demo-absolute" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.center_adapt", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
text: "水平垂直居中", |
||||
width: 300, |
||||
height: 200, |
||||
cls: "layout-bg1", |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,30 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class FloatCenterLayout extends Widget { |
||||
static xtype = "demo.float_center"; |
||||
|
||||
props = { baseCls: "demo-float-center" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.float_center", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", |
||||
cls: "layout-bg1", |
||||
whiteSpace: "normal", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
text: "浮动式的中间布局", |
||||
cls: "layout-bg2", |
||||
whiteSpace: "normal", |
||||
} |
||||
], |
||||
hgap: 20, |
||||
vgap: 20, |
||||
}; |
||||
} |
||||
} |
||||
@ -1,89 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class FlowLayout extends Widget { |
||||
static xtype = "demo.flow"; |
||||
|
||||
props = { baseCls: "demo-flow" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.center_adapt", |
||||
items: [ |
||||
{ |
||||
type: "bi.left", |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-1", |
||||
cls: "layout-bg1", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-2", |
||||
cls: "layout-bg2", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-3", |
||||
cls: "layout-bg3", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-4", |
||||
cls: "layout-bg4", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Left-5", |
||||
cls: "layout-bg5", |
||||
} |
||||
], |
||||
hgap: 20, |
||||
}, |
||||
{ |
||||
type: "bi.right", |
||||
hgap: 20, |
||||
items: [ |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Right-1", |
||||
cls: "layout-bg1", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Right-2", |
||||
cls: "layout-bg2", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Right-3", |
||||
cls: "layout-bg3", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Right-4", |
||||
cls: "layout-bg4", |
||||
}, |
||||
{ |
||||
type: "bi.label", |
||||
height: 30, |
||||
text: "Right-5", |
||||
cls: "layout-bg5", |
||||
} |
||||
], |
||||
vgap: 20, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
@ -1,153 +0,0 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
|
||||
@shortcut() |
||||
export class GridLayout extends Widget { |
||||
static xtype = "demo.grid"; |
||||
|
||||
props = { baseCls: "demo-grid" }; |
||||
|
||||
render() { |
||||
return { |
||||
type: "bi.grid", |
||||
columns: 5, |
||||
rows: 3, |
||||
items: [ |
||||
{ |
||||
column: 0, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-0, row-0", |
||||
cls: "layout-bg1", |
||||
}, |
||||
}, |
||||
{ |
||||
column: 1, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-1, row-0", |
||||
cls: "layout-bg2", |
||||
}, |
||||
}, |
||||
{ |
||||
column: 2, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-2, row-0", |
||||
cls: "layout-bg6", |
||||
}, |
||||
}, |
||||
{ |
||||
column: 3, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-3, row-0", |
||||
cls: "layout-bg3", |
||||
}, |
||||
}, |
||||
{ |
||||
column: 4, |
||||
row: 0, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-4, row-0", |
||||
cls: "layout-bg4", |
||||
}, |
||||
}, |
||||
{ |
||||
column: 0, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-0, row-1", |
||||
cls: "layout-bg5", |
||||
}, |
||||
}, |
||||
{ |
||||
column: 1, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-1, row-1", |
||||
cls: "layout-bg6", |
||||
}, |
||||
}, |
||||
{ |
||||
column: 2, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-2, row-1", |
||||
cls: "layout-bg7", |
||||
}, |
||||
}, |
||||
{ |
||||
column: 3, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-3, row-1", |
||||
cls: "layout-bg1", |
||||
}, |
||||
}, |
||||
{ |
||||
column: 4, |
||||
row: 1, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-4, row-1", |
||||
cls: "layout-bg3", |
||||
}, |
||||
}, |
||||
{ |
||||
column: 0, |
||||
row: 2, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-0, row-2", |
||||
cls: "layout-bg2", |
||||
}, |
||||
}, |
||||
{ |
||||
column: 1, |
||||
row: 2, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-1, row-2", |
||||
cls: "layout-bg3", |
||||
}, |
||||
}, |
||||
{ |
||||
column: 2, |
||||
row: 2, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-2, row-2", |
||||
cls: "layout-bg4", |
||||
}, |
||||
}, |
||||
{ |
||||
column: 3, |
||||
row: 2, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-3, row-2", |
||||
cls: "layout-bg5", |
||||
}, |
||||
}, |
||||
{ |
||||
column: 4, |
||||
row: 2, |
||||
el: { |
||||
type: "bi.label", |
||||
text: "column-4, row-2", |
||||
cls: "layout-bg6", |
||||
}, |
||||
} |
||||
], |
||||
}; |
||||
} |
||||
} |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue