vue-toggles
Version:
A highly customizable and accessible toggle component for Vue.js 3
90 lines (89 loc) • 4.67 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".vue-toggles{--toggle-transition-duration: .2s;--toggle-transition-timing: ease;display:flex;align-items:center;border-radius:9999px;overflow:hidden;transition:background-color var(--toggle-transition-duration) var(--toggle-transition-timing),width var(--toggle-transition-duration) var(--toggle-transition-timing),height var(--toggle-transition-duration) var(--toggle-transition-timing)}.vue-toggles__dot{position:relative;display:flex;align-items:center;border-radius:9999px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;transition:margin ease .2s}.vue-toggles__text{position:absolute;font-family:inherit;-webkit-user-select:none;user-select:none;white-space:nowrap}@media (prefers-reduced-motion){.vue-toggles,.vue-toggles *,.vue-toggles *:before,.vue-toggles *:after{animation:none!important;transition:none!important;transition-duration:none!important}}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
import { defineComponent as k, ref as y, computed as d, watchEffect as $, openBlock as c, createElementBlock as r, normalizeStyle as n, withKeys as h, withModifiers as f, createElementVNode as w, toDisplayString as T, createCommentVNode as b } from "vue";
const C = ["aria-checked", "aria-readonly", "onKeyup"], B = 8, s = 5, o = 3, V = /* @__PURE__ */ k({
__name: "VueToggles",
props: {
modelValue: { type: Boolean, default: void 0 },
value: { type: Boolean, default: void 0 },
disabled: { type: Boolean },
reverse: { type: Boolean },
width: { default: 75 },
height: { default: 25 },
dotColor: { default: "#ffffff" },
dotSize: { default: 0 },
uncheckedBg: { default: "#939393" },
checkedBg: { default: "#5850ec" },
uncheckedTextColor: { default: "#ffffff" },
checkedTextColor: { default: "#ffffff" },
uncheckedText: { default: "" },
checkedText: { default: "" },
fontSize: { default: 12 },
fontWeight: { default: "normal" }
},
emits: ["update:modelValue", "click"],
setup(p, { emit: g }) {
const e = p, u = g, l = y(e.value || e.modelValue), v = d(() => ({
width: `${e.width}px`,
height: `${e.height}px`,
background: l.value ? e.checkedBg : e.uncheckedBg,
opacity: e.disabled ? "0.5" : "1",
cursor: e.disabled ? "not-allowed" : "pointer"
})), m = d(() => {
const t = e.dotSize || e.height - B, a = {
background: e.dotColor,
width: `${t}px`,
height: `${t}px`,
"min-width": `${t}px`,
"min-height": `${t}px`,
"margin-left": l.value ? `${e.width - t - o}px` : `${s}px`
};
return l.value ? e.reverse ? a["margin-left"] = `${s}px` : a["margin-left"] = `${e.width - t - o}px` : e.reverse ? a["margin-left"] = `${e.width - t - o}px` : a["margin-left"] = `${s}px`, a;
}), x = d(() => {
const t = {
"font-weight": e.fontWeight,
"font-size": `${e.fontSize}px`,
color: l.value && !e.disabled ? e.checkedTextColor : e.uncheckedTextColor,
right: l.value ? `${e.height - o}px` : "auto",
left: l.value ? "auto" : `${e.height - o}px`
};
return l.value ? e.reverse ? (t.left = `${e.height - o}px`, t.right = "auto") : (t.right = `${e.height - o}px`, t.left = "auto") : e.reverse ? (t.right = `${e.height - o}px`, t.left = "auto") : (t.left = `${e.height - o}px`, t.right = "auto"), t;
}), i = () => {
e.disabled || (l.value = !l.value, u("update:modelValue", l.value), u("click"));
};
return $(() => {
e.value !== void 0 && e.modelValue !== void 0 && console.warn(
'Avoid using both "v-model" and ":value" at the same time. Choose one for better predictability.'
), l.value = e.value || e.modelValue;
}), (t, a) => (c(), r("span", {
class: "vue-toggles",
style: n(v.value),
role: "switch",
tabindex: "0",
"aria-checked": l.value,
"aria-readonly": t.disabled,
"test-id": "toggle",
onKeyup: [
h(f(i, ["prevent"]), ["enter"]),
h(f(i, ["prevent"]), ["space"])
],
onClick: i
}, [
w("span", {
"aria-hidden": "true",
style: n(m.value),
class: "vue-toggles__dot",
"test-id": "dot"
}, [
t.checkedText || t.uncheckedText ? (c(), r("span", {
key: 0,
class: "vue-toggles__text",
style: n(x.value),
"test-id": "text"
}, T(l.value ? t.checkedText : t.uncheckedText), 5)) : b("", !0)
], 4)
], 44, C));
}
});
export {
V as default
};