@nextcloud/vue 8.0.0-beta.9 → 8.0.1

package/dist/Components/NcAppNavigationItem.cjs

@@ -1,11 +1,43 @@
-var O = require("../assets/index-a2d55f92.css");
-const c = require("./NcActions.cjs"), p = require("./NcActionButton.cjs"), d = require("./NcLoadingIcon.cjs"), f = require("./NcVNodes.cjs"), _ = require("./NcButton.cjs"), a = require("../chunks/l10n-b1d264c7.cjs"), m = require("vue-material-design-icons/ChevronDown.vue"), h = require("vue-material-design-icons/ChevronUp.vue"), r = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), g = require("../Mixins/isMobile.cjs"), y = require("../chunks/NcInputConfirmCancel-6bea0fdc.cjs"), v = require("../chunks/GenRandomId-c214d235.cjs"), C = require("vue-material-design-icons/Pencil.vue"), b = require("vue-material-design-icons/Undo.vue"), o = (t) => t && t.__esModule ? t : { default: t }, N = /* @__PURE__ */ o(m), k = /* @__PURE__ */ o(h), A = /* @__PURE__ */ o(C), B = /* @__PURE__ */ o(b);
-const I = {
+var T = require("../assets/index-9176105d.css");
+const c = require("./NcActions.cjs"), u = require("./NcActionButton.cjs"), p = require("./NcLoadingIcon.cjs"), d = require("./NcVNodes.cjs"), f = require("./NcButton.cjs"), s = require("../chunks/l10n-f491109d.cjs"), _ = require("../chunks/ChevronDown-dc32e51d.cjs"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), m = require("../Mixins/isMobile.cjs"), h = require("../chunks/NcInputConfirmCancel-262d455f.cjs"), g = require("../chunks/GenRandomId-c214d235.cjs"), v = {
+  name: "ChevronUpIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var y = function() {
+  var e = this, t = e._self._c;
+  return t("span", e._b({ staticClass: "material-design-icon chevron-up-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(a) {
+    return e.$emit("click", a);
+  } } }, "span", e.$attrs, !1), [t("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [t("path", { attrs: { d: "M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" } }, [e.title ? t("title", [e._v(e._s(e.title))]) : e._e()])])]);
+}, C = [], b = /* @__PURE__ */ l.normalizeComponent(
+  v,
+  y,
+  C,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const N = b.exports;
+const k = {
   name: "NcAppNavigationIconCollapsible",
   components: {
-    NcButton: _,
-    ChevronDown: N.default,
-    ChevronUp: k.default
+    NcButton: f,
+    ChevronDown: _.ChevronDown,
+    ChevronUp: N
   },
   props: {
     open: {
@@ -16,45 +48,117 @@ const I = {
   emits: ["click"],
   computed: {
     labelButton() {
-      return this.open ? a.t("Collapse menu") : a.t("Open menu");
+      return this.open ? s.t("Collapse menu") : s.t("Open menu");
     }
   },
   methods: {
-    onClick(t) {
-      this.$emit("click", t);
+    onClick(n) {
+      this.$emit("click", n);
     }
   }
 };
-var x = function() {
-  var e = this, n = e._self._c;
-  return n("NcButton", { staticClass: "icon-collapse", class: { "icon-collapse--open": e.open }, attrs: { type: "tertiary", "aria-label": e.labelButton }, on: { click: e.onClick }, scopedSlots: e._u([{ key: "icon", fn: function() {
-    return [e.open ? n("ChevronUp", { attrs: { size: 20 } }) : n("ChevronDown", { attrs: { size: 20 } })];
+var $ = function() {
+  var e = this, t = e._self._c;
+  return t("NcButton", { staticClass: "icon-collapse", class: { "icon-collapse--open": e.open }, attrs: { type: "tertiary", "aria-label": e.labelButton }, on: { click: e.onClick }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [e.open ? t("ChevronUp", { attrs: { size: 20 } }) : t("ChevronDown", { attrs: { size: 20 } })];
   }, proxy: !0 }]) });
-}, S = [], $ = /* @__PURE__ */ r.normalizeComponent(
+}, B = [], L = /* @__PURE__ */ l.normalizeComponent(
+  k,
+  $,
+  B,
+  !1,
+  null,
+  "07582bf6",
+  null,
+  null
+);
+const A = L.exports, I = {
+  name: "PencilIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var x = function() {
+  var e = this, t = e._self._c;
+  return t("span", e._b({ staticClass: "material-design-icon pencil-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(a) {
+    return e.$emit("click", a);
+  } } }, "span", e.$attrs, !1), [t("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [t("path", { attrs: { d: "M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" } }, [e.title ? t("title", [e._v(e._s(e.title))]) : e._e()])])]);
+}, S = [], z = /* @__PURE__ */ l.normalizeComponent(
   I,
   x,
   S,
   !1,
   null,
-  "07582bf6",
+  null,
   null,
   null
 );
-const L = $.exports;
-const q = {
+const w = z.exports, V = {
+  name: "UndoIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var q = function() {
+  var e = this, t = e._self._c;
+  return t("span", e._b({ staticClass: "material-design-icon undo-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(a) {
+    return e.$emit("click", a);
+  } } }, "span", e.$attrs, !1), [t("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [t("path", { attrs: { d: "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z" } }, [e.title ? t("title", [e._v(e._s(e.title))]) : e._e()])])]);
+}, D = [], U = /* @__PURE__ */ l.normalizeComponent(
+  V,
+  q,
+  D,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const E = U.exports;
+const M = {
   name: "NcAppNavigationItem",
   components: {
     NcActions: c,
-    NcActionButton: p,
-    NcAppNavigationIconCollapsible: L,
-    NcInputConfirmCancel: y.NcInputConfirmCancel,
-    NcLoadingIcon: d,
-    NcVNodes: f,
-    Pencil: A.default,
-    Undo: B.default
+    NcActionButton: u,
+    NcAppNavigationIconCollapsible: A,
+    NcInputConfirmCancel: h.NcInputConfirmCancel,
+    NcLoadingIcon: p,
+    NcVNodes: d,
+    Pencil: w,
+    Undo: E
   },
-  mixins: [g],
+  mixins: [m],
   props: {
+    /**
+     * If you are not using vue-router you can use the property to set this item as the active navigation entry.
+     * When using vue-router and the `to` property this is set automatically.
+     */
+    active: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * The main text content of the entry.
      */
@@ -74,8 +178,8 @@ const q = {
      */
     id: {
       type: String,
-      default: () => "app-navigation-item-" + v.GenRandomId(),
-      validator: (t) => t.trim() !== ""
+      default: () => "app-navigation-item-" + g.GenRandomId(),
+      validator: (n) => n.trim() !== ""
     },
     /**
      * Refers to the icon on the left, this prop accepts a class
@@ -258,18 +362,18 @@ const q = {
       return !!(this.$slots.actions || this.$slots.counter || this.editable || this.undo);
     },
     editButtonAriaLabel() {
-      return this.editLabel ? this.editLabel : a.t("Edit item");
+      return this.editLabel ? this.editLabel : s.t("Edit item");
     },
     undoButtonAriaLabel() {
-      return a.t("Undo changes");
+      return s.t("Undo changes");
     },
     actionsBoundariesElement() {
       return document.querySelector("#content-vue") || void 0;
     }
   },
   watch: {
-    open(t) {
-      this.opened = t;
+    open(n) {
+      this.opened = n;
     }
   },
   created() {
@@ -280,8 +384,8 @@ const q = {
   },
   methods: {
     // sync opened menu state with prop
-    onMenuToggle(t) {
-      this.$emit("update:menuOpen", t), this.menuOpenLocalValue = t;
+    onMenuToggle(n) {
+      this.$emit("update:menuOpen", n), this.menuOpenLocalValue = n;
     },
     // toggle the collapsible state
     toggleCollapse() {
@@ -294,8 +398,8 @@ const q = {
      * @param {Function} [navigate] - VueRouter link's navigate if any
      * @param {string} [routerLinkHref] - VueRouter link's href
      */
-    onClick(t, e, n) {
-      this.$emit("click", t), !(t.metaKey || t.altKey || t.ctrlKey || t.shiftKey) && n && (e == null || e(t), t.preventDefault());
+    onClick(n, e, t) {
+      this.$emit("click", n), !(n.metaKey || n.altKey || n.ctrlKey || n.shiftKey) && t && (e == null || e(n), n.preventDefault());
     },
     // Edition methods
     handleEdit() {
@@ -331,8 +435,8 @@ const q = {
      *
      * @param {Event} e the keydown event
      */
-    handleTab(t) {
-      this.$refs.actions && (this.focused ? (t.preventDefault(), this.$refs.actions.$refs.menuButton.$el.focus(), this.focused = !1) : this.$refs.actions.$refs.menuButton.$el.blur());
+    handleTab(n) {
+      this.$refs.actions && (this.focused ? (n.preventDefault(), this.$refs.actions.$refs.menuButton.$el.focus(), this.focused = !1) : this.$refs.actions.$refs.menuButton.$el.blur());
     },
     /**
      * Is this an external link
@@ -340,47 +444,47 @@ const q = {
      * @param {string} href The link to check
      * @return {boolean} Whether it is external or not
      */
-    isExternal(t) {
-      return t && t.match(/[a-z]+:\/\//i);
+    isExternal(n) {
+      return n && n.match(/[a-z]+:\/\//i);
     }
   }
 };
-var D = function() {
-  var e = this, n = e._self._c;
-  return n("li", { staticClass: "app-navigation-entry-wrapper", class: {
+var O = function() {
+  var e = this, t = e._self._c;
+  return t("li", { staticClass: "app-navigation-entry-wrapper", class: {
     "app-navigation-entry--opened": e.opened,
     "app-navigation-entry--pinned": e.pinned,
     "app-navigation-entry--collapsible": e.collapsible
-  }, attrs: { id: e.id } }, [n(e.isRouterLink ? "router-link" : "NcVNodes", { tag: "component", attrs: { custom: !!e.isRouterLink, to: e.to, exact: e.isRouterLink ? e.exact : null }, scopedSlots: e._u([{ key: "default", fn: function({ href: s, navigate: u, isActive: l }) {
-    return [n("div", { staticClass: "app-navigation-entry", class: {
+  }, attrs: { id: e.id } }, [t(e.isRouterLink ? "router-link" : "NcVNodes", { tag: "component", attrs: { custom: !!e.isRouterLink, to: e.to, exact: e.isRouterLink ? e.exact : null }, scopedSlots: e._u([{ key: "default", fn: function({ href: a, navigate: r, isActive: o }) {
+    return [t("div", { staticClass: "app-navigation-entry", class: {
       "app-navigation-entry--editing": e.editingActive,
       "app-navigation-entry--deleted": e.undo,
-      active: l && e.to
-    } }, [e.undo ? e._e() : n("a", { staticClass: "app-navigation-entry-link", attrs: { "aria-description": e.ariaDescription, "aria-expanded": e.opened.toString(), href: e.href || s || "#", target: e.isExternal(e.href) ? "_blank" : void 0, title: e.title || e.name }, on: { blur: e.handleBlur, click: function(i) {
-      return e.onClick(i, u, s);
+      active: o && e.to || e.active
+    } }, [e.undo ? e._e() : t("a", { staticClass: "app-navigation-entry-link", attrs: { "aria-current": e.active || o && e.to ? "page" : void 0, "aria-description": e.ariaDescription, "aria-expanded": e.hasChildren ? e.opened.toString() : void 0, href: e.href || a || "#", target: e.isExternal(e.href) ? "_blank" : void 0, title: e.title || e.name }, on: { blur: e.handleBlur, click: function(i) {
+      return e.onClick(i, r, a);
     }, focus: e.handleFocus, keydown: function(i) {
       return !i.type.indexOf("key") && e._k(i.keyCode, "tab", 9, i.key, "Tab") || i.ctrlKey || i.shiftKey || i.altKey || i.metaKey ? null : e.handleTab.apply(null, arguments);
-    } } }, [n("div", { staticClass: "app-navigation-entry-icon", class: { [e.icon]: e.icon } }, [e.loading ? n("NcLoadingIcon") : e._t("icon")], 2), e.editingActive ? e._e() : n("span", { staticClass: "app-navigation-entry__name" }, [e._v(" " + e._s(e.name) + " ")]), e.editingActive ? n("div", { staticClass: "editingContainer" }, [n("NcInputConfirmCancel", { ref: "editingInput", attrs: { placeholder: e.editPlaceholder !== "" ? e.editPlaceholder : e.name, primary: l && e.to }, on: { cancel: e.cancelEditing, confirm: e.handleEditingDone }, model: { value: e.editingValue, callback: function(i) {
+    } } }, [t("div", { staticClass: "app-navigation-entry-icon", class: { [e.icon]: e.icon } }, [e.loading ? t("NcLoadingIcon") : e._t("icon")], 2), e.editingActive ? e._e() : t("span", { staticClass: "app-navigation-entry__name" }, [e._v(" " + e._s(e.name) + " ")]), e.editingActive ? t("div", { staticClass: "editingContainer" }, [t("NcInputConfirmCancel", { ref: "editingInput", attrs: { placeholder: e.editPlaceholder !== "" ? e.editPlaceholder : e.name, primary: o && e.to }, on: { cancel: e.cancelEditing, confirm: e.handleEditingDone }, model: { value: e.editingValue, callback: function(i) {
       e.editingValue = i;
-    }, expression: "editingValue" } })], 1) : e._e()]), e.undo ? n("div", { staticClass: "app-navigation-entry__deleted" }, [n("div", { staticClass: "app-navigation-entry__deleted-description" }, [e._v(" " + e._s(e.name) + " ")])]) : e._e(), e.hasUtils && !e.editingActive ? n("div", { staticClass: "app-navigation-entry__utils", class: { "app-navigation-entry__utils--display-actions": e.forceDisplayActions || e.menuOpenLocalValue || e.menuOpen } }, [e.$slots.counter ? n("div", { staticClass: "app-navigation-entry__counter-wrapper" }, [e._t("counter")], 2) : e._e(), e.$slots.actions || e.editable && !e.editingActive || e.undo ? n("NcActions", { ref: "actions", staticClass: "app-navigation-entry__actions", attrs: { inline: e.inlineActions, container: "#app-navigation-vue", "boundaries-element": e.actionsBoundariesElement, placement: e.menuPlacement, open: e.menuOpen, type: l && e.to ? "primary" : null, "force-menu": e.forceMenu, "default-icon": e.menuIcon }, on: { "update:open": e.onMenuToggle }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    }, expression: "editingValue" } })], 1) : e._e()]), e.undo ? t("div", { staticClass: "app-navigation-entry__deleted" }, [t("div", { staticClass: "app-navigation-entry__deleted-description" }, [e._v(" " + e._s(e.name) + " ")])]) : e._e(), e.hasUtils && !e.editingActive ? t("div", { staticClass: "app-navigation-entry__utils", class: { "app-navigation-entry__utils--display-actions": e.forceDisplayActions || e.menuOpenLocalValue || e.menuOpen } }, [e.$slots.counter ? t("div", { staticClass: "app-navigation-entry__counter-wrapper" }, [e._t("counter")], 2) : e._e(), e.$slots.actions || e.editable && !e.editingActive || e.undo ? t("NcActions", { ref: "actions", staticClass: "app-navigation-entry__actions", attrs: { inline: e.inlineActions, container: "#app-navigation-vue", "boundaries-element": e.actionsBoundariesElement, placement: e.menuPlacement, open: e.menuOpen, type: o && e.to ? "primary" : null, "force-menu": e.forceMenu, "default-icon": e.menuIcon }, on: { "update:open": e.onMenuToggle }, scopedSlots: e._u([{ key: "icon", fn: function() {
       return [e._t("menu-icon")];
-    }, proxy: !0 }], null, !0) }, [e.editable && !e.editingActive ? n("NcActionButton", { attrs: { "aria-label": e.editButtonAriaLabel }, on: { click: e.handleEdit }, scopedSlots: e._u([{ key: "icon", fn: function() {
-      return [n("Pencil", { attrs: { size: 20 } })];
-    }, proxy: !0 }], null, !0) }, [e._v(" " + e._s(e.editLabel) + " ")]) : e._e(), e.undo ? n("NcActionButton", { attrs: { "aria-label": e.undoButtonAriaLabel }, on: { click: e.handleUndo }, scopedSlots: e._u([{ key: "icon", fn: function() {
-      return [n("Undo", { attrs: { size: 20 } })];
-    }, proxy: !0 }], null, !0) }) : e._e(), e._t("actions")], 2) : e._e()], 1) : e._e(), e.collapsible ? n("NcAppNavigationIconCollapsible", { attrs: { open: e.opened }, on: { click: function(i) {
+    }, proxy: !0 }], null, !0) }, [e.editable && !e.editingActive ? t("NcActionButton", { attrs: { "aria-label": e.editButtonAriaLabel }, on: { click: e.handleEdit }, scopedSlots: e._u([{ key: "icon", fn: function() {
+      return [t("Pencil", { attrs: { size: 20 } })];
+    }, proxy: !0 }], null, !0) }, [e._v(" " + e._s(e.editLabel) + " ")]) : e._e(), e.undo ? t("NcActionButton", { attrs: { "aria-label": e.undoButtonAriaLabel }, on: { click: e.handleUndo }, scopedSlots: e._u([{ key: "icon", fn: function() {
+      return [t("Undo", { attrs: { size: 20 } })];
+    }, proxy: !0 }], null, !0) }) : e._e(), e._t("actions")], 2) : e._e()], 1) : e._e(), e.collapsible ? t("NcAppNavigationIconCollapsible", { attrs: { open: e.opened }, on: { click: function(i) {
       return i.preventDefault(), i.stopPropagation(), e.toggleCollapse.apply(null, arguments);
     } } }) : e._e(), e._t("extra")], 2)];
-  } }], null, !0) }), e.canHaveChildren && e.hasChildren ? n("ul", { staticClass: "app-navigation-entry__children" }, [e._t("default")], 2) : e._e()], 1);
-}, U = [], V = /* @__PURE__ */ r.normalizeComponent(
-  q,
-  D,
-  U,
+  } }], null, !0) }), e.canHaveChildren && e.hasChildren ? t("ul", { staticClass: "app-navigation-entry__children" }, [e._t("default")], 2) : e._e()], 1);
+}, R = [], P = /* @__PURE__ */ l.normalizeComponent(
+  M,
+  O,
+  R,
   !1,
   null,
-  null,
+  "d7365865",
   null,
   null
 );
-const E = V.exports;
-module.exports = E;
+const K = P.exports;
+module.exports = K;

package/dist/Components/NcAppNavigationItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationItem.cjs","sources":["../../src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue","../../src/components/NcAppNavigationItem/NcAppNavigationItem.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\n<template>\n\t<!-- Button to expand or collapse children -->\n\t<NcButton class=\"icon-collapse\"\n\t\t:class=\"{'icon-collapse--open':open}\"\n\t\ttype=\"tertiary\"\n\t\t:aria-label=\"labelButton\"\n\t\t@click=\"onClick\">\n\t\t<template #icon>\n\t\t\t<ChevronUp v-if=\"open\"\n\t\t\t\t:size=\"20\" />\n\t\t\t<ChevronDown v-else\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport ChevronUp from 'vue-material-design-icons/ChevronUp.vue'\n\nexport default {\n\tname: 'NcAppNavigationIconCollapsible',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tChevronDown,\n\t\tChevronUp,\n\t},\n\n\tprops: {\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tlabelButton() {\n\t\t\treturn this.open ? t('Collapse menu') : t('Open menu')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.button-vue.icon-collapse {\n\tposition: relative;\n\tz-index: 105; // above a, under button\n\tcolor: var(--color-main-text);\n\tright: 0;\n\t&--open {\n\t\tcolor: var(--color-main-text);\n\t\t&:hover{\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\t}\n}\n\n</style>\n","<!--\n - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author Jonas Sulzer <jonas@violoncello.ch>\n - @author Jonathan Treffler <mail@jonathan-treffler.de>\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# Usage\n\n### Simple element\n\n* With an icon:\n\n```vue\n\t<template>\n\t\t<NcAppNavigationItem name=\"My name\">\n\t\t\t<template #icon>\n\t\t\t\t<Check :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t}\n\t</script>\n```\n* With a spinning loader instead of the icon:\n\n```\n<NcAppNavigationItem name=\"Loading Item\" :loading=\"true\" />\n```\n\n### Element with actions\nWrap the children in a template. If you have more than 2 actions, a popover menu and a menu\nbutton will be automatically created.\n\n```vue\n\t<template>\n\t\t<div id=\"app-navigation-vue\"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->\n\t\t\t<NcAppNavigationItem name=\"Item with actions\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tEdit\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionLink>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</div>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check'\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n\n### Element with counter\nJust nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.\n\n```vue\n\t<template>\n\t\t<NcAppNavigationItem name=\"Item with counter\">\n\t\t\t<template #icon>\n\t\t\t\t<Folder :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #counter>\n\t\t\t\t<NcCounterBubble>\n\t\t\t\t\t99+\n\t\t\t\t</NcCounterBubble>\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t},\n\t}\n\t</script>\n```\n\n### Element with children\n\nWrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose wether to allow or\nprevent the user from collapsing the items.\n\n```vue\n\t<template>\n\t\t<NcAppNavigationItem name=\"Item with children\" :allowCollapse=\"true\" :open=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<Folder :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #counter>\n\t\t\t\t<NcCounterBubble>\n\t\t\t\t\t99+\n\t\t\t\t</NcCounterBubble>\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tEdit\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionLink>\n\t\t\t</template>\n\t\t\t<template>\n\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild1\" />\n\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild2\" />\n\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild3\" />\n\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild4\" />\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder'\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n\n### Editable element\nAdd the prop `:editable=true` and an edit placeholder if you need it. By default\nthe placeholder is the previous name of the element.\n\n```vue\n\t<template>\n\t\t<NcAppNavigationItem name=\"Editable Item\" :editable=\"true\"\n\t\t\teditPlaceholder=\"your_placeholder_here\" @update:name=\"function(value){alert(value)}\">\n\t\t\t<template #icon>\n\t\t\t\t<Folder :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t},\n\t}\n\t</script>\n```\n\n### Undo element\nJust set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.\n\n```\n<NcAppNavigationItem :undo=\"true\" name=\"Deleted important entry\" @undo=\"alert('undo delete')\"  />\n\n```\n\n### Link element\nHref that start by http will be treated as external and opened in a new tab\n```\n<div>\n\t<NcAppNavigationItem name=\"Files\" href=\"/index.php/apps/files\" />\n\t<NcAppNavigationItem name=\"Nextcloud\" href=\"https://nextcloud.com\" />\n</div>\n```\n\n### Custom title\n```\n<NcAppNavigationItem name=\"Nextcloud\" title=\"Open the Nextcloud website\" href=\"https://nextcloud.com\" />\n```\n\n### Pinned element\nJust set the `pinned` prop.\n```\n<NcAppNavigationItem name=\"Pinned item\" :pinned=\"true\" />\n```\n</docs>\n\n<template>\n\t<li :id=\"id\"\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--opened': opened,\n\t\t\t'app-navigation-entry--pinned': pinned,\n\t\t\t'app-navigation-entry--collapsible': collapsible,\n\t\t}\"\n\t\tclass=\"app-navigation-entry-wrapper\">\n\t\t<component :is=\"isRouterLink ? 'router-link' : 'NcVNodes'\"\n\t\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t\t:custom=\"isRouterLink ? true : false\"\n\t\t\t:to=\"to\"\n\t\t\t:exact=\"isRouterLink ? exact : null\">\n\t\t\t<div :class=\"{\n\t\t\t\t\t'app-navigation-entry--editing': editingActive,\n\t\t\t\t\t'app-navigation-entry--deleted': undo,\n\t\t\t\t\t'active': isActive && to,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-navigation-entry\">\n\t\t\t\t<!-- Icon and name -->\n\t\t\t\t<a v-if=\"!undo\"\n\t\t\t\t\tclass=\"app-navigation-entry-link\"\n\t\t\t\t\t:aria-description=\"ariaDescription\"\n\t\t\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t\t\t:href=\"href || routerLinkHref || '#'\"\n\t\t\t\t\t:target=\"isExternal(href) ? '_blank' : undefined\"\n\t\t\t\t\t:title=\"title || name\"\n\t\t\t\t\t@blur=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@focus=\"handleFocus\"\n\t\t\t\t\t@keydown.tab.exact=\"handleTab\">\n\n\t\t\t\t\t<!-- icon if not collapsible -->\n\t\t\t\t\t<!-- never show the icon over the collapsible if mobile -->\n\t\t\t\t\t<div :class=\"{ [icon]: icon }\"\n\t\t\t\t\t\tclass=\"app-navigation-entry-icon\">\n\t\t\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<span v-if=\"!editingActive\" class=\"app-navigation-entry__name\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div v-if=\"editingActive\" class=\"editingContainer\">\n\t\t\t\t\t\t<NcInputConfirmCancel ref=\"editingInput\"\n\t\t\t\t\t\t\tv-model=\"editingValue\"\n\t\t\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t\t\t:primary=\"isActive && to\"\n\t\t\t\t\t\t\t@cancel=\"cancelEditing\"\n\t\t\t\t\t\t\t@confirm=\"handleEditingDone\" />\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<!-- undo entry -->\n\t\t\t\t<div v-if=\"undo\" class=\"app-navigation-entry__deleted\">\n\t\t\t\t\t<div class=\"app-navigation-entry__deleted-description\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Counter and Actions -->\n\t\t\t\t<div v-if=\"hasUtils && !editingActive\"\n\t\t\t\t\tclass=\"app-navigation-entry__utils\"\n\t\t\t\t\t:class=\"{'app-navigation-entry__utils--display-actions': forceDisplayActions || menuOpenLocalValue || menuOpen }\">\n\t\t\t\t\t<div v-if=\"$slots.counter\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__counter-wrapper\">\n\t\t\t\t\t\t<slot name=\"counter\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<NcActions v-if=\"$slots.actions || (editable && !editingActive) || undo\"\n\t\t\t\t\t\tref=\"actions\"\n\t\t\t\t\t\t:inline=\"inlineActions\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__actions\"\n\t\t\t\t\t\tcontainer=\"#app-navigation-vue\"\n\t\t\t\t\t\t:boundaries-element=\"actionsBoundariesElement\"\n\t\t\t\t\t\t:placement=\"menuPlacement\"\n\t\t\t\t\t\t:open=\"menuOpen\"\n\t\t\t\t\t\t:type=\"isActive && to ? 'primary' : null\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:default-icon=\"menuIcon\"\n\t\t\t\t\t\t@update:open=\"onMenuToggle\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<!-- @slot Slot for the custom menu icon -->\n\t\t\t\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<NcActionButton v-if=\"editable && !editingActive\"\n\t\t\t\t\t\t\t:aria-label=\"editButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleEdit\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ editLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton v-if=\"undo\"\n\t\t\t\t\t\t\t:aria-label=\"undoButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleUndo\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Undo :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\t\t\t\t<NcAppNavigationIconCollapsible v-if=\"collapsible\" :open=\"opened\" @click.prevent.stop=\"toggleCollapse\" />\n\n\t\t\t\t<!-- Anything (virtual) that should be mounted in the component, like a related modal -->\n\t\t\t\t<slot name=\"extra\" />\n\t\t\t</div>\n\t\t</component>\n\t\t<!-- Children elements -->\n\t\t<ul v-if=\"canHaveChildren && hasChildren\" class=\"app-navigation-entry__children\">\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'\nimport isMobile from '../../mixins/isMobile/index.js'\nimport NcInputConfirmCancel from './NcInputConfirmCancel.vue'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Undo from 'vue-material-design-icons/Undo.vue'\n\nexport default {\n\tname: 'NcAppNavigationItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcActionButton,\n\t\tNcAppNavigationIconCollapsible,\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t\tNcVNodes,\n\t\tPencil,\n\t\tUndo,\n\t},\n\n\tmixins: [isMobile],\n\n\tprops: {\n\t\t/**\n\t\t * The main text content of the entry.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The title attribute of the element.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the list item element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'app-navigation-item-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Passing in a route will make the root element of this\n\t\t * component a `<router-link />` that points to that route.\n\t\t * By leaving this blank, the root element will be a `<li>`.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * A direct link. This will be used as the `href` attribute.\n\t\t * This will ignore any `to` prop being defined.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Pass in `true` if you want the matching behaviour to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t */\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Gives the possibility to collapse the children elements into the\n\t\t * parent element (true) or expands the children elements (false).\n\t\t */\n\t\tallowCollapse: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Makes the name of the item editable by providing an `ActionButton`\n\t\t * component that toggles a form\n\t\t */\n\t\teditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Only for 'editable' items, sets label for the edit action button.\n\t\t */\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Only for items in 'editable' mode, sets the placeholder text for the editing form.\n\t\t */\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Pins the item to the bottom left area, above the settings. Do not\n\t\t * place 'non-pinned' `AppnavigationItem` components below `pinned`\n\t\t * ones.\n\t\t */\n\t\tpinned: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Puts the item in the 'undo' state.\n\t\t */\n\t\tundo: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The navigation collapsible state (synced)\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 * The actions menu open state (synced)\n\t\t */\n\t\tmenuOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The action's menu default icon\n\t\t */\n\t\tmenuIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The action's menu direction\n\t\t */\n\t\tmenuPlacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * Entry aria details\n\t\t */\n\t\tariaDescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Number of action items outside the menu\n\t\t */\n\t\tinlineActions: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:menuOpen',\n\t\t'update:open',\n\t\t'update:name',\n\t\t'click',\n\t\t'undo',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\teditingValue: '',\n\t\t\topened: this.open, // Collapsible state\n\t\t\teditingActive: false,\n\t\t\thasChildren: false,\n\t\t\t/**\n\t\t\t * Tracks the open state of the actions menu\n\t\t\t */\n\t\t\tmenuOpenLocalValue: false,\n\t\t\tfocused: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisRouterLink() {\n\t\t\treturn this.to && !this.href\n\t\t},\n\n\t\tcollapsible() {\n\t\t\treturn this.allowCollapse && !!this.$slots.default\n\t\t},\n\n\t\t// Checks if the component is already a children of another\n\t\t// instance of AppNavigationItem\n\t\tcanHaveChildren() {\n\t\t\tif (this.$parent.$options._componentTag === 'AppNavigationItem') {\n\t\t\t\treturn false\n\t\t\t} else {\n\t\t\t\treturn true\n\t\t\t}\n\t\t},\n\n\t\thasUtils() {\n\t\t\tif (this.$slots.actions || this.$slots.counter || this.editable || this.undo) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\teditButtonAriaLabel() {\n\t\t\treturn this.editLabel ? this.editLabel : t('Edit item')\n\t\t},\n\n\t\tundoButtonAriaLabel() {\n\t\t\treturn t('Undo changes')\n\t\t},\n\t\tactionsBoundariesElement() {\n\t\t\treturn document.querySelector('#content-vue') || undefined\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(newVal) {\n\t\t\tthis.opened = newVal\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.updateSlotInfo()\n\t},\n\n\tbeforeUpdate() {\n\t\tthis.updateSlotInfo()\n\t},\n\n\tmethods: {\n\t\t// sync opened menu state with prop\n\t\tonMenuToggle(state) {\n\t\t\tthis.$emit('update:menuOpen', state)\n\t\t\tthis.menuOpenLocalValue = state\n\t\t},\n\t\t// toggle the collapsible state\n\t\ttoggleCollapse() {\n\t\t\tthis.opened = !this.opened\n\t\t\tthis.$emit('update:open', this.opened)\n\t\t},\n\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {PointerEvent} event - Native click event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\t// Edition methods\n\t\thandleEdit() {\n\t\t\tthis.editingValue = this.name\n\t\t\tthis.editingActive = true\n\t\t\tthis.onMenuToggle(false)\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$refs.editingInput.focusInput()\n\t\t\t})\n\t\t},\n\t\tcancelEditing() {\n\t\t\tthis.editingActive = false\n\t\t},\n\t\thandleEditingDone() {\n\t\t\tthis.$emit('update:name', this.editingValue)\n\t\t\tthis.editingValue = ''\n\t\t\tthis.editingActive = false\n\t\t},\n\n\t\t// Undo methods\n\t\thandleUndo() {\n\t\t\tthis.$emit('undo')\n\t\t},\n\n\t\tupdateSlotInfo() {\n\t\t\tthis.hasChildren = !!this.$slots.default\n\t\t},\n\n\t\t/**\n\t\t * Show actions upon focus\n\t\t */\n\t\thandleFocus() {\n\t\t\tthis.focused = true\n\t\t},\n\n\t\thandleBlur() {\n\t\t\tthis.focused = false\n\t\t},\n\n\t\t/**\n\t\t * This method checks if the root element of the component is focused and\n\t\t * if that's the case it focuses the actions button if available\n\t\t *\n\t\t * @param {Event} e the keydown event\n\t\t */\n\t\thandleTab(e) {\n\t\t\t// If there is no actions menu, do nothing.\n\t\t\tif (!this.$refs.actions) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.focused) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.$refs.actions.$refs.menuButton.$el.focus()\n\t\t\t\tthis.focused = false\n\t\t\t} else {\n\t\t\t\tthis.$refs.actions.$refs.menuButton.$el.blur()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Is this an external link\n\t\t *\n\t\t * @param {string} href The link to check\n\t\t * @return {boolean} Whether it is external or not\n\t\t */\n\t\tisExternal(href) {\n\t\t\t// Match any protocol\n\t\t\treturn href && href.match(/[a-z]+:\\/\\//i)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation-entry {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-shrink: 0;\n\tflex-wrap: wrap;\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tmin-height: $clickable-area;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\ttransition: background-color 200ms ease-in-out;\n\tborder-radius: var(--border-radius-pill);\n\n\t&-wrapper {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t\tflex-wrap: wrap;\n\t\tbox-sizing: border-box;\n\t\twidth: 100%;\n\n\t\t&.app-navigation-entry--collapsible:not(.app-navigation-entry--opened) > ul {\n\t\t\t// NO ANIMATE because if not really hidden, we can still tab through it\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// When .active class is applied, change color background of link and utils. The\n\t// !important prevents the focus state to override the active state.\n\t&.active {\n\t\tbackground-color: var(--color-primary-element) !important;\n\n\t\t// overwrite active text color\n\t\t.app-navigation-entry-link, .app-navigation-entry-button {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n\t&:focus-within,\n\t&:hover {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\t&.active,\n\t&:focus-within,\n\t&:hover {\n\t\t.app-navigation-entry__children {\n\t\t\tbackground-color: var(--color-main-background);\n\t\t}\n\t}\n\n\t// Show the actions on active\n\t&.active,\n\t// Always show the undo button\n\t&.app-navigation-entry--deleted,\n\t&:focus,\n\t&:focus-within,\n\t&:hover {\n\t\t.app-navigation-entry__utils .app-navigation-entry__actions {\n\t\t\tdisplay: inline-block;\n\t\t}\n\t}\n\n\t/* hide deletion/collapse of subitems */\n\t&.app-navigation-entry--deleted > ul {\n\t\t// NO ANIMATE because if not really hidden, we can still tab through it\n\t\tdisplay: none;\n\t}\n\n\t&:not(.app-navigation-entry--editing) {\n\t\t.app-navigation-entry-link, .app-navigation-entry-button {\n\t\t\tpadding-right: $icon-margin;\n\t\t}\n\t}\n\n\t// Main entry link\n\t.app-navigation-entry-link, .app-navigation-entry-button {\n\t\tz-index: 100; /* above the bullet to allow click*/\n\t\tdisplay: flex;\n\t\toverflow: hidden;\n\t\tflex: 1 1 0;\n\t\tbox-sizing: border-box;\n\t\tmin-height: $clickable-area;\n\t\tpadding: 0;\n\t\twhite-space: nowrap;\n\t\tcolor: var(--color-main-text);\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-position: $icon-margin center;\n\t\tbackground-size: $icon-size $icon-size;\n\t\tline-height: $clickable-area;\n\n\t\t.app-navigation-entry-icon {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tflex: 0 0 $clickable-area;\n\t\t\tjustify-content: center;\n\t\t\twidth: $clickable-area;\n\t\t\theight: $clickable-area;\n\t\t\tbackground-size: $icon-size $icon-size;\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-position: $icon-margin center;\n\t\t}\n\n\t\t.app-navigation-entry__name {\n\t\t\toverflow: hidden;\n\t\t\tmax-width: 100%;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\n\t\t.editingContainer {\n\t\t\twidth: calc(100% - #{$clickable-area});\n\t\t\tmargin: auto;\n\t\t}\n\t}\n}\n/* Second level nesting for lists */\n.app-navigation-entry__children {\n\tposition: relative;\n\tdisplay: flex;\n\tflex: 0 1 auto;\n\tflex-direction: column;\n\twidth: 100%;\n\tgap: var(--default-grid-baseline, 4px);\n\n\t.app-navigation-entry {\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t\tpadding-left: $icon-size;\n\t}\n}\n\n/* Deleted entries */\n.app-navigation-entry__deleted {\n\tdisplay: inline-flex;\n\tflex: 1 1 0;\n\tpadding-left: $clickable-area - $icon-margin !important;\n\t.app-navigation-entry__deleted-description {\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tflex: 1 1 0;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tline-height: $clickable-area;\n\t}\n}\n\n/* counter and actions */\n.app-navigation-entry__utils {\n\tdisplay: flex;\n\tmin-width: $clickable-area;\n\talign-items: center;\n\tflex: 0 1 auto;\n\tjustify-content: flex-end;\n\t&#{&}--display-actions .action-item.app-navigation-entry__actions {\n\t\tdisplay: inline-block;\n\t}\n\t/* counter */\n\t.app-navigation-entry__counter-wrapper {\n\t\t// Add slightly more space to the right of the counter\n\t\tmargin-right: calc(var(--default-grid-baseline) * 3);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 0 1 auto;\n\t}\n\t/* actions */\n\t.action-item.app-navigation-entry__actions {\n\t\tdisplay: none;\n\t}\n}\n\n// STATES\n/* editing state */\n.app-navigation-entry--editing {\n\t.app-navigation-entry-edit {\n\t\tz-index: 250;\n\t\topacity: 1;\n\t}\n}\n\n/* deleted state */\n.app-navigation-entry--deleted {\n\t.app-navigation-entry-deleted {\n\t\tz-index: 250;\n\t\ttransform: translateX(0);\n\t}\n}\n\n/* pinned state */\n.app-navigation-entry--pinned {\n\torder: 2;\n\tmargin-top: auto;\n\t// only put a marginTop auto to the first one!\n\t~ .app-navigation-entry--pinned {\n\t\tmargin-top: 0;\n\t}\n}\n\n// Add more contrast for active entry\n[data-themes*='highcontrast'] {\n\t.app-navigation-entry {\n\t\t&:active {\n\t\t\tbackground-color: var(--color-primary-element-light-hover) !important;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main$1","Components_NcButton","ChevronDown__default","ChevronUp__default","l10n","e","_sfc_main","Components_NcActions","Components_NcActionButton","NcAppNavigationIconCollapsible","NcInputConfirmCancel","Components_NcLoadingIcon","Components_NcVNodes","Pencil__default","Undo__default","Mixins_isMobile","GenRandomId","id","newVal","state","event","navigate","routerLinkHref","href"],"mappings":"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"}
+{"version":3,"file":"NcAppNavigationItem.cjs","sources":["../../node_modules/vue-material-design-icons/ChevronUp.vue","../../src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue","../../node_modules/vue-material-design-icons/Pencil.vue","../../node_modules/vue-material-design-icons/Undo.vue","../../src/components/NcAppNavigationItem/NcAppNavigationItem.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"!title\"\n        :aria-label=\"title\"\n        class=\"material-design-icon chevron-up-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"ChevronUpIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\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\n<template>\n\t<!-- Button to expand or collapse children -->\n\t<NcButton class=\"icon-collapse\"\n\t\t:class=\"{'icon-collapse--open':open}\"\n\t\ttype=\"tertiary\"\n\t\t:aria-label=\"labelButton\"\n\t\t@click=\"onClick\">\n\t\t<template #icon>\n\t\t\t<ChevronUp v-if=\"open\"\n\t\t\t\t:size=\"20\" />\n\t\t\t<ChevronDown v-else\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport ChevronUp from 'vue-material-design-icons/ChevronUp.vue'\n\nexport default {\n\tname: 'NcAppNavigationIconCollapsible',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tChevronDown,\n\t\tChevronUp,\n\t},\n\n\tprops: {\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tlabelButton() {\n\t\t\treturn this.open ? t('Collapse menu') : t('Open menu')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.button-vue.icon-collapse {\n\tposition: relative;\n\tz-index: 105; // above a, under button\n\tcolor: var(--color-main-text);\n\tright: 0;\n\t&--open {\n\t\tcolor: var(--color-main-text);\n\t\t&:hover{\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\t}\n}\n\n</style>\n","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"!title\"\n        :aria-label=\"title\"\n        class=\"material-design-icon pencil-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PencilIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"!title\"\n        :aria-label=\"title\"\n        class=\"material-design-icon undo-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UndoIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author Jonas Sulzer <jonas@violoncello.ch>\n - @author Jonathan Treffler <mail@jonathan-treffler.de>\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# Usage\n\n### Simple element\n\n* With an icon:\n\n```vue\n\t<template>\n\t\t<NcAppNavigationItem name=\"My name\">\n\t\t\t<template #icon>\n\t\t\t\t<Check :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t}\n\t</script>\n```\n* With a spinning loader instead of the icon:\n\n```vue\n<NcAppNavigationItem name=\"Loading Item\" :loading=\"true\" />\n```\n* With an active state (only needed when not using `vue-router` and the `to` property, otherwise this is set automatically)\n\n```vue\n\t<NcAppNavigationItem name=\"Current page\" :active=\"true\" />\n```\n\n### Element with actions\nWrap the children in a template. If you have more than 2 actions, a popover menu and a menu\nbutton will be automatically created.\n\n```vue\n\t<template>\n\t\t<div id=\"app-navigation-vue\"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->\n\t\t\t<NcAppNavigationItem name=\"Item with actions\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tEdit\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionLink>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</div>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check'\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n\n### Element with counter\nJust nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.\n\n```vue\n\t<template>\n\t\t<NcAppNavigationItem name=\"Item with counter\">\n\t\t\t<template #icon>\n\t\t\t\t<Folder :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #counter>\n\t\t\t\t<NcCounterBubble>\n\t\t\t\t\t99+\n\t\t\t\t</NcCounterBubble>\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t},\n\t}\n\t</script>\n```\n\n### Element with children\n\nWrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose wether to allow or\nprevent the user from collapsing the items.\n\n```vue\n\t<template>\n\t\t<NcAppNavigationItem name=\"Item with children\" :allowCollapse=\"true\" :open=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<Folder :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #counter>\n\t\t\t\t<NcCounterBubble>\n\t\t\t\t\t99+\n\t\t\t\t</NcCounterBubble>\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tEdit\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionLink>\n\t\t\t</template>\n\t\t\t<template>\n\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild1\" />\n\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild2\" />\n\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild3\" />\n\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild4\" />\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder'\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n\n### Editable element\nAdd the prop `:editable=true` and an edit placeholder if you need it. By default\nthe placeholder is the previous name of the element.\n\n```vue\n\t<template>\n\t\t<NcAppNavigationItem name=\"Editable Item\" :editable=\"true\"\n\t\t\teditPlaceholder=\"your_placeholder_here\" @update:name=\"function(value){alert(value)}\">\n\t\t\t<template #icon>\n\t\t\t\t<Folder :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t</template>\n\t<script>\n\timport Folder from 'vue-material-design-icons/Folder'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tFolder,\n\t\t},\n\t}\n\t</script>\n```\n\n### Undo element\nJust set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.\n\n```\n<NcAppNavigationItem :undo=\"true\" name=\"Deleted important entry\" @undo=\"alert('undo delete')\"  />\n\n```\n\n### Link element\nHref that start by http will be treated as external and opened in a new tab\n```\n<div>\n\t<NcAppNavigationItem name=\"Files\" href=\"/index.php/apps/files\" />\n\t<NcAppNavigationItem name=\"Nextcloud\" href=\"https://nextcloud.com\" />\n</div>\n```\n\n### Custom title\n```\n<NcAppNavigationItem name=\"Nextcloud\" title=\"Open the Nextcloud website\" href=\"https://nextcloud.com\" />\n```\n\n### Pinned element\nJust set the `pinned` prop.\n```\n<NcAppNavigationItem name=\"Pinned item\" :pinned=\"true\" />\n```\n</docs>\n\n<template>\n\t<li :id=\"id\"\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--opened': opened,\n\t\t\t'app-navigation-entry--pinned': pinned,\n\t\t\t'app-navigation-entry--collapsible': collapsible,\n\t\t}\"\n\t\tclass=\"app-navigation-entry-wrapper\">\n\t\t<component :is=\"isRouterLink ? 'router-link' : 'NcVNodes'\"\n\t\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t\t:custom=\"isRouterLink ? true : false\"\n\t\t\t:to=\"to\"\n\t\t\t:exact=\"isRouterLink ? exact : null\">\n\t\t\t<div :class=\"{\n\t\t\t\t\t'app-navigation-entry--editing': editingActive,\n\t\t\t\t\t'app-navigation-entry--deleted': undo,\n\t\t\t\t\t'active': (isActive && to) || active,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-navigation-entry\">\n\t\t\t\t<!-- Icon and name -->\n\t\t\t\t<a v-if=\"!undo\"\n\t\t\t\t\tclass=\"app-navigation-entry-link\"\n\t\t\t\t\t:aria-current=\"active || (isActive && to) ? 'page' : undefined\"\n\t\t\t\t\t:aria-description=\"ariaDescription\"\n\t\t\t\t\t:aria-expanded=\"hasChildren ? opened.toString() : undefined\"\n\t\t\t\t\t:href=\"href || routerLinkHref || '#'\"\n\t\t\t\t\t:target=\"isExternal(href) ? '_blank' : undefined\"\n\t\t\t\t\t:title=\"title || name\"\n\t\t\t\t\t@blur=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@focus=\"handleFocus\"\n\t\t\t\t\t@keydown.tab.exact=\"handleTab\">\n\n\t\t\t\t\t<!-- icon if not collapsible -->\n\t\t\t\t\t<!-- never show the icon over the collapsible if mobile -->\n\t\t\t\t\t<div :class=\"{ [icon]: icon }\"\n\t\t\t\t\t\tclass=\"app-navigation-entry-icon\">\n\t\t\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<span v-if=\"!editingActive\" class=\"app-navigation-entry__name\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div v-if=\"editingActive\" class=\"editingContainer\">\n\t\t\t\t\t\t<NcInputConfirmCancel ref=\"editingInput\"\n\t\t\t\t\t\t\tv-model=\"editingValue\"\n\t\t\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t\t\t:primary=\"isActive && to\"\n\t\t\t\t\t\t\t@cancel=\"cancelEditing\"\n\t\t\t\t\t\t\t@confirm=\"handleEditingDone\" />\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<!-- undo entry -->\n\t\t\t\t<div v-if=\"undo\" class=\"app-navigation-entry__deleted\">\n\t\t\t\t\t<div class=\"app-navigation-entry__deleted-description\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Counter and Actions -->\n\t\t\t\t<div v-if=\"hasUtils && !editingActive\"\n\t\t\t\t\tclass=\"app-navigation-entry__utils\"\n\t\t\t\t\t:class=\"{'app-navigation-entry__utils--display-actions': forceDisplayActions || menuOpenLocalValue || menuOpen }\">\n\t\t\t\t\t<div v-if=\"$slots.counter\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__counter-wrapper\">\n\t\t\t\t\t\t<slot name=\"counter\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<NcActions v-if=\"$slots.actions || (editable && !editingActive) || undo\"\n\t\t\t\t\t\tref=\"actions\"\n\t\t\t\t\t\t:inline=\"inlineActions\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__actions\"\n\t\t\t\t\t\tcontainer=\"#app-navigation-vue\"\n\t\t\t\t\t\t:boundaries-element=\"actionsBoundariesElement\"\n\t\t\t\t\t\t:placement=\"menuPlacement\"\n\t\t\t\t\t\t:open=\"menuOpen\"\n\t\t\t\t\t\t:type=\"isActive && to ? 'primary' : null\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:default-icon=\"menuIcon\"\n\t\t\t\t\t\t@update:open=\"onMenuToggle\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<!-- @slot Slot for the custom menu icon -->\n\t\t\t\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<NcActionButton v-if=\"editable && !editingActive\"\n\t\t\t\t\t\t\t:aria-label=\"editButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleEdit\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ editLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton v-if=\"undo\"\n\t\t\t\t\t\t\t:aria-label=\"undoButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleUndo\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Undo :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\t\t\t\t<NcAppNavigationIconCollapsible v-if=\"collapsible\" :open=\"opened\" @click.prevent.stop=\"toggleCollapse\" />\n\n\t\t\t\t<!-- Anything (virtual) that should be mounted in the component, like a related modal -->\n\t\t\t\t<slot name=\"extra\" />\n\t\t\t</div>\n\t\t</component>\n\t\t<!-- Children elements -->\n\t\t<ul v-if=\"canHaveChildren && hasChildren\" class=\"app-navigation-entry__children\">\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'\nimport isMobile from '../../mixins/isMobile/index.js'\nimport NcInputConfirmCancel from './NcInputConfirmCancel.vue'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Undo from 'vue-material-design-icons/Undo.vue'\n\nexport default {\n\tname: 'NcAppNavigationItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcActionButton,\n\t\tNcAppNavigationIconCollapsible,\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t\tNcVNodes,\n\t\tPencil,\n\t\tUndo,\n\t},\n\n\tmixins: [isMobile],\n\n\tprops: {\n\t\t/**\n\t\t * If you are not using vue-router you can use the property to set this item as the active navigation entry.\n\t\t * When using vue-router and the `to` property this is set automatically.\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The main text content of the entry.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The title attribute of the element.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the list item element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'app-navigation-item-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Passing in a route will make the root element of this\n\t\t * component a `<router-link />` that points to that route.\n\t\t * By leaving this blank, the root element will be a `<li>`.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * A direct link. This will be used as the `href` attribute.\n\t\t * This will ignore any `to` prop being defined.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Pass in `true` if you want the matching behaviour to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t */\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Gives the possibility to collapse the children elements into the\n\t\t * parent element (true) or expands the children elements (false).\n\t\t */\n\t\tallowCollapse: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Makes the name of the item editable by providing an `ActionButton`\n\t\t * component that toggles a form\n\t\t */\n\t\teditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Only for 'editable' items, sets label for the edit action button.\n\t\t */\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Only for items in 'editable' mode, sets the placeholder text for the editing form.\n\t\t */\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Pins the item to the bottom left area, above the settings. Do not\n\t\t * place 'non-pinned' `AppnavigationItem` components below `pinned`\n\t\t * ones.\n\t\t */\n\t\tpinned: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Puts the item in the 'undo' state.\n\t\t */\n\t\tundo: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The navigation collapsible state (synced)\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 * The actions menu open state (synced)\n\t\t */\n\t\tmenuOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The action's menu default icon\n\t\t */\n\t\tmenuIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The action's menu direction\n\t\t */\n\t\tmenuPlacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * Entry aria details\n\t\t */\n\t\tariaDescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Number of action items outside the menu\n\t\t */\n\t\tinlineActions: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:menuOpen',\n\t\t'update:open',\n\t\t'update:name',\n\t\t'click',\n\t\t'undo',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\teditingValue: '',\n\t\t\topened: this.open, // Collapsible state\n\t\t\teditingActive: false,\n\t\t\thasChildren: false,\n\t\t\t/**\n\t\t\t * Tracks the open state of the actions menu\n\t\t\t */\n\t\t\tmenuOpenLocalValue: false,\n\t\t\tfocused: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisRouterLink() {\n\t\t\treturn this.to && !this.href\n\t\t},\n\n\t\tcollapsible() {\n\t\t\treturn this.allowCollapse && !!this.$slots.default\n\t\t},\n\n\t\t// Checks if the component is already a children of another\n\t\t// instance of AppNavigationItem\n\t\tcanHaveChildren() {\n\t\t\tif (this.$parent.$options._componentTag === 'AppNavigationItem') {\n\t\t\t\treturn false\n\t\t\t} else {\n\t\t\t\treturn true\n\t\t\t}\n\t\t},\n\n\t\thasUtils() {\n\t\t\tif (this.$slots.actions || this.$slots.counter || this.editable || this.undo) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\teditButtonAriaLabel() {\n\t\t\treturn this.editLabel ? this.editLabel : t('Edit item')\n\t\t},\n\n\t\tundoButtonAriaLabel() {\n\t\t\treturn t('Undo changes')\n\t\t},\n\t\tactionsBoundariesElement() {\n\t\t\treturn document.querySelector('#content-vue') || undefined\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(newVal) {\n\t\t\tthis.opened = newVal\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.updateSlotInfo()\n\t},\n\n\tbeforeUpdate() {\n\t\tthis.updateSlotInfo()\n\t},\n\n\tmethods: {\n\t\t// sync opened menu state with prop\n\t\tonMenuToggle(state) {\n\t\t\tthis.$emit('update:menuOpen', state)\n\t\t\tthis.menuOpenLocalValue = state\n\t\t},\n\t\t// toggle the collapsible state\n\t\ttoggleCollapse() {\n\t\t\tthis.opened = !this.opened\n\t\t\tthis.$emit('update:open', this.opened)\n\t\t},\n\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {PointerEvent} event - Native click event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\t// Edition methods\n\t\thandleEdit() {\n\t\t\tthis.editingValue = this.name\n\t\t\tthis.editingActive = true\n\t\t\tthis.onMenuToggle(false)\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$refs.editingInput.focusInput()\n\t\t\t})\n\t\t},\n\t\tcancelEditing() {\n\t\t\tthis.editingActive = false\n\t\t},\n\t\thandleEditingDone() {\n\t\t\tthis.$emit('update:name', this.editingValue)\n\t\t\tthis.editingValue = ''\n\t\t\tthis.editingActive = false\n\t\t},\n\n\t\t// Undo methods\n\t\thandleUndo() {\n\t\t\tthis.$emit('undo')\n\t\t},\n\n\t\tupdateSlotInfo() {\n\t\t\tthis.hasChildren = !!this.$slots.default\n\t\t},\n\n\t\t/**\n\t\t * Show actions upon focus\n\t\t */\n\t\thandleFocus() {\n\t\t\tthis.focused = true\n\t\t},\n\n\t\thandleBlur() {\n\t\t\tthis.focused = false\n\t\t},\n\n\t\t/**\n\t\t * This method checks if the root element of the component is focused and\n\t\t * if that's the case it focuses the actions button if available\n\t\t *\n\t\t * @param {Event} e the keydown event\n\t\t */\n\t\thandleTab(e) {\n\t\t\t// If there is no actions menu, do nothing.\n\t\t\tif (!this.$refs.actions) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.focused) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.$refs.actions.$refs.menuButton.$el.focus()\n\t\t\t\tthis.focused = false\n\t\t\t} else {\n\t\t\t\tthis.$refs.actions.$refs.menuButton.$el.blur()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Is this an external link\n\t\t *\n\t\t * @param {string} href The link to check\n\t\t * @return {boolean} Whether it is external or not\n\t\t */\n\t\tisExternal(href) {\n\t\t\t// Match any protocol\n\t\t\treturn href && href.match(/[a-z]+:\\/\\//i)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@import '../../assets/NcAppNavigationItem';\n</style>\n"],"names":["_sfc_main$4","_sfc_main$3","Components_NcButton","ChevronDown","ChevronUp","l10n","e","_sfc_main$2","_sfc_main$1","_sfc_main","Components_NcActions","Components_NcActionButton","NcAppNavigationIconCollapsible","NcInputConfirmCancel","Components_NcLoadingIcon","Components_NcVNodes","Pencil","Undo","Mixins_isMobile","GenRandomId","id","newVal","state","event","navigate","routerLinkHref","href"],"mappings":"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","x_google_ignoreList":[0,2,3]}