@nextcloud/vue 9.0.0-alpha.5 → 9.0.0-alpha.7

package/dist/chunks/NcAppSidebar-C9frc6kG.mjs

@@ -1,980 +0,0 @@
-import '../assets/NcAppSidebar-B7CgUHLX.css';
-import _sfc_main$5 from "../Components/NcVNodes.mjs";
-import { N as NcCheckboxRadioSwitch } from "./NcCheckboxRadioSwitch-fsQs5UG3.mjs";
-import { resolveComponent, openBlock, createElementBlock, withKeys, withModifiers, Fragment, renderList, createBlock, normalizeClass, withCtx, createVNode, createElementVNode, toDisplayString, createCommentVNode, renderSlot, mergeProps, resolveDirective, Transition, withDirectives, Teleport, normalizeStyle, createTextVNode, vShow } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { N as NcActions } from "./NcActions-DqMOvrbN.mjs";
-import { N as NcLoadingIcon } from "./NcLoadingIcon-DREmHXr2.mjs";
-import { N as NcButton, i as isSlotPopulated } from "./NcButton-Bhuckhtj.mjs";
-import { N as NcEmptyContent } from "./NcEmptyContent-BoGB3vFC.mjs";
-import { directive } from "../Directives/Focus.mjs";
-import { directive as directive$1 } from "../Directives/Linkify.mjs";
-import { useIsSmallMobile } from "../Composables/useIsMobile.mjs";
-import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
-import { g as getTrapStack } from "./focusTrap-Cecv_gjR.mjs";
-import { r as register, N as t14, a as t } from "./_l10n-6dsjYig_.mjs";
-import { A as ArrowRight } from "./ArrowRight-Cg6xGDcS.mjs";
-import { C as Close } from "./Close-pmiXntgw.mjs";
-import { vOnClickOutside } from "@vueuse/components";
-import { createFocusTrap } from "focus-trap";
-const _sfc_main$4 = {
-  name: "NcAppSidebarTabs",
-  components: {
-    NcCheckboxRadioSwitch,
-    NcVNodes: _sfc_main$5
-  },
-  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: ""
-    },
-    /**
-     * Force the tab navigation to display even if there is only one tab
-     */
-    forceTabs: {
-      type: Boolean,
-      default: false
-    }
-  },
-  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;
-    },
-    showForSingleTab() {
-      return this.forceTabs && this.tabs.length === 1;
-    },
-    currentTabIndex() {
-      return this.tabs.findIndex((tab) => tab.id === this.activeTab);
-    }
-  },
-  watch: {
-    active(active) {
-      if (active !== this.activeTab) {
-        this.updateActive();
-      }
-    }
-  },
-  methods: {
-    /**
-     * Set the current active tab
-     *
-     * @param {string} id the id of the tab
-     */
-    setActive(id) {
-      this.activeTab = id;
-      this.$emit("update:active", this.activeTab);
-    },
-    /**
-     * Focus the previous tab
-     * and emit to the parent component
-     */
-    focusPreviousTab() {
-      if (this.currentTabIndex > 0) {
-        this.setActive(this.tabs[this.currentTabIndex - 1].id);
-      }
-      this.focusActiveTab();
-    },
-    /**
-     * Focus the next tab
-     * and emit to the parent component
-     */
-    focusNextTab() {
-      if (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-${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((tab) => tab.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(tab) {
-      this.tabs.push(tab);
-      this.tabs.sort((a, b) => {
-        if (a.order === b.order) {
-          return OC.Util.naturalSortCompare(a.name, b.name);
-        }
-        return a.order - b.order;
-      });
-      this.updateActive();
-    },
-    /**
-     * Unregister child tab from the tabs
-     *
-     * @param {string} id tab's id
-     */
-    unregisterTab(id) {
-      const tabIndex = this.tabs.findIndex((tab) => tab.id === id);
-      if (tabIndex !== -1) {
-        this.tabs.splice(tabIndex, 1);
-      }
-      if (this.activeTab === id) {
-        this.updateActive();
-      }
-    }
-  }
-};
-const _hoisted_1$4 = { class: "app-sidebar-tabs" };
-const _hoisted_2$4 = { class: "app-sidebar-tabs__tab-caption" };
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_NcVNodes = resolveComponent("NcVNodes");
-  const _component_NcCheckboxRadioSwitch = resolveComponent("NcCheckboxRadioSwitch");
-  return openBlock(), createElementBlock("div", _hoisted_1$4, [
-    $options.hasMultipleTabs || $options.showForSingleTab ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      role: "tablist",
-      class: "app-sidebar-tabs__nav",
-      onKeydown: [
-        _cache[0] || (_cache[0] = withKeys(withModifiers((...args) => $options.focusPreviousTab && $options.focusPreviousTab(...args), ["exact", "prevent", "stop"]), ["left"])),
-        _cache[1] || (_cache[1] = withKeys(withModifiers((...args) => $options.focusNextTab && $options.focusNextTab(...args), ["exact", "prevent", "stop"]), ["right"])),
-        _cache[2] || (_cache[2] = withKeys(withModifiers((...args) => $options.focusActiveTabContent && $options.focusActiveTabContent(...args), ["exact", "prevent", "stop"]), ["tab"])),
-        _cache[3] || (_cache[3] = withKeys(withModifiers((...args) => $options.focusFirstTab && $options.focusFirstTab(...args), ["exact", "prevent", "stop"]), ["home"])),
-        _cache[4] || (_cache[4] = withKeys(withModifiers((...args) => $options.focusLastTab && $options.focusLastTab(...args), ["exact", "prevent", "stop"]), ["end"])),
-        _cache[5] || (_cache[5] = withKeys(withModifiers((...args) => $options.focusFirstTab && $options.focusFirstTab(...args), ["exact", "prevent", "stop"]), ["page-up"])),
-        _cache[6] || (_cache[6] = withKeys(withModifiers((...args) => $options.focusLastTab && $options.focusLastTab(...args), ["exact", "prevent", "stop"]), ["page-down"]))
-      ]
-    }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList($data.tabs, (tab) => {
-        return openBlock(), createBlock(_component_NcCheckboxRadioSwitch, {
-          key: tab.id,
-          "aria-controls": `tab-${tab.id}`,
-          "aria-selected": String($data.activeTab === tab.id),
-          "button-variant": true,
-          "model-value": $data.activeTab === tab.id,
-          "wrapper-id": `tab-button-${tab.id}`,
-          tabindex: $data.activeTab === tab.id ? 0 : -1,
-          "button-variant-grouped": "horizontal",
-          class: normalizeClass(["app-sidebar-tabs__tab", { active: tab.id === $data.activeTab }]),
-          role: "tab",
-          type: "button",
-          "onUpdate:modelValue": ($event) => $options.setActive(tab.id)
-        }, {
-          icon: withCtx(() => [
-            createVNode(_component_NcVNodes, {
-              vnodes: tab.renderIcon()
-            }, {
-              default: withCtx(() => [
-                createElementVNode("span", {
-                  class: normalizeClass(["app-sidebar-tabs__tab-icon", tab.icon])
-                }, null, 2)
-              ]),
-              _: 2
-            }, 1032, ["vnodes"])
-          ]),
-          default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$4, toDisplayString(tab.name), 1)
-          ]),
-          _: 2
-        }, 1032, ["aria-controls", "aria-selected", "model-value", "wrapper-id", "tabindex", "class", "onUpdate:modelValue"]);
-      }), 128))
-    ], 32)) : createCommentVNode("", true),
-    createElementVNode("div", {
-      class: normalizeClass([{ "app-sidebar-tabs__content--multiple": $options.hasMultipleTabs }, "app-sidebar-tabs__content"])
-    }, [
-      renderSlot(_ctx.$slots, "default", {}, void 0, true)
-    ], 2)
-  ]);
-}
-const NcAppSidebarTabs = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4], ["__scopeId", "data-v-ae067610"]]);
-register(t14);
-const _sfc_main$3 = {
-  name: "DockRightIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-};
-const _hoisted_1$3 = ["aria-hidden", "aria-label"];
-const _hoisted_2$3 = ["fill", "width", "height"];
-const _hoisted_3$3 = { d: "M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M15 18H4V6H15Z" };
-const _hoisted_4$3 = { key: 0 };
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
-    "aria-hidden": $props.title ? null : true,
-    "aria-label": $props.title,
-    class: "material-design-icon dock-right-icon",
-    role: "img",
-    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
-  }), [
-    (openBlock(), createElementBlock("svg", {
-      fill: $props.fillColor,
-      class: "material-design-icon__svg",
-      width: $props.size,
-      height: $props.size,
-      viewBox: "0 0 24 24"
-    }, [
-      createElementVNode("path", _hoisted_3$3, [
-        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$3, toDisplayString($props.title), 1)) : createCommentVNode("", true)
-      ])
-    ], 8, _hoisted_2$3))
-  ], 16, _hoisted_1$3);
-}
-const IconDockRight = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
-const _sfc_main$2 = {
-  name: "StarIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-};
-const _hoisted_1$2 = ["aria-hidden", "aria-label"];
-const _hoisted_2$2 = ["fill", "width", "height"];
-const _hoisted_3$2 = { 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" };
-const _hoisted_4$2 = { key: 0 };
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
-    "aria-hidden": $props.title ? null : true,
-    "aria-label": $props.title,
-    class: "material-design-icon star-icon",
-    role: "img",
-    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
-  }), [
-    (openBlock(), createElementBlock("svg", {
-      fill: $props.fillColor,
-      class: "material-design-icon__svg",
-      width: $props.size,
-      height: $props.size,
-      viewBox: "0 0 24 24"
-    }, [
-      createElementVNode("path", _hoisted_3$2, [
-        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$2, toDisplayString($props.title), 1)) : createCommentVNode("", true)
-      ])
-    ], 8, _hoisted_2$2))
-  ], 16, _hoisted_1$2);
-}
-const IconStar = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
-const _sfc_main$1 = {
-  name: "StarOutlineIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-};
-const _hoisted_1$1 = ["aria-hidden", "aria-label"];
-const _hoisted_2$1 = ["fill", "width", "height"];
-const _hoisted_3$1 = { 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" };
-const _hoisted_4$1 = { key: 0 };
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
-    "aria-hidden": $props.title ? null : true,
-    "aria-label": $props.title,
-    class: "material-design-icon star-outline-icon",
-    role: "img",
-    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
-  }), [
-    (openBlock(), createElementBlock("svg", {
-      fill: $props.fillColor,
-      class: "material-design-icon__svg",
-      width: $props.size,
-      height: $props.size,
-      viewBox: "0 0 24 24"
-    }, [
-      createElementVNode("path", _hoisted_3$1, [
-        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$1, toDisplayString($props.title), 1)) : createCommentVNode("", true)
-      ])
-    ], 8, _hoisted_2$1))
-  ], 16, _hoisted_1$1);
-}
-const IconStarOutline = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-const _sfc_main = {
-  name: "NcAppSidebar",
-  components: {
-    NcActions,
-    NcAppSidebarTabs,
-    NcButton,
-    NcLoadingIcon,
-    NcEmptyContent,
-    IconArrowRight: ArrowRight,
-    IconClose: Close,
-    IconDockRight,
-    IconStar,
-    IconStarOutline
-  },
-  directives: {
-    focus: directive,
-    linkify: directive$1,
-    ClickOutside: vOnClickOutside
-  },
-  inject: {
-    ncContentSelector: {
-      from: "NcContent:selector",
-      default: void 0
-    }
-  },
-  props: {
-    active: {
-      type: String,
-      default: ""
-    },
-    name: {
-      type: String,
-      default: "",
-      required: true
-    },
-    /**
-     * Allow to edit the sidebar name.
-     */
-    nameEditable: {
-      type: Boolean,
-      default: false
-    },
-    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: false
-    },
-    /**
-     * Show loading spinner instead of tabs
-     */
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Display the sidebar in compact mode
-     */
-    compact: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 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: false
-    },
-    /**
-     * Force the actions to display in a three dot menu
-     */
-    forceMenu: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Force the tab navigation to display even if there is only one tab
-     */
-    forceTabs: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Linkify the name
-     */
-    linkifyName: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Title to display for the name.
-     * Can be set to the same text in case it's too long.
-     */
-    title: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Allow to conditionally show the sidebar
-     * You can also use `v-if` on the sidebar, but using the open prop allow to keep
-     * the sidebar inside the DOM for performance if it is opened and closed multiple times.
-     *
-     * When using the `open` property to close the sidebar a built-in toggle button will be shown to reopen it,
-     * similar to the app navigation. You can remove this button with the `no-toggle` prop.
-     */
-    open: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Custom classes to assign to the sidebar toggle button.
-     * If needed this can be used to assign styles to the button using `:deep()` selector.
-     */
-    toggleClasses: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    /**
-     * Custom attrs to assign to the sidebar toggle button.
-     */
-    toggleAttrs: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Do not add the built-in toggle button with `open` prop.
-     */
-    noToggle: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: [
-    "close",
-    "closed",
-    "opened",
-    // 'figure-click', not emitted on purpose to make "hasFigureClickListener" work
-    "update:active",
-    "update:name",
-    "update:nameEditable",
-    "update:open",
-    "update:starred",
-    "submit-name",
-    "dismiss-editing"
-  ],
-  setup() {
-    return {
-      uid: GenRandomId(),
-      isMobile: useIsSmallMobile()
-    };
-  },
-  data() {
-    return {
-      changeNameTranslated: t("Change name"),
-      closeTranslated: t("Close sidebar"),
-      favoriteTranslated: 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();
-    },
-    open() {
-      this.toggleFocusTrap();
-      this.checkToggleButtonContainerAvailability();
-    }
-  },
-  created() {
-    this.preserveElementToReturnFocus();
-    this.checkToggleButtonContainerAvailability();
-  },
-  mounted() {
-    if (this.elementToReturnFocus) {
-      this.focus();
-    }
-    this.toggleFocusTrap();
-  },
-  beforeUnmount() {
-    this.$emit("closed");
-    this.focusTrap?.deactivate();
-  },
-  methods: {
-    isSlotPopulated,
-    t,
-    preserveElementToReturnFocus() {
-      if (document.activeElement && document.activeElement !== document.body) {
-        this.elementToReturnFocus = document.activeElement;
-        if (this.elementToReturnFocus.getAttribute("role") === "menuitem") {
-          const menu = this.elementToReturnFocus.closest('[role="menu"]');
-          if (menu) {
-            const menuTrigger = document.querySelector(`[aria-controls="${menu.id}"]`);
-            this.elementToReturnFocus = menuTrigger;
-          }
-        }
-      }
-    },
-    initFocusTrap() {
-      if (this.focusTrap) {
-        return;
-      }
-      this.focusTrap = createFocusTrap([
-        // The sidebar itself
-        this.$refs.sidebar,
-        // Nextcloud Server header navigarion
-        document.querySelector("#header")
-      ], {
-        allowOutsideClick: true,
-        fallbackFocus: this.$refs.closeButton,
-        trapStack: getTrapStack(),
-        escapeDeactivates: false
-      });
-    },
-    /**
-     * Activate focus trap if it is currently needed, otherwise deactivate
-     */
-    toggleFocusTrap() {
-      if (this.open && this.isMobile) {
-        this.initFocusTrap();
-        this.focusTrap.activate();
-      } else {
-        this.focusTrap?.deactivate();
-      }
-    },
-    /**
-     * Close the sidebar on pressing the escape key on mobile
-     *
-     * @param {KeyboardEvent} event key down event
-     */
-    onKeydownEsc(event) {
-      if (this.isMobile) {
-        event.stopPropagation();
-        this.closeSidebar();
-      }
-    },
-    onAfterEnter(element) {
-      this.$emit("opened", element);
-    },
-    onAfterLeave(element) {
-      this.$emit("closed", element);
-      this.elementToReturnFocus?.focus({ focusVisible: true });
-      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);
-      this.$emit("update:open", false);
-    },
-    /**
-     * 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", true);
-      if (this.nameEditable) {
-        await this.$nextTick();
-        this.$refs.nameInput.focus();
-      }
-    },
-    /**
-     * Focus the sidebar
-     * @public
-     */
-    focus() {
-      (this.$refs.header ?? this.$refs.toggle)?.focus();
-    },
-    /**
-     * Focus the active tab
-     * @public
-     */
-    focusActiveTabContent() {
-      this.preserveElementToReturnFocus();
-      this.$refs.tabs.focusActiveTabContent();
-    },
-    /**
-     * Check if the toggle button container is available
-     */
-    checkToggleButtonContainerAvailability() {
-      if (this.open === false && !this.noToggle && !this.ncContentSelector) {
-        console.warn(
-          "[NcAppSidebar] It looks like you want to use NcAppSidebar with the built-in toggle button. This feature is only available when NcAppSidebar is used in NcContent."
-        );
-      }
-    },
-    /**
-     * Emit name change event to parent component
-     *
-     * @param {Event} event input event
-     */
-    onNameInput(event) {
-      this.$emit("update:name", event.target.value);
-    },
-    /**
-     * Emit when the name form edit confirm button is pressed in order
-     * to change the name.
-     *
-     * @param {Event} event submit event
-     */
-    onSubmitName(event) {
-      this.$emit("update:nameEditable", false);
-      this.$emit("submit-name", event);
-    },
-    onDismissEditing() {
-      this.$emit("update:nameEditable", false);
-      this.$emit("dismiss-editing");
-    },
-    onUpdateActive(activeTab) {
-      this.$emit("update:active", activeTab);
-    }
-  }
-};
-const _hoisted_1 = ["aria-labelledby"];
-const _hoisted_2 = { class: "app-sidebar-header__info" };
-const _hoisted_3 = {
-  key: 0,
-  class: "app-sidebar-header__tertiary-actions"
-};
-const _hoisted_4 = { class: "app-sidebar-header__name-container" };
-const _hoisted_5 = { class: "app-sidebar-header__mainname-container" };
-const _hoisted_6 = ["id", "aria-label", "title", "tabindex"];
-const _hoisted_7 = ["placeholder", "value"];
-const _hoisted_8 = ["title"];
-const _hoisted_9 = {
-  key: 0,
-  class: "app-sidebar-header__description"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_IconDockRight = resolveComponent("IconDockRight");
-  const _component_NcButton = resolveComponent("NcButton");
-  const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
-  const _component_IconStar = resolveComponent("IconStar");
-  const _component_IconStarOutline = resolveComponent("IconStarOutline");
-  const _component_IconArrowRight = resolveComponent("IconArrowRight");
-  const _component_NcActions = resolveComponent("NcActions");
-  const _component_IconClose = resolveComponent("IconClose");
-  const _component_NcAppSidebarTabs = resolveComponent("NcAppSidebarTabs");
-  const _component_NcEmptyContent = resolveComponent("NcEmptyContent");
-  const _directive_linkify = resolveDirective("linkify");
-  const _directive_focus = resolveDirective("focus");
-  const _directive_click_outside = resolveDirective("click-outside");
-  return openBlock(), createBlock(Transition, {
-    appear: "",
-    name: "slide-right",
-    onAfterEnter: $options.onAfterEnter,
-    onAfterLeave: $options.onAfterLeave
-  }, {
-    default: withCtx(() => [
-      withDirectives(createElementVNode("aside", {
-        id: "app-sidebar-vue",
-        ref: "sidebar",
-        class: "app-sidebar",
-        "aria-labelledby": `app-sidebar-vue-${$setup.uid}__header`,
-        onKeydown: _cache[7] || (_cache[7] = withKeys((...args) => $options.onKeydownEsc && $options.onKeydownEsc(...args), ["esc"]))
-      }, [
-        $options.ncContentSelector && !$props.open && !$props.noToggle ? (openBlock(), createBlock(Teleport, {
-          key: 0,
-          to: $options.ncContentSelector
-        }, [
-          createVNode(_component_NcButton, mergeProps({
-            "aria-label": $options.t("Open sidebar"),
-            class: ["app-sidebar__toggle", $props.toggleClasses],
-            type: "tertiary"
-          }, $props.toggleAttrs, {
-            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:open", true))
-          }), {
-            icon: withCtx(() => [
-              renderSlot(_ctx.$slots, "toggle-icon", {}, () => [
-                createVNode(_component_IconDockRight, { size: 20 })
-              ], true)
-            ]),
-            _: 3
-          }, 16, ["aria-label", "class"])
-        ], 8, ["to"])) : createCommentVNode("", true),
-        createElementVNode("header", {
-          class: normalizeClass([{
-            "app-sidebar-header--with-figure": $options.isSlotPopulated(_ctx.$slots.header?.()) || $props.background,
-            "app-sidebar-header--compact": $props.compact
-          }, "app-sidebar-header"])
-        }, [
-          createElementVNode("div", _hoisted_2, [
-            ($options.isSlotPopulated(_ctx.$slots.header?.()) || $props.background) && !$props.empty ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: normalizeClass([{
-                "app-sidebar-header__figure--with-action": $options.hasFigureClickListener
-              }, "app-sidebar-header__figure"]),
-              style: normalizeStyle({
-                backgroundImage: `url(${$props.background})`
-              }),
-              tabindex: "0",
-              onClick: _cache[1] || (_cache[1] = (...args) => $options.onFigureClick && $options.onFigureClick(...args)),
-              onKeydown: _cache[2] || (_cache[2] = withKeys((...args) => $options.onFigureClick && $options.onFigureClick(...args), ["enter"]))
-            }, [
-              renderSlot(_ctx.$slots, "header", { class: "app-sidebar-header__background" }, void 0, true)
-            ], 38)) : createCommentVNode("", true),
-            !$props.empty ? (openBlock(), createElementBlock("div", {
-              key: 1,
-              class: normalizeClass([{
-                "app-sidebar-header__desc--with-tertiary-action": $options.canStar || $options.isSlotPopulated(_ctx.$slots["tertiary-actions"]?.()),
-                "app-sidebar-header__desc--editable": $props.nameEditable && !$props.subname,
-                "app-sidebar-header__desc--with-subname--editable": $props.nameEditable && $props.subname,
-                "app-sidebar-header__desc--without-actions": !$options.isSlotPopulated(_ctx.$slots["secondary-actions"]?.())
-              }, "app-sidebar-header__desc"])
-            }, [
-              $options.canStar || $options.isSlotPopulated(_ctx.$slots["tertiary-actions"]?.()) ? (openBlock(), createElementBlock("div", _hoisted_3, [
-                renderSlot(_ctx.$slots, "tertiary-actions", {}, () => [
-                  $options.canStar ? (openBlock(), createBlock(_component_NcButton, {
-                    key: 0,
-                    "aria-label": $data.favoriteTranslated,
-                    pressed: $data.isStarred,
-                    class: "app-sidebar-header__star",
-                    type: "secondary",
-                    onClick: withModifiers($options.toggleStarred, ["prevent"])
-                  }, {
-                    icon: withCtx(() => [
-                      $props.starLoading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : $data.isStarred ? (openBlock(), createBlock(_component_IconStar, {
-                        key: 1,
-                        size: 20
-                      })) : (openBlock(), createBlock(_component_IconStarOutline, {
-                        key: 2,
-                        size: 20
-                      }))
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label", "pressed", "onClick"])) : createCommentVNode("", true)
-                ], true)
-              ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_4, [
-                createElementVNode("div", _hoisted_5, [
-                  withDirectives((openBlock(), createElementBlock("h2", {
-                    id: `app-sidebar-vue-${$setup.uid}__header`,
-                    ref: "header",
-                    "aria-label": $props.title,
-                    title: $props.title,
-                    class: "app-sidebar-header__mainname",
-                    tabindex: $props.nameEditable ? 0 : -1,
-                    onClick: _cache[3] || (_cache[3] = withModifiers((...args) => $options.editName && $options.editName(...args), ["self"]))
-                  }, [
-                    createTextVNode(toDisplayString($props.name), 1)
-                  ], 8, _hoisted_6)), [
-                    [vShow, !$props.nameEditable],
-                    [_directive_linkify, { text: $props.name, linkify: $props.linkifyName }]
-                  ]),
-                  $props.nameEditable ? withDirectives((openBlock(), createElementBlock("form", {
-                    key: 0,
-                    class: "app-sidebar-header__mainname-form",
-                    onSubmit: _cache[6] || (_cache[6] = withModifiers((...args) => $options.onSubmitName && $options.onSubmitName(...args), ["prevent"]))
-                  }, [
-                    withDirectives(createElementVNode("input", {
-                      ref: "nameInput",
-                      class: "app-sidebar-header__mainname-input",
-                      type: "text",
-                      placeholder: $props.namePlaceholder,
-                      value: $props.name,
-                      onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers((...args) => $options.onDismissEditing && $options.onDismissEditing(...args), ["stop"]), ["esc"])),
-                      onInput: _cache[5] || (_cache[5] = (...args) => $options.onNameInput && $options.onNameInput(...args))
-                    }, null, 40, _hoisted_7), [
-                      [_directive_focus]
-                    ]),
-                    createVNode(_component_NcButton, {
-                      type: "tertiary-no-background",
-                      "aria-label": $data.changeNameTranslated,
-                      "native-type": "submit"
-                    }, {
-                      icon: withCtx(() => [
-                        createVNode(_component_IconArrowRight, { size: 20 })
-                      ]),
-                      _: 1
-                    }, 8, ["aria-label"])
-                  ], 32)), [
-                    [_directive_click_outside, () => $options.onSubmitName()]
-                  ]) : createCommentVNode("", true),
-                  $options.isSlotPopulated(_ctx.$slots["secondary-actions"]?.()) ? (openBlock(), createBlock(_component_NcActions, {
-                    key: 1,
-                    class: "app-sidebar-header__menu",
-                    "force-menu": $props.forceMenu
-                  }, {
-                    default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "secondary-actions", {}, void 0, true)
-                    ]),
-                    _: 3
-                  }, 8, ["force-menu"])) : createCommentVNode("", true)
-                ]),
-                $props.subname.trim() !== "" || _ctx.$slots["subname"] ? (openBlock(), createElementBlock("p", {
-                  key: 0,
-                  title: $props.subtitle || void 0,
-                  class: "app-sidebar-header__subname"
-                }, [
-                  renderSlot(_ctx.$slots, "subname", {}, () => [
-                    createTextVNode(toDisplayString($props.subname), 1)
-                  ], true)
-                ], 8, _hoisted_8)) : createCommentVNode("", true)
-              ])
-            ], 2)) : createCommentVNode("", true)
-          ]),
-          createVNode(_component_NcButton, {
-            ref: "closeButton",
-            title: $data.closeTranslated,
-            "aria-label": $data.closeTranslated,
-            type: "tertiary",
-            class: "app-sidebar__close",
-            onClick: withModifiers($options.closeSidebar, ["prevent"])
-          }, {
-            icon: withCtx(() => [
-              createVNode(_component_IconClose, { size: 20 })
-            ]),
-            _: 1
-          }, 8, ["title", "aria-label", "onClick"]),
-          $options.isSlotPopulated(_ctx.$slots.description?.()) && !$props.empty ? (openBlock(), createElementBlock("div", _hoisted_9, [
-            renderSlot(_ctx.$slots, "description", {}, void 0, true)
-          ])) : createCommentVNode("", true)
-        ], 2),
-        withDirectives(createVNode(_component_NcAppSidebarTabs, {
-          ref: "tabs",
-          active: $props.active,
-          "force-tabs": $props.forceTabs,
-          "onUpdate:active": $options.onUpdateActive
-        }, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ]),
-          _: 3
-        }, 8, ["active", "force-tabs", "onUpdate:active"]), [
-          [vShow, !$props.loading]
-        ]),
-        $props.loading ? (openBlock(), createBlock(_component_NcEmptyContent, { key: 1 }, {
-          icon: withCtx(() => [
-            createVNode(_component_NcLoadingIcon, { size: 64 })
-          ]),
-          _: 1
-        })) : createCommentVNode("", true)
-      ], 40, _hoisted_1), [
-        [vShow, $props.open]
-      ])
-    ]),
-    _: 3
-  }, 8, ["onAfterEnter", "onAfterLeave"]);
-}
-const NcAppSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b9e95abe"]]);
-export {
-  NcAppSidebar as N
-};