@nextcloud/vue 8.3.0 → 8.4.0

package/dist/Components/NcAppSidebar.mjs

@@ -1,23 +1,26 @@
-import "../assets/index-3d1ccc15.css";
+import "../assets/index-2d5cf6b2.css";
 import n from "./NcVNodes.mjs";
-import l from "./NcCheckboxRadioSwitch.mjs";
+import o from "./NcCheckboxRadioSwitch.mjs";
 import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-import o from "./NcActions.mjs";
+import l from "./NcActions.mjs";
 import c from "./NcLoadingIcon.mjs";
 import u from "./NcButton.mjs";
 import d from "./NcEmptyContent.mjs";
 import { directive as p } from "../Directives/Focus.mjs";
 import { directive as f } from "../Directives/Linkify.mjs";
 import "../Directives/Tooltip.mjs";
-import { t as r } from "../chunks/l10n-1b905a9a.mjs";
-import { A as m } from "../chunks/ArrowRight-74a9fcb2.mjs";
-import { C as b } from "../chunks/Close-271f72e2.mjs";
-import { vOnClickOutside as _ } from "@vueuse/components";
-import { VTooltip as h } from "floating-vue";
-const y = {
+import { useIsSmallMobile as m } from "../Composables/useIsMobile.mjs";
+import { g as b } from "../chunks/focusTrap-5d0f71d4.mjs";
+import { r as h, L as _, a as r } from "../chunks/_l10n-f5af5269.mjs";
+import { A as y } from "../chunks/ArrowRight-74a9fcb2.mjs";
+import { C as g } from "../chunks/Close-271f72e2.mjs";
+import { vOnClickOutside as k } from "@vueuse/components";
+import { createFocusTrap as v } from "focus-trap";
+import { VTooltip as T } from "floating-vue";
+const C = {
   name: "NcAppSidebarTabs",
   components: {
-    NcCheckboxRadioSwitch: l,
+    NcCheckboxRadioSwitch: o,
     NcVNodes: n
   },
   provide() {
@@ -132,7 +135,7 @@ const y = {
      * @param {object} tab child tab passed to slot
      */
     registerTab(i) {
-      this.tabs.push(i), this.tabs.sort((t, a) => t.order === a.order ? OC.Util.naturalSortCompare(t.name, a.name) : t.order - a.order), this.updateActive();
+      this.tabs.push(i), this.tabs.sort((e, a) => e.order === a.order ? OC.Util.naturalSortCompare(e.name, a.name) : e.order - a.order), this.updateActive();
     },
     /**
      * Unregister child tab from the tabs
@@ -140,45 +143,47 @@ const y = {
      * @param {string} id tab's id
      */
     unregisterTab(i) {
-      const t = this.tabs.findIndex((a) => a.id === i);
-      t !== -1 && this.tabs.splice(t, 1), this.activeTab === i && this.updateActive();
+      const e = this.tabs.findIndex((a) => a.id === i);
+      e !== -1 && this.tabs.splice(e, 1), this.activeTab === i && this.updateActive();
     }
   }
 };
-var g = function() {
-  var t = this, a = t._self._c;
-  return a("div", { staticClass: "app-sidebar-tabs" }, [t.hasMultipleTabs ? a("div", { staticClass: "app-sidebar-tabs__nav", attrs: { role: "tablist" }, on: { keydown: [function(e) {
-    return !e.type.indexOf("key") && t._k(e.keyCode, "left", 37, e.key, ["Left", "ArrowLeft"]) || "button" in e && e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.preventDefault(), e.stopPropagation(), t.focusPreviousTab.apply(null, arguments));
-  }, function(e) {
-    return !e.type.indexOf("key") && t._k(e.keyCode, "right", 39, e.key, ["Right", "ArrowRight"]) || "button" in e && e.button !== 2 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.preventDefault(), e.stopPropagation(), t.focusNextTab.apply(null, arguments));
-  }, function(e) {
-    return !e.type.indexOf("key") && t._k(e.keyCode, "tab", 9, e.key, "Tab") || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.preventDefault(), e.stopPropagation(), t.focusActiveTabContent.apply(null, arguments));
-  }, function(e) {
-    return !e.type.indexOf("key") && t._k(e.keyCode, "home", void 0, e.key, void 0) || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.preventDefault(), e.stopPropagation(), t.focusFirstTab.apply(null, arguments));
-  }, function(e) {
-    return !e.type.indexOf("key") && t._k(e.keyCode, "end", void 0, e.key, void 0) || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.preventDefault(), e.stopPropagation(), t.focusLastTab.apply(null, arguments));
-  }, function(e) {
-    return !e.type.indexOf("key") && t._k(e.keyCode, "page-up", void 0, e.key, void 0) || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.preventDefault(), e.stopPropagation(), t.focusFirstTab.apply(null, arguments));
-  }, function(e) {
-    return !e.type.indexOf("key") && t._k(e.keyCode, "page-down", void 0, e.key, void 0) || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.preventDefault(), e.stopPropagation(), t.focusLastTab.apply(null, arguments));
-  }] } }, t._l(t.tabs, function(e) {
-    return a("NcCheckboxRadioSwitch", { key: e.id, staticClass: "app-sidebar-tabs__tab", class: { active: e.id === t.activeTab }, attrs: { "aria-controls": `tab-${e.id}`, "aria-selected": String(t.activeTab === e.id), "button-variant": !0, checked: t.activeTab === e.id, "wrapper-id": `tab-button-${e.id}`, tabindex: t.activeTab === e.id ? 0 : -1, "button-variant-grouped": "horizontal", role: "tab", type: "button" }, on: { "update:checked": function(D) {
-      return t.setActive(e.id);
-    } }, scopedSlots: t._u([{ key: "icon", fn: function() {
-      return [a("NcVNodes", { attrs: { vnodes: e.renderIcon() } }, [a("span", { staticClass: "app-sidebar-tabs__tab-icon", class: e.icon })])];
-    }, proxy: !0 }], null, !0) }, [a("span", { staticClass: "app-sidebar-tabs__tab-caption" }, [t._v(" " + t._s(e.name) + " ")])]);
-  }), 1) : t._e(), a("div", { staticClass: "app-sidebar-tabs__content", class: { "app-sidebar-tabs__content--multiple": t.hasMultipleTabs } }, [t._t("default")], 2)]);
-}, k = [], v = /* @__PURE__ */ s(
-  y,
-  g,
-  k,
+var S = function() {
+  var e = this, a = e._self._c;
+  return a("div", { staticClass: "app-sidebar-tabs" }, [e.hasMultipleTabs ? a("div", { staticClass: "app-sidebar-tabs__nav", attrs: { role: "tablist" }, on: { keydown: [function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "left", 37, t.key, ["Left", "ArrowLeft"]) || "button" in t && t.button !== 0 || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusPreviousTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "right", 39, t.key, ["Right", "ArrowRight"]) || "button" in t && t.button !== 2 || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusNextTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "tab", 9, t.key, "Tab") || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusActiveTabContent.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "home", void 0, t.key, void 0) || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusFirstTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "end", void 0, t.key, void 0) || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusLastTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "page-up", void 0, t.key, void 0) || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusFirstTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "page-down", void 0, t.key, void 0) || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusLastTab.apply(null, arguments));
+  }] } }, e._l(e.tabs, function(t) {
+    return a("NcCheckboxRadioSwitch", { key: t.id, staticClass: "app-sidebar-tabs__tab", class: { active: t.id === e.activeTab }, attrs: { "aria-controls": `tab-${t.id}`, "aria-selected": String(e.activeTab === t.id), "button-variant": !0, checked: e.activeTab === t.id, "wrapper-id": `tab-button-${t.id}`, tabindex: e.activeTab === t.id ? 0 : -1, "button-variant-grouped": "horizontal", role: "tab", type: "button" }, on: { "update:checked": function(U) {
+      return e.setActive(t.id);
+    } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+      return [a("NcVNodes", { attrs: { vnodes: t.renderIcon() } }, [a("span", { staticClass: "app-sidebar-tabs__tab-icon", class: t.icon })])];
+    }, proxy: !0 }], null, !0) }, [a("span", { staticClass: "app-sidebar-tabs__tab-caption" }, [e._v(" " + e._s(t.name) + " ")])]);
+  }), 1) : e._e(), a("div", { staticClass: "app-sidebar-tabs__content", class: { "app-sidebar-tabs__content--multiple": e.hasMultipleTabs } }, [e._t("default")], 2)]);
+}, x = [], N = /* @__PURE__ */ s(
+  C,
+  S,
+  x,
   !1,
   null,
   "2ae00fba",
   null,
   null
 );
-const T = v.exports, C = {
+const L = N.exports;
+h(_);
+const A = {
   name: "StarIcon",
   emits: ["click"],
   props: {
@@ -195,22 +200,22 @@ const T = v.exports, C = {
     }
   }
 };
-var S = function() {
-  var t = this, a = t._self._c;
-  return a("span", t._b({ staticClass: "material-design-icon star-icon", attrs: { "aria-hidden": !t.title, "aria-label": t.title, role: "img" }, on: { click: function(e) {
-    return t.$emit("click", e);
-  } } }, "span", t.$attrs, !1), [a("svg", { staticClass: "material-design-icon__svg", attrs: { fill: t.fillColor, width: t.size, height: t.size, viewBox: "0 0 24 24" } }, [a("path", { attrs: { d: "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" } }, [t.title ? a("title", [t._v(t._s(t.title))]) : t._e()])])]);
-}, x = [], N = /* @__PURE__ */ s(
-  C,
-  S,
-  x,
+var w = function() {
+  var e = this, a = e._self._c;
+  return a("span", e._b({ staticClass: "material-design-icon star-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(t) {
+    return e.$emit("click", t);
+  } } }, "span", e.$attrs, !1), [a("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [a("path", { attrs: { d: "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" } }, [e.title ? a("title", [e._v(e._s(e.title))]) : e._e()])])]);
+}, K = [], E = /* @__PURE__ */ s(
+  A,
+  w,
+  K,
   !1,
   null,
   null,
   null,
   null
 );
-const L = N.exports, A = {
+const F = E.exports, B = {
   name: "StarOutlineIcon",
   emits: ["click"],
   props: {
@@ -227,40 +232,40 @@ const L = N.exports, A = {
     }
   }
 };
-var w = function() {
-  var t = this, a = t._self._c;
-  return a("span", t._b({ staticClass: "material-design-icon star-outline-icon", attrs: { "aria-hidden": !t.title, "aria-label": t.title, role: "img" }, on: { click: function(e) {
-    return t.$emit("click", e);
-  } } }, "span", t.$attrs, !1), [a("svg", { staticClass: "material-design-icon__svg", attrs: { fill: t.fillColor, width: t.size, height: t.size, viewBox: "0 0 24 24" } }, [a("path", { attrs: { d: "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" } }, [t.title ? a("title", [t._v(t._s(t.title))]) : t._e()])])]);
-}, K = [], E = /* @__PURE__ */ s(
-  A,
-  w,
-  K,
+var I = function() {
+  var e = this, a = e._self._c;
+  return a("span", e._b({ staticClass: "material-design-icon star-outline-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(t) {
+    return e.$emit("click", t);
+  } } }, "span", e.$attrs, !1), [a("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [a("path", { attrs: { d: "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" } }, [e.title ? a("title", [e._v(e._s(e.title))]) : e._e()])])]);
+}, O = [], D = /* @__PURE__ */ s(
+  B,
+  I,
+  O,
   !1,
   null,
   null,
   null,
   null
 );
-const I = E.exports;
-const B = {
+const M = D.exports;
+const P = {
   name: "NcAppSidebar",
   components: {
-    NcActions: o,
-    NcAppSidebarTabs: T,
-    ArrowRight: m,
+    NcActions: l,
+    NcAppSidebarTabs: L,
+    ArrowRight: y,
     NcButton: u,
     NcLoadingIcon: c,
     NcEmptyContent: d,
-    Close: b,
-    Star: L,
-    StarOutline: I
+    Close: g,
+    Star: F,
+    StarOutline: M
   },
   directives: {
     focus: p,
     linkify: f,
-    ClickOutside: _,
-    Tooltip: h
+    ClickOutside: k,
+    Tooltip: T
   },
   props: {
     active: {
@@ -377,12 +382,18 @@ const B = {
     "submit-name",
     "dismiss-editing"
   ],
+  setup() {
+    return {
+      isMobile: m()
+    };
+  },
   data() {
     return {
       changeNameTranslated: r("Change name"),
       closeTranslated: r("Close sidebar"),
       favoriteTranslated: r("Favorite"),
-      isStarred: this.starred
+      isStarred: this.starred,
+      focusTrap: null
     };
   },
   computed: {
@@ -399,12 +410,43 @@ const B = {
   watch: {
     starred() {
       this.isStarred = this.starred;
+    },
+    isMobile() {
+      this.toggleFocusTrap();
     }
   },
+  mounted() {
+    this.toggleFocusTrap();
+  },
   beforeDestroy() {
-    this.$emit("closed");
+    var i;
+    this.$emit("closed"), (i = this.focusTrap) == null || i.deactivate();
   },
   methods: {
+    initFocusTrap() {
+      var i;
+      this.focusTrap || (this.focusTrap = v([
+        // The sidebar itself
+        this.$refs.sidebar,
+        // Nextcloud Server header navigarion
+        document.querySelector("#header"),
+        // The app navigation toggle. Navigation can be opened above the sidebar
+        // Take the parent element, because the focus-trap requires a container with elements, not the element itself
+        (i = document.querySelector('[aria-controls="app-navigation-vue"]')) == null ? void 0 : i.parentElement
+      ], {
+        allowOutsideClick: !0,
+        fallbackFocus: this.$refs.closeButton,
+        trapStack: b(),
+        escapeDeactivates: !1
+      }));
+    },
+    /**
+     * Activate focus trap if it is currently needed, otherwise deactivate
+     */
+    toggleFocusTrap() {
+      var i;
+      this.isMobile ? (this.initFocusTrap(), this.focusTrap.activate()) : (i = this.focusTrap) == null || i.deactivate();
+    },
     onBeforeEnter(i) {
       this.$emit("opening", i);
     },
@@ -470,54 +512,58 @@ const B = {
     }
   }
 };
-var F = function() {
-  var t = this, a = t._self._c;
-  return a("transition", { attrs: { appear: "", name: "slide-right" }, on: { "before-enter": t.onBeforeEnter, "after-enter": t.onAfterEnter, "before-leave": t.onBeforeLeave, "after-leave": t.onAfterLeave } }, [a("aside", { staticClass: "app-sidebar", attrs: { id: "app-sidebar-vue" } }, [a("header", { staticClass: "app-sidebar-header", class: {
-    "app-sidebar-header--with-figure": t.hasFigure,
-    "app-sidebar-header--compact": t.compact
-  } }, [a("div", { staticClass: "app-sidebar-header__info" }, [t.hasFigure && !t.empty ? a("div", { staticClass: "app-sidebar-header__figure", class: {
-    "app-sidebar-header__figure--with-action": t.hasFigureClickListener
+var z = function() {
+  var e = this, a = e._self._c;
+  return a("transition", { attrs: { appear: "", name: "slide-right" }, on: { "before-enter": e.onBeforeEnter, "after-enter": e.onAfterEnter, "before-leave": e.onBeforeLeave, "after-leave": e.onAfterLeave } }, [a("aside", { ref: "sidebar", staticClass: "app-sidebar", attrs: { id: "app-sidebar-vue" }, on: { keydown: function(t) {
+    if (!t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]))
+      return null;
+    t.stopPropagation(), e.isMobile && e.closeSidebar();
+  } } }, [a("header", { staticClass: "app-sidebar-header", class: {
+    "app-sidebar-header--with-figure": e.hasFigure,
+    "app-sidebar-header--compact": e.compact
+  } }, [a("div", { staticClass: "app-sidebar-header__info" }, [e.hasFigure && !e.empty ? a("div", { staticClass: "app-sidebar-header__figure", class: {
+    "app-sidebar-header__figure--with-action": e.hasFigureClickListener
   }, style: {
-    backgroundImage: `url(${t.background})`
-  }, attrs: { tabindex: "0" }, on: { click: t.onFigureClick, keydown: function(e) {
-    return !e.type.indexOf("key") && t._k(e.keyCode, "enter", 13, e.key, "Enter") ? null : t.onFigureClick.apply(null, arguments);
-  } } }, [t._t("header")], 2) : t._e(), t.empty ? t._e() : a("div", { staticClass: "app-sidebar-header__desc", class: {
-    "app-sidebar-header__desc--with-tertiary-action": t.canStar || t.$slots["tertiary-actions"],
-    "app-sidebar-header__desc--editable": t.nameEditable && !t.subname,
-    "app-sidebar-header__desc--with-subname--editable": t.nameEditable && t.subname,
-    "app-sidebar-header__desc--without-actions": !t.$slots["secondary-actions"]
-  } }, [t.canStar || t.$slots["tertiary-actions"] ? a("div", { staticClass: "app-sidebar-header__tertiary-actions" }, [t._t("tertiary-actions", function() {
-    return [t.canStar ? a("NcButton", { staticClass: "app-sidebar-header__star", attrs: { "aria-label": t.favoriteTranslated, pressed: t.isStarred, type: "secondary" }, on: { click: function(e) {
-      return e.preventDefault(), t.toggleStarred.apply(null, arguments);
-    } }, scopedSlots: t._u([{ key: "icon", fn: function() {
-      return [t.starLoading ? a("NcLoadingIcon") : t.isStarred ? a("Star", { attrs: { size: 20 } }) : a("StarOutline", { attrs: { size: 20 } })];
-    }, proxy: !0 }], null, !1, 2575459756) }) : t._e()];
-  })], 2) : t._e(), a("div", { staticClass: "app-sidebar-header__name-container" }, [a("div", { staticClass: "app-sidebar-header__mainname-container" }, [a("h2", { directives: [{ name: "show", rawName: "v-show", value: !t.nameEditable, expression: "!nameEditable" }, { name: "linkify", rawName: "v-linkify", value: { text: t.name, linkify: t.linkifyName }, expression: "{text: name, linkify: linkifyName}" }], staticClass: "app-sidebar-header__mainname", attrs: { "aria-label": t.title, title: t.title, tabindex: t.nameEditable ? 0 : void 0 }, on: { click: function(e) {
-    return e.target !== e.currentTarget ? null : t.editName.apply(null, arguments);
-  } } }, [t._v(" " + t._s(t.name) + " ")]), t.nameEditable ? [a("form", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: () => t.onSubmitName(), expression: "() => onSubmitName()" }], staticClass: "app-sidebar-header__mainname-form", on: { submit: function(e) {
-    return e.preventDefault(), t.onSubmitName.apply(null, arguments);
-  } } }, [a("input", { directives: [{ name: "focus", rawName: "v-focus" }], ref: "nameInput", staticClass: "app-sidebar-header__mainname-input", attrs: { type: "text", placeholder: t.namePlaceholder }, domProps: { value: t.name }, on: { keydown: function(e) {
-    return !e.type.indexOf("key") && t._k(e.keyCode, "esc", 27, e.key, ["Esc", "Escape"]) ? null : (e.stopPropagation(), t.onDismissEditing.apply(null, arguments));
-  }, input: t.onNameInput } }), a("NcButton", { attrs: { type: "tertiary-no-background", "aria-label": t.changeNameTranslated, "native-type": "submit" }, scopedSlots: t._u([{ key: "icon", fn: function() {
+    backgroundImage: `url(${e.background})`
+  }, attrs: { tabindex: "0" }, on: { click: e.onFigureClick, keydown: function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "enter", 13, t.key, "Enter") ? null : e.onFigureClick.apply(null, arguments);
+  } } }, [e._t("header")], 2) : e._e(), e.empty ? e._e() : a("div", { staticClass: "app-sidebar-header__desc", class: {
+    "app-sidebar-header__desc--with-tertiary-action": e.canStar || e.$slots["tertiary-actions"],
+    "app-sidebar-header__desc--editable": e.nameEditable && !e.subname,
+    "app-sidebar-header__desc--with-subname--editable": e.nameEditable && e.subname,
+    "app-sidebar-header__desc--without-actions": !e.$slots["secondary-actions"]
+  } }, [e.canStar || e.$slots["tertiary-actions"] ? a("div", { staticClass: "app-sidebar-header__tertiary-actions" }, [e._t("tertiary-actions", function() {
+    return [e.canStar ? a("NcButton", { staticClass: "app-sidebar-header__star", attrs: { "aria-label": e.favoriteTranslated, pressed: e.isStarred, type: "secondary" }, on: { click: function(t) {
+      return t.preventDefault(), e.toggleStarred.apply(null, arguments);
+    } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+      return [e.starLoading ? a("NcLoadingIcon") : e.isStarred ? a("Star", { attrs: { size: 20 } }) : a("StarOutline", { attrs: { size: 20 } })];
+    }, proxy: !0 }], null, !1, 2575459756) }) : e._e()];
+  })], 2) : e._e(), a("div", { staticClass: "app-sidebar-header__name-container" }, [a("div", { staticClass: "app-sidebar-header__mainname-container" }, [a("h2", { directives: [{ name: "show", rawName: "v-show", value: !e.nameEditable, expression: "!nameEditable" }, { name: "linkify", rawName: "v-linkify", value: { text: e.name, linkify: e.linkifyName }, expression: "{text: name, linkify: linkifyName}" }], staticClass: "app-sidebar-header__mainname", attrs: { "aria-label": e.title, title: e.title, tabindex: e.nameEditable ? 0 : void 0 }, on: { click: function(t) {
+    return t.target !== t.currentTarget ? null : e.editName.apply(null, arguments);
+  } } }, [e._v(" " + e._s(e.name) + " ")]), e.nameEditable ? [a("form", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: () => e.onSubmitName(), expression: "() => onSubmitName()" }], staticClass: "app-sidebar-header__mainname-form", on: { submit: function(t) {
+    return t.preventDefault(), e.onSubmitName.apply(null, arguments);
+  } } }, [a("input", { directives: [{ name: "focus", rawName: "v-focus" }], ref: "nameInput", staticClass: "app-sidebar-header__mainname-input", attrs: { type: "text", placeholder: e.namePlaceholder }, domProps: { value: e.name }, on: { keydown: function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]) ? null : (t.stopPropagation(), e.onDismissEditing.apply(null, arguments));
+  }, input: e.onNameInput } }), a("NcButton", { attrs: { type: "tertiary-no-background", "aria-label": e.changeNameTranslated, "native-type": "submit" }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [a("ArrowRight", { attrs: { size: 20 } })];
-  }, proxy: !0 }], null, !1, 1252225425) })], 1)] : t._e(), t.$slots["secondary-actions"] ? a("NcActions", { staticClass: "app-sidebar-header__menu", attrs: { "force-menu": t.forceMenu } }, [t._t("secondary-actions")], 2) : t._e()], 2), t.subname.trim() !== "" ? a("p", { staticClass: "app-sidebar-header__subname", attrs: { "aria-label": t.subtitle, title: t.subtitle } }, [t._v(" " + t._s(t.subname) + " ")]) : t._e()])])]), a("NcButton", { staticClass: "app-sidebar__close", attrs: { title: t.closeTranslated, "aria-label": t.closeTranslated, type: "tertiary" }, on: { click: function(e) {
-    return e.preventDefault(), t.closeSidebar.apply(null, arguments);
-  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
+  }, proxy: !0 }], null, !1, 1252225425) })], 1)] : e._e(), e.$slots["secondary-actions"] ? a("NcActions", { staticClass: "app-sidebar-header__menu", attrs: { "force-menu": e.forceMenu } }, [e._t("secondary-actions")], 2) : e._e()], 2), e.subname.trim() !== "" ? a("p", { staticClass: "app-sidebar-header__subname", attrs: { "aria-label": e.subtitle, title: e.subtitle } }, [e._v(" " + e._s(e.subname) + " ")]) : e._e()])])]), a("NcButton", { ref: "closeButton", staticClass: "app-sidebar__close", attrs: { title: e.closeTranslated, "aria-label": e.closeTranslated, type: "tertiary" }, on: { click: function(t) {
+    return t.preventDefault(), e.closeSidebar.apply(null, arguments);
+  } }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [a("Close", { attrs: { size: 20 } })];
-  }, proxy: !0 }]) }), t.$slots.description && !t.empty ? a("div", { staticClass: "app-sidebar-header__description" }, [t._t("description")], 2) : t._e()], 1), a("NcAppSidebarTabs", { directives: [{ name: "show", rawName: "v-show", value: !t.loading, expression: "!loading" }], ref: "tabs", attrs: { active: t.active }, on: { "update:active": t.onUpdateActive } }, [t._t("default")], 2), t.loading ? a("NcEmptyContent", { scopedSlots: t._u([{ key: "icon", fn: function() {
+  }, proxy: !0 }]) }), e.$slots.description && !e.empty ? a("div", { staticClass: "app-sidebar-header__description" }, [e._t("description")], 2) : e._e()], 1), a("NcAppSidebarTabs", { directives: [{ name: "show", rawName: "v-show", value: !e.loading, expression: "!loading" }], ref: "tabs", attrs: { active: e.active }, on: { "update:active": e.onUpdateActive } }, [e._t("default")], 2), e.loading ? a("NcEmptyContent", { scopedSlots: e._u([{ key: "icon", fn: function() {
     return [a("NcLoadingIcon", { attrs: { size: 64 } })];
-  }, proxy: !0 }], null, !1, 826850984) }) : t._e()], 1)]);
-}, O = [], z = /* @__PURE__ */ s(
-  B,
-  F,
-  O,
+  }, proxy: !0 }], null, !1, 826850984) }) : e._e()], 1)]);
+}, R = [], q = /* @__PURE__ */ s(
+  P,
+  z,
+  R,
   !1,
   null,
-  "90858b97",
+  "15882bc7",
   null,
   null
 );
-const tt = z.exports;
+const le = q.exports;
 export {
-  tt as default
+  le as default
 };