@nextcloud/vue
Version:
Nextcloud vue components
138 lines (137 loc) • 4.08 kB
JavaScript
require('../assets/NcActionCheckbox-Dan0EvGm.css');
"use strict";
const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
const actionGlobal = require("./actionGlobal-L0Ls8tPJ.cjs");
const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
const _sfc_main = {
name: "NcActionCheckbox",
mixins: [actionGlobal.ActionGlobalMixin],
inject: {
isInSemanticMenu: {
from: "NcActions:isSemanticMenu",
default: false
}
},
model: {
prop: "modelValue",
event: "update:modelValue"
},
props: {
/**
* id attribute of the checkbox element
*/
id: {
type: String,
default: () => "action-" + GenRandomId.GenRandomId(),
validator: (id) => id.trim() !== ""
},
/**
* Removed in v9 - use `modelValue` (`v-model`) instead
* @deprecated
*/
checked: {
type: Boolean,
default: void 0
},
/**
* 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: [
"change",
"check",
"uncheck",
/**
* Removed in v9 - use `update:modelValue` (`v-model`) instead
* @deprecated
*/
"update:checked",
/**
* Emitted when the checkbox state is changed
* @type {boolean}
*/
"update:modelValue",
/** Same as update:modelValue for Vue 2 compatibility */
"update:model-value"
],
setup() {
const model = useModelMigration.useModelMigration("checked", "update:checked");
return {
model
};
},
computed: {
/**
* determines if the action is focusable
*
* @return {boolean} is the action focusable ?
*/
isFocusable() {
return !this.disabled;
},
/**
* aria-checked attribute for role="menuitemcheckbox"
*
* @return {'true'|'false'|undefined} aria-checked value if needed
*/
ariaChecked() {
if (this.isInSemanticMenu) {
return this.model ? "true" : "false";
}
return void 0;
}
},
methods: {
checkInput(event) {
this.$refs.label.click();
},
onChange(event) {
this.model = this.$refs.checkbox.checked;
this.$emit("change", event);
if (this.$refs.checkbox.checked) {
this.$emit("check");
} else {
this.$emit("uncheck");
}
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("li", { staticClass: "action", class: { "action--disabled": _vm.disabled }, attrs: { "role": _vm.isInSemanticMenu && "presentation" } }, [_c("span", { staticClass: "action-checkbox", attrs: { "role": _vm.isInSemanticMenu && "menuitemcheckbox", "aria-checked": _vm.ariaChecked } }, [_c("input", { ref: "checkbox", staticClass: "checkbox action-checkbox__checkbox", class: { focusable: _vm.isFocusable }, attrs: { "id": _vm.id, "disabled": _vm.disabled, "type": "checkbox" }, domProps: { "checked": _vm.model, "value": _vm.value }, on: { "keydown": function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
$event.preventDefault();
return _vm.checkInput.apply(null, arguments);
}, "change": _vm.onChange } }), _c("label", { ref: "label", staticClass: "action-checkbox__label", attrs: { "for": _vm.id } }, [_vm._v(_vm._s(_vm.text))]), _vm._e()], 2)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"96242645"
);
const NcActionCheckbox = __component__.exports;
exports.NcActionCheckbox = NcActionCheckbox;