@nextcloud/vue 9.0.0-alpha.5 → 9.0.0-alpha.7

package/dist/chunks/NcCheckboxRadioSwitch-Ctdu7_UC.mjs

@@ -0,0 +1,800 @@
+import '../assets/NcCheckboxRadioSwitch-jfJIoM4m.css';
+import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, resolveComponent, normalizeClass, renderSlot, createBlock, resolveDynamicComponent, toHandlers, withCtx, createVNode, createSlots } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { N as NcLoadingIcon } from "./NcLoadingIcon-CsMn1bFR.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { r as register, P as n, a as t } from "./_l10n-BEP_UzXI.mjs";
+const _sfc_main$8 = {
+  name: "CheckboxBlankOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$7 = ["aria-hidden", "aria-label"];
+const _hoisted_2$6 = ["fill", "width", "height"];
+const _hoisted_3$6 = { d: "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" };
+const _hoisted_4$6 = { key: 0 };
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon checkbox-blank-outline-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$6, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$6, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$6))
+  ], 16, _hoisted_1$7);
+}
+const CheckboxBlankOutline = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
+const _sfc_main$7 = {
+  name: "MinusBoxIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$6 = ["aria-hidden", "aria-label"];
+const _hoisted_2$5 = ["fill", "width", "height"];
+const _hoisted_3$5 = { d: "M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" };
+const _hoisted_4$5 = { key: 0 };
+function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon minus-box-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$5, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$5, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$5))
+  ], 16, _hoisted_1$6);
+}
+const MinusBox = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+const _sfc_main$6 = {
+  name: "CheckboxMarkedIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$5 = ["aria-hidden", "aria-label"];
+const _hoisted_2$4 = ["fill", "width", "height"];
+const _hoisted_3$4 = { d: "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" };
+const _hoisted_4$4 = { key: 0 };
+function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon checkbox-marked-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$4, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$4, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$4))
+  ], 16, _hoisted_1$5);
+}
+const CheckboxMarked = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
+const _sfc_main$5 = {
+  name: "RadioboxMarkedIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$4 = ["aria-hidden", "aria-label"];
+const _hoisted_2$3 = ["fill", "width", "height"];
+const _hoisted_3$3 = { d: "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z" };
+const _hoisted_4$3 = { key: 0 };
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon radiobox-marked-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$3, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$3, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$3))
+  ], 16, _hoisted_1$4);
+}
+const RadioboxMarked = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
+const _sfc_main$4 = {
+  name: "RadioboxBlankIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$3 = ["aria-hidden", "aria-label"];
+const _hoisted_2$2 = ["fill", "width", "height"];
+const _hoisted_3$2 = { d: "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" };
+const _hoisted_4$2 = { key: 0 };
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon radiobox-blank-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$2, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$2, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$2))
+  ], 16, _hoisted_1$3);
+}
+const RadioboxBlank = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const _sfc_main$3 = {
+  name: "ToggleSwitchOffIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$2 = ["aria-hidden", "aria-label"];
+const _hoisted_2$1 = ["fill", "width", "height"];
+const _hoisted_3$1 = { d: "M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z" };
+const _hoisted_4$1 = { key: 0 };
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon toggle-switch-off-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$1, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$1, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$1))
+  ], 16, _hoisted_1$2);
+}
+const ToggleSwitchOff = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const _sfc_main$2 = {
+  name: "ToggleSwitchIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$1 = ["aria-hidden", "aria-label"];
+const _hoisted_2 = ["fill", "width", "height"];
+const _hoisted_3 = { d: "M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z" };
+const _hoisted_4 = { key: 0 };
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon toggle-switch-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2))
+  ], 16, _hoisted_1$1);
+}
+const ToggleSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const TYPE_CHECKBOX = "checkbox";
+const TYPE_RADIO = "radio";
+const TYPE_SWITCH = "switch";
+const TYPE_BUTTON = "button";
+const _sfc_main$1 = {
+  name: "NcCheckboxContent",
+  components: {
+    NcLoadingIcon
+  },
+  props: {
+    /**
+     * Class for the icon element
+     */
+    iconClass: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * Class for the text element
+     */
+    textClass: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * Type of the input. checkbox, radio, switch, or button.
+     *
+     * Only use button when used in a `tablist` container and the
+     * `tab` role is set.
+     *
+     * @type {'checkbox'|'radio'|'switch'|'button'}
+     */
+    type: {
+      type: String,
+      default: "checkbox",
+      validator: (type) => [
+        TYPE_CHECKBOX,
+        TYPE_RADIO,
+        TYPE_SWITCH,
+        TYPE_BUTTON
+      ].includes(type)
+    },
+    /**
+     * Toggle the alternative button style
+     */
+    buttonVariant: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * True if the entry is checked
+     */
+    isChecked: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Indeterminate state
+     */
+    indeterminate: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Loading state
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Icon size
+     */
+    size: {
+      type: Number,
+      default: 24
+    }
+  },
+  computed: {
+    isButtonType() {
+      return this.type === TYPE_BUTTON;
+    },
+    /**
+     * Returns the proper Material icon depending on the select case
+     *
+     * @return {object}
+     */
+    checkboxRadioIconElement() {
+      if (this.type === TYPE_RADIO) {
+        if (this.isChecked) {
+          return RadioboxMarked;
+        }
+        return RadioboxBlank;
+      }
+      if (this.type === TYPE_SWITCH) {
+        if (this.isChecked) {
+          return ToggleSwitch;
+        }
+        return ToggleSwitchOff;
+      }
+      if (this.indeterminate) {
+        return MinusBox;
+      }
+      if (this.isChecked) {
+        return CheckboxMarked;
+      }
+      return CheckboxBlankOutline;
+    }
+  }
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
+  return openBlock(), createElementBlock("span", {
+    class: normalizeClass(["checkbox-content", {
+      ["checkbox-content-" + $props.type]: true,
+      "checkbox-content--button-variant": $props.buttonVariant,
+      "checkbox-content--has-text": !!_ctx.$slots.default
+    }])
+  }, [
+    createElementVNode("span", {
+      class: normalizeClass({
+        "checkbox-content__icon": true,
+        "checkbox-content__icon--checked": $props.isChecked,
+        [$props.iconClass]: true
+      }),
+      "aria-hidden": true,
+      inert: ""
+    }, [
+      renderSlot(_ctx.$slots, "icon", {
+        checked: $props.isChecked,
+        loading: $props.loading
+      }, () => [
+        $props.loading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : !$props.buttonVariant ? (openBlock(), createBlock(resolveDynamicComponent($options.checkboxRadioIconElement), {
+          key: 1,
+          size: $props.size
+        }, null, 8, ["size"])) : createCommentVNode("", true)
+      ], true)
+    ], 2),
+    _ctx.$slots.default ? (openBlock(), createElementBlock("span", {
+      key: 0,
+      class: normalizeClass(["checkbox-content__text", $props.textClass])
+    }, [
+      renderSlot(_ctx.$slots, "default", {}, void 0, true)
+    ], 2)) : createCommentVNode("", true)
+  ], 2);
+}
+const NcCheckboxContent = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-18de8bed"]]);
+register();
+const _sfc_main = {
+  name: "NcCheckboxRadioSwitch",
+  components: {
+    NcCheckboxContent
+  },
+  // We need to pass attributes to the input element
+  inheritAttrs: false,
+  props: {
+    /**
+     * Unique id attribute of the input
+     */
+    id: {
+      type: String,
+      default: () => "checkbox-radio-switch-" + GenRandomId(),
+      validator: (id) => id.trim() !== ""
+    },
+    /**
+     * Unique id attribute of the wrapper element
+     */
+    wrapperId: {
+      type: String,
+      default: null
+    },
+    /**
+     * Input name. Required for radio, optional for checkbox, and ignored
+     * for button.
+     */
+    name: {
+      type: String,
+      default: null
+    },
+    /**
+     * Required if no text is set.
+     * The aria-label is forwarded to the input or button.
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Type of the input. checkbox, radio, switch, or button.
+     *
+     * Only use button when used in a `tablist` container and the
+     * `tab` role is set.
+     *
+     * @type {'checkbox'|'radio'|'switch'|'button'}
+     */
+    type: {
+      type: String,
+      default: "checkbox",
+      validator: (type) => [
+        TYPE_CHECKBOX,
+        TYPE_RADIO,
+        TYPE_SWITCH,
+        TYPE_BUTTON
+      ].includes(type)
+    },
+    /**
+     * Toggle the alternative button style
+     */
+    buttonVariant: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Are the elements are all direct siblings?
+     * If so they will be grouped horizontally or vertically
+     *
+     * @type {'no'|'horizontal'|'vertical'}
+     */
+    buttonVariantGrouped: {
+      type: String,
+      default: "no",
+      validator: (v) => ["no", "vertical", "horizontal"].includes(v)
+    },
+    /**
+     * Checked state. To be used with `v-model:value`
+     */
+    modelValue: {
+      type: [Boolean, Array, String],
+      default: false
+    },
+    /**
+     * Value to be synced on check
+     */
+    value: {
+      type: String,
+      default: null
+    },
+    /**
+     * Disabled state
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Indeterminate state
+     */
+    indeterminate: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Required state
+     */
+    required: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Loading state
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Wrapping element tag
+     *
+     * When `type` is set to `button` this will be ignored
+     *
+     * Defaults to `span`
+     */
+    wrapperElement: {
+      type: String,
+      default: null
+    },
+    /**
+     * The class(es) to pass to the wrapper / root element of the component
+     */
+    class: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * The style to pass to the wrapper / root element of the component
+     */
+    style: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    isButtonType() {
+      return this.type === TYPE_BUTTON;
+    },
+    computedWrapperElement() {
+      if (this.isButtonType) {
+        return "button";
+      }
+      if (this.wrapperElement !== null) {
+        return this.wrapperElement;
+      }
+      return "span";
+    },
+    listeners() {
+      if (this.isButtonType) {
+        return {
+          click: this.onToggle
+        };
+      }
+      return {
+        change: this.onToggle
+      };
+    },
+    /**
+     * CSS local variables for this component
+     * @return {Record<string, string>}
+     */
+    cssVars() {
+      return {
+        "--icon-size": this.size + "px",
+        "--icon-height": (this.type === TYPE_SWITCH ? 16 : this.size) + "px"
+      };
+    },
+    /**
+     * Icon size
+     *
+     * @return {number}
+     */
+    size() {
+      return this.type === TYPE_SWITCH ? 36 : 24;
+    },
+    /**
+     * Return the input type.
+     * Switch is not an official type
+     *
+     * @return {string}
+     */
+    inputType() {
+      const nativeTypes = [
+        TYPE_CHECKBOX,
+        TYPE_RADIO,
+        TYPE_BUTTON
+      ];
+      if (nativeTypes.includes(this.type)) {
+        return this.type;
+      }
+      return TYPE_CHECKBOX;
+    },
+    /**
+     * Check if that entry is checked
+     * If value is defined, we use that as the checked value
+     * If not, we expect true/false in this.checked
+     *
+     * @return {boolean}
+     */
+    isChecked() {
+      if (this.value !== null) {
+        if (Array.isArray(this.modelValue)) {
+          return [...this.modelValue].indexOf(this.value) > -1;
+        }
+        return this.modelValue === this.value;
+      }
+      return this.modelValue === true;
+    },
+    hasIndeterminate() {
+      return [
+        TYPE_CHECKBOX,
+        TYPE_RADIO
+      ].includes(this.inputType);
+    }
+  },
+  mounted() {
+    if (this.name && this.type === TYPE_CHECKBOX) {
+      if (!Array.isArray(this.modelValue)) {
+        throw new Error("When using groups of checkboxes, the updated value will be an array.");
+      }
+    }
+    if (this.name && this.type === TYPE_SWITCH) {
+      throw new Error("Switches are not made to be used for data sets. Please use checkboxes instead.");
+    }
+    if (typeof this.modelValue !== "boolean" && this.type === TYPE_SWITCH) {
+      throw new Error("Switches can only be used with boolean as modelValue prop.");
+    }
+  },
+  methods: {
+    t,
+    n,
+    onToggle(event) {
+      if (this.disabled || event.target.tagName.toLowerCase() === "a") {
+        return;
+      }
+      if (this.type === TYPE_RADIO) {
+        this.$emit("update:modelValue", this.value);
+        return;
+      }
+      if (this.type === TYPE_SWITCH) {
+        this.$emit("update:modelValue", !this.isChecked);
+        return;
+      }
+      if (typeof this.modelValue === "boolean") {
+        this.$emit("update:modelValue", !this.modelValue);
+        return;
+      }
+      const values = this.getInputsSet().filter((input) => input.checked).map((input) => input.value);
+      if (values.includes(this.value)) {
+        this.$emit("update:modelValue", values.filter((v) => v !== this.value));
+      } else {
+        this.$emit("update:modelValue", [...values, this.value]);
+      }
+    },
+    /**
+     * Get the input set based on this name
+     *
+     * @return {Node[]}
+     */
+    getInputsSet() {
+      return [...document.getElementsByName(this.name)];
+    }
+  }
+};
+const _hoisted_1 = ["id", "aria-labelledby", "aria-label", "disabled", "type", "value", "checked", ".indeterminate", "required", "name"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcCheckboxContent = resolveComponent("NcCheckboxContent");
+  return openBlock(), createBlock(resolveDynamicComponent($options.computedWrapperElement), mergeProps({
+    id: $props.wrapperId ?? ($options.isButtonType ? $props.id : null),
+    "aria-label": $options.isButtonType && $props.ariaLabel ? $props.ariaLabel : void 0,
+    class: ["checkbox-radio-switch", [
+      _ctx.$props.class,
+      {
+        ["checkbox-radio-switch-" + $props.type]: $props.type,
+        "checkbox-radio-switch--checked": $options.isChecked,
+        "checkbox-radio-switch--disabled": $props.disabled,
+        "checkbox-radio-switch--indeterminate": $options.hasIndeterminate ? $props.indeterminate : false,
+        "checkbox-radio-switch--button-variant": $props.buttonVariant,
+        "checkbox-radio-switch--button-variant-v-grouped": $props.buttonVariant && $props.buttonVariantGrouped === "vertical",
+        "checkbox-radio-switch--button-variant-h-grouped": $props.buttonVariant && $props.buttonVariantGrouped === "horizontal",
+        "button-vue": $options.isButtonType
+      }
+    ]],
+    style: [$options.cssVars, $props.style],
+    type: $options.isButtonType ? "button" : null
+  }, $options.isButtonType ? _ctx.$attrs : {}, toHandlers($options.isButtonType ? $options.listeners : {})), {
+    default: withCtx(() => [
+      !$options.isButtonType ? (openBlock(), createElementBlock("input", mergeProps({
+        key: 0,
+        id: $props.id,
+        "aria-labelledby": !$options.isButtonType && !$props.ariaLabel ? `${$props.id}-label` : null,
+        "aria-label": $props.ariaLabel || void 0,
+        class: "checkbox-radio-switch__input",
+        disabled: $props.disabled,
+        type: $options.inputType,
+        value: $props.value,
+        checked: $options.isChecked,
+        ".indeterminate": $options.hasIndeterminate ? $props.indeterminate : null,
+        required: $props.required,
+        name: $props.name
+      }, _ctx.$attrs, toHandlers($options.listeners, true)), null, 48, _hoisted_1)) : createCommentVNode("", true),
+      createVNode(_component_NcCheckboxContent, {
+        id: !$options.isButtonType ? `${$props.id}-label` : void 0,
+        class: "checkbox-radio-switch__content",
+        "icon-class": "checkbox-radio-switch__icon",
+        "text-class": "checkbox-radio-switch__text",
+        type: $props.type,
+        indeterminate: $options.hasIndeterminate ? $props.indeterminate : false,
+        "button-variant": $props.buttonVariant,
+        "is-checked": $options.isChecked,
+        loading: $props.loading,
+        size: $options.size,
+        onClick: $options.onToggle
+      }, createSlots({
+        icon: withCtx(() => [
+          renderSlot(_ctx.$slots, "icon", {}, void 0, true)
+        ]),
+        _: 2
+      }, [
+        !!_ctx.$slots.default ? {
+          name: "default",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["id", "type", "indeterminate", "button-variant", "is-checked", "loading", "size", "onClick"])
+    ]),
+    _: 3
+  }, 16, ["id", "aria-label", "class", "style", "type"]);
+}
+const NcCheckboxRadioSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-64447fbc"]]);
+export {
+  NcCheckboxRadioSwitch as N
+};