@nextcloud/vue
Version:
Nextcloud vue components
98 lines (97 loc) • 3.81 kB
JavaScript
import '../assets/NcFormBoxSwitch-BmyNQCbA.css';
import { defineComponent, mergeModels, useModel, watch, createBlock, openBlock, unref, createSlots, withCtx, withDirectives, createVNode, createElementVNode, normalizeClass, vModelCheckbox, renderSlot, createTextVNode, toDisplayString } from "vue";
import { k as mdiToggleSwitch, l as mdiToggleSwitchOff } from "./mdi-XFJRiRqJ.mjs";
import { N as NcFormBoxItem } from "./NcFormBoxItem-BBP76Mkf.mjs";
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
const _hoisted_1 = ["id", "aria-describedby", "disabled"];
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "NcFormBoxSwitch",
props: /* @__PURE__ */ mergeModels({
label: { default: () => void 0 },
description: { default: () => void 0 },
disabled: { type: Boolean, default: false }
}, {
"modelValue": { type: Boolean, ...{ required: true } },
"modelModifiers": {}
}),
emits: /* @__PURE__ */ mergeModels(["enable", "disable"], ["update:modelValue"]),
setup(__props, { emit: __emit }) {
const modelValue = useModel(__props, "modelValue");
const emit = __emit;
const inputId = createElementId();
watch(modelValue, () => {
if (modelValue.value) {
emit("enable");
} else {
emit("disable");
}
}, {
// defineModel emits update:modelValue synchronously
// Watching it synchronously to emit the enable/disable events together with the update:modelValue event
flush: "sync"
});
return (_ctx, _cache) => {
return openBlock(), createBlock(NcFormBoxItem, {
tag: "label",
for: unref(inputId)
}, createSlots({
icon: withCtx(({ descriptionId }) => [
withDirectives(createElementVNode("input", {
id: unref(inputId),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
class: normalizeClass(_ctx.$style.formBoxSwitch__input),
type: "checkbox",
role: "switch",
"aria-describedby": descriptionId,
disabled: _ctx.disabled
}, null, 10, _hoisted_1), [
[vModelCheckbox, modelValue.value]
]),
createVNode(NcIconSvgWrapper, {
path: modelValue.value ? unref(mdiToggleSwitch) : unref(mdiToggleSwitchOff),
class: normalizeClass(_ctx.$style.formBoxSwitch__icon),
size: 34,
inline: ""
}, null, 8, ["path", "class"])
]),
_: 2
}, [
_ctx.$slots.default || _ctx.label ? {
name: "default",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "default", {}, () => [
createTextVNode(toDisplayString(_ctx.label), 1)
])
]),
key: "0"
} : void 0,
_ctx.$slots.description || _ctx.description ? {
name: "description",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "description", {}, () => [
createTextVNode(toDisplayString(_ctx.description), 1)
])
]),
key: "1"
} : void 0
]), 1032, ["for"]);
};
}
});
const formBoxSwitch__input = "_formBoxSwitch__input_hjv1a_20";
const formBoxSwitch__icon = "_formBoxSwitch__icon_hjv1a_34";
const style0 = {
"material-design-icon": "_material-design-icon_hjv1a_12",
formBoxSwitch__input,
formBoxSwitch__icon
};
const cssModules = {
"$style": style0
};
const NcFormBoxSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
export {
NcFormBoxSwitch as N
};
//# sourceMappingURL=NcFormBoxSwitch-UJwYMQPm.mjs.map