@nextcloud/vue 8.0.0-beta.7 → 8.0.0-beta.9

package/dist/Components/NcPasswordField.mjs

@@ -1,59 +1,174 @@
-import r from "vue-material-design-icons/Eye.vue";
+import o from "vue-material-design-icons/Eye.vue";
 import a from "vue-material-design-icons/EyeOff.vue";
-import i from "./NcInputField.mjs";
-import o from "debounce";
-import n from "@nextcloud/axios";
-import { loadState as l } from "@nextcloud/initial-state";
-import { generateOcsUrl as d } from "@nextcloud/router";
-import { t as s } from "../chunks/l10n-9a5a6afc.mjs";
-import { l as p } from "../chunks/logger-ccc7ee65.mjs";
-import { n as u } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const c = { name: "NcPasswordField", components: { NcInputField: i, Eye: r, EyeOff: a }, inheritAttrs: !1, props: { ...i.props, helperText: { type: String, default: "" }, checkPasswordStrength: { type: Boolean, default: !1 }, minlength: { type: Number, default: 0 }, maxlength: { type: Number, default: null }, showTrailingButton: { type: Boolean, default: !0 } }, emits: ["valid", "invalid", "update:value"], data() {
-  return { isPasswordHidden: !0, internalHelpMessage: "", passwordPolicy: l("core", "capabilities", {}).password_policy || null, isValid: null };
-}, computed: { computedError() {
-  return this.error || this.isValid === !1;
-}, computedSuccess() {
-  return this.success || this.isValid === !0;
-}, computedHelperText() {
-  return this.helperText.length > 0 ? this.helperText : this.internalHelpMessage;
-}, rules() {
-  const { minlength: t, passwordPolicy: e } = this;
-  return { minlength: t != null ? t : e == null ? void 0 : e.minLength };
-}, trailingButtonLabelPassword() {
-  return this.isPasswordHidden ? s("Show password") : s("Hide password");
-} }, watch: { value(t) {
-  if (this.checkPasswordStrength) {
-    if (this.passwordPolicy === null)
-      return;
-    this.passwordPolicy && this.checkPassword(t);
-  }
-} }, methods: { focus() {
-  this.$refs.inputField.focus();
-}, select() {
-  this.$refs.inputField.select();
-}, handleInput(t) {
-  this.$emit("update:value", t.target.value);
-}, togglePasswordVisibility() {
-  this.isPasswordHidden = !this.isPasswordHidden;
-}, checkPassword: o(async function(t) {
-  try {
-    const { data: e } = await n.post(d("apps/password_policy/api/v1/validate"), { password: t });
-    if (this.isValid = e.ocs.data.passed, e.ocs.data.passed) {
-      this.internalHelpMessage = s("Password is secure"), this.$emit("valid");
-      return;
+import n from "./NcInputField.mjs";
+import l from "debounce";
+import d from "@nextcloud/axios";
+import { loadState as u } from "@nextcloud/initial-state";
+import { generateOcsUrl as p } from "@nextcloud/router";
+import { t as i } from "../chunks/l10n-05a09c66.mjs";
+import { l as c } from "../chunks/logger-3612e664.mjs";
+import { n as h } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const s = u("core", "capabilities", {}).password_policy || null, m = new Set(Object.keys(n.props)), f = {
+  name: "NcPasswordField",
+  components: {
+    NcInputField: n,
+    Eye: o,
+    EyeOff: a
+  },
+  // Allow forwarding all attributes
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props
+     */
+    // Not an actual prop but needed to show in vue-styleguidist docs
+    // eslint-disable-next-line
+    " ": {},
+    // Reuse all the props from NcInputField for better typing and documentation
+    ...n.props,
+    // Redefined props
+    /**
+     * Controls whether to display the trailing button.
+     */
+    showTrailingButton: {
+      type: Boolean,
+      default: !0
+    },
+    // Removed NcInputField props, defined only by this component
+    trailingButtonLabel: void 0,
+    // Custom props
+    /**
+     * Check if the user entered a valid password using the password_policy
+     * app if available.
+     *
+     * Warning: this doesn't replace server side checking and will do nothing
+     * if the password_policy app is disabled.
+     */
+    checkPasswordStrength: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The minlength property defines the minimum number of characters
+     * (as UTF-16 code units) the user can enter
+     */
+    minlength: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * The maxlength property defines the maximum number of characters
+     * (as UTF-16 code units) the user can enter
+     */
+    maxlength: {
+      type: Number,
+      default: null
+    }
+  },
+  emits: [
+    "valid",
+    "invalid",
+    "update:value"
+  ],
+  data() {
+    return {
+      isPasswordHidden: !0,
+      internalHelpMessage: "",
+      isValid: null
+    };
+  },
+  computed: {
+    computedError() {
+      return this.error || this.isValid === !1;
+    },
+    computedSuccess() {
+      return this.success || this.isValid === !0;
+    },
+    computedHelperText() {
+      return this.helperText.length > 0 ? this.helperText : this.internalHelpMessage;
+    },
+    rules() {
+      const { minlength: t } = this;
+      return {
+        minlength: t != null ? t : s == null ? void 0 : s.minLength
+      };
+    },
+    trailingButtonLabelPassword() {
+      return this.isPasswordHidden ? i("Show password") : i("Hide password");
+    },
+    propsAndAttrsToForward() {
+      return {
+        // Proxy all the HTML attributes
+        ...this.$attrs,
+        // Proxy original NcInputField's props
+        ...Object.fromEntries(
+          Object.entries(this.$props).filter(([t]) => m.has(t))
+        )
+      };
     }
-    this.internalHelpMessage = e.ocs.data.reason, this.$emit("invalid");
-  } catch (e) {
-    p.error("Password policy returned an error", e);
+  },
+  watch: {
+    value(t) {
+      if (this.checkPasswordStrength) {
+        if (s === null)
+          return;
+        this.checkPassword(t);
+      }
+    }
+  },
+  methods: {
+    /**
+     * Focus the input element
+     *
+     * @public
+     */
+    focus() {
+      this.$refs.inputField.focus();
+    },
+    /**
+     * Select all the text in the input
+     *
+     * @public
+     */
+    select() {
+      this.$refs.inputField.select();
+    },
+    handleInput(t) {
+      this.$emit("update:value", t.target.value);
+    },
+    togglePasswordVisibility() {
+      this.isPasswordHidden = !this.isPasswordHidden;
+    },
+    checkPassword: l(async function(t) {
+      try {
+        const { data: e } = await d.post(p("apps/password_policy/api/v1/validate"), { password: t });
+        if (this.isValid = e.ocs.data.passed, e.ocs.data.passed) {
+          this.internalHelpMessage = i("Password is secure"), this.$emit("valid");
+          return;
+        }
+        this.internalHelpMessage = e.ocs.data.reason, this.$emit("invalid");
+      } catch (e) {
+        c.error("Password policy returned an error", e);
+      }
+    }, 500)
   }
-}, 500) } };
-var h = function() {
-  var t = this, e = t._self._c;
-  return e("NcInputField", t._g(t._b({ ref: "inputField", attrs: { type: t.isPasswordHidden ? "password" : "text", "show-trailing-button": t.showTrailingButton && !0, "trailing-button-label": t.trailingButtonLabelPassword, "helper-text": t.computedHelperText, error: t.computedError, success: t.computedSuccess, minlength: t.rules.minlength }, on: { "trailing-button-click": t.togglePasswordVisibility, input: t.handleInput }, scopedSlots: t._u([{ key: "trailing-button-icon", fn: function() {
-    return [t.isPasswordHidden ? e("Eye", { attrs: { size: 18 } }) : e("EyeOff", { attrs: { size: 18 } })];
-  }, proxy: !0 }]) }, "NcInputField", { ...t.$attrs, ...t.$props }, !1), t.$listeners), [t._t("default")], 2);
-}, m = [], f = u(c, h, m, !1, null, null, null, null);
-const $ = f.exports;
+};
+var w = function() {
+  var e = this, r = e._self._c;
+  return r("NcInputField", e._g(e._b({ ref: "inputField", attrs: { type: e.isPasswordHidden ? "password" : "text", "trailing-button-label": e.trailingButtonLabelPassword, "helper-text": e.computedHelperText, error: e.computedError, success: e.computedSuccess, minlength: e.rules.minlength }, on: { "trailing-button-click": e.togglePasswordVisibility, input: e.handleInput }, scopedSlots: e._u([{ key: "trailing-button-icon", fn: function() {
+    return [e.isPasswordHidden ? r("Eye", { attrs: { size: 18 } }) : r("EyeOff", { attrs: { size: 18 } })];
+  }, proxy: !0 }]) }, "NcInputField", e.propsAndAttrsToForward, !1), e.$listeners), [e._t("default")], 2);
+}, g = [], _ = /* @__PURE__ */ h(
+  f,
+  w,
+  g,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const k = _.exports;
 export {
-  $ as default
+  k as default
 };

package/dist/Components/NcPasswordField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcPasswordField.mjs","sources":["../../src/components/NcPasswordField/NcPasswordField.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\n  - @author Carl Schwan <carl@carlschwan.eu>\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<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose password field component.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcPasswordField :value.sync=\"text1\"\n\t\t\tlabel=\"Old password\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">New password</label>\n\t\t\t<NcPasswordField id=\"textField\"\n\t\t\t\t:value.sync=\"text2\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\" />\n\t\t</div>\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField2\">New password</label>\n\t\t\t<NcPasswordField id=\"textField2\"\n\t\t\t\t:value.sync=\"text3\"\n\t\t\t\t:error=\"true\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\t\thelper-text=\"Password is insecure\" />\n\t\t</div>\n\n\t\t<NcPasswordField :value.sync=\"text4\"\n\t\t\tlabel=\"Good new password\"\n\t\t\t:success=\"true\"\n\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\thelper-text=\"Password is secure\" />\n\n\t\t<NcPasswordField :value.sync=\"text5\"\n\t\t\t:disabled=\"true\"\n\t\t\tlabel=\"Disabled\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: 'hunter',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"{...$attrs, ...$props }\"\n\t\tref=\"inputField\"\n\t\t:type=\"isPasswordHidden ? 'password' : 'text'\"\n\t\t:show-trailing-button=\"showTrailingButton && true\"\n\t\t:trailing-button-label=\"trailingButtonLabelPassword\"\n\t\t:helper-text=\"computedHelperText\"\n\t\t:error=\"computedError\"\n\t\t:success=\"computedSuccess\"\n\t\t:minlength=\"rules.minlength\"\n\t\tv-on=\"$listeners\"\n\t\t@trailing-button-click=\"togglePasswordVisibility\"\n\t\t@input=\"handleInput\">\n\t\t<!-- Default slot for the leading icon -->\n\t\t<slot />\n\t\t<template #trailing-button-icon>\n\t\t\t<Eye v-if=\"isPasswordHidden\" :size=\"18\" />\n\t\t\t<EyeOff v-else :size=\"18\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport Eye from 'vue-material-design-icons/Eye.vue'\nimport EyeOff from 'vue-material-design-icons/EyeOff.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport debounce from 'debounce'\nimport axios from '@nextcloud/axios'\nimport { loadState } from '@nextcloud/initial-state'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { t } from '../../l10n.js'\nimport logger from '../../utils/logger.js'\n\nexport default {\n\tname: 'NcPasswordField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tEye,\n\t\tEyeOff,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t...NcInputField.props,\n\n\t\t/**\n\t\t * Additional error message\n\t\t *\n\t\t * This will be displayed beneath the input field\n\t\t */\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Check if the user entered a valid password using the password_policy\n\t\t * app if available.\n\t\t *\n\t\t * Warning: this doesn't replace server side checking and will do nothing\n\t\t * if the password_policy app is disabled.\n\t\t */\n\t\tcheckPasswordStrength: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The minlength property defines the minimum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tminlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * The maxlength property defines the maximum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Controls whether to display the trailing button.\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: [\n\t\t'valid',\n\t\t'invalid',\n\t\t'update:value',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tisPasswordHidden: true,\n\t\t\tinternalHelpMessage: '',\n\t\t\tpasswordPolicy: loadState('core', 'capabilities', {}).password_policy || null,\n\t\t\tisValid: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcomputedError() {\n\t\t\treturn this.error || this.isValid === false\n\t\t},\n\t\tcomputedSuccess() {\n\t\t\treturn this.success || this.isValid === true\n\t\t},\n\t\tcomputedHelperText() {\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\treturn this.helperText\n\t\t\t}\n\t\t\treturn this.internalHelpMessage\n\t\t},\n\n\t\trules() {\n\t\t\tconst { minlength, passwordPolicy } = this\n\t\t\treturn {\n\t\t\t\tminlength: minlength ?? passwordPolicy?.minLength,\n\t\t\t}\n\t\t},\n\n\t\ttrailingButtonLabelPassword() {\n\t\t\treturn this.isPasswordHidden ? t('Show password') : t('Hide password')\n\t\t},\n\t},\n\n\twatch: {\n\t\tvalue(newValue) {\n\t\t\tif (this.checkPasswordStrength) {\n\t\t\t\tif (this.passwordPolicy === null) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tif (this.passwordPolicy) {\n\t\t\t\t\tthis.checkPassword(newValue)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\t/**\n\t\t\t * Triggers when the value inside the password field is\n\t\t\t * updated.\n\t\t\t *\n\t\t\t * @property {string} The new value\n\t\t\t */\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t\ttogglePasswordVisibility() {\n\t\t\tthis.isPasswordHidden = !this.isPasswordHidden\n\t\t},\n\t\tcheckPassword: debounce(async function(password) {\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.post(generateOcsUrl('apps/password_policy/api/v1/validate'), { password })\n\t\t\t\tthis.isValid = data.ocs.data.passed\n\t\t\t\tif (data.ocs.data.passed) {\n\t\t\t\t\tthis.internalHelpMessage = t('Password is secure')\n\t\t\t\t\t/**\n\t\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t\t * password entered is valid.\n\t\t\t\t\t */\n\t\t\t\t\tthis.$emit('valid')\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tthis.internalHelpMessage = data.ocs.data.reason\n\t\t\t\t/**\n\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t * password entered is invalid.\n\t\t\t\t */\n\t\t\t\tthis.$emit('invalid')\n\t\t\t} catch (e) {\n\t\t\t\tlogger.error('Password policy returned an error', e)\n\t\t\t}\n\t\t}, 500),\n\t},\n}\n</script>\n"],"names":["_sfc_main","NcInputField","Eye","EyeOff","loadState","minlength","passwordPolicy","t","newValue","event","debounce","password","data","axios","generateOcsUrl","logger"],"mappings":";;;;;;;;;;AAmIA,MAAAA,IAAA,EACA,MAAA,mBAEA,YAAA,EACA,cAAAC,GACA,KAAAC,GACA,QAAAC,EACA,GAGA,cAAA,IAEA,OAAA,EACA,GAAAF,EAAA,OAOA,YAAA,EACA,MAAA,QACA,SAAA,GACA,GASA,uBAAA,EACA,MAAA,SACA,SAAA,GACA,GAMA,WAAA,EACA,MAAA,QACA,SAAA,EACA,GAMA,WAAA,EACA,MAAA,QACA,SAAA,KACA,GAKA,oBAAA,EACA,MAAA,SACA,SAAA,GACA,EACA,GAEA,OAAA,CACA,SACA,WACA,cACA,GAEA,OAAA;AACA,SAAA,EACA,kBAAA,IACA,qBAAA,IACA,gBAAAG,EAAA,QAAA,gBAAA,CAAA,CAAA,EAAA,mBAAA,MACA,SAAA,KACA;AACA,GAEA,UAAA,EACA,gBAAA;AACA,SAAA,KAAA,SAAA,KAAA,YAAA;AACA,GACA,kBAAA;AACA,SAAA,KAAA,WAAA,KAAA,YAAA;AACA,GACA,qBAAA;AACA,SAAA,KAAA,WAAA,SAAA,IACA,KAAA,aAEA,KAAA;AACA,GAEA,QAAA;AACA,QAAA,EAAA,WAAAC,GAAA,gBAAAC,EAAA,IAAA;AACA,SAAA,EACA,WAAAD,gBAAAC,uBAAA,UACA;AACA,GAEA,8BAAA;AACA,SAAA,KAAA,mBAAAC,EAAA,eAAA,IAAAA,EAAA,eAAA;AACA,EACA,GAEA,OAAA,EACA,MAAAC,GAAA;AACA,MAAA,KAAA,uBAAA;AACA,QAAA,KAAA,mBAAA;AACA;AAEA,SAAA,kBACA,KAAA,cAAAA,CAAA;AAAA,EAAA;AAGA,EACA,GAEA,SAAA,EAMA,QAAA;AACA,OAAA,MAAA,WAAA,MAAA;AACA,GAOA,SAAA;AACA,OAAA,MAAA,WAAA,OAAA;AACA,GAEA,YAAAC,GAAA;AAOA,OAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AACA,GACA,2BAAA;AACA,OAAA,mBAAA,CAAA,KAAA;AACA,GACA,eAAAC,EAAA,eAAAC,GAAA;AACA,MAAA;AACA,UAAA,EAAA,MAAAC,MAAA,MAAAC,EAAA,KAAAC,EAAA,sCAAA,GAAA,EAAA,UAAAH,GAAA;AAEA,QADA,KAAA,UAAAC,EAAA,IAAA,KAAA,QACAA,EAAA,IAAA,KAAA,QAAA;AACA,WAAA,sBAAAL,EAAA,oBAAA,GAKA,KAAA,MAAA,OAAA;AACA;AAAA,IAAA;AAGA,SAAA,sBAAAK,EAAA,IAAA,KAAA,QAKA,KAAA,MAAA,SAAA;AAAA,EACA,SAAA,GAAA;AACAG,MAAA,MAAA,qCAAA,CAAA;AAAA,EACA;AACA,GAAA,GAAA,EACA,EACA;;;;;;;;"}
+{"version":3,"file":"NcPasswordField.mjs","sources":["../../src/components/NcPasswordField/NcPasswordField.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\n  - @author Carl Schwan <carl@carlschwan.eu>\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<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose password field component.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcPasswordField :value.sync=\"text1\"\n\t\t\tlabel=\"Old password\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">New password</label>\n\t\t\t<NcPasswordField id=\"textField\"\n\t\t\t\t:value.sync=\"text2\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\" />\n\t\t</div>\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField2\">New password</label>\n\t\t\t<NcPasswordField id=\"textField2\"\n\t\t\t\t:value.sync=\"text3\"\n\t\t\t\t:error=\"true\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\t\thelper-text=\"Password is insecure\" />\n\t\t</div>\n\n\t\t<NcPasswordField :value.sync=\"text4\"\n\t\t\tlabel=\"Good new password\"\n\t\t\t:success=\"true\"\n\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\thelper-text=\"Password is secure\" />\n\n\t\t<NcPasswordField :value.sync=\"text5\"\n\t\t\t:disabled=\"true\"\n\t\t\tlabel=\"Disabled\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: 'hunter',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"propsAndAttrsToForward\"\n\t\tref=\"inputField\"\n\t\t:type=\"isPasswordHidden ? 'password' : 'text'\"\n\t\t:trailing-button-label=\"trailingButtonLabelPassword\"\n\t\t:helper-text=\"computedHelperText\"\n\t\t:error=\"computedError\"\n\t\t:success=\"computedSuccess\"\n\t\t:minlength=\"rules.minlength\"\n\t\tv-on=\"$listeners\"\n\t\t@trailing-button-click=\"togglePasswordVisibility\"\n\t\t@input=\"handleInput\">\n\t\t<!-- Default slot for the leading icon -->\n\t\t<slot />\n\t\t<template #trailing-button-icon>\n\t\t\t<Eye v-if=\"isPasswordHidden\" :size=\"18\" />\n\t\t\t<EyeOff v-else :size=\"18\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport Eye from 'vue-material-design-icons/Eye.vue'\nimport EyeOff from 'vue-material-design-icons/EyeOff.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport debounce from 'debounce'\nimport axios from '@nextcloud/axios'\nimport { loadState } from '@nextcloud/initial-state'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { t } from '../../l10n.js'\nimport logger from '../../utils/logger.js'\n\n/**\n * @typedef PasswordPolicy\n * @property {object} api - The URLs to the password_policy app methods\n * @property {string} api.generate - The URL to the password generator\n * @property {string} api.validate - The URL to the password validator\n * @property {boolean} enforceNonCommonPassword - Whether to enforce non common passwords\n * @property {boolean} enforceNumericCharacters - Whether to enforce numeric characters\n * @property {boolean} enforceSpecialCharacters - Whether to enforce special characters\n * @property {boolean} enforceUpperLowerCase - Whether to enforce upper and lower case\n * @property {number} minLength - The minimum length of the password\n */\n\n/** @type {PasswordPolicy|null} */\nconst passwordPolicy = loadState('core', 'capabilities', {}).password_policy || null\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcPasswordField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tEye,\n\t\tEyeOff,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t// Redefined props\n\n\t\t/**\n\t\t * Controls whether to display the trailing button.\n\t\t */\n\t\t showTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t// Removed NcInputField props, defined only by this component\n\n\t\ttrailingButtonLabel: undefined,\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Check if the user entered a valid password using the password_policy\n\t\t * app if available.\n\t\t *\n\t\t * Warning: this doesn't replace server side checking and will do nothing\n\t\t * if the password_policy app is disabled.\n\t\t */\n\t\tcheckPasswordStrength: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The minlength property defines the minimum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tminlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * The maxlength property defines the maximum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'valid',\n\t\t'invalid',\n\t\t'update:value',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tisPasswordHidden: true,\n\t\t\tinternalHelpMessage: '',\n\t\t\tisValid: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcomputedError() {\n\t\t\treturn this.error || this.isValid === false\n\t\t},\n\t\tcomputedSuccess() {\n\t\t\treturn this.success || this.isValid === true\n\t\t},\n\t\tcomputedHelperText() {\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\treturn this.helperText\n\t\t\t}\n\t\t\treturn this.internalHelpMessage\n\t\t},\n\n\t\trules() {\n\t\t\tconst { minlength } = this\n\t\t\treturn {\n\t\t\t\tminlength: minlength ?? passwordPolicy?.minLength,\n\t\t\t}\n\t\t},\n\n\t\ttrailingButtonLabelPassword() {\n\t\t\treturn this.isPasswordHidden ? t('Show password') : t('Hide password')\n\t\t},\n\n\t\tpropsAndAttrsToForward() {\n\t\t\treturn {\n\t\t\t\t// Proxy all the HTML attributes\n\t\t\t\t...this.$attrs,\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\tvalue(newValue) {\n\t\t\tif (this.checkPasswordStrength) {\n\t\t\t\tif (passwordPolicy === null) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.checkPassword(newValue)\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\t/**\n\t\t\t * Triggers when the value inside the password field is\n\t\t\t * updated.\n\t\t\t *\n\t\t\t * @property {string} The new value\n\t\t\t */\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t\ttogglePasswordVisibility() {\n\t\t\tthis.isPasswordHidden = !this.isPasswordHidden\n\t\t},\n\t\tcheckPassword: debounce(async function(password) {\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.post(generateOcsUrl('apps/password_policy/api/v1/validate'), { password })\n\t\t\t\tthis.isValid = data.ocs.data.passed\n\t\t\t\tif (data.ocs.data.passed) {\n\t\t\t\t\tthis.internalHelpMessage = t('Password is secure')\n\t\t\t\t\t/**\n\t\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t\t * password entered is valid.\n\t\t\t\t\t */\n\t\t\t\t\tthis.$emit('valid')\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tthis.internalHelpMessage = data.ocs.data.reason\n\t\t\t\t/**\n\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t * password entered is invalid.\n\t\t\t\t */\n\t\t\t\tthis.$emit('invalid')\n\t\t\t} catch (e) {\n\t\t\t\tlogger.error('Password policy returned an error', e)\n\t\t\t}\n\t\t}, 500),\n\t},\n}\n</script>\n"],"names":["passwordPolicy","loadState","NcInputFieldProps","NcInputField","_sfc_main","Eye","EyeOff","minlength","t","key","newValue","event","debounce","password","data","axios","generateOcsUrl","logger"],"mappings":";;;;;;;;;;AA+IA,MAAAA,IAAAC,EAAA,QAAA,gBAAA,CAAA,CAAA,EAAA,mBAAA,MAEAC,IAAA,IAAA,IAAA,OAAA,KAAAC,EAAA,KAAA,CAAA,GAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAD;AAAA,IACA,KAAAE;AAAA,IACA,QAAAC;AAAA,EACA;AAAA;AAAA,EAGA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA,CAAA;AAAA;AAAA,IAGA,GAAAH,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA,IAIA,qBAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWA,uBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,MACA,qBAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA,KAAA,SAAA,KAAA,YAAA;AAAA,IACA;AAAA,IACA,kBAAA;AACA,aAAA,KAAA,WAAA,KAAA,YAAA;AAAA,IACA;AAAA,IACA,qBAAA;AACA,aAAA,KAAA,WAAA,SAAA,IACA,KAAA,aAEA,KAAA;AAAA,IACA;AAAA,IAEA,QAAA;AACA,YAAA,EAAA,WAAAI,EAAA,IAAA;AACA,aAAA;AAAA,QACA,WAAAA,KAAA,OAAAA,IAAAP,KAAA,gBAAAA,EAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,8BAAA;AACA,aAAA,KAAA,mBAAAQ,EAAA,eAAA,IAAAA,EAAA,eAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA;AAAA;AAAA,QAEA,GAAA,KAAA;AAAA;AAAA,QAEA,GAAA,OAAA;AAAA,UACA,OAAA,QAAA,KAAA,MAAA,EAAA,OAAA,CAAA,CAAAC,CAAA,MAAAP,EAAA,IAAAO,CAAA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAAC,GAAA;AACA,UAAA,KAAA,uBAAA;AACA,YAAAV,MAAA;AACA;AAEA,aAAA,cAAAU,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,WAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,WAAA,OAAA;AAAA,IACA;AAAA,IAEA,YAAAC,GAAA;AAOA,WAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,IACA,2BAAA;AACA,WAAA,mBAAA,CAAA,KAAA;AAAA,IACA;AAAA,IACA,eAAAC,EAAA,eAAAC,GAAA;AACA,UAAA;AACA,cAAA,EAAA,MAAAC,MAAA,MAAAC,EAAA,KAAAC,EAAA,sCAAA,GAAA,EAAA,UAAAH,GAAA;AAEA,YADA,KAAA,UAAAC,EAAA,IAAA,KAAA,QACAA,EAAA,IAAA,KAAA,QAAA;AACA,eAAA,sBAAAN,EAAA,oBAAA,GAKA,KAAA,MAAA,OAAA;AACA;AAAA,QACA;AAEA,aAAA,sBAAAM,EAAA,IAAA,KAAA,QAKA,KAAA,MAAA,SAAA;AAAA,MACA,SAAA,GAAA;AACA,QAAAG,EAAA,MAAA,qCAAA,CAAA;AAAA,MACA;AAAA,IACA,GAAA,GAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcPopover.cjs

@@ -1 +1,125 @@
-var d=require("../assets/index-b814f5fa.css");const r=require("floating-vue"),s=require("focus-trap"),a=require("../chunks/focusTrap-139520e2.cjs"),p=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const n={name:"NcPopover",components:{Dropdown:r.Dropdown},inheritAttrs:!1,props:{popoverBaseClass:{type:String,default:""},focusTrap:{type:Boolean,default:!0},setReturnFocus:{default:void 0,type:[HTMLElement,SVGElement,String,Boolean]}},emits:["after-show","after-hide"],beforeDestroy(){this.clearFocusTrap(),this.clearEscapeStopPropagation()},methods:{getPopoverContentElement(){var e,t;return(t=(e=this.$refs.popover)==null?void 0:e.$refs.popperContent)==null?void 0:t.$el},async useFocusTrap(){if(await this.$nextTick(),!this.focusTrap)return;const e=this.getPopoverContentElement();e&&(this.$focusTrap=s.createFocusTrap(e,{escapeDeactivates:!1,allowOutsideClick:!0,setReturnFocus:this.setReturnFocus,trapStack:a.getTrapStack()}),this.$focusTrap.activate())},clearFocusTrap(e={}){var t;try{(t=this.$focusTrap)==null||t.deactivate(e),this.$focusTrap=null}catch(o){console.warn(o)}},addEscapeStopPropagation(){var e;(e=this.getPopoverContentElement())==null||e.addEventListener("keydown",this.stopKeydownEscapeHandler)},clearEscapeStopPropagation(){var e;(e=this.getPopoverContentElement())==null||e.removeEventListener("keydown",this.stopKeydownEscapeHandler)},stopKeydownEscapeHandler(e){e.type==="keydown"&&e.key==="Escape"&&e.stopPropagation()},afterShow(){this.$nextTick(()=>{this.$emit("after-show"),this.useFocusTrap(),this.addEscapeStopPropagation()})},afterHide(){this.$emit("after-hide"),this.clearFocusTrap(),this.clearEscapeStopPropagation()}}};var i=function(){var e=this,t=e._self._c;return t("Dropdown",e._g(e._b({ref:"popover",attrs:{distance:10,"arrow-padding":10,"no-auto-focus":!0,"popper-class":e.popoverBaseClass},on:{"apply-show":e.afterShow,"apply-hide":e.afterHide},scopedSlots:e._u([{key:"popper",fn:function(){return[e._t("default")]},proxy:!0}],null,!0)},"Dropdown",e.$attrs,!1),e.$listeners),[e._t("trigger")],2)},c=[],l=p.normalizeComponent(n,i,c,!1,null,null,null,null);const u=l.exports;module.exports=u;
+var d = require("../assets/index-4ebacc78.css");
+const r = require("floating-vue"), s = require("focus-trap"), a = require("../chunks/focusTrap-14985831.cjs"), n = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const p = {
+  name: "NcPopover",
+  components: {
+    Dropdown: r.Dropdown
+  },
+  inheritAttrs: !1,
+  props: {
+    popoverBaseClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Enable popover focus trap
+     */
+    focusTrap: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Set element to return focus to after focus trap deactivation
+     *
+     * @type {import('focus-trap').FocusTargetValueOrFalse}
+     */
+    setReturnFocus: {
+      default: void 0,
+      type: [HTMLElement, SVGElement, String, Boolean]
+    }
+  },
+  emits: [
+    "after-show",
+    "after-hide"
+  ],
+  beforeDestroy() {
+    this.clearFocusTrap(), this.clearEscapeStopPropagation();
+  },
+  methods: {
+    /**
+     * @return {HTMLElement|undefined}
+     */
+    getPopoverContentElement() {
+      var e, t;
+      return (t = (e = this.$refs.popover) == null ? void 0 : e.$refs.popperContent) == null ? void 0 : t.$el;
+    },
+    /**
+     * Add focus trap for accessibility.
+     */
+    async useFocusTrap() {
+      if (await this.$nextTick(), !this.focusTrap)
+        return;
+      const e = this.getPopoverContentElement();
+      e && (this.$focusTrap = s.createFocusTrap(e, {
+        // Prevents to lose focus using esc key
+        // Focus will be release when popover be hide
+        escapeDeactivates: !1,
+        allowOutsideClick: !0,
+        setReturnFocus: this.setReturnFocus,
+        trapStack: a.getTrapStack()
+      }), this.$focusTrap.activate());
+    },
+    /**
+     * Remove focus trap
+     *
+     * @param {object} options The configuration options for focusTrap
+     */
+    clearFocusTrap(e = {}) {
+      var t;
+      try {
+        (t = this.$focusTrap) == null || t.deactivate(e), this.$focusTrap = null;
+      } catch (o) {
+        console.warn(o);
+      }
+    },
+    /**
+     * Add stopPropagation for Escape.
+     * It prevents global Escape handling after closing popover.
+     *
+     * Manual event handling is used here instead of v-on because there is no direct access to the node.
+     * Alternative - wrap <template #popover> in a div wrapper.
+     */
+    addEscapeStopPropagation() {
+      const e = this.getPopoverContentElement();
+      e == null || e.addEventListener("keydown", this.stopKeydownEscapeHandler);
+    },
+    /**
+     * Remove stop Escape handler
+     */
+    clearEscapeStopPropagation() {
+      const e = this.getPopoverContentElement();
+      e == null || e.removeEventListener("keydown", this.stopKeydownEscapeHandler);
+    },
+    /**
+     * @param {KeyboardEvent} event - native keydown event
+     */
+    stopKeydownEscapeHandler(e) {
+      e.type === "keydown" && e.key === "Escape" && e.stopPropagation();
+    },
+    afterShow() {
+      this.$nextTick(() => {
+        this.$emit("after-show"), this.useFocusTrap(), this.addEscapeStopPropagation();
+      });
+    },
+    afterHide() {
+      this.$emit("after-hide"), this.clearFocusTrap(), this.clearEscapeStopPropagation();
+    }
+  }
+};
+var c = function() {
+  var t = this, o = t._self._c;
+  return o("Dropdown", t._g(t._b({ ref: "popover", attrs: { distance: 10, "arrow-padding": 10, "no-auto-focus": !0, "popper-class": t.popoverBaseClass }, on: { "apply-show": t.afterShow, "apply-hide": t.afterHide }, scopedSlots: t._u([{ key: "popper", fn: function() {
+    return [t._t("default")];
+  }, proxy: !0 }], null, !0) }, "Dropdown", t.$attrs, !1), t.$listeners), [t._t("trigger")], 2);
+}, i = [], u = /* @__PURE__ */ n.normalizeComponent(
+  p,
+  c,
+  i,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const l = u.exports;
+module.exports = l;

package/dist/Components/NcPopover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcPopover.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcPopover.cjs","sources":["../../src/components/NcPopover/NcPopover.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 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\n<docs>\n\n### General description\n\nThis component is just a wrapper for the floating-vue plugin by Akryum,\nplease refer to this documentation for customization:\nhttps://github.com/Akryum/floating-vue\n\nThis components has two slots:\n* 'trigger' which can be any html element and it will trigger the popover\nthis slot is optional since you can toggle the popover also by updating the\nopen prop on this component;\n\n* a default slot that is for the content of the popover.\n\n### Examples\n\n#### With a `<button>` as a trigger:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover>\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template>\n\t\t\t\t<form tabindex=\"0\" @submit.prevent>\n\t\t\t\t\t<h2>this is some content</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>\n\t\t\t\t\t\tVestibulum eget placerat velit.\n\t\t\t\t\t</p>\n\t\t\t\t\t<label>\n\t\t\t\t\t\tLabel element\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"input element\"/>\n\t\t\t\t\t</label>\n\t\t\t\t</form>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Without focus trap:\n\nThe [`focus-trap`](https://github.com/focus-trap/focus-trap) emits an error when used in a non-focusable element tree.\n\nThe prop `:focus-trap=\"false\"` help to prevent it when the default behavior is not relevant.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover :focus-trap=\"false\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Click me!</NcButton>\n\t\t\t</template>\n\t\t\t<template>\n\t\t\t\tHi! 🚀\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With passing props to `floating-vue`'s `Dropdown`:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover container=\"body\" :popper-hide-triggers=\"(triggers) => [...triggers, 'click']\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<NcButton>Click on the button will close NcPopover</NcButton>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n</docs>\n\n<template>\n\t<Dropdown ref=\"popover\"\n\t\t:distance=\"10\"\n\t\t:arrow-padding=\"10\"\n\t\tv-bind=\"$attrs\"\n\t\t:no-auto-focus=\"true /* Handled by the focus trap */\"\n\t\t:popper-class=\"popoverBaseClass\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-show=\"afterShow\"\n\t\t@apply-hide=\"afterHide\">\n\t\t<!-- This will be the popover target (for the events and position) -->\n\t\t<slot name=\"trigger\" />\n\t\t<!-- This will be the content of the popover -->\n\t\t<template #popper>\n\t\t\t<slot />\n\t\t</template>\n\t</Dropdown>\n</template>\n\n<script>\nimport { Dropdown } from 'floating-vue'\nimport { createFocusTrap } from 'focus-trap'\nimport { getTrapStack } from '../../utils/focusTrap.js'\n\nexport default {\n\tname: 'NcPopover',\n\n\tcomponents: {\n\t\tDropdown,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\tpopoverBaseClass: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Enable popover focus trap\n\t\t */\n\t\tfocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {import('focus-trap').FocusTargetValueOrFalse}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean],\n\t\t},\n\t},\n\n\temits: [\n\t\t'after-show',\n\t\t'after-hide',\n\t],\n\n\tbeforeDestroy() {\n\t\tthis.clearFocusTrap()\n\t\tthis.clearEscapeStopPropagation()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverContentElement() {\n\t\t\treturn this.$refs.popover?.$refs.popperContent?.$el\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tawait this.$nextTick()\n\n\t\t\tif (!this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst el = this.getPopoverContentElement()\n\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.$focusTrap = createFocusTrap(el, {\n\t\t\t\t// Prevents to lose focus using esc key\n\t\t\t\t// Focus will be release when popover be hide\n\t\t\t\tescapeDeactivates: false,\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tsetReturnFocus: this.setReturnFocus,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t})\n\t\t\tthis.$focusTrap.activate()\n\t\t},\n\n\t\t/**\n\t\t * Remove focus trap\n\t\t *\n\t\t * @param {object} options The configuration options for focusTrap\n\t\t */\n\t\tclearFocusTrap(options = {}) {\n\t\t\ttry {\n\t\t\t\tthis.$focusTrap?.deactivate(options)\n\t\t\t\tthis.$focusTrap = null\n\t\t\t} catch (err) {\n\t\t\t\tconsole.warn(err)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add stopPropagation for Escape.\n\t\t * It prevents global Escape handling after closing popover.\n\t\t *\n\t\t * Manual event handling is used here instead of v-on because there is no direct access to the node.\n\t\t * Alternative - wrap <template #popover> in a div wrapper.\n\t\t */\n\t\taddEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.addEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * Remove stop Escape handler\n\t\t */\n\t\tclearEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.removeEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * @param {KeyboardEvent} event - native keydown event\n\t\t */\n\t\tstopKeydownEscapeHandler(event) {\n\t\t\tif (event.type === 'keydown' && event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\n\t\tafterShow() {\n\t\t\t/**\n\t\t\t * Triggered after the tooltip was visually displayed.\n\t\t\t *\n\t\t\t * This is different from the 'show' and 'apply-show' which\n\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t */\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('after-show')\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.addEscapeStopPropagation()\n\t\t\t})\n\t\t},\n\t\tafterHide() {\n\t\t\t/**\n\t\t\t * Triggered after the tooltip was visually hidden.\n\t\t\t */\n\t\t\tthis.$emit('after-hide')\n\t\t\tthis.clearFocusTrap()\n\t\t\tthis.clearEscapeStopPropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n\n.resize-observer {\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\tz-index:-1;\n\twidth:100%;\n\theight:100%;\n\tborder:none;\n\tbackground-color:transparent;\n\tpointer-events:none;\n\tdisplay:block;\n\toverflow:hidden;\n\topacity:0\n}\n\n.resize-observer object {\n\tdisplay:block;\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\theight:100%;\n\twidth:100%;\n\toverflow:hidden;\n\tpointer-events:none;\n\tz-index:-1\n}\n\n$arrow-width: 10px;\n\n.v-popper--theme-dropdown {\n\t&.v-popper__popper {\n\t\tz-index: 100000;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: block !important;\n\n\t\tfilter: drop-shadow(0 1px 10px var(--color-box-shadow));\n\n\t\t.v-popper__inner {\n\t\t\tpadding: 0;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t\toverflow: hidden;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t.v-popper__arrow-container {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: transparent;\n\t\t\tborder-width: $arrow-width;\n\t\t}\n\n\t\t&[data-popper-placement^='top'] .v-popper__arrow-container {\n\t\t\tbottom: -$arrow-width;\n\t\t\tborder-bottom-width: 0;\n\t\t\tborder-top-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='bottom'] .v-popper__arrow-container {\n\t\t\ttop: -$arrow-width;\n\t\t\tborder-top-width: 0;\n\t\t\tborder-bottom-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='right'] .v-popper__arrow-container {\n\t\t\tleft: -$arrow-width;\n\t\t\tborder-left-width: 0;\n\t\t\tborder-right-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='left'] .v-popper__arrow-container {\n\t\t\tright: -$arrow-width;\n\t\t\tborder-right-width: 0;\n\t\t\tborder-left-color: var(--color-main-background);\n\t\t}\n\n\t\t&[aria-hidden='true'] {\n\t\t\tvisibility: hidden;\n\t\t\ttransition: opacity var(--animation-quick), visibility var(--animation-quick);\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[aria-hidden='false'] {\n\t\t\tvisibility: visible;\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","floatingVue","_b","_a","el","focusTrap","focusTrap$1","options","err","event"],"mappings":";;AAgIA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC,EAAA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,CAAA,aAAA,YAAA,QAAA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,gBAAA;AACA,SAAA,eAAA,GACA,KAAA,2BAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA,IAIA,2BAAA;;AACA,cAAAC,KAAAC,IAAA,KAAA,MAAA,YAAA,gBAAAA,EAAA,MAAA,kBAAA,gBAAAD,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA,eAAA;AAGA,UAFA,MAAA,KAAA,UAAA,GAEA,CAAA,KAAA;AACA;AAGA,YAAAE,IAAA,KAAA,yBAAA;AAEA,MAAAA,MAKA,KAAA,aAAAC,EAAA,gBAAAD,GAAA;AAAA;AAAA;AAAA,QAGA,mBAAA;AAAA,QACA,mBAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,WAAAE,EAAA,aAAA;AAAA,MACA,CAAA,GACA,KAAA,WAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAAC,IAAA,CAAA,GAAA;;AACA,UAAA;AACA,SAAAJ,IAAA,KAAA,eAAA,QAAAA,EAAA,WAAAI,IACA,KAAA,aAAA;AAAA,MACA,SAAAC,GAAA;AACA,gBAAA,KAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,2BAAA;AACA,YAAAJ,IAAA,KAAA,yBAAA;AACA,MAAAA,KAAA,QAAAA,EAAA,iBAAA,WAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,6BAAA;AACA,YAAAA,IAAA,KAAA,yBAAA;AACA,MAAAA,KAAA,QAAAA,EAAA,oBAAA,WAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,yBAAAK,GAAA;AACA,MAAAA,EAAA,SAAA,aAAAA,EAAA,QAAA,YACAA,EAAA,gBAAA;AAAA,IAEA;AAAA,IAEA,YAAA;AAQA,WAAA,UAAA,MAAA;AACA,aAAA,MAAA,YAAA,GACA,KAAA,aAAA,GACA,KAAA,yBAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IACA,YAAA;AAIA,WAAA,MAAA,YAAA,GACA,KAAA,eAAA,GACA,KAAA,2BAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcPopover.mjs

@@ -1,47 +1,130 @@
-import "../assets/index-b814f5fa.css";
+import "../assets/index-4ebacc78.css";
 import { Dropdown as r } from "floating-vue";
 import { createFocusTrap as s } from "focus-trap";
-import { g as a } from "../chunks/focusTrap-173aba65.mjs";
-import { n as p } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const n = { name: "NcPopover", components: { Dropdown: r }, inheritAttrs: !1, props: { popoverBaseClass: { type: String, default: "" }, focusTrap: { type: Boolean, default: !0 }, setReturnFocus: { default: void 0, type: [HTMLElement, SVGElement, String, Boolean] } }, emits: ["after-show", "after-hide"], beforeDestroy() {
-  this.clearFocusTrap(), this.clearEscapeStopPropagation();
-}, methods: { getPopoverContentElement() {
-  var e, t;
-  return (t = (e = this.$refs.popover) == null ? void 0 : e.$refs.popperContent) == null ? void 0 : t.$el;
-}, async useFocusTrap() {
-  if (await this.$nextTick(), !this.focusTrap)
-    return;
-  const e = this.getPopoverContentElement();
-  e && (this.$focusTrap = s(e, { escapeDeactivates: !1, allowOutsideClick: !0, setReturnFocus: this.setReturnFocus, trapStack: a() }), this.$focusTrap.activate());
-}, clearFocusTrap(e = {}) {
-  var t;
-  try {
-    (t = this.$focusTrap) == null || t.deactivate(e), this.$focusTrap = null;
-  } catch (o) {
-    console.warn(o);
+import { g as a } from "../chunks/focusTrap-5d0f71d4.mjs";
+import { n } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const p = {
+  name: "NcPopover",
+  components: {
+    Dropdown: r
+  },
+  inheritAttrs: !1,
+  props: {
+    popoverBaseClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Enable popover focus trap
+     */
+    focusTrap: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Set element to return focus to after focus trap deactivation
+     *
+     * @type {import('focus-trap').FocusTargetValueOrFalse}
+     */
+    setReturnFocus: {
+      default: void 0,
+      type: [HTMLElement, SVGElement, String, Boolean]
+    }
+  },
+  emits: [
+    "after-show",
+    "after-hide"
+  ],
+  beforeDestroy() {
+    this.clearFocusTrap(), this.clearEscapeStopPropagation();
+  },
+  methods: {
+    /**
+     * @return {HTMLElement|undefined}
+     */
+    getPopoverContentElement() {
+      var e, t;
+      return (t = (e = this.$refs.popover) == null ? void 0 : e.$refs.popperContent) == null ? void 0 : t.$el;
+    },
+    /**
+     * Add focus trap for accessibility.
+     */
+    async useFocusTrap() {
+      if (await this.$nextTick(), !this.focusTrap)
+        return;
+      const e = this.getPopoverContentElement();
+      e && (this.$focusTrap = s(e, {
+        // Prevents to lose focus using esc key
+        // Focus will be release when popover be hide
+        escapeDeactivates: !1,
+        allowOutsideClick: !0,
+        setReturnFocus: this.setReturnFocus,
+        trapStack: a()
+      }), this.$focusTrap.activate());
+    },
+    /**
+     * Remove focus trap
+     *
+     * @param {object} options The configuration options for focusTrap
+     */
+    clearFocusTrap(e = {}) {
+      var t;
+      try {
+        (t = this.$focusTrap) == null || t.deactivate(e), this.$focusTrap = null;
+      } catch (o) {
+        console.warn(o);
+      }
+    },
+    /**
+     * Add stopPropagation for Escape.
+     * It prevents global Escape handling after closing popover.
+     *
+     * Manual event handling is used here instead of v-on because there is no direct access to the node.
+     * Alternative - wrap <template #popover> in a div wrapper.
+     */
+    addEscapeStopPropagation() {
+      const e = this.getPopoverContentElement();
+      e == null || e.addEventListener("keydown", this.stopKeydownEscapeHandler);
+    },
+    /**
+     * Remove stop Escape handler
+     */
+    clearEscapeStopPropagation() {
+      const e = this.getPopoverContentElement();
+      e == null || e.removeEventListener("keydown", this.stopKeydownEscapeHandler);
+    },
+    /**
+     * @param {KeyboardEvent} event - native keydown event
+     */
+    stopKeydownEscapeHandler(e) {
+      e.type === "keydown" && e.key === "Escape" && e.stopPropagation();
+    },
+    afterShow() {
+      this.$nextTick(() => {
+        this.$emit("after-show"), this.useFocusTrap(), this.addEscapeStopPropagation();
+      });
+    },
+    afterHide() {
+      this.$emit("after-hide"), this.clearFocusTrap(), this.clearEscapeStopPropagation();
+    }
   }
-}, addEscapeStopPropagation() {
-  var e;
-  (e = this.getPopoverContentElement()) == null || e.addEventListener("keydown", this.stopKeydownEscapeHandler);
-}, clearEscapeStopPropagation() {
-  var e;
-  (e = this.getPopoverContentElement()) == null || e.removeEventListener("keydown", this.stopKeydownEscapeHandler);
-}, stopKeydownEscapeHandler(e) {
-  e.type === "keydown" && e.key === "Escape" && e.stopPropagation();
-}, afterShow() {
-  this.$nextTick(() => {
-    this.$emit("after-show"), this.useFocusTrap(), this.addEscapeStopPropagation();
-  });
-}, afterHide() {
-  this.$emit("after-hide"), this.clearFocusTrap(), this.clearEscapeStopPropagation();
-} } };
+};
 var i = function() {
-  var e = this, t = e._self._c;
-  return t("Dropdown", e._g(e._b({ ref: "popover", attrs: { distance: 10, "arrow-padding": 10, "no-auto-focus": !0, "popper-class": e.popoverBaseClass }, on: { "apply-show": e.afterShow, "apply-hide": e.afterHide }, scopedSlots: e._u([{ key: "popper", fn: function() {
-    return [e._t("default")];
-  }, proxy: !0 }], null, !0) }, "Dropdown", e.$attrs, !1), e.$listeners), [e._t("trigger")], 2);
-}, c = [], l = p(n, i, c, !1, null, null, null, null);
-const w = l.exports;
+  var t = this, o = t._self._c;
+  return o("Dropdown", t._g(t._b({ ref: "popover", attrs: { distance: 10, "arrow-padding": 10, "no-auto-focus": !0, "popper-class": t.popoverBaseClass }, on: { "apply-show": t.afterShow, "apply-hide": t.afterHide }, scopedSlots: t._u([{ key: "popper", fn: function() {
+    return [t._t("default")];
+  }, proxy: !0 }], null, !0) }, "Dropdown", t.$attrs, !1), t.$listeners), [t._t("trigger")], 2);
+}, c = [], l = /* @__PURE__ */ n(
+  p,
+  i,
+  c,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const _ = l.exports;
 export {
-  w as default
+  _ as default
 };

package/dist/Components/NcPopover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcPopover.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcPopover.mjs","sources":["../../src/components/NcPopover/NcPopover.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 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\n<docs>\n\n### General description\n\nThis component is just a wrapper for the floating-vue plugin by Akryum,\nplease refer to this documentation for customization:\nhttps://github.com/Akryum/floating-vue\n\nThis components has two slots:\n* 'trigger' which can be any html element and it will trigger the popover\nthis slot is optional since you can toggle the popover also by updating the\nopen prop on this component;\n\n* a default slot that is for the content of the popover.\n\n### Examples\n\n#### With a `<button>` as a trigger:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover>\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template>\n\t\t\t\t<form tabindex=\"0\" @submit.prevent>\n\t\t\t\t\t<h2>this is some content</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>\n\t\t\t\t\t\tVestibulum eget placerat velit.\n\t\t\t\t\t</p>\n\t\t\t\t\t<label>\n\t\t\t\t\t\tLabel element\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"input element\"/>\n\t\t\t\t\t</label>\n\t\t\t\t</form>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Without focus trap:\n\nThe [`focus-trap`](https://github.com/focus-trap/focus-trap) emits an error when used in a non-focusable element tree.\n\nThe prop `:focus-trap=\"false\"` help to prevent it when the default behavior is not relevant.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover :focus-trap=\"false\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Click me!</NcButton>\n\t\t\t</template>\n\t\t\t<template>\n\t\t\t\tHi! 🚀\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With passing props to `floating-vue`'s `Dropdown`:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover container=\"body\" :popper-hide-triggers=\"(triggers) => [...triggers, 'click']\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<NcButton>Click on the button will close NcPopover</NcButton>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n</docs>\n\n<template>\n\t<Dropdown ref=\"popover\"\n\t\t:distance=\"10\"\n\t\t:arrow-padding=\"10\"\n\t\tv-bind=\"$attrs\"\n\t\t:no-auto-focus=\"true /* Handled by the focus trap */\"\n\t\t:popper-class=\"popoverBaseClass\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-show=\"afterShow\"\n\t\t@apply-hide=\"afterHide\">\n\t\t<!-- This will be the popover target (for the events and position) -->\n\t\t<slot name=\"trigger\" />\n\t\t<!-- This will be the content of the popover -->\n\t\t<template #popper>\n\t\t\t<slot />\n\t\t</template>\n\t</Dropdown>\n</template>\n\n<script>\nimport { Dropdown } from 'floating-vue'\nimport { createFocusTrap } from 'focus-trap'\nimport { getTrapStack } from '../../utils/focusTrap.js'\n\nexport default {\n\tname: 'NcPopover',\n\n\tcomponents: {\n\t\tDropdown,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\tpopoverBaseClass: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Enable popover focus trap\n\t\t */\n\t\tfocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {import('focus-trap').FocusTargetValueOrFalse}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean],\n\t\t},\n\t},\n\n\temits: [\n\t\t'after-show',\n\t\t'after-hide',\n\t],\n\n\tbeforeDestroy() {\n\t\tthis.clearFocusTrap()\n\t\tthis.clearEscapeStopPropagation()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverContentElement() {\n\t\t\treturn this.$refs.popover?.$refs.popperContent?.$el\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tawait this.$nextTick()\n\n\t\t\tif (!this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst el = this.getPopoverContentElement()\n\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.$focusTrap = createFocusTrap(el, {\n\t\t\t\t// Prevents to lose focus using esc key\n\t\t\t\t// Focus will be release when popover be hide\n\t\t\t\tescapeDeactivates: false,\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tsetReturnFocus: this.setReturnFocus,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t})\n\t\t\tthis.$focusTrap.activate()\n\t\t},\n\n\t\t/**\n\t\t * Remove focus trap\n\t\t *\n\t\t * @param {object} options The configuration options for focusTrap\n\t\t */\n\t\tclearFocusTrap(options = {}) {\n\t\t\ttry {\n\t\t\t\tthis.$focusTrap?.deactivate(options)\n\t\t\t\tthis.$focusTrap = null\n\t\t\t} catch (err) {\n\t\t\t\tconsole.warn(err)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add stopPropagation for Escape.\n\t\t * It prevents global Escape handling after closing popover.\n\t\t *\n\t\t * Manual event handling is used here instead of v-on because there is no direct access to the node.\n\t\t * Alternative - wrap <template #popover> in a div wrapper.\n\t\t */\n\t\taddEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.addEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * Remove stop Escape handler\n\t\t */\n\t\tclearEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.removeEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * @param {KeyboardEvent} event - native keydown event\n\t\t */\n\t\tstopKeydownEscapeHandler(event) {\n\t\t\tif (event.type === 'keydown' && event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\n\t\tafterShow() {\n\t\t\t/**\n\t\t\t * Triggered after the tooltip was visually displayed.\n\t\t\t *\n\t\t\t * This is different from the 'show' and 'apply-show' which\n\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t */\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('after-show')\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.addEscapeStopPropagation()\n\t\t\t})\n\t\t},\n\t\tafterHide() {\n\t\t\t/**\n\t\t\t * Triggered after the tooltip was visually hidden.\n\t\t\t */\n\t\t\tthis.$emit('after-hide')\n\t\t\tthis.clearFocusTrap()\n\t\t\tthis.clearEscapeStopPropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n\n.resize-observer {\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\tz-index:-1;\n\twidth:100%;\n\theight:100%;\n\tborder:none;\n\tbackground-color:transparent;\n\tpointer-events:none;\n\tdisplay:block;\n\toverflow:hidden;\n\topacity:0\n}\n\n.resize-observer object {\n\tdisplay:block;\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\theight:100%;\n\twidth:100%;\n\toverflow:hidden;\n\tpointer-events:none;\n\tz-index:-1\n}\n\n$arrow-width: 10px;\n\n.v-popper--theme-dropdown {\n\t&.v-popper__popper {\n\t\tz-index: 100000;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: block !important;\n\n\t\tfilter: drop-shadow(0 1px 10px var(--color-box-shadow));\n\n\t\t.v-popper__inner {\n\t\t\tpadding: 0;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t\toverflow: hidden;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t.v-popper__arrow-container {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: transparent;\n\t\t\tborder-width: $arrow-width;\n\t\t}\n\n\t\t&[data-popper-placement^='top'] .v-popper__arrow-container {\n\t\t\tbottom: -$arrow-width;\n\t\t\tborder-bottom-width: 0;\n\t\t\tborder-top-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='bottom'] .v-popper__arrow-container {\n\t\t\ttop: -$arrow-width;\n\t\t\tborder-top-width: 0;\n\t\t\tborder-bottom-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='right'] .v-popper__arrow-container {\n\t\t\tleft: -$arrow-width;\n\t\t\tborder-left-width: 0;\n\t\t\tborder-right-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='left'] .v-popper__arrow-container {\n\t\t\tright: -$arrow-width;\n\t\t\tborder-right-width: 0;\n\t\t\tborder-left-color: var(--color-main-background);\n\t\t}\n\n\t\t&[aria-hidden='true'] {\n\t\t\tvisibility: hidden;\n\t\t\ttransition: opacity var(--animation-quick), visibility var(--animation-quick);\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[aria-hidden='false'] {\n\t\t\tvisibility: visible;\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","Dropdown","_b","_a","el","createFocusTrap","getTrapStack","options","err","event"],"mappings":";;;;;AAgIA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,CAAA,aAAA,YAAA,QAAA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,gBAAA;AACA,SAAA,eAAA,GACA,KAAA,2BAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA,IAIA,2BAAA;;AACA,cAAAC,KAAAC,IAAA,KAAA,MAAA,YAAA,gBAAAA,EAAA,MAAA,kBAAA,gBAAAD,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA,eAAA;AAGA,UAFA,MAAA,KAAA,UAAA,GAEA,CAAA,KAAA;AACA;AAGA,YAAAE,IAAA,KAAA,yBAAA;AAEA,MAAAA,MAKA,KAAA,aAAAC,EAAAD,GAAA;AAAA;AAAA;AAAA,QAGA,mBAAA;AAAA,QACA,mBAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,WAAAE,EAAA;AAAA,MACA,CAAA,GACA,KAAA,WAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAAC,IAAA,CAAA,GAAA;;AACA,UAAA;AACA,SAAAJ,IAAA,KAAA,eAAA,QAAAA,EAAA,WAAAI,IACA,KAAA,aAAA;AAAA,MACA,SAAAC,GAAA;AACA,gBAAA,KAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,2BAAA;AACA,YAAAJ,IAAA,KAAA,yBAAA;AACA,MAAAA,KAAA,QAAAA,EAAA,iBAAA,WAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,6BAAA;AACA,YAAAA,IAAA,KAAA,yBAAA;AACA,MAAAA,KAAA,QAAAA,EAAA,oBAAA,WAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,yBAAAK,GAAA;AACA,MAAAA,EAAA,SAAA,aAAAA,EAAA,QAAA,YACAA,EAAA,gBAAA;AAAA,IAEA;AAAA,IAEA,YAAA;AAQA,WAAA,UAAA,MAAA;AACA,aAAA,MAAA,YAAA,GACA,KAAA,aAAA,GACA,KAAA,yBAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IACA,YAAA;AAIA,WAAA,MAAA,YAAA,GACA,KAAA,eAAA,GACA,KAAA,2BAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}