@dialpad/dialtone/dist/vue3/lib/toggle/toggle.js

Dialpad's Dialtone design system monorepo

import { addClassStyleAttrs as e, getUniqueString as t, hasSlotContent as n, removeClassStyleAttrs as r } from "../../common/utils/index.js";
import { t as i } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { TOGGLE_CHECKED_VALUES as a, TOGGLE_SIZE_MODIFIERS as o } from "./toggle-constants.js";
import { createCommentVNode as s, createElementBlock as c, createElementVNode as l, mergeProps as u, openBlock as d, renderSlot as f, warn as p } from "vue";
//#region components/toggle/toggle.vue
var m = {
	compatConfig: { MODE: 3 },
	name: "DtToggle",
	inheritAttrs: !1,
	props: {
		id: {
			type: String,
			default() {
				return t();
			}
		},
		disabled: {
			type: Boolean,
			default: !1
		},
		modelValue: {
			type: [Boolean, String],
			default: !1,
			validator: (e) => a.includes(e)
		},
		toggleOnClick: {
			type: Boolean,
			default: !0
		},
		size: {
			type: String,
			default: "md",
			validator: (e) => Object.keys(o).includes(e)
		},
		showIcon: {
			type: Boolean,
			default: !0
		},
		labelClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		wrapperClass: {
			type: [
				String,
				Array,
				Object
			],
			default: void 0
		},
		labelChildProps: {
			type: Object,
			default: () => ({})
		}
	},
	emits: ["change", "update:modelValue"],
	data() {
		return {
			internalChecked: this.modelValue,
			hasSlotContent: n
		};
	},
	computed: {
		inputListeners() {
			return {
				...r(this.$attrs),
				onClick: () => this.toggleCheckedValue()
			};
		},
		isIndeterminate() {
			return this.internalChecked === "mixed";
		},
		toggleRole() {
			return this.isIndeterminate ? "checkbox" : "switch";
		},
		toggleClasses() {
			return [
				"d-toggle",
				o[this.size],
				{
					"d-toggle--checked": this.internalChecked === !0,
					"d-toggle--disabled": this.disabled,
					"d-toggle--indeterminate": this.isIndeterminate
				}
			];
		}
	},
	watch: { modelValue(e) {
		this.internalChecked = e;
	} },
	mounted() {
		this.runValidations();
	},
	methods: {
		addClassStyleAttrs: e,
		toggleCheckedValue() {
			this.$emit("update:modelValue", !this.internalChecked), this.$emit("change", !this.internalChecked), this.toggleOnClick && (this.internalChecked = !this.internalChecked);
		},
		hasSlotLabel() {
			return !!this.$slots.default;
		},
		runValidations() {
			this.validateInputLabels(this.hasSlotLabel(), this.$attrs["aria-label"]);
		},
		validateInputLabels(e, t) {
			!e && !t && p("You must provide an aria-label when there is no label passed", this);
		}
	}
}, h = ["for"], g = [
	"id",
	"role",
	"aria-checked",
	"disabled",
	"aria-disabled"
], _ = {
	key: 0,
	class: "d-toggle__inner"
};
function v(e, t, n, r, i, a) {
	return d(), c("div", u({ class: ["d-toggle-wrapper", n.wrapperClass] }, a.addClassStyleAttrs(e.$attrs)), [i.hasSlotContent(e.$slots.default) ? (d(), c("label", u({
		key: 0,
		class: n.labelClass,
		for: n.id
	}, n.labelChildProps, { "data-qa": "toggle-label" }), [f(e.$slots, "default")], 16, h)) : s("", !0), l("button", u({
		id: n.id,
		role: a.toggleRole,
		type: "button",
		"aria-checked": i.internalChecked.toString(),
		disabled: n.disabled,
		"aria-disabled": n.disabled.toString(),
		class: a.toggleClasses
	}, a.inputListeners), [n.showIcon ? (d(), c("span", _)) : s("", !0)], 16, g)], 16);
}
var y = /* @__PURE__ */ i(m, [["render", v]]);
//#endregion
export { y as default };

//# sourceMappingURL=toggle.js.map