@nextcloud/vue
Version:
Nextcloud vue components
885 lines (884 loc) • 27.8 kB
JavaScript
import '../assets/NcCheckboxRadioSwitch-C_70VMQr.css';
import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, resolveComponent, normalizeClass, renderSlot, createBlock, resolveDynamicComponent, toHandlers, withCtx, createVNode, createSlots, createTextVNode, onMounted, computed, useCssVars } from "vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
import { N as NcLoadingIcon } from "./NcLoadingIcon-b_ajZ_nQ.mjs";
import { r as register, q as n, a as t } from "./_l10n-DrTiip5c.mjs";
import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
import { u as useInsideRadioGroup } from "./useNcRadioGroup-DaZbEKbf.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$8 = ["aria-hidden", "aria-label"];
const _hoisted_2$7 = ["fill", "width", "height"];
const _hoisted_3$7 = { 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$7, [
$props.title ? (openBlock(), createElementBlock("title", _hoisted_4$6, toDisplayString($props.title), 1)) : createCommentVNode("", true)
])
], 8, _hoisted_2$7))
], 16, _hoisted_1$8);
}
const CheckboxBlankOutline = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
const _sfc_main$7 = {
name: "CheckboxMarkedIcon",
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: "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$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 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$6, [
$props.title ? (openBlock(), createElementBlock("title", _hoisted_4$5, toDisplayString($props.title), 1)) : createCommentVNode("", true)
])
], 8, _hoisted_2$6))
], 16, _hoisted_1$7);
}
const CheckboxMarked = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
const _sfc_main$6 = {
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$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 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$4, toDisplayString($props.title), 1)) : createCommentVNode("", true)
])
], 8, _hoisted_2$5))
], 16, _hoisted_1$6);
}
const MinusBox = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
const _sfc_main$5 = {
name: "RadioboxBlankIcon",
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: "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$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-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$4, [
$props.title ? (openBlock(), createElementBlock("title", _hoisted_4$3, toDisplayString($props.title), 1)) : createCommentVNode("", true)
])
], 8, _hoisted_2$4))
], 16, _hoisted_1$5);
}
const RadioboxBlank = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
const _sfc_main$4 = {
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$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-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$2, toDisplayString($props.title), 1)) : createCommentVNode("", true)
])
], 8, _hoisted_2$3))
], 16, _hoisted_1$4);
}
const RadioboxMarked = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
const _sfc_main$3 = {
name: "ToggleSwitchIcon",
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: "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$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-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$1, toDisplayString($props.title), 1)) : createCommentVNode("", true)
])
], 8, _hoisted_2$2))
], 16, _hoisted_1$3);
}
const ToggleSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
const _sfc_main$2 = {
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 = { 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-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, toDisplayString($props.title), 1)) : createCommentVNode("", true)
])
], 8, _hoisted_2$1))
], 16, _hoisted_1$2);
}
const ToggleSwitchOff = /* @__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
*/
iconSize: {
type: Number,
default: 24
},
/**
* Label id attribute
*/
labelId: {
type: String,
required: true
},
/**
* Description id attribute
*/
descriptionId: {
type: String,
required: true
}
},
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;
}
}
};
const _hoisted_1$1 = {
key: 0,
class: "checkbox-content__wrapper"
};
const _hoisted_2 = ["id"];
const _hoisted_3 = ["id"];
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", {
"checkbox-content__icon--checked": $props.isChecked,
"checkbox-content__icon--has-description": !$options.isButtonType && _ctx.$slots.description,
[$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.iconSize
}, null, 8, ["size"])) : createCommentVNode("", true)
], true)
], 2),
_ctx.$slots.default || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_1$1, [
_ctx.$slots.default ? (openBlock(), createElementBlock("span", {
key: 0,
id: $props.labelId,
class: normalizeClass(["checkbox-content__text", $props.textClass])
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
], 10, _hoisted_2)) : createCommentVNode("", true),
!$options.isButtonType && _ctx.$slots.description ? (openBlock(), createElementBlock("span", {
key: 1,
id: $props.descriptionId,
class: "checkbox-content__description"
}, [
renderSlot(_ctx.$slots, "description", {}, void 0, true)
], 8, _hoisted_3)) : createCommentVNode("", true)
])) : createCommentVNode("", true)
], 2);
}
const NcCheckboxContent = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-a1ac280f"]]);
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-" + createElementId(),
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
*
* @deprecated - Use `NcRadioGroup` instead
*/
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'}
* @deprecated - Use `NcRadioGroup` instead
*/
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: ""
},
/**
* Description
*
* This is unsupported when using button has type.
*/
description: {
type: String,
default: null
}
},
emits: ["update:modelValue"],
setup(props, { emit }) {
const radioGroup = useInsideRadioGroup();
onMounted(() => radioGroup?.value.register(false));
const internalType = computed(() => radioGroup?.value ? TYPE_RADIO : props.type);
const internalModelValue = computed({
get() {
if (radioGroup?.value) {
return radioGroup.value.modelValue;
}
return props.modelValue;
},
set(value) {
if (radioGroup?.value) {
radioGroup.value.onUpdate(value);
} else {
emit("update:modelValue", value);
}
}
});
return {
internalType,
internalModelValue,
labelId: createElementId(),
descriptionId: createElementId()
};
},
computed: {
isButtonType() {
return this.internalType === 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
};
},
iconSize() {
return this.internalType === TYPE_SWITCH ? 36 : 20;
},
cssIconSize() {
return this.iconSize + "px";
},
cssIconHeight() {
return this.internalType === TYPE_SWITCH ? "16px" : this.cssIconSize;
},
/**
* 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.internalType)) {
return this.internalType;
}
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.internalModelValue)) {
return [...this.internalModelValue].indexOf(this.value) > -1;
}
return this.internalModelValue === this.value;
}
return this.internalModelValue === true;
},
hasIndeterminate() {
return [
TYPE_CHECKBOX,
TYPE_RADIO
].includes(this.inputType);
}
},
mounted() {
if (this.name && this.internalType === TYPE_CHECKBOX) {
if (!Array.isArray(this.internalModelValue)) {
throw new Error("When using groups of checkboxes, the updated value will be an array.");
}
}
if (this.name && this.internalType === TYPE_SWITCH) {
throw new Error("Switches are not made to be used for data sets. Please use checkboxes instead.");
}
if (typeof this.internalModelValue !== "boolean" && this.internalType === 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.internalType === TYPE_RADIO) {
this.internalModelValue = this.value;
return;
}
if (this.internalType === TYPE_SWITCH) {
this.internalModelValue = !this.isChecked;
return;
}
if (typeof this.internalModelValue === "boolean") {
this.internalModelValue = !this.internalModelValue;
return;
}
const values = this.getInputsSet().filter((input) => input.checked).map((input) => input.value);
if (values.includes(this.value)) {
this.internalModelValue = values.filter((v) => v !== this.value);
} else {
this.internalModelValue = [...values, this.value];
}
},
/**
* Get the input set based on this name
*
* @return {Node[]}
*/
getInputsSet() {
return [...document.getElementsByName(this.name)];
}
}
};
const __injectCSSVars__ = () => {
useCssVars((_ctx) => ({
"65a7082e": _ctx.cssIconSize,
"20f7d30f": _ctx.cssIconHeight
}));
};
const __setup__ = _sfc_main.setup;
_sfc_main.setup = __setup__ ? (props, ctx) => {
__injectCSSVars__();
return __setup__(props, ctx);
} : __injectCSSVars__;
const _hoisted_1 = ["id", "aria-labelledby", "aria-describedby", "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-" + $setup.internalType]: $setup.internalType,
"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: $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 ? $setup.labelId : null,
"aria-describedby": !$options.isButtonType && ($props.description || _ctx.$slots.description) ? $setup.descriptionId : 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: $setup.internalType,
indeterminate: $options.hasIndeterminate ? $props.indeterminate : false,
"button-variant": $props.buttonVariant,
"is-checked": $options.isChecked,
loading: $props.loading,
"label-id": $setup.labelId,
"description-id": $setup.descriptionId,
"icon-size": $options.iconSize,
onClick: $options.onToggle
}, createSlots({
icon: withCtx(() => [
renderSlot(_ctx.$slots, "icon", {}, void 0, true)
]),
_: 2
}, [
_ctx.$slots.description || $props.description ? {
name: "description",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "description", {}, () => [
createTextVNode(toDisplayString($props.description), 1)
], true)
]),
key: "0"
} : void 0,
!!_ctx.$slots.default ? {
name: "default",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
]),
key: "1"
} : void 0
]), 1032, ["id", "type", "indeterminate", "button-variant", "is-checked", "loading", "label-id", "description-id", "icon-size", "onClick"])
]),
_: 3
}, 16, ["id", "aria-label", "class", "style", "type"]);
}
const NcCheckboxRadioSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0dcb138a"]]);
export {
NcCheckboxRadioSwitch as N
};
//# sourceMappingURL=NcCheckboxRadioSwitch-BCSKF7Tk.mjs.map