@nextcloud/vue
Version:
Nextcloud vue components
76 lines (75 loc) • 3.04 kB
JavaScript
import '../assets/NcRadioGroupButton-DRZ1_-yY.css';
import { defineComponent, onMounted, computed, createElementBlock, openBlock, normalizeClass, unref, createCommentVNode, createElementVNode, renderSlot, toDisplayString } from "vue";
import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
import { u as useNcFormBox } from "./useNcFormBox-DA9iwXWY.mjs";
import { u as useInsideRadioGroup } from "./useNcRadioGroup-DaZbEKbf.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
const _hoisted_1 = ["id"];
const _hoisted_2 = ["aria-labelledby", "aria-label", "checked", "value"];
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "NcRadioGroupButton",
props: {
ariaLabel: {},
label: {},
value: {}
},
setup(__props) {
const props = __props;
const labelId = createElementId();
const radioGroup = useInsideRadioGroup();
const { formBoxItemClass } = useNcFormBox();
onMounted(() => radioGroup.value.register(true));
const isChecked = computed(() => radioGroup?.value.modelValue === props.value);
function onUpdate() {
radioGroup.value.onUpdate(props.value);
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass([{
[_ctx.$style.radioGroupButton_active]: isChecked.value
}, _ctx.$style.radioGroupButton, unref(formBoxItemClass)]),
onClick: onUpdate
}, [
_ctx.$slots.icon ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(_ctx.$style.radioGroupButton__icon)
}, [
renderSlot(_ctx.$slots, "icon")
], 2)) : createCommentVNode("", true),
_ctx.label ? (openBlock(), createElementBlock("div", {
key: 1,
id: unref(labelId),
class: normalizeClass(_ctx.$style.radioGroupButton__label)
}, toDisplayString(_ctx.label), 11, _hoisted_1)) : createCommentVNode("", true),
createElementVNode("input", {
"aria-labelledby": _ctx.label ? unref(labelId) : void 0,
"aria-label": _ctx.label ? void 0 : _ctx.ariaLabel,
class: "hidden-visually",
checked: isChecked.value,
type: "radio",
value: _ctx.value,
onInput: onUpdate
}, null, 40, _hoisted_2)
], 2);
};
}
});
const radioGroupButton = "_radioGroupButton_1euqq_20";
const radioGroupButton__label = "_radioGroupButton__label_1euqq_46";
const radioGroupButton__icon = "_radioGroupButton__icon_1euqq_49";
const radioGroupButton_active = "_radioGroupButton_active_1euqq_62";
const style0 = {
"material-design-icon": "_material-design-icon_1euqq_12",
radioGroupButton,
radioGroupButton__label,
radioGroupButton__icon,
radioGroupButton_active
};
const cssModules = {
"$style": style0
};
const NcRadioGroupButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
export {
NcRadioGroupButton as N
};
//# sourceMappingURL=NcRadioGroupButton-CDA5i7Dq.mjs.map