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

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

package/dist/chunks/NcActionInput-CYt-FXxq.mjs

@@ -0,0 +1,339 @@
+import "../assets/NcActionInput-BmkpDXi3.css";
+import { N as g } from "./NcDateTimePicker-CpnkJmoO.mjs";
+import { N as V } from "./NcDateTimePickerNative-BJoVg44O.mjs";
+import { N as P } from "./NcPasswordField-CjdxvU1v.mjs";
+import { N as S } from "./NcSelect-qdi4yiIe.mjs";
+import { N as U } from "./NcTextField-CSVHVoW3.mjs";
+import { A as w } from "./actionGlobal-BypLxitr.mjs";
+import { G as m } from "./GenRandomId-BW3iYFf9.mjs";
+import { r as T, f as B, a as I } from "./_l10n-D1NkaqfQ.mjs";
+import { resolveComponent as n, openBlock as a, createElementBlock as r, normalizeClass as o, createElementVNode as d, renderSlot as D, normalizeStyle as b, withModifiers as F, toDisplayString as f, createCommentVNode as p, createBlock as c, mergeProps as u, createVNode as M, withCtx as O } from "vue";
+import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+T(B);
+const A = {
+  name: "NcActionInput",
+  components: {
+    NcDateTimePicker: g,
+    NcDateTimePickerNative: V,
+    NcPasswordField: P,
+    NcSelect: S,
+    NcTextField: U
+  },
+  mixins: [w],
+  inheritAttrs: !1,
+  props: {
+    /**
+     * id attribute of the checkbox element
+     */
+    id: {
+      type: String,
+      default: () => "action-" + m(),
+      validator: (t) => t.trim() !== ""
+    },
+    /**
+     * id attribute of the text input element
+     */
+    inputId: {
+      type: String,
+      default: () => "action-input-" + m(),
+      validator: (t) => t.trim() !== ""
+    },
+    /**
+     * Icon to show with the action, can be either a CSS class or an URL
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * type attribute of the input field
+     */
+    type: {
+      type: String,
+      default: "text",
+      validator(t) {
+        return [
+          "date",
+          "datetime-local",
+          "month",
+          "multiselect",
+          "number",
+          "password",
+          "search",
+          "tel",
+          "text",
+          "time",
+          "url",
+          "week",
+          "color",
+          "email"
+        ].indexOf(t) > -1;
+      }
+    },
+    /**
+     * id attribute for the native date time picker
+     */
+    idNativeDateTimePicker: {
+      type: String,
+      default: "date-time-picker_id"
+    },
+    /**
+     * Flag to use a native date time picker
+     */
+    isNativePicker: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The visible input label for accessibility purposes.
+     */
+    label: {
+      type: String,
+      default: null
+    },
+    /**
+     * If you want to show the label just above the
+     * input field, pass in `true` to this prop.
+     */
+    labelOutside: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * value attribute of the input field
+     */
+    modelValue: {
+      type: [String, Date, Number, Array],
+      default: ""
+    },
+    /**
+     * disabled state of the input field
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * aria-label attribute of the input field
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @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
+    },
+    /**
+     * Attribute forwarded to the underlying NcPasswordField and NcTextField
+     */
+    showTrailingButton: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Trailing button label forwarded to the underlying NcTextField
+     */
+    trailingButtonLabel: {
+      type: String,
+      default: I("Submit")
+    },
+    /**
+     * CSS class to apply to the root element.
+     */
+    class: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  emits: [
+    "submit",
+    "update:modelValue"
+  ],
+  computed: {
+    isIconUrl() {
+      try {
+        return new URL(this.icon);
+      } catch {
+        return !1;
+      }
+    },
+    isMultiselectType() {
+      return this.type === "multiselect";
+    },
+    nativeDatePickerType() {
+      switch (this.type) {
+        case "date":
+        case "month":
+        case "time":
+        case "week":
+        case "datetime-local":
+          return this.type;
+      }
+      return !1;
+    },
+    datePickerType() {
+      if (!this.isNativePicker)
+        switch (this.type) {
+          case "date":
+          case "month":
+          case "time":
+            return this.type;
+          case "datetime-local":
+            return "datetime";
+        }
+      return !1;
+    },
+    /**
+     * determines if the action is focusable
+     *
+     * @return {boolean} is the action focusable ?
+     */
+    isFocusable() {
+      return !this.disabled;
+    }
+  },
+  methods: {
+    // closing datepicker popup on mouseleave = unfocus
+    onLeave() {
+      this.$refs.datetimepicker && this.$refs.datetimepicker.$refs.datepicker && this.$refs.datetimepicker.$refs.datepicker.closePopup();
+    },
+    onSubmit(t) {
+      if (t.preventDefault(), t.stopPropagation(), !this.disabled)
+        this.$emit("submit", t);
+      else
+        return !1;
+    },
+    onUpdateModelValue(t) {
+      this.$emit("update:modelValue", t);
+    }
+  }
+}, C = { class: "action-input__icon-wrapper" }, L = ["disabled"], z = { class: "action-input__container" }, G = ["for"], R = { class: "action-input__input-container" }, q = {
+  key: 4,
+  class: "action-input__container"
+}, E = ["for"], j = { class: "action-input__input-container" };
+function H(t, i, e, J, K, l) {
+  const y = n("NcDateTimePicker"), _ = n("NcDateTimePickerNative"), k = n("NcSelect"), h = n("NcPasswordField"), v = n("NcColorPicker"), N = n("NcTextField");
+  return a(), r("li", {
+    class: o(["action", [{ "action--disabled": e.disabled }, t.$props.class]])
+  }, [
+    d("span", {
+      class: o([{
+        "action-input-picker--disabled": e.disabled,
+        "action-input--visible-label": e.labelOutside && e.label
+      }, "action-input"]),
+      onMouseleave: i[3] || (i[3] = (...s) => l.onLeave && l.onLeave(...s))
+    }, [
+      d("span", C, [
+        D(t.$slots, "icon", {}, () => [
+          d("span", {
+            class: o([[l.isIconUrl ? "action-input__icon--url" : e.icon], "action-input__icon"]),
+            style: b({ backgroundImage: l.isIconUrl ? "url(".concat(e.icon, ")") : null }),
+            "aria-hidden": "true"
+          }, null, 6)
+        ], !0)
+      ]),
+      d("form", {
+        ref: "form",
+        class: "action-input__form",
+        disabled: e.disabled,
+        onSubmit: i[2] || (i[2] = F((...s) => l.onSubmit && l.onSubmit(...s), ["prevent"]))
+      }, [
+        d("div", z, [
+          e.label && e.labelOutside ? (a(), r("label", {
+            key: 0,
+            class: o(["action-input__text-label", { "action-input__text-label--hidden": !e.labelOutside }]),
+            for: e.inputId
+          }, f(e.label), 11, G)) : p("", !0),
+          d("div", R, [
+            l.datePickerType ? (a(), c(y, u({
+              key: 0,
+              ref: "datetimepicker",
+              "model-value": e.modelValue,
+              style: { "z-index": "99999999999" },
+              placeholder: t.text,
+              disabled: e.disabled,
+              type: l.datePickerType,
+              "input-class": ["mx-input", { focusable: l.isFocusable }],
+              class: "action-input__datetimepicker"
+            }, t.$attrs, { "onUpdate:modelValue": l.onUpdateModelValue }), null, 16, ["model-value", "placeholder", "disabled", "type", "input-class", "onUpdate:modelValue"])) : e.isNativePicker ? (a(), c(_, u({
+              key: 1,
+              id: e.idNativeDateTimePicker,
+              "model-value": e.modelValue,
+              type: l.nativeDatePickerType,
+              "input-class": { focusable: l.isFocusable },
+              class: "action-input__datetimepicker"
+            }, t.$attrs, { "onUpdate:modelValue": l.onUpdateModelValue }), null, 16, ["id", "model-value", "type", "input-class", "onUpdate:modelValue"])) : l.isMultiselectType ? (a(), c(k, u({
+              key: 2,
+              "model-value": e.modelValue,
+              placeholder: t.text,
+              disabled: e.disabled,
+              "append-to-body": !1,
+              "input-class": { focusable: l.isFocusable },
+              class: "action-input__multi"
+            }, t.$attrs, { "onUpdate:modelValue": l.onUpdateModelValue }), null, 16, ["model-value", "placeholder", "disabled", "input-class", "onUpdate:modelValue"])) : e.type === "password" ? (a(), c(h, u({
+              key: 3,
+              id: e.inputId,
+              "model-value": e.modelValue,
+              label: e.label,
+              "label-outside": !e.label || e.labelOutside,
+              placeholder: t.text,
+              disabled: e.disabled,
+              "input-class": { focusable: l.isFocusable },
+              "show-trailing-button": e.showTrailingButton && !e.disabled
+            }, t.$attrs, { "onUpdate:modelValue": l.onUpdateModelValue }), null, 16, ["id", "model-value", "label", "label-outside", "placeholder", "disabled", "input-class", "show-trailing-button", "onUpdate:modelValue"])) : e.type === "color" ? (a(), r("div", q, [
+              e.label && e.type === "color" ? (a(), r("label", {
+                key: 0,
+                class: o(["action-input__text-label", { "action-input__text-label--hidden": !e.labelOutside }]),
+                for: e.inputId
+              }, f(e.label), 11, E)) : p("", !0),
+              d("div", j, [
+                M(v, u({
+                  id: "inputId",
+                  "model-value": e.modelValue,
+                  class: "colorpicker__trigger"
+                }, t.$attrs, {
+                  "onUpdate:modelValue": l.onUpdateModelValue,
+                  onSubmit: i[0] || (i[0] = (s) => t.$refs.form.requestSubmit())
+                }), {
+                  default: O(() => [
+                    d("button", {
+                      style: b({ "background-color": e.modelValue }),
+                      class: o(["colorpicker__preview", { focusable: l.isFocusable }])
+                    }, null, 6)
+                  ]),
+                  _: 1
+                }, 16, ["model-value", "onUpdate:modelValue"])
+              ])
+            ])) : (a(), c(N, u({
+              key: 5,
+              id: e.inputId,
+              "model-value": e.modelValue,
+              label: e.label,
+              "label-outside": !e.label || e.labelOutside,
+              placeholder: t.text,
+              disabled: e.disabled,
+              "input-class": { focusable: l.isFocusable },
+              type: e.type,
+              "trailing-button-icon": "arrowRight",
+              "trailing-button-label": e.trailingButtonLabel,
+              "show-trailing-button": e.showTrailingButton && !e.disabled
+            }, t.$attrs, {
+              onTrailingButtonClick: i[1] || (i[1] = (s) => t.$refs.form.requestSubmit()),
+              "onUpdate:modelValue": l.onUpdateModelValue
+            }), null, 16, ["id", "model-value", "label", "label-outside", "placeholder", "disabled", "input-class", "type", "trailing-button-label", "show-trailing-button", "onUpdate:modelValue"]))
+          ])
+        ])
+      ], 40, L)
+    ], 34)
+  ], 2);
+}
+const de = /* @__PURE__ */ x(A, [["render", H], ["__scopeId", "data-v-85423ea7"]]);
+export {
+  de as N
+};