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

package/dist/chunks/NcAppSidebar-6ftxWNCE.cjs

@@ -0,0 +1,744 @@
+var Le = require("../assets/NcAppSidebar-zFWj1DS1.css");
+const R = require("../Components/NcVNodes.cjs"), z = require("./NcCheckboxRadioSwitch--es7vR2V.cjs"), e = require("vue"), m = require("./_plugin-vue_export-helper-CTzpuyvq.cjs"), D = require("./NcActions-Bj5vZPRQ.cjs"), P = require("./NcLoadingIcon-DkXGgGqQ.cjs"), E = require("./NcButton-CR5WPHh9.cjs"), K = require("./NcEmptyContent-DmwlAinq.cjs"), O = require("../Directives/Focus.cjs"), U = require("../Directives/Linkify.cjs");
+require("../Directives/Tooltip.cjs");
+const G = require("../Composables/useIsMobile.cjs"), Z = require("./GenRandomId-B2O1GMbH.cjs"), H = require("./focusTrap-xauhLvvr.cjs"), d = require("./_l10n-CEec8lDL.cjs"), j = require("./ArrowRight-M9UNYhUi.cjs"), J = require("./Close-PZEquBdx.cjs"), Q = require("@vueuse/components"), W = require("focus-trap"), X = require("floating-vue"), Y = {
+  name: "NcAppSidebarTabs",
+  components: {
+    NcCheckboxRadioSwitch: z.NcCheckboxRadioSwitch,
+    NcVNodes: R
+  },
+  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((t) => t.id === this.activeTab);
+    }
+  },
+  watch: {
+    active(t) {
+      t !== this.activeTab && this.updateActive();
+    }
+  },
+  methods: {
+    /**
+     * Set the current active tab
+     *
+     * @param {string} id the id of the tab
+     */
+    setActive(t) {
+      this.activeTab = t, 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((t) => t.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(t) {
+      this.tabs.push(t), this.tabs.sort((s, i) => s.order === i.order ? OC.Util.naturalSortCompare(s.name, i.name) : s.order - i.order), this.updateActive();
+    },
+    /**
+     * Unregister child tab from the tabs
+     *
+     * @param {string} id tab's id
+     */
+    unregisterTab(t) {
+      const s = this.tabs.findIndex((i) => i.id === t);
+      s !== -1 && this.tabs.splice(s, 1), this.activeTab === t && this.updateActive();
+    }
+  }
+}, $ = { class: "app-sidebar-tabs" }, ee = { class: "app-sidebar-tabs__tab-caption" };
+function te(t, s, i, l, o, a) {
+  const c = e.resolveComponent("NcVNodes"), h = e.resolveComponent("NcCheckboxRadioSwitch");
+  return e.openBlock(), e.createElementBlock("div", $, [
+    a.hasMultipleTabs ? (e.openBlock(), e.createElementBlock("div", {
+      key: 0,
+      role: "tablist",
+      class: "app-sidebar-tabs__nav",
+      onKeydown: [
+        s[0] || (s[0] = e.withKeys(e.withModifiers((...r) => a.focusPreviousTab && a.focusPreviousTab(...r), ["exact", "prevent", "stop"]), ["left"])),
+        s[1] || (s[1] = e.withKeys(e.withModifiers((...r) => a.focusNextTab && a.focusNextTab(...r), ["exact", "prevent", "stop"]), ["right"])),
+        s[2] || (s[2] = e.withKeys(e.withModifiers((...r) => a.focusActiveTabContent && a.focusActiveTabContent(...r), ["exact", "prevent", "stop"]), ["tab"])),
+        s[3] || (s[3] = e.withKeys(e.withModifiers((...r) => a.focusFirstTab && a.focusFirstTab(...r), ["exact", "prevent", "stop"]), ["home"])),
+        s[4] || (s[4] = e.withKeys(e.withModifiers((...r) => a.focusLastTab && a.focusLastTab(...r), ["exact", "prevent", "stop"]), ["end"])),
+        s[5] || (s[5] = e.withKeys(e.withModifiers((...r) => a.focusFirstTab && a.focusFirstTab(...r), ["exact", "prevent", "stop"]), ["page-up"])),
+        s[6] || (s[6] = e.withKeys(e.withModifiers((...r) => a.focusLastTab && a.focusLastTab(...r), ["exact", "prevent", "stop"]), ["page-down"]))
+      ]
+    }, [
+      (e.openBlock(!0), e.createElementBlock(e.Fragment, null, e.renderList(o.tabs, (r) => (e.openBlock(), e.createBlock(h, {
+        key: r.id,
+        "aria-controls": "tab-".concat(r.id),
+        "aria-selected": String(o.activeTab === r.id),
+        "button-variant": !0,
+        "model-value": o.activeTab === r.id,
+        "wrapper-id": "tab-button-".concat(r.id),
+        tabindex: o.activeTab === r.id ? 0 : -1,
+        "button-variant-grouped": "horizontal",
+        class: e.normalizeClass(["app-sidebar-tabs__tab", { active: r.id === o.activeTab }]),
+        role: "tab",
+        type: "button",
+        "onUpdate:modelValue": (u) => a.setActive(r.id)
+      }, {
+        icon: e.withCtx(() => [
+          e.createVNode(c, {
+            vnodes: r.renderIcon()
+          }, {
+            default: e.withCtx(() => [
+              e.createElementVNode("span", {
+                class: e.normalizeClass(["app-sidebar-tabs__tab-icon", r.icon])
+              }, null, 2)
+            ]),
+            _: 2
+          }, 1032, ["vnodes"])
+        ]),
+        default: e.withCtx(() => [
+          e.createElementVNode("span", ee, e.toDisplayString(r.name), 1)
+        ]),
+        _: 2
+      }, 1032, ["aria-controls", "aria-selected", "model-value", "wrapper-id", "tabindex", "class", "onUpdate:modelValue"]))), 128))
+    ], 32)) : e.createCommentVNode("", !0),
+    e.createElementVNode("div", {
+      class: e.normalizeClass([{ "app-sidebar-tabs__content--multiple": a.hasMultipleTabs }, "app-sidebar-tabs__content"])
+    }, [
+      e.renderSlot(t.$slots, "default", {}, void 0, !0)
+    ], 2)
+  ]);
+}
+const ie = /* @__PURE__ */ m._export_sfc(Y, [["render", te], ["__scopeId", "data-v-be5cc033"]]);
+d.register(d.t13);
+const ae = {
+  name: "StarIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, se = ["aria-hidden", "aria-label"], re = ["fill", "width", "height"], oe = { 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" }, ne = { key: 0 };
+function ce(t, s, i, l, o, a) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(t.$attrs, {
+    "aria-hidden": i.title ? null : !0,
+    "aria-label": i.title,
+    class: "material-design-icon star-icon",
+    role: "img",
+    onClick: s[0] || (s[0] = (c) => t.$emit("click", c))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: i.fillColor,
+      class: "material-design-icon__svg",
+      width: i.size,
+      height: i.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", oe, [
+        i.title ? (e.openBlock(), e.createElementBlock("title", ne, e.toDisplayString(i.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, re))
+  ], 16, se);
+}
+const le = /* @__PURE__ */ m._export_sfc(ae, [["render", ce]]), de = {
+  name: "StarOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, ue = ["aria-hidden", "aria-label"], me = ["fill", "width", "height"], he = { 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" }, be = { key: 0 };
+function pe(t, s, i, l, o, a) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(t.$attrs, {
+    "aria-hidden": i.title ? null : !0,
+    "aria-label": i.title,
+    class: "material-design-icon star-outline-icon",
+    role: "img",
+    onClick: s[0] || (s[0] = (c) => t.$emit("click", c))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: i.fillColor,
+      class: "material-design-icon__svg",
+      width: i.size,
+      height: i.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", he, [
+        i.title ? (e.openBlock(), e.createElementBlock("title", be, e.toDisplayString(i.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, me))
+  ], 16, ue);
+}
+const fe = /* @__PURE__ */ m._export_sfc(de, [["render", pe]]), ve = {
+  name: "NcAppSidebar",
+  components: {
+    NcActions: D.NcActions,
+    NcAppSidebarTabs: ie,
+    ArrowRight: j.ArrowRight,
+    NcButton: E.NcButton,
+    NcLoadingIcon: P.NcLoadingIcon,
+    NcEmptyContent: K.NcEmptyContent,
+    Close: J.Close,
+    Star: le,
+    StarOutline: fe
+  },
+  directives: {
+    focus: O.directive,
+    linkify: U.directive,
+    ClickOutside: Q.vOnClickOutside,
+    Tooltip: X.VTooltip
+  },
+  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: Z.GenRandomId(),
+      isMobile: G.useIsSmallMobile()
+    };
+  },
+  data() {
+    return {
+      changeNameTranslated: d.t("Change name"),
+      closeTranslated: d.t("Close sidebar"),
+      favoriteTranslated: d.t("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 t;
+    this.$emit("closed"), (t = this.focusTrap) == null || t.deactivate();
+  },
+  methods: {
+    isSlotPopulated: E.isSlotPopulated,
+    preserveElementToReturnFocus() {
+      if (document.activeElement && document.activeElement !== document.body && (this.elementToReturnFocus = document.activeElement, this.elementToReturnFocus.getAttribute("role") === "menuitem")) {
+        const t = this.elementToReturnFocus.closest('[role="menu"]');
+        if (t) {
+          const s = document.querySelector('[aria-controls="'.concat(t.id, '"]'));
+          this.elementToReturnFocus = s;
+        }
+      }
+    },
+    initFocusTrap() {
+      var t;
+      this.focusTrap || (this.focusTrap = W.createFocusTrap([
+        // 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
+        (t = document.querySelector('[aria-controls="app-navigation-vue"]')) == null ? void 0 : t.parentElement
+      ], {
+        allowOutsideClick: !0,
+        fallbackFocus: this.$refs.closeButton,
+        trapStack: H.getTrapStack(),
+        escapeDeactivates: !1
+      }));
+    },
+    /**
+     * Activate focus trap if it is currently needed, otherwise deactivate
+     */
+    toggleFocusTrap() {
+      var t;
+      this.isMobile ? (this.initFocusTrap(), this.focusTrap.activate()) : (t = this.focusTrap) == null || t.deactivate();
+    },
+    onBeforeEnter(t) {
+      this.$emit("opening", t);
+    },
+    onAfterEnter(t) {
+      this.$emit("opened", t);
+    },
+    onBeforeLeave(t) {
+      this.$emit("closing", t);
+    },
+    onAfterLeave(t) {
+      var s;
+      this.$emit("closed", t), (s = this.elementToReturnFocus) == null || s.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(t) {
+      this.$emit("close", t);
+    },
+    /**
+     * Emit figure click event to parent component
+     *
+     * @param {Event} e click event
+     */
+    onFigureClick(t) {
+      this.$emit("figure-click", t);
+    },
+    /**
+     * 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(t) {
+      this.$emit("update:name", t.target.value);
+    },
+    /**
+     * Emit when the name form edit confirm button is pressed in order
+     * to change the name.
+     *
+     * @param {Event} event submit event
+     */
+    onSubmitName(t) {
+      this.$emit("update:nameEditable", !1), this.$emit("submit-name", t);
+    },
+    onDismissEditing() {
+      this.$emit("update:nameEditable", !1), this.$emit("dismiss-editing");
+    },
+    onUpdateActive(t) {
+      this.$emit("update:active", t);
+    }
+  }
+}, _e = ["aria-labelledby"], ge = { class: "app-sidebar-header__info" }, ke = {
+  key: 0,
+  class: "app-sidebar-header__tertiary-actions"
+}, ye = { class: "app-sidebar-header__name-container" }, Te = { class: "app-sidebar-header__mainname-container" }, Ce = ["id", "aria-label", "title", "tabindex"], Ne = ["placeholder", "value"], Se = ["aria-label", "title"], Be = {
+  key: 0,
+  class: "app-sidebar-header__description"
+};
+function we(t, s, i, l, o, a) {
+  const c = e.resolveComponent("NcLoadingIcon"), h = e.resolveComponent("Star"), r = e.resolveComponent("StarOutline"), u = e.resolveComponent("NcButton"), L = e.resolveComponent("ArrowRight"), A = e.resolveComponent("NcActions"), V = e.resolveComponent("Close"), x = e.resolveComponent("NcAppSidebarTabs"), F = e.resolveComponent("NcEmptyContent"), I = e.resolveDirective("linkify"), M = e.resolveDirective("focus"), q = e.resolveDirective("click-outside");
+  return e.openBlock(), e.createBlock(e.Transition, {
+    appear: "",
+    name: "slide-right",
+    onBeforeEnter: a.onBeforeEnter,
+    onAfterEnter: a.onAfterEnter,
+    onBeforeLeave: a.onBeforeLeave,
+    onAfterLeave: a.onAfterLeave
+  }, {
+    default: e.withCtx(() => {
+      var b, p, f, v, _, g, k, y, T, C, N, S, B, w;
+      return [
+        e.createElementVNode("aside", {
+          id: "app-sidebar-vue",
+          ref: "sidebar",
+          class: "app-sidebar",
+          "aria-labelledby": "app-sidebar-vue-".concat(l.uid, "__header"),
+          onKeydown: s[6] || (s[6] = e.withKeys(e.withModifiers((n) => l.isMobile && a.closeSidebar(), ["stop"]), ["esc"]))
+        }, [
+          e.createElementVNode("header", {
+            class: e.normalizeClass([{
+              "app-sidebar-header--with-figure": a.isSlotPopulated((p = (b = t.$slots).header) == null ? void 0 : p.call(b)) || i.background,
+              "app-sidebar-header--compact": i.compact
+            }, "app-sidebar-header"])
+          }, [
+            e.createElementVNode("div", ge, [
+              (a.isSlotPopulated((v = (f = t.$slots).header) == null ? void 0 : v.call(f)) || i.background) && !i.empty ? (e.openBlock(), e.createElementBlock("div", {
+                key: 0,
+                class: e.normalizeClass([{
+                  "app-sidebar-header__figure--with-action": a.hasFigureClickListener
+                }, "app-sidebar-header__figure"]),
+                style: e.normalizeStyle({
+                  backgroundImage: "url(".concat(i.background, ")")
+                }),
+                tabindex: "0",
+                onClick: s[0] || (s[0] = (...n) => a.onFigureClick && a.onFigureClick(...n)),
+                onKeydown: s[1] || (s[1] = e.withKeys((...n) => a.onFigureClick && a.onFigureClick(...n), ["enter"]))
+              }, [
+                e.renderSlot(t.$slots, "header", { class: "app-sidebar-header__background" }, void 0, !0)
+              ], 38)) : e.createCommentVNode("", !0),
+              i.empty ? e.createCommentVNode("", !0) : (e.openBlock(), e.createElementBlock("div", {
+                key: 1,
+                class: e.normalizeClass([{
+                  "app-sidebar-header__desc--with-tertiary-action": a.canStar || a.isSlotPopulated((g = (_ = t.$slots)["tertiary-actions"]) == null ? void 0 : g.call(_)),
+                  "app-sidebar-header__desc--editable": i.nameEditable && !i.subname,
+                  "app-sidebar-header__desc--with-subname--editable": i.nameEditable && i.subname,
+                  "app-sidebar-header__desc--without-actions": !a.isSlotPopulated((y = (k = t.$slots)["secondary-actions"]) == null ? void 0 : y.call(k))
+                }, "app-sidebar-header__desc"])
+              }, [
+                a.canStar || a.isSlotPopulated((C = (T = t.$slots)["tertiary-actions"]) == null ? void 0 : C.call(T)) ? (e.openBlock(), e.createElementBlock("div", ke, [
+                  e.renderSlot(t.$slots, "tertiary-actions", {}, () => [
+                    a.canStar ? (e.openBlock(), e.createBlock(u, {
+                      key: 0,
+                      "aria-label": o.favoriteTranslated,
+                      pressed: o.isStarred,
+                      class: "app-sidebar-header__star",
+                      type: "secondary",
+                      onClick: e.withModifiers(a.toggleStarred, ["prevent"])
+                    }, {
+                      icon: e.withCtx(() => [
+                        i.starLoading ? (e.openBlock(), e.createBlock(c, { key: 0 })) : o.isStarred ? (e.openBlock(), e.createBlock(h, {
+                          key: 1,
+                          size: 20
+                        })) : (e.openBlock(), e.createBlock(r, {
+                          key: 2,
+                          size: 20
+                        }))
+                      ]),
+                      _: 1
+                    }, 8, ["aria-label", "pressed", "onClick"])) : e.createCommentVNode("", !0)
+                  ], !0)
+                ])) : e.createCommentVNode("", !0),
+                e.createElementVNode("div", ye, [
+                  e.createElementVNode("div", Te, [
+                    e.withDirectives((e.openBlock(), e.createElementBlock("h2", {
+                      id: "app-sidebar-vue-".concat(l.uid, "__header"),
+                      ref: "header",
+                      "aria-label": i.title,
+                      title: i.title,
+                      class: "app-sidebar-header__mainname",
+                      tabindex: i.nameEditable ? 0 : -1,
+                      onClick: s[2] || (s[2] = e.withModifiers((...n) => a.editName && a.editName(...n), ["self"]))
+                    }, [
+                      e.createTextVNode(e.toDisplayString(i.name), 1)
+                    ], 8, Ce)), [
+                      [e.vShow, !i.nameEditable],
+                      [I, { text: i.name, linkify: i.linkifyName }]
+                    ]),
+                    i.nameEditable ? e.withDirectives((e.openBlock(), e.createElementBlock("form", {
+                      key: 0,
+                      class: "app-sidebar-header__mainname-form",
+                      onSubmit: s[5] || (s[5] = e.withModifiers((...n) => a.onSubmitName && a.onSubmitName(...n), ["prevent"]))
+                    }, [
+                      e.withDirectives(e.createElementVNode("input", {
+                        ref: "nameInput",
+                        class: "app-sidebar-header__mainname-input",
+                        type: "text",
+                        placeholder: i.namePlaceholder,
+                        value: i.name,
+                        onKeydown: s[3] || (s[3] = e.withKeys(e.withModifiers((...n) => a.onDismissEditing && a.onDismissEditing(...n), ["stop"]), ["esc"])),
+                        onInput: s[4] || (s[4] = (...n) => a.onNameInput && a.onNameInput(...n))
+                      }, null, 40, Ne), [
+                        [M]
+                      ]),
+                      e.createVNode(u, {
+                        type: "tertiary-no-background",
+                        "aria-label": o.changeNameTranslated,
+                        "native-type": "submit"
+                      }, {
+                        icon: e.withCtx(() => [
+                          e.createVNode(L, { size: 20 })
+                        ]),
+                        _: 1
+                      }, 8, ["aria-label"])
+                    ], 32)), [
+                      [q, () => a.onSubmitName()]
+                    ]) : e.createCommentVNode("", !0),
+                    a.isSlotPopulated((S = (N = t.$slots)["secondary-actions"]) == null ? void 0 : S.call(N)) ? (e.openBlock(), e.createBlock(A, {
+                      key: 1,
+                      class: "app-sidebar-header__menu",
+                      "force-menu": i.forceMenu
+                    }, {
+                      default: e.withCtx(() => [
+                        e.renderSlot(t.$slots, "secondary-actions", {}, void 0, !0)
+                      ]),
+                      _: 3
+                    }, 8, ["force-menu"])) : e.createCommentVNode("", !0)
+                  ]),
+                  i.subname.trim() !== "" ? (e.openBlock(), e.createElementBlock("p", {
+                    key: 0,
+                    "aria-label": i.subtitle,
+                    title: i.subtitle,
+                    class: "app-sidebar-header__subname"
+                  }, e.toDisplayString(i.subname), 9, Se)) : e.createCommentVNode("", !0)
+                ])
+              ], 2))
+            ]),
+            e.createVNode(u, {
+              ref: "closeButton",
+              title: o.closeTranslated,
+              "aria-label": o.closeTranslated,
+              type: "tertiary",
+              class: "app-sidebar__close",
+              onClick: e.withModifiers(a.closeSidebar, ["prevent"])
+            }, {
+              icon: e.withCtx(() => [
+                e.createVNode(V, { size: 20 })
+              ]),
+              _: 1
+            }, 8, ["title", "aria-label", "onClick"]),
+            a.isSlotPopulated((w = (B = t.$slots).description) == null ? void 0 : w.call(B)) && !i.empty ? (e.openBlock(), e.createElementBlock("div", Be, [
+              e.renderSlot(t.$slots, "description", {}, void 0, !0)
+            ])) : e.createCommentVNode("", !0)
+          ], 2),
+          e.withDirectives(e.createVNode(x, {
+            ref: "tabs",
+            active: i.active,
+            "onUpdate:active": a.onUpdateActive
+          }, {
+            default: e.withCtx(() => [
+              e.renderSlot(t.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["active", "onUpdate:active"]), [
+            [e.vShow, !i.loading]
+          ]),
+          i.loading ? (e.openBlock(), e.createBlock(F, { key: 0 }, {
+            icon: e.withCtx(() => [
+              e.createVNode(c, { size: 64 })
+            ]),
+            _: 1
+          })) : e.createCommentVNode("", !0)
+        ], 40, _e)
+      ];
+    }),
+    _: 3
+  }, 8, ["onBeforeEnter", "onAfterEnter", "onBeforeLeave", "onAfterLeave"]);
+}
+const Ee = /* @__PURE__ */ m._export_sfc(ve, [["render", we], ["__scopeId", "data-v-b02423a8"]]);
+exports.NcAppSidebar = Ee;