@ishitatsuyuki/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
218 lines (211 loc) • 7.27 kB
JavaScript
'use strict';
var vue = require('vue');
var helpers = require('./helpers.js');
var config = require('./config.js');
var BaseComponentMixin = require('./BaseComponentMixin-a03c02e3.js');
var Icon = require('./Icon-172f9998.js');
/**
* The classic button, in different colors, sizes, and states
* @displayName Button
* @style _button.scss
*/
var script = vue.defineComponent({
name: 'OButton',
components: {
[Icon.script.name]: Icon.script
},
configField: 'button',
mixins: [BaseComponentMixin.BaseComponentMixin],
inheritAttrs: false,
props: {
/**
* Color of the control, optional
* @values primary, info, success, warning, danger, and any other custom color
*/
variant: String,
/**
* Size of button, optional
* @values small, medium, large
*/
size: String,
/**
* Button label, optional when default slot
*/
label: String,
/**
* Icon pack to use
* @values mdi, fa, fas and any other custom icon pack
*/
iconPack: String,
/**
* Icon name to show on the left
*/
iconLeft: String,
/**
* Icon name to show on the right
*/
iconRight: String,
/**
* Rounded style
*/
rounded: {
type: Boolean,
default: () => { return helpers.getValueByPath(config.getOptions(), 'button.rounded', false); }
},
/**
* Outlined style
*/
outlined: Boolean,
/**
* Button will be expanded (full-width)
*/
expanded: Boolean,
inverted: Boolean,
/**
* Button type, like native
*/
nativeType: {
type: String,
default: 'button',
validator: (value) => {
return [
'button',
'submit',
'reset'
].indexOf(value) >= 0;
}
},
/**
* Button tag name
* @values button, a, input, router-link, nuxt-link (or other nuxt alias)
*/
tag: {
type: String,
default: 'button'
},
/**
* Button will be disabled
*/
disabled: Boolean,
/** @ignore */
iconBoth: Boolean,
elementsWrapperClass: [String, Function, Array],
rootClass: [String, Function, Array],
outlinedClass: [String, Function, Array],
invertedClass: [String, Function, Array],
expandedClass: [String, Function, Array],
roundedClass: [String, Function, Array],
disabledClass: [String, Function, Array],
iconClass: [String, Function, Array],
iconLeftClass: [String, Function, Array],
iconRightClass: [String, Function, Array],
labelClass: [String, Function, Array],
sizeClass: [String, Function, Array],
variantClass: [String, Function, Array]
},
computed: {
rootClasses() {
return [
this.computedClass('rootClass', 'o-btn'),
{ [this.computedClass('sizeClass', 'o-btn--', this.size)]: this.size },
{ [this.computedClass('variantClass', 'o-btn--', this.variant)]: this.variant },
{ [this.computedClass('outlinedClass', 'o-btn--outlined')]: this.outlined && !this.variant },
{ [this.computedClass('invertedClass', 'o-btn--inverted')]: this.inverted && !this.variant },
{ [this.computedClass('outlinedClass', 'o-btn--outlined-', this.variant)]: this.outlined && this.variant },
{ [this.computedClass('invertedClass', 'o-btn--inverted-', this.variant)]: this.inverted && this.variant },
{ [this.computedClass('expandedClass', 'o-btn--expanded')]: this.expanded },
{ [this.computedClass('roundedClass', 'o-btn--rounded')]: this.rounded },
{ [this.computedClass('disabledClass', 'o-btn--disabled')]: this.disabled },
];
},
labelClasses() {
return [
this.computedClass('labelClass', 'o-btn__label'),
];
},
iconClasses() {
return [
this.computedClass('iconClass', 'o-btn__icon'),
];
},
iconLeftClasses() {
return [
...this.iconClasses,
this.computedClass('iconLeftClass', 'o-btn__icon-left')
];
},
iconRightClasses() {
return [
...this.iconClasses,
this.computedClass('iconRightClass', 'o-btn__icon-right')
];
},
elementsWrapperClasses() {
return [
this.computedClass('elementsWrapperClass', 'o-btn__wrapper'),
];
},
computedTag() {
if (typeof this.disabled !== 'undefined' && this.disabled !== false) {
return 'button';
}
return this.tag;
},
computedNativeType() {
if (this.tag === 'button' || this.tag === 'input') {
return this.nativeType;
}
return null;
},
computedDisabled() {
if (this.disabled)
return true;
return null;
}
}
});
function render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_o_icon = vue.resolveComponent("o-icon");
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.computedTag), vue.mergeProps(_ctx.$attrs, {
disabled: _ctx.computedDisabled,
type: _ctx.computedNativeType,
class: _ctx.rootClasses
}), {
default: vue.withCtx(() => [vue.createVNode("span", {
class: _ctx.elementsWrapperClasses
}, [_ctx.iconLeft ? vue.createVNode(_component_o_icon, {
key: 0,
pack: _ctx.iconPack,
icon: _ctx.iconLeft,
size: _ctx.size,
both: _ctx.iconBoth,
class: _ctx.iconLeftClasses
}, null, 8
/* PROPS */
, ["pack", "icon", "size", "both", "class"]) : vue.createCommentVNode("v-if", true), _ctx.label || _ctx.$slots.default ? (vue.openBlock(), vue.createBlock("span", {
key: 1,
class: _ctx.labelClasses
}, [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.label), 1
/* TEXT */
)])], 2
/* CLASS */
)) : vue.createCommentVNode("v-if", true), _ctx.iconRight ? vue.createVNode(_component_o_icon, {
key: 2,
pack: _ctx.iconPack,
icon: _ctx.iconRight,
size: _ctx.size,
both: _ctx.iconBoth,
class: _ctx.iconRightClasses
}, null, 8
/* PROPS */
, ["pack", "icon", "size", "both", "class"]) : vue.createCommentVNode("v-if", true)], 2
/* CLASS */
)]),
_: 1
}, 16
/* FULL_PROPS */
, ["disabled", "type", "class"]);
}
script.render = render;
script.__file = "src/components/button/Button.vue";
exports.script = script;