tass-ui
Version:
A high quality UI Toolkit built on Vue.js3+.
89 lines (88 loc) • 3.37 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../../../theme-chalk/src/switch.scss.js");
const _hoisted_1 = ["onClick", "size"];
const _hoisted_2 = ["name", "value"];
const _hoisted_3 = { key: 0 };
const __default__ = {
name: "tasSwitch"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: {
name: null,
disabled: { type: Boolean, default: false },
modelValue: { type: [String, Number, Boolean] },
onswitchText: null,
unswitchText: null,
onswitchColor: null,
unswitchColor: null,
onswitchValue: { type: [String, Number, Boolean], default: true },
unswitchValue: { type: [String, Number, Boolean], default: false },
size: { default: "md" },
loadingIcon: { default: "tas-icon-loading-one" },
loading: { type: Boolean }
},
emits: ["update:modelValue", "change"],
setup(__props, { emit }) {
const props = __props;
const isActive = vue.computed({
get() {
return props.modelValue === props.onswitchValue;
},
set(val) {
if (val) {
emit("change", props.onswitchValue);
emit("update:modelValue", props.onswitchValue);
} else {
emit("change", props.unswitchValue);
emit("update:modelValue", props.unswitchValue);
}
}
});
const handleClick = () => {
if (!props.disabled) {
isActive.value = !isActive.value;
}
};
const styles = vue.computed(() => {
return {
"background-color": isActive.value ? props.onswitchColor : props.unswitchColor
};
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("span", {
onClick: vue.withModifiers(handleClick, ["stop"]),
class: "tas-switch-container",
size: __props.size
}, [
vue.createElementVNode("input", {
class: "tas-switch-input",
name: __props.name,
value: __props.modelValue
}, null, 8, _hoisted_2),
vue.createElementVNode("div", {
class: vue.normalizeClass(["tas-unselect tas-form-switch", {
"tas-form-onswitch": vue.unref(isActive),
"tas-switch-disabled": __props.disabled
}]),
style: vue.normalizeStyle(vue.unref(styles))
}, [
__props.onswitchText || __props.unswitchText ? (vue.openBlock(), vue.createElementBlock("em", _hoisted_3, vue.toDisplayString(vue.unref(isActive) == true ? __props.onswitchText : __props.unswitchText), 1)) : vue.createCommentVNode("", true),
vue.createElementVNode("span", null, [
vue.createElementVNode("div", null, [
__props.loading ? (vue.openBlock(), vue.createElementBlock("i", {
key: 0,
class: vue.normalizeClass(["tas-icon tas-anim tas-anim-rotate tas-anim-loop", __props.loadingIcon])
}, null, 2)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.unref(isActive) ? vue.renderSlot(_ctx.$slots, "onswitch-icon", { key: 0 }) : vue.renderSlot(_ctx.$slots, "unswitch-icon", { key: 1 })
], 64))
])
])
], 6)
], 8, _hoisted_1);
};
}
});
exports.default = _sfc_main;