@ohu-mobile/core
Version:
213 lines (212 loc) • 8.11 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WithIcon = exports.Translucent = exports.To = exports.Plain = exports.Loading = exports.Link = exports.Inline = exports.Basic = void 0;
var _CheckOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/CheckOutlined"));
var _ArrowLeftSOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/ArrowLeftSOutlined"));
var _SaveOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/SaveOutlined"));
var _vue = _interopRequireDefault(require("vue"));
var _vueRouter = _interopRequireDefault(require("vue-router"));
var _index = _interopRequireDefault(require("./index"));
require("./style");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
title: 'Components/Basic/Button',
parameters: {
component: _index.default,
options: {
showPanel: true
}
}
};
var Basic = exports.Basic = function Basic() {
return {
components: {
Button: _index.default
},
template: "\n <div style=\"padding: 10px;\">\n <Button style=\"margin-bottom: 10px;\">normal</Button>\n <Button round style=\"margin-bottom: 10px;\">round</Button>\n <Button type=\"primary\" style=\"margin-bottom: 10px;\">primary</Button>\n <Button type=\"primary\" round style=\"margin-bottom: 10px;\">round + primary</Button>\n <Button disabled round style=\"margin-bottom: 10px;\">disabled</Button>\n <Button type=\"primary\" disabled round style=\"margin-bottom: 10px;\">disabled + primary</Button>\n </div>\n "
};
};
var Inline = exports.Inline = function Inline() {
return {
components: {
Button: _index.default
},
template: "\n <div style=\"padding: 10px;\">\n <Button style=\"margin-bottom: 10px;\" inline>inline normal</Button>\n <Button style=\"margin-bottom: 10px;\" inline round>inline round</Button>\n <Button style=\"margin-bottom: 10px;\" type=\"primary\" inline round>inline round primary</Button>\n <Button style=\"margin-bottom: 10px;\" size=\"md\">md</Button>\n <Button style=\"margin-bottom: 10px;\" type=\"primary\" size=\"md\">md + primary</Button>\n <Button style=\"margin-bottom: 10px;\" type=\"primary\" size=\"md\" round>md + round</Button>\n <Button style=\"margin-bottom: 10px;\" size=\"sm\">small</Button>\n <Button style=\"margin-bottom: 10px;\" type=\"primary\" size=\"sm\">small + primary</Button>\n <Button style=\"margin-bottom: 10px;\" type=\"primary\" size=\"sm\" round>small + round</Button>\n </div>\n "
};
};
var Plain = exports.Plain = function Plain() {
return {
components: {
Button: _index.default
},
template: "\n <div style=\"padding: 10px;\">\n <Button style=\"margin-bottom: 10px;\" type=\"primary\" plain>plain</Button>\n <Button style=\"margin-bottom: 10px;\" type=\"primary\" plain disabled>plain + disabled</Button>\n <Button style=\"margin-bottom: 10px;\" type=\"primary\" plain round>plain + round</Button>\n <Button style=\"margin-bottom: 10px;\" type=\"primary\" plain round inline>plain + round + inline</Button>\n <Button style=\"margin-bottom: 10px;\" type=\"primary\" plain round inline size=\"sm\">plain small</Button>\n </div>\n "
};
};
var Translucent = exports.Translucent = function Translucent() {
return {
components: {
Button: _index.default
},
template: "\n <div style=\"padding: 10px;\">\n <Button style=\"margin-bottom: 10px;\" type=\"translucent\" size=\"sm\">translucent</Button>\n <Button style=\"margin-bottom: 10px;\" type=\"translucent\" size=\"md\" round>translucent + round + md</Button>\n <Button style=\"margin-bottom: 10px;\" type=\"translucent\" size=\"sm\" disabled>translucent + disabled</Button>\n </div>\n "
};
};
var Link = exports.Link = function Link() {
return {
render: function render() {
var h = arguments[0];
return h("div", {
"style": "padding: 10px;"
}, [h(_index.default, {
"style": "margin-bottom: 10px;",
"attrs": {
"link": true,
"size": "sm"
}
}, ["link"]), h(_index.default, {
"style": "margin-bottom: 10px;",
"attrs": {
"type": "primary",
"link": true,
"size": "md",
"round": true
}
}, ["link + round + md"]), h(_index.default, {
"style": "margin-bottom: 10px;",
"attrs": {
"link": true,
"size": "sm",
"disabled": true
}
}, ["link + disabled"])]);
}
};
};
var WithIcon = exports.WithIcon = function WithIcon() {
return _vue.default.extend({
render: function render() {
var h = arguments[0];
return h("div", {
"style": "padding: 10px;"
}, [h("p", ["lg"]), h(_index.default, {
"attrs": {
"type": "primary",
"icon": _SaveOutlined2.default
}
}, ["\u4FDD\u5B58"]), h(_index.default, {
"attrs": {
"type": "primary",
"icon": _SaveOutlined2.default,
"round": true
}
}), h("p", ["md"]), h(_index.default, {
"attrs": {
"type": "link",
"icon": _ArrowLeftSOutlined2.default,
"size": "md"
}
}, ["\u8FD4\u56DE"]), h(_index.default, {
"attrs": {
"type": "primary",
"icon": _ArrowLeftSOutlined2.default,
"size": "md",
"round": true
}
}), h("p", ["sm"]), h(_index.default, {
"attrs": {
"type": "link",
"icon": _ArrowLeftSOutlined2.default,
"size": "sm"
}
}, ["\u8FD4\u56DE"]), h(_index.default, {
"attrs": {
"type": "primary",
"icon": _CheckOutlined2.default,
"size": "sm",
"round": true
}
})]);
}
});
};
var Loading = exports.Loading = function Loading() {
return _vue.default.extend({
data: function data() {
return {
loading: false
};
},
render: function render() {
var _this = this;
var h = arguments[0];
return h("div", {
"style": "padding: 10px;"
}, [h("p", ["lg"]), h(_index.default, {
"attrs": {
"type": "primary",
"loading": this.loading
},
"on": {
"click": function click(e) {
_this.loading = !_this.loading;
}
}
}, [this.loading ? 'loading...' : 'click to load']), h("p", ["md"]), h(_index.default, {
"attrs": {
"type": "translucent",
"size": "md",
"loading": this.loading
},
"on": {
"click": function click(e) {
_this.loading = !_this.loading;
}
}
}, [this.loading ? 'loading...' : 'click to load']), h("p", ["sm"]), h(_index.default, {
"attrs": {
"type": "primary",
"size": "sm",
"loading": this.loading
},
"on": {
"click": function click(e) {
_this.loading = !_this.loading;
}
}
}, [this.loading ? 'loading...' : 'click to load']), h(_index.default, {
"attrs": {
"type": "link",
"size": "sm",
"loading": this.loading
},
"on": {
"click": function click(e) {
_this.loading = !_this.loading;
}
}
}, [this.loading ? 'loading...' : 'click to load'])]);
}
});
};
_vue.default.use(_vueRouter.default);
var router = new _vueRouter.default({
mode: 'hash'
});
var To = exports.To = function To() {
return _vue.default.extend({
router: router,
render: function render() {
var h = arguments[0];
return h("div", {
"class": "demo"
}, [h(_index.default, {
"attrs": {
"inline": true,
"type": "primary",
"url": "https://github.com/jeffwcx/ohu-mobile"
}
}, ["github"])]);
}
});
};