@nextcloud/vue 9.0.0-alpha.6 → 9.0.0-alpha.8

package/dist/chunks/{NcActionSeparator-DKFXmIJ5.mjs → NcActionSeparator-Doekl1NX.mjs}

@@ -1,5 +1,5 @@
-import '../assets/NcActionSeparator-CEbb5P6P.css';
-import { openBlock, createElementBlock } from "vue";
+import '../assets/NcActionSeparator-Ct2RnclR.css';
+import { createElementBlock, openBlock } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
   name: "NcActionSeparator"
@@ -15,3 +15,4 @@ const NcActionSeparator = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sf
 export {
   NcActionSeparator as N
 };
+//# sourceMappingURL=NcActionSeparator-Doekl1NX.mjs.map

package/dist/chunks/{NcActionSeparator-DKFXmIJ5.mjs.map → NcActionSeparator-Doekl1NX.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcActionSeparator-DKFXmIJ5.mjs","sources":["../../src/components/NcActionSeparator/NcActionSeparator.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<li class=\"action action-separator action--disabled\" role=\"separator\" />\n</template>\n\n<script>\nexport default {\n\tname: 'NcActionSeparator',\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.action-separator {\n\theight: 0;\n\tmargin: 5px 10px 5px 15px;\n\tborder-bottom: 1px solid var(--color-border-dark);\n\tcursor: default;\n}\n</style>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;AAUA,MAAK,YAAU;AAAA,EACd,MAAM;AACP;;EANK,OAAM;AAAA,EAA2C,MAAK;;;AAA1D,SAAAA,UAAA,GAAAC,mBAAwE,MAAxE,UAAwE;;;"}
+{"version":3,"file":"NcActionSeparator-Doekl1NX.mjs","sources":["../../src/components/NcActionSeparator/NcActionSeparator.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<li class=\"action action-separator action--disabled\" role=\"separator\" />\n</template>\n\n<script>\nexport default {\n\tname: 'NcActionSeparator',\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.action-separator {\n\theight: 0;\n\tmargin: 5px 10px 5px 15px;\n\tborder-bottom: 1px solid var(--color-border-dark);\n\tcursor: default;\n}\n</style>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;AAUA,MAAK,YAAU;AAAA,EACd,MAAM;AACP;;EANK,OAAM;AAAA,EAA2C,MAAK;;;AAA1D,SAAAA,UAAA,GAAAC,mBAAwE,MAAxE,UAAwE;;;"}

package/dist/chunks/{NcActionText-ChktUmp9.mjs → NcActionText-VLCHOiIy.mjs}

@@ -1,13 +1,14 @@
-import '../assets/NcActionText-CV2sRLti.css';
-import { A as ActionTextMixin } from "./actionText-aI0owku1.mjs";
-import { openBlock, createElementBlock, createElementVNode, renderSlot, normalizeClass, normalizeStyle, createCommentVNode, toDisplayString } from "vue";
+import '../assets/NcActionText-0XNfku_2.css';
+import { A as ActionTextMixin } from "./actionText-BiV1_BZX.mjs";
+import { a as NC_ACTIONS_IS_SEMANTIC_MENU } from "./useNcActions-CiGWxAJE.mjs";
+import { createElementBlock, openBlock, createElementVNode, renderSlot, createCommentVNode, normalizeStyle, normalizeClass, toDisplayString } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
   name: "NcActionText",
   mixins: [ActionTextMixin],
   inject: {
     isInSemanticMenu: {
-      from: "NcActions:isSemanticMenu",
+      from: NC_ACTIONS_IS_SEMANTIC_MENU,
       default: false
     }
   }
@@ -57,7 +58,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 8, _hoisted_1);
 }
-const NcActionText = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-824615f4"]]);
+const NcActionText = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ca69a5d8"]]);
 export {
   NcActionText as N
 };
+//# sourceMappingURL=NcActionText-VLCHOiIy.mjs.map

package/dist/chunks/NcActionText-VLCHOiIy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionText-VLCHOiIy.mjs","sources":["../../src/components/NcActionText/NcActionText.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<li class=\"action\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<span class=\"action-text\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span v-if=\"icon !== ''\"\n\t\t\t\t\t:class=\"[isIconUrl ? 'action-text__icon--url' : icon]\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text__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-text__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-text__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\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-text__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\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-text__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-text__text\">{{ text }}</span>\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 ActionTextMixin from '../../mixins/actionText.js'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\nexport default {\n\tname: 'NcActionText',\n\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\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-item('text');\n@include action--disabled;\n\n.action-text {\n\t&,\n\tspan {\n\t\tcursor: default;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_normalizeClass","_normalizeStyle","_createCommentVNode","_openBlock","_toDisplayString"],"mappings":";;;;AAkDA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,QAAQ,CAAC,eAAe;AAAA,EAExB,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AACF;AA7DA,MAAA,aAAA,CAAA,MAAA;;EAAA,KAAA;AAAA,EAoBI,OAAM;;AACE,MAAA,aAAA,EAAA,OAAM,oBAAmB;AArBrC,MAAA,aAAA,CAAA,aAAA;AAAA,MAAA,aAAA,CAAA,aAAA;;EAAA,KAAA;AAAA,EAsCgB,OAAM;;;sBAhCrBA,mBAqCK,MAAA;AAAA,IArCD,OAAM;AAAA,IAAU,MAAM,SAAgB,oBAAA;AAAA;IACzCC,mBAmCO,QAAA;AAAA,MAnCD,OAAM;AAAA,MACV,gDAAO,KAAO,WAAA,KAAA,QAAA,GAAA,IAAA;AAAA;MAEfC,WAMO,yBANP,MAMO;AAAA,QALM,KAAI,SAAA,mBAAhBF,mBAI6B,QAAA;AAAA,UAfjC,KAAA;AAAA,UAYM,OAZNG,eAYc,CAAA,CAAA,KAAA,YAAuC,2BAAA,KAAA,IAAI,GAG9C,mBAAmB,CAAA;AAAA,UAFzB,eAAY;AAAA,UACX,OAdNC,eAAA,EAAA,iBAcgC,KAAS,YAAA,OAAU,KAAI,IAAA,MAAA,KAAA,CAAA;AAAA,uBAdvDC,mBAAA,IAAA,IAAA;AAAA;MAmBe,KAAI,QAAhBC,aAAAN,mBASO,QATP,YASO;AAAA,QAPNC,mBAES,UAFT,YAESM,gBADL,KAAI,IAAA,GAAA,CAAA;AAAA,kCAERN,mBAAI,MAAA,MAAA,MAAA,EAAA;AAAA,QAGJA,mBAAoD,QAAA;AAAA,UAA9C,OAAM;AAAA,UA3BhB,aA2BwCM,gBAAa,KAAD,IAAA;AAAA,QA3BpD,GAAA,MAAA,GAAA,UAAA;AAAA,YAiCoB,KAAU,2BAA3BP,mBAEiB,QAAA;AAAA,QAnCpB,KAAA;AAAA,QAkCI,OAAM;AAAA,QAlCV,aAmCIO,gBAAa,KAAD,IAAA;AAAA,MAnChB,GAAA,MAAA,GAAA,UAAA,mBAsCGP,mBAAwD,QAAxD,YAAwDO,gBAAd,KAAI,IAAA,GAAA,CAAA;AAAA,MAtCjDF,mBAAA,IAAA,IAAA;AAAA;EAAA,GAAA,GAAA,UAAA;;;"}

package/dist/chunks/{NcActionTextEditable-D3Iix8Je.mjs → NcActionTextEditable-nTbwgRy2.mjs}

@@ -1,12 +1,15 @@
-import '../assets/NcActionTextEditable-Nufxk13g.css';
-import { A as ActionTextMixin } from "./actionText-aI0owku1.mjs";
-import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
-import { A as ArrowRight } from "./ArrowRight-CCodNfTT.mjs";
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, normalizeStyle, withModifiers, toDisplayString, createCommentVNode, mergeProps, withDirectives, createVNode, vShow } from "vue";
+import '../assets/NcActionTextEditable-ZlNtR_B_.css';
+import { A as ActionTextMixin } from "./actionText-BiV1_BZX.mjs";
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { A as ArrowLeft } from "./ArrowLeft-CanHG70H.mjs";
+import { A as ArrowRight } from "./ArrowRight-DQT24Cb-.mjs";
+import { i as isRtl } from "./rtl-v0UOPAM7.mjs";
+import { resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, normalizeStyle, withModifiers, createCommentVNode, withDirectives, toDisplayString, mergeProps, createBlock, vShow } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
   name: "NcActionTextEditable",
   components: {
+    ArrowLeft,
     ArrowRight
   },
   mixins: [ActionTextMixin],
@@ -16,7 +19,7 @@ const _sfc_main = {
      */
     id: {
       type: String,
-      default: () => "action-" + GenRandomId(),
+      default: () => "action-" + createElementId(),
       validator: (id) => id.trim() !== ""
     },
     /**
@@ -39,6 +42,11 @@ const _sfc_main = {
     "update:modelValue",
     "submit"
   ],
+  setup() {
+    return {
+      isRtl
+    };
+  },
   computed: {
     /**
      * determines if the action is focusable
@@ -49,7 +57,7 @@ const _sfc_main = {
       return !this.disabled;
     },
     computedId() {
-      return GenRandomId();
+      return createElementId();
     }
   },
   methods: {
@@ -74,6 +82,7 @@ const _hoisted_3 = ["for"];
 const _hoisted_4 = ["id", "disabled", "value"];
 const _hoisted_5 = ["for"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ArrowLeft = resolveComponent("ArrowLeft");
   const _component_ArrowRight = resolveComponent("ArrowRight");
   return openBlock(), createElementBlock("li", {
     class: normalizeClass(["action", { "action--disabled": $props.disabled }])
@@ -116,7 +125,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           for: $props.id,
           class: "action-text-editable__label"
         }, [
-          createVNode(_component_ArrowRight, { size: 20 })
+          $setup.isRtl ? (openBlock(), createBlock(_component_ArrowLeft, {
+            key: 0,
+            size: 20
+          })) : (openBlock(), createBlock(_component_ArrowRight, {
+            key: 1,
+            size: 20
+          }))
         ], 8, _hoisted_5), [
           [vShow, !$props.disabled]
         ])
@@ -124,7 +139,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 2);
 }
-const NcActionTextEditable = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b406d881"]]);
+const NcActionTextEditable = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-823cc9f9"]]);
 export {
   NcActionTextEditable as N
 };
+//# sourceMappingURL=NcActionTextEditable-nTbwgRy2.mjs.map

package/dist/chunks/NcActionTextEditable-nTbwgRy2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionTextEditable-nTbwgRy2.mjs","sources":["../../src/components/NcActionTextEditable/NcActionTextEditable.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [Actions](#Actions) component slots.\nAll undocumented attributes will be bound to the textarea. e.g. `maxlength`\n\n```\n<template>\n\t<NcActions>\n\t\t<NcActionTextEditable model-value=\"This is a textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable :disabled=\"true\" model-value=\"This is a disabled textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable name=\"Please edit the text\" model-value=\"This is a textarea with name\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t</NcActions>\n</template>\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tPencil,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span class=\"action-text-editable\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-text-editable__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text-editable__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form ref=\"form\"\n\t\t\t\tclass=\"action-text-editable__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<input :id=\"id\" type=\"submit\" class=\"action-text-editable__submit\">\n\n\t\t\t\t<!-- name -->\n\t\t\t\t<label v-if=\"name\"\n\t\t\t\t\tclass=\"action-text-editable__name\"\n\t\t\t\t\t:for=\"computedId\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</label>\n\n\t\t\t\t<textarea :id=\"computedId\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t:value=\"modelValue\"\n\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t:class=\"['action-text-editable__textarea', { focusable: isFocusable }]\"\n\t\t\t\t\t@input=\"onInput\" />\n\n\t\t\t\t<!-- allow the custom font to inject a ::before\n\t\t\t\t\tnot possible on input[type=submit] -->\n\t\t\t\t<label v-show=\"!disabled\" :for=\"id\" class=\"action-text-editable__label\">\n\t\t\t\t\t<ArrowLeft v-if=\"isRtl\" :size=\"20\" />\n\t\t\t\t\t<ArrowRight v-else :size=\"20\" />\n\t\t\t\t</label>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nimport { isRtl } from '../../utils/rtl.ts'\n\nexport default {\n\tname: 'NcActionTextEditable',\n\n\tcomponents: {\n\t\tArrowLeft,\n\t\tArrowRight,\n\t},\n\n\tmixins: [ActionTextMixin],\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-' + createElementId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * disabled state of the text area\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'update:modelValue',\n\t\t'submit',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisRtl,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\tcomputedId() {\n\t\t\treturn createElementId()\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', event.target.value)\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-text-editable {\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: var(--default-clickable-area);\n\n\t& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t/* Keep padding to define the width to\n\t\t\tassure correct position of a possible text */\n\t\tpadding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t&:deep(.material-design-icon) {\n\t\twidth: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\topacity: $opacity_full;\n\n\t\t.material-design-icon__svg {\n\t\t\tvertical-align: middle;\n\t\t}\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\n\t\tposition: relative;\n\t\tmargin: $input-margin 0;\n\t\tpadding-inline-end: $icon-margin;\n\t}\n\n\t&__submit {\n\t\tposition: absolute;\n\t\tinset-inline-start: 0;\n\t\ttop: auto;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t\tz-index: -1;\n\t\topacity: 0;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// bottom-right corner\n\t\tposition: absolute;\n\t\tinset-inline-end: calc($icon-margin + 1px);\n\t\tbottom: 1px;\n\t\twidth: calc(var(--default-clickable-area) - $input-margin * 2);\n\t\theight: calc(var(--default-clickable-area) - $input-margin * 2);\n\t\tbox-sizing: border-box;\n\t\tmargin: 0;\n\t\tpadding: 7px 6px;\n\n\t\tborder: 0;\n\t\tborder-radius: 50%;\n\t\t/* Avoid background under border */\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-clip: padding-box;\n\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t/* Inputs inside popover supports text, submit & reset */\n\t&__textarea {\n\t\tflex: 1 1 auto;\n\t\tcolor: inherit;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\tmin-height: calc(var(--default-clickable-area) * 2 - $input-margin * 2); /* twice the element margin-y */\n\t\tmax-height: calc(var(--default-clickable-area) * 3 - $input-margin * 2); /* twice the element margin-y */\n\t\t// block width widening\n\t\tmin-width: calc(var(--default-clickable-area) * 4);\n\t\twidth: 100% !important;\n\t\tmargin: 0;\n\n\t\t// if disabled, change cursor\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t/* only show confirm borders if input is not focused */\n\t\t&:not(:active):not(:hover):not(:focus) {\n\t\t\t&:invalid {\n\t\t\t\t& + .action-text-editable__label {\n\t\t\t\t\tbackground-color: var(--color-error);\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t&:active,\n\t\t\t\t&:hover,\n\t\t\t\t&:focus {\n\t\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&:active,\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t/* above previous input */\n\t\t\t\tz-index: 2;\n\n\t\t\t\tborder-color: var(--color-primary-element);\n\t\t\t\tborder-inline-start-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-text-editable {\n\tmargin-bottom: calc($icon-margin - $input-margin);\n}\n\n// same for first item\nli:first-child > .action-text-editable {\n\tmargin-top: calc($icon-margin - $input-margin);\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_normalizeStyle","_withModifiers","_toDisplayString","_createCommentVNode","_mergeProps","_createBlock"],"mappings":"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"}

package/dist/chunks/{NcActions-BJ703bdY.mjs → NcActions-CgKHXNbF.mjs}

@@ -1,12 +1,13 @@
-import '../assets/NcActions-P5DOkDHr.css';
+import '../assets/NcActions-D7gPHaUE.css';
 import { useElementBounding, useWindowSize } from "@vueuse/core";
-import { computed, ref, toRef, warn, h, Fragment, mergeProps } from "vue";
-import { g as getTrapStack } from "./focusTrap-Cecv_gjR.mjs";
-import { r as register, m as t4, a as t } from "./_l10n-D7WwrqS-.mjs";
-import { N as NcButton, i as isSlotPopulated } from "./NcButton-C3eisBbK.mjs";
-import { N as NcPopover } from "./NcPopover-Cmspgso4.mjs";
-import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
-import { D as DotsHorizontal } from "./DotsHorizontal-bCAjz9wZ.mjs";
+import { warn, h, ref, toRef, computed, Fragment, mergeProps } from "vue";
+import { u as useTrapStackControl } from "./useTrapStackControl-b3A_383w.mjs";
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { N as NcButton, i as isSlotPopulated } from "./NcButton-BHLqKKYP.mjs";
+import { r as register, m as t4, a as t } from "./_l10n-7kR7gXFc.mjs";
+import { D as DotsHorizontal } from "./DotsHorizontal-AMVAlTNH.mjs";
+import { N as NcPopover } from "./NcPopover-C3ZoyUjc.mjs";
+import { N as NC_ACTIONS_CLOSE_MENU, a as NC_ACTIONS_IS_SEMANTIC_MENU } from "./useNcActions-CiGWxAJE.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register(t4);
 const focusableSelector = ".focusable";
@@ -27,7 +28,8 @@ const _sfc_main = {
        * Provide the role for NcAction* components in the NcActions content.
        * @type {import('vue').ComputedRef<boolean>}
        */
-      "NcActions:isSemanticMenu": computed(() => this.actionsMenuSemanticType === "menu")
+      [NC_ACTIONS_IS_SEMANTIC_MENU]: computed(() => this.actionsMenuSemanticType === "menu"),
+      [NC_ACTIONS_CLOSE_MENU]: this.closeMenu
     };
   },
   props: {
@@ -76,18 +78,6 @@ const _sfc_main = {
       type: Boolean,
       default: false
     },
-    /**
-     * Specifies the button type used for trigger and single actions buttons
-     * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,
-     * the default button style will be applied.
-     */
-    type: {
-      type: String,
-      validator(value) {
-        return ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"].indexOf(value) !== -1;
-      },
-      default: null
-    },
     /**
      * Icon to show for the toggle menu button
      * when more than one action is inside the actions component.
@@ -152,18 +142,35 @@ const _sfc_main = {
     inline: {
       type: Number,
       default: 0
+    },
+    /**
+     * Specifies the button variant used for trigger and single actions buttons.
+     *
+     * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success.
+     * If left empty, the default button style will be applied.
+     *
+     * @since 8.23.0
+     */
+    variant: {
+      type: String,
+      validator(value) {
+        return ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"].includes(value);
+      },
+      default: null
     }
   },
   emits: [
-    "open",
-    "update:open",
-    "close",
-    "focus",
+    "click",
     "blur",
-    "click"
+    "focus",
+    "close",
+    "closed",
+    "open",
+    "opened",
+    "update:open"
   ],
   setup(props) {
-    const randomId = `menu-${GenRandomId()}`;
+    const randomId = createElementId();
     const triggerRandomId = `trigger-${randomId}`;
     const triggerButton = ref();
     const { top, bottom } = useElementBounding(triggerButton);
@@ -199,13 +206,12 @@ const _sfc_main = {
       /**
        * @type {'menu'|'navigation'|'dialog'|'tooltip'|'unknown'}
        */
-      actionsMenuSemanticType: "unknown",
-      externalFocusTrapStack: []
+      actionsMenuSemanticType: "unknown"
     };
   },
   computed: {
-    triggerBtnType() {
-      return this.type || (this.primary ? "primary" : this.menuName ? "secondary" : "tertiary");
+    triggerButtonVariant() {
+      return this.variant || (this.primary ? "primary" : this.menuName ? "secondary" : "tertiary");
     },
     /**
      * A11y roles and keyboard navigation configuration depending on the semantic type
@@ -261,7 +267,6 @@ const _sfc_main = {
       this.opened = state;
     },
     opened() {
-      this.intersectIntoCurrentFocusTrapStack();
       if (this.opened) {
         document.body.addEventListener("keydown", this.handleEscapePressed);
       } else {
@@ -269,6 +274,11 @@ const _sfc_main = {
       }
     }
   },
+  created() {
+    useTrapStackControl(() => this.opened, {
+      disabled: () => this.config.withFocusTrap
+    });
+  },
   methods: {
     /**
      * Get the name of the action component
@@ -279,31 +289,6 @@ const _sfc_main = {
     getActionName(action) {
       return action?.type?.name;
     },
-    /**
-     * When the component has its own focus trap, then it is managed by global trap stack by focus-trap.
-     *
-     * However if the component has no focus trap and is used inside another focus trap - there is an issue.
-     * By default popover content is rendered in body or other container, which is likely outside the current focus trap containers.
-     * It results in broken behavior from focus-trap.
-     *
-     * We need to pause all the focus traps for opening popover and then unpause them back after closing.
-     */
-    intersectIntoCurrentFocusTrapStack() {
-      if (this.config.withFocusTrap) {
-        return;
-      }
-      if (this.opened) {
-        this.externalFocusTrapStack = [...getTrapStack()];
-        for (const trap of this.externalFocusTrapStack) {
-          trap.pause();
-        }
-      } else {
-        for (const trap of this.externalFocusTrapStack) {
-          trap.unpause();
-        }
-        this.externalFocusTrapStack = [];
-      }
-    },
     /**
      * Do we have exactly one Action and
      * is it allowed as a standalone element?
@@ -354,12 +339,16 @@ const _sfc_main = {
     /**
      * Called when popover is shown after the show delay
      */
-    onOpen() {
+    onOpened() {
       this.$nextTick(() => {
         this.focusFirstAction(null);
         this.resizePopover();
+        this.$emit("opened");
       });
     },
+    onClosed() {
+      this.$emit("closed");
+    },
     /**
      * Handle resizing the popover to make sure users can discover there is more to scroll
      */
@@ -394,30 +383,6 @@ const _sfc_main = {
     getFocusableMenuItemElements() {
       return this.$refs.menu.querySelectorAll(focusableSelector);
     },
-    /**
-     * Focus nearest focusable item on mouse move.
-     * DO NOT change the focus if the target is already focused
-     * this will prevent issues with input being unfocused
-     * on mouse move
-     * @param {PointerEvent} event - The mouse move event
-     */
-    onMouseFocusAction(event) {
-      if (document?.activeElement === event.target) {
-        return;
-      }
-      const menuItem = event.target.closest("li");
-      if (menuItem && this.$refs.menu.contains(menuItem)) {
-        const focusableItem = menuItem.querySelector(focusableSelector);
-        if (focusableItem) {
-          const focusList = this.getFocusableMenuItemElements();
-          const focusIndex = [...focusList].indexOf(focusableItem);
-          if (focusIndex > -1) {
-            this.focusIndex = focusIndex;
-            this.focusAction();
-          }
-        }
-      }
-    },
     /**
      * Dispatches the keydown listener to different handlers
      *
@@ -612,7 +577,7 @@ const _sfc_main = {
         title = text;
       }
       const propsToForward = { ...action?.props ?? {} };
-      const nativeType = ["submit", "reset"].includes(propsToForward.type) ? propsToForward.modelValue : "button";
+      const type = ["submit", "reset"].includes(propsToForward.type) ? propsToForward.modelValue : "button";
       delete propsToForward.modelValue;
       delete propsToForward.type;
       return h(
@@ -623,11 +588,11 @@ const _sfc_main = {
             class: "action-item action-item--single",
             "aria-label": action?.props?.["aria-label"] || text,
             title,
-            // If it has a menuName, we use a secondary button
-            type: this.type || (buttonText ? "secondary" : "tertiary"),
             disabled: this.disabled || action?.props?.disabled,
             pressed: action?.props?.modelValue,
-            nativeType,
+            type,
+            // If it has a menuName, we use a secondary button
+            variant: this.variant || (buttonText ? "secondary" : "tertiary"),
             onFocus: this.onFocus,
             onBlur: this.onBlur,
             // forward any pressed state from NcButton just like NcActionButton does
@@ -660,16 +625,16 @@ const _sfc_main = {
           setReturnFocus: this.config.withFocusTrap ? this.$refs.triggerButton?.$el : null,
           focusTrap: this.config.withFocusTrap,
           onShow: this.openMenu,
-          onApplyShow: this.onOpen,
+          onAfterShow: this.onOpened,
+          onAfterClose: this.onClosed,
           onHide: this.closeMenu
         },
         {
           trigger: () => h(NcButton, {
             id: triggerRandomId,
             class: "action-item__menutoggle",
-            type: this.triggerBtnType,
             disabled: this.disabled,
-            ariaHidden: this.ariaHidden,
+            variant: this.triggerButtonVariant,
             ref: "triggerButton",
             "aria-label": this.menuName ? null : this.ariaLabel,
             // 'aria-controls' should only present together with a valid aria-haspopup
@@ -688,7 +653,6 @@ const _sfc_main = {
             },
             tabindex: "-1",
             onKeydown: this.onKeydown,
-            onMousemove: this.onMouseFocusAction,
             ref: "menu"
           }, [
             h("ul", {
@@ -725,7 +689,7 @@ const _sfc_main = {
         {
           class: [
             "action-items",
-            `action-item--${this.triggerBtnType}`
+            `action-item--${this.triggerButtonVariant}`
           ]
         },
         [
@@ -754,7 +718,7 @@ const _sfc_main = {
       {
         class: [
           "action-item action-item--default-popover",
-          `action-item--${this.triggerBtnType}`,
+          `action-item--${this.triggerButtonVariant}`,
           {
             "action-item--open": this.opened
           }
@@ -766,7 +730,8 @@ const _sfc_main = {
     );
   }
 };
-const NcActions = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-89500edf"]]);
+const NcActions = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7403ceee"]]);
 export {
   NcActions as N
 };
+//# sourceMappingURL=NcActions-CgKHXNbF.mjs.map