@nextcloud/vue
Version:
Nextcloud vue components
229 lines (228 loc) • 8.31 kB
JavaScript
import '../assets/NcActionButton-Bb0ihLdt.css';
import { c as mdiChevronRight, d as mdiCheck } from "./mdi-XFJRiRqJ.mjs";
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
import { A as ActionTextMixin } from "./actionText-DYzDdbVe.mjs";
import { a as NC_ACTIONS_IS_SEMANTIC_MENU } from "./useNcActions-CiGWxAJE.mjs";
import { resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, mergeProps, renderSlot, createBlock, createCommentVNode, normalizeStyle, toDisplayString } from "vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
const _sfc_main = {
name: "NcActionButton",
components: {
NcIconSvgWrapper
},
mixins: [ActionTextMixin],
inject: {
isInSemanticMenu: {
from: NC_ACTIONS_IS_SEMANTIC_MENU,
default: false
}
},
props: {
/**
* 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: ""
}
},
emits: ["update:modelValue"],
setup() {
return {
mdiCheck,
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);
}
}
}
}
};
const _hoisted_1 = ["role"];
const _hoisted_2 = ["aria-label", "disabled", "title", "type"];
const _hoisted_3 = { class: "action-button__longtext-wrapper" };
const _hoisted_4 = {
key: 0,
class: "action-button__name"
};
const _hoisted_5 = ["textContent"];
const _hoisted_6 = {
key: 2,
class: "action-button__text"
};
const _hoisted_7 = ["textContent"];
const _hoisted_8 = {
key: 2,
class: "action-button__pressed-icon material-design-icon"
};
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("button", mergeProps({
"aria-label": _ctx.ariaLabel,
class: ["action-button button-vue", {
"action-button--active": $options.isChecked,
focusable: $options.isFocusable
}],
disabled: $props.disabled,
title: _ctx.title,
type: $options.nativeType
}, $options.buttonAttributes, {
onClick: _cache[0] || (_cache[0] = (...args) => $options.handleClick && $options.handleClick(...args))
}), [
renderSlot(_ctx.$slots, "icon", {}, () => [
createElementVNode("span", {
class: normalizeClass([[_ctx.isIconUrl ? "action-button__icon--url" : _ctx.icon], "action-button__icon"]),
style: normalizeStyle({ backgroundImage: _ctx.isIconUrl ? `url(${_ctx.icon})` : null }),
"aria-hidden": "true"
}, null, 6)
], true),
createElementVNode("span", _hoisted_3, [
_ctx.name ? (openBlock(), createElementBlock("strong", _hoisted_4, toDisplayString(_ctx.name), 1)) : createCommentVNode("", true),
_ctx.isLongText ? (openBlock(), createElementBlock("span", {
key: 1,
class: "action-button__longtext",
textContent: toDisplayString(_ctx.text)
}, null, 8, _hoisted_5)) : (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(_ctx.text), 1)),
$props.description ? (openBlock(), createElementBlock("span", {
key: 3,
class: "action-button__description",
textContent: toDisplayString($props.description)
}, null, 8, _hoisted_7)) : createCommentVNode("", true)
]),
$props.isMenu ? (openBlock(), createBlock(_component_NcIconSvgWrapper, {
key: 0,
class: "action-button__menu-icon",
directional: "",
path: $setup.mdiChevronRight
}, null, 8, ["path"])) : $options.isChecked ? (openBlock(), createBlock(_component_NcIconSvgWrapper, {
key: 1,
path: $setup.mdiCheck,
class: "action-button__pressed-icon"
}, null, 8, ["path"])) : $options.isChecked === false ? (openBlock(), createElementBlock("span", _hoisted_8)) : createCommentVNode("", true),
createCommentVNode("", true)
], 16, _hoisted_2)
], 10, _hoisted_1);
}
const NcActionButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-6c2daf4e"]]);
export {
NcActionButton as N
};
//# sourceMappingURL=NcActionButton-pKOSrlGE.mjs.map