@ishitatsuyuki/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
195 lines (189 loc) • 6.85 kB
JavaScript
'use strict';
var vue = require('vue');
var BaseComponentMixin = require('./BaseComponentMixin-a03c02e3.js');
/**
* Switch between two opposing states
* @displayName Switch
* @style _switch.scss
*/
var script = vue.defineComponent({
name: 'OSwitch',
mixins: [BaseComponentMixin.BaseComponentMixin],
configField: 'switch',
emits: ['update:modelValue'],
props: {
/** @model */
modelValue: [String, Number, Boolean],
/**
* Same as native value
*/
nativeValue: [String, Number, Boolean],
disabled: Boolean,
/**
* Color of the switch, optional
* @values primary, info, success, warning, danger, and any other custom color
*/
variant: String,
/**
* Color of the switch when is passive, optional
* @values primary, info, success, warning, danger, and any other custom color
*/
passiveVariant: String,
/** Name attribute on native checkbox */
name: String,
required: Boolean,
/**
* Vertical size of switch, optional
* @values small, medium, large
*/
size: String,
/**
* Overrides the returned value when it's checked
*/
trueValue: {
type: [String, Number, Boolean],
default: true
},
/**
* Overrides the returned value when it's not checked
*/
falseValue: {
type: [String, Number, Boolean],
default: false
},
/** Rounded style */
rounded: {
type: Boolean,
default: true
},
/** Label position */
position: {
type: String,
default: 'right'
},
/** Accessibility label to establish relationship between the switch and control label' */
ariaLabelledby: String,
rootClass: [String, Function, Array],
disabledClass: [String, Function, Array],
checkClass: [String, Function, Array],
checkCheckedClass: [String, Function, Array],
checkSwitchClass: [String, Function, Array],
roundedClass: [String, Function, Array],
labelClass: [String, Function, Array],
sizeClass: [String, Function, Array],
variantClass: [String, Function, Array],
elementsWrapperClass: [String, Function, Array],
passiveVariantClass: [String, Function, Array],
positionClass: [String, Function, Array],
inputClass: [String, Function, Array]
},
data() {
return {
newValue: this.modelValue,
isMouseDown: false
};
},
computed: {
rootClasses() {
return [
this.computedClass('rootClass', 'o-switch'),
{ [this.computedClass('sizeClass', 'o-switch--', this.size)]: this.size },
{ [this.computedClass('disabledClass', 'o-switch--disabled')]: this.disabled },
{ [this.computedClass('variantClass', 'o-switch--', this.variant)]: this.variant },
{ [this.computedClass('positionClass', 'o-switch--', this.position)]: this.position },
{ [this.computedClass('passiveVariantClass', 'o-switch--', this.passiveVariant + '-passive')]: this.passiveVariant }
];
},
inputClasses() {
return [
this.computedClass('inputClass', 'o-switch__input')
];
},
checkClasses() {
return [
this.computedClass('checkClass', 'o-switch__check'),
{ [this.computedClass('checkCheckedClass', 'o-switch__check--checked')]: (this.newValue === this.trueValue) },
{ [this.computedClass('roundedClass', 'o-switch--rounded')]: this.rounded },
];
},
checkSwitchClasses() {
return [
this.computedClass('checkSwitchClass', 'o-switch__check-switch'),
{ [this.computedClass('roundedClass', 'o-switch--rounded')]: this.rounded },
];
},
labelClasses() {
return [
this.computedClass('labelClass', 'o-switch__label')
];
},
computedValue: {
get() {
return this.newValue;
},
set(value) {
this.newValue = value;
this.$emit('update:modelValue', this.newValue);
}
}
},
watch: {
/**
* When v-model change, set internal value.
*/
modelValue(value) {
this.newValue = value;
}
},
methods: {
focus() {
// MacOS FireFox and Safari do not focus when clicked
this.$refs.input.focus();
}
}
});
function render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("label", {
class: _ctx.rootClasses,
ref: "label",
onClick: _cache[3] || (_cache[3] = (...args) => _ctx.focus(...args)),
onKeydown: _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers($event => _ctx.$refs.label.click(), ["prevent"]), ["enter"])),
onMousedown: _cache[5] || (_cache[5] = $event => _ctx.isMouseDown = true),
onMouseup: _cache[6] || (_cache[6] = $event => _ctx.isMouseDown = false),
onMouseout: _cache[7] || (_cache[7] = $event => _ctx.isMouseDown = false),
onBlur: _cache[8] || (_cache[8] = $event => _ctx.isMouseDown = false)
}, [vue.withDirectives(vue.createVNode("input", {
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.computedValue = $event),
type: "checkbox",
ref: "input",
class: _ctx.inputClasses,
onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => {}, ["stop"])),
disabled: _ctx.disabled,
name: _ctx.name,
required: _ctx.required,
value: _ctx.nativeValue,
"true-value": _ctx.trueValue,
"false-value": _ctx.falseValue,
"aria-labelledby": _ctx.ariaLabelledby
}, null, 10
/* CLASS, PROPS */
, ["disabled", "name", "required", "value", "true-value", "false-value", "aria-labelledby"]), [[vue.vModelCheckbox, _ctx.computedValue]]), vue.createVNode("span", {
class: _ctx.checkClasses
}, [vue.createVNode("span", {
class: _ctx.checkSwitchClasses
}, null, 2
/* CLASS */
)], 2
/* CLASS */
), vue.createVNode("span", {
id: _ctx.ariaLabelledby,
class: _ctx.labelClasses
}, [vue.renderSlot(_ctx.$slots, "default")], 10
/* CLASS, PROPS */
, ["id"])], 34
/* CLASS, HYDRATE_EVENTS */
);
}
script.render = render;
script.__file = "src/components/switch/Switch.vue";
exports.script = script;