@nextcloud/vue 9.0.0-alpha.0 → 9.0.0-alpha.2

package/dist/chunks/NcActionButton-BCDAgaDz.mjs

@@ -0,0 +1,181 @@
+import "../assets/NcActionButton-CgQyKNIq.css";
+import { C as b } from "./Check-C_8Ygo3G.mjs";
+import { C as _ } from "./ChevronRight-SLd1I986.mjs";
+import { A as f } from "./actionText-k6jBccGZ.mjs";
+import { resolveComponent as u, openBlock as n, createElementBlock as i, normalizeClass as c, createElementVNode as o, mergeProps as k, renderSlot as y, normalizeStyle as C, toDisplayString as s, createBlock as r, createCommentVNode as d, pushScopeId as g, popScopeId as v } from "vue";
+import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const I = {
+  name: "NcActionButton",
+  components: {
+    CheckIcon: b,
+    ChevronRightIcon: _
+  },
+  mixins: [f],
+  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
+    }
+  },
+  emits: ["update:modelValue"],
+  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));
+    }
+  }
+}, S = (e) => (g("data-v-68a40e32"), e = e(), v(), e), x = ["role"], B = ["aria-label", "disabled", "title", "type"], A = {
+  key: 0,
+  class: "action-button__longtext-wrapper"
+}, M = { class: "action-button__name" }, N = /* @__PURE__ */ S(() => /* @__PURE__ */ o("br", null, null, -1)), T = ["textContent"], z = ["textContent"], R = {
+  key: 2,
+  class: "action-button__text"
+}, w = {
+  key: 5,
+  class: "action-button__pressed-icon material-design-icon"
+};
+function E(e, l, a, F, L, t) {
+  const h = u("ChevronRightIcon"), m = u("CheckIcon");
+  return n(), i("li", {
+    class: c(["action", { "action--disabled": a.disabled }]),
+    role: t.isInSemanticMenu && "presentation"
+  }, [
+    o("button", k({
+      "aria-label": e.ariaLabel,
+      class: ["action-button button-vue", {
+        "action-button--active": t.isChecked,
+        focusable: t.isFocusable
+      }],
+      disabled: a.disabled,
+      title: e.title,
+      type: t.nativeType
+    }, t.buttonAttributes, {
+      onClick: l[0] || (l[0] = (...p) => t.handleClick && t.handleClick(...p))
+    }), [
+      y(e.$slots, "icon", {}, () => [
+        o("span", {
+          class: c([[e.isIconUrl ? "action-button__icon--url" : e.icon], "action-button__icon"]),
+          style: C({ backgroundImage: e.isIconUrl ? "url(".concat(e.icon, ")") : null }),
+          "aria-hidden": "true"
+        }, null, 6)
+      ], !0),
+      e.name ? (n(), i("span", A, [
+        o("strong", M, s(e.name), 1),
+        N,
+        o("span", {
+          class: "action-button__longtext",
+          textContent: s(e.text)
+        }, null, 8, T)
+      ])) : e.isLongText ? (n(), i("span", {
+        key: 1,
+        class: "action-button__longtext",
+        textContent: s(e.text)
+      }, null, 8, z)) : (n(), i("span", R, s(e.text), 1)),
+      a.isMenu ? (n(), r(h, {
+        key: 3,
+        size: 20,
+        class: "action-button__menu-icon"
+      })) : t.isChecked === !0 ? (n(), r(m, {
+        key: 4,
+        size: 20,
+        class: "action-button__pressed-icon"
+      })) : t.isChecked === !1 ? (n(), i("span", w)) : d("", !0),
+      d("", !0)
+    ], 16, B)
+  ], 10, x);
+}
+const G = /* @__PURE__ */ V(I, [["render", E], ["__scopeId", "data-v-68a40e32"]]);
+export {
+  G as N
+};

package/dist/chunks/NcActionButton-BCDAgaDz.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionButton-BCDAgaDz.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 v-model=\"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 v-model=\"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 v-model=\"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 v-model=\"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 v-model=\"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:disabled=\"disabled\"\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\temits: ['update:modelValue'],\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","Check","ChevronRight","behavior","attributes","event","_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_6","_hoisted_7","normalizeClass","$props","$options","createElementVNode","mergeProps","_ctx","_cache","args","renderSlot","normalizeStyle","openBlock","createElementBlock","_hoisted_3","_hoisted_9","createCommentVNode"],"mappings":";;;;;;AAyYA,MAAAA,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,WAAAC;AAAA,IACA,kBAAAC;AAAA;;EAID,QAAA;AAAA,IACC,kBAAA;AAAA,MACC,MAAA;AAAA;;;EAKF,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;IAcC,UAAA;AAAA;;;;;;;IASA,QAAA;AAAA;;;;;;;;;;MAYC,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,UAAA,YAAA,SAAA,SAAA,QAAA,EAAA,SAAAA,CAAA;AAAA;;;;;;;;;;;;;MAeA,MAAA,CAAA,SAAA,MAAA;AAAA;;;;;;IAQD,OAAA;AAAA;;;;;EAQD,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE,aAAA,CAAA,KAAA;AAAA;;;;;4EAQC,KAAA,eAAA,KAAA,QAED,KAAA;AAAA;;;;;AAOA,aAAA,KAAA,SAAA,YAAA,KAAA,SAAA,UACC,KAAA;;;;;IAQF,mBAAA;AACC,YAAAC,IAAA,CAAA;oFAOEA,EAAA,OAAA,2EAED,KAAA,SAAA,cAAA,KAAA,eAAA,YAAA,KAAA,eAAA,UAECA,EAAA,OAAA,oBACAA,EAAA,cAAA,IAAA,KAAA,eAAA,OAAA,UAAA,KAAA,aAAA,SAAA,kIAOFA;AAAA;;EAIF,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,YAAAC,GAAA;AACC,WAAA,QAAAA,CAAA,oFAIE,OAAA,KAAA,cAAA,YAEC,KAAA,aACC,KAAA,MAAA,qBAAA,KAAA,KAAA;;;AAaP,uDA/iBAC,IAAA,CAAA,MAAA,GAAAC,IAAA,CAAA,cAAA,YAAA,SAAA,MAAA;;EAkWI,OAAA;GACQC,IAAA,EAAA,OAAA,sBAAA,yEAnWZC,IAAA,CAAA,aAAA,GAAAC,IAAA,CAAA,aAAA;;EAoXgB,OAAA;;;EAKyB,OAAA;;;;;IA5CpC,OAAAC,EAAA,CAAA,UAAA,EAAA,oBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA,IAA0D,MAAAC,EAAA,oBAAA;AAAA;IAC7DC,EAAA,UAAAC,EAAA;AAAA,MAAS,cAAAC,EAAA;AAAA;;;;MAKP,UAAAJ,EAAA;AAAA,MACA,OAAAI,EAAA;AAAA,MACA,MAAAH,EAAA;AAAA;MAEA,SAAAI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAL,EAAA,eAAAA,EAAA,YAAA,GAAAK,CAAA;AAAA;MAEDC,EAAAH,EAAA,QAAA,QAAA,CAAA,GAAA,MAAA;AAAA;UACQ,OAAAL,EAAA,CAAA,CAAAK,EAAA,YAAA,6BAAAA,EAAA,IAAA,GAAA,qBAAA,CAAA;AAAA,UACL,OAAAI,EAAA,EAAA,iBAAAJ,EAAA,YAAA,OAAA,OAAAA,EAAA,MAAA,OAAA,KAAA,CAAA;AAAA,UACD,eAAA;AAAA;;gBAKFK,EAAA,GAAAC,EAAA,QAAAC,GAAA;AAAA;;;UAQO,OAAA;AAAA;QAzWV,GAAA,MAAA,GAAAd,CAAA;AAAA;;QAgXI,OAAA;AAAA;MAhXJ,GAAA,MAAA,GAAAC,CAAA;;;QAuXoC,MAAA;AAAA,QAAU,OAAA;AAAA;;QACA,MAAA;AAAA,QAAU,OAAA;AAAA,kCACrDW,EAAA,GAAAC,EAAA,QAAAE,CAAA,KAzXHC,EAAA,IAAA,EAAA;AAAA;IAAA,GAAA,IAAAlB,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;;"}

package/dist/chunks/NcActionButton-CY1fHJQ9.cjs

@@ -0,0 +1,174 @@
+var N = require("../assets/NcActionButton-CgQyKNIq.css");
+const c = require("./Check-DfVOclb6.cjs"), u = require("./ChevronRight-54kOBYZt.cjs"), r = require("./actionText-CmiezrFO.cjs"), e = require("vue"), d = require("./_plugin-vue_export-helper-CTzpuyvq.cjs"), h = {
+  name: "NcActionButton",
+  components: {
+    CheckIcon: c.Check,
+    ChevronRightIcon: u.ChevronRight
+  },
+  mixins: [r.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: (t) => ["button", "checkbox", "radio", "reset", "submit"].includes(t)
+    },
+    /**
+     * 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
+    }
+  },
+  emits: ["update:modelValue"],
+  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 t = {};
+      return this.isInSemanticMenu ? (t.role = "menuitem", this.type === "radio" ? (t.role = "menuitemradio", t["aria-checked"] = this.isChecked ? "true" : "false") : (this.type === "checkbox" || this.nativeType === "button" && this.modelValue !== null) && (t.role = "menuitemcheckbox", t["aria-checked"] = this.modelValue === null ? "mixed" : this.modelValue ? "true" : "false")) : this.modelValue !== null && this.nativeType === "button" && (t["aria-pressed"] = this.modelValue ? "true" : "false"), t;
+    }
+  },
+  methods: {
+    /**
+     * Forward click event, let mixin handle the close-after-click and emit new modelValue if needed
+     * @param {MouseEvent} event The click event
+     */
+    handleClick(t) {
+      this.onClick(t), (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));
+    }
+  }
+}, m = (t) => (e.pushScopeId("data-v-68a40e32"), t = t(), e.popScopeId(), t), p = ["role"], b = ["aria-label", "disabled", "title", "type"], k = {
+  key: 0,
+  class: "action-button__longtext-wrapper"
+}, _ = { class: "action-button__name" }, y = /* @__PURE__ */ m(() => /* @__PURE__ */ e.createElementVNode("br", null, null, -1)), C = ["textContent"], f = ["textContent"], V = {
+  key: 2,
+  class: "action-button__text"
+}, g = {
+  key: 5,
+  class: "action-button__pressed-icon material-design-icon"
+};
+function B(t, i, o, I, S, n) {
+  const l = e.resolveComponent("ChevronRightIcon"), s = e.resolveComponent("CheckIcon");
+  return e.openBlock(), e.createElementBlock("li", {
+    class: e.normalizeClass(["action", { "action--disabled": o.disabled }]),
+    role: n.isInSemanticMenu && "presentation"
+  }, [
+    e.createElementVNode("button", e.mergeProps({
+      "aria-label": t.ariaLabel,
+      class: ["action-button button-vue", {
+        "action-button--active": n.isChecked,
+        focusable: n.isFocusable
+      }],
+      disabled: o.disabled,
+      title: t.title,
+      type: n.nativeType
+    }, n.buttonAttributes, {
+      onClick: i[0] || (i[0] = (...a) => n.handleClick && n.handleClick(...a))
+    }), [
+      e.renderSlot(t.$slots, "icon", {}, () => [
+        e.createElementVNode("span", {
+          class: e.normalizeClass([[t.isIconUrl ? "action-button__icon--url" : t.icon], "action-button__icon"]),
+          style: e.normalizeStyle({ backgroundImage: t.isIconUrl ? "url(".concat(t.icon, ")") : null }),
+          "aria-hidden": "true"
+        }, null, 6)
+      ], !0),
+      t.name ? (e.openBlock(), e.createElementBlock("span", k, [
+        e.createElementVNode("strong", _, e.toDisplayString(t.name), 1),
+        y,
+        e.createElementVNode("span", {
+          class: "action-button__longtext",
+          textContent: e.toDisplayString(t.text)
+        }, null, 8, C)
+      ])) : t.isLongText ? (e.openBlock(), e.createElementBlock("span", {
+        key: 1,
+        class: "action-button__longtext",
+        textContent: e.toDisplayString(t.text)
+      }, null, 8, f)) : (e.openBlock(), e.createElementBlock("span", V, e.toDisplayString(t.text), 1)),
+      o.isMenu ? (e.openBlock(), e.createBlock(l, {
+        key: 3,
+        size: 20,
+        class: "action-button__menu-icon"
+      })) : n.isChecked === !0 ? (e.openBlock(), e.createBlock(s, {
+        key: 4,
+        size: 20,
+        class: "action-button__pressed-icon"
+      })) : n.isChecked === !1 ? (e.openBlock(), e.createElementBlock("span", g)) : e.createCommentVNode("", !0),
+      e.createCommentVNode("", !0)
+    ], 16, b)
+  ], 10, p);
+}
+const v = /* @__PURE__ */ d._export_sfc(h, [["render", B], ["__scopeId", "data-v-68a40e32"]]);
+exports.NcActionButton = v;

package/dist/chunks/NcActionButton-CY1fHJQ9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionButton-CY1fHJQ9.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 v-model=\"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 v-model=\"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 v-model=\"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 v-model=\"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 v-model=\"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:disabled=\"disabled\"\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\temits: ['update:modelValue'],\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","Check","ChevronRight","behavior","attributes","event","_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_6","_hoisted_7","vue","$props","$options","_ctx","_cache","args","_hoisted_3","_hoisted_9"],"mappings":";8MAyYAA,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,WAAAC,EAAA;AAAA,IACA,kBAAAC,EAAA;AAAA;;EAID,QAAA;AAAA,IACC,kBAAA;AAAA,MACC,MAAA;AAAA;;;EAKF,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;IAcC,UAAA;AAAA;;;;;;;IASA,QAAA;AAAA;;;;;;;;;;MAYC,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,UAAA,YAAA,SAAA,SAAA,QAAA,EAAA,SAAAA,CAAA;AAAA;;;;;;;;;;;;;MAeA,MAAA,CAAA,SAAA,MAAA;AAAA;;;;;;IAQD,OAAA;AAAA;;;;;EAQD,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE,aAAA,CAAA,KAAA;AAAA;;;;;4EAQC,KAAA,eAAA,KAAA,QAED,KAAA;AAAA;;;;;AAOA,aAAA,KAAA,SAAA,YAAA,KAAA,SAAA,UACC,KAAA;;;;;IAQF,mBAAA;AACC,YAAAC,IAAA,CAAA;oFAOEA,EAAA,OAAA,2EAED,KAAA,SAAA,cAAA,KAAA,eAAA,YAAA,KAAA,eAAA,UAECA,EAAA,OAAA,oBACAA,EAAA,cAAA,IAAA,KAAA,eAAA,OAAA,UAAA,KAAA,aAAA,SAAA,kIAOFA;AAAA;;EAIF,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,YAAAC,GAAA;AACC,WAAA,QAAAA,CAAA,oFAIE,OAAA,KAAA,cAAA,YAEC,KAAA,aACC,KAAA,MAAA,qBAAA,KAAA,KAAA;;;AAaP,8EA/iBAC,IAAA,CAAA,MAAA,GAAAC,IAAA,CAAA,cAAA,YAAA,SAAA,MAAA;;EAkWI,OAAA;GACQC,IAAA,EAAA,OAAA,sBAAA,4FAnWZC,IAAA,CAAA,aAAA,GAAAC,IAAA,CAAA,aAAA;;EAoXgB,OAAA;;;EAKyB,OAAA;;;;;IA5CpC,OAAAC,EAAA,eAAA,CAAA,UAAA,EAAA,oBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA,IAA0D,MAAAC,EAAA,oBAAA;AAAA;IAC7DF,EAAA,mBAAA,UAAAA,EAAA,WAAA;AAAA,MAAS,cAAAG,EAAA;AAAA;;;;MAKP,UAAAF,EAAA;AAAA,MACA,OAAAE,EAAA;AAAA,MACA,MAAAD,EAAA;AAAA;MAEA,SAAAE,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAH,EAAA,eAAAA,EAAA,YAAA,GAAAG,CAAA;AAAA;MAEDL,EAAA,WAAAG,EAAA,QAAA,QAAA,CAAA,GAAA,MAAA;AAAA;UACQ,OAAAH,EAAA,eAAA,CAAA,CAAAG,EAAA,YAAA,6BAAAA,EAAA,IAAA,GAAA,qBAAA,CAAA;AAAA,UACL,OAAAH,EAAA,eAAA,EAAA,iBAAAG,EAAA,YAAA,OAAA,OAAAA,EAAA,MAAA,OAAA,KAAA,CAAA;AAAA,UACD,eAAA;AAAA;;gBAKFH,EAAA,UAAA,GAAAA,EAAA,mBAAA,QAAAM,GAAA;AAAA;;;UAQO,OAAA;AAAA;QAzWV,GAAA,MAAA,GAAAR,CAAA;AAAA;;QAgXI,OAAA;AAAA;MAhXJ,GAAA,MAAA,GAAAC,CAAA;;;QAuXoC,MAAA;AAAA,QAAU,OAAA;AAAA;;QACA,MAAA;AAAA,QAAU,OAAA;AAAA,kCACrDC,EAAA,UAAA,GAAAA,EAAA,mBAAA,QAAAO,CAAA,KAzXHP,EAAA,mBAAA,IAAA,EAAA;AAAA;IAAA,GAAA,IAAAJ,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;;;"}

package/dist/chunks/NcActionButtonGroup-D0d-HRnE.mjs

@@ -0,0 +1,55 @@
+import "../assets/NcActionButtonGroup-ChehtUip.css";
+import { defineComponent as t, openBlock as n, createElementBlock as o, toDisplayString as r, createCommentVNode as a, createElementVNode as s, renderSlot as i } from "vue";
+import { G as l } from "./GenRandomId-BW3iYFf9.mjs";
+import { r as d, a as c } from "./_l10n-D1NkaqfQ.mjs";
+import { _ as u } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+d();
+const m = t({
+  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
+    }
+  },
+  setup() {
+    return {
+      labelId: "nc-action-button-group-".concat(l())
+    };
+  },
+  methods: {
+    t: c
+  }
+}), p = ["role"], f = ["id"], b = ["aria-labelledby"];
+function _(e, g, I, N, S, $) {
+  return n(), o("li", {
+    class: "nc-button-group-base",
+    role: e.isInSemanticMenu && "presentation"
+  }, [
+    e.name ? (n(), o("div", {
+      key: 0,
+      id: e.labelId
+    }, r(e.name), 9, f)) : a("", !0),
+    s("ul", {
+      class: "nc-button-group-content",
+      role: "group",
+      "aria-labelledby": e.name ? e.labelId : void 0
+    }, [
+      i(e.$slots, "default")
+    ], 8, b)
+  ], 8, p);
+}
+const A = /* @__PURE__ */ u(m, [["render", _]]);
+export {
+  A as N
+};

package/dist/chunks/NcActionButtonGroup-D0d-HRnE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionButtonGroup-D0d-HRnE.mjs","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\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"l\">\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\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"c\">\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\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"r\">\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\tdata() {\n\t\treturn { alignment: 'l' }\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'\nimport { t } from '../../l10n.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\tsetup() {\n\t\treturn {\n\t\t\tlabelId: `nc-action-button-group-${GenRandomId()}`,\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\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\tgap: 4px; // required for the focus-visible outline\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\n\t\t\t&.action-button--active {\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tborder-radius: var(--border-radius-large);\n\t\t\t\tcolor: var(--color-primary-element-text);\n\n\t\t\t\t&:hover, &:focus, &:focus-within {\n\t\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.action-button__pressed-icon {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","defineComponent","_hoisted_1","_hoisted_2","_hoisted_3","_ctx","toDisplayString","createCommentVNode"],"mappings":";;;;;;AA8GA,MAAAA,IAAAC,EAAA;AAAA;EAGC,QAAA;AAAA,IACC,kBAAA;AAAA,MACC,MAAA;AAAA;;;EAKF,OAAA;AAAA;AAAA;AAAA;AAAA;MAKE,UAAA;AAAA,MACA,SAAA;AAAA;;;EAKF,QAAA;AACC,WAAA;AAAA;IAEA;AAAA;EAGD,SAAA;AAAA;;AAGD,CAAA,GA5IAC,IAAA,CAAA,MAAA,GAAAC,IAAA,CAAA,IAAA,GAAAC,IAAA,CAAA,iBAAA;;;IA4FK,OAAA;AAAA,IAA8B,MAAAC,EAAA,oBAAA;AAAA;;;MACf,IAAAA,EAAA;AAAA,IACd,GAAAC,EAAAD,EAAA,IAAA,GAAA,GAAAF,CAAA,KA9FNI,EAAA,IAAA,EAAA;AAAA;MAgGM,OAAA;AAAA,MAAgC,MAAA;AAAA,MAAc,mBAAAF,EAAA,OAAAA,EAAA,UAAA;AAAA;;IAhGpD,GAAA,GAAAD,CAAA;AAAA,EAAA,GAAA,GAAAF,CAAA;;;"}

package/dist/chunks/NcActionButtonGroup-DTLam8-g.cjs

@@ -0,0 +1,50 @@
+var _ = require("../assets/NcActionButtonGroup-ChehtUip.css");
+const e = require("vue"), o = require("./GenRandomId-B2O1GMbH.cjs"), t = require("./_l10n-CEec8lDL.cjs"), r = require("./_plugin-vue_export-helper-CTzpuyvq.cjs");
+t.register();
+const i = e.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
+    }
+  },
+  setup() {
+    return {
+      labelId: "nc-action-button-group-".concat(o.GenRandomId())
+    };
+  },
+  methods: {
+    t: t.t
+  }
+}), s = ["role"], a = ["id"], c = ["aria-labelledby"];
+function l(n, d, p, m, f, b) {
+  return e.openBlock(), e.createElementBlock("li", {
+    class: "nc-button-group-base",
+    role: n.isInSemanticMenu && "presentation"
+  }, [
+    n.name ? (e.openBlock(), e.createElementBlock("div", {
+      key: 0,
+      id: n.labelId
+    }, e.toDisplayString(n.name), 9, a)) : e.createCommentVNode("", !0),
+    e.createElementVNode("ul", {
+      class: "nc-button-group-content",
+      role: "group",
+      "aria-labelledby": n.name ? n.labelId : void 0
+    }, [
+      e.renderSlot(n.$slots, "default")
+    ], 8, c)
+  ], 8, s);
+}
+const u = /* @__PURE__ */ r._export_sfc(i, [["render", l]]);
+exports.NcActionButtonGroup = u;

package/dist/chunks/NcActionButtonGroup-DTLam8-g.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionButtonGroup-DTLam8-g.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\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"l\">\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\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"c\">\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\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"r\">\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\tdata() {\n\t\treturn { alignment: 'l' }\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'\nimport { t } from '../../l10n.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\tsetup() {\n\t\treturn {\n\t\t\tlabelId: `nc-action-button-group-${GenRandomId()}`,\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\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\tgap: 4px; // required for the focus-visible outline\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\n\t\t\t&.action-button--active {\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tborder-radius: var(--border-radius-large);\n\t\t\t\tcolor: var(--color-primary-element-text);\n\n\t\t\t\t&:hover, &:focus, &:focus-within {\n\t\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.action-button__pressed-icon {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","vue","_hoisted_1","_hoisted_2","_hoisted_3","_ctx"],"mappings":";;;AA8GA,MAAAA,IAAAC,EAAA,gBAAA;AAAA;EAGC,QAAA;AAAA,IACC,kBAAA;AAAA,MACC,MAAA;AAAA;;;EAKF,OAAA;AAAA;AAAA;AAAA;AAAA;MAKE,UAAA;AAAA,MACA,SAAA;AAAA;;;EAKF,QAAA;AACC,WAAA;AAAA;IAEA;AAAA;EAGD,SAAA;AAAA;;AAGD,CAAA,GA5IAC,IAAA,CAAA,MAAA,GAAAC,IAAA,CAAA,IAAA,GAAAC,IAAA,CAAA,iBAAA;;;IA4FK,OAAA;AAAA,IAA8B,MAAAC,EAAA,oBAAA;AAAA;;;MACf,IAAAA,EAAA;AAAA,IACd,GAAAJ,EAAA,gBAAAI,EAAA,IAAA,GAAA,GAAAF,CAAA,KA9FNF,EAAA,mBAAA,IAAA,EAAA;AAAA;MAgGM,OAAA;AAAA,MAAgC,MAAA;AAAA,MAAc,mBAAAI,EAAA,OAAAA,EAAA,UAAA;AAAA;;IAhGpD,GAAA,GAAAD,CAAA;AAAA,EAAA,GAAA,GAAAF,CAAA;;;;"}

package/dist/chunks/NcActionCaption-B_rOOzNC.mjs

@@ -0,0 +1,31 @@
+import "../assets/NcActionCaption-Bp8mrIk7.css";
+import { openBlock as n, createElementBlock as o, toDisplayString as c } from "vue";
+import { _ as i } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const a = {
+  name: "NcActionCaption",
+  inject: {
+    isInSemanticMenu: {
+      from: "NcActions:isSemanticMenu",
+      default: !1
+    }
+  },
+  props: {
+    /**
+     * The caption's text
+     */
+    name: {
+      type: String,
+      required: !0
+    }
+  }
+}, r = ["role"];
+function s(p, m, e, _, f, t) {
+  return n(), o("li", {
+    class: "app-navigation-caption",
+    role: t.isInSemanticMenu && "presentation"
+  }, c(e.name), 9, r);
+}
+const S = /* @__PURE__ */ i(a, [["render", s], ["__scopeId", "data-v-7c8f7463"]]);
+export {
+  S as N
+};

package/dist/chunks/NcActionCaption-B_rOOzNC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionCaption-B_rOOzNC.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","_hoisted_1","$options","toDisplayString","$props"],"mappings":";;;AAsCA,MAAAA,IAAA;AAAA;EAGC,QAAA;AAAA,IACC,kBAAA;AAAA,MACC,MAAA;AAAA;;;EAKF,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;AASD,GAzDAC,IAAA,CAAA,MAAA;;;IAgCK,OAAA;AAAA,IAAgC,MAAAC,EAAA,oBAAA;AAAA,EAChC,GAAAC,EAAAC,EAAA,IAAA,GAAA,GAAAH,CAAA;;;"}