@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/CHANGELOG.md

@@ -2,6 +2,96 @@
 
 All notable changes to this project will be documented in this file.
 
+## [v9.0.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v9.0.0-alpha.0) (unreleased)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.5.0...v9.0.0-alpha.0)
+
+### 💥 Breaking Changes
+* The package now uses Vue 3 instead of Vue 2.7
+* The package is now a native ESM package
+* The `checked` prop was renamed to `modelValue`, the `update:checked` event was renamed to `update:modelValue`. This affects the following components.
+  - `NcActionCheckbox`
+  - `NcActionRadio`
+  - `NcCheckboxRadioSwitch`
+* The `value` prop was renamed to `modelValue`, the `update:value` or `input` events were renamed to `update:modelValue`. This affects the following components.
+  - `NcActionInput`
+  - `NcActionTextEditable`
+  - `NcColorPicker`
+  - `NcDateTimePicker`
+  - `NcDateTimePickerNative`
+  - `NcInputField`
+  - `NcPasswordField`
+  - `NcRichContenteditable`
+  - `NcSelect`
+  - `NcSelectTags`
+  - `NcSettingsInputText`
+  - `NcSettingsSelectGroup`
+  - `NcTextArea`
+  - `NcTextField`
+  - `NcTimezonePicker`
+* The `exact` prop was removed. This affects the following components:
+  - `NcActionRouter`
+  - `NcAppNavigationItem`
+  - `NcBreadcrumb`
+  - `NcListItem`
+* The `isFullscreen` and `isMobile` mixins were removed. Use the according composables instead.
+
+### 🚀 Enhancements
+* Allow writing components using Typescript and provide type definitions for `NcButton` [\#4525](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4525) \([susnux](https://github.com/susnux)\)
+
+### 🐛 Fixed bugs
+* fix(vue3): Inherit `$attrs` to `Dropdown` in `NcPopover` [\#4564](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4564) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(eslint): run eslint on migrated files [\#4630](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4630) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(NcListItemIcon): correctly use default slot in examples [\#4695](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4695) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(NcAvatar): don't show `false` for disabled tooltip [\#4740](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4740) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(NcCheckboxRadioSwitch): fix v-on with no argument expects an object value [\#4840](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4840) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(NcActions): find actions deeper nested [\#4804](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4804) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(NcUserBubble): import warn correctly [\#4906](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4906) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(docs): use v-model instead of sync [\#4969](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4969) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(NcCheckboxRadioSwitch): correctly declare update:modelValue [\#5006](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5006) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(test): correctly provide props in test [\#5012](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5012) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(NcBreadcrumb): fix setting class on root element [\#5010](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5010) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(NcBreadcrumb): correctly emit drag events [\#5011](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5011) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(NcCheckboxContent): correctly check default slot [\#5058](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5058) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(NcBreadcrumbs): do not forward refs to hidden crumbs [\#5066](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5066) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(NcAppSidebar): adjust animation class names [\#5168](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5168) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* fix(docs): bring back NcAppSidebar in docs [\#5167](https://github.com/nextcloud-libraries/nextcloud-vue/pull/5167) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+
+### Other Changes
+* Rename `checked` prop to `modelValue` [\#4994](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4994) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* Unify `modelValue` naming [\#4990](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4990) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* Remove deprecated mixins [\#4830](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4830) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* Use vite for all entry points [\#4524](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4524) \([susnux](https://github.com/susnux)\)
+* Use vite instead of webpack [\#4619](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4619) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* Make package ESM by default [\#4957](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4957) \([susnux](https://github.com/susnux)\)
+* chore(vue3): Migrate NcPopover [\#4511](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4511) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcHighlight [\#4513](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4513) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate Focus directive, globally import Tooltip in docs [\#4515](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4515) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcDatetime [\#4514](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4514) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): add unit test for isSlotPopulated [\#4516](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4516) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* feat(vue3): Do cheap migrations [\#4532](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4532) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate Nc*Field [\#4512](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4512) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* feat(vue3): Migrate NcDatetimePickerNative [\#4533](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4533) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Nc*Field rename default to icon slot [\#4543](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4543) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcEmojiPicker [\#4563](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4563) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcEmptyContent [\#4542](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4542) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcColorPicker [\#4562](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4562) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate `NcSelect*` and related components [\#4587](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4587) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcDateTimePicker to vue 3 [\#4631](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4631) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate Nc*Field from `value` to `model-value` [\#4647](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4647) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcTextArea to vue 3 [\#4696](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4696) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcActions* to vue 3 [\#4646](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4646) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcModal to vue 3 [\#4722](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4722) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcAvatar to vue 3 [\#4719](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4719) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcDialog* to vue 3 [\#4731](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4731) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcHeaderMenu to vue 3 [\#4732](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4732) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcListItem to vue 3 [\#4726](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4726) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcBreadcrumbs to vue 3 [\#4741](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4741) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcRelatedResource to vue 3 [\#4800](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4800) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcUserBubble to vue 3 [\#4739](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4739) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcContent to vue 3 [\#4831](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4831) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcAppSidebar* to vue 3 [\#4833](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4833) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+* chore(vue3): Migrate NcRich* to vue 3 [\#4976](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4976) \([raimund-schluessler](https://github.com/raimund-schluessler)\)
+
 ## [v8.6.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.6.0) (2024-01-30)
 [Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.5.1...v8.6.0)
 
@@ -9,6 +99,7 @@ All notable changes to this project will be documented in this file.
 * feat: Implement widget flag for requesting interactive view by @juliushaertl in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5144
 * feat(NcListItem): introduce 'details' slot by @Antreesy in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5146
 * feat(NcNoteCard): provide a slot for inserting a custom icon instead of default by @Antreesy in https://github.com/nextcloud-libraries/nextcloud-vue/pull/4894
+* feat(NcActionButton): support boolean value for radio type by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5134
 
 ### 🐛 Fixed bugs
 * fix(NcActions): keyboard navigation by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5153

package/dist/Components/NcActionButton.cjs

@@ -1,133 +1,3 @@
-require('../assets/NcActionButton-1Z9lN7ar.css');
 "use strict";
-const n = require("../chunks/Check-QBzDcHpr.cjs"), s = require("../chunks/ChevronRight-MdQC55Yq.cjs"), a = require("../chunks/actionText-pGrMQtZ3.cjs"), o = require("../chunks/_plugin-vue2_normalizer-DCfUPqga.cjs"), l = {
-  name: "NcActionButton",
-  components: {
-    CheckIcon: n.Check,
-    ChevronRightIcon: s.ChevronRight
-  },
-  mixins: [a.ActionTextMixin],
-  inject: {
-    isInSemanticMenu: {
-      from: "NcActions:isSemanticMenu",
-      default: !1
-    }
-  },
-  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,
-      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
-     */
-    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).
-     * 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
-    }
-  },
-  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() {
-      return this.type === "radio" && typeof this.modelValue != "boolean" ? 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" ? typeof this.modelValue != "boolean" ? this.isChecked || this.$emit("update:modelValue", this.value) : this.$emit("update:modelValue", !this.isChecked) : this.$emit("update:modelValue", !this.isChecked));
-    }
-  }
-};
-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,
-  "04ec546c",
-  null,
-  null
-);
-const d = r.exports;
-module.exports = d;
+const t = require("../chunks/NcActionButton-sJpgOVU9.cjs");
+module.exports = t.NcActionButton;

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\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\nWith a string `modelValue`, checked state is determined by the `value` property and updates `modelValue` with the new `value` string.\n\nWith a boolean `modelValue`, checked state is determined by `modelValue` and updates to `true` on check.\n\nNote: unlike native radio buttons, `NcActionButton` are not grouped by name, so you need to connect them by bind correct `modelValue``.\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions>\n\t\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cash :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay with cash\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CreditCard :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay by card\n\t\t\t</NcActionButton>\n\t\t\t<NcActionSeparator />\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isLeft\" @update:modelValue=\"setAlign('Left', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignLeft :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tLeft\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isCenter\" @update:modelValue=\"setAlign('Center', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignCenter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCenter\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isRight\" @update:modelValue=\"setAlign('Right', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRight\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t\t<p>payment = \"{{ payment }}\"</p>\n\t\t<p>align.isLeft = {{ align.isLeft }}</p>\n\t\t<p>align.isCenter = {{ align.isCenter }}</p>\n\t\t<p>align.isRight = {{ align.isRight }}</p>\n\t</div>\n</template>\n<script>\nimport Cash from 'vue-material-design-icons/Cash.vue'\nimport CreditCard from 'vue-material-design-icons/CreditCard.vue'\nimport FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tCash,\n\t\tCreditCard,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tpayment: 'card',\n\t\t\talign: {\n\t\t\t\tisLeft: false,\n\t\t\t\tisCenter: true,\n\t\t\t\tisRight: false,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\tsetAlign(direction, value) {\n\t\t\tthis.align.isLeft = false\n\t\t\tthis.align.isCenter = false\n\t\t\tthis.align.isRight = false\n\t\t\tthis.align[`is${direction}`] = value\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 * For checkbox and toggle button behavior - boolean value.\n\t\t * For radio button behavior - could be a boolean checked or a string with the value of the button.\n\t\t * Note: Unlike native radio buttons, NcActionButton are not grouped by name, so you need to connect them by bind correct modelValue.\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' && typeof this.modelValue !== 'boolean') {\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 (typeof this.modelValue !== 'boolean') {\n\t\t\t\t\t\t// String-value radios behavior is similar to native - click on checked radio does nothing\n\t\t\t\t\t\tif (!this.isChecked) {\n\t\t\t\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Boolean radio allows to uncheck\n\t\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Checkbox toggles value\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","CheckIcon","ChevronRightIcon","ActionTextMixin","behavior","attributes","event"],"mappings":";wNAwYAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC,EAAA;AAAA,IACA,kBAAAC,EAAA;AAAA,EACA;AAAA,EACA,QAAA,CAAAC,EAAAA,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;AAAA;AAAA,IAaA,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,WAAA,OAAA,KAAA,cAAA,YACA,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,OAAA,KAAA,cAAA,YAEA,KAAA,aACA,KAAA,MAAA,qBAAA,KAAA,KAAA,IAIA,KAAA,MAAA,qBAAA,CAAA,KAAA,SAAA,IAIA,KAAA,MAAA,qBAAA,CAAA,KAAA,SAAA;AAAA,IAGA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionButton.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/Components/NcActionButton.mjs

@@ -1,138 +1,4 @@
-import '../assets/NcActionButton-1Z9lN7ar.css';
-import { C as s } from "../chunks/Check-qy5XrF1J.mjs";
-import { C as n } from "../chunks/ChevronRight-9owhU_17.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: {
-    CheckIcon: s,
-    ChevronRightIcon: n
-  },
-  mixins: [a],
-  inject: {
-    isInSemanticMenu: {
-      from: "NcActions:isSemanticMenu",
-      default: !1
-    }
-  },
-  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,
-      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
-     */
-    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).
-     * 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
-    }
-  },
-  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() {
-      return this.type === "radio" && typeof this.modelValue != "boolean" ? 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" ? typeof this.modelValue != "boolean" ? this.isChecked || this.$emit("update:modelValue", this.value) : this.$emit("update:modelValue", !this.isChecked) : this.$emit("update:modelValue", !this.isChecked));
-    }
-  }
-};
-var u = 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)]);
-}, c = [], r = /* @__PURE__ */ o(
-  l,
-  u,
-  c,
-  !1,
-  null,
-  "04ec546c",
-  null,
-  null
-);
-const b = r.exports;
+import { N as f } from "../chunks/NcActionButton-VnbqrtOY.mjs";
 export {
-  b as default
+  f 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\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\nWith a string `modelValue`, checked state is determined by the `value` property and updates `modelValue` with the new `value` string.\n\nWith a boolean `modelValue`, checked state is determined by `modelValue` and updates to `true` on check.\n\nNote: unlike native radio buttons, `NcActionButton` are not grouped by name, so you need to connect them by bind correct `modelValue``.\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions>\n\t\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cash :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay with cash\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CreditCard :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay by card\n\t\t\t</NcActionButton>\n\t\t\t<NcActionSeparator />\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isLeft\" @update:modelValue=\"setAlign('Left', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignLeft :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tLeft\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isCenter\" @update:modelValue=\"setAlign('Center', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignCenter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCenter\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isRight\" @update:modelValue=\"setAlign('Right', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRight\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t\t<p>payment = \"{{ payment }}\"</p>\n\t\t<p>align.isLeft = {{ align.isLeft }}</p>\n\t\t<p>align.isCenter = {{ align.isCenter }}</p>\n\t\t<p>align.isRight = {{ align.isRight }}</p>\n\t</div>\n</template>\n<script>\nimport Cash from 'vue-material-design-icons/Cash.vue'\nimport CreditCard from 'vue-material-design-icons/CreditCard.vue'\nimport FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tCash,\n\t\tCreditCard,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tpayment: 'card',\n\t\t\talign: {\n\t\t\t\tisLeft: false,\n\t\t\t\tisCenter: true,\n\t\t\t\tisRight: false,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\tsetAlign(direction, value) {\n\t\t\tthis.align.isLeft = false\n\t\t\tthis.align.isCenter = false\n\t\t\tthis.align.isRight = false\n\t\t\tthis.align[`is${direction}`] = value\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 * For checkbox and toggle button behavior - boolean value.\n\t\t * For radio button behavior - could be a boolean checked or a string with the value of the button.\n\t\t * Note: Unlike native radio buttons, NcActionButton are not grouped by name, so you need to connect them by bind correct modelValue.\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' && typeof this.modelValue !== 'boolean') {\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 (typeof this.modelValue !== 'boolean') {\n\t\t\t\t\t\t// String-value radios behavior is similar to native - click on checked radio does nothing\n\t\t\t\t\t\tif (!this.isChecked) {\n\t\t\t\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Boolean radio allows to uncheck\n\t\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Checkbox toggles value\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","CheckIcon","ChevronRightIcon","ActionTextMixin","behavior","attributes","event"],"mappings":";;;;AAwYA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC;AAAAA,IACA,kBAAAC;AAAAA,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;AAAA;AAAA,IAaA,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,WAAA,OAAA,KAAA,cAAA,YACA,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,OAAA,KAAA,cAAA,YAEA,KAAA,aACA,KAAA,MAAA,qBAAA,KAAA,KAAA,IAIA,KAAA,MAAA,qBAAA,CAAA,KAAA,SAAA,IAIA,KAAA,MAAA,qBAAA,CAAA,KAAA,SAAA;AAAA,IAGA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionButton.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/Components/NcActionButtonGroup.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const t = require("../chunks/NcActionButtonGroup-hpwif0u3.cjs");
+const t = require("../chunks/NcActionButtonGroup-5PPiueIz.cjs");
 module.exports = t.NcActionButtonGroup;

package/dist/Components/NcActionButtonGroup.mjs

@@ -1,4 +1,4 @@
-import { N as f } from "../chunks/NcActionButtonGroup-D49ovBAN.mjs";
+import { N as f } from "../chunks/NcActionButtonGroup-oFPVvd4U.mjs";
 export {
   f as default
 };

package/dist/Components/NcActionCaption.cjs

@@ -1,35 +1,3 @@
-require('../assets/NcActionCaption-afJqyJO6.css');
 "use strict";
-const t = require("../chunks/_plugin-vue2_normalizer-DCfUPqga.cjs"), i = {
-  name: "NcActionCaption",
-  inject: {
-    isInSemanticMenu: {
-      from: "NcActions:isSemanticMenu",
-      default: !1
-    }
-  },
-  props: {
-    /**
-     * The caption's text
-     */
-    name: {
-      type: String,
-      required: !0
-    }
-  }
-};
-var r = function() {
-  var n = this, e = n._self._c;
-  return e("li", { staticClass: "app-navigation-caption", attrs: { role: n.isInSemanticMenu && "presentation" } }, [n._v(" " + n._s(n.name) + " ")]);
-}, a = [], s = /* @__PURE__ */ t.normalizeComponent(
-  i,
-  r,
-  a,
-  !1,
-  null,
-  "7c8f7463",
-  null,
-  null
-);
-const c = s.exports;
-module.exports = c;
+const t = require("../chunks/NcActionCaption-SIz5c1sE.cjs");
+module.exports = t.NcActionCaption;

package/dist/Components/NcActionCaption.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionCaption.cjs","sources":["../../src/components/NcActionCaption/NcActionCaption.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\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<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<NcActions>\n\t\t<NcActionCaption name=\"Test caption\" />\n\t\t<NcActionCaption name=\"Test caption 2\" />\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"app-navigation-caption\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t{{ name }}\n\t</li>\n</template>\n\n<script>\nexport default {\n\tname: 'NcActionCaption',\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 * The caption's text\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\t.app-navigation-caption {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tline-height: $clickable-area;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tuser-select: none;\n\t\tpointer-events: none;\n\t\tmargin-left: 12px;\n\t\tpadding-right: 14px;\n\t\theight: $clickable-area;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n</style>\n"],"names":["_sfc_main"],"mappings":";qEAsCAA,IAAA;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,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionCaption.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/Components/NcActionCaption.mjs

@@ -1,37 +1,4 @@
-import '../assets/NcActionCaption-afJqyJO6.css';
-import { n as t } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.mjs";
-const a = {
-  name: "NcActionCaption",
-  inject: {
-    isInSemanticMenu: {
-      from: "NcActions:isSemanticMenu",
-      default: !1
-    }
-  },
-  props: {
-    /**
-     * The caption's text
-     */
-    name: {
-      type: String,
-      required: !0
-    }
-  }
-};
-var i = function() {
-  var n = this, e = n._self._c;
-  return e("li", { staticClass: "app-navigation-caption", attrs: { role: n.isInSemanticMenu && "presentation" } }, [n._v(" " + n._s(n.name) + " ")]);
-}, r = [], s = /* @__PURE__ */ t(
-  a,
-  i,
-  r,
-  !1,
-  null,
-  "7c8f7463",
-  null,
-  null
-);
-const _ = s.exports;
+import { N as f } from "../chunks/NcActionCaption-vguA2tEL.mjs";
 export {
-  _ as default
+  f as default
 };

package/dist/Components/NcActionCaption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionCaption.mjs","sources":["../../src/components/NcActionCaption/NcActionCaption.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\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<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<NcActions>\n\t\t<NcActionCaption name=\"Test caption\" />\n\t\t<NcActionCaption name=\"Test caption 2\" />\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"app-navigation-caption\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t{{ name }}\n\t</li>\n</template>\n\n<script>\nexport default {\n\tname: 'NcActionCaption',\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 * The caption's text\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\t.app-navigation-caption {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tline-height: $clickable-area;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tuser-select: none;\n\t\tpointer-events: none;\n\t\tmargin-left: 12px;\n\t\tpadding-right: 14px;\n\t\theight: $clickable-area;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n</style>\n"],"names":["_sfc_main"],"mappings":";AAsCA,MAAAA,IAAA;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,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionCaption.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}