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

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;;;"}

package/dist/chunks/NcActionCaption-DHRMXPVe.cjs

@@ -0,0 +1,27 @@
+var l = require("../assets/NcActionCaption-Bp8mrIk7.css");
+const e = require("vue"), c = require("./_plugin-vue_export-helper-CTzpuyvq.cjs"), i = {
+  name: "NcActionCaption",
+  inject: {
+    isInSemanticMenu: {
+      from: "NcActions:isSemanticMenu",
+      default: !1
+    }
+  },
+  props: {
+    /**
+     * The caption's text
+     */
+    name: {
+      type: String,
+      required: !0
+    }
+  }
+}, o = ["role"];
+function r(s, p, n, u, _, t) {
+  return e.openBlock(), e.createElementBlock("li", {
+    class: "app-navigation-caption",
+    role: t.isInSemanticMenu && "presentation"
+  }, e.toDisplayString(n.name), 9, o);
+}
+const a = /* @__PURE__ */ c._export_sfc(i, [["render", r], ["__scopeId", "data-v-7c8f7463"]]);
+exports.NcActionCaption = a;

package/dist/chunks/NcActionCaption-DHRMXPVe.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionCaption-DHRMXPVe.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","_hoisted_1","$options","vue","$props"],"mappings":";mFAsCAA,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,EAAA,gBAAAC,EAAA,IAAA,GAAA,GAAAH,CAAA;;;;"}

package/dist/chunks/NcActionCheckbox-CwnTOfl9.mjs

@@ -0,0 +1,113 @@
+import "../assets/NcActionCheckbox-BPfv1P4U.css";
+import { A as l } from "./actionGlobal-BypLxitr.mjs";
+import { G as s } from "./GenRandomId-BW3iYFf9.mjs";
+import { openBlock as d, createElementBlock as r, normalizeClass as o, createElementVNode as n, withKeys as h, withModifiers as u, toDisplayString as m, createCommentVNode as f } from "vue";
+import { _ as k } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const b = {
+  name: "NcActionCheckbox",
+  mixins: [l],
+  inject: {
+    isInSemanticMenu: {
+      from: "NcActions:isSemanticMenu",
+      default: !1
+    }
+  },
+  props: {
+    /**
+     * id attribute of the checkbox element
+     */
+    id: {
+      type: String,
+      default: () => "action-" + s(),
+      validator: (t) => t.trim() !== ""
+    },
+    /**
+     * checked state of the the checkbox element
+     */
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * value of the checkbox input
+     */
+    value: {
+      type: [String, Number],
+      default: ""
+    },
+    /**
+     * disabled state of the checkbox element
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "change",
+    "check",
+    "uncheck",
+    "update:modelValue"
+  ],
+  computed: {
+    /**
+     * determines if the action is focusable
+     *
+     * @return {boolean} is the action focusable ?
+     */
+    isFocusable() {
+      return !this.disabled;
+    },
+    /**
+     * aria-checked attribute for role="menuitemcheckbox"
+     *
+     * @return {'true'|'false'|undefined} aria-checked value if needed
+     */
+    ariaChecked() {
+      if (this.isInSemanticMenu)
+        return this.modelValue ? "true" : "false";
+    }
+  },
+  methods: {
+    checkInput() {
+      this.$refs.label.click();
+    },
+    onChange(t) {
+      this.$emit("update:modelValue", this.$refs.checkbox.checked), this.$emit("change", t), this.$refs.checkbox.checked ? this.$emit("check") : this.$emit("uncheck");
+    }
+  }
+}, x = ["role"], _ = ["role", "aria-checked"], p = ["id", "disabled", "checked", "value"], C = ["for"];
+function g(t, a, c, I, y, e) {
+  return d(), r("li", {
+    class: o(["action", { "action--disabled": c.disabled }]),
+    role: e.isInSemanticMenu && "presentation"
+  }, [
+    n("span", {
+      class: "action-checkbox",
+      role: e.isInSemanticMenu && "menuitemcheckbox",
+      "aria-checked": e.ariaChecked
+    }, [
+      n("input", {
+        id: c.id,
+        ref: "checkbox",
+        disabled: c.disabled,
+        checked: c.modelValue,
+        value: c.value,
+        class: o([{ focusable: e.isFocusable }, "checkbox action-checkbox__checkbox"]),
+        type: "checkbox",
+        onKeydown: a[0] || (a[0] = h(u((...i) => e.checkInput && e.checkInput(...i), ["exact", "prevent"]), ["enter"])),
+        onChange: a[1] || (a[1] = (...i) => e.onChange && e.onChange(...i))
+      }, null, 42, p),
+      n("label", {
+        ref: "label",
+        for: c.id,
+        class: "action-checkbox__label"
+      }, m(t.text), 9, C),
+      f("", !0)
+    ], 8, _)
+  ], 10, x);
+}
+const A = /* @__PURE__ */ k(b, [["render", g], ["__scopeId", "data-v-f70de5e1"]]);
+export {
+  A as N
+};

package/dist/chunks/NcActionCheckbox-CwnTOfl9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionCheckbox-CwnTOfl9.mjs","sources":["../../src/components/NcActionCheckbox/NcActionCheckbox.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<NcActions>\n\t\t<NcActionCheckbox @change=\"alert('(un)checked !')\">First choice</NcActionCheckbox>\n\t\t<NcActionCheckbox value=\"second\" @change=\"alert('(un)checked !')\">Second choice</NcActionCheckbox>\n\t\t<NcActionCheckbox :model-value=\"true\" @change=\"alert('(un)checked !')\">Third choice (checked)</NcActionCheckbox>\n\t\t<NcActionCheckbox :disabled=\"true\" @change=\"alert('(un)checked !')\">Second choice (disabled)</NcActionCheckbox>\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<span class=\"action-checkbox\" :role=\"isInSemanticMenu && 'menuitemcheckbox'\" :aria-checked=\"ariaChecked\">\n\t\t\t<input :id=\"id\"\n\t\t\t\tref=\"checkbox\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:checked=\"modelValue\"\n\t\t\t\t:value=\"value\"\n\t\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"checkbox action-checkbox__checkbox\"\n\t\t\t\t@keydown.enter.exact.prevent=\"checkInput\"\n\t\t\t\t@change=\"onChange\">\n\t\t\t<label ref=\"label\" :for=\"id\" class=\"action-checkbox__label\">{{ text }}</label>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcActionCheckbox',\n\n\tmixins: [ActionGlobalMixin],\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 * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * checked state of the the checkbox element\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * value of the checkbox input\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the checkbox element\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'change',\n\t\t'check',\n\t\t'uncheck',\n\t\t'update:modelValue',\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 * aria-checked attribute for role=\"menuitemcheckbox\"\n\t\t *\n\t\t * @return {'true'|'false'|undefined} aria-checked value if needed\n\t\t */\n\t\tariaChecked() {\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\treturn this.modelValue ? 'true' : 'false'\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\t},\n\n\tmethods: {\n\t\tcheckInput(/* event */) {\n\t\t\t// by clicking we also trigger the change event\n\t\t\tthis.$refs.label.click()\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', this.$refs.checkbox.checked)\n\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\n\t\t\tif (this.$refs.checkbox.checked) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is checked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('check')\n\t\t\t} else {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is unchecked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('uncheck')\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\n.action-checkbox {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\tline-height: $clickable-area;\n\n\t/* checkbox/radio fixes */\n\t&__checkbox {\n\t\tposition: absolute;\n\t\ttop: auto;\n\t\tleft: -10000px;\n\n\t\toverflow: hidden;\n\n\t\twidth: 1px;\n\t\theight: 1px;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center; // align checkbox to text\n\n\t\twidth: 100%;\n\t\tpadding: 0 !important;\n\t\tpadding-right: $icon-margin !important;\n\n\t\t// checkbox-width is 12px, border is 2\n\t\t// (44 - 14 - 2) / 2 = 14\n\t\t&::before {\n\t\t\tmargin: 0 14px 0 !important;\n\t\t}\n\t}\n\n\t&--disabled {\n\t\t&,\n\t\t.action-checkbox__label {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","GenRandomId","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","normalizeClass","$props","$options","_cache","args","toDisplayString","_ctx"],"mappings":";;;;;AA6DA,MAAAA,IAAA;AAAA;;EAKC,QAAA;AAAA,IACC,kBAAA;AAAA,MACC,MAAA;AAAA;;;EAKF,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,IAAA;AAAA;MAEC,SAAA,MAAA,YAAAC,EAAA;AAAA;;;;;;;;;;;;IAeD,OAAA;AAAA,MACC,MAAA,CAAA,QAAA,MAAA;AAAA;;;;;IAOD,UAAA;AAAA;;;;EAMD,OAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;EAGD,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE,aAAA,CAAA,KAAA;AAAA;;;;;;;;AAUC,eAAA,KAAA,aAAA,SAAA;AAAA;;EAMH,SAAA;AAAA,IACC,aAAA;;;IAIA,SAAAC,GAAA;6FAeC,KAAA,MAAA,SAAA,UAMC,KAAA,MAAA,OAAA,IAOA,KAAA,MAAA,SAAA;AAAA;;AAIJ,GA/KAC,IAAA,CAAA,MAAA,GAAAC,IAAA,CAAA,QAAA,cAAA,GAAAC,IAAA,CAAA,MAAA,YAAA,WAAA,OAAA,GAAAC,IAAA,CAAA,KAAA;;;IAqCK,OAAAC,EAAA,CAAA,UAAA,EAAA,oBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA,IAA0D,MAAAC,EAAA,oBAAA;AAAA;;MACvD,OAAA;AAAA,MAAyB,MAAAA,EAAA,oBAAA;AAAA,MAA+C,gBAAAA,EAAA;AAAA;;QACrE,IAAAD,EAAA;AAAA,QACP,KAAA;AAAA,QACC,UAAAA,EAAA;AAAA,QACA,SAAAA,EAAA;AAAA,QACA,OAAAA,EAAA;AAAA,QACA,OAAAD,EAAA,CAAA,EAAA,WAAAE,EAAA,YAAA,GAAA,oCAAA,CAAA;AAAA,QACD,MAAA;AAAA;QAGC,UAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAF,EAAA,YAAAA,EAAA,SAAA,GAAAE,CAAA;AAAA,MAhDL,GAAA,MAAA,IAAAN,CAAA;AAAA;QAiDU,KAAA;AAAA,QAAa,KAAAG,EAAA;AAAA,QAAS,OAAA;AAAA,MAAkC,GAAAI,EAAAC,EAAA,IAAA,GAAA,GAAAP,CAAA;AAAA;IAjDlE,GAAA,GAAAF,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;;"}

package/dist/chunks/NcActionCheckbox-D2GKYfvY.cjs

@@ -0,0 +1,107 @@
+var _ = require("../assets/NcActionCheckbox-BPfv1P4U.css");
+const l = require("./actionGlobal-CmaqfbSh.cjs"), o = require("./GenRandomId-B2O1GMbH.cjs"), e = require("vue"), s = require("./_plugin-vue_export-helper-CTzpuyvq.cjs"), d = {
+  name: "NcActionCheckbox",
+  mixins: [l.ActionGlobalMixin],
+  inject: {
+    isInSemanticMenu: {
+      from: "NcActions:isSemanticMenu",
+      default: !1
+    }
+  },
+  props: {
+    /**
+     * id attribute of the checkbox element
+     */
+    id: {
+      type: String,
+      default: () => "action-" + o.GenRandomId(),
+      validator: (a) => a.trim() !== ""
+    },
+    /**
+     * checked state of the the checkbox element
+     */
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * value of the checkbox input
+     */
+    value: {
+      type: [String, Number],
+      default: ""
+    },
+    /**
+     * disabled state of the checkbox element
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "change",
+    "check",
+    "uncheck",
+    "update:modelValue"
+  ],
+  computed: {
+    /**
+     * determines if the action is focusable
+     *
+     * @return {boolean} is the action focusable ?
+     */
+    isFocusable() {
+      return !this.disabled;
+    },
+    /**
+     * aria-checked attribute for role="menuitemcheckbox"
+     *
+     * @return {'true'|'false'|undefined} aria-checked value if needed
+     */
+    ariaChecked() {
+      if (this.isInSemanticMenu)
+        return this.modelValue ? "true" : "false";
+    }
+  },
+  methods: {
+    checkInput() {
+      this.$refs.label.click();
+    },
+    onChange(a) {
+      this.$emit("update:modelValue", this.$refs.checkbox.checked), this.$emit("change", a), this.$refs.checkbox.checked ? this.$emit("check") : this.$emit("uncheck");
+    }
+  }
+}, r = ["role"], u = ["role", "aria-checked"], h = ["id", "disabled", "checked", "value"], m = ["for"];
+function k(a, n, t, f, x, c) {
+  return e.openBlock(), e.createElementBlock("li", {
+    class: e.normalizeClass(["action", { "action--disabled": t.disabled }]),
+    role: c.isInSemanticMenu && "presentation"
+  }, [
+    e.createElementVNode("span", {
+      class: "action-checkbox",
+      role: c.isInSemanticMenu && "menuitemcheckbox",
+      "aria-checked": c.ariaChecked
+    }, [
+      e.createElementVNode("input", {
+        id: t.id,
+        ref: "checkbox",
+        disabled: t.disabled,
+        checked: t.modelValue,
+        value: t.value,
+        class: e.normalizeClass([{ focusable: c.isFocusable }, "checkbox action-checkbox__checkbox"]),
+        type: "checkbox",
+        onKeydown: n[0] || (n[0] = e.withKeys(e.withModifiers((...i) => c.checkInput && c.checkInput(...i), ["exact", "prevent"]), ["enter"])),
+        onChange: n[1] || (n[1] = (...i) => c.onChange && c.onChange(...i))
+      }, null, 42, h),
+      e.createElementVNode("label", {
+        ref: "label",
+        for: t.id,
+        class: "action-checkbox__label"
+      }, e.toDisplayString(a.text), 9, m),
+      e.createCommentVNode("", !0)
+    ], 8, u)
+  ], 10, r);
+}
+const b = /* @__PURE__ */ s._export_sfc(d, [["render", k], ["__scopeId", "data-v-f70de5e1"]]);
+exports.NcActionCheckbox = b;

package/dist/chunks/NcActionCheckbox-D2GKYfvY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionCheckbox-D2GKYfvY.cjs","sources":["../../src/components/NcActionCheckbox/NcActionCheckbox.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<NcActions>\n\t\t<NcActionCheckbox @change=\"alert('(un)checked !')\">First choice</NcActionCheckbox>\n\t\t<NcActionCheckbox value=\"second\" @change=\"alert('(un)checked !')\">Second choice</NcActionCheckbox>\n\t\t<NcActionCheckbox :model-value=\"true\" @change=\"alert('(un)checked !')\">Third choice (checked)</NcActionCheckbox>\n\t\t<NcActionCheckbox :disabled=\"true\" @change=\"alert('(un)checked !')\">Second choice (disabled)</NcActionCheckbox>\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<span class=\"action-checkbox\" :role=\"isInSemanticMenu && 'menuitemcheckbox'\" :aria-checked=\"ariaChecked\">\n\t\t\t<input :id=\"id\"\n\t\t\t\tref=\"checkbox\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:checked=\"modelValue\"\n\t\t\t\t:value=\"value\"\n\t\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"checkbox action-checkbox__checkbox\"\n\t\t\t\t@keydown.enter.exact.prevent=\"checkInput\"\n\t\t\t\t@change=\"onChange\">\n\t\t\t<label ref=\"label\" :for=\"id\" class=\"action-checkbox__label\">{{ text }}</label>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcActionCheckbox',\n\n\tmixins: [ActionGlobalMixin],\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 * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * checked state of the the checkbox element\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * value of the checkbox input\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the checkbox element\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'change',\n\t\t'check',\n\t\t'uncheck',\n\t\t'update:modelValue',\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 * aria-checked attribute for role=\"menuitemcheckbox\"\n\t\t *\n\t\t * @return {'true'|'false'|undefined} aria-checked value if needed\n\t\t */\n\t\tariaChecked() {\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\treturn this.modelValue ? 'true' : 'false'\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\t},\n\n\tmethods: {\n\t\tcheckInput(/* event */) {\n\t\t\t// by clicking we also trigger the change event\n\t\t\tthis.$refs.label.click()\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', this.$refs.checkbox.checked)\n\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\n\t\t\tif (this.$refs.checkbox.checked) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is checked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('check')\n\t\t\t} else {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is unchecked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('uncheck')\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\n.action-checkbox {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\tline-height: $clickable-area;\n\n\t/* checkbox/radio fixes */\n\t&__checkbox {\n\t\tposition: absolute;\n\t\ttop: auto;\n\t\tleft: -10000px;\n\n\t\toverflow: hidden;\n\n\t\twidth: 1px;\n\t\theight: 1px;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center; // align checkbox to text\n\n\t\twidth: 100%;\n\t\tpadding: 0 !important;\n\t\tpadding-right: $icon-margin !important;\n\n\t\t// checkbox-width is 12px, border is 2\n\t\t// (44 - 14 - 2) / 2 = 14\n\t\t&::before {\n\t\t\tmargin: 0 14px 0 !important;\n\t\t}\n\t}\n\n\t&--disabled {\n\t\t&,\n\t\t.action-checkbox__label {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","GenRandomId","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","vue","$props","$options","_cache","args","_ctx"],"mappings":";0KA6DAA,IAAA;AAAA;;EAKC,QAAA;AAAA,IACC,kBAAA;AAAA,MACC,MAAA;AAAA;;;EAKF,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,IAAA;AAAA;MAEC,SAAA,MAAA,YAAAC,EAAA,YAAA;AAAA;;;;;;;;;;;;IAeD,OAAA;AAAA,MACC,MAAA,CAAA,QAAA,MAAA;AAAA;;;;;IAOD,UAAA;AAAA;;;;EAMD,OAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;EAGD,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE,aAAA,CAAA,KAAA;AAAA;;;;;;;;AAUC,eAAA,KAAA,aAAA,SAAA;AAAA;;EAMH,SAAA;AAAA,IACC,aAAA;;;IAIA,SAAAC,GAAA;6FAeC,KAAA,MAAA,SAAA,UAMC,KAAA,MAAA,OAAA,IAOA,KAAA,MAAA,SAAA;AAAA;;AAIJ,GA/KAC,IAAA,CAAA,MAAA,GAAAC,IAAA,CAAA,QAAA,cAAA,GAAAC,IAAA,CAAA,MAAA,YAAA,WAAA,OAAA,GAAAC,IAAA,CAAA,KAAA;;;IAqCK,OAAAC,EAAA,eAAA,CAAA,UAAA,EAAA,oBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA,IAA0D,MAAAC,EAAA,oBAAA;AAAA;;MACvD,OAAA;AAAA,MAAyB,MAAAA,EAAA,oBAAA;AAAA,MAA+C,gBAAAA,EAAA;AAAA;;QACrE,IAAAD,EAAA;AAAA,QACP,KAAA;AAAA,QACC,UAAAA,EAAA;AAAA,QACA,SAAAA,EAAA;AAAA,QACA,OAAAA,EAAA;AAAA,QACA,OAAAD,EAAA,eAAA,CAAA,EAAA,WAAAE,EAAA,YAAA,GAAA,oCAAA,CAAA;AAAA,QACD,MAAA;AAAA;QAGC,UAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAF,EAAA,YAAAA,EAAA,SAAA,GAAAE,CAAA;AAAA,MAhDL,GAAA,MAAA,IAAAN,CAAA;AAAA;QAiDU,KAAA;AAAA,QAAa,KAAAG,EAAA;AAAA,QAAS,OAAA;AAAA,MAAkC,GAAAD,EAAA,gBAAAK,EAAA,IAAA,GAAA,GAAAN,CAAA;AAAA;IAjDlE,GAAA,GAAAF,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;;;"}