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

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.List = exports.Group = exports.Basic = void 0;
var _CheckboxBlankOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/CheckboxBlankOutlined"));
var _CheckboxOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/CheckboxOutlined"));
var _CheckFilled2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/CheckFilled"));
var _vue = _interopRequireDefault(require("vue"));
var _index = _interopRequireDefault(require("./index"));
require("./style");
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
require("../Checkbox/style");
var _RadioTag = _interopRequireDefault(require("../RadioTag"));
require("../RadioTag/style");
var _RadioGroup = _interopRequireDefault(require("../RadioGroup"));
require("../RadioGroup/style");
var _Card = _interopRequireDefault(require("../Card"));
require("../Card/style");
var _Grid = _interopRequireDefault(require("../Grid"));
require("../Grid/style");
var _RadioList = _interopRequireDefault(require("../RadioList"));
require("../RadioList/style");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Components/Form/Radio',
  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": _CheckFilled2.default,
          "unCheckedIcon": null
        },
        "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"])])]);
    }
  });
};
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(_Checkbox.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, ["RadioGroup(", JSON.stringify(this.value), ")"]), h(_RadioGroup.default, {
        "attrs": {
          "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, ["RadioGroup Icon(", JSON.stringify(this.value), ")"]), h(_RadioGroup.default, {
        "attrs": {
          "checkedIcon": _CheckboxOutlined2.default,
          "unCheckedIcon": _CheckboxBlankOutlined2.default,
          "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": {
          "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, ["RadioTag (", JSON.stringify(this.value), ")"]), h(_RadioGroup.default, {
        "attrs": {
          "disabled": this.disabled,
          "name": "subject"
        },
        "model": {
          value: _this2.value,
          callback: function callback($$v) {
            _this2.value = $$v;
          }
        }
      }, [h(_Grid.default, {
        "attrs": {
          "row": true,
          "gap": 2
        }
      }, [h(_Grid.default.Item, {
        "attrs": {
          "span": 6
        }
      }, [h(_Grid.default, {
        "attrs": {
          "x": "center"
        }
      }, [h(_RadioTag.default, {
        "attrs": {
          "value": "思政"
        }
      }, ["\u601D\u653F"])])]), h(_Grid.default.Item, {
        "attrs": {
          "span": 6
        }
      }, [h(_Grid.default, {
        "attrs": {
          "x": "center"
        }
      }, [h(_RadioTag.default, {
        "attrs": {
          "value": "历史"
        }
      }, ["\u5386\u53F2"])])]), h(_Grid.default.Item, {
        "attrs": {
          "span": 6
        }
      }, [h(_Grid.default, {
        "attrs": {
          "x": "center"
        }
      }, [h(_RadioTag.default, {
        "attrs": {
          "value": "地理"
        }
      }, ["\u5730\u7406"])])]), h(_Grid.default.Item, {
        "attrs": {
          "span": 6
        }
      }, [h(_Grid.default, {
        "attrs": {
          "x": "center"
        }
      }, [h(_RadioTag.default, {
        "attrs": {
          "value": "数学"
        }
      }, ["\u6570\u5B66"])])])])])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Use Options(", JSON.stringify(this.value), ")"]), h(_RadioGroup.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;
          }
        }
      })])]);
    }
  });
};
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(_RadioList.default, {
        "attrs": {
          "options": [{
            label: '思政',
            value: '思政',
            disabled: true
          }, {
            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(_RadioList.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;
          }
        }
      })])]);
    }
  });
};