From c8f1c832c7c8967bcdf71e7a747597588569559b Mon Sep 17 00:00:00 2001 From: "Vivy.Pan" Date: Mon, 13 Feb 2023 00:31:45 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-14241=20refactor:demo=E7=9A=84es6?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/base/button/demo.button.js | 831 +++++------ demo/js/base/button/demo.icon_button.js | 26 +- demo/js/base/button/demo.image_button.js | 26 +- demo/js/base/button/demo.joker.icon.js | 26 + demo/js/base/button/demo.text_button.js | 26 +- demo/js/base/demo.html.js | 36 +- demo/js/base/demo.icon_label.js | 38 +- demo/js/base/demo.label.js | 286 ++-- demo/js/base/demo.label.scene.js | 1231 +++++++++-------- demo/js/base/demo.message.js | 28 +- demo/js/base/demo.pager.js | 224 +-- demo/js/base/editor/demo.editor.js | 129 +- demo/js/base/editor/demo.multifile_editor.js | 49 +- demo/js/base/editor/demo.textarea_editor.js | 62 +- demo/js/base/tip/demo.bubble.js | 81 +- demo/js/base/tip/demo.title.js | 115 +- demo/js/base/tip/demo.toast.js | 96 +- demo/js/base/tree/demo.part_tree.js | 154 ++- demo/js/base/tree/demo.sync_tree.js | 144 +- demo/js/base/tree/demo.tree_view.js | 81 +- demo/js/case/combo/demo.bubble_combo.js | 153 +- .../combo/demo.editor_icon_check_combo.js | 85 +- demo/js/case/combo/demo.icon_combo.js | 62 +- .../case/combo/demo.icon_text_value_combo.js | 66 +- .../combo/demo.search_text_value_combo.js | 206 +-- .../combo/demo.text_value_down_list_combo.js | 135 +- .../case/combo/demo.text_vlaue_check_combo.js | 82 +- demo/js/case/demo.calendar.js | 35 +- demo/js/case/demo.click.effect.js | 81 +- demo/js/case/demo.color_chooser.js | 70 +- demo/js/case/demo.color_chooser_popup.js | 47 +- demo/js/case/demo.segment.js | 52 +- demo/js/case/editor/demo.clear_editor.js | 39 +- demo/js/case/editor/demo.shelter_editor.js | 61 +- demo/js/case/editor/demo.sign_editor.js | 31 +- .../case/editor/demo.simple_state_editor.js | 53 +- demo/js/case/editor/demo.state_editor.js | 54 +- demo/js/case/item/demo.multi_select_item.js | 36 +- demo/js/case/item/demo.single_select_item.js | 37 +- .../item/demo.single_select_radio_item.js | 37 +- demo/js/case/list/demo.lazy_loader.js | 32 +- demo/js/case/list/demo.select_list.js | 32 +- demo/js/case/pager/demo.all_count_pager.js | 41 +- demo/js/case/pager/demo.direction_pager.js | 76 +- demo/js/case/pane/demo.list_pane.js | 49 +- demo/js/case/pane/demo.multi_popup_view.js | 69 +- demo/js/case/pane/demo.panel.js | 45 +- demo/js/case/pane/demo.popup_panel.js | 69 +- demo/js/case/tree/demo.display_tree.js | 86 +- demo/js/case/tree/demo.level_tree.js | 179 +-- demo/js/case/tree/demo.simple_tree.js | 163 ++- demo/js/case/triggers/demo.editor_trigger.js | 41 +- demo/js/case/triggers/demo.icon_trigger.js | 38 +- .../case/triggers/demo.select_text_trigger.js | 40 +- demo/js/case/triggers/demo.text_trigger.js | 40 +- demo/js/center.js | 36 +- demo/js/component/demo.form.js | 173 +-- .../component/demo.treevaluechoosercombo.js | 27 +- .../js/component/demo.treevaluechooserpane.js | 18 +- demo/js/component/demo.valuechoosercombo.js | 28 +- demo/js/component/demo.valuechooserpane.js | 21 +- demo/js/config/demo.pane.js | 60 +- .../core/abstract/combination/demo.combo.js | 607 ++++---- .../core/abstract/combination/demo.combo2.js | 124 +- .../core/abstract/combination/demo.combo3.js | 62 +- .../abstract/combination/demo.combo_group.js | 114 +- .../abstract/combination/demo.expander.js | 81 +- .../core/abstract/combination/demo.loader.js | 44 +- .../abstract/combination/demo.navigation.js | 54 +- .../core/abstract/combination/demo.sercher.js | 171 ++- .../abstract/combination/demo.switcher.js | 106 +- demo/js/core/abstract/combination/demo.tab.js | 95 +- demo/js/core/abstract/demo.button_group.js | 126 +- demo/js/core/abstract/demo.button_tree.js | 54 +- demo/js/core/abstract/demo.collection_view.js | 55 +- demo/js/core/abstract/demo.custom_tree.js | 367 ++--- demo/js/core/abstract/demo.grid_view.js | 76 +- demo/js/core/abstract/demo.list_view.js | 29 +- demo/js/core/abstract/demo.virtual_group.js | 165 +-- .../core/abstract/demo.virtual_group_item.js | 43 + demo/js/core/abstract/demo.virtual_list.js | 27 +- demo/js/core/layout/demo.absolute.js | 41 +- demo/js/core/layout/demo.border.js | 101 +- demo/js/core/layout/demo.center.js | 65 +- demo/js/core/layout/demo.center_adapt.js | 33 +- demo/js/core/layout/demo.float_center.js | 47 +- demo/js/core/layout/demo.flow.js | 165 +-- demo/js/core/layout/demo.grid.js | 276 ++-- demo/js/core/layout/demo.horizontal.js | 269 ++-- demo/js/core/layout/demo.horizontal_adapt.js | 93 +- demo/js/core/layout/demo.horizontal_auto.js | 68 +- demo/js/core/layout/demo.horizontal_float.js | 33 +- demo/js/core/layout/demo.htape.js | 40 +- .../layout/demo.left_right_vertical_adapt.js | 80 +- demo/js/core/layout/demo.table.js | 274 ++-- demo/js/core/layout/demo.td.js | 122 +- demo/js/core/layout/demo.vertical.js | 45 +- demo/js/core/layout/demo.vertical_adapt.js | 68 +- demo/js/core/layout/demo.vtape.js | 40 +- demo/js/core/popup/demo.layer.js | 134 +- demo/js/core/popup/demo.popover.js | 400 +++--- demo/js/core/popup/demo.popup_view.js | 72 +- demo/js/core/popup/demo.searcher_view.js | 94 +- demo/js/face.js | 1076 ++++++++------ demo/js/main.js | 67 +- demo/js/preview.js | 128 +- demo/js/router.js | 17 + demo/js/widget/basewidget/demo.buttons.js | 81 +- demo/js/widget/basewidget/demo.items.js | 71 +- demo/js/widget/basewidget/demo.nodes.js | 65 +- demo/js/widget/basewidget/demo.sagments.js | 61 +- demo/js/widget/basewidget/demo.tips.js | 272 ++-- demo/js/widget/collapase/demo.collapse.js | 129 +- demo/js/widget/date/demo.datepane.js | 160 ++- demo/js/widget/date/demo.multidate_combo.js | 192 +-- demo/js/widget/datetime/demo.datetime.js | 90 +- demo/js/widget/downlist/demo.downlist.icon.js | 13 + demo/js/widget/downlist/demo.downlist.js | 478 ++++--- demo/js/widget/editor/demo.search_editor.js | 50 +- demo/js/widget/editor/demo.text_editor.js | 49 +- .../multiselect/demo.multi_select_combo.js | 104 +- .../multiselect/demo.multi_select_list.js | 115 +- .../widget/multitree/demo.multi_tree_combo.js | 116 +- .../widget/multitree/demo.multi_tree_list.js | 124 +- .../widget/numbereditor/demo.number_editor.js | 61 +- .../numberinterval/demo.number_interval.js | 76 +- .../demo.multilayer_select_tree_combo.js | 50 +- .../selecttree/demo.select_tree_combo.js | 50 +- .../singleselct/demo.single_select_combo.js | 118 +- .../demo.multilayer_single_tree_combo.js | 48 +- .../singletree/demo.single_tree_combo.js | 76 +- demo/js/widget/slider/demo.slider.js | 122 +- demo/js/widget/timecombo/demo.timecombo.js | 87 +- .../widget/timeinterval/demo.time_interval.js | 191 +-- .../tree/demo.multilayer_select_level_tree.js | 70 +- .../tree/demo.multilayer_single_level_tree.js | 74 +- demo/js/widget/tree/demo.select_level_tree.js | 70 +- demo/js/widget/tree/demo.single_level_tree.js | 70 +- demo/js/widget/year/demo.year.js | 79 +- .../widget/yearinterval/demo.year_interval.js | 88 +- .../widget/yearmonth/demo.year_month_combo.js | 86 +- .../demo.year_month_interval.js | 82 +- .../yearquarter/demo.year_quarter_combo.js | 91 +- .../demo.yearquarterinterval.js | 91 +- tsconfig.json | 4 + 145 files changed, 8938 insertions(+), 7638 deletions(-) create mode 100644 demo/js/base/button/demo.joker.icon.js create mode 100644 demo/js/core/abstract/demo.virtual_group_item.js create mode 100644 demo/js/router.js create mode 100644 demo/js/widget/downlist/demo.downlist.icon.js diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index 2514b949e..823ea0d6c 100644 --- a/demo/js/base/button/demo.button.js +++ b/demo/js/base/button/demo.button.js @@ -1,408 +1,449 @@ -(function () { - var JokerIcon = BI.inherit(BI.Widget, { - render: function () { - var self = this; +import { shortcut, Widget, parseInt, Msg, map } from "@/core"; - return { - type: "bi.label", - cls: "anim-rotate", - ref: function(ref) { - self.text = ref; - }, - }; - }, - loading: function () { - this.text.setText("🤡"); - }, - loaded: function () { - this.text.setText(""); - }, - }); - BI.shortcut("demo.joker.icon", JokerIcon); -}()); +@shortcut() +export class Button extends Widget { + static xtype = "demo.button"; + + props = { baseCls: "demo-button" }; -Demo.Button = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-button", - }, - render: function () { - var 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: function () { - return BI.parseInt(Math.random() * 100) % 10 + "提示"; - }, - handler: function () { - BI.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, - }]; + 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: BI.map(items, function (index, value) { + items: map(items, (index, value) => { return { el: value, }; }), }; - }, -}); -BI.shortcut("demo.button", Demo.Button); + } +} diff --git a/demo/js/base/button/demo.icon_button.js b/demo/js/base/button/demo.icon_button.js index a7bdb6c99..1f61b18ee 100644 --- a/demo/js/base/button/demo.icon_button.js +++ b/demo/js/base/button/demo.icon_button.js @@ -1,24 +1,28 @@ -Demo.Button = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-button" - }, - render: function () { - var items = [ +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 - } + height: 25, + }, } ]; + return { type: "bi.left", vgap: 200, hgap: 20, - items: items + items, }; } -}); -BI.shortcut("demo.icon_button", Demo.Button); \ No newline at end of file +} diff --git a/demo/js/base/button/demo.image_button.js b/demo/js/base/button/demo.image_button.js index 3a6d475a7..f46bf9ab1 100644 --- a/demo/js/base/button/demo.image_button.js +++ b/demo/js/base/button/demo.image_button.js @@ -1,24 +1,28 @@ -Demo.Button = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-button" - }, - render: function () { - var items = [ +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 - } + height: 100, + }, } ]; + return { type: "bi.left", vgap: 200, hgap: 20, - items: items + items, }; } -}); -BI.shortcut("demo.image_button", Demo.Button); \ No newline at end of file +} diff --git a/demo/js/base/button/demo.joker.icon.js b/demo/js/base/button/demo.joker.icon.js new file mode 100644 index 000000000..934351a2d --- /dev/null +++ b/demo/js/base/button/demo.joker.icon.js @@ -0,0 +1,26 @@ +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(""); + } +} diff --git a/demo/js/base/button/demo.text_button.js b/demo/js/base/button/demo.text_button.js index a98414a8c..e67b33b79 100644 --- a/demo/js/base/button/demo.text_button.js +++ b/demo/js/base/button/demo.text_button.js @@ -1,24 +1,28 @@ -Demo.Button = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-button" - }, - render: function () { - var items = [ +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" - } + keyword: "w", + }, } ]; + return { type: "bi.left", vgap: 200, hgap: 20, - items: items + items, }; } -}); -BI.shortcut("demo.text_button", Demo.Button); \ No newline at end of file +} diff --git a/demo/js/base/demo.html.js b/demo/js/base/demo.html.js index 73f92f53a..f0dc67cf7 100644 --- a/demo/js/base/demo.html.js +++ b/demo/js/base/demo.html.js @@ -1,20 +1,26 @@ -Demo.Html = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-html" - }, - render: function () { +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: "

在bi.html标签中使用html原生标签

" - }, { - type: "bi.html", - text: "" - }], + items: [ + { + type: "bi.html", + text: "

在bi.html标签中使用html原生标签

", + }, + { + type: "bi.html", + text: "", + } + ], hgap: 300, - vgap: 20 + vgap: 20, }; } -}); -BI.shortcut("demo.html", Demo.Html); \ No newline at end of file +} diff --git a/demo/js/base/demo.icon_label.js b/demo/js/base/demo.icon_label.js index f9fff3b66..1e6e34474 100644 --- a/demo/js/base/demo.icon_label.js +++ b/demo/js/base/demo.icon_label.js @@ -1,20 +1,26 @@ -Demo.IconLabel = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-bubble" - }, - render: function () { +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 - }] + items: [ + { + type: "bi.label", + text: "这是一个icon标签,在加了border之后仍然是居中显示的", + }, + { + type: "bi.icon_label", + cls: "date-font bi-border", + height: 40, + width: 40, + } + ], }; } -}); -BI.shortcut("demo.icon_label", Demo.IconLabel); \ No newline at end of file +} diff --git a/demo/js/base/demo.label.js b/demo/js/base/demo.label.js index 0f5158f13..60c67d9e7 100644 --- a/demo/js/base/demo.label.js +++ b/demo/js/base/demo.label.js @@ -1,139 +1,167 @@ -Demo.Label = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-label" - }, - render: function () { +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: [{ + 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: "在float布局中自适应的,不设高度和宽度，文字多长这个就有多长" - }], - height: 30 - }, { - type: "bi.left", - items: [{ + text: "这是一个label控件，使用水平居左", + textAlign: "left", + height: 30, + }, + { type: "bi.label", - cls: "layout-bg4", - text: "在float布局中自适应的，设置了宽度200，后面还有", - width: 200 - }], - height: 30 - }, { - type: "bi.left", - items: [{ + 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", - text: "在float布局中自适应的，设置了高度，文字多长这个就有多长", cls: "layout-bg5", - height: 30 - }], - height: 30 - }], + 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 + vgap: 20, }; } -}); -BI.shortcut("demo.label", Demo.Label); \ No newline at end of file +} diff --git a/demo/js/base/demo.label.scene.js b/demo/js/base/demo.label.scene.js index 13f76850a..50a09866b 100644 --- a/demo/js/base/demo.label.scene.js +++ b/demo/js/base/demo.label.scene.js @@ -1,576 +1,659 @@ -/** - * 整理所有label场景 - */ -Demo.LabelScene = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-label" - }, - render: function () { - var 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 - } - ] - }))); +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: items, + items, hgap: 300, - vgap: 20 + vgap: 20, }; - }, + } - createExpander: function (text, popup) { + createExpander(text, popup) { return { type: "bi.vertical", items: [ @@ -578,13 +661,13 @@ Demo.LabelScene = BI.inherit(BI.Widget, { type: "bi.label", cls: "demo-font-weight-bold", textAlign: "left", - text: text, - height: 30 - }, { - el: popup + text, + height: 30, + }, + { + el: popup, } - ] + ], }; } -}); -BI.shortcut("demo.label_scene", Demo.LabelScene); \ No newline at end of file +} diff --git a/demo/js/base/demo.message.js b/demo/js/base/demo.message.js index ec1a1c27b..880f8957f 100644 --- a/demo/js/base/demo.message.js +++ b/demo/js/base/demo.message.js @@ -1,8 +1,13 @@ -Demo.Message = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-bubble" - }, - render: function () { +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: [ @@ -11,13 +16,12 @@ Demo.Message = BI.inherit(BI.Widget, { type: "bi.button", text: "点击我弹出一个消息框", height: 30, - handler: function () { - BI.Msg.alert("测试消息框", "我是测试消息框的内容"); - } - } + handler() { + Msg.alert("测试消息框", "我是测试消息框的内容"); + }, + }, } - ] + ], }; } -}); -BI.shortcut("demo.message", Demo.Message); \ No newline at end of file +} diff --git a/demo/js/base/demo.pager.js b/demo/js/base/demo.pager.js index a5dd380a3..571917953 100644 --- a/demo/js/base/demo.pager.js +++ b/demo/js/base/demo.pager.js @@ -1,120 +1,126 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, - render: function () { +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, + items: [ + { + type: "bi.label", height: 30, - handler: function () { - - } + text: "默认的分页", }, - next: { - type: "bi.button", - cls: "", - text: "下一页", - value: "next", - once: false, - handler: function () { - - } - } - }, { - 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, + { + type: "bi.pager", + height: 50, + pages: 18, + groups: 5, + curr: 6, + first: "首页", + last: "尾页", + }, + { + type: "bi.label", height: 30, - handler: function () { - - } + text: "显示上一页、下一页、首页、尾页", }, - next: { - type: "bi.button", - cls: "", - text: "下一页", - value: "next", - once: false, - handler: function () { - - } + { + 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: "<尾页", }, - hasPrev: function (v) { - return v > 1; + { + 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)", }, - hasNext: function (v) { - return v < 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; + }, } - }] + ], }; } -}); -BI.shortcut("demo.pager", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/base/editor/demo.editor.js b/demo/js/base/editor/demo.editor.js index bc06b2242..fbfc7bc40 100644 --- a/demo/js/base/editor/demo.editor.js +++ b/demo/js/base/editor/demo.editor.js @@ -1,9 +1,14 @@ -Demo.Editor = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-editor", - }, - render: function () { - var editor1 = BI.createWidget({ +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: "报错信息显示在控件上方", @@ -11,47 +16,47 @@ Demo.Editor = BI.inherit(BI.Widget, { width: 200, height: 24, }); - editor1.on(BI.Editor.EVENT_ENTER, function () { + editor1.on(BIEditor.EVENT_ENTER, () => { editor1.blur(); }); - var editor2 = BI.createWidget({ + const editor2 = createWidget({ type: "bi.editor", cls: "bi-border", watermark: "输入'a'会有错误信息", disabled: true, errorText: "字段不可重名", - validationChecker: function (v) { + validationChecker(v) { if (v == "a") { return false; } - + return true; }, allowBlank: true, width: 200, height: 24, }); - var editor3 = BI.createWidget({ + const editor3 = createWidget({ type: "bi.editor", cls: "bi-border", watermark: "输入'a'会有错误信息且回车键不能退出编辑", errorText: "字段不可重名", value: "a", - validationChecker: function (v) { + validationChecker(v) { if (v == "a") { return false; } - + return true; }, - quitChecker: function (v) { + quitChecker(v) { return false; }, allowBlank: true, width: 300, height: 24, }); - var editor4 = BI.createWidget({ + const editor4 = createWidget({ type: "bi.editor", cls: "bi-border", inputType: "password", @@ -61,53 +66,59 @@ Demo.Editor = BI.inherit(BI.Widget, { width: 300, height: 24, }); - BI.createWidget({ + 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: function () { - editor1.setEnable(false); - editor2.setEnable(false); - editor3.setEnable(false); - }, - height: 30, + items: [ + { + el: editor1, + left: 0, + top: 0, + }, + { + el: editor2, + left: 250, + top: 30, + }, + { + el: editor3, + left: 500, + top: 60, }, - left: 100, - bottom: 60, - }, { - el: { - type: "bi.button", - text: "enable", - handler: function () { - editor1.setEnable(true); - editor2.setEnable(true); - editor3.setEnable(true); + { + el: editor4, + left: 700, + top: 60, + }, + { + el: { + type: "bi.button", + text: "disable", + handler() { + editor1.setEnable(false); + editor2.setEnable(false); + editor3.setEnable(false); + }, + height: 30, }, - height: 30, + left: 100, + bottom: 60, }, - left: 200, - bottom: 60, - }], + { + el: { + type: "bi.button", + text: "enable", + handler() { + editor1.setEnable(true); + editor2.setEnable(true); + editor3.setEnable(true); + }, + height: 30, + }, + left: 200, + bottom: 60, + } + ], }); - }, -}); -BI.shortcut("demo.editor", Demo.Editor); + } +} diff --git a/demo/js/base/editor/demo.multifile_editor.js b/demo/js/base/editor/demo.multifile_editor.js index ef37a9d7e..103d98694 100644 --- a/demo/js/base/editor/demo.multifile_editor.js +++ b/demo/js/base/editor/demo.multifile_editor.js @@ -1,26 +1,33 @@ -Demo.CodeEditor = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-editor" - }, - render: function () { +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", + items: [ + { + el: { + type: "bi.adaptive", + cls: "layout-bg1", + items: [ + { + type: "bi.multifile_editor", + width: 400, + height: 300, + } + ], width: 400, - height: 300 - }], - width: 400, - height: 300 - }, - top: 50, - left: 50 - }] + height: 300, + }, + top: 50, + left: 50, + } + ], }; } -}); -BI.shortcut("demo.multifile_editor", Demo.CodeEditor); \ No newline at end of file +} diff --git a/demo/js/base/editor/demo.textarea_editor.js b/demo/js/base/editor/demo.textarea_editor.js index 4eb6356dc..7c7d42497 100644 --- a/demo/js/base/editor/demo.textarea_editor.js +++ b/demo/js/base/editor/demo.textarea_editor.js @@ -1,44 +1,52 @@ -Demo.CodeEditor = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-editor" - }, - render: function () { - var editor = BI.createWidget({ +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: function (v) { - return BI.isNotEmptyString(v); + validationChecker(v) { + return isNotEmptyString(v); }, }); - editor.on(BI.TextAreaEditor.EVENT_FOCUS, function () { - BI.Msg.toast("Focus"); + editor.on(TextAreaEditor.EVENT_FOCUS, () => { + Msg.toast("Focus"); }); - editor.on(BI.TextAreaEditor.EVENT_BLUR, function () { - BI.Msg.toast("Blur"); + editor.on(TextAreaEditor.EVENT_BLUR, () => { + Msg.toast("Blur"); }); - BI.createWidget({ + createWidget({ type: "bi.vertical", element: this, hgap: 30, vgap: 20, - items: [editor, { - type: "bi.button", - text: "getValue", - handler: function () { - BI.Msg.toast(JSON.stringify(editor.getValue())); + items: [ + editor, + { + type: "bi.button", + text: "getValue", + handler() { + Msg.toast(JSON.stringify(editor.getValue())); + }, + }, + { + type: "bi.button", + text: "setValue", + handler() { + editor.setValue("测试数据"); + }, } - }, { - type: "bi.button", - text: "setValue", - handler: function () { - editor.setValue("测试数据"); - } - }] + ], }); } -}); -BI.shortcut("demo.textarea_editor", Demo.CodeEditor); \ No newline at end of file +} diff --git a/demo/js/base/tip/demo.bubble.js b/demo/js/base/tip/demo.bubble.js index 717ff82d2..7396d9910 100644 --- a/demo/js/base/tip/demo.bubble.js +++ b/demo/js/base/tip/demo.bubble.js @@ -1,77 +1,84 @@ -Demo.Bubble = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-bubble" - }, - render: function () { - var btns = []; - var items = [ +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: function (_ref) { + ref(_ref) { btns.push(_ref); }, type: "bi.button", text: "bubble测试(消息)", title: "123", height: 30, - handler: function () { - BI.Bubbles.show("singleBubble1", "bubble测试", this, { - level: "common" + handler() { + Bubbles.show("singleBubble1", "bubble测试", this, { + level: "common", }); - } - } - }, { + }, + }, + }, + { el: { - ref: function (_ref) { + ref(_ref) { btns.push(_ref); }, type: "bi.button", text: "bubble测试(成功)", height: 30, - handler: function () { - BI.Bubbles.show("singleBubble2", "bubble测试", this, { + handler() { + Bubbles.show("singleBubble2", "bubble测试", this, { offsetStyle: "center", - level: "success" + level: "success", }); - } - } - }, { + }, + }, + }, + { el: { - ref: function (_ref) { + ref(_ref) { btns.push(_ref); }, type: "bi.button", text: "bubble测试(错误)", height: 30, - handler: function () { - BI.Bubbles.show("singleBubble3", "bubble测试", this, { + handler() { + Bubbles.show("singleBubble3", "bubble测试", this, { offsetStyle: "right", - level: "error" + level: "error", }); - } - } - }, { + }, + }, + }, + { el: { - ref: function (_ref) { + ref(_ref) { btns.push(_ref); }, type: "bi.button", text: "bubble测试(警告)", height: 30, - handler: function () { - BI.Bubbles.show("singleBubble4", "bubble测试", this, { - level: "warning" + handler() { + Bubbles.show("singleBubble4", "bubble测试", this, { + level: "warning", }); - } - } + }, + }, } ]; + return { type: "bi.left", vgap: 200, hgap: 20, - items: items + items, }; } -}); -BI.shortcut("demo.bubble", Demo.Bubble); \ No newline at end of file +} diff --git a/demo/js/base/tip/demo.title.js b/demo/js/base/tip/demo.title.js index 5a983068d..c30d360db 100644 --- a/demo/js/base/tip/demo.title.js +++ b/demo/js/base/tip/demo.title.js @@ -1,59 +1,68 @@ -Demo.Title = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-title" - }, - render: function () { +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: function () { - return { - level: "success", - text: "自定义title\n提示效果", - textAlign: "center" - }; + items: [ + { + type: "bi.label", + cls: "layout-bg1", + height: 50, + title: "title提示", + text: "移上去有title提示", + textAlign: "center", }, - text: "title提示支持对象,作为bi.tooltip的props", - 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 + vgap: 20, }; } -}); -BI.shortcut("demo.title", Demo.Title); +} diff --git a/demo/js/base/tip/demo.toast.js b/demo/js/base/tip/demo.toast.js index fcb845964..7447041bb 100644 --- a/demo/js/base/tip/demo.toast.js +++ b/demo/js/base/tip/demo.toast.js @@ -1,74 +1,86 @@ -Demo.Toast = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-toast" - }, - render: function () { - var items = [ +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: function () { - BI.Msg.toast("这是一条简单的数据", { - level: "success" + handler() { + Msg.toast("这是一条简单的数据", { + level: "success", }); - } - } - }, { + }, + }, + }, + { el: { type: "bi.button", text: "很长的Toast测试(normal)", height: 30, - handler: function () { - BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据", { - - }); - } - } - }, { + handler() { + Msg.toast( + "这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据", + {} + ); + }, + }, + }, + { el: { type: "bi.button", text: "非常长的Toast测试(warning)", height: 30, - handler: function () { - BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据", { - level: "warning", - autoClose: false - }); - } - } - }, { + handler() { + Msg.toast( + "这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据", + { + level: "warning", + autoClose: false, + } + ); + }, + }, + }, + { el: { type: "bi.button", text: "错误提示Toast测试(error)", height: 30, - handler: function () { - BI.Msg.toast("错误提示Toast测试", { - level: "error" + handler() { + Msg.toast("错误提示Toast测试", { + level: "error", }); - } - } - }, { + }, + }, + }, + { el: { type: "bi.button", text: "错误提示Toast测试(error), 此toast不会自动消失", height: 30, - handler: function () { - BI.Msg.toast("错误提示Toast测试", { - autoClose: false + handler() { + Msg.toast("错误提示Toast测试", { + autoClose: false, }); - } - } + }, + }, } ]; - BI.createWidget({ + createWidget({ type: "bi.left", element: this, vgap: 200, hgap: 20, - items: items + items, }); } -}); -BI.shortcut("demo.toast", Demo.Toast); \ No newline at end of file +} diff --git a/demo/js/base/tree/demo.part_tree.js b/demo/js/base/tree/demo.part_tree.js index 339fdabd1..f24ff62b5 100644 --- a/demo/js/base/tree/demo.part_tree.js +++ b/demo/js/base/tree/demo.part_tree.js @@ -1,81 +1,97 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, TreeView, isNull } from "@/core"; - mounted: function () { +@shortcut() +export class Func extends Widget { + static xtype = "demo.part_tree"; + + props = { baseCls: "demo-func" }; + + mounted() { this.partTree.stroke({ - keyword: "1" + keyword: "1", }); - }, + } + + render() { + const self = this; - render: function () { - var self = this; return { type: "bi.vtape", - items: [{ - type: "bi.label", - height: 50, - text: "先初始化一份数据，然后再异步获取数据的树" - }, { - type: "bi.part_tree", - ref: function (_ref) { - self.partTree = _ref; + items: [ + { + type: "bi.label", + height: 50, + text: "先初始化一份数据，然后再异步获取数据的树", }, - paras: { - selectedValues: {"1": {}, "2": {"1": {}}} - }, - itemsCreator: function (op, callback) { - if (op.type === BI.TreeView.REQ_TYPE_INIT_DATA) { + { + 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: "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: BI.isNull(op.id) + 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), }); - 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: BI.isNull(op.id) - }); + }, } - }] + ], }; - } -}); -BI.shortcut("demo.part_tree", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/base/tree/demo.sync_tree.js b/demo/js/base/tree/demo.sync_tree.js index 682619b7f..f8bddb317 100644 --- a/demo/js/base/tree/demo.sync_tree.js +++ b/demo/js/base/tree/demo.sync_tree.js @@ -1,19 +1,23 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, isNull } from "@/core"; - mounted: function () { +@shortcut() +export class Func extends Widget { + static xtype = "demo.sync_tree"; + + props = { baseCls: "demo-func" }; + + mounted() { this.syncTree1.stroke({ - keyword: "1" + keyword: "1", }); this.syncTree2.stroke({ - keyword: "1" + keyword: "1", }); - }, + } + + render() { + const self = this; - render: function () { - var self = this; return { type: "bi.vtape", rowSize: [0.5, 0.5], @@ -24,39 +28,44 @@ Demo.Func = BI.inherit(BI.Widget, { { type: "bi.label", height: 50, - text: "可以异步获取数据的树" - }, { + text: "可以异步获取数据的树", + }, + { type: "bi.async_tree", - ref: function (_ref) { + ref(_ref) { self.syncTree1 = _ref; }, paras: { - selectedValues: { "1": {}, "2": { "1": {} } } + selectedValues: { 1: {}, 2: { 1: {} } }, }, - itemsCreator: function (op, callback) { + 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: BI.isNull(op.id) + 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", @@ -64,44 +73,47 @@ Demo.Func = BI.inherit(BI.Widget, { { type: "bi.label", height: 50, - text: "showIcon属性搭配节点iconCls,可以显示图标" - }, { + text: "showIcon属性搭配节点iconCls,可以显示图标", + }, + { type: "bi.async_tree", - ref: function (_ref) { + ref(_ref) { self.syncTree2 = _ref; }, paras: { - selectedValues: { "1": {}, "2": { "1": {} } } + selectedValues: { 1: {}, 2: { 1: {} } }, }, showIcon: true, - itemsCreator: function (op, callback) { + 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: BI.isNull(op.id) + 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), }); - } - }, - ] + }, + } + ], } - ] + ], }; - } -}); -BI.shortcut("demo.sync_tree", Demo.Func); +} diff --git a/demo/js/base/tree/demo.tree_view.js b/demo/js/base/tree/demo.tree_view.js index 959742a4c..a41a43a89 100644 --- a/demo/js/base/tree/demo.tree_view.js +++ b/demo/js/base/tree/demo.tree_view.js @@ -1,52 +1,57 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget } from "@/core"; - _createDefaultTree: function () { - var tree = BI.createWidget({ - type: "bi.tree_view" +@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"} + { 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: function () { - var self = this; - BI.createWidget({ + 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" + items: [ + { + column: 0, + row: 0, + el: { + type: "bi.vtape", + items: [ + { + el: this._createDefaultTree(), }, - height: 50 - } - ] + { + 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, + } + ], + }, } - }] + ], }); } -}); -BI.shortcut("demo.tree_view", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/combo/demo.bubble_combo.js b/demo/js/case/combo/demo.bubble_combo.js index 00072f6bc..b1dcfd8a0 100644 --- a/demo/js/case/combo/demo.bubble_combo.js +++ b/demo/js/case/combo/demo.bubble_combo.js @@ -1,121 +1,150 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget, makeArray } from "@/core"; +import { BubbleCombo } from "@/case/combo/bubblecombo/combo.bubble"; - render: function () { - var self = this, count = 1; - var combo1 = BI.createWidget({ +@shortcut() +export class Func extends Widget { + static xtype = "demo.bubble_combo"; + + props = { baseCls: "demo-func" }; + + render() { + let self = this, + count = 1; + const combo1 = createWidget({ type: "bi.bubble_combo", trigger: "click,hover", el: { type: "bi.button", text: "测试", - height: 24 + height: 24, }, popup: { el: { type: "bi.button_group", - items: BI.makeArray(100, { + items: makeArray(100, { type: "bi.text_item", height: 24, - text: "item" + text: "item", }), - layouts: [{ - type: "bi.vertical" - }] + layouts: [ + { + type: "bi.vertical", + } + ], }, - maxHeight: 200 - } + maxHeight: 200, + }, }); - var combo2 = BI.createWidget({ + const combo2 = createWidget({ type: "bi.bubble_combo", direction: "right", el: { type: "bi.button", text: "测试", - height: 24 + height: 24, }, popup: { type: "bi.text_bubble_bar_popup_view", text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字", - ref: function () { + ref() { self.popup = this; - } + }, }, - listeners: [{ - eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"); + listeners: [ + { + eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW, + action() { + self.popup.populate( + count++ % 2 === 1 + ? "我的文字变少了" + : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字" + ); + }, } - }] + ], }); - var combo3 = BI.createWidget({ + const combo3 = createWidget({ type: "bi.bubble_combo", el: { type: "bi.button", text: "测试", - height: 25 + height: 25, }, popup: { type: "bi.text_bubble_bar_popup_view", text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字", - ref: function () { + ref() { self.popup = this; - } + }, }, - listeners: [{ - eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"); + listeners: [ + { + eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW, + action() { + self.popup.populate( + count++ % 2 === 1 + ? "我的文字变少了" + : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字" + ); + }, } - }] + ], }); - var combo4 = BI.createWidget({ + const combo4 = createWidget({ type: "bi.bubble_combo", el: { type: "bi.button", text: "测试", - height: 25 + height: 25, }, popup: { type: "bi.text_bubble_bar_popup_view", text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字", - ref: function () { + ref() { self.popup = this; - } + }, }, - listeners: [{ - eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW, - action: function () { - self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字"); + listeners: [ + { + eventName: BubbleCombo.EVENT_BEFORE_POPUPVIEW, + action() { + self.popup.populate( + count++ % 2 === 1 + ? "我的文字变少了" + : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字" + ); + }, } - }] + ], }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [{ - el: combo1, - left: 150, - top: 10 - }, { - el: combo2, - left: 10, - bottom: 200 - }, { - el: combo3, - right: 10, - bottom: 10 - }, { - el: combo4, - right: 10, - top: 10 - }] + items: [ + { + el: combo1, + left: 150, + top: 10, + }, + { + el: combo2, + left: 10, + bottom: 200, + }, + { + el: combo3, + right: 10, + bottom: 10, + }, + { + el: combo4, + right: 10, + top: 10, + } + ], }); } -}); -BI.shortcut("demo.bubble_combo", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/combo/demo.editor_icon_check_combo.js b/demo/js/case/combo/demo.editor_icon_check_combo.js index b4048f2ba..3a0dcb60b 100644 --- a/demo/js/case/combo/demo.editor_icon_check_combo.js +++ b/demo/js/case/combo/demo.editor_icon_check_combo.js @@ -1,45 +1,52 @@ -/** - * Created by Dailer on 2017/7/11. - */ -Demo.TextValueCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, - render: function () { - var self = this; +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class TextValueCombo extends Widget { + static xtype = "demo.editor_icon_check_combo"; + + props = { baseCls: "" }; + + render() { + const self = this; + return { type: "bi.horizontal_auto", - items: [{ - type: "bi.editor_icon_check_combo", - ref: function () { - self.combo = this; + items: [ + { + type: "bi.editor_icon_check_combo", + ref() { + self.combo = this; + }, + watermark: "默认值", + width: 200, + height: 24, + value: 2, + items: [ + { + // text: "MVC-1", + value: "1", + }, + { + // text: "MVC-2", + value: "2", + }, + { + // text: "MVC-3", + value: "3", + } + ], }, - watermark: "默认值", - width: 200, - height: 24, - value: 2, - items: [{ - // text: "MVC-1", - value: "1" - }, { - // text: "MVC-2", - value: "2" - }, { - // text: "MVC-3", - value: "3" - }] - }, { - type: "bi.button", - width: 90, - height: 25, - text: "setValue为空", - handler: function () { - self.combo.setValue() + { + type: "bi.button", + width: 90, + height: 25, + text: "setValue为空", + handler() { + self.combo.setValue(); + }, } - }], - vgap: 20 + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.editor_icon_check_combo", Demo.TextValueCombo); \ No newline at end of file +} diff --git a/demo/js/case/combo/demo.icon_combo.js b/demo/js/case/combo/demo.icon_combo.js index bdd90d423..f142f0b23 100644 --- a/demo/js/case/combo/demo.icon_combo.js +++ b/demo/js/case/combo/demo.icon_combo.js @@ -1,39 +1,41 @@ -/** - * Created by Dailer on 2017/7/12. - */ -Demo.IconCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, +import { shortcut, Widget } from "@/core"; - render: function () { +@shortcut() +export class IconCombo extends Widget { + static xtype = "demo.icon_combo"; - var self = this; + props = { baseCls: "" }; + render() { + const self = this; return { type: "bi.horizontal_auto", - items: [{ - type: "bi.icon_combo", - container: "body", - ref: function (_ref) { - self.refs = _ref; - }, - value: "第二项", - items: [{ - value: "第一项", - iconCls: "close-font" - }, { + items: [ + { + type: "bi.icon_combo", + container: "body", + ref(_ref) { + self.refs = _ref; + }, value: "第二项", - iconCls: "search-font" - }, { - value: "第三项", - iconCls: "copy-font" - }] - }], - vgap: 20 + items: [ + { + value: "第一项", + iconCls: "close-font", + }, + { + value: "第二项", + iconCls: "search-font", + }, + { + value: "第三项", + iconCls: "copy-font", + } + ], + } + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.icon_combo", Demo.IconCombo); \ No newline at end of file +} diff --git a/demo/js/case/combo/demo.icon_text_value_combo.js b/demo/js/case/combo/demo.icon_text_value_combo.js index d473c87bf..77f3703b0 100644 --- a/demo/js/case/combo/demo.icon_text_value_combo.js +++ b/demo/js/case/combo/demo.icon_text_value_combo.js @@ -1,36 +1,40 @@ -/** - * Created by Windy on 2017/12/13. - */ -Demo.IconTextValueCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, - render: function () { +import { shortcut, Widget } from "@/core"; +@shortcut() +export class IconTextValueCombo extends Widget { + static xtype = "demo.icon_text_value_combo"; + + props = { baseCls: "" }; + + render() { return { type: "bi.horizontal_auto", - items: [{ - type: "bi.icon_text_value_combo", - text: "默认值", - // defaultIconCls: "next-page-h-font", - width: 300, - items: [{ - text: "MVC-1", - iconCls: "close-font", - value: 1 - }, { - text: "MVC-2", - iconCls: "date-font", - value: 2 - }, { - text: "MVC-3", - iconCls: "search-close-h-font", - value: 3 - }] - }], - vgap: 20 + items: [ + { + type: "bi.icon_text_value_combo", + text: "默认值", + // defaultIconCls: "next-page-h-font", + width: 300, + items: [ + { + text: "MVC-1", + iconCls: "close-font", + value: 1, + }, + { + text: "MVC-2", + iconCls: "date-font", + value: 2, + }, + { + text: "MVC-3", + iconCls: "search-close-h-font", + value: 3, + } + ], + } + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.icon_text_value_combo", Demo.IconTextValueCombo); \ No newline at end of file +} diff --git a/demo/js/case/combo/demo.search_text_value_combo.js b/demo/js/case/combo/demo.search_text_value_combo.js index 7491283d6..25cb79fc4 100644 --- a/demo/js/case/combo/demo.search_text_value_combo.js +++ b/demo/js/case/combo/demo.search_text_value_combo.js @@ -1,102 +1,122 @@ -/** - * Created by Windy on 2018/2/4. - */ -Demo.SearchTextValueCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, - render: function () { - var combo, searchCombo; +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: function () { - combo = this; + 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, + } + ], }, - 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"] + { + 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())); + }, + } + ], }, - ref: function () { - searchCombo = this; + { + type: "bi.button", + text: "setValue(3)", + width: 90, + height: 25, + handler() { + combo.setValue(11); + }, }, - listeners: [{ - eventName: "BI.AllValueMultiTextValueCombo.EVENT_CONFIRM", - action: function () { + { + type: "bi.button", + text: "getValue()", + width: 90, + height: 25, + handler() { BI.Msg.toast(JSON.stringify(searchCombo.getValue())); - } - }] - }, { - type: "bi.button", - text: "setValue(3)", - width: 90, - height: 25, - handler: function () { - combo.setValue(11); - } - }, { - type: "bi.button", - text: "getValue()", - width: 90, - height: 25, - handler: function () { - BI.Msg.toast(JSON.stringify(searchCombo.getValue())); + }, } - }], - vgap: 20 + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.search_text_value_combo", Demo.SearchTextValueCombo); \ No newline at end of file +} diff --git a/demo/js/case/combo/demo.text_value_down_list_combo.js b/demo/js/case/combo/demo.text_value_down_list_combo.js index 3f0a7af54..c7cb9ccca 100644 --- a/demo/js/case/combo/demo.text_value_down_list_combo.js +++ b/demo/js/case/combo/demo.text_value_down_list_combo.js @@ -1,68 +1,83 @@ -/** - * Created by Dailer on 2017/7/11. - */ -Demo.TextValueDownListCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, +import { shortcut, Widget } from "@/core"; +import { Msg } from "@/base"; + +@shortcut() +export class TextValueDownListCombo extends Widget { + static xtype = "demo.text_value_down_list_combo"; + + props = { baseCls: "" }; + + render() { + const self = this; - render: function () { - var self = this; return { type: "bi.horizontal_auto", - items: [{ - type: "bi.text_value_down_list_combo", - width: 300, - ref: function (_ref) { - self.refs = _ref; + items: [ + { + type: "bi.text_value_down_list_combo", + width: 300, + ref(_ref) { + self.refs = _ref; + }, + text: "默认值", + value: 11, + items: [ + [ + { + text: "属于", + value: 1, + cls: "dot-e-font", + }, + { + text: "不属于", + value: 2, + cls: "dot-e-font", + } + ], + [ + { + el: { + text: "大于", + value: 3, + iconCls1: "dot-e-font", + }, + value: 3, + children: [ + { + text: "固定值", + value: 4, + cls: "dot-e-font", + }, + { + text: "平均值", + value: 5, + cls: "dot-e-font", + } + ], + } + ] + ], }, - text: "默认值", - value: 11, - items: [[{ - text: "属于", - value: 1, - cls: "dot-e-font" - }, { - text: "不属于", - value: 2, - cls: "dot-e-font" - }], [{ - el: { - text: "大于", - value: 3, - iconCls1: "dot-e-font" + { + type: "bi.button", + width: 90, + height: 25, + text: "setValue", + handler() { + self.refs.setValue(2); + }, + }, + { + type: "bi.button", + width: 90, + height: 25, + text: "getValue", + handler() { + Msg.alert("", JSON.stringify(self.refs.getValue())); }, - value: 3, - children: [{ - text: "固定值", - value: 4, - cls: "dot-e-font" - }, { - text: "平均值", - value: 5, - cls: "dot-e-font" - }] - }]] - }, { - type: "bi.button", - width: 90, - height: 25, - text: "setValue", - handler: function () { - self.refs.setValue(2); - } - }, { - type: "bi.button", - width: 90, - height: 25, - text: "getValue", - handler: function () { - BI.Msg.alert("", JSON.stringify(self.refs.getValue())); } - }], - vgap: 20 + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.text_value_down_list_combo", Demo.TextValueDownListCombo); \ No newline at end of file +} diff --git a/demo/js/case/combo/demo.text_vlaue_check_combo.js b/demo/js/case/combo/demo.text_vlaue_check_combo.js index 607a060c9..9767d23db 100644 --- a/demo/js/case/combo/demo.text_vlaue_check_combo.js +++ b/demo/js/case/combo/demo.text_vlaue_check_combo.js @@ -1,43 +1,51 @@ -/** - * Created by Dailer on 2017/7/11. - */ -Demo.TextValueCheckCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, - render: function () { - var self = this; +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: function () { - self.combo = this; + 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, + } + ], }, - 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: function () { - BI.Msg.alert("", JSON.stringify(self.combo.getValue())); + { + type: "bi.button", + width: 90, + height: 25, + handler () { + BI.Msg.alert("", JSON.stringify(self.combo.getValue())); + }, } - }], - vgap: 20 + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.text_value_check_combo", Demo.TextValueCheckCombo); \ No newline at end of file +} diff --git a/demo/js/case/demo.calendar.js b/demo/js/case/demo.calendar.js index 8b747adc2..f0f1412b9 100644 --- a/demo/js/case/demo.calendar.js +++ b/demo/js/case/demo.calendar.js @@ -1,32 +1,35 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class Func extends Widget { + static xtype = "demo.calendar"; + + props = { baseCls: "demo-func" }; + + render() { + const self = this; + const date = new Date(); - render: function () { - var self = this; - var date = new Date(); return { type: "bi.calendar", - ref: function () { + ref() { self.calendar = this; }, logic: { - dynamic: false + dynamic: false, }, year: date.getFullYear(), month: date.getMonth(), - day: date.getDate() + day: date.getDate(), }; - }, + } - mounted: function () { - var date = new Date(); + mounted() { + const date = new Date(); this.calendar.setValue({ year: date.getFullYear(), month: date.getMonth(), - day: date.getDate() + day: date.getDate(), }); } -}); -BI.shortcut("demo.calendar", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/demo.click.effect.js b/demo/js/case/demo.click.effect.js index 4d36952c9..07be97e81 100644 --- a/demo/js/case/demo.click.effect.js +++ b/demo/js/case/demo.click.effect.js @@ -1,40 +1,53 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createItems } from "@/core"; - render: function () { +@shortcut() +export class Func extends Widget { + static xtype = "demo.click_item_effect"; + + props = { baseCls: "demo-func" }; + + render() { return { type: "bi.vertical", - items: BI.createItems([{ - text: "bi-list-item", - cls: "bi-list-item close-font" - }, { - text: "bi-list-item-simple", - cls: "bi-list-item-simple close-font" - }, { - text: "bi-list-item-effect", - cls: "bi-list-item-effect close-font" - }, { - text: "bi-list-item-active", - cls: "bi-list-item-active close-font" - }, { - text: "bi-list-item-active2", - cls: "bi-list-item-active2 close-font" - }, { - text: "bi-list-item-select", - cls: "bi-list-item-select close-font" - }, { - text: "bi-list-item-select2", - cls: "bi-list-item-select2 close-font" - }], { - type: "bi.icon_text_item", - logic: { - dynamic: true + items: createItems( + [ + { + text: "bi-list-item", + cls: "bi-list-item close-font", + }, + { + text: "bi-list-item-simple", + cls: "bi-list-item-simple close-font", + }, + { + text: "bi-list-item-effect", + cls: "bi-list-item-effect close-font", + }, + { + text: "bi-list-item-active", + cls: "bi-list-item-active close-font", + }, + { + text: "bi-list-item-active2", + cls: "bi-list-item-active2 close-font", + }, + { + text: "bi-list-item-select", + cls: "bi-list-item-select close-font", + }, + { + text: "bi-list-item-select2", + cls: "bi-list-item-select2 close-font", + } + ], + { + type: "bi.icon_text_item", + logic: { + dynamic: true, + }, } - }), - vgap: 10 + ), + vgap: 10, }; } -}); -BI.shortcut("demo.click_item_effect", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/demo.color_chooser.js b/demo/js/case/demo.color_chooser.js index 81a719864..b4702347f 100644 --- a/demo/js/case/demo.color_chooser.js +++ b/demo/js/case/demo.color_chooser.js @@ -1,40 +1,46 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget } from "@/core"; - render: function () { +@shortcut() +export class Func extends Widget { + static xtype = "demo.color_chooser"; + + props = { baseCls: "demo-func" }; + + render() { return { type: "bi.absolute", - items: [{ - el: { - type: "bi.color_chooser", - recommendColorsGetter: function () { - return ["#ffffff", "#9d775f", "#dd4b4b", "#ef8b07", "#fcc800"] + items: [ + { + el: { + type: "bi.color_chooser", + recommendColorsGetter() { + return ["#ffffff", "#9d775f", "#dd4b4b", "#ef8b07", "#fcc800"]; + }, + width: 24, + height: 24, }, - width: 24, - height: 24 - }, - left: 100, - top: 250 - }, { - el: { - type: "bi.simple_color_chooser", - width: 30, - height: 24 + left: 100, + top: 250, }, - left: 400, - top: 250 - }, { - el: { - type: "bi.color_chooser", - width: 230, - height: 24 + { + el: { + type: "bi.simple_color_chooser", + width: 30, + height: 24, + }, + left: 400, + top: 250, }, - left: 100, - top: 350 - }] + { + el: { + type: "bi.color_chooser", + width: 230, + height: 24, + }, + left: 100, + top: 350, + } + ], }; } -}); -BI.shortcut("demo.color_chooser", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/demo.color_chooser_popup.js b/demo/js/case/demo.color_chooser_popup.js index 68135d1c3..6431369b2 100644 --- a/demo/js/case/demo.color_chooser_popup.js +++ b/demo/js/case/demo.color_chooser_popup.js @@ -1,27 +1,32 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget } from "@/core"; - render: function () { +@shortcut() +export class Func extends Widget { + static xtype = "demo.color_chooser_popup"; + + props = { baseCls: "demo-func" }; + + render() { return { type: "bi.absolute", - items: [{ - el: { - type: "bi.color_chooser_popup", - cls: "bi-card" - }, - left: 100, - top: 250 - }, { - el: { - type: "bi.simple_color_chooser_popup", - cls: "bi-card" + items: [ + { + el: { + type: "bi.color_chooser_popup", + cls: "bi-card", + }, + left: 100, + top: 250, }, - left: 400, - top: 250 - }] + { + el: { + type: "bi.simple_color_chooser_popup", + cls: "bi-card", + }, + left: 400, + top: 250, + } + ], }; } -}); -BI.shortcut("demo.color_chooser_popup", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/demo.segment.js b/demo/js/case/demo.segment.js index 946c5d952..659840bd4 100644 --- a/demo/js/case/demo.segment.js +++ b/demo/js/case/demo.segment.js @@ -1,28 +1,36 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func", - }, +import { shortcut, Widget, createWidget } from "@/core"; - render: function () { - BI.createWidget({ +@shortcut() +export class Func extends Widget { + static xtype = "demo.segment"; + + props = { baseCls: "demo-func" }; + + render() { + createWidget({ type: "bi.horizontal", element: this, vgap: 20, hgap: 30, - items: [{ - type: "bi.segment", - items: [{ - text: "较长的选项1", - value: 1, - }, { - text: "选项2", - value: 2, - }, { - text: "选项3", - value: 3, - }], - }], + items: [ + { + type: "bi.segment", + items: [ + { + text: "较长的选项1", + value: 1, + }, + { + text: "选项2", + value: 2, + }, + { + text: "选项3", + value: 3, + } + ], + } + ], }); - }, -}); -BI.shortcut("demo.segment", Demo.Func); + } +} diff --git a/demo/js/case/editor/demo.clear_editor.js b/demo/js/case/editor/demo.clear_editor.js index 6ad9b4283..95b98ad30 100644 --- a/demo/js/case/editor/demo.clear_editor.js +++ b/demo/js/case/editor/demo.clear_editor.js @@ -1,23 +1,24 @@ -/** - * Created by Dailer on 2017/7/11. - */ -Demo.ClearEditor = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, - render: function () { +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class ClearEditor extends Widget { + static xtype = "demo.clear_editor"; + + props = { baseCls: "" }; + + render() { return { type: "bi.horizontal_auto", - items: [{ - type: "bi.clear_editor", - cls: "bi-border", - width: 300, - watermark: "这个是带清除按钮的", - value: 123 - }], - vgap: 20 + items: [ + { + type: "bi.clear_editor", + cls: "bi-border", + width: 300, + watermark: "这个是带清除按钮的", + value: 123, + } + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.clear_editor", Demo.ClearEditor); \ No newline at end of file +} diff --git a/demo/js/case/editor/demo.shelter_editor.js b/demo/js/case/editor/demo.shelter_editor.js index 2d351df62..2b05f1d47 100644 --- a/demo/js/case/editor/demo.shelter_editor.js +++ b/demo/js/case/editor/demo.shelter_editor.js @@ -1,47 +1,48 @@ -/** - * Created by Dailer on 2017/7/11. - */ -Demo.ClearEditor = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, - render: function () { - var editor = BI.createWidget({ +import { shortcut, Widget, createWidget } from "@/core"; + +@shortcut() +export class ClearEditor extends Widget { + static xtype = "demo.shelter_editor"; + + props = { baseCls: "" }; + + render() { + const editor = createWidget({ type: "bi.shelter_editor", cls: "bi-border", - validationChecker: function (v) { + validationChecker(v) { return v != "a"; }, watermark: "可以设置标记的输入框", value: "这是一个遮罩", - keyword: "z" + keyword: "z", }); - BI.createWidget({ + createWidget({ type: "bi.vertical", element: this, hgap: 30, vgap: 20, bgap: 50, - items: [editor] + items: [editor], }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [{ - el: { - type: "bi.button", - text: "focus", - height: 25, - handler: function () { - editor.focus(); - } - }, - right: 10, - left: 10, - bottom: 10 - }] + items: [ + { + el: { + type: "bi.button", + text: "focus", + height: 25, + handler() { + editor.focus(); + }, + }, + right: 10, + left: 10, + bottom: 10, + } + ], }); } -}); - -BI.shortcut("demo.shelter_editor", Demo.ClearEditor); \ No newline at end of file +} diff --git a/demo/js/case/editor/demo.sign_editor.js b/demo/js/case/editor/demo.sign_editor.js index 4850394f7..0d47e56ec 100644 --- a/demo/js/case/editor/demo.sign_editor.js +++ b/demo/js/case/editor/demo.sign_editor.js @@ -1,29 +1,28 @@ -/** - * Created by Dailer on 2017/7/14. - */ -Demo.SignEditor = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, - render: function () { - var editor = BI.createWidget({ +import { shortcut, Widget, createWidget } from "@/core"; + +@shortcut() +export class SignEditor extends Widget { + static xtype = "demo.sign_editor"; + + props = { baseCls: "" }; + + render() { + const editor = createWidget({ type: "bi.sign_editor", cls: "bi-border bi-focus-shadow", - validationChecker: function (v) { + validationChecker(v) { return v != "abc"; }, watermark: "可以设置标记的输入框", - text: "这是一个标记，点击它即可进行输入" + text: "这是一个标记，点击它即可进行输入", }); editor.setValue(2); - BI.createWidget({ + createWidget({ type: "bi.vertical", element: this, hgap: 30, vgap: 20, - items: [editor] + items: [editor], }); } -}); - -BI.shortcut("demo.sign_editor", Demo.SignEditor); \ No newline at end of file +} diff --git a/demo/js/case/editor/demo.simple_state_editor.js b/demo/js/case/editor/demo.simple_state_editor.js index d825a9a8f..88bc20ff7 100644 --- a/demo/js/case/editor/demo.simple_state_editor.js +++ b/demo/js/case/editor/demo.simple_state_editor.js @@ -1,33 +1,34 @@ -/** - * Created by Dailer on 2017/7/11. - */ -Demo.SimpleStateEditor = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, - render: function () { - var self = this; +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class SimpleStateEditor extends Widget { + static xtype = "demo.simple_state_editor"; + + props = { baseCls: "" }; + + render() { + const self = this; + return { type: "bi.horizontal_adapt", - items: [{ - type: "bi.simple_state_editor", - ref: function () { - self.editor = this; - }, - cls: "bi-border", - width: 300 - }], - vgap: 20 - + items: [ + { + type: "bi.simple_state_editor", + ref() { + self.editor = this; + }, + cls: "bi-border", + width: 300, + } + ], + vgap: 20, }; - }, + } - mounted: function () { - var self = this; - setTimeout(function () { + mounted() { + const self = this; + setTimeout(() => { self.editor.setState(["*", "*"]); }, 1000); } -}); - -BI.shortcut("demo.simple_state_editor", Demo.SimpleStateEditor); \ No newline at end of file +} diff --git a/demo/js/case/editor/demo.state_editor.js b/demo/js/case/editor/demo.state_editor.js index e87f4c363..163a5c970 100644 --- a/demo/js/case/editor/demo.state_editor.js +++ b/demo/js/case/editor/demo.state_editor.js @@ -1,34 +1,34 @@ -/** - * Created by Dailer on 2017/7/11. - */ -Demo.StateEditor = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, - render: function () { - var self = this; +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class StateEditor extends Widget { + static xtype = "demo.state_editor"; + + props = { baseCls: "" }; + + render() { + const self = this; + return { type: "bi.horizontal_adapt", - items: [{ - type: "bi.state_editor", - ref: function () { - self.editor = this; - }, - cls: "bi-border", - width: 300 - }], - vgap: 20 - + items: [ + { + type: "bi.state_editor", + ref() { + self.editor = this; + }, + cls: "bi-border", + width: 300, + } + ], + vgap: 20, }; - }, - + } - mounted: function () { - var self = this; - setTimeout(function () { + mounted() { + const self = this; + setTimeout(() => { self.editor.setState(["*", "*"]); }, 1000); } -}); - -BI.shortcut("demo.state_editor", Demo.StateEditor); \ No newline at end of file +} diff --git a/demo/js/case/item/demo.multi_select_item.js b/demo/js/case/item/demo.multi_select_item.js index f5e35c7eb..e0aaf5764 100644 --- a/demo/js/case/item/demo.multi_select_item.js +++ b/demo/js/case/item/demo.multi_select_item.js @@ -1,22 +1,26 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget } from "@/core"; - render: function () { +@shortcut() +export class Func extends Widget { + static xtype = "demo.multi_select_item"; + props = { baseCls: "demo-func" }; + + render() { return { type: "bi.vertical", - items: [{ - type: "bi.label", - height: 30, - text: "复选item" - }, { - type: "bi.multi_select_item", - text: "复选项" - }], - hgap: 300 + items: [ + { + type: "bi.label", + height: 30, + text: "复选item", + }, + { + type: "bi.multi_select_item", + text: "复选项", + } + ], + hgap: 300, }; } -}); -BI.shortcut("demo.multi_select_item", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/item/demo.single_select_item.js b/demo/js/case/item/demo.single_select_item.js index 2244df84b..732658268 100644 --- a/demo/js/case/item/demo.single_select_item.js +++ b/demo/js/case/item/demo.single_select_item.js @@ -1,25 +1,24 @@ -/** - * Created by Dailer on 2017/7/25. - */ +import { shortcut, Widget } from "@/core"; -Demo.Items = BI.inherit(BI.Widget, { - - render: function () { +@shortcut() +export class Items extends Widget { + static xtype = "demo.single_select_item"; + render() { return { type: "bi.vertical", - items: [{ - type: "bi.label", - height: 30, - text: "单选item" - }, { - type: "bi.single_select_item", - text: "单选项" - }], - hgap: 300 + items: [ + { + type: "bi.label", + height: 30, + text: "单选item", + }, + { + type: "bi.single_select_item", + text: "单选项", + } + ], + hgap: 300, }; } -}); - - -BI.shortcut("demo.single_select_item", Demo.Items); \ No newline at end of file +} diff --git a/demo/js/case/item/demo.single_select_radio_item.js b/demo/js/case/item/demo.single_select_radio_item.js index 3052390ce..71d3352df 100644 --- a/demo/js/case/item/demo.single_select_radio_item.js +++ b/demo/js/case/item/demo.single_select_radio_item.js @@ -1,25 +1,24 @@ -/** - * Created by Dailer on 2017/7/25. - */ +import { shortcut, Widget } from "@/core"; -Demo.Items = BI.inherit(BI.Widget, { - - render: function () { +@shortcut() +export class Items extends Widget { + static xtype = "demo.single_select_radio_item"; + render() { return { type: "bi.vertical", - items: [{ - type: "bi.label", - height: 30, - text: "单选item" - }, { - type: "bi.single_select_radio_item", - text: "单选项" - }], - hgap: 300 + items: [ + { + type: "bi.label", + height: 30, + text: "单选item", + }, + { + type: "bi.single_select_radio_item", + text: "单选项", + } + ], + hgap: 300, }; } -}); - - -BI.shortcut("demo.single_select_radio_item", Demo.Items); \ No newline at end of file +} diff --git a/demo/js/case/list/demo.lazy_loader.js b/demo/js/case/list/demo.lazy_loader.js index 568238791..066c04b9d 100644 --- a/demo/js/case/list/demo.lazy_loader.js +++ b/demo/js/case/list/demo.lazy_loader.js @@ -1,23 +1,27 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget } from "@/core"; - render: function () { - var self = this; +@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 - }] + layouts: [ + { + type: "bi.left", + hgap: 5, + } + ], }, items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { - type: "bi.button" - }) + type: "bi.button", + }), }); } -}); -BI.shortcut("demo.lazy_loader", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/list/demo.select_list.js b/demo/js/case/list/demo.select_list.js index f32d426be..5c6f67c0e 100644 --- a/demo/js/case/list/demo.select_list.js +++ b/demo/js/case/list/demo.select_list.js @@ -1,26 +1,28 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget, createItems, deepClone, Selection } from "@/core"; - render: function () { - var self = this; - BI.createWidget({ +@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 + iconWrapperWidth: 26, }, element: this, el: { el: { - chooseType: BI.Selection.Multi - } + chooseType: Selection.Multi, + }, }, - items: BI.createItems(BI.deepClone(Demo.CONSTANTS.SIMPLE_ITEMS), { - type: "bi.multi_select_item" - }) + items: createItems(deepClone(Demo.CONSTANTS.SIMPLE_ITEMS), { + type: "bi.multi_select_item", + }), }); } -}); -BI.shortcut("demo.select_list", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/pager/demo.all_count_pager.js b/demo/js/case/pager/demo.all_count_pager.js index 829181820..84d94667c 100644 --- a/demo/js/case/pager/demo.all_count_pager.js +++ b/demo/js/case/pager/demo.all_count_pager.js @@ -1,25 +1,30 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget } from "@/core"; - render: function () { - BI.createWidget({ +@shortcut() +export class Func extends Widget { + static xtype = "demo.all_count_pager"; + + props = { baseCls: "demo-func" }; + + render() { + createWidget({ type: "bi.vertical", hgap: 200, vgap: 50, element: this, - items: [{ - type: "bi.label", - height: 30, - text: " (测试条件：总页数为3)" - }, { - type: "bi.all_count_pager", - pages: 3, - curr: 1, - count: 1000 - }] + items: [ + { + type: "bi.label", + height: 30, + text: " (测试条件：总页数为3)", + }, + { + type: "bi.all_count_pager", + pages: 3, + curr: 1, + count: 1000, + } + ], }); } -}); -BI.shortcut("demo.all_count_pager", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/pager/demo.direction_pager.js b/demo/js/case/pager/demo.direction_pager.js index d554d50df..f2154bdb2 100644 --- a/demo/js/case/pager/demo.direction_pager.js +++ b/demo/js/case/pager/demo.direction_pager.js @@ -1,50 +1,54 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget } from "@/core"; - mounted: function () { +@shortcut() +export class Func extends Widget { + static xtype = "demo.direction_pager"; + + props = { baseCls: "demo-func" }; + + mounted() { this.pager.populate(); - }, + } - render: function () { - var self = this; - BI.createWidget({ + render() { + const self = this; + createWidget({ type: "bi.vertical", hgap: 200, vgap: 50, element: this, - items: [{ - type: "bi.direction_pager", - ref: function (_ref) { - self.pager = _ref; - }, - horizontal: { - pages: false, // 总页数 - curr: 1, // 初始化当前页， pages为数字时可用 - - hasPrev: function (v) { - return v > 1; - }, - hasNext: function () { - return true; + items: [ + { + type: "bi.direction_pager", + ref(_ref) { + self.pager = _ref; }, - firstPage: 1 - }, - vertical: { - pages: false, // 总页数 - curr: 1, // 初始化当前页， pages为数字时可用 + horizontal: { + pages: false, // 总页数 + curr: 1, // 初始化当前页， pages为数字时可用 - hasPrev: function (v) { - return v > 1; + hasPrev(v) { + return v > 1; + }, + hasNext() { + return true; + }, + firstPage: 1, }, - hasNext: function () { - return true; + vertical: { + pages: false, // 总页数 + curr: 1, // 初始化当前页， pages为数字时可用 + + hasPrev(v) { + return v > 1; + }, + hasNext() { + return true; + }, + firstPage: 1, }, - firstPage: 1 } - }] + ], }); } -}); -BI.shortcut("demo.direction_pager", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/pane/demo.list_pane.js b/demo/js/case/pane/demo.list_pane.js index 5766be4fb..5ee6698be 100644 --- a/demo/js/case/pane/demo.list_pane.js +++ b/demo/js/case/pane/demo.list_pane.js @@ -1,34 +1,41 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +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; - render: function () { - var self = this; return { type: "bi.list_pane", - ref: function () { + ref() { self.pane = this; }, - itemsCreator: function (op, callback) { - setTimeout(function () { - callback(BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { - type: "bi.multi_select_item", - height: 25 - })); + 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" - }] - } + layouts: [ + { + type: "bi.vertical", + } + ], + }, }; - }, + } - mounted: function () { + mounted() { this.pane.populate(); } -}); -BI.shortcut("demo.list_pane", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/pane/demo.multi_popup_view.js b/demo/js/case/pane/demo.multi_popup_view.js index de62a15cc..e400a96ce 100644 --- a/demo/js/case/pane/demo.multi_popup_view.js +++ b/demo/js/case/pane/demo.multi_popup_view.js @@ -1,39 +1,46 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +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; - render: function () { - var self = this; return { type: "bi.absolute", - items: [{ - el: { - type: "bi.combo", - width: 200, - height: 30, + items: [ + { el: { - type: "bi.text_button", - text: "点击", - cls: "bi-border", - height: 30 - }, - popup: { - type: "bi.multi_popup_view", + type: "bi.combo", + width: 200, + height: 30, el: { - type: "bi.button_group", - layouts: [{ - type: "bi.vertical" - }], - items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { - type: "bi.multi_select_item", - height: 25 - }) - } - } + 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, + }), + }, + }, + }, } - }] + ], }; } -}); -BI.shortcut("demo.multi_popup_view", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/pane/demo.panel.js b/demo/js/case/pane/demo.panel.js index 28b1c3e2a..8c5c65c9e 100644 --- a/demo/js/case/pane/demo.panel.js +++ b/demo/js/case/pane/demo.panel.js @@ -1,28 +1,35 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +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; - render: function () { - var self = this; return { type: "bi.panel", title: "title", - titleButtons: [{ - type: "bi.button", - text: "操作" - }], + titleButtons: [ + { + type: "bi.button", + text: "操作", + } + ], el: { type: "bi.button_group", - layouts: [{ - type: "bi.vertical" - }], - items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { + layouts: [ + { + type: "bi.vertical", + } + ], + items: createItems(deepClone(Demo.CONSTANTS.ITEMS), { type: "bi.multi_select_item", - height: 25 - }) - } + height: 25, + }), + }, }; } -}); -BI.shortcut("demo.panel", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/pane/demo.popup_panel.js b/demo/js/case/pane/demo.popup_panel.js index 503e91962..4532a4f56 100644 --- a/demo/js/case/pane/demo.popup_panel.js +++ b/demo/js/case/pane/demo.popup_panel.js @@ -1,39 +1,46 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +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; - render: function () { - var self = this; return { type: "bi.absolute", - items: [{ - el: { - type: "bi.combo", - width: 200, - height: 30, + items: [ + { el: { - type: "bi.text_button", - text: "点击", - cls: "bi-border", - height: 30 - }, - popup: { - type: "bi.popup_panel", + type: "bi.combo", + width: 200, + height: 30, el: { - type: "bi.button_group", - layouts: [{ - type: "bi.vertical" - }], - items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { - type: "bi.multi_select_item", - height: 25 - }) - } - } + 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, + }), + }, + }, + }, } - }] + ], }; } -}); -BI.shortcut("demo.popup_panel", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/tree/demo.display_tree.js b/demo/js/case/tree/demo.display_tree.js index b7d2c62ce..f2121354c 100644 --- a/demo/js/case/tree/demo.display_tree.js +++ b/demo/js/case/tree/demo.display_tree.js @@ -1,43 +1,53 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget } from "@/core"; - render: function () { - var tree = BI.createWidget({ +@shortcut() +export class Func extends Widget { + static xtype = "demo.display_tree"; + + props = { baseCls: "demo-func" }; + + render() { + const tree = createWidget({ type: "bi.display_tree", - element: this + element: this, }); - tree.initTree([{ - id: 1, - text: "第一项", - open: true - }, { - id: 2, - text: "第二项" - }, { - id: 11, - pId: 1, - text: "子项1(共2个)", - open: true - }, { - id: 111, - pId: 11, - text: "子子项1" - }, { - id: 112, - pId: 11, - text: "子子项2" - }, { - id: 12, - pId: 1, - text: "子项2" - }, { - id: 13, - pId: 1, - text: "子项3" - }]); + tree.initTree([ + { + id: 1, + text: "第一项", + open: true, + }, + { + id: 2, + text: "第二项", + }, + { + id: 11, + pId: 1, + text: "子项1(共2个)", + open: true, + }, + { + id: 111, + pId: 11, + text: "子子项1", + }, + { + id: 112, + pId: 11, + text: "子子项2", + }, + { + id: 12, + pId: 1, + text: "子项2", + }, + { + id: 13, + pId: 1, + text: "子项3", + } + ]); } -}); -BI.shortcut("demo.display_tree", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/tree/demo.level_tree.js b/demo/js/case/tree/demo.level_tree.js index 4b4ac061c..7dd4e0efc 100644 --- a/demo/js/case/tree/demo.level_tree.js +++ b/demo/js/case/tree/demo.level_tree.js @@ -1,92 +1,111 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget } from "@/core"; +import { Msg } from "@/base"; - render: function () { - var tree = BI.createWidget({ +@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 - }] + 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", + items: [ + { + el: tree, + }, + { height: 30, - text: "getValue", - handler: function () { - BI.Msg.alert("", tree.getValue()); - } + el: { + type: "bi.button", + height: 30, + text: "getValue", + handler() { + BI.Msg.alert("", tree.getValue()); + }, + }, } - }] + ], }); } -}); -BI.shortcut("demo.level_tree", Demo.Func); +} diff --git a/demo/js/case/tree/demo.simple_tree.js b/demo/js/case/tree/demo.simple_tree.js index 291700a34..bf82d74b4 100644 --- a/demo/js/case/tree/demo.simple_tree.js +++ b/demo/js/case/tree/demo.simple_tree.js @@ -1,57 +1,71 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget } from "@/core"; +import { Msg } from "@/base"; - render: function () { +@shortcut() +export class Func extends Widget { + static xtype = "demo.simple_tree"; + + props = { baseCls: "demo-func" }; + + render() { // value值一定要是字符串 - var tree = BI.createWidget({ + 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"] + 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([{ @@ -101,30 +115,33 @@ Demo.Func = BI.inherit(BI.Widget, { BI.createWidget({ type: "bi.vtape", element: this, - items: [{ - el: tree - }, { - height: 30, - el: { - type: "bi.button", + items: [ + { + el: tree, + }, + { height: 30, - text: "setValue(['31', '32', '33'])", - handler: function () { - tree.setValue(["31", "32", "33"]); - } - } - }, { - height: 30, - el: { - type: "bi.button", + el: { + type: "bi.button", + height: 30, + text: "setValue(['31', '32', '33'])", + handler() { + tree.setValue(["31", "32", "33"]); + }, + }, + }, + { height: 30, - text: "getValue", - handler: function () { - BI.Msg.alert("", JSON.stringify(tree.getValue())); - } + el: { + type: "bi.button", + height: 30, + text: "getValue", + handler() { + BI.Msg.alert("", JSON.stringify(tree.getValue())); + }, + }, } - }] + ], }); } -}); -BI.shortcut("demo.simple_tree", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/triggers/demo.editor_trigger.js b/demo/js/case/triggers/demo.editor_trigger.js index d13361c3b..c2dc7e698 100644 --- a/demo/js/case/triggers/demo.editor_trigger.js +++ b/demo/js/case/triggers/demo.editor_trigger.js @@ -1,24 +1,29 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget } from "@/core"; - render: function () { - BI.createWidget({ +@shortcut() +export class Func extends Widget { + static xtype = "demo.editor_trigger"; + + props = { baseCls: "demo-func" }; + + render() { + createWidget({ type: "bi.vertical", element: this, - items: [{ - type: "bi.label", - text: "输入框加图标的trigger" - }, { - type: "bi.editor_trigger", - watermark: "这是水印", - width: 200, - height: 24 - }], + items: [ + { + type: "bi.label", + text: "输入框加图标的trigger", + }, + { + type: "bi.editor_trigger", + watermark: "这是水印", + width: 200, + height: 24, + } + ], hgap: 20, - vgap: 20 + vgap: 20, }); } -}); -BI.shortcut("demo.editor_trigger", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/triggers/demo.icon_trigger.js b/demo/js/case/triggers/demo.icon_trigger.js index dfc5e447c..0baaf41fd 100644 --- a/demo/js/case/triggers/demo.icon_trigger.js +++ b/demo/js/case/triggers/demo.icon_trigger.js @@ -1,24 +1,28 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget } from "@/core"; - render: function () { +@shortcut() +export class Func extends Widget { + static xtype = "demo.icon_trigger"; - BI.createWidget({ + props = { baseCls: "demo-func" }; + + render() { + createWidget({ type: "bi.vertical", element: this, - items: [{ - type: "bi.label", - text: "只有一个图标的trigger" - }, { - type: "bi.icon_trigger", - width: 30, - height: 24 - }], + items: [ + { + type: "bi.label", + text: "只有一个图标的trigger", + }, + { + type: "bi.icon_trigger", + width: 30, + height: 24, + } + ], hgap: 20, - vgap: 20 + vgap: 20, }); } -}); -BI.shortcut("demo.icon_trigger", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/triggers/demo.select_text_trigger.js b/demo/js/case/triggers/demo.select_text_trigger.js index f0511832c..771e11f3a 100644 --- a/demo/js/case/triggers/demo.select_text_trigger.js +++ b/demo/js/case/triggers/demo.select_text_trigger.js @@ -1,25 +1,29 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget } from "@/core"; - render: function () { +@shortcut() +export class Func extends Widget { + static xtype = "demo.select_text_trigger"; - BI.createWidget({ + props = { baseCls: "demo-func" }; + + render() { + createWidget({ type: "bi.vertical", element: this, - items: [{ - type: "bi.label", - text: "可被选择的trigger" - }, { - type: "bi.select_text_trigger", - text: "这是一个简单的trigger", - width: 200, - height: 24 - }], + items: [ + { + type: "bi.label", + text: "可被选择的trigger", + }, + { + type: "bi.select_text_trigger", + text: "这是一个简单的trigger", + width: 200, + height: 24, + } + ], hgap: 20, - vgap: 20 + vgap: 20, }); } -}); -BI.shortcut("demo.select_text_trigger", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/case/triggers/demo.text_trigger.js b/demo/js/case/triggers/demo.text_trigger.js index 8e4264453..9f2f0645f 100644 --- a/demo/js/case/triggers/demo.text_trigger.js +++ b/demo/js/case/triggers/demo.text_trigger.js @@ -1,25 +1,29 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget } from "@/core"; - render: function () { +@shortcut() +export class Func extends Widget { + static xtype = "demo.text_trigger"; - BI.createWidget({ + props = { baseCls: "demo-func" }; + + render() { + createWidget({ type: "bi.vertical", element: this, - items: [{ - type: "bi.label", - text: "文本加图标的trigger" - }, { - type: "bi.text_trigger", - text: "这是一个简单的trigger", - width: 200, - height: 24 - }], + items: [ + { + type: "bi.label", + text: "文本加图标的trigger", + }, + { + type: "bi.text_trigger", + text: "这是一个简单的trigger", + width: 200, + height: 24, + } + ], hgap: 20, - vgap: 20 + vgap: 20, }); } -}); -BI.shortcut("demo.text_trigger", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/center.js b/demo/js/center.js index b7febb6c4..2b20d9907 100644 --- a/demo/js/center.js +++ b/demo/js/center.js @@ -1,26 +1,16 @@ -Demo.Center = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-center" - }, - render: function () { - var self = this; - return { - type: "bi.router_view" - } - } -}); -BI.shortcut("demo.center", Demo.Center); +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class Center extends Widget { + static xtype = "demo.center"; + + props = { baseCls: "demo-center" }; -Demo.Router = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-router" - }, - render: function () { - var self = this; - var params = BI.Router.$router.history.current.params; + render() { + const self = this; + return { - type: params.componentId - } + type: "bi.router_view", + }; } -}); -BI.shortcut("demo.router", Demo.Router); +} diff --git a/demo/js/component/demo.form.js b/demo/js/component/demo.form.js index 31ca38195..54e8cdbde 100644 --- a/demo/js/component/demo.form.js +++ b/demo/js/component/demo.form.js @@ -1,100 +1,111 @@ -/** - * @author windy - * @version 2.0 - * Created by windy on 2022/1/11 - */ -Demo.Form = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-form" - }, - render: function () { - var widget = BI.createWidget({ +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: function (v) { - return v !== "a" && v !== ""; + 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, + }, }, - tip: function (v) { - if (BI.isEmpty(v)) { + { + validate(v) { + return BI.isNotEmptyArray(v); + }, + tip() { return "不能为空"; - } - return "不合法格式" + }, + label: "性别", + el: { + type: "bi.text_value_combo", + text: "请选择", + items: [ + { + text: "男", + value: 1, + }, + { + text: "女", + value: 2, + } + ], + }, }, - label: "E-mail", - el: { - type: 'bi.text_editor', - watermark: "输入a报错", - allowBlank: true, - } - }, { - validate: function (v) { - return BI.isNotEmptyArray(v); - }, - tip: function () { - return "不能为空"; - }, - label: "性别", - el: { - type: 'bi.text_value_combo', - text: "请选择", - items: [{ - text: "男", - value: 1 - }, { - text: "女", - value: 2 - }] - } - }, { - validate: function (v) { - return v !== ""; - }, - tip: function () { - return "不能为空"; - }, - label: "姓名", - el: { - type: 'bi.text_editor', - watermark: "输入姓名", - allowBlank: true, - } - }, { - validate: function (v) { - return v !== ""; - }, - tip: function () { - return "不能为空"; + { + validate(v) { + return v !== ""; + }, + tip() { + return "不能为空"; + }, + label: "姓名", + el: { + type: "bi.text_editor", + watermark: "输入姓名", + allowBlank: true, + }, }, - label: "姓名", - el: { - type: 'bi.textarea_editor', - cls: 'bi-border', - watermark: "输入简介", - allowBlank: true, - height: 200, + { + 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 - } + vgap: 30, + }, }); + return { type: "bi.vertical", hgap: 200, vgap: 10, - items: [widget, { - type: "bi.button", - text: "提交", - handler: function () { - widget.validate(); + items: [ + widget, + { + type: "bi.button", + text: "提交", + handler() { + widget.validate(); - console.log(widget.getValue()); + console.log(widget.getValue()); + }, } - }] + ], }; } -}); -BI.shortcut("demo.form", Demo.Form); \ No newline at end of file +} diff --git a/demo/js/component/demo.treevaluechoosercombo.js b/demo/js/component/demo.treevaluechoosercombo.js index 9a38fe428..c9578d906 100644 --- a/demo/js/component/demo.treevaluechoosercombo.js +++ b/demo/js/component/demo.treevaluechoosercombo.js @@ -1,24 +1,27 @@ -Demo.TreeValueChooser = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-tree-value-chooser-combo" - }, - render: function () { +import { shortcut, Widget, createWidget, deepClone } from "@/core"; - var widget = BI.createWidget({ +@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: BI.deepClone(Demo.CONSTANTS.TREEITEMS), - itemsCreator: function (op, callback) { - callback(BI.deepClone(Demo.CONSTANTS.TREEITEMS)); + // items: deepClone(Demo.CONSTANTS.TREEITEMS), + itemsCreator(op, callback) { + callback(deepClone(Demo.CONSTANTS.TREEITEMS)); }, defaultText: "请选择", }); + return { type: "bi.vertical", hgap: 200, vgap: 10, - items: [widget] + items: [widget], }; } -}); -BI.shortcut("demo.tree_value_chooser_combo", Demo.TreeValueChooser); +} diff --git a/demo/js/component/demo.treevaluechooserpane.js b/demo/js/component/demo.treevaluechooserpane.js index b37f026b3..5ba7025f0 100644 --- a/demo/js/component/demo.treevaluechooserpane.js +++ b/demo/js/component/demo.treevaluechooserpane.js @@ -1,16 +1,18 @@ -Demo.TreeValueChooser = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-tree-value-chooser" - }, - render: function () { +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: BI.deepClone(Demo.CONSTANTS.TREEITEMS) + items: deepClone(Demo.CONSTANTS.TREEITEMS), // itemsCreator: function (op, callback) { // callback(tree); // } }; } -}); -BI.shortcut("demo.tree_value_chooser_pane", Demo.TreeValueChooser); +} diff --git a/demo/js/component/demo.valuechoosercombo.js b/demo/js/component/demo.valuechoosercombo.js index bd0d84112..82ebbcb7f 100644 --- a/demo/js/component/demo.valuechoosercombo.js +++ b/demo/js/component/demo.valuechoosercombo.js @@ -1,20 +1,24 @@ -Demo.ValueChooserCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-value-chooser-combo" - }, - render: function () { - var widget = BI.createWidget({ +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: function (op, callback) { - callback(BI.deepClone(Demo.CONSTANTS.ITEMS)); - } + itemsCreator (op, callback) { + callback(deepClone(Demo.CONSTANTS.ITEMS)); + }, }); + return { type: "bi.vertical", hgap: 200, vgap: 10, - items: [widget] + items: [widget], }; } -}); -BI.shortcut("demo.value_chooser_combo", Demo.ValueChooserCombo); \ No newline at end of file +} diff --git a/demo/js/component/demo.valuechooserpane.js b/demo/js/component/demo.valuechooserpane.js index 9e401f8ab..656aa5c17 100644 --- a/demo/js/component/demo.valuechooserpane.js +++ b/demo/js/component/demo.valuechooserpane.js @@ -1,15 +1,18 @@ -Demo.ValueChooserPane = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-value-chooser-pane" - }, - render: function () { +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: BI.deepClone(Demo.CONSTANTS.ITEMS) + items: deepClone(Demo.CONSTANTS.ITEMS), // itemsCreator: function (op, callback) { - // callback(BI.deepClone(Demo.CONSTANTS.ITEMS)); + // callback(deepClone(Demo.CONSTANTS.ITEMS)); // } }; } -}); -BI.shortcut("demo.value_chooser_pane", Demo.ValueChooserPane); \ No newline at end of file +} diff --git a/demo/js/config/demo.pane.js b/demo/js/config/demo.pane.js index e6cb35c62..cb69e17a4 100644 --- a/demo/js/config/demo.pane.js +++ b/demo/js/config/demo.pane.js @@ -1,36 +1,34 @@ -/** - * author: young - * createdDate: 2018/11/30 - * description: - */ -!(function () { - var Pane = BI.inherit(BI.Pane, { - props: { +import { shortcut } from "@/core"; +import { Pane as BIPane } from "@/base"; - }, +@shortcut() +export class Pane extends BIPane { + static xtype = "demo.pane"; - mounted: function () { - console.log('loading pane mounted'); - }, + props = {}; - render: function () { - return { - type: "bi.center_adapt", - items: [{ + mounted() { + console.log("loading pane mounted"); + } + + render() { + return { + type: "bi.center_adapt", + items: [ + { type: "bi.label", - text: "this is pane center" - }] - }; - }, + text: "this is pane center", + } + ], + }; + } - beforeRender: function (callback) { - var self = this; - this.loading(); - setTimeout(function () { - self.loaded(); - callback(); - }, 3000); - } - }); - BI.shortcut("demo.pane", Pane); -})(); + beforeRender(callback) { + const self = this; + this.loading(); + setTimeout(() => { + self.loaded(); + callback(); + }, 3000); + } +} diff --git a/demo/js/core/abstract/combination/demo.combo.js b/demo/js/core/abstract/combination/demo.combo.js index fd7765b85..76027d078 100644 --- a/demo/js/core/abstract/combination/demo.combo.js +++ b/demo/js/core/abstract/combination/demo.combo.js @@ -1,495 +1,450 @@ -Demo.Func = BI.inherit(BI.Widget, { - 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" - }], +import { shortcut, Widget, createWidget, createItems, deepClone, map, delay, random, makeArray } from "@/core"; +import { Msg } from "@/base"; - 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 - } - }]], +@shortcut() +export class Func extends Widget { + static xtype = "demo.combo"; - dynamic: [ + 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 = [ { - 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 - } - ], + 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" } + ]; - 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: function () { - var self = this; + _createTop() { + const self = this; - var yearCombo = BI.createWidget({ + const yearCombo = createWidget({ type: "bi.combo", el: { type: "bi.button", text: "简单下拉框", - height: 30 + height: 30, }, popup: { el: { type: "bi.button_group", - items: BI.createItems(BI.deepClone(this.years), { + items: createItems(deepClone(this.years), { type: "bi.single_select_radio_item", height: 25, - handler: function (v) { - - } + handler(v) {}, }), - layouts: [{ - type: "bi.vertical" - }] - } + layouts: [ + { + type: "bi.vertical", + } + ], + }, }, - width: 200 + width: 200, }); - var multiCombo = BI.createWidget({ + var multiCombo = createWidget({ type: "bi.combo", el: { type: "bi.button", text: "多选下拉框", - height: 30 + height: 30, }, popup: { el: { - items: BI.createItems(BI.deepClone(this.years), { + items: createItems(deepClone(this.years), { type: "bi.multi_select_item", height: 25, - handler: function (v) { - - } + handler(v) {}, }), chooseType: 1, - layouts: [{ - type: "bi.vertical" - }] + layouts: [ + { + type: "bi.vertical", + } + ], }, tool: { type: "bi.label", text: "这是一个下拉框", - height: 35 + height: 35, }, - tabs: [{ - type: "bi.multi_select_bar", - height: 25, - text: "全选", - onCheck: function (v) { - if (v) { - multiCombo.setValue(BI.map(BI.deepClone(self.years), "value")); - } else { + 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([]); - } - + }, }, - isAllCheckedBySelectedValue: function (selectedValue) { - return selectedValue.length == self.years.length; - // return true; - } - }], - buttons: [{ - type: "bi.text_button", - text: "清空", - handler: function () { - multiCombo.setValue([]); - } - }, { - type: "bi.text_button", - text: "确定", - handler: function () { - BI.Msg.alert("", multiCombo.getValue()); + { + type: "bi.text_button", + text: "确定", + handler() { + Msg.alert("", multiCombo.getValue()); + }, } - }] + ], }, - width: 200 + width: 200, }); - var dynamicPopupCombo = BI.createWidget({ + const dynamicPopupCombo = createWidget({ type: "bi.combo", isNeedAdjustWidth: false, offsetStyle: "center", el: { type: "bi.button", text: "动态调整宽度", - height: 30 + height: 30, }, popup: { el: { - items: BI.createItems(BI.deepClone(this.dynamic), { + items: createItems(deepClone(this.dynamic), { type: "bi.single_select_item", - height: 25 + height: 25, }), - layouts: [{ - type: "bi.vertical" - }] - } + layouts: [ + { + type: "bi.vertical", + } + ], + }, }, - width: 200 + width: 200, }); - var dynamicCombo = BI.createWidget({ + var dynamicCombo = createWidget({ type: "bi.combo", el: { type: "bi.button", text: "搜索", - height: 30 + height: 30, }, popup: { el: { type: "bi.loader", logic: { dynamic: true, - scrolly: true + scrolly: true, }, el: { behaviors: { - redmark: function () { + redmark() { return true; - } + }, }, - layouts: [{ - type: "bi.vertical" - }] + layouts: [ + { + type: "bi.vertical", + } + ], }, - itemsCreator: function (options, popuplate) { - var times = options.times; - BI.delay(function () { + itemsCreator(options, popuplate) { + const times = options.times; + delay(() => { if (times == 3) { - popuplate([{ - type: "bi.single_select_item", - text: "这是最后一个", - value: "这是最后一个", - py: "zszhyg", - height: 25 - }]); + popuplate([ + { + type: "bi.single_select_item", + text: "这是最后一个", + value: "这是最后一个", + py: "zszhyg", + height: 25, + } + ]); + return; } - var map = BI.map(BI.makeArray(3, null), function (i, v) { - var val = i + "_" + BI.random(1, 100); + 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 + height: 25, }; }); popuplate(map); - }, 1000); - }, - hasNext: function (options) { + hasNext(options) { return options.times < 3; - } + }, }, - buttons: [{ - type: "bi.text_button", - text: "清空", - handler: function () { - dynamicCombo.setValue([]); - } - }, { - type: "bi.text_button", - text: "确定", - handler: function () { - BI.Msg.alert("", dynamicCombo.getValue()); + buttons: [ + { + type: "bi.text_button", + text: "清空", + handler() { + dynamicCombo.setValue([]); + }, + }, + { + type: "bi.text_button", + text: "确定", + handler() { + Msg.alert("", dynamicCombo.getValue()); + }, } - }] + ], }, - width: 200 + width: 200, }); - return BI.createWidget({ + return createWidget({ type: "bi.left", items: [yearCombo, multiCombo, dynamicPopupCombo, dynamicCombo], hgap: 20, - vgap: 20 + vgap: 20, }); - }, + } - _createBottom: function () { - var combo = BI.createWidget({ + _createBottom() { + const combo = createWidget({ type: "bi.combo", el: { type: "bi.text_button", cls: "button-combo", - height: 30 + height: 30, }, popup: { el: { type: "bi.button_group", - items: BI.createItems(BI.deepClone(this.years), { + items: createItems(deepClone(this.years), { type: "bi.single_select_item", iconWidth: 25, height: 25, - handler: function (v) { - - } + handler(v) {}, }), chooseType: 1, - layouts: [{ - type: "bi.vertical" - }] - } + layouts: [ + { + type: "bi.vertical", + } + ], + }, }, - width: 200 + width: 200, }); - combo.setValue(BI.deepClone(this.years)[0].value); + combo.setValue(deepClone(this.years)[0].value); - var childCombo = BI.createWidget({ + const childCombo = createWidget({ type: "bi.combo", el: { type: "bi.text_button", cls: "button-combo", - height: 30 + height: 30, }, popup: { el: { type: "bi.button_tree", - items: BI.createItems(BI.deepClone(this.child), { + items: createItems(deepClone(this.child), { type: "bi.single_select_item", height: 25, - handler: function (v) { - - } + handler(v) {}, }), - layouts: [{ - type: "bi.vertical" - }] - } + layouts: [ + { + type: "bi.vertical", + } + ], + }, }, - width: 200 + width: 200, }); - childCombo.setValue(BI.deepClone(this.child)[0].items[0].value); + childCombo.setValue(deepClone(this.child)[0].items[0].value); - var monthCombo = BI.createWidget({ + const monthCombo = createWidget({ type: "bi.combo", el: { type: "bi.button", text: "多层样式下拉框", - height: 30 + height: 30, }, popup: { el: { - items: BI.createItems(BI.deepClone(this.months), { + items: createItems(deepClone(this.months), { type: "bi.single_select_item", cls: "button-combo", - handler: function (v) { - - } + 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 } - }] - } + 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 + width: 200, }); - var yearCombo = BI.createWidget({ + const yearCombo = createWidget({ type: "bi.combo", el: { type: "bi.button", text: "自定义控件", - height: 30 + height: 30, }, popup: { el: { type: "bi.navigation", direction: "bottom", logic: { - dynamic: true + 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" - }] + items: [ + { + once: false, + text: "后退", + value: -1, + cls: "mvc-button layout-bg3", + }, + { + once: false, + text: "前进", + value: 1, + cls: "mvc-button layout-bg4", + } + ], }, - cardCreator: function (v) { - return BI.createWidget({ + cardCreator(v) { + return createWidget({ type: "bi.text_button", whiteSpace: "normal", - text: new Date().getFullYear() + v + text: new Date().getFullYear() + v, }); - } - } + }, + }, }, - width: 200 + width: 200, }); - return BI.createWidget({ + return createWidget({ type: "bi.left", items: [combo, childCombo, monthCombo, yearCombo], hgap: 20, - vgap: 20 + vgap: 20, }); - }, + } - render: function () { + render() { return { type: "bi.grid", columns: 1, rows: 2, - items: [{ - column: 0, - row: 0, - el: this._createTop() - }, { - column: 0, - row: 1, - el: this._createBottom() - }] + items: [ + { + column: 0, + row: 0, + el: this._createTop(), + }, + { + column: 0, + row: 1, + el: this._createBottom(), + } + ], }; } -}); -BI.shortcut("demo.combo", Demo.Func); +} diff --git a/demo/js/core/abstract/combination/demo.combo2.js b/demo/js/core/abstract/combination/demo.combo2.js index a4b63b3c9..a587a1a03 100644 --- a/demo/js/core/abstract/combination/demo.combo2.js +++ b/demo/js/core/abstract/combination/demo.combo2.js @@ -1,33 +1,36 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget } from "@/core"; - _createEl: function () { +@shortcut() +export class Func extends Widget { + static xtype = "demo.combo2"; + + props = { baseCls: "demo-func" }; + + _createEl() { return { type: "bi.button", height: 25, - text: "点击" + text: "点击", }; - }, + } - oneCombo: function () { - return BI.createWidget({ + oneCombo() { + return createWidget({ type: "bi.combo", adjustLength: 5, el: this._createEl(), popup: { el: { type: "bi.layout", - height: 500 + height: 500, }, - maxHeight: 400 - } + maxHeight: 400, + }, }); - }, + } - twoCombo: function () { - return BI.createWidget({ + twoCombo() { + return createWidget({ type: "bi.combo", adjustXOffset: 25, adjustYOffset: 5, @@ -36,14 +39,14 @@ Demo.Func = BI.inherit(BI.Widget, { popup: { el: { type: "bi.layout", - height: 1200 - } - } + height: 1200, + }, + }, }); - }, + } - threeCombo: function () { - return BI.createWidget({ + threeCombo() { + return createWidget({ type: "bi.combo", adjustYOffset: 5, el: this._createEl(), @@ -51,14 +54,14 @@ Demo.Func = BI.inherit(BI.Widget, { popup: { el: { type: "bi.layout", - height: 1200 - } - } + height: 1200, + }, + }, }); - }, + } - fourCombo: function () { - return BI.createWidget({ + fourCombo() { + return createWidget({ type: "bi.combo", adjustXOffset: 25, adjustYOffset: 5, @@ -68,14 +71,14 @@ Demo.Func = BI.inherit(BI.Widget, { popup: { el: { type: "bi.layout", - height: 1200 - } - } + height: 1200, + }, + }, }); - }, + } - fiveCombo: function () { - return BI.createWidget({ + fiveCombo() { + return createWidget({ type: "bi.combo", adjustXOffset: 25, adjustYOffset: 5, @@ -85,15 +88,15 @@ Demo.Func = BI.inherit(BI.Widget, { popup: { el: { type: "bi.layout", - height: 1200 + height: 1200, }, - maxHeight: 2000 - } + maxHeight: 2000, + }, }); - }, + } - sixCombo: function () { - return BI.createWidget({ + sixCombo() { + return createWidget({ type: "bi.combo", adjustXOffset: 25, adjustYOffset: 5, @@ -103,14 +106,14 @@ Demo.Func = BI.inherit(BI.Widget, { popup: { el: { type: "bi.layout", - height: 1200 - } - } + height: 1200, + }, + }, }); - }, + } - sevenCombo: function () { - return BI.createWidget({ + sevenCombo() { + return createWidget({ type: "bi.combo", adjustXOffset: 25, adjustYOffset: 5, @@ -123,14 +126,14 @@ Demo.Func = BI.inherit(BI.Widget, { el: { type: "bi.layout", width: 200, - height: 1200 - } - } + height: 1200, + }, + }, }); - }, + } - eightCombo: function () { - return BI.createWidget({ + eightCombo() { + return createWidget({ type: "bi.combo", adjustXOffset: 25, adjustYOffset: 5, @@ -143,21 +146,22 @@ Demo.Func = BI.inherit(BI.Widget, { el: { type: "bi.layout", width: 200, - height: 200 - } - } + height: 200, + }, + }, }); - }, + } - render: function () { + render() { return { type: "bi.grid", hgap: 10, vgap: 5, - items: [[this.oneCombo(), this.twoCombo(), this.threeCombo()], + items: [ + [this.oneCombo(), this.twoCombo(), this.threeCombo()], [this.fourCombo(), this.fiveCombo(), this.sixCombo()], - [this.sevenCombo(), this.eightCombo()]] + [this.sevenCombo(), this.eightCombo()] + ], }; } -}); -BI.shortcut("demo.combo2", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/abstract/combination/demo.combo3.js b/demo/js/core/abstract/combination/demo.combo3.js index 614c36ddd..94f7b5005 100644 --- a/demo/js/core/abstract/combination/demo.combo3.js +++ b/demo/js/core/abstract/combination/demo.combo3.js @@ -1,19 +1,22 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget } from "@/core"; - _createEl: function () { +@shortcut() +export class Func extends Widget { + static xtype = "demo.combo3"; + + props = { baseCls: "demo-func" }; + + _createEl() { return { type: "bi.label", - cls:"bi-border", + cls: "bi-border", height: "100%", - text: "点击" + text: "点击", }; - }, + } - oneCombo: function () { - return BI.createWidget({ + oneCombo() { + return createWidget({ type: "bi.combo", direction: "right,innerRight", isNeedAdjustWidth: false, @@ -23,14 +26,14 @@ Demo.Func = BI.inherit(BI.Widget, { el: { type: "bi.layout", width: 200, - height: 200 - } - } + height: 200, + }, + }, }); - }, + } - twoCombo: function () { - return BI.createWidget({ + twoCombo() { + return createWidget({ type: "bi.combo", direction: "right,innerRight", isNeedAdjustWidth: false, @@ -40,14 +43,14 @@ Demo.Func = BI.inherit(BI.Widget, { el: { type: "bi.layout", width: 1000, - height: 200 - } - } + height: 200, + }, + }, }); - }, + } - threeCombo: function () { - return BI.createWidget({ + threeCombo() { + return createWidget({ type: "bi.combo", direction: "right,innerRight", isNeedAdjustWidth: false, @@ -57,19 +60,18 @@ Demo.Func = BI.inherit(BI.Widget, { el: { type: "bi.layout", width: 400, - height: 200 - } - } + height: 200, + }, + }, }); - }, + } - render: function () { + render() { return { type: "bi.grid", hgap: 10, vgap: 5, - items: [[this.oneCombo()], [this.twoCombo()], [this.threeCombo()]] + items: [[this.oneCombo()], [this.twoCombo()], [this.threeCombo()]], }; } -}); -BI.shortcut("demo.combo3", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/abstract/combination/demo.combo_group.js b/demo/js/core/abstract/combination/demo.combo_group.js index 2cd391b7d..8f643e2b8 100644 --- a/demo/js/core/abstract/combination/demo.combo_group.js +++ b/demo/js/core/abstract/combination/demo.combo_group.js @@ -1,89 +1,81 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget, createItems, deepClone } from "@/core"; - child: [{ - type: "bi.combo_group", - el: { - type: "bi.icon_text_icon_item", - text: "2010年", - value: 2010, - height: 25, - iconCls: "close-ha-font" +@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 }], + } + ], }, - 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" - }], + { 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: function () { - var childCombo = BI.createWidget({ + _createBottom() { + const childCombo = createWidget({ type: "bi.combo", el: { type: "bi.text_button", cls: "button-combo", - height: 30 + height: 30, }, popup: { el: { type: "bi.button_tree", - items: BI.createItems(BI.deepClone(this.child), { + items: createItems(deepClone(this.child), { type: "bi.single_select_item", height: 25, - handler: function (v) { - - } + handler(v) {}, }), - layouts: [{ - type: "bi.vertical" - }] - } + layouts: [ + { + type: "bi.vertical", + } + ], + }, }, - width: 200 + width: 200, }); - childCombo.setValue(BI.deepClone(this.child)[0].items[0].value); + childCombo.setValue(deepClone(this.child)[0].items[0].value); - return BI.createWidget({ + return createWidget({ type: "bi.left", items: [childCombo], hgap: 20, - vgap: 20 + vgap: 20, }); - }, + } - render: function () { + render() { return { type: "bi.grid", columns: 1, rows: 1, - items: [{ - column: 0, - row: 0, - el: this._createBottom() - }] + items: [ + { + column: 0, + row: 0, + el: this._createBottom(), + } + ], }; } -}); -BI.shortcut("demo.combo_group", Demo.Func); +} diff --git a/demo/js/core/abstract/combination/demo.expander.js b/demo/js/core/abstract/combination/demo.expander.js index f2d1e1757..36576013f 100644 --- a/demo/js/core/abstract/combination/demo.expander.js +++ b/demo/js/core/abstract/combination/demo.expander.js @@ -1,41 +1,54 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, - render: function () { +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: BI.createItems([{ - text: "项目1", - value: 1 - }, { - text: "项目2", - value: 2 - }, { - text: "项目3", - value: 3 - }, { - text: "项目4", - value: 4 - }], { - type: "bi.single_select_item", - height: 25 - }) + 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, + } + ), + }, } - }] + ], }; } -}); -BI.shortcut("demo.expander", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/abstract/combination/demo.loader.js b/demo/js/core/abstract/combination/demo.loader.js index b095ea1e1..b7689101e 100644 --- a/demo/js/core/abstract/combination/demo.loader.js +++ b/demo/js/core/abstract/combination/demo.loader.js @@ -1,27 +1,33 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, - render: function () { - var self = this; +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; - var items = BI.deepClone(Demo.CONSTANTS.ITEMS); + const items = deepClone(Demo.CONSTANTS.ITEMS); + return { type: "bi.loader", - itemsCreator: function (options, populate) { - setTimeout(function () { - populate(BI.map(items.slice((options.times - 1) * 10, options.times * 10), function (i, v) { - return BI.extend(v, { - type: "bi.single_select_item", - height: 25 - }); - })); + 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: function (options) { + hasNext(options) { return options.times * 10 < items.length; - } + }, }; } -}); -BI.shortcut("demo.loader", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/abstract/combination/demo.navigation.js b/demo/js/core/abstract/combination/demo.navigation.js index ff3e97bb7..5fa90ef31 100644 --- a/demo/js/core/abstract/combination/demo.navigation.js +++ b/demo/js/core/abstract/combination/demo.navigation.js @@ -1,35 +1,41 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, - _createNav: function (v) { - return BI.createWidget({ +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" + BI.random(1, 8), - text: "第" + v + "页" + cls: `layout-bg${random(1, 8)}`, + text: `第${v}页`, }); - }, + } - render: function () { + 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" - }] + items: [ + { + once: false, + text: "后退", + value: -1, + cls: "mvc-button layout-bg3", + }, + { + once: false, + text: "前进", + value: 1, + cls: "mvc-button layout-bg4", + } + ], }, - cardCreator: BI.bind(this._createNav, this) + cardCreator: bind(this._createNav, this), }; } -}); -BI.shortcut("demo.navigation", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/abstract/combination/demo.sercher.js b/demo/js/core/abstract/combination/demo.sercher.js index d8c20480c..c556c3985 100644 --- a/demo/js/core/abstract/combination/demo.sercher.js +++ b/demo/js/core/abstract/combination/demo.sercher.js @@ -1,84 +1,125 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createItems, createWidget } from "@/core"; - _createItems: function (items) { - return BI.createItems(items, { +@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: function (v) { - - } + handler(v) {}, }); - }, + } - render: function () { - var self = this; - var 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" - }]; + 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", + } + ]; - var adapter = BI.createWidget({ + const adapter = createWidget({ type: "bi.button_group", cls: "layout-bg1", items: this._createItems(items), chooseType: 1, behaviors: {}, - layouts: [{ - type: "bi.vertical" - }] + layouts: [ + { + type: "bi.vertical", + } + ], }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [{ - el: adapter, - top: 50, - left: 50, - width: 200, - height: 100 - }] + items: [ + { + el: adapter, + top: 50, + left: 50, + width: 200, + height: 100, + } + ], }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [{ - el: { - type: "bi.absolute", - width: 200, - height: 30, - items: [{ - el: { - type: "bi.searcher", - adapter: adapter, - width: 200, - height: 30 - }, - left: 0, - right: 0, - top: 0, - bottom: 0 - }] - }, - top: 100, - left: 300 - }] + 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, + } + ], }); } -}); -BI.shortcut("demo.searcher", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/abstract/combination/demo.switcher.js b/demo/js/core/abstract/combination/demo.switcher.js index 897ce35ce..ea4b2890b 100644 --- a/demo/js/core/abstract/combination/demo.switcher.js +++ b/demo/js/core/abstract/combination/demo.switcher.js @@ -1,59 +1,73 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, - render: function () { +import { shortcut, Widget, createWidget, createItems } from "@/core"; - var adapter = BI.createWidget({ +@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" + text: "将在该处弹出switcher", }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [{ - el: adapter, - top: 50, - left: 20, - width: 200, - height: 300 - }] + items: [ + { + el: adapter, + top: 50, + left: 20, + width: 200, + height: 300, + } + ], }); - BI.createWidget({ + 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: BI.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: adapter - }] + 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, + } + ], }); } -}); -BI.shortcut("demo.switcher", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/abstract/combination/demo.tab.js b/demo/js/core/abstract/combination/demo.tab.js index 558baec05..76365ab33 100644 --- a/demo/js/core/abstract/combination/demo.tab.js +++ b/demo/js/core/abstract/combination/demo.tab.js @@ -1,69 +1,80 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget, bind } from "@/core"; - _createTabs: function (v) { +@shortcut() +export class Func extends Widget { + static xtype = "demo.tab"; + + props = { baseCls: "demo-func" }; + + _createTabs(v) { switch (v) { case 1: - return BI.createWidget({ + return createWidget({ type: "bi.label", cls: "layout-bg1", - text: "面板1" + text: "面板1", }); case 2: - return BI.createWidget({ + return createWidget({ type: "bi.label", cls: "layout-bg2", - text: "面板2" + text: "面板2", }); } - }, + } - render: function () { - this.tab = BI.createWidget({ + 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 - } - }] - }] + 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, + }, + } + ], + } + ], }); - var tab = BI.createWidget({ + const tab = createWidget({ direction: "custom", type: "bi.tab", element: this, tab: this.tab, - cardCreator: BI.bind(this._createTabs, this) + cardCreator: bind(this._createTabs, this), }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [{ - el: this.tab, - left: 200, - top: 200 - }] + items: [ + { + el: this.tab, + left: 200, + top: 200, + } + ], }); tab.setSelect(2); } -}); -BI.shortcut("demo.tab", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/abstract/demo.button_group.js b/demo/js/core/abstract/demo.button_group.js index 21652ad58..b59b1eafa 100644 --- a/demo/js/core/abstract/demo.button_group.js +++ b/demo/js/core/abstract/demo.button_group.js @@ -1,62 +1,80 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, - render: function () { - var ref; +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: function (_ref) { - ref = _ref; - }, - chooseType: BI.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布局)" + items: [ + { + type: "bi.button_group", + ref(_ref) { + ref = _ref; }, - height: 150 - }, { - el: { - type: "bi.button", - text: "1" - } - }] - }, { - type: "bi.button", - text: "populate", - handler: function () { - ref.populate([{ - el: { - type: "bi.label", - text: "1" - }, - height: 50 - }, { - el: { - type: "bi.button", - text: "2" + 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, }, - height: 50 - }, { - el: { - type: "bi.label", - text: "3" + { + 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", + }, + } + ]); + }, } - }] - + ], }; } -}); -BI.shortcut("demo.button_group", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/abstract/demo.button_tree.js b/demo/js/core/abstract/demo.button_tree.js index 94a34e776..f6d2b9b96 100644 --- a/demo/js/core/abstract/demo.button_tree.js +++ b/demo/js/core/abstract/demo.button_tree.js @@ -1,26 +1,36 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, - render: function () { +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: BI.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 - }] + 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, + } + ], }; } -}); -BI.shortcut("demo.button_tree", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/abstract/demo.collection_view.js b/demo/js/core/abstract/demo.collection_view.js index fe8604fe0..d3dacb08c 100644 --- a/demo/js/core/abstract/demo.collection_view.js +++ b/demo/js/core/abstract/demo.collection_view.js @@ -1,41 +1,46 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, - render: function () { - var items = []; - var cellCount = 100; - for (var i = 0; i < cellCount; i++) { +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 + text: i, }; } - var grid = BI.createWidget({ + const grid = createWidget({ type: "bi.collection_view", width: 400, height: 300, - items: items, - cellSizeAndPositionGetter: function (index) { + items, + cellSizeAndPositionGetter(index) { return { - x: index % 10 * 50, + x: (index % 10) * 50, y: Math.floor(index / 10) * 50, width: 50, - height: 50 + height: 50, }; - } + }, }); - BI.createWidget({ + createWidget({ type: "bi.absolute", element: this, - items: [{ - el: grid, - left: 10, - right: 10, - top: 10, - bottom: 10 - }] + items: [ + { + el: grid, + left: 10, + right: 10, + top: 10, + bottom: 10, + } + ], }); } -}); -BI.shortcut("demo.collection_view", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/abstract/demo.custom_tree.js b/demo/js/core/abstract/demo.custom_tree.js index d512e4ff2..64cb37330 100644 --- a/demo/js/core/abstract/demo.custom_tree.js +++ b/demo/js/core/abstract/demo.custom_tree.js @@ -1,61 +1,74 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createWidget, deepClone } from "@/core"; +import { Msg } from "@/base"; - _createDefaultTree: function () { - var 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 = BI.createWidget({ +@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 - }] + layouts: [ + { + type: "bi.vertical", + hgap: 30, + } + ], }, - items: BI.deepClone(TREEITEMS) + items: deepClone(TREEITEMS), }); + return this.tree; - }, + } - _createAsyncTree: function () { - this.asyncTree = BI.createWidget({ + _createAsyncTree() { + this.asyncTree = createWidget({ type: "bi.custom_tree", - itemsCreator: function (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 - }]); + 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([ @@ -66,7 +79,7 @@ Demo.Func = BI.inherit(BI.Widget, { text: "test11", value: 11, height: 25, - isParent: true + isParent: true, }, { id: 12, @@ -74,7 +87,7 @@ Demo.Func = BI.inherit(BI.Widget, { type: "bi.single_select_item", text: "test12", value: 12, - height: 35 + height: 35, }, { id: 13, @@ -82,7 +95,7 @@ Demo.Func = BI.inherit(BI.Widget, { type: "bi.single_select_item", text: "test13", value: 13, - height: 35 + height: 35, }, { id: 14, @@ -90,7 +103,7 @@ Demo.Func = BI.inherit(BI.Widget, { type: "bi.single_select_item", text: "test14", value: 14, - height: 35 + height: 35, }, { id: 15, @@ -98,7 +111,7 @@ Demo.Func = BI.inherit(BI.Widget, { type: "bi.single_select_item", text: "test15", value: 15, - height: 35 + height: 35, }, { id: 16, @@ -106,36 +119,40 @@ Demo.Func = BI.inherit(BI.Widget, { type: "bi.single_select_item", text: "test16", value: 16, - height: 35 + height: 35, }, - {id: 17, pId: 1, type: "bi.single_select_item", text: "test17", value: 17, 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 - }]); + 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 - }]); + callback([ + { + id: 111, + pId: 11, + type: "bi.single_select_item", + text: "test111", + value: 111, + height: 35, + } + ]); } } }, @@ -145,101 +162,121 @@ Demo.Func = BI.inherit(BI.Widget, { el: { type: "bi.button_tree", chooseType: 0, - layouts: [{ - type: "bi.vertical", - hgap: 30, - vgap: 0 - }] - } - } + layouts: [ + { + type: "bi.vertical", + hgap: 30, + vgap: 0, + } + ], + }, + }, }); + return this.asyncTree; - }, + } - render: function () { - var self = this; - BI.createWidget({ + 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: function () { - BI.Msg.alert("", JSON.stringify(self.tree.getValue())); - } - }, { - type: "bi.text_button", - cls: "mvc-button layout-bg2", - text: "getNodeByValue(第一级目录1)", - height: 30, - handler: function () { - BI.Msg.alert("", "节点名称为: " + self.tree.getNodeByValue("第一级目录1").getValue()); - } - }] + items: [ + { + column: 0, + row: 0, + el: { + type: "bi.vtape", + items: [ + { + el: this._createDefaultTree(), }, - 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: function () { - BI.Msg.alert("", JSON.stringify(self.asyncTree.getValue())); - } - }, { - type: "bi.text_button", - cls: "mvc-button layout-bg2", - text: "getNodeById(11)", - height: 30, - handler: function () { - BI.Msg.alert("", "节点名称为: " + (self.asyncTree.getNodeById(11) && self.asyncTree.getNodeById(11).getText())); - } - }] + { + 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, }, - 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, + } + ], + }, } - }] + ], }); } -}); -BI.shortcut("demo.custom_tree", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/abstract/demo.grid_view.js b/demo/js/core/abstract/demo.grid_view.js index 87a87f26c..7aa6c28f8 100644 --- a/demo/js/core/abstract/demo.grid_view.js +++ b/demo/js/core/abstract/demo.grid_view.js @@ -1,54 +1,62 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, - render: function () { - var items = []; - var rowCount = 10000, columnCount = 100; - for (var i = 0; i < rowCount; i++) { +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 (var j = 0; j < columnCount; j++) { + for (let j = 0; j < columnCount; j++) { items[i][j] = { type: "bi.label", - text: i + "-" + j + text: `${i}-${j}`, }; } } - var grid = BI.createWidget({ + const grid = createWidget({ type: "bi.grid_view", width: 400, height: 300, estimatedRowSize: 30, estimatedColumnSize: 100, - items: items, + items, scrollTop: 100, - rowHeightGetter: function () { + rowHeightGetter() { return 30; }, - columnWidthGetter: function () { + columnWidthGetter() { return 100; - } + }, }); - BI.createWidget({ + 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 - }] + items: [ + { + el: { + type: "bi.grid", + columns: 1, + rows: 1, + items: [ + { + column: 0, + row: 0, + el: grid, + } + ], + }, + left: 10, + right: 10, + top: 10, + bottom: 10, + } + ], }); } -}); -BI.shortcut("demo.grid_view", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/abstract/demo.list_view.js b/demo/js/core/abstract/demo.list_view.js index d9be37cc1..049fb6988 100644 --- a/demo/js/core/abstract/demo.list_view.js +++ b/demo/js/core/abstract/demo.list_view.js @@ -1,22 +1,25 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, - render: function () { +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" + type: "bi.left", }, - items: BI.map(Demo.CONSTANTS.ITEMS, function (i, item) { - return BI.extend({}, item, { + items: map(Demo.CONSTANTS.ITEMS, (i, item) => + extend({}, item, { type: "bi.label", width: 200, height: 200, - text: (i + 1) + "." + item.text - }); - }) + text: `${i + 1}.${item.text}`, + }) + ), }; } -}); -BI.shortcut("demo.list_view", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/abstract/demo.virtual_group.js b/demo/js/core/abstract/demo.virtual_group.js index 3f1220d60..44d0fd6fb 100644 --- a/demo/js/core/abstract/demo.virtual_group.js +++ b/demo/js/core/abstract/demo.virtual_group.js @@ -1,111 +1,86 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, map, range, deepClone } from "@/core"; +import { ButtonGroup } from "@/base"; - _createItems: function () { - var items = BI.map(BI.range(1000), function (i) { +@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 + key: i + 1, }; }); + return items; - }, + } + + render() { + const self = this; + const buttonGroupItems = self._createItems(); + const virtualGroupItems = self._createItems(); - render: function () { - var self = this; - var buttonGroupItems = self._createItems(); - var 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: function () { - self.buttonGroup = this; + items: [ + { + type: "bi.label", + cls: "layout-bg5", + height: 50, + text: "共1000个元素,演示button_group和virtual_group每次删除第一个元素,打开控制台看输出", }, - chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, - layouts: [{ - type: "bi.vertical" - }], - items: this._createItems() - }, { - type: "bi.button", - text: "演示button_group的刷新", - handler: function () { - buttonGroupItems.shift(); - self.buttonGroup.populate(BI.deepClone(buttonGroupItems)); - } - }, { - type: "bi.virtual_group", - width: 500, - height: 300, - ref: function () { - self.virtualGroup = this; + { + 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)); + }, }, - chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, - layouts: [{ - type: "bi.vertical" - }], - items: this._createItems() - }, { - type: "bi.button", - text: "演示virtual_group的刷新", - handler: function () { - virtualGroupItems.shift(); - self.virtualGroup.populate(BI.deepClone(virtualGroupItems)); + { + 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)); + }, } - }] - + ], }; } -}); -BI.shortcut("demo.virtual_group", Demo.Func); - -Demo.Item = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-item", - height: 30 - }, - - render: function () { - var self = this, o = this.options; - return { - type: "bi.label", - ref: function () { - self.label = this; - }, - height: this.options.height, - text: "key:" + o.key + ",随机数" + BI.UUID() - }; - }, - - shouldUpdate: function (nextProps) { - var o = this.options; - return o.type !== nextProps.type || o.key !== nextProps.key || o.value !== nextProps.value; - }, - - update: function (item) { - this.label.setText(item.value); - console.log("更新了一项"); - return true;// 返回是不是更新成功 - }, - - created: function () { - console.log("创建了一项"); - }, - - destroyed: function () { - console.log("删除了一项"); - } -}); -BI.shortcut("demo.virtual_group_item", Demo.Item); \ No newline at end of file +} diff --git a/demo/js/core/abstract/demo.virtual_group_item.js b/demo/js/core/abstract/demo.virtual_group_item.js new file mode 100644 index 000000000..8cefbd4fa --- /dev/null +++ b/demo/js/core/abstract/demo.virtual_group_item.js @@ -0,0 +1,43 @@ +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("删除了一项"); + } +} diff --git a/demo/js/core/abstract/demo.virtual_list.js b/demo/js/core/abstract/demo.virtual_list.js index b2b213b7c..fc2a9e4f7 100644 --- a/demo/js/core/abstract/demo.virtual_list.js +++ b/demo/js/core/abstract/demo.virtual_list.js @@ -1,18 +1,21 @@ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, - render: function () { +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class Func extends Widget { + static xtype = "demo.virtual_list"; + + props = { baseCls: "demo-func" }; + + render() { return { type: "bi.virtual_list", - items: BI.map(Demo.CONSTANTS.ITEMS, function (i, item) { - return BI.extend({}, item, { + items: map(Demo.CONSTANTS.ITEMS, (i, item) => + extend({}, item, { type: "bi.label", height: 30, - text: (i + 1) + "." + item.text - }); - }) + text: `${i + 1}.${item.text}`, + }) + ), }; } -}); -BI.shortcut("demo.virtual_list", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.absolute.js b/demo/js/core/layout/demo.absolute.js index 2137c24df..7a0dd1ea9 100644 --- a/demo/js/core/layout/demo.absolute.js +++ b/demo/js/core/layout/demo.absolute.js @@ -1,22 +1,27 @@ -Demo.AbsoluteLayout = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-absolute" - }, - render: function () { +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 - }] + items: [ + { + el: { + type: "bi.label", + text: "绝对布局", + cls: "layout-bg1", + width: 300, + height: 200, + }, + left: 100, + top: 100, + } + ], }; } -}); -BI.shortcut("demo.absolute", Demo.AbsoluteLayout); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.border.js b/demo/js/core/layout/demo.border.js index 4d78455b2..aa69a8851 100644 --- a/demo/js/core/layout/demo.border.js +++ b/demo/js/core/layout/demo.border.js @@ -1,66 +1,72 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.BorderLayout = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-border" - }, +import { shortcut, Widget, createWidget } from "@/core"; - _createNorth: function () { - return BI.createWidget({ +@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 + height: 30, }); - }, + } - _createWest: function () { - return BI.createWidget({ + _createWest() { + return createWidget({ type: "bi.center", cls: "layout-bg2", - items: [{ - type: "bi.label", - text: "West", - whiteSpace: "normal" - }] + items: [ + { + type: "bi.label", + text: "West", + whiteSpace: "normal", + } + ], }); - }, + } - _createCenter: function () { - return BI.createWidget({ + _createCenter() { + return createWidget({ type: "bi.center", cls: "layout-bg3", - items: [{ - type: "bi.label", - text: "Center", - whiteSpace: "normal" - }] + items: [ + { + type: "bi.label", + text: "Center", + whiteSpace: "normal", + } + ], }); - }, + } - _createEast: function () { - return BI.createWidget({ + _createEast() { + return createWidget({ type: "bi.center", cls: "layout-bg5", - items: [{ - type: "bi.label", - text: "East", - whiteSpace: "normal" - }] + items: [ + { + type: "bi.label", + text: "East", + whiteSpace: "normal", + } + ], }); - }, + } - _createSouth: function () { - return BI.createWidget({ + _createSouth() { + return createWidget({ type: "bi.label", text: "South", cls: "layout-bg6", - height: 50 + height: 50, }); - }, + } - render: function () { + render() { return { type: "bi.border", cls: "", @@ -70,28 +76,27 @@ Demo.BorderLayout = BI.inherit(BI.Widget, { height: 30, top: 20, left: 20, - right: 20 + right: 20, }, south: { el: this._createSouth(), height: 50, bottom: 20, left: 20, - right: 20 + right: 20, }, west: { el: this._createWest(), width: 200, - left: 20 + left: 20, }, east: { el: this._createEast(), width: 300, - right: 20 + right: 20, }, - center: this._createCenter() - } + center: this._createCenter(), + }, }; } -}); -BI.shortcut("demo.border", Demo.BorderLayout); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.center.js b/demo/js/core/layout/demo.center.js index a57d04aa8..214afd000 100644 --- a/demo/js/core/layout/demo.center.js +++ b/demo/js/core/layout/demo.center.js @@ -1,35 +1,40 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.CenterLayout = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-center" - }, - render: function () { +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" - }], + 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 + vgap: 20, }; } -}); -BI.shortcut("demo.center_layout", Demo.CenterLayout); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.center_adapt.js b/demo/js/core/layout/demo.center_adapt.js index 2dd5afa3b..b1703a984 100644 --- a/demo/js/core/layout/demo.center_adapt.js +++ b/demo/js/core/layout/demo.center_adapt.js @@ -1,18 +1,23 @@ -Demo.CenterAdapt = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-absolute" - }, - render: function () { +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" - }] + items: [ + { + type: "bi.label", + text: "水平垂直居中", + width: 300, + height: 200, + cls: "layout-bg1", + } + ], }; } -}); -BI.shortcut("demo.center_adapt", Demo.CenterAdapt); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.float_center.js b/demo/js/core/layout/demo.float_center.js index bb249e1a0..24bf679ac 100644 --- a/demo/js/core/layout/demo.float_center.js +++ b/demo/js/core/layout/demo.float_center.js @@ -1,27 +1,30 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.FloatCenterLayout = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-float-center" - }, - render: function () { +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" - }], + 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 + vgap: 20, }; } -}); -BI.shortcut("demo.float_center", Demo.FloatCenterLayout); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.flow.js b/demo/js/core/layout/demo.flow.js index 52376fa63..9398fc900 100644 --- a/demo/js/core/layout/demo.flow.js +++ b/demo/js/core/layout/demo.flow.js @@ -1,84 +1,89 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.FlowLayout = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-flow" - }, - render: function () { +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 - }] + 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, + } + ], }; } -}); -BI.shortcut("demo.flow", Demo.FlowLayout); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.grid.js b/demo/js/core/layout/demo.grid.js index c10466197..70531458a 100644 --- a/demo/js/core/layout/demo.grid.js +++ b/demo/js/core/layout/demo.grid.js @@ -1,137 +1,153 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.GridLayout = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-grid" - }, - render: function () { +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" + 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", + }, } - }, { - 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" - } - }] + ], }; } -}); -BI.shortcut("demo.grid", Demo.GridLayout); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.horizontal.js b/demo/js/core/layout/demo.horizontal.js index 377fd79c4..831310a44 100644 --- a/demo/js/core/layout/demo.horizontal.js +++ b/demo/js/core/layout/demo.horizontal.js @@ -1,126 +1,153 @@ -/** - * Created by User on 2017/3/21. - */ -Demo.Horizontal = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-horizontal" - }, - render: function () { +import { shortcut, Widget } from "@/core"; +import { VerticalAlign, HorizontalAlign } from "@/core"; + +@shortcut() +export class Horizontal extends Widget { + static xtype = "demo.horizontal"; + + props = { baseCls: "demo-horizontal" }; + + render() { return { type: "bi.vertical", vgap: 10, - items: [{ - type: "bi.horizontal", - height: 150, - hgap: 10, - items: [{ - type: "bi.label", - whiteSpace: "normal", - text: "因为大多数场景下都需要垂直居中，所以这个布局一般会被vertical_adapt布局设置scrollx=true取代", - cls: "layout-bg3", - width: 500, - height: 50 - }, { - type: "bi.label", - text: "水平布局", - cls: "layout-bg4", - width: 300, - height: 30 - }, { - type: "bi.label", - text: "水平布局", - cls: "layout-bg5", - width: 300, - height: 30 - }, { - type: "bi.label", - text: "水平布局", - cls: "layout-bg6", - width: 300, - height: 30 - }] - }, { - type: "bi.layout", - height: 1, - cls: "bi-border-bottom bi-high-light-border" - }, { - type: "bi.horizontal", - height: 150, - verticalAlign: BI.VerticalAlign.Middle, - horizontalAlign: BI.HorizontalAlign.Left, - vgap: 10, - items: [{ - type: "bi.label", - text: "以horizontal实现的vertical_adapt垂直居中", - cls: "layout-bg1", - width: 300, - height: 30 - }, { - type: "bi.label", - text: "以horizontal实现的vertical_adapt垂直居中", - cls: "layout-bg2", - width: 300, - height: 30 - }] - }, { - type: "bi.layout", - height: 1, - cls: "bi-border-bottom bi-high-light-border" - }, { - type: "bi.horizontal", - height: 150, - verticalAlign: BI.VerticalAlign.Top, - horizontalAlign: BI.HorizontalAlign.Center, - items: [{ - type: "bi.label", - text: "以horizontal代替horizontal_adapt实现的水平居中(单元素)", - cls: "layout-bg1", - width: 300, - height: 30 - }] - }, { - type: "bi.layout", - height: 1, - cls: "bi-border-bottom bi-high-light-border" - }, { - type: "bi.horizontal", - height: 150, - verticalAlign: BI.VerticalAlign.Top, - horizontalAlign: BI.HorizontalAlign.Center, - columnSize: [300, "fill"], - items: [{ - type: "bi.label", - text: "以horizontal代替horizontal_adapt实现的用于水平适应布局", - cls: "layout-bg1", - height: 30 - }, { - type: "bi.label", - text: "以horizontal代替horizontal_adapt实现的水平自适应列", - cls: "layout-bg2", - height: 30 - }] - }, { - type: "bi.layout", - height: 1, - cls: "bi-border-bottom bi-high-light-border" - }, { - type: "bi.center_adapt", - height: 150, - verticalAlign: BI.VerticalAlign.Middle, - horizontalAlign: BI.HorizontalAlign.Center, - items: [{ - type: "bi.label", - text: "以horizontal代替center_adapt实现的水平垂直居中", - width: 300, - height: 100, - cls: "layout-bg1" - }] - }, { - type: "bi.layout", - height: 1, - cls: "bi-border-bottom bi-high-light-border" - }] + items: [ + { + type: "bi.horizontal", + height: 150, + hgap: 10, + items: [ + { + type: "bi.label", + whiteSpace: "normal", + text: "因为大多数场景下都需要垂直居中，所以这个布局一般会被vertical_adapt布局设置scrollx=true取代", + cls: "layout-bg3", + width: 500, + height: 50, + }, + { + type: "bi.label", + text: "水平布局", + cls: "layout-bg4", + width: 300, + height: 30, + }, + { + type: "bi.label", + text: "水平布局", + cls: "layout-bg5", + width: 300, + height: 30, + }, + { + type: "bi.label", + text: "水平布局", + cls: "layout-bg6", + width: 300, + height: 30, + } + ], + }, + { + type: "bi.layout", + height: 1, + cls: "bi-border-bottom bi-high-light-border", + }, + { + type: "bi.horizontal", + height: 150, + verticalAlign: BI.VerticalAlign.Middle, + horizontalAlign: BI.HorizontalAlign.Left, + vgap: 10, + items: [ + { + type: "bi.label", + text: "以horizontal实现的vertical_adapt垂直居中", + cls: "layout-bg1", + width: 300, + height: 30, + }, + { + type: "bi.label", + text: "以horizontal实现的vertical_adapt垂直居中", + cls: "layout-bg2", + width: 300, + height: 30, + } + ], + }, + { + type: "bi.layout", + height: 1, + cls: "bi-border-bottom bi-high-light-border", + }, + { + type: "bi.horizontal", + height: 150, + verticalAlign: BI.VerticalAlign.Top, + horizontalAlign: BI.HorizontalAlign.Center, + items: [ + { + type: "bi.label", + text: "以horizontal代替horizontal_adapt实现的水平居中(单元素)", + cls: "layout-bg1", + width: 300, + height: 30, + } + ], + }, + { + type: "bi.layout", + height: 1, + cls: "bi-border-bottom bi-high-light-border", + }, + { + type: "bi.horizontal", + height: 150, + verticalAlign: BI.VerticalAlign.Top, + horizontalAlign: BI.HorizontalAlign.Center, + columnSize: [300, "fill"], + items: [ + { + type: "bi.label", + text: "以horizontal代替horizontal_adapt实现的用于水平适应布局", + cls: "layout-bg1", + height: 30, + }, + { + type: "bi.label", + text: "以horizontal代替horizontal_adapt实现的水平自适应列", + cls: "layout-bg2", + height: 30, + } + ], + }, + { + type: "bi.layout", + height: 1, + cls: "bi-border-bottom bi-high-light-border", + }, + { + type: "bi.center_adapt", + height: 150, + verticalAlign: BI.VerticalAlign.Middle, + horizontalAlign: BI.HorizontalAlign.Center, + items: [ + { + type: "bi.label", + text: "以horizontal代替center_adapt实现的水平垂直居中", + width: 300, + height: 100, + cls: "layout-bg1", + } + ], + }, + { + type: "bi.layout", + height: 1, + cls: "bi-border-bottom bi-high-light-border", + } + ], }; } -}); -BI.shortcut("demo.horizontal", Demo.Horizontal); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.horizontal_adapt.js b/demo/js/core/layout/demo.horizontal_adapt.js index 316e604a6..07318fe65 100644 --- a/demo/js/core/layout/demo.horizontal_adapt.js +++ b/demo/js/core/layout/demo.horizontal_adapt.js @@ -1,57 +1,64 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.HorizontalAdapt = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-horizontal-adapt" - }, +import { shortcut, Widget, createWidget } from "@/core"; - _createLayout: function () { - return BI.createWidget({ +@shortcut() +export class HorizontalAdapt extends Widget { + static xtype = "demo.horizontal_adapt"; + + props = { baseCls: "demo-horizontal-adapt" }; + + _createLayout() { + return createWidget({ type: "bi.horizontal_adapt", - items: [{ - type: "bi.label", - text: "例子1:可用做水平居中", - cls: "layout-bg1", - width: 300, - height: 30 - }] + items: [ + { + type: "bi.label", + text: "例子1:可用做水平居中", + cls: "layout-bg1", + width: 300, + height: 30, + } + ], }); - }, + } - _createAdaptLayout: function () { - return BI.createWidget({ + _createAdaptLayout() { + return createWidget({ type: "bi.horizontal_adapt", columnSize: [300, "fill"], - items: [{ - type: "bi.label", - text: "例子2:用于水平适应布局", - cls: "layout-bg1", - height: 30 - }, { - type: "bi.label", - text: "水平自适应列", - cls: "layout-bg2", - height: 30 - }] + items: [ + { + type: "bi.label", + text: "例子2:用于水平适应布局", + cls: "layout-bg1", + height: 30, + }, + { + type: "bi.label", + text: "水平自适应列", + cls: "layout-bg2", + height: 30, + } + ], }); - }, + } - render: function () { + render() { return { type: "bi.grid", columns: 1, rows: 2, - items: [{ - column: 0, - row: 0, - el: this._createLayout() - }, { - column: 0, - row: 1, - el: this._createAdaptLayout() - }] + items: [ + { + column: 0, + row: 0, + el: this._createLayout(), + }, + { + column: 0, + row: 1, + el: this._createAdaptLayout(), + } + ], }; } -}); -BI.shortcut("demo.horizontal_adapt", Demo.HorizontalAdapt); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.horizontal_auto.js b/demo/js/core/layout/demo.horizontal_auto.js index 46e10165a..0adc9d715 100644 --- a/demo/js/core/layout/demo.horizontal_auto.js +++ b/demo/js/core/layout/demo.horizontal_auto.js @@ -1,41 +1,45 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.HorizontalAuto = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-horizontal-auto" - }, +import { shortcut, Widget, createWidget } from "@/core"; - _createLayout: function () { - return BI.createWidget({ +@shortcut() +export class HorizontalAuto extends Widget { + static xtype = "demo.horizontal_auto"; + + props = { baseCls: "demo-horizontal-auto" }; + + _createLayout() { + return createWidget({ type: "bi.horizontal_auto", - items: [{ - type: "bi.label", - text: "水平居中", - cls: "layout-bg1", - width: 300, - height: 30 - }, { - type: "bi.label", - text: "水平居中优先使用该布局", - cls: "layout-bg2", - width: 300, - height: 30 - }] + items: [ + { + type: "bi.label", + text: "水平居中", + cls: "layout-bg1", + width: 300, + height: 30, + }, + { + type: "bi.label", + text: "水平居中优先使用该布局", + cls: "layout-bg2", + width: 300, + height: 30, + } + ], }); - }, - - render: function () { + } + + render() { return { type: "bi.grid", columns: 1, rows: 2, - items: [{ - column: 0, - row: 0, - el: this._createLayout() - }] + items: [ + { + column: 0, + row: 0, + el: this._createLayout(), + } + ], }; } -}); -BI.shortcut("demo.horizontal_auto", Demo.HorizontalAuto); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.horizontal_float.js b/demo/js/core/layout/demo.horizontal_float.js index f5d84bc71..bb9cd8a67 100644 --- a/demo/js/core/layout/demo.horizontal_float.js +++ b/demo/js/core/layout/demo.horizontal_float.js @@ -1,21 +1,22 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.HorizontalFloat = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-horizontal-float" - }, +import { shortcut, Widget } from "@/core"; - render: function () { +@shortcut() +export class HorizontalFloat extends Widget { + static xtype = "demo.horizontal_float"; + + props = { baseCls: "demo-horizontal-float" }; + + render() { return { type: "bi.horizontal_float", - items: [{ - type: "bi.label", - text: "浮动式水平居中布局方案，用于宽度未知的情况", - cls: "layout-bg1", - height: 30 - }] + items: [ + { + type: "bi.label", + text: "浮动式水平居中布局方案，用于宽度未知的情况", + cls: "layout-bg1", + height: 30, + } + ], }; } -}); -BI.shortcut("demo.horizontal_float", Demo.HorizontalFloat); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.htape.js b/demo/js/core/layout/demo.htape.js index d2f0d6009..bcd7a092d 100644 --- a/demo/js/core/layout/demo.htape.js +++ b/demo/js/core/layout/demo.htape.js @@ -1,11 +1,12 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.HtapeLayout = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-htape" - }, - render: function () { +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class HtapeLayout extends Widget { + static xtype = "demo.htape"; + + props = { baseCls: "demo-htape" }; + + render() { return { type: "bi.htape", items: [ @@ -14,25 +15,26 @@ Demo.HtapeLayout = BI.inherit(BI.Widget, { el: { type: "bi.label", text: "1", - cls: "bi-background" - } - }, { + cls: "bi-background", + }, + }, + { width: 200, el: { type: "bi.label", text: "2", - cls: "layout-bg2" - } - }, { + cls: "layout-bg2", + }, + }, + { width: "fill", el: { type: "bi.label", text: "3", - cls: "layout-bg3" - } + cls: "layout-bg3", + }, } - ] + ], }; } -}); -BI.shortcut("demo.htape", Demo.HtapeLayout); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.left_right_vertical_adapt.js b/demo/js/core/layout/demo.left_right_vertical_adapt.js index e5689063b..7cf1ed74d 100644 --- a/demo/js/core/layout/demo.left_right_vertical_adapt.js +++ b/demo/js/core/layout/demo.left_right_vertical_adapt.js @@ -1,44 +1,50 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.LeftRightVerticalAdaptLayout = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-left-right-vertical-adapt" - }, - render: function () { +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class LeftRightVerticalAdaptLayout extends Widget { + static xtype = "demo.left_right_vertical_adapt"; + + props = { baseCls: "demo-left-right-vertical-adapt" }; + + render() { return { type: "bi.left_right_vertical_adapt", lhgap: 10, rhgap: 30, items: { - left: [{ - type: "bi.label", - text: "左边的垂直居中", - cls: "layout-bg1", - width: 100, - height: 30 - }, { - type: "bi.label", - text: "左边的垂直居中", - cls: "layout-bg2", - width: 100, - height: 30 - }], - right: [{ - type: "bi.label", - text: "右边的垂直居中", - cls: "layout-bg1", - width: 100, - height: 30 - }, { - type: "bi.label", - text: "右边的垂直居中", - cls: "layout-bg2", - width: 100, - height: 30 - }] - } + left: [ + { + type: "bi.label", + text: "左边的垂直居中", + cls: "layout-bg1", + width: 100, + height: 30, + }, + { + type: "bi.label", + text: "左边的垂直居中", + cls: "layout-bg2", + width: 100, + height: 30, + } + ], + right: [ + { + type: "bi.label", + text: "右边的垂直居中", + cls: "layout-bg1", + width: 100, + height: 30, + }, + { + type: "bi.label", + text: "右边的垂直居中", + cls: "layout-bg2", + width: 100, + height: 30, + } + ], + }, }; } -}); -BI.shortcut("demo.left_right_vertical_adapt", Demo.LeftRightVerticalAdaptLayout); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.table.js b/demo/js/core/layout/demo.table.js index 3497c7f9e..9cbdc666c 100644 --- a/demo/js/core/layout/demo.table.js +++ b/demo/js/core/layout/demo.table.js @@ -1,145 +1,148 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.TableLayout = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-table-layout" - }, +import { shortcut, Widget, createItems } from "@/core"; - _createTable1: function () { +@shortcut() +export class TableLayout extends Widget { + static xtype = "demo.table_layout"; + + props = { baseCls: "demo-table-layout" }; + + _createTable1() { return { type: "bi.table", - items: BI.createItems([ - [ - { - el: { - cls: "layout-bg1" - } - }, - { - el: { - cls: "layout-bg2" - } - }, - { - el: { - cls: "layout-bg3" - } - } - ], + items: createItems( [ - { - el: { - cls: "layout-bg4" - } - }, - { - el: { - cls: "layout-bg5" - } - }, - { - el: { - cls: "layout-bg6" - } - } + [ + { + el: { + cls: "layout-bg1", + }, + }, + { + el: { + cls: "layout-bg2", + }, + }, + { + el: { + cls: "layout-bg3", + }, + } + ], + [ + { + el: { + cls: "layout-bg4", + }, + }, + { + el: { + cls: "layout-bg5", + }, + }, + { + el: { + cls: "layout-bg6", + }, + } + ], + [ + { + el: { + cls: "layout-bg7", + }, + }, + { + el: { + cls: "layout-bg8", + }, + }, + { + el: { + cls: "layout-bg1", + }, + } + ], + [ + { + el: { + cls: "layout-bg2", + }, + }, + { + el: { + cls: "layout-bg3", + }, + }, + { + el: { + cls: "layout-bg4", + }, + } + ], + [ + { + el: { + cls: "layout-bg5", + }, + }, + { + el: { + cls: "layout-bg6", + }, + }, + { + el: { + cls: "layout-bg7", + }, + } + ], + [ + { + el: { + cls: "layout-bg8", + }, + }, + { + el: { + cls: "layout-bg1", + }, + }, + { + el: { + cls: "layout-bg2", + }, + } + ], + [ + { + el: { + cls: "layout-bg6", + }, + }, + { + el: { + cls: "layout-bg7", + }, + }, + { + el: { + cls: "layout-bg8", + }, + } + ] ], - [ - { - el: { - cls: "layout-bg7" - } - }, - { - el: { - cls: "layout-bg8" - } - }, - { - el: { - cls: "layout-bg1" - } - } - ], - [ - { - el: { - cls: "layout-bg2" - } - }, - { - el: { - cls: "layout-bg3" - } - }, - { - el: { - cls: "layout-bg4" - } - } - ], - [ - { - el: { - cls: "layout-bg5" - } - }, - { - el: { - cls: "layout-bg6" - } - }, - { - el: { - cls: "layout-bg7" - } - } - ], - [ - { - el: { - cls: "layout-bg8" - } - }, - { - el: { - cls: "layout-bg1" - } - }, - { - el: { - cls: "layout-bg2" - } - } - ], - [ - { - el: { - cls: "layout-bg6" - } - }, - { - el: { - cls: "layout-bg7" - } - }, - { - el: { - cls: "layout-bg8" - } - } - ] - ], { - type: "bi.layout" - }), + { + type: "bi.layout", + } + ), columnSize: [100, "fill", 200], rowSize: [10, 30, 50, 70, 90, 110, 130], hgap: 20, - vgap: 10 + vgap: 10, }; - }, + } - render: function () { + render() { return { type: "bi.grid", columns: 1, @@ -148,15 +151,14 @@ Demo.TableLayout = BI.inherit(BI.Widget, { { column: 0, row: 0, - el: this._createTable1() + el: this._createTable1(), } // , { // column: 0, // row: 1, // el: this._createTable2() // } - ] + ], }; } -}); -BI.shortcut("demo.table_layout", Demo.TableLayout); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.td.js b/demo/js/core/layout/demo.td.js index cd61eb14a..704c55380 100644 --- a/demo/js/core/layout/demo.td.js +++ b/demo/js/core/layout/demo.td.js @@ -1,59 +1,73 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.TdLayout = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-td" - }, - render: function () { +import { shortcut, Widget, createItems } from "@/core"; + +@shortcut() +export class TdLayout extends Widget { + static xtype = "demo.td"; + + props = { baseCls: "demo-td" }; + + render() { return { type: "bi.vertical", - items: [{ - type: "bi.td", - columnSize: [100, 100, ""], - items: BI.createItems([ - [{ - el: { - type: "bi.label", - text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", - cls: "layout-bg1" + items: [ + { + type: "bi.td", + columnSize: [100, 100, ""], + items: createItems( + [ + [ + { + el: { + type: "bi.label", + text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", + cls: "layout-bg1", + }, + }, + { + el: { + type: "bi.label", + text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", + cls: "layout-bg2", + }, + }, + { + el: { + type: "bi.label", + text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", + cls: "layout-bg3", + }, + } + ], + [ + { + el: { + type: "bi.label", + text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", + cls: "layout-bg5", + }, + }, + { + el: { + type: "bi.label", + text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", + cls: "layout-bg6", + }, + }, + { + el: { + type: "bi.label", + text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", + cls: "layout-bg7", + }, + } + ] + ], + { + whiteSpace: "normal", } - }, { - el: { - type: "bi.label", - text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", - cls: "layout-bg2" - } - }, { - el: { - type: "bi.label", - text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", - cls: "layout-bg3" - } - }], [{ - el: { - type: "bi.label", - text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", - cls: "layout-bg5" - } - }, { - el: { - type: "bi.label", - text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", - cls: "layout-bg6" - } - }, { - el: { - type: "bi.label", - text: "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写", - cls: "layout-bg7" - } - }] - ], { - whiteSpace: "normal" - }) - }] + ), + } + ], }; } -}); -BI.shortcut("demo.td", Demo.TdLayout); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.vertical.js b/demo/js/core/layout/demo.vertical.js index 45576eadb..5f2e299f1 100644 --- a/demo/js/core/layout/demo.vertical.js +++ b/demo/js/core/layout/demo.vertical.js @@ -1,26 +1,29 @@ -/** - * Created by User on 2017/3/21. - */ -Demo.VerticalLayout = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-vertical" - }, - render: function () { +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class VerticalLayout extends Widget { + static xtype = "demo.vertical"; + + props = { baseCls: "demo-vertical" }; + + render() { return { type: "bi.vertical", vgap: 10, - items: [{ - type: "bi.label", - cls: "layout-bg3", - text: "垂直布局", - height: 30 - }, { - type: "bi.label", - cls: "layout-bg4", - text: "垂直布局", - height: 30 - }] + items: [ + { + type: "bi.label", + cls: "layout-bg3", + text: "垂直布局", + height: 30, + }, + { + type: "bi.label", + cls: "layout-bg4", + text: "垂直布局", + height: 30, + } + ], }; } -}); -BI.shortcut("demo.vertical", Demo.VerticalLayout); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.vertical_adapt.js b/demo/js/core/layout/demo.vertical_adapt.js index 92783f116..be3a23d84 100644 --- a/demo/js/core/layout/demo.vertical_adapt.js +++ b/demo/js/core/layout/demo.vertical_adapt.js @@ -1,42 +1,46 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-vertical-adapt" - }, +import { shortcut, Widget, createWidget } from "@/core"; - _createLayout: function () { - return BI.createWidget({ +@shortcut() +export class VerticalAdaptLayout extends Widget { + static xtype = "demo.vertical_adapt"; + + props = { baseCls: "demo-vertical-adapt" }; + + _createLayout() { + return createWidget({ type: "bi.vertical_adapt", vgap: 10, - items: [{ - type: "bi.label", - text: "垂直居中", - cls: "layout-bg1", - width: 300, - height: 30 - }, { - type: "bi.label", - text: "垂直居中", - cls: "layout-bg2", - width: 300, - height: 30 - }] + items: [ + { + type: "bi.label", + text: "垂直居中", + cls: "layout-bg1", + width: 300, + height: 30, + }, + { + type: "bi.label", + text: "垂直居中", + cls: "layout-bg2", + width: 300, + height: 30, + } + ], }); - }, - - render: function () { + } + + render() { return { type: "bi.grid", columns: 2, rows: 1, - items: [{ - column: 0, - row: 0, - el: this._createLayout() - }] + items: [ + { + column: 0, + row: 0, + el: this._createLayout(), + } + ], }; } -}); -BI.shortcut("demo.vertical_adapt", Demo.VerticalAdaptLayout); \ No newline at end of file +} diff --git a/demo/js/core/layout/demo.vtape.js b/demo/js/core/layout/demo.vtape.js index d10859abc..c8f221451 100644 --- a/demo/js/core/layout/demo.vtape.js +++ b/demo/js/core/layout/demo.vtape.js @@ -1,11 +1,12 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.VtapeLayout = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-vtape" - }, - render: function () { +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class VtapeLayout extends Widget { + static xtype = "demo.vtape"; + + props = { baseCls: "demo-vtape" }; + + render() { return { type: "bi.vtape", vgap: 10, @@ -15,27 +16,28 @@ Demo.VtapeLayout = BI.inherit(BI.Widget, { el: { type: "bi.label", text: "1", - cls: "layout-bg1" + cls: "layout-bg1", }, tgap: 10, - vgap: 10 - }, { + vgap: 10, + }, + { height: 200, el: { type: "bi.label", text: "2", - cls: "layout-bg2" - } - }, { + cls: "layout-bg2", + }, + }, + { height: "fill", el: { type: "bi.label", text: "3", - cls: "layout-bg3" - } + cls: "layout-bg3", + }, } - ] + ], }; } -}); -BI.shortcut("demo.vtape", Demo.VtapeLayout); \ No newline at end of file +} diff --git a/demo/js/core/popup/demo.layer.js b/demo/js/core/popup/demo.layer.js index 83f18fd8d..767219d52 100644 --- a/demo/js/core/popup/demo.layer.js +++ b/demo/js/core/popup/demo.layer.js @@ -1,68 +1,78 @@ -/** - * Created by Windy on 2017/12/13. - */ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, - render: function () { - var self = this, id1 = BI.UUID(), id2 = BI.UUID(); +import { shortcut, Widget, UUID } from "@/core"; +import { Layers } from "@/base"; + +@shortcut() +export class Func extends Widget { + static xtype = "demo.layer"; + + props = { baseCls: "demo-func" }; + + render() { + const self = this, + id1 = UUID(), + id2 = UUID(); + return { type: "bi.vertical", vgap: 10, - items: [{ - type: "bi.button", - text: "create形式创建layer, 遮住当前面板, 返回创建的面板对象", - height: 30, - handler: function () { - BI.Layers.create(id1, self, { - //偏移量 - offset: { - left: 10, - right: 10, - top: 10, - bottom: 10 - }, - type: "bi.center_adapt", - cls: "bi-card", - items: [{ - type: "bi.button", - text: "点击关闭", - handler: function () { - BI.Layers.hide(id1); - } - }] - }); - BI.Layers.show(id1); - } - }, { - type: "bi.button", - text: "make形式创建layer,可以指定放到哪个面板内,这里指定当前面板(默认放在body下撑满), 返回创建的面板对象", - height: 30, - handler: function () { - BI.Layers.make(id2, self, { - //偏移量 - offset: { - left: 10, - right: 10, - top: 10, - bottom: 10 - }, - type: "bi.center_adapt", - cls: "bi-card", - items: [{ - type: "bi.button", - text: "点击关闭", - handler: function () { - BI.Layers.remove(id2); - } - }] - }); - BI.Layers.show(id2); + items: [ + { + type: "bi.button", + text: "create形式创建layer, 遮住当前面板, 返回创建的面板对象", + height: 30, + handler() { + Layers.create(id1, self, { + // 偏移量 + offset: { + left: 10, + right: 10, + top: 10, + bottom: 10, + }, + type: "bi.center_adapt", + cls: "bi-card", + items: [ + { + type: "bi.button", + text: "点击关闭", + handler() { + Layers.hide(id1); + }, + } + ], + }); + Layers.show(id1); + }, + }, + { + type: "bi.button", + text: "make形式创建layer,可以指定放到哪个面板内,这里指定当前面板(默认放在body下撑满), 返回创建的面板对象", + height: 30, + handler() { + Layers.make(id2, self, { + // 偏移量 + offset: { + left: 10, + right: 10, + top: 10, + bottom: 10, + }, + type: "bi.center_adapt", + cls: "bi-card", + items: [ + { + type: "bi.button", + text: "点击关闭", + handler() { + Layers.remove(id2); + }, + } + ], + }); + Layers.show(id2); + }, } - }] + ], }; } -}); - -BI.shortcut("demo.layer", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/popup/demo.popover.js b/demo/js/core/popup/demo.popover.js index 1c736c34e..a5ae5ecac 100644 --- a/demo/js/core/popup/demo.popover.js +++ b/demo/js/core/popup/demo.popover.js @@ -1,203 +1,219 @@ -/** - * Created by Windy on 2017/12/13. - */ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, - render: function () { - var id = BI.UUID(); - var body; +import { shortcut, Widget, UUID, map, range } from "@/core"; +import { Popovers } from "@/base"; + +@shortcut() +export class Func extends Widget { + static xtype = "demo.popover"; + + props = { baseCls: "demo-func" }; + + render() { + const id = UUID(); + let body; return { type: "bi.vertical", vgap: 10, - items: [{ - type: "bi.text_button", - text: "点击弹出Popover(normal size & fixed)", - height: 30, - handler: function () { - BI.Popovers.remove(id); - BI.Popovers.create(id, { - type: "bi.bar_popover", - size: "normal", - header: { - type: "bi.label", - text: "这个是header" - }, - body: { - type: "bi.label", - text: "这个是body" - } - }).open(id); - } - }, { - type: "bi.text_button", - text: "点击弹出Popover(small size & fixed)", - height: 30, - handler: function () { - BI.Popovers.remove(id); - BI.Popovers.create(id, { - type: "bi.bar_popover", - size: "small", - header: { - type: "bi.label", - text: "这个是header" - }, - body: { - type: "bi.label", - text: "这个是body" - } - }).open(id); - } - }, { - type: "bi.text_button", - text: "点击弹出Popover(big size & fixed)", - height: 30, - handler: function () { - BI.Popovers.remove(id); - BI.Popovers.create(id, { - type: "bi.bar_popover", - size: "big", - header: { - type: "bi.label", - text: "这个是header" - }, - body: { - type: "bi.label", - text: "这个是body" - } - }).open(id); - } - }, { - type: "bi.text_button", - text: "点击弹出Popover(normal size & adapt body区域高度是300)", - height: 30, - handler: function () { - BI.Popovers.remove(id); - BI.Popovers.create(id, { - type: "bi.bar_popover", - size: "normal", - logic: { - dynamic: true - }, - header: { - type: "bi.label", - text: "这个是header" - }, - body: { - type: "bi.vertical", - items: [{ - type: "bi.button_group", - ref: function () { - body = this; - }, - items: BI.map(BI.range(0, 10), function () { - return { - type: "bi.label", - text: "1", - height: 30 - }; - }), - layouts: [{ - type: "bi.vertical" - }] - }] - } - }).open(id); - } - }, { - type: "bi.text_button", - text: "点击弹出Popover(small size & adapt body区域高度是900)", - height: 30, - handler: function () { - BI.Popovers.remove(id); - BI.Popovers.create(id, { - type: "bi.bar_popover", - size: "small", - logic: { - dynamic: true - }, - header: { - type: "bi.label", - text: "这个是header" - }, - body: { - type: "bi.vertical", - items: [{ - type: "bi.button_group", - ref: function () { - body = this; - }, - items: BI.map(BI.range(0, 30), function () { + items: [ + { + type: "bi.text_button", + text: "点击弹出Popover(normal size & fixed)", + height: 30, + handler() { + Popovers.remove(id); + Popovers.create(id, { + type: "bi.bar_popover", + size: "normal", + header: { + type: "bi.label", + text: "这个是header", + }, + body: { + type: "bi.label", + text: "这个是body", + }, + }).open(id); + }, + }, + { + type: "bi.text_button", + text: "点击弹出Popover(small size & fixed)", + height: 30, + handler() { + Popovers.remove(id); + Popovers.create(id, { + type: "bi.bar_popover", + size: "small", + header: { + type: "bi.label", + text: "这个是header", + }, + body: { + type: "bi.label", + text: "这个是body", + }, + }).open(id); + }, + }, + { + type: "bi.text_button", + text: "点击弹出Popover(big size & fixed)", + height: 30, + handler() { + Popovers.remove(id); + Popovers.create(id, { + type: "bi.bar_popover", + size: "big", + header: { + type: "bi.label", + text: "这个是header", + }, + body: { + type: "bi.label", + text: "这个是body", + }, + }).open(id); + }, + }, + { + type: "bi.text_button", + text: "点击弹出Popover(normal size & adapt body区域高度是300)", + height: 30, + handler() { + Popovers.remove(id); + Popovers.create(id, { + type: "bi.bar_popover", + size: "normal", + logic: { + dynamic: true, + }, + header: { + type: "bi.label", + text: "这个是header", + }, + body: { + type: "bi.vertical", + items: [ + { + type: "bi.button_group", + ref() { + body = this; + }, + items: map(range(0, 10), () => { + return { + type: "bi.label", + text: "1", + height: 30, + }; + }), + layouts: [ + { + type: "bi.vertical", + } + ], + } + ], + }, + }).open(id); + }, + }, + { + type: "bi.text_button", + text: "点击弹出Popover(small size & adapt body区域高度是900)", + height: 30, + handler() { + Popovers.remove(id); + Popovers.create(id, { + type: "bi.bar_popover", + size: "small", + logic: { + dynamic: true, + }, + header: { + type: "bi.label", + text: "这个是header", + }, + body: { + type: "bi.vertical", + items: [ + { + type: "bi.button_group", + ref() { + body = this; + }, + items: map(range(0, 30), () => { + return { + type: "bi.label", + text: "1", + height: 30, + }; + }), + layouts: [ + { + type: "bi.vertical", + } + ], + } + ], + }, + }).open(id); + }, + }, + { + type: "bi.text_button", + text: "点击弹出Popover(custom)", + height: 30, + handler() { + Popovers.remove(id); + Popovers.create(id, { + width: 400, + height: 300, + header: { + type: "bi.label", + text: "这个是header", + }, + body: { + type: "bi.label", + text: "这个是body", + }, + footer: { + type: "bi.label", + text: "这个是footer", + }, + }).open(id); + }, + }, + { + type: "bi.text_button", + height: 30, + text: "弹出一个高度动态的popover层, 此弹出层指定size为small, 但是高度随内容自适应，自适应支持的最大高度为默认为600px", + handler() { + const id = "弹出层id1"; + Popovers.create(id, { + // String或者是json都行 + header: "弹出层标题", + logic: { + dynamic: true, + maxHeight: 700, + }, + size: "small", + body: { + type: "bi.vertical", + items: map(range(0, 50), (idx, v) => { return { type: "bi.label", - text: "1", - height: 30 + text: "弹出层内容", }; }), - layouts: [{ - type: "bi.vertical" - }] - }] - } - }).open(id); - } - }, { - type: "bi.text_button", - text: "点击弹出Popover(custom)", - height: 30, - handler: function () { - BI.Popovers.remove(id); - BI.Popovers.create(id, { - width: 400, - height: 300, - header: { - type: "bi.label", - text: "这个是header" - }, - body: { - type: "bi.label", - text: "这个是body" - }, - footer: { - type: "bi.label", - text: "这个是footer" - } - }).open(id); + }, + footer: { + type: "bi.label", + text: "这个是footer", + }, + }).open(id); + }, } - }, { - type: "bi.text_button", - height: 30, - text: "弹出一个高度动态的popover层, 此弹出层指定size为small, 但是高度随内容自适应，自适应支持的最大高度为默认为600px", - handler: function() { - var id = "弹出层id1" - BI.Popovers.create(id, { - // String或者是json都行 - header: "弹出层标题", - logic: { - dynamic: true, - maxHeight: 700, - }, - size: "small", - body: { - type: "bi.vertical", - items: BI.map(BI.range(0, 50), function(idx, v) { - return { - type: "bi.label", - text: "弹出层内容", - }; - }), - }, - footer: { - type: "bi.label", - text: "这个是footer", - }, - }).open(id); - }, - }], + ], }; } -}); - -BI.shortcut("demo.popover", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/popup/demo.popup_view.js b/demo/js/core/popup/demo.popup_view.js index b7c6bfad1..3dd0d35b7 100644 --- a/demo/js/core/popup/demo.popup_view.js +++ b/demo/js/core/popup/demo.popup_view.js @@ -1,42 +1,46 @@ -/** - * Created by Windy on 2017/12/13. - */ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createItems, deepClone } from "@/core"; + +@shortcut() +export class Func extends Widget { + static xtype = "demo.popup_view"; + + props = { baseCls: "demo-func" }; + + render() { + const self = this; - render: function () { - var self = this; return { type: "bi.absolute", - items: [{ - el: { - type: "bi.combo", - width: 200, - height: 30, + items: [ + { el: { - type: "bi.text_button", - text: "点击", - cls: "bi-border", - height: 30 - }, - popup: { - type: "bi.popup_view", + type: "bi.combo", + width: 200, + height: 30, el: { - type: "bi.button_group", - layouts: [{ - type: "bi.vertical" - }], - items: BI.createItems(BI.deepClone(Demo.CONSTANTS.ITEMS), { - type: "bi.multi_select_item", - height: 25 - }) - } - } + type: "bi.text_button", + text: "点击", + cls: "bi-border", + height: 30, + }, + popup: { + type: "bi.popup_view", + el: { + type: "bi.button_group", + layouts: [ + { + type: "bi.vertical", + } + ], + items: createItems(deepClone(Demo.CONSTANTS.ITEMS), { + type: "bi.multi_select_item", + height: 25, + }), + }, + }, + }, } - }] + ], }; } -}); -BI.shortcut("demo.popup_view", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/core/popup/demo.searcher_view.js b/demo/js/core/popup/demo.searcher_view.js index 8cb1eff7b..84920aae2 100644 --- a/demo/js/core/popup/demo.searcher_view.js +++ b/demo/js/core/popup/demo.searcher_view.js @@ -1,45 +1,61 @@ -/** - * Created by Windy on 2017/12/13. - */ -Demo.Func = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-func" - }, +import { shortcut, Widget, createItems } from "@/core"; + +@shortcut() +export class Func extends Widget { + static xtype = "demo.searcher_view"; + + props = { baseCls: "demo-func" }; + + render() { + const self = this; - render: function () { - var self = this; return { type: "bi.absolute", - items: [{ - el: { - type: "bi.searcher_view", - ref: function () { - self.searcherView = this; - } - }, - left: 100, - top: 20, - width: 230 - }] + items: [ + { + el: { + type: "bi.searcher_view", + ref() { + self.searcherView = this; + }, + }, + left: 100, + top: 20, + width: 230, + } + ], }; - }, + } - mounted: function () { - this.searcherView.populate(BI.createItems([{ - text: 2012 - }, { - text: 2013 - }, { - text: 2014 - }, { - text: 2015 - }], { - type: "bi.label", - textHeight: 24, - height: 24 - }), [{ - text: 2 - }], "2"); + mounted() { + this.searcherView.populate( + createItems( + [ + { + text: 2012, + }, + { + text: 2013, + }, + { + text: 2014, + }, + { + text: 2015, + } + ], + { + type: "bi.label", + textHeight: 24, + height: 24, + } + ), + [ + { + text: 2, + } + ], + "2" + ); } -}); -BI.shortcut("demo.searcher_view", Demo.Func); \ No newline at end of file +} diff --git a/demo/js/face.js b/demo/js/face.js index 62304e8d6..82a4b4754 100644 --- a/demo/js/face.js +++ b/demo/js/face.js @@ -1,248 +1,342 @@ -Demo.Face = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-face" - }, +import { shortcut, Widget, each } from "@/core"; +import { Msg, StyleLoaders } from "@/base"; +import { ColorChooser } from "@/case"; - _createLabel: function (text) { +@shortcut() +export class Face extends Widget { + static xtype = "demo.face"; + + props = { baseCls: "demo-face" }; + + _createLabel(text) { return { width: 200, el: { type: "bi.label", - text: text, + text, textAlign: "left", hgap: 5, height: 40, - cls: "config-label" - } + cls: "config-label", + }, }; - }, + } - _createColorPicker: function (ref, action) { + _createColorPicker(ref, action) { return { el: { type: "bi.vertical_adapt", - items: [{ - type: "bi.color_chooser", - listeners: [{ - eventName: BI.ColorChooser.EVENT_CHANGE, - action: action - }], - ref: ref, - width: 24, - height: 24 - }] - } + items: [ + { + type: "bi.color_chooser", + listeners: [ + { + eventName: ColorChooser.EVENT_CHANGE, + action, + } + ], + ref, + width: 24, + height: 24, + } + ], + }, }; - }, + } + + _createBackgroundConfig() { + const self = this; - _createBackgroundConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("背景色："), this._createColorPicker(function () { - self.backgroundColor = this; - }, function () { - self._runGlobalStyle(); - })] + items: [ + this._createLabel("背景色："), + this._createColorPicker( + function () { + self.backgroundColor = this; + }, + () => { + self._runGlobalStyle(); + } + ) + ], }; - }, + } + + _createFontConfig() { + const self = this; - _createFontConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("字体颜色："), this._createColorPicker(function () { - self.fontColor = this; - }, function () { - self._runGlobalStyle(); - })] + items: [ + this._createLabel("字体颜色："), + this._createColorPicker( + function () { + self.fontColor = this; + }, + () => { + self._runGlobalStyle(); + } + ) + ], }; - }, + } + + _createActiveFontConfig() { + const self = this; - _createActiveFontConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("激活状态字体颜色："), this._createColorPicker(function () { - self.activeFontColor = this; - }, function () { - self._runGlobalStyle(); - }), { - width: 100, - el: { - type: "bi.text_button", - cls: "bi-list-item-active", - text: "测试激活状态", + items: [ + this._createLabel("激活状态字体颜色："), + this._createColorPicker( + function () { + self.activeFontColor = this; + }, + () => { + self._runGlobalStyle(); + } + ), + { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试激活状态", + }, } - }] + ], }; - }, + } + + _createSelectFontConfig() { + const self = this; - _createSelectFontConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("选中状态字体颜色："), this._createColorPicker(function () { - self.selectFontColor = this; - }, function () { - self._runGlobalStyle(); - }), { - width: 100, - el: { - type: "bi.text_button", - cls: "bi-list-item-active", - text: "测试选中状态", + items: [ + this._createLabel("选中状态字体颜色："), + this._createColorPicker( + function () { + self.selectFontColor = this; + }, + () => { + self._runGlobalStyle(); + } + ), + { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试选中状态", + }, } - }] + ], }; - }, + } + + _createGrayFontConfig() { + const self = this; - _createGrayFontConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("tip提示字体颜色："), this._createColorPicker(function () { - self.grayFontColor = this; - }, function () { - self._runGlobalStyle(); - }), { - width: 100, - el: { - type: "bi.icon_text_item", - cls: "bi-tips copy-font", - height: 40, - text: "测试提示文字" + items: [ + this._createLabel("tip提示字体颜色："), + this._createColorPicker( + function () { + self.grayFontColor = this; + }, + () => { + self._runGlobalStyle(); + } + ), + { + width: 100, + el: { + type: "bi.icon_text_item", + cls: "bi-tips copy-font", + height: 40, + text: "测试提示文字", + }, } - }] + ], }; - }, + } + + _createDisableFontConfig() { + const self = this; - _createDisableFontConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("灰化字体颜色："), this._createColorPicker(function () { - self.disabledFontColor = this; - }, function () { - self._runGlobalStyle(); - }), { - width: 100, - el: { - type: "bi.text_button", - text: "这个按钮是灰化的", - disabled: true + items: [ + this._createLabel("灰化字体颜色："), + this._createColorPicker( + function () { + self.disabledFontColor = this; + }, + () => { + self._runGlobalStyle(); + } + ), + { + width: 100, + el: { + type: "bi.text_button", + text: "这个按钮是灰化的", + disabled: true, + }, } - }] + ], }; - }, + } + + _createCardBackgroundConfig() { + const self = this; - _createCardBackgroundConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("Card背景颜色："), this._createColorPicker(function () { - self.cardBackgroundColor = this; - }, function () { - self._runGlobalStyle(); - })] + items: [ + this._createLabel("Card背景颜色："), + this._createColorPicker( + function () { + self.cardBackgroundColor = this; + }, + () => { + self._runGlobalStyle(); + } + ) + ], }; - }, + } + + _createHoverBackgroundColor() { + const self = this; - _createHoverBackgroundColor: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("悬浮状态背景颜色："), this._createColorPicker(function () { - self.hoverBackgroundColor = this; - }, function () { - self._runGlobalStyle(); - }), { - width: 100, - el: { - type: "bi.text_button", - cls: "bi-list-item-active", - text: "测试悬浮状态", + items: [ + this._createLabel("悬浮状态背景颜色："), + this._createColorPicker( + function () { + self.hoverBackgroundColor = this; + }, + () => { + self._runGlobalStyle(); + } + ), + { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试悬浮状态", + }, } - }] + ], }; - }, + } + + _createActiveBackgroundColor() { + const self = this; - _createActiveBackgroundColor: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("激活状态背景颜色："), this._createColorPicker(function () { - self.activeBackgroundColor = this; - }, function () { - self._runGlobalStyle(); - }), { - width: 100, - el: { - type: "bi.text_button", - cls: "bi-list-item-active", - text: "测试激活状态", + items: [ + this._createLabel("激活状态背景颜色："), + this._createColorPicker( + function () { + self.activeBackgroundColor = this; + }, + () => { + self._runGlobalStyle(); + } + ), + { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试激活状态", + }, } - }] + ], }; - }, + } + + _createSelectBackgroundColor() { + const self = this; - _createSelectBackgroundColor: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("选中状态背景颜色："), this._createColorPicker(function () { - self.selectBackgroundColor = this; - }, function () { - self._runGlobalStyle(); - }), { - width: 100, - el: { - type: "bi.text_button", - cls: "bi-list-item-active", - text: "测试选中状态", + items: [ + this._createLabel("选中状态背景颜色："), + this._createColorPicker( + function () { + self.selectBackgroundColor = this; + }, + () => { + self._runGlobalStyle(); + } + ), + { + width: 100, + el: { + type: "bi.text_button", + cls: "bi-list-item-active", + text: "测试选中状态", + }, } - }] + ], }; - }, + } + + _createSlitColor() { + const self = this; - _createSlitColor: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("分割线颜色："), this._createColorPicker(function () { - self.slitColor = this; - }, function () { - self._runGlobalStyle(); - })] + items: [ + this._createLabel("分割线颜色："), + this._createColorPicker( + function () { + self.slitColor = this; + }, + () => { + self._runGlobalStyle(); + } + ) + ], }; - }, + } - _createBaseConfig: function () { + _createBaseConfig() { return { type: "bi.vertical", - items: [this._createLabel("--通用配色--"), + items: [ + this._createLabel("--通用配色--"), this._createBackgroundConfig(), this._createCardBackgroundConfig(), this._createFontConfig(), @@ -254,277 +348,365 @@ Demo.Face = BI.inherit(BI.Widget, { this._createActiveBackgroundColor(), this._createSelectBackgroundColor(), this._createSlitColor() - ] + ], }; - }, + } + _createButton1BackgroundConfig() { + const self = this; - _createButton1BackgroundConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("按钮背景色1："), this._createColorPicker(function () { - self.button1BackgroundColor = this; - }, function () { - self._runGlobalStyle(); - }), { - width: 100, - el: { - type: "bi.vertical_adapt", - height: 40, - items: [{ - type: "bi.button", - cls: "config-button1", - text: "测试按钮" - }] + items: [ + this._createLabel("按钮背景色1："), + this._createColorPicker( + function () { + self.button1BackgroundColor = this; + }, + () => { + self._runGlobalStyle(); + } + ), + { + width: 100, + el: { + type: "bi.vertical_adapt", + height: 40, + items: [ + { + type: "bi.button", + cls: "config-button1", + text: "测试按钮", + } + ], + }, } - }] + ], }; - }, + } + + _createButton2BackgroundConfig() { + const self = this; - _createButton2BackgroundConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("按钮背景色2："), this._createColorPicker(function () { - self.button2BackgroundColor = this; - }, function () { - self._runGlobalStyle(); - }), { - width: 100, - el: { - type: "bi.vertical_adapt", - height: 40, - items: [{ - type: "bi.button", - level: "success", - cls: "config-button2", - text: "测试按钮" - }] + items: [ + this._createLabel("按钮背景色2："), + this._createColorPicker( + function () { + self.button2BackgroundColor = this; + }, + () => { + self._runGlobalStyle(); + } + ), + { + width: 100, + el: { + type: "bi.vertical_adapt", + height: 40, + items: [ + { + type: "bi.button", + level: "success", + cls: "config-button2", + text: "测试按钮", + } + ], + }, } - }] + ], }; - }, + } + + _createButton3BackgroundConfig() { + const self = this; - _createButton3BackgroundConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("按钮背景色3："), this._createColorPicker(function () { - self.button3BackgroundColor = this; - }, function () { - self._runGlobalStyle(); - }), { - width: 100, - el: { - type: "bi.vertical_adapt", - height: 40, - items: [{ - type: "bi.button", - level: "warning", - cls: "config-button3", - text: "测试按钮" - }] + items: [ + this._createLabel("按钮背景色3："), + this._createColorPicker( + function () { + self.button3BackgroundColor = this; + }, + () => { + self._runGlobalStyle(); + } + ), + { + width: 100, + el: { + type: "bi.vertical_adapt", + height: 40, + items: [ + { + type: "bi.button", + level: "warning", + cls: "config-button3", + text: "测试按钮", + } + ], + }, } - }] + ], }; - }, + } + + _createButton4BackgroundConfig() { + const self = this; - _createButton4BackgroundConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("按钮背景色4："), this._createColorPicker(function () { - self.button4BackgroundColor = this; - }, function () { - self._runGlobalStyle(); - }), { - width: 100, - el: { - type: "bi.vertical_adapt", - height: 40, - items: [{ - type: "bi.button", - level: "ignore", - cls: "config-button4", - text: "测试按钮" - }] + items: [ + this._createLabel("按钮背景色4："), + this._createColorPicker( + function () { + self.button4BackgroundColor = this; + }, + () => { + self._runGlobalStyle(); + } + ), + { + width: 100, + el: { + type: "bi.vertical_adapt", + height: 40, + items: [ + { + type: "bi.button", + level: "ignore", + cls: "config-button4", + text: "测试按钮", + } + ], + }, } - }] + ], }; - }, + } + + _createScrollBackgroundConfig() { + const self = this; - _createScrollBackgroundConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("滚动条底色："), this._createColorPicker(function () { - self.scrollBackgroundColor = this; - }, function () { - self._runGlobalStyle(); - })] + items: [ + this._createLabel("滚动条底色："), + this._createColorPicker( + function () { + self.scrollBackgroundColor = this; + }, + () => { + self._runGlobalStyle(); + } + ) + ], }; - }, + } + + _createScrollThumbConfig() { + const self = this; - _createScrollThumbConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("滚动条thumb颜色："), this._createColorPicker(function () { - self.scrollThumbColor = this; - }, function () { - self._runGlobalStyle(); - })] + items: [ + this._createLabel("滚动条thumb颜色："), + this._createColorPicker( + function () { + self.scrollThumbColor = this; + }, + () => { + self._runGlobalStyle(); + } + ) + ], }; - }, + } + + _createPopupBackgroundConfig() { + const self = this; - _createPopupBackgroundConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("下拉框背景颜色："), this._createColorPicker(function () { - self.popupBackgroundColor = this; - }, function () { - self._runGlobalStyle(); - }), { - width: 100, - el: { - type: "bi.vertical_adapt", - items: [{ - type: "bi.down_list_combo", - items: [[{ - el: { - text: "column 1111", - iconCls1: "check-mark-e-font", - value: 11 - }, - children: [ - { - text: "column 1.1", - value: 21, - cls: "dot-e-font", - selected: true - }, { - text: "column 1.222222222222222222222222222222222222", - cls: "dot-e-font", - value: 22 - }, { - text: "column 1.3", - cls: "dot-e-font", - value: 23 - }, { - text: "column 1.4", - cls: "dot-e-font", - value: 24 - }, { - text: "column 1.5", - cls: "dot-e-font", - value: 25 - } - ] - }], [ - { - el: { - type: "bi.icon_text_icon_item", - text: "column 2", - iconCls1: "chart-type-e-font", - cls: "dot-e-font", - value: 12 - }, - disabled: true, - children: [{ - type: "bi.icon_text_item", - cls: "dot-e-font", - height: 25, - text: "column 2.1", - value: 11 - }, {text: "column 2.2", value: 12, cls: "dot-e-font"}] - - - } - ], [ - { - text: "column 33333333333333333333333333333333", - cls: "style-set-e-font", - value: 13 - } - ], [ - { - text: "column 4", - cls: "filter-e-font", - value: 14 - } - ], [ - { - text: "column 5", - cls: "copy-e-font", - value: 15 - - } - ], [ + items: [ + this._createLabel("下拉框背景颜色："), + this._createColorPicker( + function () { + self.popupBackgroundColor = this; + }, + () => { + self._runGlobalStyle(); + } + ), + { + width: 100, + el: { + type: "bi.vertical_adapt", + items: [ { - text: "column 6", - cls: "delete-e-font", - value: 16 + type: "bi.down_list_combo", + items: [ + [ + { + el: { + text: "column 1111", + iconCls1: "check-mark-e-font", + value: 11, + }, + children: [ + { + text: "column 1.1", + value: 21, + cls: "dot-e-font", + selected: true, + }, + { + text: "column 1.222222222222222222222222222222222222", + cls: "dot-e-font", + value: 22, + }, + { + text: "column 1.3", + cls: "dot-e-font", + value: 23, + }, + { + text: "column 1.4", + cls: "dot-e-font", + value: 24, + }, + { + text: "column 1.5", + cls: "dot-e-font", + value: 25, + } + ], + } + ], + [ + { + el: { + type: "bi.icon_text_icon_item", + text: "column 2", + iconCls1: "chart-type-e-font", + cls: "dot-e-font", + value: 12, + }, + disabled: true, + children: [ + { + type: "bi.icon_text_item", + cls: "dot-e-font", + height: 25, + text: "column 2.1", + value: 11, + }, + { text: "column 2.2", value: 12, cls: "dot-e-font" } + ], + } + ], + [ + { + text: "column 33333333333333333333333333333333", + cls: "style-set-e-font", + value: 13, + } + ], + [ + { + text: "column 4", + cls: "filter-e-font", + value: 14, + } + ], + [ + { + text: "column 5", + cls: "copy-e-font", + value: 15, + } + ], + [ + { + text: "column 6", + cls: "delete-e-font", + value: 16, + } + ], + [ + { + text: "column 7", + cls: "dimension-from-e-font", + value: 17, + disabled: true, + } + ] + ], } - ], [ - { - text: "column 7", - cls: "dimension-from-e-font", - value: 17, - disabled: true - } - ]] - }] + ], + }, } - }] + ], }; - }, + } + + _createMaskBackgroundConfig() { + const self = this; - _createMaskBackgroundConfig: function () { - var self = this; return { type: "bi.htape", cls: "config-item bi-border-bottom", height: 40, - items: [this._createLabel("弹出层蒙版颜色："), this._createColorPicker(function () { - self.maskBackgroundColor = this; - }, function () { - self._runGlobalStyle(); - }), { - width: 100, - el: { - type: "bi.vertical_adapt", - items: [{ - type: "bi.button", - text: "mask测试", - handler: function () { - BI.Msg.alert("弹出层", "弹出层面板"); - } - }] + items: [ + this._createLabel("弹出层蒙版颜色："), + this._createColorPicker( + function () { + self.maskBackgroundColor = this; + }, + () => { + self._runGlobalStyle(); + } + ), + { + width: 100, + el: { + type: "bi.vertical_adapt", + items: [ + { + type: "bi.button", + text: "mask测试", + handler() { + Msg.alert("弹出层", "弹出层面板"); + }, + } + ], + }, } - }] + ], }; - }, + } - _createCommonConfig: function () { + _createCommonConfig() { return { type: "bi.vertical", - items: [this._createLabel("--一般配色--"), + items: [ + this._createLabel("--一般配色--"), this._createButton1BackgroundConfig(), this._createButton2BackgroundConfig(), this._createButton3BackgroundConfig(), @@ -533,137 +715,144 @@ Demo.Face = BI.inherit(BI.Widget, { this._createScrollThumbConfig(), this._createPopupBackgroundConfig(), this._createMaskBackgroundConfig() - ] + ], }; - }, + } + + render() { + const self = this; - render: function () { - var self = this; return { type: "bi.grid", - items: [[{ - el: { - type: "bi.vertical", - cls: "face-config bi-border-right", - items: [this._createBaseConfig(), - this._createCommonConfig()] - } - }, { - el: { - type: "bi.layout" - } - }]] + items: [ + [ + { + el: { + type: "bi.vertical", + cls: "face-config bi-border-right", + items: [this._createBaseConfig(), this._createCommonConfig()], + }, + }, + { + el: { + type: "bi.layout", + }, + } + ] + ], }; - }, - - _setStyle: function (objects) { - var result = ""; - BI.each(objects, function (cls, object) { - result += cls + "{"; - BI.each(object, function (name, value) { - result += name + ":" + value + ";"; + } + + _setStyle(objects) { + let result = ""; + each(objects, (cls, object) => { + result += `${cls}{`; + each(object, (name, value) => { + result += `${name}:${value};`; }); result += "} "; }); - BI.StyleLoaders.removeStyle("style").loadStyle("style", result); - }, - - _runGlobalStyle: function () { - var backgroundColor = this.backgroundColor.getValue(); - var fontColor = this.fontColor.getValue(); - var activeFontColor = this.activeFontColor.getValue(); - var selectFontColor = this.selectFontColor.getValue(); - var grayFontColor = this.grayFontColor.getValue(); - var disabledFontColor = this.disabledFontColor.getValue(); - var cardBackgroundColor = this.cardBackgroundColor.getValue(); - var hoverBackgroundColor = this.hoverBackgroundColor.getValue(); - var activeBackgroundColor = this.activeBackgroundColor.getValue(); - var selectBackgroundColor = this.selectBackgroundColor.getValue(); - var slitColor = this.slitColor.getValue(); - - var button1BackgroundColor = this.button1BackgroundColor.getValue(); - var button2BackgroundColor = this.button2BackgroundColor.getValue(); - var button3BackgroundColor = this.button3BackgroundColor.getValue(); - var button4BackgroundColor = this.button4BackgroundColor.getValue(); - var scrollBackgroundColor = this.scrollBackgroundColor.getValue(); - var scrollThumbColor = this.scrollThumbColor.getValue(); - var popupBackgroundColor = this.popupBackgroundColor.getValue(); - var maskBackgroundColor = this.maskBackgroundColor.getValue(); + StyleLoaders.removeStyle("style").loadStyle("style", result); + } + + _runGlobalStyle() { + const backgroundColor = this.backgroundColor.getValue(); + const fontColor = this.fontColor.getValue(); + const activeFontColor = this.activeFontColor.getValue(); + const selectFontColor = this.selectFontColor.getValue(); + const grayFontColor = this.grayFontColor.getValue(); + const disabledFontColor = this.disabledFontColor.getValue(); + const cardBackgroundColor = this.cardBackgroundColor.getValue(); + const hoverBackgroundColor = this.hoverBackgroundColor.getValue(); + const activeBackgroundColor = this.activeBackgroundColor.getValue(); + const selectBackgroundColor = this.selectBackgroundColor.getValue(); + const slitColor = this.slitColor.getValue(); + + const button1BackgroundColor = this.button1BackgroundColor.getValue(); + const button2BackgroundColor = this.button2BackgroundColor.getValue(); + const button3BackgroundColor = this.button3BackgroundColor.getValue(); + const button4BackgroundColor = this.button4BackgroundColor.getValue(); + const scrollBackgroundColor = this.scrollBackgroundColor.getValue(); + const scrollThumbColor = this.scrollThumbColor.getValue(); + const popupBackgroundColor = this.popupBackgroundColor.getValue(); + const maskBackgroundColor = this.maskBackgroundColor.getValue(); this._setStyle({ "body.bi-background, body .bi-background": { "background-color": backgroundColor, - color: fontColor + color: fontColor, }, "body .bi-card": { "background-color": cardBackgroundColor, - color: fontColor + color: fontColor, }, "body .bi-tips": { - color: grayFontColor + color: grayFontColor, }, "div::-webkit-scrollbar,.scrollbar-layout-main": { - "background-color": scrollBackgroundColor + "!important" + "background-color": `${scrollBackgroundColor}!important`, }, "div::-webkit-scrollbar-thumb,.public-scrollbar-face:after": { - "background-color": scrollThumbColor + "!important" + "background-color": `${scrollThumbColor}!important`, }, ".base-disabled": { - color: disabledFontColor + "!important" + color: `${disabledFontColor}!important`, }, ".base-disabled .b-font:before": { - color: disabledFontColor + "!important" + color: `${disabledFontColor}!important`, }, ".list-view-outer": { - "background-color": popupBackgroundColor + "!important" + "background-color": `${popupBackgroundColor}!important`, }, ".bi-z-index-mask": { - "background-color": maskBackgroundColor + "!important" - }, - ".bi-list-item:hover,.bi-list-item-hover:hover,.bi-list-item-active:hover,.bi-list-item-select:hover,.bi-list-item-effect:hover": { - "background-color": hoverBackgroundColor + "!important" + "background-color": `${maskBackgroundColor}!important`, }, + ".bi-list-item:hover,.bi-list-item-hover:hover,.bi-list-item-active:hover,.bi-list-item-select:hover,.bi-list-item-effect:hover": + { + "background-color": `${hoverBackgroundColor}!important`, + }, ".bi-list-item-active:active,.bi-list-item-select:active,.bi-list-item-effect:active": { - "background-color": activeBackgroundColor + "!important", - color: activeFontColor + "!important" + "background-color": `${activeBackgroundColor}!important`, + color: `${activeFontColor}!important`, }, ".bi-list-item-active.active,.bi-list-item-select.active,.bi-list-item-effect.active": { - "background-color": selectBackgroundColor + "!important", - color: selectFontColor + "!important" + "background-color": `${selectBackgroundColor}!important`, + color: `${selectFontColor}!important`, }, "body .bi-button.button-common": { "background-color": button1BackgroundColor, - "border-color": button1BackgroundColor + "border-color": button1BackgroundColor, }, "body .bi-button.button-success": { "background-color": button2BackgroundColor, - "border-color": button2BackgroundColor + "border-color": button2BackgroundColor, }, "body .bi-button.button-warning": { "background-color": button3BackgroundColor, - "border-color": button3BackgroundColor + "border-color": button3BackgroundColor, }, "body .bi-button.button-ignore": { - "background-color": button4BackgroundColor + "background-color": button4BackgroundColor, }, // 以下是分割线颜色 - "body .bi-border,body .bi-border-top,#wrapper .bi-border-bottom,body .bi-border-left,body .bi-border-right": { - "border-color": slitColor - }, + "body .bi-border,body .bi-border-top,#wrapper .bi-border-bottom,body .bi-border-left,body .bi-border-right": + { + "border-color": slitColor, + }, ".bi-collection-table-cell": { "border-right-color": slitColor, - "border-bottom-color": slitColor + "border-bottom-color": slitColor, }, ".bi-collection-table-cell.first-col": { - "border-left-color": slitColor + "border-left-color": slitColor, }, ".bi-collection-table-cell.first-row": { - "border-top-color": slitColor - } + "border-top-color": slitColor, + }, }); - }, + } - mounted: function () { + mounted() { this.backgroundColor.setValue(""); this.fontColor.setValue(""); this.activeFontColor.setValue(""); @@ -686,5 +875,4 @@ Demo.Face = BI.inherit(BI.Widget, { this.slitColor.setValue(""); this._runGlobalStyle(); } -}); -BI.shortcut("demo.face", Demo.Face); \ No newline at end of file +} diff --git a/demo/js/main.js b/demo/js/main.js index ab57470d5..e42ae5a08 100644 --- a/demo/js/main.js +++ b/demo/js/main.js @@ -1,18 +1,22 @@ -Demo.Main = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-main bi-background" - }, +import { shortcut, Widget, Stores } from "@/core"; - _store: function () { - return BI.Stores.getStore("demo.store.main"); - }, +@shortcut() +export class Main extends Widget { + static xtype = "demo.main"; - beforeInit: function (cb) { + props = { baseCls: "demo-main bi-background" }; + + _store() { + return Stores.getStore("demo.store.main"); + } + + beforeInit(cb) { this.store.init(cb); - }, + } - render: function () { - var self = this; + render() { + const self = this; + return { type: "bi.border", items: { @@ -20,36 +24,39 @@ Demo.Main = BI.inherit(BI.Widget, { height: 50, el: { type: "demo.north", - listeners: [{ - eventName: Demo.North.EVENT_VALUE_CHANGE, - action: function (v) { - self.store.handleTreeSelectChange(v); + listeners: [ + { + eventName: Demo.North.EVENT_VALUE_CHANGE, + action (v) { + self.store.handleTreeSelectChange(v); + }, } - }] - } + ], + }, }, west: { width: 230, el: { type: "demo.west", - listeners: [{ - eventName: Demo.West.EVENT_VALUE_CHANGE, - action: function (v) { - self.store.handleTreeSelectChange(v); + listeners: [ + { + eventName: Demo.West.EVENT_VALUE_CHANGE, + action (v) { + self.store.handleTreeSelectChange(v); + }, } - }] - } + ], + }, }, center: { el: { type: "demo.center", - ref: function (_ref) { + ref (_ref) { self.center = _ref; - } - } - } - } + }, + }, + }, + }, }; } -}); -BI.shortcut("demo.main", Demo.Main); \ No newline at end of file +} diff --git a/demo/js/preview.js b/demo/js/preview.js index 1602077f8..d1fd6a27a 100644 --- a/demo/js/preview.js +++ b/demo/js/preview.js @@ -1,18 +1,25 @@ -Demo.Preview = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-preview" - }, - render: function () { - var self = this; - var items = [], header = [], columnSize = []; +import { shortcut, Widget, isEqual } from "@/core"; - var rowCount = 100, columnCount = 100; +@shortcut() +export class Preview extends Widget { + static xtype = "demo.preview"; + + props = { baseCls: "demo-preview" }; + + render() { + const self = this; + const items = [], + header = [], + columnSize = []; + + const rowCount = 100, + columnCount = 100; for (var i = 0; i < 1; i++) { header[i] = []; for (var j = 0; j < columnCount; j++) { header[i][j] = { type: "bi.label", - text: "表头" + i + "-" + j + text: `表头${i}-${j}`, }; columnSize[j] = 100; } @@ -22,60 +29,67 @@ Demo.Preview = BI.inherit(BI.Widget, { for (var j = 0; j < columnCount; j++) { items[i][j] = { type: "bi.label", - text: (i < 3 ? 0 : i) + "-" + j + text: `${i < 3 ? 0 : i}-${j}`, }; } } + return { type: "bi.absolute", cls: "preview-background", - items: [{ - el: { - type: "bi.vtape", - cls: "preview-card bi-card", - items: [{ - el: { - type: "bi.label", - cls: "preview-title bi-border-bottom", - height: 40, - text: "Card", - hgap: 10, - textAlign: "left" - }, - height: 40 - }, { - type: "bi.center_adapt", - scrollable: true, - items: [{ - type: "bi.resizable_table", - el: { - type: "bi.collection_table" + items: [ + { + el: { + type: "bi.vtape", + cls: "preview-card bi-card", + items: [ + { + el: { + type: "bi.label", + cls: "preview-title bi-border-bottom", + height: 40, + text: "Card", + hgap: 10, + textAlign: "left", + }, + height: 40, }, - width: 500, - height: 400, - isResizeAdapt: true, - isNeedResize: true, - isNeedMerge: true, - mergeCols: [0, 1], - mergeRule: function (col1, col2) { - return BI.isEqual(col1, col2); - }, - isNeedFreeze: true, - freezeCols: [0, 1], - columnSize: columnSize, - items: items, - header: header - }] - }] - }, - left: 60, - right: 60, - top: 60, - bottom: 60 - }] + { + type: "bi.center_adapt", + scrollable: true, + items: [ + { + type: "bi.resizable_table", + el: { + type: "bi.collection_table", + }, + width: 500, + height: 400, + isResizeAdapt: true, + isNeedResize: true, + isNeedMerge: true, + mergeCols: [0, 1], + mergeRule (col1, col2) { + return isEqual(col1, col2); + }, + isNeedFreeze: true, + freezeCols: [0, 1], + columnSize, + items, + header, + } + ], + } + ], + }, + left: 60, + right: 60, + top: 60, + bottom: 60, + } + ], }; - }, - mounted: function () { } -}); -BI.shortcut("demo.preview", Demo.Preview); \ No newline at end of file + + mounted() {} +} diff --git a/demo/js/router.js b/demo/js/router.js new file mode 100644 index 000000000..99ffb0e44 --- /dev/null +++ b/demo/js/router.js @@ -0,0 +1,17 @@ +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class Router extends Widget { + static xtype = "demo.router"; + + props = { baseCls: "demo-router" }; + + render() { + const self = this; + const params = BI.Router.$router.history.current.params; + + return { + type: params.componentId, + }; + } +} diff --git a/demo/js/widget/basewidget/demo.buttons.js b/demo/js/widget/basewidget/demo.buttons.js index c8479d341..33242f774 100644 --- a/demo/js/widget/basewidget/demo.buttons.js +++ b/demo/js/widget/basewidget/demo.buttons.js @@ -1,80 +1,87 @@ -/** - * Created by Dailer on 2017/7/25. - */ +import { shortcut, Widget, each } from "@/core"; +import { Msg } from "@/base"; +@shortcut() +export class Buttons extends Widget { + static xtype = "demo.buttons"; -Demo.Buttons = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-button" - }, - render: function () { - var items = [ + props = { baseCls: "demo-button" }; + + render() { + const items = [ { el: { type: "bi.button", text: "一般按钮", level: "common", - height: 30 - } - }, { + height: 30, + }, + }, + { el: { type: "bi.button", text: "带图标的按钮", // level: 'ignore', iconCls: "close-font", - height: 30 - } - }, { + height: 30, + }, + }, + { el: { type: "bi.button", text: "一般按钮", block: true, level: "common", - height: 30 - } - }, { + height: 30, + }, + }, + { el: { type: "bi.button", text: "一般按钮", clear: true, level: "common", - height: 30 - } - }, { + height: 30, + }, + }, + { el: { type: "bi.multi_select_bar", selected: true, - halfSelected: true - } - }, { + halfSelected: true, + }, + }, + { el: { type: "bi.multi_select_bar", selected: true, - halfSelected: false - } - }, { + halfSelected: false, + }, + }, + { el: { type: "bi.multi_select_bar", selected: false, - halfSelected: true - } - }, { + halfSelected: true, + }, + }, + { el: { - type: "bi.multi_select_bar" - } + type: "bi.multi_select_bar", + }, } ]; - BI.each(items, function (i, item) { + each(items, (i, item) => { item.el.handler = function () { - BI.Msg.alert("按钮", this.options.text); + Msg.alert("按钮", this.options.text); }; }); + return { type: "bi.left", vgap: 100, hgap: 20, - items: items + items, }; } -}); -BI.shortcut("demo.buttons", Demo.Buttons); \ No newline at end of file +} diff --git a/demo/js/widget/basewidget/demo.items.js b/demo/js/widget/basewidget/demo.items.js index 0562519b3..113d50d8b 100644 --- a/demo/js/widget/basewidget/demo.items.js +++ b/demo/js/widget/basewidget/demo.items.js @@ -1,40 +1,43 @@ -/** - * Created by Dailer on 2017/7/25. - */ +import { shortcut, Widget } from "@/core"; -Demo.Items = BI.inherit(BI.Widget, { - - render: function () { +@shortcut() +export class Items extends Widget { + static xtype = "demo.items"; + render() { return { type: "bi.vertical", - items: [{ - type: "bi.text_button", - cls: "bi-list-item-select bi-high-light-border bi-border", - height: 30, - level: "warning", - text: "单选item" - }, { - type: "bi.single_select_item", - text: "单选项" - }, { - type: "bi.single_select_radio_item", - text: "单选项" - }, { - type: "bi.label", - height: 30, - text: "复选item" - }, { - type: "bi.multi_select_item", - text: "复选项" - }, { - type: "bi.switch", - selected: true - }], - hgap: 300 + items: [ + { + type: "bi.text_button", + cls: "bi-list-item-select bi-high-light-border bi-border", + height: 30, + level: "warning", + text: "单选item", + }, + { + type: "bi.single_select_item", + text: "单选项", + }, + { + type: "bi.single_select_radio_item", + text: "单选项", + }, + { + type: "bi.label", + height: 30, + text: "复选item", + }, + { + type: "bi.multi_select_item", + text: "复选项", + }, + { + type: "bi.switch", + selected: true, + } + ], + hgap: 300, }; } -}); - - -BI.shortcut("demo.items", Demo.Items); \ No newline at end of file +} diff --git a/demo/js/widget/basewidget/demo.nodes.js b/demo/js/widget/basewidget/demo.nodes.js index 5438db02a..e8b5cc801 100644 --- a/demo/js/widget/basewidget/demo.nodes.js +++ b/demo/js/widget/basewidget/demo.nodes.js @@ -1,36 +1,41 @@ -/** - * Created by Dailer on 2017/7/25. - */ +import { shortcut, Widget } from "@/core"; -Demo.Nodes = BI.inherit(BI.Widget, { +@shortcut() +export class Nodes extends Widget { + static xtype = "demo.nodes"; - render: function (vessel) { + render(vessel) { return { type: "bi.vertical", - items: [{ - type: "bi.label", - height: 30, - text: "十字形的节点" - }, { - type: "bi.plus_group_node", - text: "十字形的节点" - }, { - type: "bi.label", - height: 30, - text: "箭头节点" - }, { - type: "bi.arrow_group_node", - text: "箭头节点" - }, { - type: "bi.icon_arrow_node", - iconCls: "search-font", - text: "箭头图标节点" - }, { - type: "bi.multilayer_icon_arrow_node", - layer: 2 - }] + items: [ + { + type: "bi.label", + height: 30, + text: "十字形的节点", + }, + { + type: "bi.plus_group_node", + text: "十字形的节点", + }, + { + type: "bi.label", + height: 30, + text: "箭头节点", + }, + { + type: "bi.arrow_group_node", + text: "箭头节点", + }, + { + type: "bi.icon_arrow_node", + iconCls: "search-font", + text: "箭头图标节点", + }, + { + type: "bi.multilayer_icon_arrow_node", + layer: 2, + } + ], }; } -}); - -BI.shortcut("demo.nodes", Demo.Nodes); \ No newline at end of file +} diff --git a/demo/js/widget/basewidget/demo.sagments.js b/demo/js/widget/basewidget/demo.sagments.js index 19946dc04..3cd9b5c20 100644 --- a/demo/js/widget/basewidget/demo.sagments.js +++ b/demo/js/widget/basewidget/demo.sagments.js @@ -1,35 +1,40 @@ -/** - * Created by Dailer on 2017/7/25. - */ +import { shortcut, Widget } from "@/core"; -Demo.Segments = BI.inherit(BI.Widget, { +@shortcut() +export class Segments extends Widget { + static xtype = "demo.segments"; - render: function () { + render() { return { type: "bi.vertical", - items: [{ - type: "bi.label", - height: 30, - text: "默认风格" - }, { - type: "bi.segment", - items: [{ - text: "tab1", - value: 1, - selected: true - }, { - text: "tab2", - value: 2 - }, { - text: "tab3 disabled", - disabled: true, - value: 3 - }] - }], + items: [ + { + type: "bi.label", + height: 30, + text: "默认风格", + }, + { + type: "bi.segment", + items: [ + { + text: "tab1", + value: 1, + selected: true, + }, + { + text: "tab2", + value: 2, + }, + { + text: "tab3 disabled", + disabled: true, + value: 3, + } + ], + } + ], hgap: 50, - vgap: 20 + vgap: 20, }; } -}); - -BI.shortcut("demo.segments", Demo.Segments); \ No newline at end of file +} diff --git a/demo/js/widget/basewidget/demo.tips.js b/demo/js/widget/basewidget/demo.tips.js index 063022e03..150b9ce72 100644 --- a/demo/js/widget/basewidget/demo.tips.js +++ b/demo/js/widget/basewidget/demo.tips.js @@ -1,146 +1,164 @@ -/** - * Created by Dailer on 2017/7/25. - */ +import { shortcut, Widget, createWidget, each } from "@/core"; +import { Bubbles, Msg } from "@/base"; -Demo.Tips = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-tips" - }, - render: function () { - var btns = []; - var bubble = BI.createWidget({ +@shortcut() +export class Tips extends Widget { + static xtype = "demo.tips"; + + props = { baseCls: "demo-tips" }; + + render() { + const btns = []; + const bubble = createWidget({ type: "bi.left", - items: [{ - el: { - type: "bi.button", - text: "bubble测试", - height: 30, - handler: function () { - BI.Bubbles.show("singleBubble1", "bubble测试", this); - btns.push("singleBubble1"); - } - } - }, { - el: { - type: "bi.button", - text: "bubble测试(居中显示)", - height: 30, - handler: function () { - BI.Bubbles.show("singleBubble2", "bubble测试", this, { - offsetStyle: "center" - }); - btns.push("singleBubble2"); - } - } - }, { - el: { - type: "bi.button", - text: "bubble测试(右边显示)", - height: 30, - handler: function () { - BI.Bubbles.show("singleBubble3", "bubble测试", this, { - offsetStyle: "right" - }); - btns.push("singleBubble3"); - } + items: [ + { + el: { + type: "bi.button", + text: "bubble测试", + height: 30, + handler() { + Bubbles.show("singleBubble1", "bubble测试", this); + btns.push("singleBubble1"); + }, + }, + }, + { + el: { + type: "bi.button", + text: "bubble测试(居中显示)", + height: 30, + handler() { + Bubbles.show("singleBubble2", "bubble测试", this, { + offsetStyle: "center", + }); + btns.push("singleBubble2"); + }, + }, + }, + { + el: { + type: "bi.button", + text: "bubble测试(右边显示)", + height: 30, + handler() { + Bubbles.show("singleBubble3", "bubble测试", this, { + offsetStyle: "right", + }); + btns.push("singleBubble3"); + }, + }, + }, + { + el: { + type: "bi.button", + text: "隐藏所有 bubble", + height: 30, + cls: "layout-bg2", + handler() { + each(btns, (index, value) => { + Bubbles.hide(value); + }); + }, + }, } - }, { - el: { - type: "bi.button", - text: "隐藏所有 bubble", - height: 30, - cls: "layout-bg2", - handler: function () { - BI.each(btns, function (index, value) { - BI.Bubbles.hide(value); - }); - } - } - }], - hgap: 20 + ], + hgap: 20, }); - var title = BI.createWidget({ + const title = createWidget({ 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" - }], + 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", + } + ], hgap: 20, - vgap: 20 + vgap: 20, }); - var toast = BI.createWidget({ + const toast = createWidget({ type: "bi.vertical", - items: [{ - el: { - type: "bi.button", - text: "简单Toast测试", - height: 30, - handler: function () { - BI.Msg.toast("这是一条简单的数据"); - } - } - }, { - el: { - type: "bi.button", - text: "很长的Toast测试", - height: 30, - handler: function () { - BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据"); - } + items: [ + { + el: { + type: "bi.button", + text: "简单Toast测试", + height: 30, + handler() { + Msg.toast("这是一条简单的数据"); + }, + }, + }, + { + el: { + type: "bi.button", + text: "很长的Toast测试", + height: 30, + handler() { + Msg.toast( + "这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据" + ); + }, + }, + }, + { + el: { + type: "bi.button", + text: "非常长的Toast测试", + height: 30, + handler() { + Msg.toast( + "这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据" + ); + }, + }, + }, + { + el: { + type: "bi.button", + text: "错误提示Toast测试", + level: "warning", + height: 30, + handler() { + Msg.toast("错误提示Toast测试", "warning"); + }, + }, } - }, { - el: { - type: "bi.button", - text: "非常长的Toast测试", - height: 30, - handler: function () { - BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据"); - } - } - }, { - el: { - type: "bi.button", - text: "错误提示Toast测试", - level: "warning", - height: 30, - handler: function () { - BI.Msg.toast("错误提示Toast测试", "warning"); - } - } - }], - vgap: 20 + ], + vgap: 20, }); return { type: "bi.horizontal_auto", vgap: 20, hgap: 20, - items: [bubble, title, toast] + items: [bubble, title, toast], }; } -}); -BI.shortcut("demo.tips", Demo.Tips); \ No newline at end of file +} diff --git a/demo/js/widget/collapase/demo.collapse.js b/demo/js/widget/collapase/demo.collapse.js index b75e29c57..9218b87db 100644 --- a/demo/js/widget/collapase/demo.collapse.js +++ b/demo/js/widget/collapase/demo.collapse.js @@ -1,59 +1,74 @@ -Demo.Collapse = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-collapse" - }, +import { shortcut, Widget, createItems } from "@/core"; - render: function () { - var self = this; - - var items = [{ - value: "test", - popup: { - cls: "mvc-border", - items: BI.createItems([{ - text: "项目1", - value: 1 - }, { - text: "项目2", - value: 2 - }, { - text: "项目3", - value: 3 - }, { - text: "项目4", - value: 4 - }], { - type: "bi.single_select_item", - height: 25 - }) - } - }, { - value: 2, - popup: { - type: "bi.label", - value: "给岁月以文明，而不是给文明以岁月" - } - }, { - value: 3, - popup: { - type: "bi.label", - value: "漂流瓶隐没于黑暗里，在一千米见方的宇宙中，只有生态球里的小太阳发出一点光芒。在这个小小的生命世界中，几只清澈的水球在零重力环境中静静地飘浮着，有一条小鱼从一只水球中蹦出，跃入另一只水球，轻盈地穿游于绿藻之间。" - } - }]; - - return { - type: "bi.vertical", - items: [{ - type: "bi.collapse", - accordion: true, - items: items, - value: [2], - }], - width: '60%', - tgap: 100, - hgap: 100 - }; - } -}); +@shortcut() +export class Collapse extends Widget { + static xtype = "demo.collapse"; -BI.shortcut("demo.collapse", Demo.Collapse); + props = { baseCls: "demo-collapse" }; + + render() { + const self = this; + + const items = [ + { + value: "test", + 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, + } + ), + }, + }, + { + value: 2, + popup: { + type: "bi.label", + value: "给岁月以文明，而不是给文明以岁月", + }, + }, + { + value: 3, + popup: { + type: "bi.label", + value: "漂流瓶隐没于黑暗里，在一千米见方的宇宙中，只有生态球里的小太阳发出一点光芒。在这个小小的生命世界中，几只清澈的水球在零重力环境中静静地飘浮着，有一条小鱼从一只水球中蹦出，跃入另一只水球，轻盈地穿游于绿藻之间。", + }, + } + ]; + + return { + type: "bi.vertical", + items: [ + { + type: "bi.collapse", + accordion: true, + items, + value: [2], + } + ], + width: "60%", + tgap: 100, + hgap: 100, + }; + } +} diff --git a/demo/js/widget/date/demo.datepane.js b/demo/js/widget/date/demo.datepane.js index 0b2e3cec1..c879484db 100644 --- a/demo/js/widget/date/demo.datepane.js +++ b/demo/js/widget/date/demo.datepane.js @@ -1,81 +1,93 @@ -Demo.DatePane = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-datepane" - }, - render: function () { - var self = this; +import { shortcut, Widget } from "@/core"; +import { Msg } from "@/base"; + +@shortcut() +export class DatePane extends Widget { + static xtype = "demo.date_pane"; + + props = { baseCls: "demo-datepane" }; + + render() { + const self = this; + return { type: "bi.horizontal_auto", - items: [{ - type: "bi.vertical", - vgap: 10, - items: [{ - type: "bi.label", - cls: "layout-bg2", - text: "bi.date_pane" - }, { - type: "bi.dynamic_date_pane", - // value: { - // type: 1, - // value: { - // year: 2017, - // month: 12, - // day: 11 - // } - // }, - ref: function (_ref) { - self.datepane = _ref; - }, - height: 300 - }, { - type: "bi.button", - text: "getValue", - handler: function () { - BI.Msg.toast("date" + JSON.stringify(self.datepane.getValue())); - } - }, { - type: "bi.dynamic_date_time_pane", - value: { - type: 1, - value: { - year: 2017, - month: 12, - day: 11, - hour: 12, - minute: 12, - second: 12 + items: [ + { + type: "bi.vertical", + vgap: 10, + items: [ + { + type: "bi.label", + cls: "layout-bg2", + text: "bi.date_pane", + }, + { + type: "bi.dynamic_date_pane", + // value: { + // type: 1, + // value: { + // year: 2017, + // month: 12, + // day: 11 + // } + // }, + ref (_ref) { + self.datepane = _ref; + }, + height: 300, + }, + { + type: "bi.button", + text: "getValue", + handler () { + Msg.toast(`date${JSON.stringify(self.datepane.getValue())}`); + }, + }, + { + type: "bi.dynamic_date_time_pane", + value: { + type: 1, + value: { + year: 2017, + month: 12, + day: 11, + hour: 12, + minute: 12, + second: 12, + }, + }, + ref (_ref) { + self.dateTimePane = _ref; + }, + height: 340, + }, + { + type: "bi.button", + text: "getValue", + handler () { + Msg.toast(`date${JSON.stringify(self.dateTimePane.getValue())}`); + }, + }, + { + type: "bi.button", + text: "setValue '2017-12-31'", + handler () { + self.datepane.setValue({ + year: 2017, + month: 12, + day: 31, + }); + }, } - }, - ref: function (_ref) { - self.dateTimePane = _ref; - }, - height: 340 - }, { - type: "bi.button", - text: "getValue", - handler: function () { - BI.Msg.toast("date" + JSON.stringify(self.dateTimePane.getValue())); - } - }, { - type: "bi.button", - text: "setValue '2017-12-31'", - handler: function () { - self.datepane.setValue({ - year: 2017, - month: 12, - day: 31 - }); - } + ], + width: "50%", } - ], - width: "50%" - }] + ], }; - }, - - mounted: function () { - this.datepane.setValue();// 不设value值表示当前时间 } -}); -BI.shortcut("demo.date_pane", Demo.DatePane); \ No newline at end of file + mounted() { + this.datepane.setValue(); // 不设value值表示当前时间 + } +} diff --git a/demo/js/widget/date/demo.multidate_combo.js b/demo/js/widget/date/demo.multidate_combo.js index 61b20892c..3cbb99ff0 100644 --- a/demo/js/widget/date/demo.multidate_combo.js +++ b/demo/js/widget/date/demo.multidate_combo.js @@ -1,105 +1,111 @@ -/** - * Created by Dailer on 2017/7/11. - */ -Demo.Date = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-date" - }, +import { shortcut, Widget } from "@/core"; +import { Msg } from "@/base"; - _init: function () { +@shortcut() +export class Date extends Widget { + static xtype = "demo.multidate_combo"; + + props = { baseCls: "demo-date" }; + + _init() { Demo.Date.superclass._init.apply(this, arguments); - }, + } + + render() { + const self = this; - render: function () { - var self = this; return { type: "bi.horizontal_auto", vgap: 20, - items: [{ - type: "bi.dynamic_date_combo", - ref: function () { - self.datecombo = this; - }, - width: 300, - // allowEdit: false, - // format: "%Y-%X-%d", // yyyy-MM-dd - // format: "%Y/%X/%d", // yyyy/MM/dd - // format: "%Y-%x-%e", // yyyy-M-d - // format: "%Y/%x/%e", // yyyy/M/d - // format: "%X/%d/%Y", // MM/dd/yyyy - // format: "%X/%e/%y", // MM/d/yy - // format: "%X.%d.%Y", // MM.dd.yyyy - // format: "%X.%e.%Y", // MM.d.yyyy - // format: "%X-%e-%y", // MM.d.yyyy - value: { - type: 1, + items: [ + { + type: "bi.dynamic_date_combo", + ref() { + self.datecombo = this; + }, + width: 300, + // allowEdit: false, + // format: "%Y-%X-%d", // yyyy-MM-dd + // format: "%Y/%X/%d", // yyyy/MM/dd + // format: "%Y-%x-%e", // yyyy-M-d + // format: "%Y/%x/%e", // yyyy/M/d + // format: "%X/%d/%Y", // MM/dd/yyyy + // format: "%X/%e/%y", // MM/d/yy + // format: "%X.%d.%Y", // MM.dd.yyyy + // format: "%X.%e.%Y", // MM.d.yyyy + // format: "%X-%e-%y", // MM.d.yyyy value: { - year: 2018, - month: 2, - day: 23 - } - } - }, { - type: "bi.button", - text: "getValue", - width: 300, - handler: function () { - BI.Msg.alert("date", JSON.stringify(self.datecombo.getValue())); - } - }, { - type: "bi.dynamic_date_time_combo", - ref: function () { - self.datetimecombo = this; + type: 1, + value: { + year: 2018, + month: 2, + day: 23, + }, + }, }, - width: 300, - // allowEdit: false, - // format: "%Y-%X-%d %H:%M:%S", // yyyy-MM-dd HH:mm:ss - // format: "%Y/%X/%d %H:%M:%S", // yyyy/MM/dd HH:mm:ss - // format: "%Y-%X-%d %I:%M:%S", // yyyy-MM-dd hh:mm:ss - // format: "%Y/%X/%d %I:%M:%S", // yyyy/MM/dd hh:mm:ss - // format: "%Y-%X-%d %H:%M:%S %p", // yyyy-MM-dd HH:mm:ss a - // format: "Y/%X/%d %H:%M:%S %p", // yyyy/MM/dd HH:mm:ss a - // format: "%Y-%X-%d %I:%M:%S %p", // yyyy-MM-dd hh:mm:ss a - // format: "%Y/%X/%d %I:%M:%S %p", // yyyy/MM/dd hh:mm:ss a - // format: "%X/%d/%Y %I:%M:%S", // MM/dd/yyyy hh:mm:ss - // format: "%X/%d/%Y %H:%M:%S", // MM/dd/yyyy HH:mm:ss - // format: "%X/%d/%Y %I:%M:%S", // MM/dd/yyyy hh:mm:ss a - // format: "%X/%d/%Y %H:%M:%S %p", // MM/dd/yyyy HH:mm:ss a - // format: "%X/%d/%Y %I:%M:%S %p", // MM/dd/yyyy hh:mm:ss a - // format: "%X/%d/%Y %H:%M:%S %p", // MM/dd/yyyy HH:mm:ss a - // format: "%X/%d/%Y %l:%M %p", // MM/dd/yyyy h:mm a - // format: "%X-%d-%Y %k:%M %p", // MM/dd/yyyy H:mm a - // format: "%Y-%x-%e %l:%M", // yyyy-M-d h:mm - // format: "%Y-%x-%e %k:%M", // yyyy-M-d H:mm - value: { - type: 1, + { + type: "bi.button", + text: "getValue", + width: 300, + handler() { + Msg.alert("date", JSON.stringify(self.datecombo.getValue())); + }, + }, + { + type: "bi.dynamic_date_time_combo", + ref() { + self.datetimecombo = this; + }, + width: 300, + // allowEdit: false, + // format: "%Y-%X-%d %H:%M:%S", // yyyy-MM-dd HH:mm:ss + // format: "%Y/%X/%d %H:%M:%S", // yyyy/MM/dd HH:mm:ss + // format: "%Y-%X-%d %I:%M:%S", // yyyy-MM-dd hh:mm:ss + // format: "%Y/%X/%d %I:%M:%S", // yyyy/MM/dd hh:mm:ss + // format: "%Y-%X-%d %H:%M:%S %p", // yyyy-MM-dd HH:mm:ss a + // format: "Y/%X/%d %H:%M:%S %p", // yyyy/MM/dd HH:mm:ss a + // format: "%Y-%X-%d %I:%M:%S %p", // yyyy-MM-dd hh:mm:ss a + // format: "%Y/%X/%d %I:%M:%S %p", // yyyy/MM/dd hh:mm:ss a + // format: "%X/%d/%Y %I:%M:%S", // MM/dd/yyyy hh:mm:ss + // format: "%X/%d/%Y %H:%M:%S", // MM/dd/yyyy HH:mm:ss + // format: "%X/%d/%Y %I:%M:%S", // MM/dd/yyyy hh:mm:ss a + // format: "%X/%d/%Y %H:%M:%S %p", // MM/dd/yyyy HH:mm:ss a + // format: "%X/%d/%Y %I:%M:%S %p", // MM/dd/yyyy hh:mm:ss a + // format: "%X/%d/%Y %H:%M:%S %p", // MM/dd/yyyy HH:mm:ss a + // format: "%X/%d/%Y %l:%M %p", // MM/dd/yyyy h:mm a + // format: "%X-%d-%Y %k:%M %p", // MM/dd/yyyy H:mm a + // format: "%Y-%x-%e %l:%M", // yyyy-M-d h:mm + // format: "%Y-%x-%e %k:%M", // yyyy-M-d H:mm value: { - year: 2018, - month: 2, - day: 23 - } - } - }, { - type: "bi.button", - text: "getValue", - width: 300, - handler: function () { - BI.Msg.alert("date", JSON.stringify(self.datetimecombo.getValue())); - } - }, { - type: "bi.button", - text: "setValue '2017-12-31'", - width: 300, - handler: function () { - self.datecombo.setValue({ - year: 2017, - month: 11, - day: 31 - }); + type: 1, + value: { + year: 2018, + month: 2, + day: 23, + }, + }, + }, + { + type: "bi.button", + text: "getValue", + width: 300, + handler() { + Msg.alert("date", JSON.stringify(self.datetimecombo.getValue())); + }, + }, + { + type: "bi.button", + text: "setValue '2017-12-31'", + width: 300, + handler() { + self.datecombo.setValue({ + year: 2017, + month: 11, + day: 31, + }); + }, } - }] + ], }; } -}); - -BI.shortcut("demo.multidate_combo", Demo.Date); \ No newline at end of file +} diff --git a/demo/js/widget/datetime/demo.datetime.js b/demo/js/widget/datetime/demo.datetime.js index 548d81679..da6b22f47 100644 --- a/demo/js/widget/datetime/demo.datetime.js +++ b/demo/js/widget/datetime/demo.datetime.js @@ -1,41 +1,57 @@ -/** - * Created by Urthur on 2017/7/18. - */ -Demo.CustomDateTime = BI.inherit(BI.Widget, { - props: {}, - render: function () { - var self = this; +import { shortcut, Widget, print } from "@/core"; +import { Msg } from "@/base"; +import { DateTimeCombo } from "@/widget"; + +@shortcut() +export class CustomDateTime extends Widget { + static xtype = "demo.date_time"; + + props = {}; + + render() { + const self = this; + return { type: "bi.absolute", - items: [{ - el: { - type: "bi.date_time_combo", - listeners: [{ - eventName: BI.DateTimeCombo.EVENT_CONFIRM, - action: function () { - var value = this.getValue(); - var date = new Date(value.year, value.month - 1, value.day, value.hour, value.minute, value.second); - var dateStr = BI.print(date, "%Y-%X-%d %H:%M:%S"); - BI.Msg.alert("日期", dateStr); - } - }, { - eventName: BI.DateTimeCombo.EVENT_CANCEL, - action: function () { - } - }], - value: { - year: 2017, - month: 2, - day: 23, - hour: 12, - minute: 11, - second: 1 - } - }, - top: 200, - left: 200 - }] + items: [ + { + el: { + type: "bi.date_time_combo", + listeners: [ + { + eventName: DateTimeCombo.EVENT_CONFIRM, + action() { + const value = this.getValue(); + const date = new Date( + value.year, + value.month - 1, + value.day, + value.hour, + value.minute, + value.second + ); + const dateStr = print(date, "%Y-%X-%d %H:%M:%S"); + Msg.alert("日期", dateStr); + }, + }, + { + eventName: DateTimeCombo.EVENT_CANCEL, + action() {}, + } + ], + value: { + year: 2017, + month: 2, + day: 23, + hour: 12, + minute: 11, + second: 1, + }, + }, + top: 200, + left: 200, + } + ], }; } -}); -BI.shortcut("demo.date_time", Demo.CustomDateTime); \ No newline at end of file +} diff --git a/demo/js/widget/downlist/demo.downlist.icon.js b/demo/js/widget/downlist/demo.downlist.icon.js new file mode 100644 index 000000000..23bca0db3 --- /dev/null +++ b/demo/js/widget/downlist/demo.downlist.icon.js @@ -0,0 +1,13 @@ +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class CustomIcon extends Widget { + static xtype = "demo.downlist.icon"; + + render() { + return { + type: "bi.label", + text: "✨", + }; + } +} diff --git a/demo/js/widget/downlist/demo.downlist.js b/demo/js/widget/downlist/demo.downlist.js index df01a9a28..4ac1d0936 100644 --- a/demo/js/widget/downlist/demo.downlist.js +++ b/demo/js/widget/downlist/demo.downlist.js @@ -1,245 +1,267 @@ -(function () { - var CustomIcon = BI.inherit(BI.Widget, { - render: function () { - return { - type: "bi.label", - text: "✨", - }; - }, - }); - BI.shortcut("demo.downlist.icon", CustomIcon); -}()); +import { shortcut, Widget, i18nText } from "@/core"; +import { DownListCombo } from "@/widget"; -Demo.Downlist = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-downlist" - }, +@shortcut() +export class Downlist extends Widget { + static xtype = "demo.down_list"; - mounted: function () { - var downlist = this.downlist; - var label = this.label; - this.downlist.setValue([{ - value: [11, 6], - childValue: 67 - }]); - downlist.on(BI.DownListCombo.EVENT_CHANGE, function (value, fatherValue) { + props = { baseCls: "demo-downlist" }; + + mounted() { + const downlist = this.downlist; + const label = this.label; + this.downlist.setValue([ + { + value: [11, 6], + childValue: 67, + } + ]); + downlist.on(DownListCombo.EVENT_CHANGE, (value, fatherValue) => { label.setValue(JSON.stringify(downlist.getValue())); }); - this.downlist.on(BI.DownListCombo.EVENT_SON_VALUE_CHANGE, function (value, fatherValue) { + this.downlist.on(DownListCombo.EVENT_SON_VALUE_CHANGE, (value, fatherValue) => { label.setValue(JSON.stringify(downlist.getValue())); }); - }, - + } - render: function () { - var self = this; + render() { + const self = this; return { type: "bi.left", - items: [{ - type: "bi.down_list_combo", - ref: function (_ref) { - self.downlist = _ref; + items: [ + { + type: "bi.down_list_combo", + ref (_ref) { + self.downlist = _ref; + }, + // value: [{"childValue":22,"value":11},{"value":18},{"value":20}], + height: 30, + width: 100, + items: [ + [ + { + text: "column 1111", + iconCls1: "dot-e-font", + value: 12, + children: [ + { + text: "column 1.1", + value: 21, + cls: "dot-e-font", + }, + { + text: "column 1.2", + value: 22, + cls: "dot-e-font", + } + ], + } + ], + [ + { + el: { + text: "column 1111", + iconCls1: "dot-e-font", + value: 11, + }, + children: [ + { + text: "column 1.1", + value: 21, + cls: "dot-e-font", + }, + { + text: "column 1.2", + value: 22, + cls: "dot-e-font", + } + ], + // children: [{ + // text: i18nText("BI-Basic_None"), + // cls: "dot-e-font", + // value: 1 + // }, { + // text: i18nText("BI-Basic_Calculate_Same_Period"), + // cls: "dot-e-font", + // value: 2 + // }, { + // text: i18nText("BI-Basic_Calculate_Same_Ring"), + // cls: "dot-e-font", + // value: 3 + // }, { + // text: i18nText("BI-Basic_Calculate_Same_Period_Rate"), + // cls: "dot-e-font", + // value: 4 + // }, { + // text: i18nText("BI-Basic_Calculate_Same_Ring_Rate"), + // cls: "dot-e-font", + // value: 5 + // }, { + // el: { + // text: i18nText("BI-Basic_Rank"), + // iconCls1: "dot-e-font", + // value: 6 + // }, + // children: [{ + // text: "test1", + // cls: "dot-e-font", + // value: 67 + // }, { + // text: "test2", + // cls: "dot-e-font", + // value: 68 + // }] + // }, { + // text: i18nText("BI-Basic_Rank_In_Group"), + // cls: "dot-e-font", + // value: 7 + // }, { + // text: i18nText("BI-Basic_Sum_Of_All"), + // cls: "dot-e-font", + // value: 8 + // }, { + // text: i18nText("BI-Basic_Sum_Of_All_In_Group"), + // cls: "dot-e-font", + // value: 9 + // }, { + // text: i18nText("BI-Basic_Sum_Of_Above"), + // cls: "dot-e-font", + // value: 10 + // }, { + // text: i18nText("BI-Basic_Sum_Of_Above_In_Group"), + // cls: "dot-e-font", + // value: 11 + // }, { + // text: i18nText("BI-Design_Current_Dimension_Percent"), + // cls: "dot-e-font", + // value: 12 + // }, { + // text: i18nText("BI-Design_Current_Target_Percent"), + // cls: "dot-e-font", + // value: 13 + // }] + } + ] + ], }, - // value: [{"childValue":22,"value":11},{"value":18},{"value":20}], - height: 30, - width: 100, - items: [ - [{ - text: "column 1111", - iconCls1: "dot-e-font", - value: 12, - children: [{ - text: "column 1.1", - value: 21, - cls: "dot-e-font" - }, { - text: "column 1.2", - value: 22, - cls: "dot-e-font" - }] - }], - [{ - el: { - text: "column 1111", - iconCls1: "dot-e-font", - value: 11 - }, - children: [{ - text: "column 1.1", - value: 21, - cls: "dot-e-font" - }, { - text: "column 1.2", - value: 22, - cls: "dot-e-font" - }] - // children: [{ - // text: BI.i18nText("BI-Basic_None"), - // cls: "dot-e-font", - // value: 1 - // }, { - // text: BI.i18nText("BI-Basic_Calculate_Same_Period"), - // cls: "dot-e-font", - // value: 2 - // }, { - // text: BI.i18nText("BI-Basic_Calculate_Same_Ring"), - // cls: "dot-e-font", - // value: 3 - // }, { - // text: BI.i18nText("BI-Basic_Calculate_Same_Period_Rate"), - // cls: "dot-e-font", - // value: 4 - // }, { - // text: BI.i18nText("BI-Basic_Calculate_Same_Ring_Rate"), - // cls: "dot-e-font", - // value: 5 - // }, { - // el: { - // text: BI.i18nText("BI-Basic_Rank"), - // iconCls1: "dot-e-font", - // value: 6 - // }, - // children: [{ - // text: "test1", - // cls: "dot-e-font", - // value: 67 - // }, { - // text: "test2", - // cls: "dot-e-font", - // value: 68 - // }] - // }, { - // text: BI.i18nText("BI-Basic_Rank_In_Group"), - // cls: "dot-e-font", - // value: 7 - // }, { - // text: BI.i18nText("BI-Basic_Sum_Of_All"), - // cls: "dot-e-font", - // value: 8 - // }, { - // text: BI.i18nText("BI-Basic_Sum_Of_All_In_Group"), - // cls: "dot-e-font", - // value: 9 - // }, { - // text: BI.i18nText("BI-Basic_Sum_Of_Above"), - // cls: "dot-e-font", - // value: 10 - // }, { - // text: BI.i18nText("BI-Basic_Sum_Of_Above_In_Group"), - // cls: "dot-e-font", - // value: 11 - // }, { - // text: BI.i18nText("BI-Design_Current_Dimension_Percent"), - // cls: "dot-e-font", - // value: 12 - // }, { - // text: BI.i18nText("BI-Design_Current_Target_Percent"), - // cls: "dot-e-font", - // value: 13 - // }] - }] - - ], - }, { - type: "bi.down_list_combo", - el: { - type: "bi.button", - ghost: true, - iconPosition: "right", - icon: "column-next-page-h-font", - text: "自定义 trigger 和 icon 的级联下拉框", - }, - listeners: [{ - eventName: "EVENT_CHANGE", - action: function (v) { - console.log("触发值", v); - } - }, { - eventName: "EVENT_SON_VALUE_CHANGE", - action: function(v) { - console.log("二级菜单触发值", v) - } - }], - items: [ - [{ - text: "选项一", - value: 1, - icon: { - type: "demo.downlist.icon", + { + type: "bi.down_list_combo", + el: { + type: "bi.button", + ghost: true, + iconPosition: "right", + icon: "column-next-page-h-font", + text: "自定义 trigger 和 icon 的级联下拉框", + }, + listeners: [ + { + eventName: "EVENT_CHANGE", + action (v) { + console.log("触发值", v); + }, }, - children: [{ - text: "选项一", - value: 11, - icon: { - type: "demo.downlist.icon", + { + eventName: "EVENT_SON_VALUE_CHANGE", + action (v) { + console.log("二级菜单触发值", v); + }, + } + ], + items: [ + [ + { + text: "选项一", + value: 1, + icon: { + type: "demo.downlist.icon", + }, + children: [ + { + text: "选项一", + value: 11, + icon: { + type: "demo.downlist.icon", + }, + }, + { + text: "选项二", + value: 12, + } + ], }, - }, { - text: "选项二", - value: 12, - }], - }, { - text: "选项二", - value: 2, - }] - ], - }, { - type: "bi.multi_layer_down_list_combo", - ref: function (_ref) { - self.downlist = _ref; + { + text: "选项二", + value: 2, + } + ] + ], }, - // value: [{"childValue":22,"value":11},{"value":18},{"value":20}], - height: 30, - width: 100, - items: [ - [{ - el: { - text: "column 1111", - iconCls1: "dot-e-font", - value: 12 - }, - children: [{ - text: "column 1.1", - value: 21, - cls: "dot-e-font" - }, { - text: "column 1.2", - value: 22, - cls: "dot-e-font" - }] - }], - [{ - el: { - text: "column 1111", - iconCls1: "dot-e-font", - value: 11 - }, - children: [{ - text: "column 1.1", - value: 21, - cls: "dot-e-font" - }, { - text: "column 1.2", - value: 22, - cls: "dot-e-font" - }] - }] - - ] - - }, { - type: "bi.label", - text: "显示选择值", - width: 500, - cls: "layout-bg3", - ref: function (_ref) { - self.label = _ref; + { + type: "bi.multi_layer_down_list_combo", + ref (_ref) { + self.downlist = _ref; + }, + // value: [{"childValue":22,"value":11},{"value":18},{"value":20}], + height: 30, + width: 100, + items: [ + [ + { + el: { + text: "column 1111", + iconCls1: "dot-e-font", + value: 12, + }, + children: [ + { + text: "column 1.1", + value: 21, + cls: "dot-e-font", + }, + { + text: "column 1.2", + value: 22, + cls: "dot-e-font", + } + ], + } + ], + [ + { + el: { + text: "column 1111", + iconCls1: "dot-e-font", + value: 11, + }, + children: [ + { + text: "column 1.1", + value: 21, + cls: "dot-e-font", + }, + { + text: "column 1.2", + value: 22, + cls: "dot-e-font", + } + ], + } + ] + ], + }, + { + type: "bi.label", + text: "显示选择值", + width: 500, + cls: "layout-bg3", + ref (_ref) { + self.label = _ref; + }, } - }], - vgap: 20 + ], + vgap: 20, }; - }, -}); - -BI.shortcut("demo.down_list", Demo.Downlist); \ No newline at end of file + } +} diff --git a/demo/js/widget/editor/demo.search_editor.js b/demo/js/widget/editor/demo.search_editor.js index 6d878a4c7..0b0b516cc 100644 --- a/demo/js/widget/editor/demo.search_editor.js +++ b/demo/js/widget/editor/demo.search_editor.js @@ -1,29 +1,31 @@ -/** - * Created by Dailer on 2017/7/11. - */ -Demo.SearchEditor = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-exceltable" - }, - render: function () { +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class SearchEditor extends Widget { + static xtype = "demo.search_editor"; + + props = { baseCls: "demo-exceltable" }; + + render() { return { type: "bi.horizontal_auto", - items: [{ - type: "bi.search_editor", - width: 300, - watermark: "添加合法性判断", - errorText: "长度必须大于4", - validationChecker: function () { - return this.getValue().length > 4; + items: [ + { + type: "bi.search_editor", + width: 300, + watermark: "添加合法性判断", + errorText: "长度必须大于4", + validationChecker() { + return this.getValue().length > 4; + }, + }, + { + type: "bi.small_search_editor", + width: 300, + watermark: "这个是 small,小一号", } - }, { - type: "bi.small_search_editor", - width: 300, - watermark: "这个是 small,小一号" - }], - vgap: 20 + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.search_editor", Demo.SearchEditor); \ No newline at end of file +} diff --git a/demo/js/widget/editor/demo.text_editor.js b/demo/js/widget/editor/demo.text_editor.js index e47a48688..231beb714 100644 --- a/demo/js/widget/editor/demo.text_editor.js +++ b/demo/js/widget/editor/demo.text_editor.js @@ -1,28 +1,29 @@ -/** - * Created by Dailer on 2017/7/11. - */ -Demo.TextEditor = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-exceltable" - }, - render: function () { +import { shortcut, Widget } from "@/core"; + +@shortcut() +export class TextEditor extends Widget { + static xtype = "demo.text_editor"; + + props = { baseCls: "demo-exceltable" }; + + render() { return { type: "bi.horizontal_auto", - items: [{ - type: "bi.text_editor", - watermark: "这是水印,watermark", - width: 300 - }, { - type: "bi.text_editor", - watermark: "这个不予许空", - allowBlank: false, - errorText: "非空!", - width: 300 - }], - vgap: 20 - + items: [ + { + type: "bi.text_editor", + watermark: "这是水印,watermark", + width: 300, + }, + { + type: "bi.text_editor", + watermark: "这个不予许空", + allowBlank: false, + errorText: "非空!", + width: 300, + } + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.text_editor", Demo.TextEditor); \ No newline at end of file +} diff --git a/demo/js/widget/multiselect/demo.multi_select_combo.js b/demo/js/widget/multiselect/demo.multi_select_combo.js index bcf487f36..e6483ffae 100644 --- a/demo/js/widget/multiselect/demo.multi_select_combo.js +++ b/demo/js/widget/multiselect/demo.multi_select_combo.js @@ -1,88 +1,96 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.MultiSelectCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-multi-select-combo" - }, +import { shortcut, Widget, Func, createWidget, bind, each, makeObject, filter, delay } from "@/core"; +import { Msg } from "@/base"; - _createMultiSelectCombo: function () { - var self = this; - var widget = BI.createWidget({ +@shortcut() +export class MultiSelectCombo extends Widget { + static xtype = "demo.multi_select_combo"; + + props = { baseCls: "demo-multi-select-combo" }; + + _createMultiSelectCombo() { + const self = this; + const widget = createWidget({ type: "bi.multi_select_insert_combo", // allowEdit: false, - itemsCreator: BI.bind(this._itemsCreator, this), + itemsCreator: bind(this._itemsCreator, this), width: 200, value: { type: 1, - value: ["柳州市城贸金属材料有限责任公司", "柳州市建福房屋租赁有限公司", "柳州市迅昌数码办公设备有限责任公司"] - } + value: [ + "柳州市城贸金属材料有限责任公司", + "柳州市建福房屋租赁有限公司", + "柳州市迅昌数码办公设备有限责任公司" + ], + }, }); - widget.on(BI.MultiSelectCombo.EVENT_CONFIRM, function () { - BI.Msg.toast(JSON.stringify(this.getValue())); + widget.on(MultiSelectCombo.EVENT_CONFIRM, function () { + Msg.toast(JSON.stringify(this.getValue())); }); return widget; - }, + } - _getItemsByTimes: function (items, times) { - var res = []; - for (var i = (times - 1) * 100; items[i] && i < times * 100; i++) { + _getItemsByTimes(items, times) { + const res = []; + for (let i = (times - 1) * 100; items[i] && i < times * 100; i++) { res.push(items[i]); } + return res; - }, + } - _hasNextByTimes: function (items, times) { + _hasNextByTimes(items, times) { return times * 100 < items.length; - }, + } - _itemsCreator: function (options, callback) { - var self = this; - var items = Demo.CONSTANTS.ITEMS; - var keywords = (options.keywords || []).slice(); + _itemsCreator(options, callback) { + const self = this; + let items = Demo.CONSTANTS.ITEMS; + const keywords = (options.keywords || []).slice(); if (options.keyword) { keywords.push(options.keyword); } - BI.each(keywords, function (i, kw) { - var search = BI.Func.getSearchResult(items, kw); + each(keywords, (i, kw) => { + const search = Func.getSearchResult(items, kw); items = search.match.concat(search.find); }); - if (options.selectedValues) {// 过滤 - var filter = BI.makeObject(options.selectedValues, true); - items = BI.filter(items, function (i, ob) { - return !filter[ob.value]; - }); + if (options.selectedValues) { + // 过滤 + const filter = makeObject(options.selectedValues, true); + items = filter(items, (i, ob) => !filter[ob.value]); } - if (options.type == BI.MultiSelectCombo.REQ_GET_ALL_DATA) { + if (options.type == MultiSelectCombo.REQ_GET_ALL_DATA) { callback({ - items: items + items, }); + return; } - if (options.type == BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) { - callback({count: items.length}); + if (options.type == MultiSelectCombo.REQ_GET_DATA_LENGTH) { + callback({ count: items.length }); + return; } - BI.delay(function () { + delay(() => { callback({ items: self._getItemsByTimes(items, options.times), - hasNext: self._hasNextByTimes(items, options.times) + hasNext: self._hasNextByTimes(items, options.times), }); }, 1000); - }, + } - render: function () { + render() { return { type: "bi.absolute", scrolly: false, - items: [{ - el: this._createMultiSelectCombo(), - right: "50%", - top: 10 - }] + items: [ + { + el: this._createMultiSelectCombo(), + right: "50%", + top: 10, + } + ], }; } -}); -BI.shortcut("demo.multi_select_combo", Demo.MultiSelectCombo); \ No newline at end of file +} diff --git a/demo/js/widget/multiselect/demo.multi_select_list.js b/demo/js/widget/multiselect/demo.multi_select_list.js index acfbebfe5..87254dd1c 100644 --- a/demo/js/widget/multiselect/demo.multi_select_list.js +++ b/demo/js/widget/multiselect/demo.multi_select_list.js @@ -1,95 +1,104 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.MultiSelectList = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-multi-select-combo" - }, +import { shortcut, Widget, createWidget, Func, bind, each, makeObject, filter, delay } from "@/core"; +import { Msg } from "@/base"; +import { MultiSelectCombo } from "@/widget"; - mounted: function () { +@shortcut() +export class MultiSelectList extends Widget { + static xtype = "demo.multi_select_list"; + + props = { baseCls: "demo-multi-select-combo" }; + + mounted() { this.list.populate(); - }, + } - _createMultiSelectCombo: function () { - var self = this; - var widget = BI.createWidget({ + _createMultiSelectCombo() { + const self = this; + const widget = createWidget({ type: "bi.multi_select_insert_list", - ref: function (ref) { + ref(ref) { self.list = ref; }, - itemsCreator: BI.bind(this._itemsCreator, this), + itemsCreator: bind(this._itemsCreator, this), value: { type: 1, - value: ["柳州市城贸金属材料有限责任公司", "柳州市建福房屋租赁有限公司", "柳州市迅昌数码办公设备有限责任公司"] - } + value: [ + "柳州市城贸金属材料有限责任公司", + "柳州市建福房屋租赁有限公司", + "柳州市迅昌数码办公设备有限责任公司" + ], + }, }); - widget.on(BI.MultiSelectCombo.EVENT_CONFIRM, function () { - BI.Msg.toast(JSON.stringify(this.getValue())); + widget.on(MultiSelectCombo.EVENT_CONFIRM, function () { + Msg.toast(JSON.stringify(this.getValue())); }); return widget; - }, + } - _getItemsByTimes: function (items, times) { - var res = []; - for (var i = (times - 1) * 10; items[i] && i < times * 10; i++) { + _getItemsByTimes(items, times) { + const res = []; + for (let i = (times - 1) * 10; items[i] && i < times * 10; i++) { res.push(items[i]); } + return res; - }, + } - _hasNextByTimes: function (items, times) { + _hasNextByTimes(items, times) { return times * 10 < items.length; - }, + } - _itemsCreator: function (options, callback) { - var self = this; - var items = Demo.CONSTANTS.ITEMS; - var keywords = (options.keywords || []).slice(); + _itemsCreator(options, callback) { + const self = this; + let items = Demo.CONSTANTS.ITEMS; + const keywords = (options.keywords || []).slice(); if (options.keyword) { keywords.push(options.keyword); } - BI.each(keywords, function (i, kw) { - var search = BI.Func.getSearchResult(items, kw); + each(keywords, (i, kw) => { + const search = Func.getSearchResult(items, kw); items = search.match.concat(search.find); }); - if (options.selectedValues) {// 过滤 - var filter = BI.makeObject(options.selectedValues, true); - items = BI.filter(items, function (i, ob) { - return !filter[ob.value]; - }); + if (options.selectedValues) { + // 过滤 + const filter = makeObject(options.selectedValues, true); + items = filter(items, (i, ob) => !filter[ob.value]); } - if (options.type == BI.MultiSelectCombo.REQ_GET_ALL_DATA) { + if (options.type == MultiSelectCombo.REQ_GET_ALL_DATA) { callback({ - items: items + items, }); + return; } - if (options.type == BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) { - callback({count: items.length}); + if (options.type == MultiSelectCombo.REQ_GET_DATA_LENGTH) { + callback({ count: items.length }); + return; } - BI.delay(function () { + delay(() => { callback({ items: self._getItemsByTimes(items, options.times), - hasNext: self._hasNextByTimes(items, options.times) + hasNext: self._hasNextByTimes(items, options.times), }); }, 1000); - }, + } - render: function () { + render() { return { type: "bi.absolute", scrolly: false, - items: [{ - el: this._createMultiSelectCombo(), - top: 50, - left: 50, - right: 50, - bottom: 50 - }] + items: [ + { + el: this._createMultiSelectCombo(), + top: 50, + left: 50, + right: 50, + bottom: 50, + } + ], }; } -}); -BI.shortcut("demo.multi_select_list", Demo.MultiSelectList); \ No newline at end of file +} diff --git a/demo/js/widget/multitree/demo.multi_tree_combo.js b/demo/js/widget/multitree/demo.multi_tree_combo.js index c3e0ffaa4..b6b9fcbbb 100644 --- a/demo/js/widget/multitree/demo.multi_tree_combo.js +++ b/demo/js/widget/multitree/demo.multi_tree_combo.js @@ -1,63 +1,67 @@ -/** - * Created by Dailer on 2017/7/13. - */ -Demo.MultiTreeCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, +import { shortcut, Widget, deepClone } from "@/core"; +import { Msg } from "@/base"; +import { TreeView } from "@/case"; + +@shortcut() +export class MultiTreeCombo extends Widget { + static xtype = "demo.multi_tree_combo"; + + props = { baseCls: "" }; + + render() { + const self = this; + const items = deepClone(Demo.CONSTANTS.TREE); - render: function () { - var self = this; - var items = BI.deepClone(Demo.CONSTANTS.TREE); return { type: "bi.horizontal_auto", - items: [{ - type: "bi.multi_tree_combo", - ref: function (_ref) { - self.tree = _ref; - }, - itemsCreator: function (options, callback) { - console.log(options); - // 根据不同的类型处理相应的结果 - switch (options.type) { - case BI.TreeView.REQ_TYPE_INIT_DATA: - break; - case BI.TreeView.REQ_TYPE_ADJUST_DATA: - break; - case BI.TreeView.REQ_TYPE_SELECT_DATA: - break; - case BI.TreeView.REQ_TYPE_GET_SELECTED_DATA: - break; - default : - break; - } - callback({ - items: items - }); - }, - width: 300, - value: { - "根目录": {} - }, - listeners: [ - { - eventName: "EVENT_CONFIRM", - action: function () { - console.log("EVENT_CONFIRM", this.getValue()); + items: [ + { + type: "bi.multi_tree_combo", + ref(_ref) { + self.tree = _ref; + }, + itemsCreator(options, callback) { + console.log(options); + // 根据不同的类型处理相应的结果 + switch (options.type) { + case TreeView.REQ_TYPE_INIT_DATA: + break; + case TreeView.REQ_TYPE_ADJUST_DATA: + break; + case TreeView.REQ_TYPE_SELECT_DATA: + break; + case TreeView.REQ_TYPE_GET_SELECTED_DATA: + break; + default: + break; } - } - ] - }, { - type: "bi.button", - text: "getValue", - handler: function () { - BI.Msg.toast(JSON.stringify(self.tree.getValue())); + callback({ + items, + }); + }, + width: 300, + value: { + 根目录: {}, + }, + listeners: [ + { + eventName: "EVENT_CONFIRM", + action() { + console.log("EVENT_CONFIRM", this.getValue()); + }, + } + ], }, - width: 300 - }], - vgap: 20 + { + type: "bi.button", + text: "getValue", + handler() { + Msg.toast(JSON.stringify(self.tree.getValue())); + }, + width: 300, + } + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.multi_tree_combo", Demo.MultiTreeCombo); +} diff --git a/demo/js/widget/multitree/demo.multi_tree_list.js b/demo/js/widget/multitree/demo.multi_tree_list.js index 6a9044d14..836a32b6e 100644 --- a/demo/js/widget/multitree/demo.multi_tree_list.js +++ b/demo/js/widget/multitree/demo.multi_tree_list.js @@ -1,69 +1,73 @@ -/** - * Created by Dailer on 2017/7/13. - */ -Demo.MultiTreeCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, +import { shortcut, Widget, deepClone } from "@/core"; +import { Msg } from "@/base"; +import { TreeView } from "@/case"; - mounted: function () { +@shortcut() +export class MultiTreeCombo extends Widget { + static xtype = "demo.multi_select_tree"; + + props = { baseCls: "" }; + + mounted() { this.tree.populate(); - }, + } + + render() { + const self = this; + const items = deepClone(Demo.CONSTANTS.TREE); - render: function () { - var self = this; - var items = BI.deepClone(Demo.CONSTANTS.TREE); return { type: "bi.absolute", - items: [{ - el: { - type: "bi.multi_select_tree", - ref: function (_ref) { - self.tree = _ref; + items: [ + { + el: { + type: "bi.multi_select_tree", + ref(_ref) { + self.tree = _ref; + }, + itemsCreator(options, callback) { + console.log(options); + // 根据不同的类型处理相应的结果 + switch (options.type) { + case TreeView.REQ_TYPE_INIT_DATA: + break; + case TreeView.REQ_TYPE_ADJUST_DATA: + break; + case TreeView.REQ_TYPE_SELECT_DATA: + break; + case TreeView.REQ_TYPE_GET_SELECTED_DATA: + break; + default: + break; + } + callback({ + items: deepClone(items), + }); + }, + width: 300, + value: { + 根目录: {}, + }, }, - itemsCreator: function (options, callback) { - console.log(options); - // 根据不同的类型处理相应的结果 - switch (options.type) { - case BI.TreeView.REQ_TYPE_INIT_DATA: - break; - case BI.TreeView.REQ_TYPE_ADJUST_DATA: - break; - case BI.TreeView.REQ_TYPE_SELECT_DATA: - break; - case BI.TreeView.REQ_TYPE_GET_SELECTED_DATA: - break; - default : - break; - } - callback({ - items: BI.deepClone(items) - }); - }, - width: 300, - value: { - "根目录": {} - } - }, - top: 50, - bottom: 50, - left: 50, - right: 50 - }, { - el: { - type: "bi.button", - height: 30, - text: "getValue", - handler: function () { - BI.Msg.toast(JSON.stringify(self.tree.getValue())); - } + top: 50, + bottom: 50, + left: 50, + right: 50, }, - left: 50, - right: 50, - bottom: 20 - }] + { + el: { + type: "bi.button", + height: 30, + text: "getValue", + handler() { + Msg.toast(JSON.stringify(self.tree.getValue())); + }, + }, + left: 50, + right: 50, + bottom: 20, + } + ], }; } -}); - -BI.shortcut("demo.multi_select_tree", Demo.MultiTreeCombo); \ No newline at end of file +} diff --git a/demo/js/widget/numbereditor/demo.number_editor.js b/demo/js/widget/numbereditor/demo.number_editor.js index bbd7181dd..898a57bf8 100644 --- a/demo/js/widget/numbereditor/demo.number_editor.js +++ b/demo/js/widget/numbereditor/demo.number_editor.js @@ -1,50 +1,51 @@ -/* 文件管理导航 - Created by dailer on 2017 / 7 / 21. - */ -Demo.FileManager = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, +import { shortcut, Widget, createWidget, parseFloat } from "@/core"; +import { Msg } from "@/base"; +import { NumberEditor } from "@/widget"; - render: function () { - var editor1 = BI.createWidget({ +@shortcut() +export class FileManager extends Widget { + static xtype = "demo.number_editor"; + + props = { baseCls: "" }; + + render() { + const editor1 = createWidget({ type: "bi.number_editor", - validationChecker: function (v) { - return BI.parseFloat(v) <= 100 && BI.parseFloat(v) >= 0; + validationChecker(v) { + return parseFloat(v) <= 100 && parseFloat(v) >= 0; }, height: 24, width: 150, errorText: "hahah", watermark: "每个人都是自己健康的第一责任人", }); - editor1.on(BI.NumberEditor.EVENT_CHANGE, function () { - if (BI.parseFloat(this.getValue()) < 1) { + editor1.on(NumberEditor.EVENT_CHANGE, function () { + if (parseFloat(this.getValue()) < 1) { editor1.setDownEnable(false); } else { editor1.setDownEnable(true); } - BI.Msg.toast(editor1.getValue()); + Msg.toast(editor1.getValue()); }); - - var editor2 = BI.createWidget({ + const editor2 = createWidget({ type: "bi.number_editor", - validationChecker: function (v) { - return BI.parseFloat(v) <= 100 && BI.parseFloat(v) >= 0; + validationChecker(v) { + return parseFloat(v) <= 100 && parseFloat(v) >= 0; }, - valueFormatter: (v) => `${v}$`, - valueParser: (v) => v.replace(/\$\s?|(,*)/g, ''), + valueFormatter: v => `${v}$`, + valueParser: v => v.replace(/\$\s?|(,*)/g, ""), height: 24, width: 150, - errorText: "hahah" + errorText: "hahah", }); - editor2.on(BI.NumberEditor.EVENT_CHANGE, function () { - if (BI.parseFloat(this.getValue()) < 1) { + editor2.on(NumberEditor.EVENT_CHANGE, function () { + if (parseFloat(this.getValue()) < 1) { editor2.setDownEnable(false); } else { editor2.setDownEnable(true); } - BI.Msg.toast(editor2.getValue()); + Msg.toast(editor2.getValue()); }); return { @@ -54,13 +55,13 @@ Demo.FileManager = BI.inherit(BI.Widget, { items: [ { el: editor1, - height: 24 - }, { + height: 24, + }, + { el: editor2, - height: 24 + height: 24, } - ] + ], }; } -}); -BI.shortcut("demo.number_editor", Demo.FileManager); +} diff --git a/demo/js/widget/numberinterval/demo.number_interval.js b/demo/js/widget/numberinterval/demo.number_interval.js index 48e5834ae..8ff722b02 100644 --- a/demo/js/widget/numberinterval/demo.number_interval.js +++ b/demo/js/widget/numberinterval/demo.number_interval.js @@ -1,47 +1,51 @@ -/** - * Created by Dailer on 2017/7/12. - */ -Demo.NumericalInterval = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-exceltable" - }, +import { shortcut, Widget } from "@/core"; +import { NumberInterval } from "@/widget"; - mounted: function () { - var numerical = this.numerical; - var label = this.label; - numerical.on(BI.NumberInterval.EVENT_CONFIRM, function () { - var temp = numerical.getValue(); - var res = "大于" + (temp.closemin ? "等于 " : " ") + temp.min + " 小于" + (temp.closemax ? "等于 " : " ") + temp.max; +@shortcut() +export class NumericalInterval extends Widget { + static xtype = "demo.number_interval"; + + props = { baseCls: "demo-exceltable" }; + + mounted() { + const numerical = this.numerical; + const label = this.label; + numerical.on(NumberInterval.EVENT_CONFIRM, () => { + const temp = numerical.getValue(); + const res = `大于${temp.closemin ? "等于 " : " "}${temp.min} 小于${temp.closemax ? "等于 " : " "}${ + temp.max + }`; label.setValue(res); }); - }, + } + render() { + const self = this; - render: function () { - var self = this; return { type: "bi.horizontal_auto", - items: [{ - type: "bi.number_interval", - ref: function (_ref) { - self.numerical = _ref; + items: [ + { + type: "bi.number_interval", + ref(_ref) { + self.numerical = _ref; + }, + width: 500, + value: { + max: 300, + closeMax: true, + closeMin: false, + }, }, - width: 500, - value: { - max: 300, - closeMax: true, - closeMin: false + { + type: "bi.label", + ref(_ref) { + self.label = _ref; + }, + text: "显示结果", } - }, { - type: "bi.label", - ref: function (_ref) { - self.label = _ref; - }, - text: "显示结果" - }], - vgap: 20 + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.number_interval", Demo.NumericalInterval); \ No newline at end of file +} diff --git a/demo/js/widget/selecttree/demo.multilayer_select_tree_combo.js b/demo/js/widget/selecttree/demo.multilayer_select_tree_combo.js index e9ddefe5f..944431a89 100644 --- a/demo/js/widget/selecttree/demo.multilayer_select_tree_combo.js +++ b/demo/js/widget/selecttree/demo.multilayer_select_tree_combo.js @@ -1,45 +1,47 @@ -/** - * Created by Dailer on 2017/7/13. - */ -Demo.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, +import { shortcut, Widget, deepClone } from "@/core"; +import { Msg } from "@/base"; + +@shortcut() +export class MultiLayerSelectTreeCombo extends Widget { + static xtype = "demo.multilayer_select_tree_combo"; + + props = { baseCls: "" }; + + render() { + const self = this; + const items = deepClone(Demo.CONSTANTS.TREE); - render: function () { - var self = this; - var items = BI.deepClone(Demo.CONSTANTS.TREE); return { type: "bi.horizontal_auto", items: [ { type: "bi.multilayer_select_tree_combo", - ref: function (_ref) { + ref(_ref) { self.tree = _ref; }, defaultText: "请选择", - items: items, + items, width: 300, - value: ["第五级文件1"] - }, { + value: ["第五级文件1"], + }, + { type: "bi.button", text: "getVlaue", - handler: function () { - BI.Msg.toast(self.tree.getValue()[0]); + handler() { + Msg.toast(self.tree.getValue()[0]); }, - width: 300 - }, { + width: 300, + }, + { type: "bi.button", text: "setVlaue (第二级文件1)", - handler: function () { + handler() { self.tree.setValue(["11"]); }, - width: 300 + width: 300, } ], - vgap: 20 + vgap: 20, }; } -}); - -BI.shortcut("demo.multilayer_select_tree_combo", Demo.MultiLayerSelectTreeCombo); +} diff --git a/demo/js/widget/selecttree/demo.select_tree_combo.js b/demo/js/widget/selecttree/demo.select_tree_combo.js index e704e1f8a..66d69983d 100644 --- a/demo/js/widget/selecttree/demo.select_tree_combo.js +++ b/demo/js/widget/selecttree/demo.select_tree_combo.js @@ -1,45 +1,47 @@ -/** - * Created by Dailer on 2017/7/13. - */ -Demo.SelectTreeCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-exceltable" - }, +import { shortcut, Widget, deepClone } from "@/core"; +import { Msg } from "@/base"; + +@shortcut() +export class SelectTreeCombo extends Widget { + static xtype = "demo.select_tree_combo"; + + props = { baseCls: "demo-exceltable" }; + + render() { + const self = this; + const items = deepClone(Demo.CONSTANTS.LEVELTREE); - render: function () { - var self = this; - var items = BI.deepClone(Demo.CONSTANTS.LEVELTREE); return { type: "bi.horizontal_auto", items: [ { type: "bi.select_tree_combo", - ref: function (_ref) { + ref(_ref) { self.tree = _ref; }, value: "11", text: "默认值", - items: items, - width: 300 - }, { + items, + width: 300, + }, + { type: "bi.button", text: "getVlaue", - handler: function () { - BI.Msg.toast(self.tree.getValue()[0]); + handler() { + Msg.toast(self.tree.getValue()[0]); }, - width: 300 - }, { + width: 300, + }, + { type: "bi.button", text: "setVlaue (11)", - handler: function () { + handler() { self.tree.setValue(["2"]); }, - width: 300 + width: 300, } ], - vgap: 20 + vgap: 20, }; } -}); - -BI.shortcut("demo.select_tree_combo", Demo.SelectTreeCombo); +} diff --git a/demo/js/widget/singleselct/demo.single_select_combo.js b/demo/js/widget/singleselct/demo.single_select_combo.js index 1fc68fb6b..fea2603bf 100644 --- a/demo/js/widget/singleselct/demo.single_select_combo.js +++ b/demo/js/widget/singleselct/demo.single_select_combo.js @@ -1,99 +1,103 @@ -/** - * Created by User on 2017/3/22. - */ -Demo.SingleSelectCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-single-select-combo" - }, +import { shortcut, Widget, Func } from "@/core"; - _createSingleSelectCombo: function () { - var self = this; - var widget = BI.createWidget({ +@shortcut() +export class SingleSelectCombo extends Widget { + static xtype = "demo.single_select_combo"; + + props = { baseCls: "demo-single-select-combo" }; + + _createSingleSelectCombo() { + const self = this; + const widget = createWidget({ type: "bi.single_select_combo", - itemsCreator: BI.bind(this._itemsCreator, this), + itemsCreator: bind(this._itemsCreator, this), width: 200, - ref: function () { + ref() { self.SingleSelectCombo = this; }, - value: "柳州市针织总厂" + value: "柳州市针织总厂", }); widget.populate(); - widget.on(BI.SingleSelectCombo.EVENT_CONFIRM, function () { - BI.Msg.toast(JSON.stringify(this.getValue())); + widget.on(SingleSelectCombo.EVENT_CONFIRM, function () { + Msg.toast(JSON.stringify(this.getValue())); }); return widget; - }, + } - _getItemsByTimes: function (items, times) { - var res = []; - for (var i = (times - 1) * 100; items[i] && i < times * 100; i++) { + _getItemsByTimes(items, times) { + const res = []; + for (let i = (times - 1) * 100; items[i] && i < times * 100; i++) { res.push(items[i]); } + return res; - }, + } - _hasNextByTimes: function (items, times) { + _hasNextByTimes(items, times) { return times * 100 < items.length; - }, + } - _itemsCreator: function (options, callback) { - var self = this; - var items = Demo.CONSTANTS.ITEMS; - var keywords = (options.keywords || []).slice(); + _itemsCreator(options, callback) { + const self = this; + let items = Demo.CONSTANTS.ITEMS; + const keywords = (options.keywords || []).slice(); if (options.keyword) { keywords.push(options.keyword); } - BI.each(keywords, function (i, kw) { - var search = BI.Func.getSearchResult(items, kw); + each(keywords, (i, kw) => { + const search = Func.getSearchResult(items, kw); items = search.match.concat(search.find); }); - if (options.selectedValues) {// 过滤 - var filter = BI.makeObject(options.selectedValues, true); - items = BI.filter(items, function (i, ob) { - return !filter[ob.value]; - }); + if (options.selectedValues) { + // 过滤 + const filter = makeObject(options.selectedValues, true); + items = filter(items, (i, ob) => !filter[ob.value]); } - if (options.type == BI.SingleSelectCombo.REQ_GET_ALL_DATA) { + if (options.type == SingleSelectCombo.REQ_GET_ALL_DATA) { callback({ - items: items + items, }); + return; } - if (options.type == BI.SingleSelectCombo.REQ_GET_DATA_LENGTH) { - callback({count: items.length}); + if (options.type == SingleSelectCombo.REQ_GET_DATA_LENGTH) { + callback({ count: items.length }); + return; } - BI.delay(function () { + delay(() => { callback({ items: self._getItemsByTimes(items, options.times), - hasNext: self._hasNextByTimes(items, options.times) + hasNext: self._hasNextByTimes(items, options.times), }); }, 1000); - }, + } + + render() { + const self = this; - render: function () { - var self = this; return { type: "bi.absolute", scrolly: false, - items: [{ - el: this._createSingleSelectCombo(), - right: "50%", - top: 10 - }, { - el: { - - type: "bi.button", - text: "setValue(\"柳州市针织总厂\")", - handler: function () { - self.SingleSelectCombo.setValue("柳州市针织总厂"); - } + items: [ + { + el: this._createSingleSelectCombo(), + right: "50%", + top: 10, + }, + { + el: { + type: "bi.button", + text: "setValue(\"柳州市针织总厂\")", + handler() { + self.SingleSelectCombo.setValue("柳州市针织总厂"); + }, + }, } - }] + ], }; } -}); -BI.shortcut("demo.single_select_combo", Demo.SingleSelectCombo); \ No newline at end of file +} diff --git a/demo/js/widget/singletree/demo.multilayer_single_tree_combo.js b/demo/js/widget/singletree/demo.multilayer_single_tree_combo.js index 42d60420e..df283e47a 100644 --- a/demo/js/widget/singletree/demo.multilayer_single_tree_combo.js +++ b/demo/js/widget/singletree/demo.multilayer_single_tree_combo.js @@ -1,44 +1,46 @@ -/** - * Created by Dailer on 2017/7/13. - */ -Demo.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, +import { shortcut, Widget, deepClone } from "@/core"; +import { Msg } from "@/base"; + +@shortcut() +export class MultiLayerSingleTreeCombo extends Widget { + static xtype = "demo.multilayer_single_tree_combo"; + + props = { baseCls: "" }; + + render() { + const self = this; + const items = deepClone(Demo.CONSTANTS.TREE); - render: function () { - var self = this; - var items = BI.deepClone(Demo.CONSTANTS.TREE); return { type: "bi.horizontal_auto", items: [ { type: "bi.multilayer_single_tree_combo", - ref: function (_ref) { + ref(_ref) { self.tree = _ref; }, defaultText: "请选择", - items: items, - width: 300 - }, { + items, + width: 300, + }, + { type: "bi.button", text: "getVlaue", - handler: function () { - BI.Msg.toast(self.tree.getValue()[0]); + handler() { + Msg.toast(self.tree.getValue()[0]); }, width: 300, - }, { + }, + { type: "bi.button", text: "setVlaue (11)", - handler: function () { + handler() { self.tree.setValue(["11"]); }, - width: 300 + width: 300, } ], - vgap: 20 + vgap: 20, }; } -}); - -BI.shortcut("demo.multilayer_single_tree_combo", Demo.MultiLayerSingleTreeCombo); +} diff --git a/demo/js/widget/singletree/demo.single_tree_combo.js b/demo/js/widget/singletree/demo.single_tree_combo.js index d3c94508e..736f52f3e 100644 --- a/demo/js/widget/singletree/demo.single_tree_combo.js +++ b/demo/js/widget/singletree/demo.single_tree_combo.js @@ -1,43 +1,47 @@ -/** - * Created by Dailer on 2017/7/13. - */ -Demo.SingleTreeCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-exceltable" - }, +import { shortcut, Widget, deepClone } from "@/core"; +import { Msg } from "@/base"; + +@shortcut() +export class SingleTreeCombo extends Widget { + static xtype = "demo.single_tree_combo"; + + props = { baseCls: "demo-exceltable" }; + + render() { + const self = this; + const items = deepClone(Demo.CONSTANTS.LEVELTREE); - render: function () { - var self = this; - var items = BI.deepClone(Demo.CONSTANTS.LEVELTREE); return { type: "bi.horizontal_auto", - items: [{ - type: "bi.single_tree_combo", - ref: function (_ref) { - self.tree = _ref; + items: [ + { + type: "bi.single_tree_combo", + ref(_ref) { + self.tree = _ref; + }, + defaultText: "请选择", + items, + width: 300, + value: "11", }, - defaultText: "请选择", - items: items, - width: 300, - value: "11" - }, { - type: "bi.button", - text: "getVlaue", - handler: function () { - BI.Msg.toast(self.tree.getValue()[0]); + { + type: "bi.button", + text: "getVlaue", + handler() { + Msg.toast(self.tree.getValue()[0]); + }, + width: 300, }, - width: 300 - }, { - type: "bi.button", - text: "setVlaue (第二级文件1)", - handler: function () { - self.tree.setValue(["2"]); - }, - width: 300 - }], - vgap: 20 + { + type: "bi.button", + text: "setVlaue (第二级文件1)", + handler() { + self.tree.setValue(["2"]); + }, + width: 300, + } + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.single_tree_combo", Demo.SingleTreeCombo); +} diff --git a/demo/js/widget/slider/demo.slider.js b/demo/js/widget/slider/demo.slider.js index 2116ff99e..78276fc32 100644 --- a/demo/js/widget/slider/demo.slider.js +++ b/demo/js/widget/slider/demo.slider.js @@ -1,18 +1,16 @@ -/** - * Created by Urthur on 2017/9/4. - */ -Demo.Slider = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-slider", - width: 300, - height: 50, - min: 0, - max: 100 - }, +import { shortcut, Widget, createWidget } from "@/core"; +import { SingleSlider, SingleSliderNormal } from "@/widget"; - render: function () { - var self = this, o = this.options; - var singleSlider = BI.createWidget({ +@shortcut() +export class Slider extends Widget { + static xtype = "demo.slider"; + + props = { baseCls: "demo-slider", width: 300, height: 50, min: 0, max: 100 }; + + render() { + const self = this, + o = this.options; + const singleSlider = createWidget({ type: "bi.single_slider", digit: 0, width: o.width, @@ -20,13 +18,13 @@ Demo.Slider = BI.inherit(BI.Widget, { cls: "layout-bg-white", value: 30, min: 10, - max: 100 + max: 100, }); - singleSlider.on(BI.SingleSlider.EVENT_CHANGE, function () { + singleSlider.on(SingleSlider.EVENT_CHANGE, function () { console.log(this.getValue()); }); - var normalSingleSlider = BI.createWidget({ + const normalSingleSlider = createWidget({ type: "bi.single_slider_normal", width: o.width, height: 30, @@ -35,11 +33,11 @@ Demo.Slider = BI.inherit(BI.Widget, { max: o.max, value: 30, }); - normalSingleSlider.on(BI.SingleSliderNormal.EVENT_DRAG, function () { + normalSingleSlider.on(SingleSliderNormal.EVENT_DRAG, function () { console.log(this.getValue()); }); - var singleSliderLabel = BI.createWidget({ + const singleSliderLabel = createWidget({ type: "bi.single_slider_label", width: o.width, height: o.height, @@ -51,7 +49,7 @@ Demo.Slider = BI.inherit(BI.Widget, { value: 10, }); - var intervalSlider = BI.createWidget({ + const intervalSlider = createWidget({ type: "bi.interval_slider", width: o.width, digit: 0, @@ -60,11 +58,11 @@ Demo.Slider = BI.inherit(BI.Widget, { max: o.max, value: { min: 10, - max: 70 - } + max: 70, + }, }); - var intervalSliderLabel = BI.createWidget({ + const intervalSliderLabel = createWidget({ type: "bi.interval_slider", width: o.width, unit: "px", @@ -74,42 +72,56 @@ Demo.Slider = BI.inherit(BI.Widget, { max: 120, value: { min: 60, - max: 120 - } + max: 120, + }, }); - return { type: "bi.vertical", element: this, - items: [{ - type: "bi.center_adapt", - items: [{ - el: singleSlider - }] - }, { - type: "bi.center_adapt", - items: [{ - el: normalSingleSlider - }] - }, { - type: "bi.center_adapt", - items: [{ - el: singleSliderLabel - }] - }, { - type: "bi.center_adapt", - items: [{ - el: intervalSlider - }] - }, { - type: "bi.center_adapt", - items: [{ - el: intervalSliderLabel - }] - }], - vgap: 20 + items: [ + { + type: "bi.center_adapt", + items: [ + { + el: singleSlider, + } + ], + }, + { + type: "bi.center_adapt", + items: [ + { + el: normalSingleSlider, + } + ], + }, + { + type: "bi.center_adapt", + items: [ + { + el: singleSliderLabel, + } + ], + }, + { + type: "bi.center_adapt", + items: [ + { + el: intervalSlider, + } + ], + }, + { + type: "bi.center_adapt", + items: [ + { + el: intervalSliderLabel, + } + ], + } + ], + vgap: 20, }; } -}); -BI.shortcut("demo.slider", Demo.Slider); +} diff --git a/demo/js/widget/timecombo/demo.timecombo.js b/demo/js/widget/timecombo/demo.timecombo.js index 4808c6c33..6257b40dd 100644 --- a/demo/js/widget/timecombo/demo.timecombo.js +++ b/demo/js/widget/timecombo/demo.timecombo.js @@ -1,48 +1,51 @@ -/** - * Created by Dailer on 2017/7/13. - */ -Demo.TimeCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, +import { shortcut, Widget } from "@/core"; +import { Msg } from "@/base"; + +@shortcut() +export class TimeCombo extends Widget { + static xtype = "demo.time_combo"; + + props = { baseCls: "" }; + + render() { + const self = this; - render: function () { - var self = this; return { type: "bi.horizontal_auto", - items: [{ - type: "bi.time_combo", - ref: function (_ref) { - self.timeCombo = _ref; + items: [ + { + type: "bi.time_combo", + ref(_ref) { + self.timeCombo = _ref; + }, + // allowEdit: true, + // format: "%H:%M:%S", // HH:mm:ss + // format: "%I:%M:%S", // hh:mm:ss + // format: "%l:%M:%S", // h:mm:ss + // format: "%k:%M:%S", // H:mm:ss + // format: "%l:%M:%S %p", // h:mm:ss a + // format: "%l:%M", // h:mm + // format: "%k:%M", // H:mm + // format: "%I:%M", // hh:mm + // format: "%H:%M", // HH:mm + // format: "%M:%S", // mm:ss + value: { + hour: 12, + minute: 0, + second: 0, + }, + width: 300, }, - // allowEdit: true, - // format: "%H:%M:%S", // HH:mm:ss - // format: "%I:%M:%S", // hh:mm:ss - // format: "%l:%M:%S", // h:mm:ss - // format: "%k:%M:%S", // H:mm:ss - // format: "%l:%M:%S %p", // h:mm:ss a - // format: "%l:%M", // h:mm - // format: "%k:%M", // H:mm - // format: "%I:%M", // hh:mm - // format: "%H:%M", // HH:mm - // format: "%M:%S", // mm:ss - value: { - hour: 12, - minute: 0, - second: 0 - }, - width: 300 - }, { - type: "bi.button", - text: "getValue", - handler: function () { - BI.Msg.toast(JSON.stringify(self.timeCombo.getValue())); - }, - width: 300 - }], - vgap: 20 + { + type: "bi.button", + text: "getValue", + handler() { + Msg.toast(JSON.stringify(self.timeCombo.getValue())); + }, + width: 300, + } + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.time_combo", Demo.TimeCombo); \ No newline at end of file +} diff --git a/demo/js/widget/timeinterval/demo.time_interval.js b/demo/js/widget/timeinterval/demo.time_interval.js index 68c46e1a7..81fb79933 100644 --- a/demo/js/widget/timeinterval/demo.time_interval.js +++ b/demo/js/widget/timeinterval/demo.time_interval.js @@ -1,105 +1,112 @@ -/** - * Created by Dailer on 2017/7/13. - */ -Demo.TimeInterval = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, +import { shortcut, Widget, deepClone } from "@/core"; +import { Msg } from "@/base"; + +@shortcut() +export class TimeInterval extends Widget { + static xtype = "demo.time_interval"; + + props = { baseCls: "" }; + + render() { + const self = this; + const items = deepClone(Demo.CONSTANTS.TREE); - render: function () { - var self = this; - var items = BI.deepClone(Demo.CONSTANTS.TREE); return { type: "bi.horizontal_auto", - items: [{ - type: "bi.date_interval", - ref: function (_ref) { - self.dateInterval = _ref; - }, - value: { - start: { - type: 2, - value: { - year: -1, - position: 2 - } + items: [ + { + type: "bi.date_interval", + ref(_ref) { + self.dateInterval = _ref; }, - end: { - type: 1, - value: { - year: 2018, - month: 1, - day: 12 - } - } - }, - width: 300 - }, { - type: "bi.button", - text: "getValue", - handler: function () { - BI.Msg.toast(JSON.stringify(self.dateInterval.getValue())); - }, - width: 300 - }, { - type: "bi.time_interval", - ref: function (_ref) { - self.interval = _ref; - }, - value: { - start: { - type: 2, - value: { - year: -1, - position: 2 - } + value: { + start: { + type: 2, + value: { + year: -1, + position: 2, + }, + }, + end: { + type: 1, + value: { + year: 2018, + month: 1, + day: 12, + }, + }, }, - end: { - type: 1, - value: { - year: 2018, - month: 1, - day: 12 - } - } + width: 300, }, - width: 400 - }, { - type: "bi.button", - text: "getValue", - handler: function () { - BI.Msg.toast(JSON.stringify(self.interval.getValue())); + { + type: "bi.button", + text: "getValue", + handler() { + Msg.toast(JSON.stringify(self.dateInterval.getValue())); + }, + width: 300, }, - width: 300 - }, { - type: "bi.time_periods", - value: { - start: { - hour: 7, - minute: 23, - second: 14 + { + type: "bi.time_interval", + ref(_ref) { + self.interval = _ref; + }, + value: { + start: { + type: 2, + value: { + year: -1, + position: 2, + }, + }, + end: { + type: 1, + value: { + year: 2018, + month: 1, + day: 12, + }, + }, }, - end: { - hour: 23, - minute: 34, - second: 32 - } + width: 400, }, - ref: function (_ref) { - self.periods = _ref; + { + type: "bi.button", + text: "getValue", + handler() { + Msg.toast(JSON.stringify(self.interval.getValue())); + }, + width: 300, }, - width: 180 - }, { - type: "bi.button", - text: "getValue", - handler: function () { - BI.Msg.toast(JSON.stringify(self.periods.getValue())); + { + type: "bi.time_periods", + value: { + start: { + hour: 7, + minute: 23, + second: 14, + }, + end: { + hour: 23, + minute: 34, + second: 32, + }, + }, + ref(_ref) { + self.periods = _ref; + }, + width: 180, }, - width: 300 - }], - vgap: 20 + { + type: "bi.button", + text: "getValue", + handler() { + Msg.toast(JSON.stringify(self.periods.getValue())); + }, + width: 300, + } + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.time_interval", Demo.TimeInterval); \ No newline at end of file +} diff --git a/demo/js/widget/tree/demo.multilayer_select_level_tree.js b/demo/js/widget/tree/demo.multilayer_select_level_tree.js index 357b32a23..c4950e1eb 100644 --- a/demo/js/widget/tree/demo.multilayer_select_level_tree.js +++ b/demo/js/widget/tree/demo.multilayer_select_level_tree.js @@ -1,47 +1,49 @@ -/** - * Created by Dailer on 2017/7/26. - */ +import { shortcut, Widget, createWidget, deepClone } from "@/core"; +import { Msg } from "@/base"; +@shortcut() +export class MultiLayerSelectLevelTree extends Widget { + static xtype = "demo.multilayer_select_level_tree"; -Demo.MultiLayerSelectLevelTree = BI.inherit(BI.Widget, { - - render: function () { - var self = this; - var tree = BI.createWidget({ + render() { + const self = this; + const tree = createWidget({ type: "bi.multilayer_select_level_tree", - items: BI.deepClone(Demo.CONSTANTS.TREE), - value: "第五级文件1" + items: deepClone(Demo.CONSTANTS.TREE), + value: "第五级文件1", }); return { type: "bi.vtape", - items: [{ - el: tree - }, { - el: { - type: "bi.button", - height: 25, - text: "getValue", - handler: function () { - BI.Msg.alert("", JSON.stringify(tree.getValue())); - } + items: [ + { + el: tree, }, - height: 25 - }, { - el: { - type: "bi.button", + { + el: { + type: "bi.button", + height: 25, + text: "getValue", + handler() { + Msg.alert("", JSON.stringify(tree.getValue())); + }, + }, height: 25, - text: "setValue (第二级文件1)", - handler: function () { - tree.setValue(["11"]); - } }, - height: 25 - }], + { + el: { + type: "bi.button", + height: 25, + text: "setValue (第二级文件1)", + handler() { + tree.setValue(["11"]); + }, + }, + height: 25, + } + ], width: 500, - hgap: 300 + hgap: 300, }; } -}); - -BI.shortcut("demo.multilayer_select_level_tree", Demo.MultiLayerSelectLevelTree); +} diff --git a/demo/js/widget/tree/demo.multilayer_single_level_tree.js b/demo/js/widget/tree/demo.multilayer_single_level_tree.js index 9aa4ab15c..de980c51a 100644 --- a/demo/js/widget/tree/demo.multilayer_single_level_tree.js +++ b/demo/js/widget/tree/demo.multilayer_single_level_tree.js @@ -1,50 +1,54 @@ -/** - * Created by Dailer on 2017/7/26. - */ +import { shortcut, Widget, createWidget } from "@/core"; +import { Msg } from "@/base"; +@shortcut() +export class MultiLayerSingleLevelTree extends Widget { + static xtype = "demo.multilayer_single_level_tree"; -Demo.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, { - - render: function () { - var self = this; - this.tree = BI.createWidget({ + render() { + const self = this; + this.tree = createWidget({ type: "bi.multilayer_single_level_tree", items: [], - value: "第二级文件1" + value: "第二级文件1", }); return { type: "bi.vtape", - items: [{ - el: this.tree - }, { - el: { - type: "bi.button", - height: 25, - text: "getValue", - handler: function () { - BI.Msg.alert("", JSON.stringify(self.tree.getValue())); - } + items: [ + { + el: this.tree, }, - height: 25 - }, { - el: { - type: "bi.button", + { + el: { + type: "bi.button", + height: 25, + text: "getValue", + handler() { + Msg.alert("", JSON.stringify(self.tree.getValue())); + }, + }, height: 25, - text: "setValue (第二级文件1)", - handler: function () { - self.tree.setValue(["第二级文件1"]); - } }, - height: 25 - }], + { + el: { + type: "bi.button", + height: 25, + text: "setValue (第二级文件1)", + handler() { + self.tree.setValue(["第二级文件1"]); + }, + }, + height: 25, + } + ], width: 500, - hgap: 300 + hgap: 300, }; - }, + } - mounted: function () { - var tree = [ + mounted() { + const tree = [ // {id: -2, pId: 0, value: "根目录1", text: "根目录1"}, { id: -1, pId: 0, value: "根目录", text: "根目录" }, { id: 1, pId: -1, value: "第一级目录1", text: "第一级目录1" }, @@ -67,6 +71,4 @@ Demo.MultiLayerSingleLevelTree = BI.inherit(BI.Widget, { ]; this.tree.populate(tree); } -}); - -BI.shortcut("demo.multilayer_single_level_tree", Demo.MultiLayerSingleLevelTree); +} diff --git a/demo/js/widget/tree/demo.select_level_tree.js b/demo/js/widget/tree/demo.select_level_tree.js index 04ee65fb6..2d920d8b2 100644 --- a/demo/js/widget/tree/demo.select_level_tree.js +++ b/demo/js/widget/tree/demo.select_level_tree.js @@ -1,47 +1,49 @@ -/** - * Created by Dailer on 2017/7/26. - */ +import { shortcut, Widget, createWidget, deepClone } from "@/core"; +import { Msg } from "@/base"; +@shortcut() +export class SelectLevelTree extends Widget { + static xtype = "demo.select_level_tree"; -Demo.SelectLevelTree = BI.inherit(BI.Widget, { - - render: function () { - var self = this; - var tree = BI.createWidget({ + render() { + const self = this; + const tree = createWidget({ type: "bi.select_level_tree", - items: BI.deepClone(Demo.CONSTANTS.LEVELTREE), - value: "11" + items: deepClone(Demo.CONSTANTS.LEVELTREE), + value: "11", }); return { type: "bi.vtape", - items: [{ - el: tree - }, { - el: { - type: "bi.button", - height: 25, - text: "getValue", - handler: function () { - BI.Msg.alert("", JSON.stringify(tree.getValue())); - } + items: [ + { + el: tree, }, - height: 25 - }, { - el: { - type: "bi.button", + { + el: { + type: "bi.button", + height: 25, + text: "getValue", + handler() { + Msg.alert("", JSON.stringify(tree.getValue())); + }, + }, height: 25, - text: "setValue (第二级文件1)", - handler: function () { - tree.setValue(["2"]); - } }, - height: 25 - }], + { + el: { + type: "bi.button", + height: 25, + text: "setValue (第二级文件1)", + handler() { + tree.setValue(["2"]); + }, + }, + height: 25, + } + ], width: 500, - hgap: 300 + hgap: 300, }; } -}); - -BI.shortcut("demo.select_level_tree", Demo.SelectLevelTree); \ No newline at end of file +} diff --git a/demo/js/widget/tree/demo.single_level_tree.js b/demo/js/widget/tree/demo.single_level_tree.js index c64a9445f..85af7ca6b 100644 --- a/demo/js/widget/tree/demo.single_level_tree.js +++ b/demo/js/widget/tree/demo.single_level_tree.js @@ -1,47 +1,49 @@ -/** - * Created by Dailer on 2017/7/26. - */ +import { shortcut, Widget, createWidget, deepClone } from "@/core"; +import { Msg } from "@/base"; +@shortcut() +export class SingleLevelTree extends Widget { + static xtype = "demo.single_level_tree"; -Demo.SingleLevelTree = BI.inherit(BI.Widget, { - - render: function () { - var self = this; - var tree = BI.createWidget({ + render() { + const self = this; + const tree = createWidget({ type: "bi.single_level_tree", - items: BI.deepClone(Demo.CONSTANTS.LEVELTREE), - value: "11" + items: deepClone(Demo.CONSTANTS.LEVELTREE), + value: "11", }); return { type: "bi.vtape", - items: [{ - el: tree - }, { - el: { - type: "bi.button", - height: 25, - text: "getValue", - handler: function () { - BI.Msg.alert("", JSON.stringify(tree.getValue())); - } + items: [ + { + el: tree, }, - height: 25 - }, { - el: { - type: "bi.button", + { + el: { + type: "bi.button", + height: 25, + text: "getValue", + handler() { + Msg.alert("", JSON.stringify(tree.getValue())); + }, + }, height: 25, - text: "setValue (第二级文件1)", - handler: function () { - tree.setValue(["2"]); - } }, - height: 25 - }], + { + el: { + type: "bi.button", + height: 25, + text: "setValue (第二级文件1)", + handler() { + tree.setValue(["2"]); + }, + }, + height: 25, + } + ], width: 500, - hgap: 300 + hgap: 300, }; } -}); - -BI.shortcut("demo.single_level_tree", Demo.SingleLevelTree); \ No newline at end of file +} diff --git a/demo/js/widget/year/demo.year.js b/demo/js/widget/year/demo.year.js index 2381ed0f3..540d47063 100644 --- a/demo/js/widget/year/demo.year.js +++ b/demo/js/widget/year/demo.year.js @@ -1,45 +1,50 @@ -/** - * Created by Dailer on 2017/7/11. - */ -Demo.Year = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-exceltable" - }, - render: function () { - var self = this; +import { shortcut, Widget } from "@/core"; +import { Msg } from "@/base"; + +@shortcut() +export class Year extends Widget { + static xtype = "demo.year"; + + props = { baseCls: "demo-exceltable" }; + + render() { + const self = this; + return { type: "bi.horizontal_auto", vgap: 10, - items: [{ - type: "bi.dynamic_year_combo", - width: 300, - ref: function () { - self.yearcombo = this; - }, - value: { - type: 1, + items: [ + { + type: "bi.dynamic_year_combo", + width: 300, + ref() { + self.yearcombo = this; + }, value: { - year: 2017 - } - } - }, { - type: "bi.button", - text: "getValue", - handler: function () { - BI.Msg.toast(JSON.stringify(self.yearcombo.getValue())); + type: 1, + value: { + year: 2017, + }, + }, }, - width: 300 - }, { - type: "bi.button", - text: "setValue : 2018", - handler: function () { - self.yearcombo.setValue(2018); + { + type: "bi.button", + text: "getValue", + handler() { + Msg.toast(JSON.stringify(self.yearcombo.getValue())); + }, + width: 300, }, - width: 300 - }], - vgap: 10 + { + type: "bi.button", + text: "setValue : 2018", + handler() { + self.yearcombo.setValue(2018); + }, + width: 300, + } + ], + vgap: 10, }; } -}); - -BI.shortcut("demo.year", Demo.Year); \ No newline at end of file +} diff --git a/demo/js/widget/yearinterval/demo.year_interval.js b/demo/js/widget/yearinterval/demo.year_interval.js index 656ac7732..b8950954c 100644 --- a/demo/js/widget/yearinterval/demo.year_interval.js +++ b/demo/js/widget/yearinterval/demo.year_interval.js @@ -1,51 +1,53 @@ -/** - * @author windy - * @version 2.0 - * Created by windy on 2021/1/25 - */ -Demo.YearInterval = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, - render: function () { +import { shortcut, Widget } from "@/core"; +import { Msg } from "@/base"; + +@shortcut() +export class YearInterval extends Widget { + static xtype = "demo.year_interval"; + + props = { baseCls: "" }; + + render() { + const self = this; - var self = this; return { type: "bi.horizontal_auto", - items: [{ - type: "bi.year_interval", - ref: function (_ref) { - self.widget = _ref; - }, - width: 300, - minDate: "2012-01-01", - maxDate: "2013-12-31", - value: { - type: 1, + items: [ + { + type: "bi.year_interval", + ref(_ref) { + self.widget = _ref; + }, + width: 300, + minDate: "2012-01-01", + maxDate: "2013-12-31", value: { - year: 2012 - } - } - }, { - type: "bi.button", - text: "getValue", - handler: function () { - BI.Msg.toast(JSON.stringify(self.widget.getValue())); + type: 1, + value: { + year: 2012, + }, + }, + }, + { + type: "bi.button", + text: "getValue", + handler() { + Msg.toast(JSON.stringify(self.widget.getValue())); + }, + width: 300, }, - width: 300 - }, { - type: "bi.button", - text: "setValue '2017-12'", - width: 300, - handler: function () { - self.widget.setValue({ - year: 2017 - }); + { + type: "bi.button", + text: "setValue '2017-12'", + width: 300, + handler() { + self.widget.setValue({ + year: 2017, + }); + }, } - }], - vgap: 20 + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.year_interval", Demo.YearInterval); \ No newline at end of file +} diff --git a/demo/js/widget/yearmonth/demo.year_month_combo.js b/demo/js/widget/yearmonth/demo.year_month_combo.js index 5552556e1..ac018af4d 100644 --- a/demo/js/widget/yearmonth/demo.year_month_combo.js +++ b/demo/js/widget/yearmonth/demo.year_month_combo.js @@ -1,49 +1,53 @@ -/** - * Created by Dailer on 2017/7/13. - */ -Demo.YearMonthCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, - render: function () { +import { shortcut, Widget } from "@/core"; +import { Msg } from "@/base"; + +@shortcut() +export class YearMonthCombo extends Widget { + static xtype = "demo.year_month_combo"; + + props = { baseCls: "" }; + + render() { + const self = this; - var self = this; return { type: "bi.horizontal_auto", - items: [{ - type: "bi.dynamic_year_month_combo", - ref: function (_ref) { - self.widget = _ref; + items: [ + { + type: "bi.dynamic_year_month_combo", + ref(_ref) { + self.widget = _ref; + }, + width: 300, + // value: { + // type: 1, + // value: { + // year: 2018, + // month: 1 + // } + // } }, - width: 300, - // value: { - // type: 1, - // value: { - // year: 2018, - // month: 1 - // } - // } - }, { - type: "bi.button", - text: "getValue", - handler: function () { - BI.Msg.toast(JSON.stringify(self.widget.getValue())); + { + type: "bi.button", + text: "getValue", + handler() { + Msg.toast(JSON.stringify(self.widget.getValue())); + }, + width: 300, }, - width: 300 - }, { - type: "bi.button", - text: "setValue '2017-12'", - width: 300, - handler: function () { - self.widget.setValue({ - year: 2017, - month: 12 - }); + { + type: "bi.button", + text: "setValue '2017-12'", + width: 300, + handler() { + self.widget.setValue({ + year: 2017, + month: 12, + }); + }, } - }], - vgap: 20 + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.year_month_combo", Demo.YearMonthCombo); \ No newline at end of file +} diff --git a/demo/js/widget/yearmonthinterval/demo.year_month_interval.js b/demo/js/widget/yearmonthinterval/demo.year_month_interval.js index b0958b50d..ed3389eb3 100644 --- a/demo/js/widget/yearmonthinterval/demo.year_month_interval.js +++ b/demo/js/widget/yearmonthinterval/demo.year_month_interval.js @@ -1,45 +1,51 @@ -Demo.YearMonthInterval = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, +import { shortcut, Widget } from "@/core"; +import { Msg } from "@/base"; + +@shortcut() +export class YearMonthInterval extends Widget { + static xtype = "demo.year_month_interval"; + + props = { baseCls: "" }; + + render() { + const self = this; - render: function () { - var self = this; return { type: "bi.horizontal_auto", - items: [{ - type: "bi.year_month_interval", - ref: function (_ref) { - self.interval = _ref; - }, - value: { - start: { - type: 2, - value: { - year: -1, - month: 1 - } + items: [ + { + type: "bi.year_month_interval", + ref(_ref) { + self.interval = _ref; }, - end: { - type: 1, - value: { - year: 2018, - month: 1 - } - } - }, - width: 400 - }, { - type: "bi.button", - text: "getValue", - handler: function () { - BI.Msg.toast(JSON.stringify(self.interval.getValue())); + value: { + start: { + type: 2, + value: { + year: -1, + month: 1, + }, + }, + end: { + type: 1, + value: { + year: 2018, + month: 1, + }, + }, + }, + width: 400, }, - width: 300 - }], - vgap: 20 + { + type: "bi.button", + text: "getValue", + handler() { + Msg.toast(JSON.stringify(self.interval.getValue())); + }, + width: 300, + } + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.year_month_interval", Demo.YearMonthInterval); \ No newline at end of file +} diff --git a/demo/js/widget/yearquarter/demo.year_quarter_combo.js b/demo/js/widget/yearquarter/demo.year_quarter_combo.js index e5b017f01..79bd8f8e7 100644 --- a/demo/js/widget/yearquarter/demo.year_quarter_combo.js +++ b/demo/js/widget/yearquarter/demo.year_quarter_combo.js @@ -1,50 +1,55 @@ -/** - * Created by Dailer on 2017/7/13. - */ -Demo.YearQuarterCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, - render: function () { - var self = this; +import { shortcut, Widget } from "@/core"; +import { Msg } from "@/base"; + +@shortcut() +export class YearQuarterCombo extends Widget { + static xtype = "demo.year_quarter_combo"; + + props = { baseCls: "" }; + + render() { + const self = this; + return { type: "bi.horizontal_auto", - items: [{ - type: "bi.dynamic_year_quarter_combo", - width: 300, - ref: function (_ref) { - self.widget = _ref; - }, - yearBehaviors: {}, - quarterBehaviors: {}, - value: { - type: 1, + items: [ + { + type: "bi.dynamic_year_quarter_combo", + width: 300, + ref(_ref) { + self.widget = _ref; + }, + yearBehaviors: {}, + quarterBehaviors: {}, value: { - year: 2018, - quarter: 1 - } - } - }, { - type: "bi.button", - text: "getValue", - handler: function () { - BI.Msg.toast(JSON.stringify(self.widget.getValue())); + type: 1, + value: { + year: 2018, + quarter: 1, + }, + }, }, - width: 300 - }, { - type: "bi.button", - text: "setVlaue '2017 季度3'", - width: 300, - handler: function () { - self.widget.setValue({ - year: 2017, - quarter: 3 - }); + { + type: "bi.button", + text: "getValue", + handler() { + Msg.toast(JSON.stringify(self.widget.getValue())); + }, + width: 300, + }, + { + type: "bi.button", + text: "setVlaue '2017 季度3'", + width: 300, + handler() { + self.widget.setValue({ + year: 2017, + quarter: 3, + }); + }, } - }], - vgap: 20 + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.year_quarter_combo", Demo.YearQuarterCombo); \ No newline at end of file +} diff --git a/demo/js/widget/yearquarterinterval/demo.yearquarterinterval.js b/demo/js/widget/yearquarterinterval/demo.yearquarterinterval.js index 25ddd7e80..b2b7f589d 100644 --- a/demo/js/widget/yearquarterinterval/demo.yearquarterinterval.js +++ b/demo/js/widget/yearquarterinterval/demo.yearquarterinterval.js @@ -1,52 +1,53 @@ -/** - * @author windy - * @version 2.0 - * Created by windy on 2021/1/25 - */ -Demo.YearQuarterInterval = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, +import { shortcut, Widget } from "@/core"; +import { Msg } from "@/base"; + +@shortcut() +export class YearQuarterInterval extends Widget { + static xtype = "demo.year_quarter_interval"; + + props = { baseCls: "" }; + + render() { + const self = this; - render: function () { - var self = this; return { type: "bi.horizontal_auto", - items: [{ - type: "bi.year_quarter_interval", - ref: function (_ref) { - self.interval = _ref; - }, - minDate: "2012-07-01", - maxDate: "2012-12-31", - value: { - start: { - type: 2, - value: { - year: -1, - month: 1 - } + items: [ + { + type: "bi.year_quarter_interval", + ref(_ref) { + self.interval = _ref; }, - end: { - type: 1, - value: { - year: 2018, - month: 1 - } - } - }, - width: 400 - }, { - type: "bi.button", - text: "getValue", - handler: function () { - BI.Msg.toast(JSON.stringify(self.interval.getValue())); + minDate: "2012-07-01", + maxDate: "2012-12-31", + value: { + start: { + type: 2, + value: { + year: -1, + month: 1, + }, + }, + end: { + type: 1, + value: { + year: 2018, + month: 1, + }, + }, + }, + width: 400, }, - width: 300 - }], - vgap: 20 + { + type: "bi.button", + text: "getValue", + handler() { + Msg.toast(JSON.stringify(self.interval.getValue())); + }, + width: 300, + } + ], + vgap: 20, }; } -}); - -BI.shortcut("demo.year_quarter_interval", Demo.YearQuarterInterval); \ No newline at end of file +} diff --git a/tsconfig.json b/tsconfig.json index 2a92cd184..5ee3e9369 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -34,6 +34,10 @@ "src/**/*.js", "examples/*.js", "examples/**/*.js", + "demo/*/*/*/*/*.js", + "demo/*/*/*/*.js", + "demo/*/*/*.js", + "demo/*/*.js", ], "exclude": [ "src/router/router.js",