KERNEL-10735 feat: 折叠面板

demo/js/config/widget.js

@@ -194,4 +194,12 @@ Demo.WIDGET_CONFIG = [{
     id: 420,
     text: "滚动sliders",
     value: "demo.slider"
+}, {
+    pId: 4,
+    id: 414,
+    text: "折叠面板"
+}, {
+    pId: 414,
+    text: "bi.collapse",
+    value: "demo.collapse"
 }];

demo/js/widget/collapase/API.md

@@ -0,0 +1,12 @@
+## API
+
+### bi.collapse
+
+| 参数       | 说明       | 类型    | 默认值               |
+| ---------- | ---------- | ------- | -------------------- |
+| accordion  | 手风琴模式 | boolean | false                |
+| bordered | 带边框风格的折叠面板 | boolean | true |
+| ghost | 使折叠面板透明且无边框 | boolean | false |
+| openMotion | 展开动画   | object  | { animation: "bi-slide-up", animationDuring: 100}
+| value | 初始化选中面板的 key | string\[] <br/> number\[] | - |
+| listeners | 监听切换面板事件 | [{eventName: "EVENT_EXPAND", action:(activeKey) => void}] | - |

demo/js/widget/collapase/demo.collapse.js

@@ -0,0 +1,59 @@
+Demo.Collapse = BI.inherit(BI.Widget, {
+  props: {
+    baseCls: "demo-collapse"
+  },
+
+  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
+    };
+  }
+});
+
+BI.shortcut("demo.collapse", Demo.Collapse);

src/widget/collapse/collapse.js

@@ -0,0 +1,108 @@
+BI.Collapse = BI.inherit(BI.Widget, {
+
+    props: {
+        baseCls: "bi-collapse",
+        items: [],
+        value: [],
+        trigger: "click",
+        accordion: false,
+        bordered: true,
+        ghost: false,
+        isDefaultInit: false,
+        openMotion: {
+            animation: "bi-slide-up",
+            animationDuring: 200
+        }
+    },
+
+    render: function () {
+        var o = this.options;
+
+        var collapseCls = o.ghost ? "" : "bi-background " + (o.bordered ? "bi-border bi-border-radius" : "");
+
+        this.expanders = {};
+
+        return {
+            type: "bi.vertical",
+            cls: collapseCls,
+            items: this._getItems(this.options.items)
+
+        };
+    },
+
+    _getItems: function (items) {
+        var self = this, o = this.options;
+
+        return BI.map(items, function (index, item) {
+            var isActive = BI.contains(self._getCurrentValue(o.value), item.value);
+            var cls = o.ghost || index === 0 ? "" : "bi-border-top";
+
+            var el = BI.extend({
+                type: "bi.arrow_group_node",
+                height: 30,
+                text: item.text,
+                value: item.value,
+                open: isActive
+            }, item.el);
+
+            var popup = BI.extend({
+                animation: o.openMotion.animation,
+                animationDuring: o.openMotion.animationDuring
+            }, item.popup);
+    
+            return BI.extend({
+                type: "bi.expander",
+                cls: cls,
+                isDefaultInit: o.isDefaultInit,
+                trigger: o.trigger,
+                listeners: [{
+                    eventName: BI.Expander.EVENT_EXPAND,
+                    action: function () {
+                        self._hideOtherExpander(item.value);
+                        self.fireEvent(BI.Collapse.EVENT_EXPAND, item.value);
+                    }
+                }]
+            }, item, {
+                el: el,
+                popup: popup,
+                ref: function (_ref) {
+                    BI.isFunction(item.ref) && item.ref(_ref);
+                    self.expanders[item.value] = _ref;
+                }
+            });
+        });
+    },
+
+    _hideOtherExpander: function (expandKey) {
+        if (this.options.accordion) {
+            BI.each(this.expanders, function (key, expander) {
+                key !== (expandKey + "") && expander.hideView();
+            });
+        }
+    },
+
+    _getCurrentValue: function (v) {
+        var values = BI.isNotEmptyArray(v) ? v : BI.isKey(v) ? [v] : [];
+        
+        return this.options.accordion ? values.slice(0, 1) : values;
+    },
+
+    getValue: function () {
+        var value = [];
+        BI.each(this.expanders, function (key, expander) {
+            expander.isExpanded() && value.push(key);
+        });
+
+        return value;
+    },
+
+    setValue: function (v) {
+        var values = BI.map(this._getCurrentValue(v), function (idx, value) {return value + "";});
+        BI.each(this.expanders, function (key, expander) {
+            BI.contains(values, key) ? expander.showView() : expander.hideView();
+        });
+    }
+});
+
+BI.Collapse.EVENT_EXPAND = "EVENT_EXPAND";
+BI.shortcut("bi.collapse", BI.Collapse);