@nextcloud/vue 8.18.0 → 8.20.0

package/dist/chunks/NcActionTextEditable-DgdiBv6b.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionTextEditable-DgdiBv6b.cjs","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 v-model=\"text1\">\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 v-model=\"text2\" disabled>\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=\"text3\" v-model=\"text3\">\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\tdata() {\n\t\treturn {\n\t\t\ttext1: 'This is a textarea',\n\t\t\ttext2: 'This is a disabled textarea',\n\t\t\ttext3: 'This is a textarea with name',\n\t\t}\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=\"model\"\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<ArrowRight :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 { useModelMigration } from '../../composables/useModelMigration.ts'\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tname: 'NcActionTextEditable',\n\n\tcomponents: {\n\t\tArrowRight,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\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\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 * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\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/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t/**\n\t\t * Emitted when the inputs value changes\n\t\t *\n\t\t * @type {string|Date}\n\t\t */\n\t\t'update:modelValue',\n\t\t/** Same as `update:modelValue` but with a different event name */\n\t\t'update:model-value',\n\t\t'submit',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value')\n\t\treturn {\n\t\t\tmodel,\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 GenRandomId()\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\n\t\t\tthis.model = 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-right: $icon-margin;\n\t}\n\n\t&__submit {\n\t\tposition: absolute;\n\t\tleft: -10000px;\n\t\ttop: auto;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\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\tright: calc($icon-margin + 1);\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-left-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":["ArrowRight","ActionTextMixin","GenRandomId","useModelMigration"],"mappings":";;;;;;AAkGA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAA,WAAA;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,WAAAA,eAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,YAAAC,wBAAA;AAAA,MACA,WAAA,QAAA,GAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,QAAAC,kBAAAA,kBAAA,SAAA,cAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAAD,wBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,QAAA,OAAA;AAMA,WAAA,MAAA,SAAA,KAAA;AAEA,WAAA,QAAA,MAAA,OAAA;AAAA,IACA;AAAA,IACA,SAAA,OAAA;AACA,YAAA,eAAA;AACA,YAAA,gBAAA;AACA,UAAA,CAAA,KAAA,UAAA;AAMA,aAAA,MAAA,UAAA,KAAA;AAAA,MACA,OAAA;AAEA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcActions-BeDyeq8X.mjs → NcActions-BUZ5Oprh.mjs}

@@ -1,12 +1,12 @@
-import '../assets/NcActions-fmLIlJ2i.css';
+import '../assets/NcActions-DM_LoRlx.css';
 import NcButton from "../Components/NcButton.mjs";
-import { N as NcPopover } from "./NcPopover-DbeCmze0.mjs";
+import { N as NcPopover } from "./NcPopover-DzYbNu-I.mjs";
 import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
-import { r as register, s as t4, a as t } from "./_l10n-JYjUKekn.mjs";
+import { r as register, s as t4, a as t } from "./_l10n-DXr-EzLn.mjs";
 import { g as getTrapStack } from "./focusTrap-Cecv_gjR.mjs";
 import { useElementBounding, useWindowSize } from "@vueuse/core";
 import Vue, { computed, ref, toRef } from "vue";
-import { D as DotsHorizontal } from "./DotsHorizontal-Cd2x8oz2.mjs";
+import { D as DotsHorizontal } from "./DotsHorizontal-C6LNsw4N.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 register(t4);
 const focusableSelector = ".focusable";
@@ -156,10 +156,7 @@ const _sfc_main = {
      */
     boundariesElement: {
       type: Element,
-      default: () => {
-        var _a;
-        return (_a = document.querySelector("#content-vue")) != null ? _a : document.querySelector("body");
-      }
+      default: () => document.querySelector("#content-vue") ?? document.querySelector("body")
     },
     /**
      * Selector for the actions' popover container
@@ -193,8 +190,8 @@ const _sfc_main = {
     "click"
   ],
   setup(props) {
-    const randomId = "menu-".concat(GenRandomId());
-    const triggerRandomId = "trigger-".concat(randomId);
+    const randomId = `menu-${GenRandomId()}`;
+    const triggerRandomId = `trigger-${randomId}`;
     const triggerButton = ref();
     const { top, bottom } = useElementBounding(triggerButton);
     const { top: boundaryTop, bottom: boundaryBottom } = useElementBounding(toRef(props, "boundariesElement"));
@@ -337,8 +334,7 @@ const _sfc_main = {
      * @return {string} the name of the action component
      */
     getActionName(action) {
-      var _a, _b, _c, _d, _e;
-      return (_e = (_c = (_b = (_a = action == null ? void 0 : action.componentOptions) == null ? void 0 : _a.Ctor) == null ? void 0 : _b.extendOptions) == null ? void 0 : _c.name) != null ? _e : (_d = action == null ? void 0 : action.componentOptions) == null ? void 0 : _d.tag;
+      return action?.componentOptions?.Ctor?.extendOptions?.name ?? action?.componentOptions?.tag;
     },
     /**
      * When the component has its own focus trap, then it is managed by global trap stack by focus-trap.
@@ -396,20 +392,22 @@ const _sfc_main = {
       this.$emit("open");
     },
     async closeMenu(returnFocus = true) {
-      var _a, _b;
       if (!this.opened) {
         return;
       }
       await this.$nextTick();
       this.opened = false;
-      (_a = this.$refs.popover) == null ? void 0 : _a.clearFocusTrap({ returnFocus });
+      this.$refs.popover?.clearFocusTrap({ returnFocus });
       this.$emit("update:open", false);
       this.$emit("close");
       this.focusIndex = 0;
       if (returnFocus) {
-        (_b = this.$refs.triggerButton) == null ? void 0 : _b.$el.focus();
+        this.$refs.triggerButton?.$el.focus();
       }
     },
+    onClosed() {
+      this.$emit("closed");
+    },
     /**
      * Called when popover is shown after the show delay
      */
@@ -430,7 +428,7 @@ const _sfc_main = {
         let actionHeight = 0;
         for (const action of this.$refs.menuList.children) {
           if (currentHeight + action.clientHeight / 2 > this.maxMenuHeight) {
-            inner.style.height = "".concat(currentHeight - actionHeight / 2, "px");
+            inner.style.height = `${currentHeight - actionHeight / 2}px`;
             break;
           }
           actionHeight = action.clientHeight;
@@ -655,19 +653,18 @@ const _sfc_main = {
       }
     }
     const renderInlineAction = (action) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
-      const iconProp = (_b = (_a = action == null ? void 0 : action.componentOptions) == null ? void 0 : _a.propsData) == null ? void 0 : _b.icon;
-      const icon = (_f = (_e = (_d = (_c = action == null ? void 0 : action.data) == null ? void 0 : _c.scopedSlots) == null ? void 0 : _d.icon()) == null ? void 0 : _e[0]) != null ? _f : this.isIconUrl(iconProp) ? h("img", { class: "action-item__menutoggle__icon", attrs: { src: iconProp, alt: "" } }) : h("span", { class: ["icon", iconProp] });
-      const attrs = ((_g = action == null ? void 0 : action.data) == null ? void 0 : _g.attrs) || {};
-      const clickListener = (_i = (_h = action == null ? void 0 : action.componentOptions) == null ? void 0 : _h.listeners) == null ? void 0 : _i.click;
-      const text = (_n = (_m = (_l = (_k = (_j = action == null ? void 0 : action.componentOptions) == null ? void 0 : _j.children) == null ? void 0 : _k[0]) == null ? void 0 : _l.text) == null ? void 0 : _m.trim) == null ? void 0 : _n.call(_m);
-      const ariaLabel = ((_p = (_o = action == null ? void 0 : action.componentOptions) == null ? void 0 : _o.propsData) == null ? void 0 : _p.ariaLabel) || text;
+      const iconProp = action?.componentOptions?.propsData?.icon;
+      const icon = action?.data?.scopedSlots?.icon()?.[0] ?? (this.isIconUrl(iconProp) ? h("img", { class: "action-item__menutoggle__icon", attrs: { src: iconProp, alt: "" } }) : h("span", { class: ["icon", iconProp] }));
+      const attrs = action?.data?.attrs || {};
+      const clickListener = action?.componentOptions?.listeners?.click;
+      const text = action?.componentOptions?.children?.[0]?.text?.trim?.();
+      const ariaLabel = action?.componentOptions?.propsData?.ariaLabel || text;
       const buttonText = this.forceName ? text : "";
-      let title = (_r = (_q = action == null ? void 0 : action.componentOptions) == null ? void 0 : _q.propsData) == null ? void 0 : _r.title;
+      let title = action?.componentOptions?.propsData?.title;
       if (!(this.forceName || title)) {
         title = text;
       }
-      const propsToForward = { ...(_t = (_s = action == null ? void 0 : action.componentOptions) == null ? void 0 : _s.propsData) != null ? _t : {} };
+      const propsToForward = { ...action?.componentOptions?.propsData ?? {} };
       const nativeType = ["submit", "reset"].includes(propsToForward.type) ? propsToForward.modelValue : "button";
       delete propsToForward.modelValue;
       delete propsToForward.type;
@@ -676,20 +673,20 @@ const _sfc_main = {
         {
           class: [
             "action-item action-item--single",
-            (_u = action == null ? void 0 : action.data) == null ? void 0 : _u.staticClass,
-            (_v = action == null ? void 0 : action.data) == null ? void 0 : _v.class
+            action?.data?.staticClass,
+            action?.data?.class
           ],
           attrs: {
             ...attrs,
             "aria-label": ariaLabel,
             title
           },
-          ref: (_w = action == null ? void 0 : action.data) == null ? void 0 : _w.ref,
+          ref: action?.data?.ref,
           props: {
             // If it has a menuName, we use a secondary button
             type: this.type || (buttonText ? "secondary" : "tertiary"),
-            disabled: this.disabled || ((_y = (_x = action == null ? void 0 : action.componentOptions) == null ? void 0 : _x.propsData) == null ? void 0 : _y.disabled),
-            pressed: (_A = (_z = action == null ? void 0 : action.componentOptions) == null ? void 0 : _z.propsData) == null ? void 0 : _A.modelValue,
+            disabled: this.disabled || action?.componentOptions?.propsData?.disabled,
+            pressed: action?.componentOptions?.propsData?.modelValue,
             nativeType,
             ...propsToForward
           },
@@ -697,8 +694,8 @@ const _sfc_main = {
             focus: this.onFocus,
             blur: this.onBlur,
             // forward any pressed state from NcButton just like NcActionButton does
-            "update:pressed": (_D = (_C = (_B = action == null ? void 0 : action.componentOptions) == null ? void 0 : _B.listeners) == null ? void 0 : _C["update:modelValue"]) != null ? _D : () => {
-            },
+            "update:pressed": action?.componentOptions?.listeners?.["update:modelValue"] ?? (() => {
+            }),
             // If we have a click listener,
             // we bind it to execute on click and forward the click event
             ...!!clickListener && {
@@ -717,8 +714,7 @@ const _sfc_main = {
       );
     };
     const renderActionsPopover = (actions2) => {
-      var _a, _b;
-      const triggerIcon = ((_a = this.$slots.icon) == null ? void 0 : _a[0]) || (this.defaultIcon ? h("span", { class: ["icon", this.defaultIcon] }) : h(DotsHorizontal, {
+      const triggerIcon = this.$slots.icon?.[0] || (this.defaultIcon ? h("span", { class: ["icon", this.defaultIcon] }) : h(DotsHorizontal, {
         props: {
           size: 20
         }
@@ -736,7 +732,7 @@ const _sfc_main = {
             container: this.container,
             popoverBaseClass: "action-item__popper",
             popupRole: this.config.popupRole,
-            setReturnFocus: this.config.withFocusTrap ? (_b = this.$refs.triggerButton) == null ? void 0 : _b.$el : null,
+            setReturnFocus: this.config.withFocusTrap ? this.$refs.triggerButton?.$el : null,
             focusTrap: this.config.withFocusTrap
           },
           // For some reason the popover component
@@ -754,7 +750,8 @@ const _sfc_main = {
           on: {
             show: this.openMenu,
             "apply-show": this.onOpen,
-            hide: this.closeMenu
+            hide: this.closeMenu,
+            "apply-hide": this.onClosed
           }
         },
         [
@@ -826,7 +823,7 @@ const _sfc_main = {
         {
           class: [
             "action-items",
-            "action-item--".concat(this.triggerBtnType)
+            `action-item--${this.triggerBtnType}`
           ]
         },
         [
@@ -855,7 +852,7 @@ const _sfc_main = {
       {
         class: [
           "action-item action-item--default-popover",
-          "action-item--".concat(this.triggerBtnType),
+          `action-item--${this.triggerBtnType}`,
           {
             "action-item--open": this.opened
           }
@@ -875,7 +872,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "a06f6a7b"
+  "fcbbc5a9"
 );
 const NcActions = __component__.exports;
 export {