@ohu-mobile/core/lib-rem/Select/Select.stories.js

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Outline = exports.Basic = void 0;
var _ArrowRightSOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/ArrowRightSOutlined"));
var _ArrowLeftOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/ArrowLeftOutlined"));
var _vue = _interopRequireDefault(require("vue"));
var _index = _interopRequireDefault(require("./index"));
require("./style");
var _Tag = _interopRequireDefault(require("../Tag"));
require("../Tag/style");
var _Card = _interopRequireDefault(require("../Card"));
require("../Card/style");
var _Dialog = _interopRequireDefault(require("../Dialog"));
require("../Dialog/style");
var _Toast = _interopRequireDefault(require("../Toast"));
require("../Toast/style");
var _TreeSelect = _interopRequireDefault(require("../TreeSelect"));
require("../TreeSelect/style");
var _CheckboxGroup = _interopRequireDefault(require("../CheckboxGroup"));
require("../CheckboxGroup/style");
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
require("../Checkbox/style");
var _Form = _interopRequireDefault(require("../Form"));
require("../Form/style");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Components/Form/Select',
  parameters: {
    component: _index.default,
    options: {
      showPanel: true
    }
  }
};
var Basic = exports.Basic = function Basic() {
  return _vue.default.extend({
    data: function data() {
      return {
        v1: '艺术',
        v2: ['体育', '科学'],
        v3: '计算机',
        v4: '淳安县',
        control: '淳安县'
      };
    },
    methods: {
      removeV2: function removeV2(value) {
        var index = this.v2.indexOf(value);
        if (index >= 0) {
          this.v2.splice(index, 1);
        }
      },
      loadData: function loadData(node) {
        return new Promise(function (resolve, reject) {
          if (node.value === '杭州') {
            return setTimeout(function () {
              resolve([{
                title: '滨江区',
                value: '滨江区',
                isLeaf: true
              }, {
                title: '淳安县',
                value: '淳安县',
                isLeaf: true
              }, {
                title: '拱墅区',
                value: '拱墅区',
                isLeaf: true
              }]);
            }, 2000);
          } else if (node.value === '湖州') {
            return resolve([{
              title: '长兴',
              value: '长兴',
              isLeaf: true
            }]);
          }
          resolve([]);
        });
      }
    },
    render: function render() {
      var _this = this;
      var h = arguments[0];
      return h("div", {
        "class": "demo"
      }, [h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["basic"]), h(_index.default, {
        "style": "min-width: 165px;",
        "attrs": {
          "title": "选择科目",
          "placeholder": "选择科目",
          "maxHeight": "30vh",
          "options": [{
            label: '艺术',
            value: '艺术'
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "model": {
          value: _this.v1,
          callback: function callback($$v) {
            _this.v1 = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["confirm"]), h(_index.default, {
        "style": "width: 100%;",
        "attrs": {
          "title": "选择科目",
          "confirm": true,
          "allowClear": true,
          "placeholder": "选择科目",
          "options": [{
            label: '艺术',
            value: '艺术'
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "model": {
          value: _this.v1,
          callback: function callback($$v) {
            _this.v1 = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["multiple"]), h(_index.default, {
        "style": "min-width: 165px;",
        "attrs": {
          "title": "选择科目",
          "multiple": true,
          "max": 3,
          "placeholder": "选择科目",
          "options": [{
            label: '艺术',
            value: '艺术'
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "model": {
          value: _this.v2,
          callback: function callback($$v) {
            _this.v2 = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["disabled"]), h(_index.default, {
        "attrs": {
          "disabled": true,
          "title": "选择科目",
          "multiple": true,
          "placeholder": "选择科目",
          "options": [{
            label: '艺术',
            value: '艺术'
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "style": "min-width: 165px;",
        "model": {
          value: _this.v2,
          callback: function callback($$v) {
            _this.v2 = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["scopedSlots: control"]), h(_index.default, {
        "style": "min-width: 165px;",
        "attrs": {
          "title": "选择科目",
          "multiple": true,
          "placeholder": "选择科目",
          "options": [{
            label: '艺术',
            value: '艺术'
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "scopedSlots": {
          control: function control(selectedOptions) {
            if (selectedOptions instanceof Array) {
              return selectedOptions.map(function (_ref) {
                var label = _ref.label,
                  value = _ref.value;
                return h(_Tag.default, {
                  "on": {
                    "click": function click(e) {
                      e.stopPropagation();
                      _Dialog.default.confirm({
                        title: "\u662F\u5426\u5220\u9664".concat(label),
                        onOk: function onOk() {
                          _this.removeV2(value);
                        }
                      });
                    }
                  },
                  "style": "margin-right: 5px;",
                  "attrs": {
                    "deleteable": true
                  }
                }, [label]);
              });
            }
            return h(_Tag.default, {
              "attrs": {
                "deleteable": true
              }
            }, [selectedOptions.label]);
          }
        },
        "model": {
          value: _this.v2,
          callback: function callback($$v) {
            _this.v2 = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["native"]), h(_index.default, {
        "style": "min-width: 165px;",
        "attrs": {
          "title": "选择科目",
          "native": true,
          "placeholder": "选择科目",
          "options": [{
            label: '艺术',
            value: '艺术',
            disabled: true
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "model": {
          value: _this.v1,
          callback: function callback($$v) {
            _this.v1 = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["popup custom"]), h(_index.default, {
        "style": "min-width: 165px;",
        "attrs": {
          "title": "选择科目",
          "icon": _ArrowRightSOutlined2.default,
          "popupProps": {
            position: 'right',
            fullscreen: true,
            mask: false
          },
          "headerProps": {
            closeIcon: _ArrowLeftOutlined2.default,
            center: true,
            closeIconPosition: 'left'
          },
          "placeholder": "选择科目",
          "options": [{
            label: '艺术',
            value: '艺术',
            disabled: true
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "model": {
          value: _this.v1,
          callback: function callback($$v) {
            _this.v1 = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["scoped-slots content\uFF08use TreeSelect\uFF09"]), h(_Form.default, {
        "attrs": {
          "initialValues": {
            x: this.v4
          },
          "inline": true
        }
      }, [h(_Form.default.Field, {
        "attrs": {
          "name": "x",
          "label": "x"
        }
      }, [h(_index.default, {
        "style": "min-width: 165px;",
        "attrs": {
          "title": "选择高中",
          "popupContentStyle": {
            height: '100%'
          },
          "icon": _ArrowRightSOutlined2.default,
          "fullScreen": true,
          "placeholder": "选择高中"
        },
        "scopedSlots": {
          control: function control() {
            return _this.control;
          },
          content: function content(_ref2) {
            var value = _ref2.value,
              handleChange = _ref2.handleChange,
              opened = _ref2.opened;
            return h("div", {
              "style": {
                height: '100%'
              }
            }, [h(_CheckboxGroup.default, {
              "attrs": {
                "value": ['1', '2']
              }
            }, [h(_Checkbox.default, {
              "attrs": {
                "value": "1"
              }
            }, ["\u7537"]), h(_Checkbox.default, {
              "attrs": {
                "value": "2"
              }
            }, ["\u5973"])]), h(_TreeSelect.default, {
              "style": {
                height: '100%'
              },
              "attrs": {
                "value": value,
                "keyPath": ['杭州', '淳安县'],
                "treeData": [{
                  title: '杭州',
                  value: '杭州',
                  hasChildren: true
                }, {
                  title: '湖州',
                  value: '湖州',
                  hasChildren: true
                }, {
                  title: '嘉兴',
                  value: '嘉兴',
                  hasChildren: true
                }],
                "loadData": _this.loadData
              },
              "on": {
                "change": function change(value, _ref3) {
                  var node = _ref3.node,
                    path = _ref3.path;
                  _this.control = path.map(function (n) {
                    return n.title;
                  }).join('/');
                  handleChange(value, {
                    label: node.title,
                    value: node.value
                  });
                }
              }
            })]);
          }
        }
      })])])])]);
    }
  });
};
var Outline = exports.Outline = function Outline() {
  return _vue.default.extend({
    data: function data() {
      return {
        v1: '艺术',
        v2: ['体育', '科学'],
        v3: '计算机',
        v: false
      };
    },
    methods: {
      removeV2: function removeV2(value) {
        var index = this.v2.indexOf(value);
        if (index >= 0) {
          this.v2.splice(index, 1);
        }
      }
    },
    render: function render() {
      var _this2 = this;
      var h = arguments[0];
      return h("div", {
        "class": "demo"
      }, [h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["basic"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "title": "选择科目",
          "visible": this.v,
          "placeholder": "选择科目",
          "maxHeight": "30vh",
          "options": [{
            label: '艺术',
            value: '艺术'
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "style": "min-width: 165px;",
        "model": {
          value: _this2.v1,
          callback: function callback($$v) {
            _this2.v1 = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["confirm"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "title": "选择科目",
          "confirm": true,
          "placeholder": "选择科目",
          "options": [{
            label: '艺术',
            value: '艺术'
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "style": "min-width: 165px;",
        "model": {
          value: _this2.v1,
          callback: function callback($$v) {
            _this2.v1 = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["confirm"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "title": "选择科目",
          "confirm": true,
          "placeholder": "选择科目",
          "options": [{
            label: '艺术',
            value: '艺术'
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "style": "min-width: 165px;",
        "model": {
          value: _this2.v1,
          callback: function callback($$v) {
            _this2.v1 = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["multiple"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "title": "选择科目",
          "multiple": true,
          "placeholder": "选择科目",
          "options": [{
            label: '艺术',
            value: '艺术'
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "style": "min-width: 165px;",
        "model": {
          value: _this2.v2,
          callback: function callback($$v) {
            _this2.v2 = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["beforeOpen"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "beforeOpen": function beforeOpen() {
            return new Promise(function (resolve, reject) {
              var instance = _Toast.default.loading('延时打开');
              setTimeout(function () {
                instance.close();
                resolve(true);
              }, 2000);
            });
          },
          "title": "选择科目",
          "placeholder": "选择科目",
          "maxHeight": "30vh",
          "options": [{
            label: '艺术',
            value: '艺术'
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "style": "min-width: 165px;"
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["scopedSlots: control"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "title": "选择科目",
          "multiple": true,
          "placeholder": "选择科目",
          "options": [{
            label: '艺术',
            value: '艺术'
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "style": "min-width: 165px;",
        "scopedSlots": {
          control: function control(selectedOptions) {
            if (selectedOptions instanceof Array) {
              return selectedOptions.map(function (_ref4) {
                var label = _ref4.label,
                  value = _ref4.value;
                return h(_Tag.default, {
                  "on": {
                    "click": function click(e) {
                      e.stopPropagation();
                      _Dialog.default.confirm({
                        title: "\u662F\u5426\u5220\u9664".concat(label),
                        onOk: function onOk() {
                          _this2.removeV2(value);
                        }
                      });
                    }
                  },
                  "style": "margin-right: 5px;",
                  "attrs": {
                    "deleteable": true
                  }
                }, [label]);
              });
            }
            return h(_Tag.default, {
              "attrs": {
                "deleteable": true
              }
            }, [selectedOptions.label]);
          }
        },
        "model": {
          value: _this2.v2,
          callback: function callback($$v) {
            _this2.v2 = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["native"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "title": "选择科目",
          "native": true,
          "placeholder": "选择科目",
          "options": [{
            label: '艺术',
            value: '艺术',
            disabled: true
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "style": "min-width: 165px;",
        "model": {
          value: _this2.v1,
          callback: function callback($$v) {
            _this2.v1 = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["fullscreen"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "title": "选择科目",
          "icon": _ArrowRightSOutlined2.default,
          "fullScreen": true,
          "placeholder": "选择科目",
          "options": [{
            label: '艺术',
            value: '艺术',
            disabled: true
          }, {
            label: '体育',
            value: '体育'
          }, {
            label: '科学',
            value: '科学'
          }, {
            label: '物理',
            value: '物理'
          }, {
            label: '计算机',
            value: '计算机'
          }, {
            label: '化学',
            value: '化学'
          }]
        },
        "style": "min-width: 165px;",
        "model": {
          value: _this2.v1,
          callback: function callback($$v) {
            _this2.v1 = $$v;
          }
        }
      })])]);
    }
  });
};