@nextcloud/vue
Version:
Nextcloud vue components
184 lines (183 loc) • 7.33 kB
JavaScript
require('../assets/NcActionButton-DwJihiLc.css');
"use strict";
const mdi = require("./mdi-BBwE-MZC.cjs");
const NcIconSvgWrapper = require("./NcIconSvgWrapper-D-aKMbf3.cjs");
const actionText = require("./actionText-D2-z0ud3.cjs");
const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
const _sfc_main = {
name: "NcActionButton",
components: {
NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper
},
mixins: [actionText.ActionTextMixin],
inject: {
isInSemanticMenu: {
from: "NcActions:isSemanticMenu",
default: false
}
},
props: {
/**
* @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
* @todo Add a check in @nextcloud/vue 9 that this prop is not provided,
* otherwise root element will inherit incorrect aria-hidden.
*/
ariaHidden: {
type: Boolean,
// eslint-disable-next-line vue/no-boolean-default
default: null
},
/**
* disabled state of the action button
*/
disabled: {
type: Boolean,
default: false
},
/**
* If this is a menu, a chevron icon will
* be added at the end of the line
*/
isMenu: {
type: Boolean,
default: false
},
/**
* The button's behavior, by default the button acts like a normal button with optional toggle button behavior if `modelValue` is `true` or `false`.
* But you can also set to checkbox button behavior with tri-state or radio button like behavior.
* This extends the native HTML button type attribute.
*/
type: {
type: String,
default: "button",
validator: (behavior) => ["button", "checkbox", "radio", "reset", "submit"].includes(behavior)
},
/**
* The buttons state if `type` is 'checkbox' or 'radio' (meaning if it is pressed / selected).
* For checkbox and toggle button behavior - boolean value.
* For radio button behavior - could be a boolean checked or a string with the value of the button.
* Note: Unlike native radio buttons, NcActionButton are not grouped by name, so you need to connect them by bind correct modelValue.
*
* **This is not availabe for `type='submit'` or `type='reset'`**
*
* If using `type='checkbox'` a `model-value` of `true` means checked, `false` means unchecked and `null` means indeterminate (tri-state)
* For `type='radio'` `null` is equal to `false`
*/
modelValue: {
type: [Boolean, String],
default: null
},
/**
* The value used for the `modelValue` when this component is used with radio behavior
* Similar to the `value` attribute of `<input type="radio">`
*/
value: {
type: String,
default: null
},
/**
* Small underlying text content of the entry
*/
description: {
type: String,
default: ""
}
},
setup() {
return {
mdiCheck: mdi.mdiCheck,
mdiChevronRight: mdi.mdiChevronRight
};
},
computed: {
/**
* determines if the action is focusable
*
* @return {boolean} is the action focusable ?
*/
isFocusable() {
return !this.disabled;
},
/**
* The current "checked" or "pressed" state for the model behavior
*/
isChecked() {
if (this.type === "radio" && typeof this.modelValue !== "boolean") {
return this.modelValue === this.value;
}
return this.modelValue;
},
/**
* The native HTML type to set on the button
*/
nativeType() {
if (this.type === "submit" || this.type === "reset") {
return this.type;
}
return "button";
},
/**
* HTML attributes to bind to the <button>
*/
buttonAttributes() {
const attributes = {};
if (this.isInSemanticMenu) {
attributes.role = "menuitem";
if (this.type === "radio") {
attributes.role = "menuitemradio";
attributes["aria-checked"] = this.isChecked ? "true" : "false";
} else if (this.type === "checkbox" || this.nativeType === "button" && this.modelValue !== null) {
attributes.role = "menuitemcheckbox";
attributes["aria-checked"] = this.modelValue === null ? "mixed" : this.modelValue ? "true" : "false";
}
} else if (this.modelValue !== null && this.nativeType === "button") {
attributes["aria-pressed"] = this.modelValue ? "true" : "false";
}
return attributes;
}
},
methods: {
/**
* Forward click event, let mixin handle the close-after-click and emit new modelValue if needed
*
* @param {MouseEvent} event The click event
*/
handleClick(event) {
this.onClick(event);
if (this.modelValue !== null || this.type !== "button") {
if (this.type === "radio") {
if (typeof this.modelValue !== "boolean") {
if (!this.isChecked) {
this.$emit("update:modelValue", this.value);
}
} else {
this.$emit("update:modelValue", !this.isChecked);
}
} else {
this.$emit("update:modelValue", !this.isChecked);
}
}
}
}
};
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("button", _vm._b({ staticClass: "action-button button-vue", class: {
"action-button--active": _vm.isChecked,
focusable: _vm.isFocusable
}, attrs: { "aria-label": _vm.ariaLabel, "disabled": _vm.disabled, "title": _vm.title, "type": _vm.nativeType }, on: { "click": _vm.handleClick } }, "button", _vm.buttonAttributes, false), [_vm._t("icon", function() {
return [_c("span", { staticClass: "action-button__icon", class: [_vm.isIconUrl ? "action-button__icon--url" : _vm.icon], style: { backgroundImage: _vm.isIconUrl ? `url(${_vm.icon})` : null }, attrs: { "aria-hidden": "true" } })];
}), _c("span", { staticClass: "action-button__longtext-wrapper" }, [_vm.name ? _c("strong", { staticClass: "action-button__name" }, [_vm._v(" " + _vm._s(_vm.name) + " ")]) : _vm._e(), _vm.isLongText ? _c("span", { staticClass: "action-button__longtext", domProps: { "textContent": _vm._s(_vm.text) } }) : _c("span", { staticClass: "action-button__text" }, [_vm._v(" " + _vm._s(_vm.text) + " ")]), _vm.description ? _c("span", { staticClass: "action-button__description", domProps: { "textContent": _vm._s(_vm.description) } }) : _vm._e()]), _vm.isMenu ? _c("NcIconSvgWrapper", { staticClass: "action-button__menu-icon", attrs: { "directional": "", "path": _vm.mdiChevronRight } }) : _vm.isChecked ? _c("NcIconSvgWrapper", { staticClass: "action-button__pressed-icon", attrs: { "path": _vm.mdiCheck } }) : _vm.isChecked === false ? _c("span", { staticClass: "action-button__pressed-icon material-design-icon" }) : _vm._e(), _vm._e()], 2)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"595cfbf9"
);
const NcActionButton = __component__.exports;
exports.NcActionButton = NcActionButton;
//# sourceMappingURL=NcActionButton-CFXzNoFT.cjs.map