@nextcloud/vue 8.5.0 → 9.0.0-alpha.0

package/dist/chunks/NcHeaderMenu-Eo6rZDeL.cjs

@@ -0,0 +1,216 @@
+var N = require("../assets/NcHeaderMenu-j8h_puZT.css");
+const a = require("@vueuse/components"), d = require("focus-trap"), s = require("./GenRandomId-ULxaMkkr.cjs"), u = require("../Mixins/clickOutsideOptions.cjs");
+require("@nextcloud/router");
+const e = require("vue");
+;/* empty css                                                                           */
+const l = require("./_plugin-vue_export-helper-xG2iG1wl.cjs");
+require("linkify-string");
+require("escape-html");
+require("striptags");
+require("@nextcloud/auth");
+require("@nextcloud/axios");
+require("@nextcloud/capabilities");
+const p = require("./focusTrap-n3H52LOw.cjs"), h = require("./NcButton-Uxh-oARg.cjs"), f = {
+  name: "NcHeaderMenu",
+  components: {
+    NcButton: h.NcButton
+  },
+  directives: {
+    ClickOutside: a.vOnClickOutside
+  },
+  mixins: [
+    u
+  ],
+  props: {
+    /**
+     * Unique id for this menu
+     */
+    id: {
+      type: String,
+      required: !0
+    },
+    /**
+     * aria-label attribute of the menu open button
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Current menu open state
+     */
+    open: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Pass `true` if the header menu is used for website navigation
+     *
+     * The wrapper tag will be set to `nav` and its `aria-labelledby`
+     * will be associated with the menu open button
+     */
+    isNav: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Additional visually hidden description text for the menu
+     * open button
+     */
+    description: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    "close",
+    "closed",
+    "open",
+    "opened",
+    "update:open",
+    "cancel"
+  ],
+  data() {
+    return {
+      focusTrap: null,
+      opened: this.open,
+      shortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),
+      triggerId: s.GenRandomId(),
+      descriptionId: s.GenRandomId()
+    };
+  },
+  computed: {
+    wrapperTag() {
+      return this.isNav ? "nav" : "div";
+    },
+    clickOutsideConfig() {
+      return [
+        this.closeMenu,
+        this.clickOutsideOptions
+      ];
+    },
+    listeners() {
+      return this.isNav ? {
+        focusout: this.onFocusOut
+      } : null;
+    }
+  },
+  watch: {
+    open(t) {
+      t ? this.openMenu() : this.closeMenu();
+    }
+  },
+  mounted() {
+    document.addEventListener("keydown", this.onKeyDown);
+  },
+  beforeUnmount() {
+    document.removeEventListener("keydown", this.onKeyDown);
+  },
+  methods: {
+    /**
+     * Toggle the current menu open state
+     */
+    toggleMenu() {
+      this.opened ? this.closeMenu() : this.openMenu();
+    },
+    /**
+     * Close the current menu
+     *
+     * @param {boolean} cancelled emit a cancel event instead of close
+     */
+    closeMenu(t = !1) {
+      this.opened = !1, this.$emit(t ? "cancel" : "close"), this.$emit("update:open", !1), this.clearFocusTrap(), this.$nextTick(() => {
+        this.$emit("closed");
+      });
+    },
+    /**
+     * Open the current menu
+     */
+    openMenu() {
+      this.opened = !0, this.$emit("open"), this.$emit("update:open", !0), this.$nextTick(() => {
+        this.useFocusTrap(), this.$emit("opened");
+      });
+    },
+    onKeyDown(t) {
+      this.shortcutsDisabled || !this.opened || t.key === "Escape" && (t.preventDefault(), this.closeMenu(!0));
+    },
+    /**
+     * @param {FocusEvent} event The focus event
+     */
+    onFocusOut(t) {
+      this.$refs.headerMenu.contains(t.relatedTarget) || this.closeMenu();
+    },
+    /**
+     * Add focus trap for accessibility.
+     * Shall only be used when all children are mounted
+     * and available in the DOM. We use $nextTick for that.
+     */
+    async useFocusTrap() {
+      if (this.isNav || this.focusTrap)
+        return;
+      const t = this.$refs.content;
+      this.focusTrap = d.createFocusTrap(t, {
+        allowOutsideClick: !0,
+        trapStack: p.getTrapStack(),
+        fallbackFocus: this.$refs.trigger
+      }), this.focusTrap.activate();
+    },
+    clearFocusTrap() {
+      this.focusTrap?.deactivate(), this.focusTrap = null;
+    }
+  }
+}, m = ["id"], _ = { class: "header-menu__carret" }, g = ["id"], v = {
+  ref: "content",
+  class: "header-menu__content"
+};
+function k(t, b, i, w, n, r) {
+  const o = e.resolveComponent("NcButton"), c = e.resolveDirective("click-outside");
+  return e.withDirectives((e.openBlock(), e.createBlock(e.resolveDynamicComponent(r.wrapperTag), e.mergeProps({
+    id: i.id,
+    ref: "headerMenu",
+    "aria-labelledby": i.isNav ? n.triggerId : null,
+    class: [{ "header-menu--opened": n.opened }, "header-menu"]
+  }, e.toHandlers(r.listeners)), {
+    default: e.withCtx(() => [
+      e.createVNode(o, {
+        id: i.isNav ? n.triggerId : null,
+        ref: "trigger",
+        type: "tertiary-no-background",
+        class: "header-menu__trigger",
+        "aria-label": i.ariaLabel,
+        "aria-describedby": i.description ? n.descriptionId : null,
+        "aria-controls": `header-menu-${i.id}`,
+        "aria-expanded": n.opened.toString(),
+        onClick: e.withModifiers(r.toggleMenu, ["prevent"])
+      }, {
+        icon: e.withCtx(() => [
+          e.renderSlot(t.$slots, "trigger", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["id", "aria-label", "aria-describedby", "aria-controls", "aria-expanded", "onClick"]),
+      i.description ? (e.openBlock(), e.createElementBlock("span", {
+        key: 0,
+        id: n.descriptionId,
+        class: "header-menu__description hidden-visually"
+      }, e.toDisplayString(i.description), 9, m)) : e.createCommentVNode("", !0),
+      e.withDirectives(e.createElementVNode("div", _, null, 512), [
+        [e.vShow, n.opened]
+      ]),
+      e.withDirectives(e.createElementVNode("div", {
+        id: `header-menu-${i.id}`,
+        class: "header-menu__wrapper"
+      }, [
+        e.createElementVNode("div", v, [
+          e.renderSlot(t.$slots, "default", {}, void 0, !0)
+        ], 512)
+      ], 8, g), [
+        [e.vShow, n.opened]
+      ])
+    ]),
+    _: 3
+  }, 16, ["id", "aria-labelledby", "class"])), [
+    [c, r.clickOutsideConfig]
+  ]);
+}
+const y = /* @__PURE__ */ l._export_sfc(f, [["render", k], ["__scopeId", "data-v-89b55d8b"]]);
+exports.NcHeaderMenu = y;

package/dist/chunks/NcHeaderMenu-Eo6rZDeL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcHeaderMenu-Eo6rZDeL.cjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":[" <!--\n  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program.  If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<input placeholder=\"Search for files, comments, contacts...\" type=\"search\" style=\"width: 99%;\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\tdescription=\"Start typing to search\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\"\n\t\tv-on=\"listeners\">\n\t\t<!-- Trigger -->\n\t\t<NcButton :id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\ttype=\"tertiary-no-background\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span v-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"opened\" class=\"header-menu__carret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div v-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t<!-- @slot Main content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\n\nimport NcButton from '../NcButton/index.ts'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * aria-label attribute of the menu open button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Current menu open state\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Pass `true` if the header menu is used for website navigation\n\t\t *\n\t\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t */\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the menu\n\t\t * open button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\topened: this.open,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isNav) {\n\t\t\t\treturn {\n\t\t\t\t\tfocusout: this.onFocusOut,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\tbeforeUnmount() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the current menu open state\n\t\t */\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Close the current menu\n\t\t *\n\t\t * @param {boolean} cancelled emit a cancel event instead of close\n\t\t */\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Open the current menu\n\t\t */\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled || !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/** User cancelled the menu by pressing escape */\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event The focus event\n\t\t */\n\t\tonFocusOut(event) {\n\t\t\tif (!this.$refs.headerMenu.contains(event.relatedTarget)) {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tif (this.isNav || this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n.header-menu {\n\tposition: relative;\n\twidth: var(--header-height);\n\theight: var(--header-height);\n\n\t&__trigger {\n\t\twidth: var(--header-height);\n\t\theight: var(--header-height);\n\t\topacity: .85;\n\n\t\t// header is filled with primary or image background\n\t\tfilter: none !important;\n\t\tcolor: var(--color-primary-text) !important;\n\t}\n\n\t&--opened &__trigger,\n\t&__trigger:hover,\n\t&__trigger:focus,\n\t&__trigger:active {\n\t\topacity: 1;\n\t}\n\n\t#{&}__trigger:focus-visible {\n\t\toutline: none !important;\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: 50px;\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tpadding: 8px;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__carret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(44px * 1.5);\n\t\tmax-height: calc(100vh - 50px * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.header-menu {\n\t\twidth: $clickable-area;\n\n\t\t&__trigger {\n\t\t\twidth: $clickable-area;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcButton","Mixins_clickOutsideOptions","open","cancelled","event","contentContainer","_hoisted_1","_hoisted_2","_hoisted_3","vue","$options","$props","$data","_hoisted_4"],"mappings":";;;;;;;;;;;;uFA0HAA,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,UAAAC,EAAA;AAAA;;;;EAOD,QAAA;AAAA,IACCC;AAAA;EAGD,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;IA2BA,OAAA;AAAA;;;;;;;;;;;;EAeD,OAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;IAEA;AAAA;EAGD,OAAA;AACC,WAAA;AAAA,MACC,WAAA;AAAA,MACA,QAAA,KAAA;AAAA,MACA,mBAAA,OAAA,KAAA,eAAA,2BAAA;AAAA;;IAGD;AAAA;EAGD,UAAA;AAAA;;;IAKC,qBAAA;AACC,aAAA;AAAA,QACC,KAAA;AAAA;MAED;AAAA;;AAIA,aAAA,KAAA,QACC;AAAA;MAEA,IAED;AAAA;;EAIF,OAAA;AAAA;AAEE,MAAAC,IACC,KAAA,SAAA,IAEA,KAAA,UAAA;AAAA;;EAKH,UAAA;;;EAGA,gBAAA;;;EAIA,SAAA;AAAA;AAAA;AAAA;AAAA;AAME,MAAA,KAAA,SAGC,KAAA,UAAA,IAFA,KAAA,SAAA;AAAA;;;;;;;AAaD,WAAA,SAAA,IACA,KAAA,MAAAC,IAAA,WAAA,OAAA,GACA,KAAA,MAAA,eAAA,EAAA,GAGA,KAAA,eAAA,GAGA,KAAA,UAAA,MAAA;AACC,aAAA,MAAA,QAAA;AAAA;;;;;;AASD,WAAA,SAAA,IACA,KAAA,MAAA,MAAA,kCAIA,KAAA,UAAA,MAAA;AACC,aAAA,aAAA,GACA,KAAA,MAAA,QAAA;AAAA;;IAIF,UAAAC,GAAA;AACC,MAAA,KAAA,qBAAA,CAAA,KAAA,iCAMCA,EAAA,eAAA,GAGA,KAAA,UAAA,EAAA;AAAA;;;;IAOF,WAAAA,GAAA;yDAEE,KAAA,UAAA;AAAA;;;;;;IASF,MAAA,eAAA;AACC,UAAA,KAAA,SAAA,KAAA;;AAIA,YAAAC,IAAA,KAAA,MAAA;;;;QAIC,eAAA,KAAA,MAAA;AAAA;;IAIF,iBAAA;oCAEC,KAAA,YAAA;AAAA;;AAGH,GAhVAC,IAAA,CAAA,IAAA,GAkGuBC,IAAA,EAAA,OAAA,sBAAA,GAlGvBC,IAAA,CAAA,IAAA;EAwGQ,KAAA;AAAA,EAAc,OAAA;;;;AAtCrB,SAAAC,EAAA,gBAAAA,EAAA,UAAA,GAAAA,EAAA,YAAAA,EAAA,wBAAAC,EAAA,UAAA,GAAAD,EAAA,WAAA;AAAA,IACE,IAAAE,EAAA;AAAA,IACD,KAAA;AAAA;;EAKA,GAAAF,EAAA,WAAAC,EAAA,SAAA,CAAA,GAAA;AAAA,IAzEF,SAAAD,EAAA,QAAA,MAAA;AAAA;;QA4EG,KAAA;AAAA,QACA,MAAA;AAAA,QACA,OAAA;AAAA,QACC,cAAAE,EAAA;AAAA;QAEA,iBAAA,eAAAA,EAAA,EAAA;AAAA;;;QAGU,MAAAF,EAAA,QAAA,MAAA;AAAA;;;;;;QAQV,IAAAG,EAAA;AAAA,QACD,OAAA;AAAA,MACG,GAAAH,EAAA,gBAAAE,EAAA,WAAA,GAAA,GAAAL,CAAA,KA9FNG,EAAA,mBAAA,IAAA,EAAA;AAAA,MAkGEA,EAAA,eAAAA,EAAA,mBAAA,OAAAF,GAAA,MAAA,GAAA,GAAA;AAAA;;;QAIE,IAAA,eAAAI,EAAA,EAAA;AAAA,QACD,OAAA;AAAA;QACAF,EAAA,mBAAA,OAAAI,GAAA;AAAA;;MAxGH,GAAA,GAAAL,CAAA,GAAA;AAAA;;;;;;;;;;"}

package/dist/chunks/NcHeaderMenu-yJJ4FWin.mjs

@@ -0,0 +1,223 @@
+import "../assets/NcHeaderMenu-j8h_puZT.css";
+import { vOnClickOutside as h } from "@vueuse/components";
+import { createFocusTrap as m } from "focus-trap";
+import { G as s } from "./GenRandomId-VodkdWbp.mjs";
+import f from "../Mixins/clickOutsideOptions.mjs";
+import "@nextcloud/router";
+import { resolveComponent as _, resolveDirective as g, withDirectives as r, openBlock as a, createBlock as v, resolveDynamicComponent as k, mergeProps as y, toHandlers as b, withCtx as c, createVNode as T, withModifiers as w, renderSlot as d, createElementBlock as M, toDisplayString as N, createCommentVNode as C, createElementVNode as o, vShow as l } from "vue";
+/* empty css                                                                          */
+import { _ as O } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+import "linkify-string";
+import "escape-html";
+import "striptags";
+import "@nextcloud/auth";
+import "@nextcloud/axios";
+import "@nextcloud/capabilities";
+import { g as D } from "./focusTrap-Py2bQ9-r.mjs";
+import { N as S } from "./NcButton-nCkJxwsi.mjs";
+const B = {
+  name: "NcHeaderMenu",
+  components: {
+    NcButton: S
+  },
+  directives: {
+    ClickOutside: h
+  },
+  mixins: [
+    f
+  ],
+  props: {
+    /**
+     * Unique id for this menu
+     */
+    id: {
+      type: String,
+      required: !0
+    },
+    /**
+     * aria-label attribute of the menu open button
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Current menu open state
+     */
+    open: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Pass `true` if the header menu is used for website navigation
+     *
+     * The wrapper tag will be set to `nav` and its `aria-labelledby`
+     * will be associated with the menu open button
+     */
+    isNav: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Additional visually hidden description text for the menu
+     * open button
+     */
+    description: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    "close",
+    "closed",
+    "open",
+    "opened",
+    "update:open",
+    "cancel"
+  ],
+  data() {
+    return {
+      focusTrap: null,
+      opened: this.open,
+      shortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),
+      triggerId: s(),
+      descriptionId: s()
+    };
+  },
+  computed: {
+    wrapperTag() {
+      return this.isNav ? "nav" : "div";
+    },
+    clickOutsideConfig() {
+      return [
+        this.closeMenu,
+        this.clickOutsideOptions
+      ];
+    },
+    listeners() {
+      return this.isNav ? {
+        focusout: this.onFocusOut
+      } : null;
+    }
+  },
+  watch: {
+    open(e) {
+      e ? this.openMenu() : this.closeMenu();
+    }
+  },
+  mounted() {
+    document.addEventListener("keydown", this.onKeyDown);
+  },
+  beforeUnmount() {
+    document.removeEventListener("keydown", this.onKeyDown);
+  },
+  methods: {
+    /**
+     * Toggle the current menu open state
+     */
+    toggleMenu() {
+      this.opened ? this.closeMenu() : this.openMenu();
+    },
+    /**
+     * Close the current menu
+     *
+     * @param {boolean} cancelled emit a cancel event instead of close
+     */
+    closeMenu(e = !1) {
+      this.opened = !1, this.$emit(e ? "cancel" : "close"), this.$emit("update:open", !1), this.clearFocusTrap(), this.$nextTick(() => {
+        this.$emit("closed");
+      });
+    },
+    /**
+     * Open the current menu
+     */
+    openMenu() {
+      this.opened = !0, this.$emit("open"), this.$emit("update:open", !0), this.$nextTick(() => {
+        this.useFocusTrap(), this.$emit("opened");
+      });
+    },
+    onKeyDown(e) {
+      this.shortcutsDisabled || !this.opened || e.key === "Escape" && (e.preventDefault(), this.closeMenu(!0));
+    },
+    /**
+     * @param {FocusEvent} event The focus event
+     */
+    onFocusOut(e) {
+      this.$refs.headerMenu.contains(e.relatedTarget) || this.closeMenu();
+    },
+    /**
+     * Add focus trap for accessibility.
+     * Shall only be used when all children are mounted
+     * and available in the DOM. We use $nextTick for that.
+     */
+    async useFocusTrap() {
+      if (this.isNav || this.focusTrap)
+        return;
+      const e = this.$refs.content;
+      this.focusTrap = m(e, {
+        allowOutsideClick: !0,
+        trapStack: D(),
+        fallbackFocus: this.$refs.trigger
+      }), this.focusTrap.activate();
+    },
+    clearFocusTrap() {
+      this.focusTrap?.deactivate(), this.focusTrap = null;
+    }
+  }
+}, F = ["id"], I = { class: "header-menu__carret" }, x = ["id"], E = {
+  ref: "content",
+  class: "header-menu__content"
+};
+function K(e, L, t, H, i, n) {
+  const u = _("NcButton"), p = g("click-outside");
+  return r((a(), v(k(n.wrapperTag), y({
+    id: t.id,
+    ref: "headerMenu",
+    "aria-labelledby": t.isNav ? i.triggerId : null,
+    class: [{ "header-menu--opened": i.opened }, "header-menu"]
+  }, b(n.listeners)), {
+    default: c(() => [
+      T(u, {
+        id: t.isNav ? i.triggerId : null,
+        ref: "trigger",
+        type: "tertiary-no-background",
+        class: "header-menu__trigger",
+        "aria-label": t.ariaLabel,
+        "aria-describedby": t.description ? i.descriptionId : null,
+        "aria-controls": `header-menu-${t.id}`,
+        "aria-expanded": i.opened.toString(),
+        onClick: w(n.toggleMenu, ["prevent"])
+      }, {
+        icon: c(() => [
+          d(e.$slots, "trigger", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["id", "aria-label", "aria-describedby", "aria-controls", "aria-expanded", "onClick"]),
+      t.description ? (a(), M("span", {
+        key: 0,
+        id: i.descriptionId,
+        class: "header-menu__description hidden-visually"
+      }, N(t.description), 9, F)) : C("", !0),
+      r(o("div", I, null, 512), [
+        [l, i.opened]
+      ]),
+      r(o("div", {
+        id: `header-menu-${t.id}`,
+        class: "header-menu__wrapper"
+      }, [
+        o("div", E, [
+          d(e.$slots, "default", {}, void 0, !0)
+        ], 512)
+      ], 8, x), [
+        [l, i.opened]
+      ])
+    ]),
+    _: 3
+  }, 16, ["id", "aria-labelledby", "class"])), [
+    [p, n.clickOutsideConfig]
+  ]);
+}
+const te = /* @__PURE__ */ O(B, [["render", K], ["__scopeId", "data-v-89b55d8b"]]);
+export {
+  te as N
+};

package/dist/chunks/NcHeaderMenu-yJJ4FWin.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcHeaderMenu-yJJ4FWin.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":[" <!--\n  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program.  If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<input placeholder=\"Search for files, comments, contacts...\" type=\"search\" style=\"width: 99%;\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\tdescription=\"Start typing to search\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\"\n\t\tv-on=\"listeners\">\n\t\t<!-- Trigger -->\n\t\t<NcButton :id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\ttype=\"tertiary-no-background\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span v-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"opened\" class=\"header-menu__carret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div v-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t<!-- @slot Main content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\n\nimport NcButton from '../NcButton/index.ts'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * aria-label attribute of the menu open button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Current menu open state\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Pass `true` if the header menu is used for website navigation\n\t\t *\n\t\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t */\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the menu\n\t\t * open button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\topened: this.open,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isNav) {\n\t\t\t\treturn {\n\t\t\t\t\tfocusout: this.onFocusOut,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\tbeforeUnmount() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the current menu open state\n\t\t */\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Close the current menu\n\t\t *\n\t\t * @param {boolean} cancelled emit a cancel event instead of close\n\t\t */\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Open the current menu\n\t\t */\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled || !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/** User cancelled the menu by pressing escape */\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event The focus event\n\t\t */\n\t\tonFocusOut(event) {\n\t\t\tif (!this.$refs.headerMenu.contains(event.relatedTarget)) {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tif (this.isNav || this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n.header-menu {\n\tposition: relative;\n\twidth: var(--header-height);\n\theight: var(--header-height);\n\n\t&__trigger {\n\t\twidth: var(--header-height);\n\t\theight: var(--header-height);\n\t\topacity: .85;\n\n\t\t// header is filled with primary or image background\n\t\tfilter: none !important;\n\t\tcolor: var(--color-primary-text) !important;\n\t}\n\n\t&--opened &__trigger,\n\t&__trigger:hover,\n\t&__trigger:focus,\n\t&__trigger:active {\n\t\topacity: 1;\n\t}\n\n\t#{&}__trigger:focus-visible {\n\t\toutline: none !important;\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: 50px;\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tpadding: 8px;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__carret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(44px * 1.5);\n\t\tmax-height: calc(100vh - 50px * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.header-menu {\n\t\twidth: $clickable-area;\n\n\t\t&__trigger {\n\t\t\twidth: $clickable-area;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcButton","clickOutsideOptions","open","cancelled","event","contentContainer","_hoisted_1","_hoisted_2","_hoisted_3","withDirectives","openBlock","createBlock","resolveDynamicComponent","$options","mergeProps","$props","toHandlers","withCtx","$data","toDisplayString","createCommentVNode","createElementVNode","_hoisted_4"],"mappings":";;;;;;;;;;;;;;;;;AA0HA,MAAAA,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,UAAAC;AAAA;;;;EAOD,QAAA;AAAA,IACCC;AAAA;EAGD,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;IA2BA,OAAA;AAAA;;;;;;;;;;;;EAeD,OAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;IAEA;AAAA;EAGD,OAAA;AACC,WAAA;AAAA,MACC,WAAA;AAAA,MACA,QAAA,KAAA;AAAA,MACA,mBAAA,OAAA,KAAA,eAAA,2BAAA;AAAA;;IAGD;AAAA;EAGD,UAAA;AAAA;;;IAKC,qBAAA;AACC,aAAA;AAAA,QACC,KAAA;AAAA;MAED;AAAA;;AAIA,aAAA,KAAA,QACC;AAAA;MAEA,IAED;AAAA;;EAIF,OAAA;AAAA;AAEE,MAAAC,IACC,KAAA,SAAA,IAEA,KAAA,UAAA;AAAA;;EAKH,UAAA;;;EAGA,gBAAA;;;EAIA,SAAA;AAAA;AAAA;AAAA;AAAA;AAME,MAAA,KAAA,SAGC,KAAA,UAAA,IAFA,KAAA,SAAA;AAAA;;;;;;;AAaD,WAAA,SAAA,IACA,KAAA,MAAAC,IAAA,WAAA,OAAA,GACA,KAAA,MAAA,eAAA,EAAA,GAGA,KAAA,eAAA,GAGA,KAAA,UAAA,MAAA;AACC,aAAA,MAAA,QAAA;AAAA;;;;;;AASD,WAAA,SAAA,IACA,KAAA,MAAA,MAAA,kCAIA,KAAA,UAAA,MAAA;AACC,aAAA,aAAA,GACA,KAAA,MAAA,QAAA;AAAA;;IAIF,UAAAC,GAAA;AACC,MAAA,KAAA,qBAAA,CAAA,KAAA,iCAMCA,EAAA,eAAA,GAGA,KAAA,UAAA,EAAA;AAAA;;;;IAOF,WAAAA,GAAA;yDAEE,KAAA,UAAA;AAAA;;;;;;IASF,MAAA,eAAA;AACC,UAAA,KAAA,SAAA,KAAA;;AAIA,YAAAC,IAAA,KAAA,MAAA;;;;QAIC,eAAA,KAAA,MAAA;AAAA;;IAIF,iBAAA;oCAEC,KAAA,YAAA;AAAA;;AAGH,GAhVAC,IAAA,CAAA,IAAA,GAkGuBC,IAAA,EAAA,OAAA,sBAAA,GAlGvBC,IAAA,CAAA,IAAA;EAwGQ,KAAA;AAAA,EAAc,OAAA;;;;AAtCrB,SAAAC,GAAAC,EAAA,GAAAC,EAAAC,EAAAC,EAAA,UAAA,GAAAC,EAAA;AAAA,IACE,IAAAC,EAAA;AAAA,IACD,KAAA;AAAA;;EAKA,GAAAC,EAAAH,EAAA,SAAA,CAAA,GAAA;AAAA,IAzEF,SAAAI,EAAA,MAAA;AAAA;;QA4EG,KAAA;AAAA,QACA,MAAA;AAAA,QACA,OAAA;AAAA,QACC,cAAAF,EAAA;AAAA;QAEA,iBAAA,eAAAA,EAAA,EAAA;AAAA;;;QAGU,MAAAE,EAAA,MAAA;AAAA;;;;;;QAQV,IAAAC,EAAA;AAAA,QACD,OAAA;AAAA,MACG,GAAAC,EAAAJ,EAAA,WAAA,GAAA,GAAAT,CAAA,KA9FNc,EAAA,IAAA,EAAA;AAAA,MAkGEX,EAAAY,EAAA,OAAAd,GAAA,MAAA,GAAA,GAAA;AAAA;;;QAIE,IAAA,eAAAQ,EAAA,EAAA;AAAA,QACD,OAAA;AAAA;QACAM,EAAA,OAAAC,GAAA;AAAA;;MAxGH,GAAA,GAAAd,CAAA,GAAA;AAAA;;;;;;;;;"}

package/dist/chunks/NcHighlight-cBMxLCnf.cjs

@@ -0,0 +1,136 @@
+"use strict";
+const n = require("vue");
+/**
+ * @copyright Copyright (c) 2020 Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+const l = (e, t) => {
+  const h = [];
+  let s = 0, i = e.toLowerCase().indexOf(t.toLowerCase(), s), r = 0;
+  for (; i > -1 && r < e.length; )
+    s = i + t.length, h.push({ start: i, end: s }), i = e.toLowerCase().indexOf(t.toLowerCase(), s), r++;
+  return h;
+}, u = {
+  name: "NcHighlight",
+  props: {
+    /**
+     * The string to display
+     */
+    text: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The string to match and highlight
+     */
+    search: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The ranges to highlight, takes precedence over the search prop.
+     */
+    highlight: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    /**
+     * The indice ranges which should be highlighted.
+     * If an array with ranges is provided, we use it. Otherwise
+     * we calculate it based on the provided substring to highlight.
+     *
+     * @return {Array} The array of ranges to highlight
+     */
+    ranges() {
+      let e = [];
+      return !this.search && this.highlight.length === 0 || (this.highlight.length > 0 ? e = this.highlight : e = l(this.text, this.search), e.forEach((t, h) => {
+        t.end < t.start && (e[h] = {
+          start: t.end,
+          end: t.start
+        });
+      }), e = e.reduce((t, h) => (h.start < this.text.length && h.end > 0 && t.push({
+        start: h.start < 0 ? 0 : h.start,
+        end: h.end > this.text.length ? this.text.length : h.end
+      }), t), []), e.sort((t, h) => t.start - h.start), e = e.reduce((t, h) => {
+        if (!t.length)
+          t.push(h);
+        else {
+          const s = t.length - 1;
+          t[s].end >= h.start ? t[s] = {
+            start: t[s].start,
+            end: Math.max(t[s].end, h.end)
+          } : t.push(h);
+        }
+        return t;
+      }, [])), e;
+    },
+    /**
+     * Calculate the different chunks to show based on the ranges to highlight.
+     *
+     * @return {Array} The chunks
+     */
+    chunks() {
+      if (this.ranges.length === 0)
+        return [{
+          start: 0,
+          end: this.text.length,
+          highlight: !1,
+          text: this.text
+        }];
+      const e = [];
+      let t = 0, h = 0;
+      for (; t < this.text.length; ) {
+        const s = this.ranges[h];
+        if (s.start === t) {
+          e.push({
+            ...s,
+            highlight: !0,
+            text: this.text.slice(s.start, s.end)
+          }), h++, t = s.end, h >= this.ranges.length && t < this.text.length && (e.push({
+            start: t,
+            end: this.text.length,
+            highlight: !1,
+            text: this.text.slice(t)
+          }), t = this.text.length);
+          continue;
+        }
+        e.push({
+          start: t,
+          end: s.start,
+          highlight: !1,
+          text: this.text.slice(t, s.start)
+        }), t = s.start;
+      }
+      return e;
+    }
+  },
+  /**
+   * The render function to display the component
+   *
+   * @return {object} The created VNode
+   */
+  render() {
+    return this.ranges.length ? n.h("span", {}, this.chunks.map((e) => e.highlight ? n.h("strong", {}, e.text) : e.text)) : n.h("span", {}, this.text);
+  }
+};
+exports.FindRanges = l;
+exports._sfc_main = u;

package/dist/chunks/NcHighlight-cBMxLCnf.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcHighlight-cBMxLCnf.cjs","sources":["../../src/utils/FindRanges.js","../../src/components/NcHighlight/NcHighlight.vue"],"sourcesContent":["/**\n * @copyright Copyright (c) 2020 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n *\n * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\n/**\n * Find the ranges of a substr in a given string\n *\n * @param {string} text The text to search in\n * @param {string} search The text to search for\n * @return {Array} The array of ranges to highlight\n */\nconst FindRanges = (text, search) => {\n\tconst ranges = []\n\tlet currentIndex = 0\n\tlet index = text.toLowerCase().indexOf(search.toLowerCase(), currentIndex)\n\t// Variable to track that we don't iterate more often than the length of the text.\n\t// Shouldn't happen anyway, but just to be sure to not hang the browser for some reason.\n\tlet i = 0\n\twhile (index > -1 && i < text.length) {\n\t\tcurrentIndex = index + search.length\n\t\tranges.push({ start: index, end: currentIndex })\n\n\t\tindex = text.toLowerCase().indexOf(search.toLowerCase(), currentIndex)\n\t\ti++\n\t}\n\treturn ranges\n}\n\nexport default FindRanges\n","<!--\n  - @copyright Copyright (c) 2021 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n  -\n  - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n\n### General description\n\nHighlight a string with html &lt;strong&gt;. Accepts a substring to highlight or an array with ranges.\n\n### Usage\n\n```vue\n<template>\n\t<div>\n\t\t<NcHighlight text=\"Highlight me please!\" search=\"me\" />\n\t\t<br />\n\t\t<NcHighlight text=\"Highlight me please!\" :highlight=\"[{ start: 4, end: 12 }]\" />\n\t</div>\n</template>\n```\n</docs>\n\n<script>\nimport FindRanges from '../../utils/FindRanges.js'\n\nimport { h } from 'vue'\n\nexport default {\n\tname: 'NcHighlight',\n\tprops: {\n\t\t/**\n\t\t * The string to display\n\t\t */\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The string to match and highlight\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The ranges to highlight, takes precedence over the search prop.\n\t\t */\n\t\thighlight: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\t},\n\tcomputed: {\n\t\t/**\n\t\t * The indice ranges which should be highlighted.\n\t\t * If an array with ranges is provided, we use it. Otherwise\n\t\t * we calculate it based on the provided substring to highlight.\n\t\t *\n\t\t * @return {Array} The array of ranges to highlight\n\t\t */\n\t\tranges() {\n\t\t\tlet ranges = []\n\t\t\t// If the search term and the highlight array is empty, return early with empty array\n\t\t\tif (!this.search && this.highlight.length === 0) {\n\t\t\t\treturn ranges\n\t\t\t}\n\n\t\t\t// If there are ranges to highlight provided, we use this array.\n\t\t\tif (this.highlight.length > 0) {\n\t\t\t\tranges = this.highlight\n\t\t\t// Otherwise we check the text to highlight for matches of the search term.\n\t\t\t} else {\n\t\t\t\tranges = FindRanges(this.text, this.search)\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * Ensure that the start of each range is equal to or smaller than the end\n\t\t\t */\n\t\t\tranges.forEach((range, i) => {\n\t\t\t\tif (range.end < range.start) {\n\t\t\t\t\tranges[i] = {\n\t\t\t\t\t\tstart: range.end,\n\t\t\t\t\t\tend: range.start,\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\n\t\t\t/**\n\t\t\t * Validate the ranges array to be within the string length\n\t\t\t * and discard ranges which are completely out of bonds.\n\t\t\t */\n\t\t\tranges = ranges.reduce((validRanges, range) => {\n\t\t\t\tif (range.start < this.text.length && range.end > 0) {\n\t\t\t\t\tvalidRanges.push({\n\t\t\t\t\t\tstart: (range.start < 0) ? 0 : range.start,\n\t\t\t\t\t\tend: (range.end > this.text.length) ? this.text.length : range.end,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t\treturn validRanges\n\t\t\t}, [])\n\n\t\t\t/**\n\t\t\t * Sort ranges ascendingly (necessary for next step)\n\t\t\t */\n\t\t\tranges.sort((a, b) => {\n\t\t\t\treturn a.start - b.start\n\t\t\t})\n\n\t\t\t/**\n\t\t\t * Merge overlapping or adjacent ranges\n\t\t\t */\n\t\t\tranges = ranges.reduce((mergedRanges, range) => {\n\t\t\t\t// If there are no ranges, just add the range\n\t\t\t\tif (!mergedRanges.length) {\n\t\t\t\t\tmergedRanges.push(range)\n\t\t\t\t} else {\n\t\t\t\t\t// If the range overlaps the last range, merge them\n\t\t\t\t\tconst idx = mergedRanges.length - 1\n\t\t\t\t\tif (mergedRanges[idx].end >= range.start) {\n\t\t\t\t\t\tmergedRanges[idx] = {\n\t\t\t\t\t\t\tstart: mergedRanges[idx].start,\n\t\t\t\t\t\t\tend: Math.max(mergedRanges[idx].end, range.end),\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tmergedRanges.push(range)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn mergedRanges\n\t\t\t}, [])\n\n\t\t\treturn ranges\n\t\t},\n\t\t/**\n\t\t * Calculate the different chunks to show based on the ranges to highlight.\n\t\t *\n\t\t * @return {Array} The chunks\n\t\t */\n\t\tchunks() {\n\t\t\t// If the ranges array is empty, show only one chunk with all text\n\t\t\tif (this.ranges.length === 0) {\n\t\t\t\treturn [{\n\t\t\t\t\tstart: 0,\n\t\t\t\t\tend: this.text.length,\n\t\t\t\t\thighlight: false,\n\t\t\t\t\ttext: this.text,\n\t\t\t\t}]\n\t\t\t}\n\t\t\t// Calculate the chunks\n\t\t\tconst chunks = []\n\t\t\tlet currentIndex = 0\n\t\t\tlet currentRange = 0\n\t\t\t// Iterate over all characters in the text\n\t\t\twhile (currentIndex < this.text.length) {\n\t\t\t\t// Get the first range to highlight\n\t\t\t\tconst range = this.ranges[currentRange]\n\t\t\t\t// If the range starts at the current index, construct a chunk to highlight,\n\t\t\t\t// set the next range and continue with the next iteration.\n\t\t\t\tif (range.start === currentIndex) {\n\t\t\t\t\tchunks.push({\n\t\t\t\t\t\t...range,\n\t\t\t\t\t\thighlight: true,\n\t\t\t\t\t\ttext: this.text.slice(range.start, range.end),\n\t\t\t\t\t})\n\t\t\t\t\tcurrentRange++\n\t\t\t\t\tcurrentIndex = range.end\n\t\t\t\t\t// If this was the last range to highlight and we haven't reached the end of the text,\n\t\t\t\t\t// add the rest of the text without highlighting.\n\t\t\t\t\tif (currentRange >= this.ranges.length && currentIndex < this.text.length) {\n\t\t\t\t\t\tchunks.push({\n\t\t\t\t\t\t\tstart: currentIndex,\n\t\t\t\t\t\t\tend: this.text.length,\n\t\t\t\t\t\t\thighlight: false,\n\t\t\t\t\t\t\ttext: this.text.slice(currentIndex),\n\t\t\t\t\t\t})\n\t\t\t\t\t\t// Set the current index so the while loop ends.\n\t\t\t\t\t\tcurrentIndex = this.text.length\n\t\t\t\t\t}\n\t\t\t\t\tcontinue\n\t\t\t\t}\n\t\t\t\t// If the current range does start after the current index, construct a chunk without\n\t\t\t\t// highlighting and set the current index to the start of the current range.\n\t\t\t\tchunks.push({\n\t\t\t\t\tstart: currentIndex,\n\t\t\t\t\tend: range.start,\n\t\t\t\t\thighlight: false,\n\t\t\t\t\ttext: this.text.slice(currentIndex, range.start),\n\t\t\t\t})\n\t\t\t\tcurrentIndex = range.start\n\t\t\t}\n\t\t\treturn chunks\n\t\t},\n\t},\n\t/**\n\t * The render function to display the component\n\t *\n\t * @return {object} The created VNode\n\t */\n\trender() {\n\t\tif (!this.ranges.length) {\n\t\t\treturn h('span', {}, this.text)\n\t\t}\n\n\t\treturn h('span', {}, this.chunks.map(chunk => {\n\t\t\treturn chunk.highlight ? h('strong', {}, chunk.text) : chunk.text\n\t\t}))\n\t},\n}\n</script>\n"],"names":["FindRanges","text","search","ranges","currentIndex","index","i","_sfc_main","range","validRanges","a","b","mergedRanges","idx","chunks","currentRange","h","chunk"],"mappings":";;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BK,MAACA,IAAa,CAACC,GAAMC,MAAW;AACpC,QAAMC,IAAS,CAAE;AACjB,MAAIC,IAAe,GACfC,IAAQJ,EAAK,YAAa,EAAC,QAAQC,EAAO,YAAa,GAAEE,CAAY,GAGrEE,IAAI;AACR,SAAOD,IAAQ,MAAMC,IAAIL,EAAK;AAC7B,IAAAG,IAAeC,IAAQH,EAAO,QAC9BC,EAAO,KAAK,EAAE,OAAOE,GAAO,KAAKD,GAAc,GAE/CC,IAAQJ,EAAK,YAAa,EAAC,QAAQC,EAAO,YAAa,GAAEE,CAAY,GACrEE;AAED,SAAOH;AACR,GCEKI,IAAU;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,IACjB;AAAA,EACD;AAAA,EACD,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQT,SAAS;AACR,UAAIJ,IAAS,CAAC;AAEd,aAAI,CAAC,KAAK,UAAU,KAAK,UAAU,WAAW,MAK1C,KAAK,UAAU,SAAS,IAC3BA,IAAS,KAAK,YAGdA,IAASH,EAAW,KAAK,MAAM,KAAK,MAAM,GAM3CG,EAAO,QAAQ,CAACK,GAAOF,MAAM;AAC5B,QAAIE,EAAM,MAAMA,EAAM,UACrBL,EAAOG,CAAC,IAAI;AAAA,UACX,OAAOE,EAAM;AAAA,UACb,KAAKA,EAAM;AAAA,QACZ;AAAA,OAED,GAMDL,IAASA,EAAO,OAAO,CAACM,GAAaD,OAChCA,EAAM,QAAQ,KAAK,KAAK,UAAUA,EAAM,MAAM,KACjDC,EAAY,KAAK;AAAA,QAChB,OAAQD,EAAM,QAAQ,IAAK,IAAIA,EAAM;AAAA,QACrC,KAAMA,EAAM,MAAM,KAAK,KAAK,SAAU,KAAK,KAAK,SAASA,EAAM;AAAA,OAC/D,GAEKC,IACL,EAAE,GAKLN,EAAO,KAAK,CAACO,GAAGC,MACRD,EAAE,QAAQC,EAAE,KACnB,GAKDR,IAASA,EAAO,OAAO,CAACS,GAAcJ,MAAU;AAE/C,YAAI,CAACI,EAAa;AACjB,UAAAA,EAAa,KAAKJ,CAAK;AAAA,aACjB;AAEN,gBAAMK,IAAMD,EAAa,SAAS;AAClC,UAAIA,EAAaC,CAAG,EAAE,OAAOL,EAAM,QAClCI,EAAaC,CAAG,IAAI;AAAA,YACnB,OAAOD,EAAaC,CAAG,EAAE;AAAA,YACzB,KAAK,KAAK,IAAID,EAAaC,CAAG,EAAE,KAAKL,EAAM,GAAG;AAAA,UAC/C,IAEAI,EAAa,KAAKJ,CAAK;AAAA,QAEzB;AACA,eAAOI;AAAA,MACP,GAAE,EAAE,IAEET;AAAA,IACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAER,UAAI,KAAK,OAAO,WAAW;AAC1B,eAAO,CAAC;AAAA,UACP,OAAO;AAAA,UACP,KAAK,KAAK,KAAK;AAAA,UACf,WAAW;AAAA,UACX,MAAM,KAAK;AAAA,SACX;AAGF,YAAMW,IAAS,CAAC;AAChB,UAAIV,IAAe,GACfW,IAAe;AAEnB,aAAOX,IAAe,KAAK,KAAK,UAAQ;AAEvC,cAAMI,IAAQ,KAAK,OAAOO,CAAY;AAGtC,YAAIP,EAAM,UAAUJ,GAAc;AACjC,UAAAU,EAAO,KAAK;AAAA,YACX,GAAGN;AAAA,YACH,WAAW;AAAA,YACX,MAAM,KAAK,KAAK,MAAMA,EAAM,OAAOA,EAAM,GAAG;AAAA,WAC5C,GACDO,KACAX,IAAeI,EAAM,KAGjBO,KAAgB,KAAK,OAAO,UAAUX,IAAe,KAAK,KAAK,WAClEU,EAAO,KAAK;AAAA,YACX,OAAOV;AAAA,YACP,KAAK,KAAK,KAAK;AAAA,YACf,WAAW;AAAA,YACX,MAAM,KAAK,KAAK,MAAMA,CAAY;AAAA,WAClC,GAEDA,IAAe,KAAK,KAAK;AAE1B;AAAA,QACD;AAGA,QAAAU,EAAO,KAAK;AAAA,UACX,OAAOV;AAAA,UACP,KAAKI,EAAM;AAAA,UACX,WAAW;AAAA,UACX,MAAM,KAAK,KAAK,MAAMJ,GAAcI,EAAM,KAAK;AAAA,SAC/C,GACDJ,IAAeI,EAAM;AAAA,MACtB;AACA,aAAOM;AAAA,IACP;AAAA,EACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,SAAS;AACR,WAAK,KAAK,OAAO,SAIVE,EAAAA,EAAE,QAAQ,CAAE,GAAE,KAAK,OAAO,IAAI,CAAAC,MAC7BA,EAAM,YAAYD,EAAAA,EAAE,UAAU,CAAE,GAAEC,EAAM,IAAI,IAAIA,EAAM,IAC7D,CAAC,IALMD,EAAC,EAAC,QAAQ,IAAI,KAAK,IAAI;AAAA,EAM/B;AACF;;;"}