@nextcloud/vue 8.19.0 → 8.21.0

package/dist/chunks/NcActionTextEditable-97R7dFen.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionTextEditable-97R7dFen.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/NcActionTextEditable-DZCFtqIP.mjs

@@ -0,0 +1,122 @@
+import '../assets/NcActionTextEditable-Cg16Q4zr.css';
+import { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
+import { A as ActionTextMixin } from "./actionText-fFcUPi2g.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { A as ArrowRight } from "./ArrowRight-CY2b9hgN.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+const _sfc_main = {
+  name: "NcActionTextEditable",
+  components: {
+    ArrowRight
+  },
+  mixins: [ActionTextMixin],
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    /**
+     * id attribute of the checkbox element
+     */
+    id: {
+      type: String,
+      default: () => "action-" + GenRandomId(),
+      validator: (id) => id.trim() !== ""
+    },
+    /**
+     * disabled state of the text area
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Removed in v9 - use `modelValue` (`v-model`) instead
+     * @deprecated
+     */
+    value: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * value attribute of the input field
+     */
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [
+    "input",
+    /**
+     * Removed in v9 - use `update:modelValue` (`v-model`) instead
+     * @deprecated
+     */
+    "update:value",
+    /**
+     * Emitted when the inputs value changes
+     *
+     * @type {string|Date}
+     */
+    "update:modelValue",
+    /** Same as `update:modelValue` but with a different event name */
+    "update:model-value",
+    "submit"
+  ],
+  setup() {
+    const model = useModelMigration("value", "update:value");
+    return {
+      model
+    };
+  },
+  computed: {
+    /**
+     * determines if the action is focusable
+     *
+     * @return {boolean} is the action focusable ?
+     */
+    isFocusable() {
+      return !this.disabled;
+    },
+    computedId() {
+      return GenRandomId();
+    }
+  },
+  methods: {
+    onInput(event) {
+      this.$emit("input", event);
+      this.model = event.target.value;
+    },
+    onSubmit(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!this.disabled) {
+        this.$emit("submit", event);
+      } else {
+        return false;
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("li", { staticClass: "action", class: { "action--disabled": _vm.disabled } }, [_c("span", { staticClass: "action-text-editable", on: { "click": _vm.onClick } }, [_vm._t("icon", function() {
+    return [_c("span", { staticClass: "action-text-editable__icon", class: [_vm.isIconUrl ? "action-text-editable__icon--url" : _vm.icon], style: { backgroundImage: _vm.isIconUrl ? `url(${_vm.icon})` : null } })];
+  }), _c("form", { ref: "form", staticClass: "action-text-editable__form", attrs: { "disabled": _vm.disabled }, on: { "submit": function($event) {
+    $event.preventDefault();
+    return _vm.onSubmit.apply(null, arguments);
+  } } }, [_c("input", { staticClass: "action-text-editable__submit", attrs: { "id": _vm.id, "type": "submit" } }), _vm.name ? _c("label", { staticClass: "action-text-editable__name", attrs: { "for": _vm.computedId } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]) : _vm._e(), _c("textarea", _vm._b({ class: ["action-text-editable__textarea", { focusable: _vm.isFocusable }], attrs: { "id": _vm.computedId, "disabled": _vm.disabled }, domProps: { "value": _vm.model }, on: { "input": _vm.onInput } }, "textarea", _vm.$attrs, false)), _c("label", { directives: [{ name: "show", rawName: "v-show", value: !_vm.disabled, expression: "!disabled" }], staticClass: "action-text-editable__label", attrs: { "for": _vm.id } }, [_c("ArrowRight", { attrs: { "size": 20 } })], 1)])], 2)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "7d21c704"
+);
+const NcActionTextEditable = __component__.exports;
+export {
+  NcActionTextEditable as N
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionTextEditable-DZCFtqIP.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 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":[],"mappings":";;;;;AAkGA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA,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,YAAA,YAAA;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,QAAA,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,aAAA,YAAA;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-gOMT5VzC.cjs → NcActions-CCYNSnCn.cjs}

@@ -1,13 +1,13 @@
-require('../assets/NcActions-CkVHYk_-.css');
+require('../assets/NcActions-DM_LoRlx.css');
 "use strict";
 const Components_NcButton = require("../Components/NcButton.cjs");
-const NcPopover = require("./NcPopover-C0G7sLVP.cjs");
+const NcPopover = require("./NcPopover-MxwUgZu1.cjs");
 const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
-const _l10n = require("./_l10n-Ci9_UR5q.cjs");
+const _l10n = require("./_l10n-Ch5mEdUH.cjs");
 const focusTrap = require("./focusTrap-EeXFmjdI.cjs");
 const core = require("@vueuse/core");
 const Vue = require("vue");
-const DotsHorizontal = require("./DotsHorizontal-DQfnwpao.cjs");
+const DotsHorizontal = require("./DotsHorizontal-BoI3vnhk.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Vue__default = /* @__PURE__ */ _interopDefault(Vue);
@@ -159,10 +159,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
@@ -196,8 +193,8 @@ const _sfc_main = {
     "click"
   ],
   setup(props) {
-    const randomId = "menu-".concat(GenRandomId.GenRandomId());
-    const triggerRandomId = "trigger-".concat(randomId);
+    const randomId = `menu-${GenRandomId.GenRandomId()}`;
+    const triggerRandomId = `trigger-${randomId}`;
     const triggerButton = Vue.ref();
     const { top, bottom } = core.useElementBounding(triggerButton);
     const { top: boundaryTop, bottom: boundaryBottom } = core.useElementBounding(Vue.toRef(props, "boundariesElement"));
@@ -340,8 +337,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.
@@ -399,18 +395,17 @@ 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() {
@@ -436,7 +431,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;
@@ -661,19 +656,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;
@@ -682,20 +676,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
           },
@@ -703,8 +697,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 && {
@@ -723,8 +717,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.DotsHorizontal, {
+      const triggerIcon = this.$slots.icon?.[0] || (this.defaultIcon ? h("span", { class: ["icon", this.defaultIcon] }) : h(DotsHorizontal.DotsHorizontal, {
         props: {
           size: 20
         }
@@ -742,7 +735,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
@@ -833,7 +826,7 @@ const _sfc_main = {
         {
           class: [
             "action-items",
-            "action-item--".concat(this.triggerBtnType)
+            `action-item--${this.triggerBtnType}`
           ]
         },
         [
@@ -862,7 +855,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
           }