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

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Textarea = exports.Outline = exports.Basic = void 0;
var _EditOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/EditOutlined"));
var _vue = _interopRequireDefault(require("vue"));
var _Card = _interopRequireDefault(require("../Card"));
require("../Card/style");
var _index = _interopRequireDefault(require("./index"));
require("./style");
var _Button = _interopRequireDefault(require("../Button"));
require("../Button/style");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Components/Form/Input',
  parameters: {
    component: _index.default,
    options: {
      showPanel: true
    }
  }
};
var Basic = exports.Basic = function Basic() {
  return _vue.default.extend({
    data: function data() {
      return {
        basic: 'hello',
        adornment: '',
        password: ''
      };
    },
    render: function render() {
      var _this = this;
      var h = arguments[0];
      return h("div", [h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Basic"]), h(_index.default, {
        "attrs": {
          "allowClear": true,
          "placeholder": "please input"
        },
        "model": {
          value: _this.basic,
          callback: function callback($$v) {
            _this.basic = $$v;
          }
        }
      }), h("p", [this.basic])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Readonly"]), h(_index.default, {
        "attrs": {
          "readonly": true,
          "allowClear": true
        },
        "model": {
          value: _this.basic,
          callback: function callback($$v) {
            _this.basic = $$v;
          }
        }
      }), h("p", [this.basic])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Disabled"]), h(_index.default, {
        "attrs": {
          "disabled": true,
          "allowClear": true
        },
        "model": {
          value: _this.basic,
          callback: function callback($$v) {
            _this.basic = $$v;
          }
        }
      }), h("p", [this.basic])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Adornment"]), h(_index.default, {
        "attrs": {
          "allowClear": true,
          "startAdornment": _EditOutlined2.default,
          "endAdornment": "kg"
        },
        "model": {
          value: _this.adornment,
          callback: function callback($$v) {
            _this.adornment = $$v;
          }
        }
      }), h("p", [this.adornment])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["ButtonAdornment"]), h(_index.default, {
        "attrs": {
          "allowClear": true,
          "placeholder": "请输入验证码",
          "startAdornment": _EditOutlined2.default
        },
        "model": {
          value: _this.adornment,
          callback: function callback($$v) {
            _this.adornment = $$v;
          }
        }
      }, [h(_Button.default, {
        "slot": "endAdornment",
        "attrs": {
          "type": "primary",
          "size": "sm"
        }
      }, ["\u83B7\u53D6\u9A8C\u8BC1\u7801"])]), h("p", [this.adornment])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Password"]), h(_index.default, {
        "attrs": {
          "type": "password",
          "allowClear": true,
          "placeholder": "请输入密码"
        },
        "style": "width: 100%",
        "model": {
          value: _this.password,
          callback: function callback($$v) {
            _this.password = $$v;
          }
        }
      }), h("p", [this.password])])]);
    }
  });
};
var Outline = exports.Outline = function Outline() {
  return _vue.default.extend({
    data: function data() {
      return {
        basic: '',
        adornment: '',
        password: ''
      };
    },
    render: function render() {
      var _this2 = this;
      var h = arguments[0];
      return h("div", [h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Basic"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "allowClear": true,
          "placeholder": "please input"
        },
        "model": {
          value: _this2.basic,
          callback: function callback($$v) {
            _this2.basic = $$v;
          }
        }
      }), h("p", [this.basic])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Readonly"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "readonly": true,
          "allowClear": true
        },
        "model": {
          value: _this2.basic,
          callback: function callback($$v) {
            _this2.basic = $$v;
          }
        }
      }), h("p", [this.basic])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Disabled"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "disabled": true,
          "allowClear": true
        },
        "model": {
          value: _this2.basic,
          callback: function callback($$v) {
            _this2.basic = $$v;
          }
        }
      }), h("p", [this.basic])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Adornment"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "startAdornment": _EditOutlined2.default,
          "endAdornment": "kg"
        },
        "model": {
          value: _this2.adornment,
          callback: function callback($$v) {
            _this2.adornment = $$v;
          }
        }
      }), h("p", [this.adornment])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["ButtonAdornment"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "startAdornment": _EditOutlined2.default
        },
        "model": {
          value: _this2.adornment,
          callback: function callback($$v) {
            _this2.adornment = $$v;
          }
        }
      }, [h(_Button.default, {
        "slot": "endAdornment",
        "attrs": {
          "type": "primary",
          "size": "sm"
        }
      }, ["\u83B7\u53D6\u9A8C\u8BC1\u7801"])]), h("p", [this.adornment])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Password"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "type": "password",
          "allowClear": true,
          "placeholder": "请输入密码"
        },
        "style": "width: 100%",
        "model": {
          value: _this2.password,
          callback: function callback($$v) {
            _this2.password = $$v;
          }
        }
      }), h("p", [this.password])])]);
    }
  });
};
var Textarea = exports.Textarea = function Textarea() {
  return _vue.default.extend({
    data: function data() {
      return {
        value: ''
      };
    },
    render: function render() {
      var _this3 = this;
      var h = arguments[0];
      return h("div", [h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Basic"]), h(_index.default, {
        "attrs": {
          "placeholder": "请输入",
          "type": "textarea",
          "rows": 3,
          "cols": 30
        },
        "model": {
          value: _this3.value,
          callback: function callback($$v) {
            _this3.value = $$v;
          }
        }
      }), h("p", [this.value])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Readonly"]), h(_index.default, {
        "attrs": {
          "readonly": true,
          "type": "textarea",
          "rows": 3,
          "cols": 30
        },
        "model": {
          value: _this3.value,
          callback: function callback($$v) {
            _this3.value = $$v;
          }
        }
      }), h("p", [this.value])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["Disabled"]), h(_index.default, {
        "attrs": {
          "disabled": true,
          "readonly": true,
          "type": "textarea",
          "rows": 3,
          "cols": 30
        },
        "model": {
          value: _this3.value,
          callback: function callback($$v) {
            _this3.value = $$v;
          }
        }
      }), h("p", [this.value])]), h(_Card.default, {
        "attrs": {
          "shadow": true,
          "divider": true
        }
      }, [h(_Card.default.Header, ["outline"]), h(_index.default, {
        "attrs": {
          "outline": true,
          "type": "textarea",
          "rows": 3,
          "cols": 30
        },
        "model": {
          value: _this3.value,
          callback: function callback($$v) {
            _this3.value = $$v;
          }
        }
      }), h("p", [this.value])])]);
    }
  });
};