@nextcloud/vue/dist/chunks/NcFormBoxSwitch.mjs

Nextcloud vue components

import '../assets/NcFormBoxSwitch.css';
import { defineComponent, useModel, watch, openBlock, createBlock, unref, createSlots, withCtx, withDirectives, createElementVNode, normalizeClass, vModelCheckbox, createVNode, renderSlot, createTextVNode, toDisplayString, mergeModels } from "vue";
import { N as NcFormBoxItem } from "./NcFormBoxItem.mjs";
import { N as NcIconToggleSwitch } from "./NcIconToggleSwitch.mjs";
import { c as createElementId } from "./createElementId.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper.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: __props.disabled
          }, null, 10, _hoisted_1), [
            [vModelCheckbox, modelValue.value]
          ]),
          createVNode(NcIconToggleSwitch, {
            checked: modelValue.value,
            inline: ""
          }, null, 8, ["checked"])
        ]),
        _: 2
      }, [
        _ctx.$slots.default || __props.label ? {
          name: "default",
          fn: withCtx(() => [
            renderSlot(_ctx.$slots, "default", {}, () => [
              createTextVNode(toDisplayString(__props.label), 1)
            ])
          ]),
          key: "0"
        } : void 0,
        _ctx.$slots.description || __props.description ? {
          name: "description",
          fn: withCtx(() => [
            renderSlot(_ctx.$slots, "description", {}, () => [
              createTextVNode(toDisplayString(__props.description), 1)
            ])
          ]),
          key: "1"
        } : void 0
      ]), 1032, ["for"]);
    };
  }
});
const formBoxSwitch__input = "_formBoxSwitch__input_zScTH";
const style0 = {
  "material-design-icon": "_material-design-icon_oM2UW",
  formBoxSwitch__input
};
const cssModules = {
  "$style": style0
};
const NcFormBoxSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
export {
  NcFormBoxSwitch as N
};
//# sourceMappingURL=NcFormBoxSwitch.mjs.map