@nextcloud/vue 8.3.0 → 8.5.0

package/CHANGELOG.md

@@ -2,9 +2,101 @@
 
 All notable changes to this project will be documented in this file.
 
-# Changelog
+## [v8.5.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.5.0) (2024-01-23)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.5.0...v8.4.0)
 
-All notable changes to this project will be documented in this file.
+### 🚀 Enhancements
+* enh(NcSelect): Add visible input label by @Pytal in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4963
+* feat(NcModal): Set return focus element on focus trap deactivation by @Pytal in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5025
+* Harmonize focus-visible styles for vue-navigation item with none-vue navigation item by @JuliaKirschenheuter in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5022
+* feat(NcActionInput): allow to append `NcSelect` to body by @raimund-schluessler in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5017
+* enh(NcSelect): Improve accessibility by @Pytal in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5036
+* enh: Make the date time formatting reusable for applications by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5046
+* enh(NcHeaderMenu): Close navigation header menu on focusout by @Pytal in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5064
+* enh(a11y): added aria-label that matches title attr on icon by @emoral435 in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5078
+* feat: Add NcUserStatusIcon by @Pytal in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5059
+* enh(breadcrumb): conditionally renders button when no redirection link given by @emoral435 in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5077
+* feat(NcPopover): provide a11y attributes to the trigger by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5086
+* feat(NcDialog): add navigationAriaLabel and navigationAriaLabelledBy props by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5083
+* enh(NcContent): Add skip content buttons by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4983
+* enh(NcInputField): Support numeric values - if numeric also emit numeric by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4926
+* feat(NcProgressBar): add circular progress bar by @raimund-schluessler in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5100
+* feat(NcReferenceList): Add support for a fallback reference widget by @mejo- in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5092
+* enh(NcEmojiPicker): Always show skin tone selector + save selection by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5103
+* feat(NcActionButton): Allow pressed state on NcActionButton - similar to NcButton by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4744
+
+### 🐛 Fixed bugs
+* fix(NcCheckboxRadioSwitch): fix shift+click on firefox by @skjnldsv in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4999
+* fix(NcCheckboxRadioSwitch): use correct padding by @raimund-schluessler in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5009
+* fix(NcCheckboxRadioSwitch): improve rendering and prevent unecessary elements by @skjnldsv in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5001
+* fix(NcAppNavigation): change h2 to span by @emoral435 in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5020
+* fix(NcDateTimePicker): Use ISO week numbers if `showWeekNumber` is set by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5045
+* fix(NcActions): In case of inline actions make sure to support icon as URL by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5053
+* fix(NcDialog): allow to close NcDialog on click outside by @Antreesy in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5062
+* fix(NcRelatedResourcesPanel): Fix invalid URL query params by @Pytal in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5065
+* fix(NcBreadcrumbs): improve the breadcrumbs shrinking behaviour by @raimund-schluessler in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5069
+* fix(NcInput): input disabled appearance by @marcoambrosini in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5000
+* fix(NcButton): use `a` as tag for router-link by @raimund-schluessler in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5091
+* fix(NcSelect): remove visual gap on top of the list by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5095
+* Remove unneeded `tab`, `tablist` and `aria-selected` roles from navigation by @JuliaKirschenheuter in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5075
+* fix(NcCheckboxRadioSwitch): Fix invalid indeterminate checkbox semantics by @Pytal in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5096
+* Remove inaccessible opacity from SettingsSection by @JuliaKirschenheuter in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5109
+* fix(NcPopover): fix docs example by @raimund-schluessler in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5111
+* fix(NcPopover): check trigger a11y compatible with Vue 3 by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5110
+* fix(NcHeaderMenu): mouse in now pointer by @emoral435 in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5101
+* fix(NcActions): use new slots api by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5118
+* fix(NcButton): pressed state a11y by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5119
+* Fix additionalTrapElements to accept HTMLelements as well by @GretaD in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5120
+
+### Other Changes
+* refactor(NcCheckboxRadioSwitch): move comment to have a single root node by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5018
+* refactor(NcActionButtonGroup): replace computed of constant with constant by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5023
+* chore(docs): correct list types values for styleguidist in NcCheckboxRadioSwitch by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5079
+
+## [v8.4.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.4.0) (2023-12-22)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.4.0...v8.3.0)
+
+### Notes
+* NcRichContenteditable: new visual label feature might break layout if you have custom contenteditable styles
+* `isMobile` and `isFullscreen` mixins are now deprecated, use `useIsMobile` and `useIsFullscreen` composables instead
+
+### 🚀 Enhancements
+* enh: Split translations by components to only include needed strings in app bundles by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4861
+* enh(NcCheckboxRadioSwitch): Allow to set `aria-label` by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4903
+* enh(NcRichContenteditable): Add optional visual label for content editable by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4907
+* enh(NcBreadcrumbs): Allow setting aria-label on nav by @Pytal in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4913
+* feat: add small mobile breakpoint by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4919
+* Add target prop for NcListItem by @Fenn-CS in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4923
+* Make modal mask dark if some icons are shown outside by @szaimen in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4916
+* enh: Add a full labelled color palette to be used as the default for the color picker by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4902
+
+### 🐛 Fixed bugs
+* fix(NcAppNavigationItem): fix style when using `active` prop by @raimund-schluessler in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4989
+* fix(NcDialog): Increase specificity for modal-content selector by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4897
+* Prevent NcBreadcrumb from automatically inheriting attributes by @JuliaKirschenheuter in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4918
+* fix(NcAvatar): Increase contrast of avatar status icon by @Pytal in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4912
+* fix(utils/UserStatus): typo in "invisible" translation key by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4931
+* enh(NcDialog): Label dialog nav by @Pytal in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4928
+* fix(NcAppNavigationSettings): remove incorrect aria-label by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4932
+* fix(NcAppSidebar): add focus trap on mobile by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4909
+* feat(NcRichContenteditable): put caret in the end when focus input by @Antreesy in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4924
+* fix(package): specify exports for composables by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4951
+* fix(NcActions): provide `aria-expanded="false"` when menu is closed instead of removing it by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4946
+* fix(NcListItem): Ensure list item does not overflow wrapper by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4956
+* fix(NcActionX): Allow relative icon URL by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4955
+* fix(NcAppSettingsDialog): respect showNavigation prop by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4954
+* fix(NcAppNavigation): Bring back hover state for active element by @susnux in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4960
+* enh(aria): changed check color to adhere to 3:1 ratio by @emoral435 in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4958
+* Use logical style for NcHeaderMenu by @ahangarha in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4965
+* Equalize `TextArea` styles with `TextField` styles by @JuliaKirschenheuter in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4971
+* Increase contrast on input field for `NcRichContenteditable` by @JuliaKirschenheuter in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4975
+* enh(breadcrumbs): changed aria label for voice control on a-tag by @emoral435 in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4973
+* Differentiate between dark and light theme for NcDateTimePickerNative by @JuliaKirschenheuter in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4981
+
+### Other Changes
+* refactor(NcAppSidebar): remove unneeded debug log by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4952
+* chore(ci): make Jest output colorful by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4966
+* Update translations
 
 ## [v8.3.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.3.0) (2023-11-30)
 [Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.3.0...v8.2.0)
@@ -27,7 +119,7 @@ All notable changes to this project will be documented in this file.
 * fix(NcAppNavigation): replace custom `v-tooltip` with native `title` [\#4888](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4888) \([ShGKme](https://github.com/ShGKme)\)
 
 ### Other Changes
-* chore(lint): use valid JSDoc for literal type union [\#4886](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4886) \([ShGKme](https://github.com/ShGKme)\)
+* chore(lint): use valid JSDoc for literal type union [\#4989](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4989) \([ShGKme](https://github.com/ShGKme)\)
 * Update translations
 
 ## [v8.2.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.2.0) (2023-11-17)

package/dist/Components/NcActionButton.cjs

@@ -1,11 +1,11 @@
-var _ = require("../assets/index-7868494b.css");
-const e = require("../chunks/ChevronRight-a4c1e0d3.cjs"), s = require("../chunks/actionText-9582810f.cjs"), o = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
-const a = {
+var h = require("../assets/NcActionButton-YVkNHN_x.css");
+const n = require("../chunks/Check-5uKO4aXx.cjs"), s = require("../chunks/ChevronRight-bp7fT1r7.cjs"), a = require("../chunks/actionText-pGrMQtZ3.cjs"), o = require("../chunks/_plugin-vue2_normalizer-DCfUPqga.cjs"), l = {
   name: "NcActionButton",
   components: {
-    ChevronRightIcon: e.ChevronRight
+    CheckIcon: n.Check,
+    ChevronRightIcon: s.ChevronRight
   },
-  mixins: [s.ActionTextMixin],
+  mixins: [a.ActionTextMixin],
   inject: {
     isInSemanticMenu: {
       from: "NcActions:isSemanticMenu",
@@ -13,13 +13,6 @@ const a = {
     }
   },
   props: {
-    /**
-     * disabled state of the action button
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
     /**
      * @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,
@@ -29,6 +22,13 @@ const a = {
       type: Boolean,
       default: null
     },
+    /**
+     * disabled state of the action button
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * If this is a menu, a chevron icon will
      * be added at the end of the line
@@ -36,6 +36,37 @@ const a = {
     isMenu: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * 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: (e) => ["button", "checkbox", "radio", "reset", "submit"].includes(e)
+    },
+    /**
+     * The buttons state if `type` is 'checkbox' or 'radio' (meaning if it is pressed / selected)
+     * Either boolean for checkbox and toggle button behavior or `value` for radio behavior.
+     *
+     *  **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
     }
   },
   computed: {
@@ -46,23 +77,54 @@ const a = {
      */
     isFocusable() {
       return !this.disabled;
+    },
+    /**
+     * The current "checked" or "pressed" state for the model behavior
+     */
+    isChecked() {
+      return this.type === "radio" ? this.modelValue === this.value : this.modelValue;
+    },
+    /**
+     * The native HTML type to set on the button
+     */
+    nativeType() {
+      return this.type === "submit" || this.type === "reset" ? this.type : "button";
+    },
+    /**
+     * HTML attributes to bind to the <button>
+     */
+    buttonAttributes() {
+      const e = {};
+      return this.isInSemanticMenu ? (e.role = "menuitem", this.type === "radio" ? (e.role = "menuitemradio", e["aria-checked"] = this.isChecked ? "true" : "false") : (this.type === "checkbox" || this.nativeType === "button" && this.modelValue !== null) && (e.role = "menuitemcheckbox", e["aria-checked"] = this.modelValue === null ? "mixed" : this.modelValue ? "true" : "false")) : this.modelValue !== null && this.nativeType === "button" && (e["aria-pressed"] = this.modelValue ? "true" : "false"), e;
+    }
+  },
+  methods: {
+    /**
+     * Forward click event, let mixin handle the close-after-click and emit new modelValue if needed
+     * @param {MouseEvent} event The click event
+     */
+    handleClick(e) {
+      this.onClick(e), (this.modelValue !== null || this.type !== "button") && (this.type === "radio" ? this.isChecked || this.$emit("update:modelValue", this.value) : this.$emit("update:modelValue", !this.isChecked));
     }
   }
 };
-var i = function() {
-  var t = this, n = t._self._c;
-  return n("li", { staticClass: "action", class: { "action--disabled": t.disabled }, attrs: { role: t.isInSemanticMenu && "presentation" } }, [n("button", { staticClass: "action-button button-vue", class: { focusable: t.isFocusable }, attrs: { "aria-label": t.ariaLabel, title: t.title, role: t.isInSemanticMenu && "menuitem", type: "button" }, on: { click: t.onClick } }, [t._t("icon", function() {
-    return [n("span", { staticClass: "action-button__icon", class: [t.isIconUrl ? "action-button__icon--url" : t.icon], style: { backgroundImage: t.isIconUrl ? `url(${t.icon})` : null }, attrs: { "aria-hidden": "true" } })];
-  }), t.name ? n("span", { staticClass: "action-button__longtext-wrapper" }, [n("strong", { staticClass: "action-button__name" }, [t._v(" " + t._s(t.name) + " ")]), n("br"), n("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } })]) : t.isLongText ? n("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } }) : n("span", { staticClass: "action-button__text" }, [t._v(t._s(t.text))]), t.isMenu ? n("ChevronRightIcon", { staticClass: "action-button__menu-icon" }) : t._e(), t._e()], 2)]);
-}, c = [], l = /* @__PURE__ */ o.normalizeComponent(
-  a,
-  i,
+var c = function() {
+  var t = this, i = t._self._c;
+  return i("li", { staticClass: "action", class: { "action--disabled": t.disabled }, attrs: { role: t.isInSemanticMenu && "presentation" } }, [i("button", t._b({ class: ["action-button button-vue", {
+    "action-button--active": t.isChecked,
+    focusable: t.isFocusable
+  }], attrs: { "aria-label": t.ariaLabel, title: t.title, type: t.nativeType }, on: { click: t.handleClick } }, "button", t.buttonAttributes, !1), [t._t("icon", function() {
+    return [i("span", { staticClass: "action-button__icon", class: [t.isIconUrl ? "action-button__icon--url" : t.icon], style: { backgroundImage: t.isIconUrl ? `url(${t.icon})` : null }, attrs: { "aria-hidden": "true" } })];
+  }), t.name ? i("span", { staticClass: "action-button__longtext-wrapper" }, [i("strong", { staticClass: "action-button__name" }, [t._v(" " + t._s(t.name) + " ")]), i("br"), i("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } })]) : t.isLongText ? i("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } }) : i("span", { staticClass: "action-button__text" }, [t._v(t._s(t.text))]), t.isMenu ? i("ChevronRightIcon", { staticClass: "action-button__menu-icon", attrs: { size: 20 } }) : t.isChecked === !0 ? i("CheckIcon", { staticClass: "action-button__pressed-icon", attrs: { size: 20 } }) : t.isChecked === !1 ? i("span", { staticClass: "action-button__pressed-icon material-design-icon" }) : t._e(), t._e()], 2)]);
+}, u = [], r = /* @__PURE__ */ o.normalizeComponent(
+  l,
   c,
+  u,
   !1,
   null,
-  "41ba401e",
+  "71aaac92",
   null,
   null
 );
-const r = l.exports;
-module.exports = r;
+const d = r.exports;
+module.exports = d;

package/dist/Components/NcActionButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionButton.cjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete and close\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :is-menu=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCreate\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDisabled button\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text you can specify a name\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton name=\"Long button\" @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis button is associated with a very long text.\\nAnd with new lines too.\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<button class=\"action-button button-vue\"\n\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:title=\"title\"\n\t\t\t:role=\"isInSemanticMenu && 'menuitem'\"\n\t\t\ttype=\"button\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span v-if=\"name\"\n\t\t\t\tclass=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-button__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-button__text\">{{ text }}</span>\n\n\t\t\t<!-- right arrow icon when there is a sub-menu -->\n\t\t\t<ChevronRightIcon v-if=\"isMenu\" class=\"action-button__menu-icon\" />\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'\nimport ActionTextMixin from '../../mixins/actionText.js'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tChevronRightIcon,\n\t},\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * disabled state of the action button\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * If this is a menu, a chevron icon will\n\t\t * be added at the end of the line\n\t\t */\n\t\tisMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n</style>\n"],"names":["_sfc_main","ChevronRight","actionText"],"mappings":";;AAqOA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAC,EAAA;AAAA,EACA;AAAA,EACA,QAAA,CAAAC,EAAA,eAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionButton.cjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete and close\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :is-menu=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCreate\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDisabled button\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text you can specify a name\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton name=\"Long button\" @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis button is associated with a very long text.\\nAnd with new lines too.\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\n\t},\n}\n</script>\n```\n\n### With different model behavior\nBy default the button will act like a normal button, but it is also possible to change the behavior to a toggle button, checkbox button or radio button.\n\nFor example to have the button act like a toggle button just set the `modelValue` property to the toggle state:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t}\n\t},\n}\n</script>\n```\n\nAnother example would be using it with checkbox semantics, to enable or disable features.\nThis also allows tri-state behavior (`true`, `false`, `null`) in which case `aria-checked` will be either `true`, `false` or `mixed`.\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t\thandRaised: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nIt is also possible to use the button with radio semantics, this is only possible in menus and not for inline actions!\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t<template #icon>\n\t\t\t\t<Cash :size=\"20\" />\n\t\t\t</template>\n\t\t\tPay with cash\n\t\t</NcActionButton>\n\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t<template #icon>\n\t\t\t\t<CreditCard :size=\"20\" />\n\t\t\t</template>\n\t\t\tPay by card\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Cash from 'vue-material-design-icons/Cash.vue'\nimport CreditCard from 'vue-material-design-icons/CreditCard.vue'\n\nexport default {\n\tcomponents: {\n\t\tCash,\n\t\tCreditCard,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tpayment: 'card',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<button :aria-label=\"ariaLabel\"\n\t\t\t:class=\"['action-button button-vue', {\n\t\t\t\t'action-button--active': isChecked,\n\t\t\t\tfocusable: isFocusable,\n\t\t\t}]\"\n\t\t\t:title=\"title\"\n\t\t\t:type=\"nativeType\"\n\t\t\tv-bind=\"buttonAttributes\"\n\t\t\t@click=\"handleClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span v-if=\"name\"\n\t\t\t\tclass=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-button__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-button__text\">{{ text }}</span>\n\n\t\t\t<!-- right arrow icon when there is a sub-menu -->\n\t\t\t<ChevronRightIcon v-if=\"isMenu\" :size=\"20\" class=\"action-button__menu-icon\" />\n\t\t\t<CheckIcon v-else-if=\"isChecked === true\" :size=\"20\" class=\"action-button__pressed-icon\" />\n\t\t\t<span v-else-if=\"isChecked === false\" class=\"action-button__pressed-icon material-design-icon\" />\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport CheckIcon from 'vue-material-design-icons/Check.vue'\nimport ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'\nimport ActionTextMixin from '../../mixins/actionText.js'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tCheckIcon,\n\t\tChevronRightIcon,\n\t},\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the action button\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * If this is a menu, a chevron icon will\n\t\t * be added at the end of the line\n\t\t */\n\t\tisMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The button's behavior, by default the button acts like a normal button with optional toggle button behavior if `modelValue` is `true` or `false`.\n\t\t * But you can also set to checkbox button behavior with tri-state or radio button like behavior.\n\t\t * This extends the native HTML button type attribute.\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'button',\n\t\t\tvalidator: (behavior) => ['button', 'checkbox', 'radio', 'reset', 'submit'].includes(behavior),\n\t\t},\n\n\t\t/**\n\t\t * The buttons state if `type` is 'checkbox' or 'radio' (meaning if it is pressed / selected)\n\t\t * Either boolean for checkbox and toggle button behavior or `value` for radio behavior.\n\t\t *\n\t\t *  **This is not availabe for `type='submit'` or `type='reset'`**\n\t\t *\n\t\t * If using `type='checkbox'` a `model-value` of `true` means checked, `false` means unchecked and `null` means indeterminate (tri-state)\n\t\t * For `type='radio'` `null` is equal to `false`\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value used for the `modelValue` when this component is used with radio behavior\n\t\t * Similar to the `value` attribute of `<input type=\"radio\">`\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\t/**\n\t\t * The current \"checked\" or \"pressed\" state for the model behavior\n\t\t */\n\t\tisChecked() {\n\t\t\tif (this.type === 'radio') {\n\t\t\t\treturn this.modelValue === this.value\n\t\t\t}\n\t\t\treturn this.modelValue\n\t\t},\n\n\t\t/**\n\t\t * The native HTML type to set on the button\n\t\t */\n\t\tnativeType() {\n\t\t\tif (this.type === 'submit' || this.type === 'reset') {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn 'button'\n\t\t},\n\n\t\t/**\n\t\t * HTML attributes to bind to the <button>\n\t\t */\n\t\tbuttonAttributes() {\n\t\t\tconst attributes = {}\n\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\t// By default it needs to be a menu item in semantic menus\n\t\t\t\tattributes.role = 'menuitem'\n\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tattributes.role = 'menuitemradio'\n\t\t\t\t\tattributes['aria-checked'] = this.isChecked ? 'true' : 'false'\n\t\t\t\t} else if (this.type === 'checkbox' || (this.nativeType === 'button' && this.modelValue !== null)) {\n\t\t\t\t\t// either if checkbox behavior was set or the model value is not unset\n\t\t\t\t\tattributes.role = 'menuitemcheckbox'\n\t\t\t\t\tattributes['aria-checked'] = this.modelValue === null ? 'mixed' : (this.modelValue ? 'true' : 'false')\n\t\t\t\t}\n\t\t\t} else if (this.modelValue !== null && this.nativeType === 'button') {\n\t\t\t\t// In case this has a modelValue it is considered a toggle button, so we need to set the aria-pressed\n\t\t\t\tattributes['aria-pressed'] = this.modelValue ? 'true' : 'false'\n\t\t\t}\n\n\t\t\treturn attributes\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Forward click event, let mixin handle the close-after-click and emit new modelValue if needed\n\t\t * @param {MouseEvent} event The click event\n\t\t */\n\t\thandleClick(event) {\n\t\t\tthis.onClick(event)\n\t\t\t// If modelValue or type is set (so modelValue might be null for tri-state) we need to update it\n\t\t\tif (this.modelValue !== null || this.type !== 'button') {\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tif (!this.isChecked) {\n\t\t\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n\n.action-button__pressed-icon {\n\tmargin-left: auto;\n\tmargin-right: -$icon-margin;\n}\n</style>\n"],"names":["_sfc_main","Check","ChevronRight","actionText","behavior","attributes","event"],"mappings":";wNAsVAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC,EAAA;AAAA,IACA,kBAAAC,EAAA;AAAA,EACA;AAAA,EACA,QAAA,CAAAC,EAAA,eAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,UAAA,YAAA,SAAA,SAAA,QAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWA,YAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AACA,aAAA,KAAA,SAAA,UACA,KAAA,eAAA,KAAA,QAEA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AACA,aAAA,KAAA,SAAA,YAAA,KAAA,SAAA,UACA,KAAA,OAEA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AACA,YAAAC,IAAA,CAAA;AAEA,aAAA,KAAA,oBAEAA,EAAA,OAAA,YAEA,KAAA,SAAA,WACAA,EAAA,OAAA,iBACAA,EAAA,cAAA,IAAA,KAAA,YAAA,SAAA,YACA,KAAA,SAAA,cAAA,KAAA,eAAA,YAAA,KAAA,eAAA,UAEAA,EAAA,OAAA,oBACAA,EAAA,cAAA,IAAA,KAAA,eAAA,OAAA,UAAA,KAAA,aAAA,SAAA,YAEA,KAAA,eAAA,QAAA,KAAA,eAAA,aAEAA,EAAA,cAAA,IAAA,KAAA,aAAA,SAAA,UAGAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAAC,GAAA;AACA,WAAA,QAAAA,CAAA,IAEA,KAAA,eAAA,QAAA,KAAA,SAAA,cACA,KAAA,SAAA,UACA,KAAA,aACA,KAAA,MAAA,qBAAA,KAAA,KAAA,IAGA,KAAA,MAAA,qBAAA,CAAA,KAAA,SAAA;AAAA,IAGA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionButton.mjs

@@ -1,11 +1,13 @@
-import "../assets/index-7868494b.css";
-import { C as e } from "../chunks/ChevronRight-1a6a6cf2.mjs";
-import { A as a } from "../chunks/actionText-60ff01d1.mjs";
-import { n as o } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const s = {
+import "../assets/NcActionButton-YVkNHN_x.css";
+import { C as n } from "../chunks/Check-FObi_cEO.mjs";
+import { C as s } from "../chunks/ChevronRight-XOmSMmxA.mjs";
+import { A as a } from "../chunks/actionText-AoAs4kqP.mjs";
+import { n as o } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.mjs";
+const l = {
   name: "NcActionButton",
   components: {
-    ChevronRightIcon: e
+    CheckIcon: n,
+    ChevronRightIcon: s
   },
   mixins: [a],
   inject: {
@@ -15,13 +17,6 @@ const s = {
     }
   },
   props: {
-    /**
-     * disabled state of the action button
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
     /**
      * @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,
@@ -31,6 +26,13 @@ const s = {
       type: Boolean,
       default: null
     },
+    /**
+     * disabled state of the action button
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * If this is a menu, a chevron icon will
      * be added at the end of the line
@@ -38,6 +40,37 @@ const s = {
     isMenu: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * 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: (e) => ["button", "checkbox", "radio", "reset", "submit"].includes(e)
+    },
+    /**
+     * The buttons state if `type` is 'checkbox' or 'radio' (meaning if it is pressed / selected)
+     * Either boolean for checkbox and toggle button behavior or `value` for radio behavior.
+     *
+     *  **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
     }
   },
   computed: {
@@ -48,25 +81,56 @@ const s = {
      */
     isFocusable() {
       return !this.disabled;
+    },
+    /**
+     * The current "checked" or "pressed" state for the model behavior
+     */
+    isChecked() {
+      return this.type === "radio" ? this.modelValue === this.value : this.modelValue;
+    },
+    /**
+     * The native HTML type to set on the button
+     */
+    nativeType() {
+      return this.type === "submit" || this.type === "reset" ? this.type : "button";
+    },
+    /**
+     * HTML attributes to bind to the <button>
+     */
+    buttonAttributes() {
+      const e = {};
+      return this.isInSemanticMenu ? (e.role = "menuitem", this.type === "radio" ? (e.role = "menuitemradio", e["aria-checked"] = this.isChecked ? "true" : "false") : (this.type === "checkbox" || this.nativeType === "button" && this.modelValue !== null) && (e.role = "menuitemcheckbox", e["aria-checked"] = this.modelValue === null ? "mixed" : this.modelValue ? "true" : "false")) : this.modelValue !== null && this.nativeType === "button" && (e["aria-pressed"] = this.modelValue ? "true" : "false"), e;
+    }
+  },
+  methods: {
+    /**
+     * Forward click event, let mixin handle the close-after-click and emit new modelValue if needed
+     * @param {MouseEvent} event The click event
+     */
+    handleClick(e) {
+      this.onClick(e), (this.modelValue !== null || this.type !== "button") && (this.type === "radio" ? this.isChecked || this.$emit("update:modelValue", this.value) : this.$emit("update:modelValue", !this.isChecked));
     }
   }
 };
-var i = function() {
-  var t = this, n = t._self._c;
-  return n("li", { staticClass: "action", class: { "action--disabled": t.disabled }, attrs: { role: t.isInSemanticMenu && "presentation" } }, [n("button", { staticClass: "action-button button-vue", class: { focusable: t.isFocusable }, attrs: { "aria-label": t.ariaLabel, title: t.title, role: t.isInSemanticMenu && "menuitem", type: "button" }, on: { click: t.onClick } }, [t._t("icon", function() {
-    return [n("span", { staticClass: "action-button__icon", class: [t.isIconUrl ? "action-button__icon--url" : t.icon], style: { backgroundImage: t.isIconUrl ? `url(${t.icon})` : null }, attrs: { "aria-hidden": "true" } })];
-  }), t.name ? n("span", { staticClass: "action-button__longtext-wrapper" }, [n("strong", { staticClass: "action-button__name" }, [t._v(" " + t._s(t.name) + " ")]), n("br"), n("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } })]) : t.isLongText ? n("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } }) : n("span", { staticClass: "action-button__text" }, [t._v(t._s(t.text))]), t.isMenu ? n("ChevronRightIcon", { staticClass: "action-button__menu-icon" }) : t._e(), t._e()], 2)]);
-}, c = [], l = /* @__PURE__ */ o(
-  s,
-  i,
+var c = function() {
+  var t = this, i = t._self._c;
+  return i("li", { staticClass: "action", class: { "action--disabled": t.disabled }, attrs: { role: t.isInSemanticMenu && "presentation" } }, [i("button", t._b({ class: ["action-button button-vue", {
+    "action-button--active": t.isChecked,
+    focusable: t.isFocusable
+  }], attrs: { "aria-label": t.ariaLabel, title: t.title, type: t.nativeType }, on: { click: t.handleClick } }, "button", t.buttonAttributes, !1), [t._t("icon", function() {
+    return [i("span", { staticClass: "action-button__icon", class: [t.isIconUrl ? "action-button__icon--url" : t.icon], style: { backgroundImage: t.isIconUrl ? `url(${t.icon})` : null }, attrs: { "aria-hidden": "true" } })];
+  }), t.name ? i("span", { staticClass: "action-button__longtext-wrapper" }, [i("strong", { staticClass: "action-button__name" }, [t._v(" " + t._s(t.name) + " ")]), i("br"), i("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } })]) : t.isLongText ? i("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } }) : i("span", { staticClass: "action-button__text" }, [t._v(t._s(t.text))]), t.isMenu ? i("ChevronRightIcon", { staticClass: "action-button__menu-icon", attrs: { size: 20 } }) : t.isChecked === !0 ? i("CheckIcon", { staticClass: "action-button__pressed-icon", attrs: { size: 20 } }) : t.isChecked === !1 ? i("span", { staticClass: "action-button__pressed-icon material-design-icon" }) : t._e(), t._e()], 2)]);
+}, u = [], r = /* @__PURE__ */ o(
+  l,
   c,
+  u,
   !1,
   null,
-  "41ba401e",
+  "71aaac92",
   null,
   null
 );
-const d = l.exports;
+const b = r.exports;
 export {
-  d as default
+  b as default
 };

package/dist/Components/NcActionButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionButton.mjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete and close\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :is-menu=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCreate\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDisabled button\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text you can specify a name\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton name=\"Long button\" @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis button is associated with a very long text.\\nAnd with new lines too.\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<button class=\"action-button button-vue\"\n\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:title=\"title\"\n\t\t\t:role=\"isInSemanticMenu && 'menuitem'\"\n\t\t\ttype=\"button\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span v-if=\"name\"\n\t\t\t\tclass=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-button__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-button__text\">{{ text }}</span>\n\n\t\t\t<!-- right arrow icon when there is a sub-menu -->\n\t\t\t<ChevronRightIcon v-if=\"isMenu\" class=\"action-button__menu-icon\" />\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'\nimport ActionTextMixin from '../../mixins/actionText.js'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tChevronRightIcon,\n\t},\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * disabled state of the action button\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * If this is a menu, a chevron icon will\n\t\t * be added at the end of the line\n\t\t */\n\t\tisMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n</style>\n"],"names":["_sfc_main","ChevronRight","ActionTextMixin"],"mappings":";;;;AAqOA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAC;AAAA,EACA;AAAA,EACA,QAAA,CAAAC,CAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionButton.mjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete and close\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :is-menu=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCreate\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDisabled button\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text you can specify a name\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton name=\"Long button\" @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis button is associated with a very long text.\\nAnd with new lines too.\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\n\t},\n}\n</script>\n```\n\n### With different model behavior\nBy default the button will act like a normal button, but it is also possible to change the behavior to a toggle button, checkbox button or radio button.\n\nFor example to have the button act like a toggle button just set the `modelValue` property to the toggle state:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t}\n\t},\n}\n</script>\n```\n\nAnother example would be using it with checkbox semantics, to enable or disable features.\nThis also allows tri-state behavior (`true`, `false`, `null`) in which case `aria-checked` will be either `true`, `false` or `mixed`.\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t\thandRaised: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nIt is also possible to use the button with radio semantics, this is only possible in menus and not for inline actions!\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t<template #icon>\n\t\t\t\t<Cash :size=\"20\" />\n\t\t\t</template>\n\t\t\tPay with cash\n\t\t</NcActionButton>\n\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t<template #icon>\n\t\t\t\t<CreditCard :size=\"20\" />\n\t\t\t</template>\n\t\t\tPay by card\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Cash from 'vue-material-design-icons/Cash.vue'\nimport CreditCard from 'vue-material-design-icons/CreditCard.vue'\n\nexport default {\n\tcomponents: {\n\t\tCash,\n\t\tCreditCard,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tpayment: 'card',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<button :aria-label=\"ariaLabel\"\n\t\t\t:class=\"['action-button button-vue', {\n\t\t\t\t'action-button--active': isChecked,\n\t\t\t\tfocusable: isFocusable,\n\t\t\t}]\"\n\t\t\t:title=\"title\"\n\t\t\t:type=\"nativeType\"\n\t\t\tv-bind=\"buttonAttributes\"\n\t\t\t@click=\"handleClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span v-if=\"name\"\n\t\t\t\tclass=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-button__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-button__text\">{{ text }}</span>\n\n\t\t\t<!-- right arrow icon when there is a sub-menu -->\n\t\t\t<ChevronRightIcon v-if=\"isMenu\" :size=\"20\" class=\"action-button__menu-icon\" />\n\t\t\t<CheckIcon v-else-if=\"isChecked === true\" :size=\"20\" class=\"action-button__pressed-icon\" />\n\t\t\t<span v-else-if=\"isChecked === false\" class=\"action-button__pressed-icon material-design-icon\" />\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport CheckIcon from 'vue-material-design-icons/Check.vue'\nimport ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'\nimport ActionTextMixin from '../../mixins/actionText.js'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tCheckIcon,\n\t\tChevronRightIcon,\n\t},\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the action button\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * If this is a menu, a chevron icon will\n\t\t * be added at the end of the line\n\t\t */\n\t\tisMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The button's behavior, by default the button acts like a normal button with optional toggle button behavior if `modelValue` is `true` or `false`.\n\t\t * But you can also set to checkbox button behavior with tri-state or radio button like behavior.\n\t\t * This extends the native HTML button type attribute.\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'button',\n\t\t\tvalidator: (behavior) => ['button', 'checkbox', 'radio', 'reset', 'submit'].includes(behavior),\n\t\t},\n\n\t\t/**\n\t\t * The buttons state if `type` is 'checkbox' or 'radio' (meaning if it is pressed / selected)\n\t\t * Either boolean for checkbox and toggle button behavior or `value` for radio behavior.\n\t\t *\n\t\t *  **This is not availabe for `type='submit'` or `type='reset'`**\n\t\t *\n\t\t * If using `type='checkbox'` a `model-value` of `true` means checked, `false` means unchecked and `null` means indeterminate (tri-state)\n\t\t * For `type='radio'` `null` is equal to `false`\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value used for the `modelValue` when this component is used with radio behavior\n\t\t * Similar to the `value` attribute of `<input type=\"radio\">`\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\t/**\n\t\t * The current \"checked\" or \"pressed\" state for the model behavior\n\t\t */\n\t\tisChecked() {\n\t\t\tif (this.type === 'radio') {\n\t\t\t\treturn this.modelValue === this.value\n\t\t\t}\n\t\t\treturn this.modelValue\n\t\t},\n\n\t\t/**\n\t\t * The native HTML type to set on the button\n\t\t */\n\t\tnativeType() {\n\t\t\tif (this.type === 'submit' || this.type === 'reset') {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn 'button'\n\t\t},\n\n\t\t/**\n\t\t * HTML attributes to bind to the <button>\n\t\t */\n\t\tbuttonAttributes() {\n\t\t\tconst attributes = {}\n\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\t// By default it needs to be a menu item in semantic menus\n\t\t\t\tattributes.role = 'menuitem'\n\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tattributes.role = 'menuitemradio'\n\t\t\t\t\tattributes['aria-checked'] = this.isChecked ? 'true' : 'false'\n\t\t\t\t} else if (this.type === 'checkbox' || (this.nativeType === 'button' && this.modelValue !== null)) {\n\t\t\t\t\t// either if checkbox behavior was set or the model value is not unset\n\t\t\t\t\tattributes.role = 'menuitemcheckbox'\n\t\t\t\t\tattributes['aria-checked'] = this.modelValue === null ? 'mixed' : (this.modelValue ? 'true' : 'false')\n\t\t\t\t}\n\t\t\t} else if (this.modelValue !== null && this.nativeType === 'button') {\n\t\t\t\t// In case this has a modelValue it is considered a toggle button, so we need to set the aria-pressed\n\t\t\t\tattributes['aria-pressed'] = this.modelValue ? 'true' : 'false'\n\t\t\t}\n\n\t\t\treturn attributes\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Forward click event, let mixin handle the close-after-click and emit new modelValue if needed\n\t\t * @param {MouseEvent} event The click event\n\t\t */\n\t\thandleClick(event) {\n\t\t\tthis.onClick(event)\n\t\t\t// If modelValue or type is set (so modelValue might be null for tri-state) we need to update it\n\t\t\tif (this.modelValue !== null || this.type !== 'button') {\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tif (!this.isChecked) {\n\t\t\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n\n.action-button__pressed-icon {\n\tmargin-left: auto;\n\tmargin-right: -$icon-margin;\n}\n</style>\n"],"names":["_sfc_main","Check","ChevronRight","ActionTextMixin","behavior","attributes","event"],"mappings":";;;;;AAsVA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC;AAAA,IACA,kBAAAC;AAAA,EACA;AAAA,EACA,QAAA,CAAAC,CAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,UAAA,YAAA,SAAA,SAAA,QAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWA,YAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AACA,aAAA,KAAA,SAAA,UACA,KAAA,eAAA,KAAA,QAEA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AACA,aAAA,KAAA,SAAA,YAAA,KAAA,SAAA,UACA,KAAA,OAEA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AACA,YAAAC,IAAA,CAAA;AAEA,aAAA,KAAA,oBAEAA,EAAA,OAAA,YAEA,KAAA,SAAA,WACAA,EAAA,OAAA,iBACAA,EAAA,cAAA,IAAA,KAAA,YAAA,SAAA,YACA,KAAA,SAAA,cAAA,KAAA,eAAA,YAAA,KAAA,eAAA,UAEAA,EAAA,OAAA,oBACAA,EAAA,cAAA,IAAA,KAAA,eAAA,OAAA,UAAA,KAAA,aAAA,SAAA,YAEA,KAAA,eAAA,QAAA,KAAA,eAAA,aAEAA,EAAA,cAAA,IAAA,KAAA,aAAA,SAAA,UAGAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAAC,GAAA;AACA,WAAA,QAAAA,CAAA,IAEA,KAAA,eAAA,QAAA,KAAA,SAAA,cACA,KAAA,SAAA,UACA,KAAA,aACA,KAAA,MAAA,qBAAA,KAAA,KAAA,IAGA,KAAA,MAAA,qBAAA,CAAA,KAAA,SAAA;AAAA,IAGA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionButtonGroup.cjs

@@ -1,41 +1,3 @@
-var _ = require("../assets/index-5fa0ac5a.css");
-const t = require("vue"), o = require("../chunks/GenRandomId-c214d235.cjs"), r = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
-const a = t.defineComponent({
-  name: "NcActionButtonGroup",
-  inject: {
-    isInSemanticMenu: {
-      from: "NcActions:isSemanticMenu",
-      default: !1
-    }
-  },
-  props: {
-    /**
-     * Optional text shown below the button group
-     */
-    name: {
-      required: !1,
-      default: void 0,
-      type: String
-    }
-  },
-  computed: {
-    labelId() {
-      return `nc-action-button-group-${o.GenRandomId()}`;
-    }
-  }
-});
-var u = function() {
-  var e = this, n = e._self._c;
-  return e._self._setupProxy, n("li", { staticClass: "nc-button-group-base", attrs: { role: e.isInSemanticMenu && "presentation" } }, [e.name ? n("div", { attrs: { id: e.labelId } }, [e._v(" " + e._s(e.name) + " ")]) : e._e(), n("ul", { staticClass: "nc-button-group-content", attrs: { role: "group", "aria-labelledby": e.name ? e.labelId : void 0 } }, [e._t("default")], 2)]);
-}, s = [], i = /* @__PURE__ */ r.normalizeComponent(
-  a,
-  u,
-  s,
-  !1,
-  null,
-  null,
-  null,
-  null
-);
-const l = i.exports;
-module.exports = l;
+"use strict";
+const t = require("../chunks/NcActionButtonGroup-IEaXhYp3.cjs");
+module.exports = t.NcActionButtonGroup;

package/dist/Components/NcActionButtonGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionButtonGroup.cjs","sources":["../../src/components/NcActionButtonGroup/NcActionButtonGroup.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots,\nto group buttons as one visual action, like for text alignment.\nThis should be used sparingly for accessibility.\n\n```vue\n<template>\n\t<div style=\"display: flex; align-items: center;\">\n\t\t<NcActions>\n\t\t\t<NcActionButtonGroup name=\"Text alignment\">\n\t\t\t\t<NcActionButton aria-label=\"Align left\"\n\t\t\t\t\t@click=\"showMessage('Align left')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlignLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align center\"\n\t\t\t\t\t@click=\"showMessage('Align center')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlignCenter :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align right\"\n\t\t\t\t\t@click=\"showMessage('Align Right')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlignRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActionButtonGroup>\n\t\t\t<NcActionButton :close-after-click=\"true\"\n\t\t\t\t@click=\"showMessage('Some other action')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSome other action\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n<script>\nimport AlignLeft from 'vue-material-design-icons/AlignHorizontalLeft'\nimport AlignRight from 'vue-material-design-icons/AlignHorizontalRight'\nimport AlignCenter from 'vue-material-design-icons/AlignHorizontalCenter'\nimport Plus from 'vue-material-design-icons/Plus'\n\nexport default {\n\tcomponents: {\n\t\tAlignLeft,\n\t\tAlignRight,\n\t\tAlignCenter,\n\t\tPlus,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"nc-button-group-base\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<div v-if=\"name\" :id=\"labelId\">\n\t\t\t{{ name }}\n\t\t</div>\n\t\t<ul class=\"nc-button-group-content\" role=\"group\" :aria-labelledby=\"name ? labelId : undefined\">\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\n/**\n * A wrapper for allowing inlining NcAction components within the action menu\n */\nexport default defineComponent({\n\tname: 'NcActionButtonGroup',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Optional text shown below the button group\n\t\t */\n\t\tname: {\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tlabelId() {\n\t\t\treturn `nc-action-button-group-${GenRandomId()}`\n\t\t},\n\t},\n})\n</script>\n\n<style lang=\"scss\">\n.nc-button-group-base {\n\t>div {\n\t\ttext-align: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\tul.nc-button-group-content {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tli {\n\t\t\tflex: 1 1;\n\t\t}\n\n\t\t.action-button {\n\t\t\t// Fix action buttons beeing shifted to the left (right padding)\n\t\t\tpadding: 0 !important;\n\t\t\twidth: 100%;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","Vue","GenRandomId"],"mappings":";;AAoGA,MAAAA,IAAAC,EAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,0BAAAC,EAAA,YAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionButtonGroup.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}