UNPKG

@nextcloud/vue

Version:
123 lines (122 loc) 4 kB
import '../assets/NcActionCheckbox-wD8m_a8-.css'; import { h as mdiCheckboxMarked, i as mdiCheckboxBlankOutline } from "./mdi-CpchYUUV.mjs"; import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withDirectives, vModelCheckbox, createVNode, toDisplayString, useModel } from "vue"; import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-g8ubWhoz.mjs"; import { A as ActionGlobalMixin } from "./actionGlobal-BZFdtdJL.mjs"; import { c as createElementId } from "./createElementId-DhjFt1I9.mjs"; import { a as NC_ACTIONS_IS_SEMANTIC_MENU } from "./useNcActions-BzPO2c4h.mjs"; import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs"; const _sfc_main = { name: "NcActionCheckbox", components: { NcIconSvgWrapper }, mixins: [ActionGlobalMixin], inject: { isInSemanticMenu: { from: NC_ACTIONS_IS_SEMANTIC_MENU, default: false } }, props: { /** * id attribute of the checkbox element */ id: { type: String, default: () => "action-" + createElementId(), validator: (id) => id.trim() !== "" }, /** * checked state of the the checkbox element */ modelValue: { type: Boolean, default: false }, /** * value of the checkbox input */ value: { type: [String, Number], default: "" }, /** * disabled state of the checkbox element */ disabled: { type: Boolean, default: false } }, emits: [ /** Native change event */ "change", /** Checkbox is checked */ "check", /** Checkbox is unchecked */ "uncheck", /** Model value changed */ "update:modelValue" ], setup(props) { const model = useModel(props, "modelValue"); return { model, mdiCheckboxBlankOutline, mdiCheckboxMarked }; }, methods: { onChange(event) { this.$emit("change", event); if (event.target.checked) { this.$emit("check"); } else { this.$emit("uncheck"); } } } }; const _hoisted_1 = ["role"]; const _hoisted_2 = ["role", "aria-checked"]; const _hoisted_3 = { class: "action-checkbox__icon" }; const _hoisted_4 = ["id", "value", "disabled"]; const _hoisted_5 = { class: "action-checkbox__text" }; function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) { const _component_NcIconSvgWrapper = resolveComponent("NcIconSvgWrapper"); return openBlock(), createElementBlock("li", { class: normalizeClass(["action", { "action--disabled": $props.disabled }]), role: $options.isInSemanticMenu && "presentation" }, [ createElementVNode("label", { class: "action-checkbox", role: $options.isInSemanticMenu && "menuitemcheckbox", "aria-checked": $options.isInSemanticMenu && $setup.model.toString() }, [ createElementVNode("span", _hoisted_3, [ withDirectives(createElementVNode("input", { id: $props.id, "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.model = $event), type: "checkbox", class: normalizeClass(["action-checkbox__input", { focusable: !$props.disabled }]), value: $props.value, disabled: $props.disabled, onChange: _cache[1] || (_cache[1] = (...args) => $options.onChange && $options.onChange(...args)) }, null, 42, _hoisted_4), [ [vModelCheckbox, $setup.model] ]), createVNode(_component_NcIconSvgWrapper, { path: $setup.model ? $setup.mdiCheckboxMarked : $setup.mdiCheckboxBlankOutline, size: 20 }, null, 8, ["path"]) ]), createElementVNode("span", _hoisted_5, toDisplayString(_ctx.text), 1) ], 8, _hoisted_2) ], 10, _hoisted_1); } const NcActionCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2947bc3b"]]); export { NcActionCheckbox as N }; //# sourceMappingURL=NcActionCheckbox-DBqiK-AZ.mjs.map