@ohu-mobile/core/lib/Checkbox/Checkbox.stories.js

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.List = exports.Group = exports.Basic = void 0;
var _IndeterminateCircleFilled2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/IndeterminateCircleFilled"));
var _CheckboxBlankCircleOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/CheckboxBlankCircleOutlined"));
var _CheckboxCircleFilled2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/CheckboxCircleFilled"));
var _vue = _interopRequireDefault(require("vue"));
var _index = _interopRequireDefault(require("./index"));
require("./style");
var _CheckTag = _interopRequireDefault(require("../CheckTag"));
require("../CheckTag/style");
var _CheckboxGroup = _interopRequireDefault(require("../CheckboxGroup"));
require("../CheckboxGroup/style");
require("../Button/style");
var _Card = _interopRequireDefault(require("../Card"));
require("../Card/style");
var _Grid = _interopRequireDefault(require("../Grid"));
require("../Grid/style");
var _CheckList = _interopRequireDefault(require("../CheckList"));
require("../CheckList/style");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Components/Form/Checkbox',
  parameters: {
    component: _index.default,
    options: {
      showPanel: true
    }
  }
};
var Basic = exports.Basic = function Basic() {
  return _vue.default.extend({
    data: function data() {
      return {
        basic: false
      };
    },
    render: function render() {
      var _this = this;
      var h = arguments[0];
      return h("div", {
        "class": "demo"
      }, [h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Basic (", JSON.stringify(this.basic), ")"]), h(_index.default, {
        "attrs": {
          "name": "a"
        },
        "model": {
          value: _this.basic,
          callback: function callback($$v) {
            _this.basic = $$v;
          }
        }
      }, ["Basic"])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Icon (", JSON.stringify(this.basic), ")"]), h(_index.default, {
        "attrs": {
          "checkedIcon": _CheckboxCircleFilled2.default,
          "unCheckedIcon": _CheckboxBlankCircleOutlined2.default,
          "indeterminateIcon": _IndeterminateCircleFilled2.default
        },
        "model": {
          value: _this.basic,
          callback: function callback($$v) {
            _this.basic = $$v;
          }
        }
      }, ["Icon"])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Color (", JSON.stringify(this.basic), ")"]), h(_index.default, {
        "attrs": {
          "name": "good",
          "color": "#36b365",
          "unCheckedColor": "#36b365"
        },
        "model": {
          value: _this.basic,
          callback: function callback($$v) {
            _this.basic = $$v;
          }
        }
      }, ["Basic"])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Disabled"]), h(_index.default, {
        "attrs": {
          "disabled": true,
          "name": "a"
        },
        "model": {
          value: _this.basic,
          callback: function callback($$v) {
            _this.basic = $$v;
          }
        }
      }, ["Disabled"])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Indeterminate (", JSON.stringify(this.basic), ")"]), h(_index.default, {
        "attrs": {
          "indeterminate": true
        }
      }, ["Indeterminate"])])]);
    }
  });
};
var Group = exports.Group = function Group() {
  return _vue.default.extend({
    data: function data() {
      return {
        value: ['数学'],
        disabled: false
      };
    },
    render: function render() {
      var _this2 = this;
      var h = arguments[0];
      return h("div", {
        "class": "demo"
      }, [h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_index.default, {
        "model": {
          value: _this2.disabled,
          callback: function callback($$v) {
            _this2.disabled = $$v;
          }
        }
      }, ["Group Disabled"])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["CheckboxGroup(", JSON.stringify(this.value), ")"]), h(_CheckboxGroup.default, {
        "attrs": {
          "disabled": this.disabled
        },
        "model": {
          value: _this2.value,
          callback: function callback($$v) {
            _this2.value = $$v;
          }
        }
      }, [h(_index.default, {
        "attrs": {
          "disabled": true,
          "value": "思政"
        }
      }, ["\u601D\u653F"]), h(_index.default, {
        "attrs": {
          "disabled": true,
          "value": "历史"
        }
      }, ["\u5386\u53F2"]), h(_index.default, {
        "attrs": {
          "value": "地理"
        }
      }, ["\u5730\u7406"]), h(_index.default, {
        "attrs": {
          "value": "数学"
        }
      }, ["\u6570\u5B66"])])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Icon(", JSON.stringify(this.value), ")"]), h(_CheckboxGroup.default, {
        "attrs": {
          "checkedIcon": _CheckboxCircleFilled2.default,
          "disabled": this.disabled
        },
        "model": {
          value: _this2.value,
          callback: function callback($$v) {
            _this2.value = $$v;
          }
        }
      }, [h(_index.default, {
        "attrs": {
          "value": "思政"
        }
      }, ["\u601D\u653F"]), h(_index.default, {
        "attrs": {
          "value": "历史"
        }
      }, ["\u5386\u53F2"]), h(_index.default, {
        "attrs": {
          "value": "地理"
        }
      }, ["\u5730\u7406"]), h(_index.default, {
        "attrs": {
          "value": "数学"
        }
      }, ["\u6570\u5B66"])])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["CheckTag (", JSON.stringify(this.value), ")"]), h(_CheckboxGroup.default, {
        "attrs": {
          "disabled": this.disabled,
          "name": "subject"
        },
        "model": {
          value: _this2.value,
          callback: function callback($$v) {
            _this2.value = $$v;
          }
        }
      }, [h(_Grid.default, {
        "attrs": {
          "row": true
        }
      }, [h(_Grid.default.Item, {
        "attrs": {
          "span": 6
        }
      }, [h(_CheckTag.default, {
        "attrs": {
          "value": "思政"
        }
      }, ["\u601D\u653F"])]), h(_Grid.default.Item, {
        "attrs": {
          "span": 6
        }
      }, [h(_CheckTag.default, {
        "attrs": {
          "value": "历史"
        }
      }, ["\u5386\u53F2"])]), h(_Grid.default.Item, {
        "attrs": {
          "span": 6
        }
      }, [h(_CheckTag.default, {
        "attrs": {
          "value": "地理"
        }
      }, ["\u5730\u7406"])]), h(_Grid.default.Item, {
        "attrs": {
          "span": 6
        }
      }, [h(_CheckTag.default, {
        "attrs": {
          "value": "数学"
        }
      }, ["\u6570\u5B66"])])])])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Use Options(", JSON.stringify(this.value), ")"]), h(_CheckboxGroup.default, {
        "attrs": {
          "disabled": this.disabled,
          "options": [{
            label: '思政',
            value: '思政'
          }, {
            label: '历史',
            value: '历史'
          }, {
            label: '地理',
            value: '地理'
          }, {
            label: '数学',
            value: '数学'
          }]
        },
        "model": {
          value: _this2.value,
          callback: function callback($$v) {
            _this2.value = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Max(", JSON.stringify(this.value), ")"]), h(_CheckboxGroup.default, {
        "attrs": {
          "disabled": this.disabled,
          "max": 2,
          "options": [{
            label: '思政',
            value: '思政'
          }, {
            label: '历史',
            value: '历史'
          }, {
            label: '地理',
            value: '地理'
          }, {
            label: '数学',
            value: '数学'
          }]
        },
        "model": {
          value: _this2.value,
          callback: function callback($$v) {
            _this2.value = $$v;
          }
        }
      })])]);
    }
  });
};
var List = exports.List = function List() {
  return _vue.default.extend({
    data: function data() {
      return {
        value: []
      };
    },
    render: function render() {
      var _this3 = this;
      var h = arguments[0];
      return h("div", {
        "class": "demo"
      }, [h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["CheckList Use Options(", JSON.stringify(this.value), ")"]), h(_CheckList.default, {
        "attrs": {
          "options": [{
            label: '思政',
            value: '思政'
          }, {
            label: '历史',
            value: '历史'
          }, {
            label: '地理',
            value: '地理'
          }, {
            label: '数学',
            value: '数学'
          }]
        },
        "model": {
          value: _this3.value,
          callback: function callback($$v) {
            _this3.value = $$v;
          }
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["CheckList Collapse(", JSON.stringify(this.value), ")"]), h(_CheckList.default, {
        "attrs": {
          "options": [{
            label: '思政',
            value: '思政'
          }, {
            label: '历史',
            value: '历史',
            children: [{
              label: '中国史',
              value: '中国史'
            }, {
              label: '世界史',
              value: '世界史'
            }, {
              label: '地球史',
              value: '地球史'
            }]
          }, {
            label: '地理',
            value: '地理'
          }, {
            label: '数学',
            value: '数学'
          }]
        },
        "model": {
          value: _this3.value,
          callback: function callback($$v) {
            _this3.value = $$v;
          }
        }
      })])]);
    }
  });
};