@nextcloud/vue 9.0.0-alpha.0 → 9.0.0-alpha.2

package/dist/chunks/NcAppSidebar-DYHC70oF.mjs

@@ -0,0 +1,764 @@
+import "../assets/NcAppSidebar-zFWj1DS1.css";
+import Y from "../Components/NcVNodes.mjs";
+import { N as $ } from "./NcCheckboxRadioSwitch-CDiJJ9IX.mjs";
+import { resolveComponent as u, openBlock as r, createElementBlock as n, withKeys as b, withModifiers as l, Fragment as ee, renderList as te, createBlock as p, normalizeClass as T, withCtx as f, createVNode as v, createElementVNode as m, toDisplayString as y, createCommentVNode as c, renderSlot as g, mergeProps as K, resolveDirective as C, Transition as ae, normalizeStyle as ie, withDirectives as k, createTextVNode as se, vShow as q } from "vue";
+import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import { N as re } from "./NcActions-WuvVCajO.mjs";
+import { N as ne } from "./NcLoadingIcon-C5Ohiq97.mjs";
+import { N as oe, i as le } from "./NcButton-BOed2DnZ.mjs";
+import { N as de } from "./NcEmptyContent-CYEf8Lje.mjs";
+import { directive as ce } from "../Directives/Focus.mjs";
+import { directive as ue } from "../Directives/Linkify.mjs";
+import "../Directives/Tooltip.mjs";
+import { useIsSmallMobile as me } from "../Composables/useIsMobile.mjs";
+import { G as be } from "./GenRandomId-BW3iYFf9.mjs";
+import { g as fe } from "./focusTrap-Be9GEB5C.mjs";
+import { r as he, I as pe, a as A } from "./_l10n-D1NkaqfQ.mjs";
+import { A as ve } from "./ArrowRight-oiVcv9Oj.mjs";
+import { C as _e } from "./Close-4aPDwwcw.mjs";
+import { vOnClickOutside as ge } from "@vueuse/components";
+import { createFocusTrap as Te } from "focus-trap";
+import { VTooltip as ye } from "floating-vue";
+const Se = {
+  name: "NcAppSidebarTabs",
+  components: {
+    NcCheckboxRadioSwitch: $,
+    NcVNodes: Y
+  },
+  provide() {
+    return {
+      registerTab: this.registerTab,
+      unregisterTab: this.unregisterTab,
+      // Getter as an alternative to Vue 2.7 computed(() => this.activeTab)
+      getActiveTab: () => this.activeTab,
+      // Used to check whether the tab header is shown so the tabs can reference the tab header for `aria-labelledby` or not
+      isTablistShown: () => this.hasMultipleTabs
+    };
+  },
+  props: {
+    /**
+     * Id of the tab to activate
+     */
+    active: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:active"],
+  data() {
+    return {
+      /**
+       * Tab descriptions from the passed NcSidebarTab components' props to build the tab navbar from.
+       */
+      tabs: [],
+      /**
+       * Local active (open) tab's ID. It allows to use component without v-model:active
+       */
+      activeTab: ""
+    };
+  },
+  computed: {
+    /**
+     * Has multiple tabs. If only one tab - its content is shown without navigation
+     *
+     * @return {boolean}
+     */
+    hasMultipleTabs() {
+      return this.tabs.length > 1;
+    },
+    currentTabIndex() {
+      return this.tabs.findIndex((e) => e.id === this.activeTab);
+    }
+  },
+  watch: {
+    active(e) {
+      e !== this.activeTab && this.updateActive();
+    }
+  },
+  methods: {
+    /**
+     * Set the current active tab
+     *
+     * @param {string} id the id of the tab
+     */
+    setActive(e) {
+      this.activeTab = e, this.$emit("update:active", this.activeTab);
+    },
+    /**
+     * Focus the previous tab
+     * and emit to the parent component
+     */
+    focusPreviousTab() {
+      this.currentTabIndex > 0 && this.setActive(this.tabs[this.currentTabIndex - 1].id), this.focusActiveTab();
+    },
+    /**
+     * Focus the next tab
+     * and emit to the parent component
+     */
+    focusNextTab() {
+      this.currentTabIndex < this.tabs.length - 1 && this.setActive(this.tabs[this.currentTabIndex + 1].id), this.focusActiveTab();
+    },
+    /**
+     * Focus the first tab
+     * and emit to the parent component
+     */
+    focusFirstTab() {
+      this.setActive(this.tabs[0].id), this.focusActiveTab();
+    },
+    /**
+     * Focus the last tab
+     * and emit to the parent component
+     */
+    focusLastTab() {
+      this.setActive(this.tabs[this.tabs.length - 1].id), this.focusActiveTab();
+    },
+    /**
+     * Focus the current active tab
+     */
+    focusActiveTab() {
+      this.$el.querySelector("#tab-button-".concat(this.activeTab)).focus();
+    },
+    /**
+     * Focus the content on tab
+     * see aria accessibility guidelines
+     */
+    focusActiveTabContent() {
+      this.$el.querySelector("#tab-" + this.activeTab).focus();
+    },
+    /**
+     * Update the current active tab
+     */
+    updateActive() {
+      this.activeTab = this.active && this.tabs.some((e) => e.id === this.active) ? this.active : this.tabs.length > 0 ? this.tabs[0].id : "";
+    },
+    /**
+     * Register child tab in the tabs
+     *
+     * @param {object} tab child tab passed to slot
+     */
+    registerTab(e) {
+      this.tabs.push(e), this.tabs.sort((i, t) => i.order === t.order ? OC.Util.naturalSortCompare(i.name, t.name) : i.order - t.order), this.updateActive();
+    },
+    /**
+     * Unregister child tab from the tabs
+     *
+     * @param {string} id tab's id
+     */
+    unregisterTab(e) {
+      const i = this.tabs.findIndex((t) => t.id === e);
+      i !== -1 && this.tabs.splice(i, 1), this.activeTab === e && this.updateActive();
+    }
+  }
+}, ke = { class: "app-sidebar-tabs" }, Ne = { class: "app-sidebar-tabs__tab-caption" };
+function Le(e, i, t, _, o, a) {
+  const h = u("NcVNodes"), L = u("NcCheckboxRadioSwitch");
+  return r(), n("div", ke, [
+    a.hasMultipleTabs ? (r(), n("div", {
+      key: 0,
+      role: "tablist",
+      class: "app-sidebar-tabs__nav",
+      onKeydown: [
+        i[0] || (i[0] = b(l((...s) => a.focusPreviousTab && a.focusPreviousTab(...s), ["exact", "prevent", "stop"]), ["left"])),
+        i[1] || (i[1] = b(l((...s) => a.focusNextTab && a.focusNextTab(...s), ["exact", "prevent", "stop"]), ["right"])),
+        i[2] || (i[2] = b(l((...s) => a.focusActiveTabContent && a.focusActiveTabContent(...s), ["exact", "prevent", "stop"]), ["tab"])),
+        i[3] || (i[3] = b(l((...s) => a.focusFirstTab && a.focusFirstTab(...s), ["exact", "prevent", "stop"]), ["home"])),
+        i[4] || (i[4] = b(l((...s) => a.focusLastTab && a.focusLastTab(...s), ["exact", "prevent", "stop"]), ["end"])),
+        i[5] || (i[5] = b(l((...s) => a.focusFirstTab && a.focusFirstTab(...s), ["exact", "prevent", "stop"]), ["page-up"])),
+        i[6] || (i[6] = b(l((...s) => a.focusLastTab && a.focusLastTab(...s), ["exact", "prevent", "stop"]), ["page-down"]))
+      ]
+    }, [
+      (r(!0), n(ee, null, te(o.tabs, (s) => (r(), p(L, {
+        key: s.id,
+        "aria-controls": "tab-".concat(s.id),
+        "aria-selected": String(o.activeTab === s.id),
+        "button-variant": !0,
+        "model-value": o.activeTab === s.id,
+        "wrapper-id": "tab-button-".concat(s.id),
+        tabindex: o.activeTab === s.id ? 0 : -1,
+        "button-variant-grouped": "horizontal",
+        class: T(["app-sidebar-tabs__tab", { active: s.id === o.activeTab }]),
+        role: "tab",
+        type: "button",
+        "onUpdate:modelValue": (S) => a.setActive(s.id)
+      }, {
+        icon: f(() => [
+          v(h, {
+            vnodes: s.renderIcon()
+          }, {
+            default: f(() => [
+              m("span", {
+                class: T(["app-sidebar-tabs__tab-icon", s.icon])
+              }, null, 2)
+            ]),
+            _: 2
+          }, 1032, ["vnodes"])
+        ]),
+        default: f(() => [
+          m("span", Ne, y(s.name), 1)
+        ]),
+        _: 2
+      }, 1032, ["aria-controls", "aria-selected", "model-value", "wrapper-id", "tabindex", "class", "onUpdate:modelValue"]))), 128))
+    ], 32)) : c("", !0),
+    m("div", {
+      class: T([{ "app-sidebar-tabs__content--multiple": a.hasMultipleTabs }, "app-sidebar-tabs__content"])
+    }, [
+      g(e.$slots, "default", {}, void 0, !0)
+    ], 2)
+  ]);
+}
+const Ce = /* @__PURE__ */ N(Se, [["render", Le], ["__scopeId", "data-v-be5cc033"]]);
+he(pe);
+const Ae = {
+  name: "StarIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, we = ["aria-hidden", "aria-label"], Ee = ["fill", "width", "height"], Fe = { 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" }, Be = { key: 0 };
+function Ie(e, i, t, _, o, a) {
+  return r(), n("span", K(e.$attrs, {
+    "aria-hidden": t.title ? null : !0,
+    "aria-label": t.title,
+    class: "material-design-icon star-icon",
+    role: "img",
+    onClick: i[0] || (i[0] = (h) => e.$emit("click", h))
+  }), [
+    (r(), n("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      m("path", Fe, [
+        t.title ? (r(), n("title", Be, y(t.title), 1)) : c("", !0)
+      ])
+    ], 8, Ee))
+  ], 16, we);
+}
+const xe = /* @__PURE__ */ N(Ae, [["render", Ie]]), Re = {
+  name: "StarOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, Me = ["aria-hidden", "aria-label"], ze = ["fill", "width", "height"], Pe = { 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" }, Ve = { key: 0 };
+function Oe(e, i, t, _, o, a) {
+  return r(), n("span", K(e.$attrs, {
+    "aria-hidden": t.title ? null : !0,
+    "aria-label": t.title,
+    class: "material-design-icon star-outline-icon",
+    role: "img",
+    onClick: i[0] || (i[0] = (h) => e.$emit("click", h))
+  }), [
+    (r(), n("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      m("path", Pe, [
+        t.title ? (r(), n("title", Ve, y(t.title), 1)) : c("", !0)
+      ])
+    ], 8, ze))
+  ], 16, Me);
+}
+const Ue = /* @__PURE__ */ N(Re, [["render", Oe]]), De = {
+  name: "NcAppSidebar",
+  components: {
+    NcActions: re,
+    NcAppSidebarTabs: Ce,
+    ArrowRight: ve,
+    NcButton: oe,
+    NcLoadingIcon: ne,
+    NcEmptyContent: de,
+    Close: _e,
+    Star: xe,
+    StarOutline: Ue
+  },
+  directives: {
+    focus: ce,
+    linkify: ue,
+    ClickOutside: ge,
+    Tooltip: ye
+  },
+  props: {
+    active: {
+      type: String,
+      default: ""
+    },
+    name: {
+      type: String,
+      default: "",
+      required: !0
+    },
+    /**
+     * Allow to edit the sidebar name.
+     */
+    nameEditable: {
+      type: Boolean,
+      default: !1
+    },
+    namePlaceholder: {
+      type: String,
+      default: ""
+    },
+    subname: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Title to display for the subname.
+     */
+    subtitle: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Url to the top header background image
+     * Applied with css
+     */
+    background: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Enable the favourite icon if not null
+     * See fired events
+     */
+    starred: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Show loading spinner instead of the star icon
+     */
+    starLoading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show loading spinner instead of tabs
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Display the sidebar in compact mode
+     */
+    compact: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Only display close button and default slot content.
+     * Don't display other header content and primary and secondary actions.
+     * Useful when showing the EmptyContent component as content.
+     */
+    empty: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Force the actions to display in a three dot menu
+     */
+    forceMenu: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Linkify the name
+     */
+    linkifyName: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Title to display for the name.
+     * Can be set to the same text in case it's too long.
+     */
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [
+    "close",
+    "closing",
+    "closed",
+    "opening",
+    "opened",
+    // 'figure-click', not emitted on purpose to make "hasFigureClickListener" work
+    "update:starred",
+    "update:nameEditable",
+    "update:name",
+    "update:active",
+    "submit-name",
+    "dismiss-editing"
+  ],
+  setup() {
+    return {
+      uid: be(),
+      isMobile: me()
+    };
+  },
+  data() {
+    return {
+      changeNameTranslated: A("Change name"),
+      closeTranslated: A("Close sidebar"),
+      favoriteTranslated: A("Favorite"),
+      isStarred: this.starred,
+      focusTrap: null,
+      elementToReturnFocus: null
+    };
+  },
+  computed: {
+    canStar() {
+      return this.isStarred !== null;
+    },
+    hasFigureClickListener() {
+      return !!this.$attrs.onFigureClick;
+    }
+  },
+  watch: {
+    starred() {
+      this.isStarred = this.starred;
+    },
+    isMobile() {
+      this.toggleFocusTrap();
+    }
+  },
+  created() {
+    this.preserveElementToReturnFocus();
+  },
+  mounted() {
+    this.elementToReturnFocus && this.focus(), this.toggleFocusTrap();
+  },
+  beforeUnmount() {
+    var e;
+    this.$emit("closed"), (e = this.focusTrap) == null || e.deactivate();
+  },
+  methods: {
+    isSlotPopulated: le,
+    preserveElementToReturnFocus() {
+      if (document.activeElement && document.activeElement !== document.body && (this.elementToReturnFocus = document.activeElement, this.elementToReturnFocus.getAttribute("role") === "menuitem")) {
+        const e = this.elementToReturnFocus.closest('[role="menu"]');
+        if (e) {
+          const i = document.querySelector('[aria-controls="'.concat(e.id, '"]'));
+          this.elementToReturnFocus = i;
+        }
+      }
+    },
+    initFocusTrap() {
+      var e;
+      this.focusTrap || (this.focusTrap = Te([
+        // 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
+        (e = document.querySelector('[aria-controls="app-navigation-vue"]')) == null ? void 0 : e.parentElement
+      ], {
+        allowOutsideClick: !0,
+        fallbackFocus: this.$refs.closeButton,
+        trapStack: fe(),
+        escapeDeactivates: !1
+      }));
+    },
+    /**
+     * Activate focus trap if it is currently needed, otherwise deactivate
+     */
+    toggleFocusTrap() {
+      var e;
+      this.isMobile ? (this.initFocusTrap(), this.focusTrap.activate()) : (e = this.focusTrap) == null || e.deactivate();
+    },
+    onBeforeEnter(e) {
+      this.$emit("opening", e);
+    },
+    onAfterEnter(e) {
+      this.$emit("opened", e);
+    },
+    onBeforeLeave(e) {
+      this.$emit("closing", e);
+    },
+    onAfterLeave(e) {
+      var i;
+      this.$emit("closed", e), (i = this.elementToReturnFocus) == null || i.focus({ focusVisible: !0 }), this.elementToReturnFocus = null;
+    },
+    /**
+     * Used to tell parent component the user asked to close the sidebar
+     *
+     * @param {Event} e close icon click event
+     */
+    closeSidebar(e) {
+      this.$emit("close", e);
+    },
+    /**
+     * Emit figure click event to parent component
+     *
+     * @param {Event} e click event
+     */
+    onFigureClick(e) {
+      this.$emit("figure-click", e);
+    },
+    /**
+     * Toggle the favourite state
+     * and emit to the parent component
+     */
+    toggleStarred() {
+      this.isStarred = !this.isStarred, this.$emit("update:starred", this.isStarred);
+    },
+    async editName() {
+      this.$emit("update:nameEditable", !0), this.nameEditable && (await this.$nextTick(), this.$refs.nameInput.focus());
+    },
+    /**
+     * Focus the sidebar
+     * @public
+     */
+    focus() {
+      this.$refs.header.focus();
+    },
+    /**
+     * Focus the active tab
+     * @public
+     */
+    focusActiveTabContent() {
+      this.preserveElementToReturnFocus(), this.$refs.tabs.focusActiveTabContent();
+    },
+    /**
+     * Emit name change event to parent component
+     *
+     * @param {Event} event input event
+     */
+    onNameInput(e) {
+      this.$emit("update:name", e.target.value);
+    },
+    /**
+     * Emit when the name form edit confirm button is pressed in order
+     * to change the name.
+     *
+     * @param {Event} event submit event
+     */
+    onSubmitName(e) {
+      this.$emit("update:nameEditable", !1), this.$emit("submit-name", e);
+    },
+    onDismissEditing() {
+      this.$emit("update:nameEditable", !1), this.$emit("dismiss-editing");
+    },
+    onUpdateActive(e) {
+      this.$emit("update:active", e);
+    }
+  }
+}, qe = ["aria-labelledby"], Ke = { class: "app-sidebar-header__info" }, Ge = {
+  key: 0,
+  class: "app-sidebar-header__tertiary-actions"
+}, Ze = { class: "app-sidebar-header__name-container" }, je = { class: "app-sidebar-header__mainname-container" }, He = ["id", "aria-label", "title", "tabindex"], Je = ["placeholder", "value"], Qe = ["aria-label", "title"], We = {
+  key: 0,
+  class: "app-sidebar-header__description"
+};
+function Xe(e, i, t, _, o, a) {
+  const h = u("NcLoadingIcon"), L = u("Star"), s = u("StarOutline"), S = u("NcButton"), G = u("ArrowRight"), Z = u("NcActions"), j = u("Close"), H = u("NcAppSidebarTabs"), J = u("NcEmptyContent"), Q = C("linkify"), W = C("focus"), X = C("click-outside");
+  return r(), p(ae, {
+    appear: "",
+    name: "slide-right",
+    onBeforeEnter: a.onBeforeEnter,
+    onAfterEnter: a.onAfterEnter,
+    onBeforeLeave: a.onBeforeLeave,
+    onAfterLeave: a.onAfterLeave
+  }, {
+    default: f(() => {
+      var w, E, F, B, I, x, R, M, z, P, V, O, U, D;
+      return [
+        m("aside", {
+          id: "app-sidebar-vue",
+          ref: "sidebar",
+          class: "app-sidebar",
+          "aria-labelledby": "app-sidebar-vue-".concat(_.uid, "__header"),
+          onKeydown: i[6] || (i[6] = b(l((d) => _.isMobile && a.closeSidebar(), ["stop"]), ["esc"]))
+        }, [
+          m("header", {
+            class: T([{
+              "app-sidebar-header--with-figure": a.isSlotPopulated((E = (w = e.$slots).header) == null ? void 0 : E.call(w)) || t.background,
+              "app-sidebar-header--compact": t.compact
+            }, "app-sidebar-header"])
+          }, [
+            m("div", Ke, [
+              (a.isSlotPopulated((B = (F = e.$slots).header) == null ? void 0 : B.call(F)) || t.background) && !t.empty ? (r(), n("div", {
+                key: 0,
+                class: T([{
+                  "app-sidebar-header__figure--with-action": a.hasFigureClickListener
+                }, "app-sidebar-header__figure"]),
+                style: ie({
+                  backgroundImage: "url(".concat(t.background, ")")
+                }),
+                tabindex: "0",
+                onClick: i[0] || (i[0] = (...d) => a.onFigureClick && a.onFigureClick(...d)),
+                onKeydown: i[1] || (i[1] = b((...d) => a.onFigureClick && a.onFigureClick(...d), ["enter"]))
+              }, [
+                g(e.$slots, "header", { class: "app-sidebar-header__background" }, void 0, !0)
+              ], 38)) : c("", !0),
+              t.empty ? c("", !0) : (r(), n("div", {
+                key: 1,
+                class: T([{
+                  "app-sidebar-header__desc--with-tertiary-action": a.canStar || a.isSlotPopulated((x = (I = e.$slots)["tertiary-actions"]) == null ? void 0 : x.call(I)),
+                  "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": !a.isSlotPopulated((M = (R = e.$slots)["secondary-actions"]) == null ? void 0 : M.call(R))
+                }, "app-sidebar-header__desc"])
+              }, [
+                a.canStar || a.isSlotPopulated((P = (z = e.$slots)["tertiary-actions"]) == null ? void 0 : P.call(z)) ? (r(), n("div", Ge, [
+                  g(e.$slots, "tertiary-actions", {}, () => [
+                    a.canStar ? (r(), p(S, {
+                      key: 0,
+                      "aria-label": o.favoriteTranslated,
+                      pressed: o.isStarred,
+                      class: "app-sidebar-header__star",
+                      type: "secondary",
+                      onClick: l(a.toggleStarred, ["prevent"])
+                    }, {
+                      icon: f(() => [
+                        t.starLoading ? (r(), p(h, { key: 0 })) : o.isStarred ? (r(), p(L, {
+                          key: 1,
+                          size: 20
+                        })) : (r(), p(s, {
+                          key: 2,
+                          size: 20
+                        }))
+                      ]),
+                      _: 1
+                    }, 8, ["aria-label", "pressed", "onClick"])) : c("", !0)
+                  ], !0)
+                ])) : c("", !0),
+                m("div", Ze, [
+                  m("div", je, [
+                    k((r(), n("h2", {
+                      id: "app-sidebar-vue-".concat(_.uid, "__header"),
+                      ref: "header",
+                      "aria-label": t.title,
+                      title: t.title,
+                      class: "app-sidebar-header__mainname",
+                      tabindex: t.nameEditable ? 0 : -1,
+                      onClick: i[2] || (i[2] = l((...d) => a.editName && a.editName(...d), ["self"]))
+                    }, [
+                      se(y(t.name), 1)
+                    ], 8, He)), [
+                      [q, !t.nameEditable],
+                      [Q, { text: t.name, linkify: t.linkifyName }]
+                    ]),
+                    t.nameEditable ? k((r(), n("form", {
+                      key: 0,
+                      class: "app-sidebar-header__mainname-form",
+                      onSubmit: i[5] || (i[5] = l((...d) => a.onSubmitName && a.onSubmitName(...d), ["prevent"]))
+                    }, [
+                      k(m("input", {
+                        ref: "nameInput",
+                        class: "app-sidebar-header__mainname-input",
+                        type: "text",
+                        placeholder: t.namePlaceholder,
+                        value: t.name,
+                        onKeydown: i[3] || (i[3] = b(l((...d) => a.onDismissEditing && a.onDismissEditing(...d), ["stop"]), ["esc"])),
+                        onInput: i[4] || (i[4] = (...d) => a.onNameInput && a.onNameInput(...d))
+                      }, null, 40, Je), [
+                        [W]
+                      ]),
+                      v(S, {
+                        type: "tertiary-no-background",
+                        "aria-label": o.changeNameTranslated,
+                        "native-type": "submit"
+                      }, {
+                        icon: f(() => [
+                          v(G, { size: 20 })
+                        ]),
+                        _: 1
+                      }, 8, ["aria-label"])
+                    ], 32)), [
+                      [X, () => a.onSubmitName()]
+                    ]) : c("", !0),
+                    a.isSlotPopulated((O = (V = e.$slots)["secondary-actions"]) == null ? void 0 : O.call(V)) ? (r(), p(Z, {
+                      key: 1,
+                      class: "app-sidebar-header__menu",
+                      "force-menu": t.forceMenu
+                    }, {
+                      default: f(() => [
+                        g(e.$slots, "secondary-actions", {}, void 0, !0)
+                      ]),
+                      _: 3
+                    }, 8, ["force-menu"])) : c("", !0)
+                  ]),
+                  t.subname.trim() !== "" ? (r(), n("p", {
+                    key: 0,
+                    "aria-label": t.subtitle,
+                    title: t.subtitle,
+                    class: "app-sidebar-header__subname"
+                  }, y(t.subname), 9, Qe)) : c("", !0)
+                ])
+              ], 2))
+            ]),
+            v(S, {
+              ref: "closeButton",
+              title: o.closeTranslated,
+              "aria-label": o.closeTranslated,
+              type: "tertiary",
+              class: "app-sidebar__close",
+              onClick: l(a.closeSidebar, ["prevent"])
+            }, {
+              icon: f(() => [
+                v(j, { size: 20 })
+              ]),
+              _: 1
+            }, 8, ["title", "aria-label", "onClick"]),
+            a.isSlotPopulated((D = (U = e.$slots).description) == null ? void 0 : D.call(U)) && !t.empty ? (r(), n("div", We, [
+              g(e.$slots, "description", {}, void 0, !0)
+            ])) : c("", !0)
+          ], 2),
+          k(v(H, {
+            ref: "tabs",
+            active: t.active,
+            "onUpdate:active": a.onUpdateActive
+          }, {
+            default: f(() => [
+              g(e.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["active", "onUpdate:active"]), [
+            [q, !t.loading]
+          ]),
+          t.loading ? (r(), p(J, { key: 0 }, {
+            icon: f(() => [
+              v(h, { size: 64 })
+            ]),
+            _: 1
+          })) : c("", !0)
+        ], 40, qe)
+      ];
+    }),
+    _: 3
+  }, 8, ["onBeforeEnter", "onAfterEnter", "onBeforeLeave", "onAfterLeave"]);
+}
+const gt = /* @__PURE__ */ N(De, [["render", Xe], ["__scopeId", "data-v-b02423a8"]]);
+export {
+  gt as N
+};