@nextcloud/vue
Version:
Nextcloud vue components
802 lines (801 loc) • 29.2 kB
JavaScript
import '../assets/NcAppSidebar-BntAj6H-.css';
import { Portal } from "@linusborg/vue-simple-portal";
import NcVNodes from "../Components/NcVNodes.mjs";
import { N as NcCheckboxRadioSwitch } from "./NcCheckboxRadioSwitch-CCuKA55c.mjs";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
import { N as NcActions } from "./NcActions-D3hGxwlc.mjs";
import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
import NcButton from "../Components/NcButton.mjs";
import NcEmptyContent from "../Components/NcEmptyContent.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, O as t13, a as t } from "./_l10n-DDKxBWQL.mjs";
import { A as ArrowRight } from "./ArrowRight-CY2b9hgN.mjs";
import { C as Close } from "./Close-BtLPUSdO.mjs";
import { vOnClickOutside } from "@vueuse/components";
import { createFocusTrap } from "focus-trap";
const _sfc_main$4 = {
name: "NcAppSidebarTabs",
components: {
NcCheckboxRadioSwitch,
NcVNodes
},
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 active.sync
*/
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();
}
}
}
};
var _sfc_render$4 = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "app-sidebar-tabs" }, [_vm.hasMultipleTabs || _vm.showForSingleTab ? _c("div", { staticClass: "app-sidebar-tabs__nav", attrs: { "role": "tablist" }, on: { "keydown": [function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "left", 37, $event.key, ["Left", "ArrowLeft"])) return null;
if ("button" in $event && $event.button !== 0) return null;
if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
$event.preventDefault();
$event.stopPropagation();
return _vm.focusPreviousTab.apply(null, arguments);
}, function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "right", 39, $event.key, ["Right", "ArrowRight"])) return null;
if ("button" in $event && $event.button !== 2) return null;
if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
$event.preventDefault();
$event.stopPropagation();
return _vm.focusNextTab.apply(null, arguments);
}, function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) return null;
if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
$event.preventDefault();
$event.stopPropagation();
return _vm.focusActiveTabContent.apply(null, arguments);
}, function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "home", void 0, $event.key, void 0)) return null;
if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
$event.preventDefault();
$event.stopPropagation();
return _vm.focusFirstTab.apply(null, arguments);
}, function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "end", void 0, $event.key, void 0)) return null;
if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
$event.preventDefault();
$event.stopPropagation();
return _vm.focusLastTab.apply(null, arguments);
}, function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "page-up", void 0, $event.key, void 0)) return null;
if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
$event.preventDefault();
$event.stopPropagation();
return _vm.focusFirstTab.apply(null, arguments);
}, function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "page-down", void 0, $event.key, void 0)) return null;
if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey) return null;
$event.preventDefault();
$event.stopPropagation();
return _vm.focusLastTab.apply(null, arguments);
}] } }, _vm._l(_vm.tabs, function(tab) {
return _c("NcCheckboxRadioSwitch", { key: tab.id, staticClass: "app-sidebar-tabs__tab", class: { active: tab.id === _vm.activeTab }, attrs: { "aria-controls": `tab-${tab.id}`, "aria-selected": String(_vm.activeTab === tab.id), "button-variant": true, "checked": _vm.activeTab === tab.id, "wrapper-id": `tab-button-${tab.id}`, "tabindex": _vm.activeTab === tab.id ? 0 : -1, "button-variant-grouped": "horizontal", "role": "tab", "type": "button" }, on: { "update:checked": function($event) {
return _vm.setActive(tab.id);
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("NcVNodes", { attrs: { "vnodes": tab.renderIcon() } }, [_c("span", { staticClass: "app-sidebar-tabs__tab-icon", class: tab.icon })])];
}, proxy: true }], null, true) }, [_c("span", { staticClass: "app-sidebar-tabs__tab-caption" }, [_vm._v(" " + _vm._s(tab.name) + " ")])]);
}), 1) : _vm._e(), _c("div", { staticClass: "app-sidebar-tabs__content", class: { "app-sidebar-tabs__content--multiple": _vm.hasMultipleTabs } }, [_vm._t("default")], 2)]);
};
var _sfc_staticRenderFns$4 = [];
var __component__$4 = /* @__PURE__ */ normalizeComponent(
_sfc_main$4,
_sfc_render$4,
_sfc_staticRenderFns$4,
false,
null,
"d9f30f05"
);
const NcAppSidebarTabs = __component__$4.exports;
register(t13);
const _sfc_main$3 = {
name: "DockRightIcon",
emits: ["click"],
props: {
title: {
type: String
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
};
var _sfc_render$3 = function render2() {
var _vm = this, _c = _vm._self._c;
return _c("span", _vm._b({ staticClass: "material-design-icon dock-right-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
return _vm.$emit("click", $event);
} } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "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" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
};
var _sfc_staticRenderFns$3 = [];
var __component__$3 = /* @__PURE__ */ normalizeComponent(
_sfc_main$3,
_sfc_render$3,
_sfc_staticRenderFns$3,
false,
null,
null
);
const IconDockRight = __component__$3.exports;
const _sfc_main$2 = {
name: "StarIcon",
emits: ["click"],
props: {
title: {
type: String
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
};
var _sfc_render$2 = function render3() {
var _vm = this, _c = _vm._self._c;
return _c("span", _vm._b({ staticClass: "material-design-icon star-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
return _vm.$emit("click", $event);
} } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("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" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
};
var _sfc_staticRenderFns$2 = [];
var __component__$2 = /* @__PURE__ */ normalizeComponent(
_sfc_main$2,
_sfc_render$2,
_sfc_staticRenderFns$2,
false,
null,
null
);
const Star = __component__$2.exports;
const _sfc_main$1 = {
name: "StarOutlineIcon",
emits: ["click"],
props: {
title: {
type: String
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
};
var _sfc_render$1 = function render4() {
var _vm = this, _c = _vm._self._c;
return _c("span", _vm._b({ staticClass: "material-design-icon star-outline-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
return _vm.$emit("click", $event);
} } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("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" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
};
var _sfc_staticRenderFns$1 = [];
var __component__$1 = /* @__PURE__ */ normalizeComponent(
_sfc_main$1,
_sfc_render$1,
_sfc_staticRenderFns$1,
false,
null,
null
);
const StarOutline = __component__$1.exports;
const _sfc_main = {
name: "NcAppSidebar",
components: {
Teleport: Portal,
NcActions,
NcAppSidebarTabs,
ArrowRight,
IconDockRight,
NcButton,
NcLoadingIcon,
NcEmptyContent,
Close,
Star,
StarOutline
},
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",
"closing",
"closed",
"opening",
"opened",
"figure-click",
"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;
},
hasFigure() {
return this.$slots.header || this.background;
},
hasFigureClickListener() {
return this.$listeners["figure-click"];
}
},
watch: {
starred() {
this.isStarred = this.starred;
},
isMobile() {
this.toggleFocusTrap();
},
open() {
this.checkToggleButtonContainerAvailability();
}
},
created() {
this.preserveElementToReturnFocus();
this.checkToggleButtonContainerAvailability();
},
beforeDestroy() {
this.$emit("closed");
this.focusTrap?.deactivate();
},
methods: {
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();
}
},
onBeforeEnter(element) {
this.$emit("opening", element);
},
onAfterEnter(element) {
if (this.elementToReturnFocus) {
this.focus();
}
this.toggleFocusTrap();
this.$emit("opened", element);
},
onBeforeLeave(element) {
this.$emit("closing", element);
},
onAfterLeave(element) {
this.$emit("closed", element);
this.toggleFocusTrap();
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);
},
editName() {
this.$emit("update:nameEditable", true);
if (this.nameEditable) {
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();
},
/**
* 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);
}
}
};
var _sfc_render = function render5() {
var _vm = this, _c = _vm._self._c;
return _c("transition", { attrs: { "appear": "", "name": "slide-right" }, on: { "before-enter": _vm.onBeforeEnter, "after-enter": _vm.onAfterEnter, "before-leave": _vm.onBeforeLeave, "after-leave": _vm.onAfterLeave } }, [_c("aside", { directives: [{ name: "show", rawName: "v-show", value: _vm.open, expression: "open" }], ref: "sidebar", staticClass: "app-sidebar", attrs: { "id": "app-sidebar-vue", "aria-labelledby": `app-sidebar-vue-${_vm.uid}__header` }, on: { "keydown": function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
return _vm.onKeydownEsc.apply(null, arguments);
} } }, [_vm.ncContentSelector && !_vm.open && !_vm.noToggle ? _c("Teleport", { attrs: { "selector": _vm.ncContentSelector } }, [_c("NcButton", _vm._b({ staticClass: "app-sidebar__toggle", class: _vm.toggleClasses, attrs: { "aria-label": _vm.t("Open sidebar"), "type": "tertiary" }, on: { "click": function($event) {
return _vm.$emit("update:open", true);
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_vm._t("toggle-icon", function() {
return [_c("IconDockRight", { attrs: { "size": 20 } })];
})];
}, proxy: true }], null, true) }, "NcButton", _vm.toggleAttrs, false))], 1) : _vm._e(), _c("header", { staticClass: "app-sidebar-header", class: {
"app-sidebar-header--with-figure": _vm.hasFigure,
"app-sidebar-header--compact": _vm.compact
} }, [_c("div", { staticClass: "app-sidebar-header__info" }, [_vm.hasFigure && !_vm.empty ? _c("div", { staticClass: "app-sidebar-header__figure", class: {
"app-sidebar-header__figure--with-action": _vm.hasFigureClickListener
}, style: {
backgroundImage: `url(${_vm.background})`
}, attrs: { "tabindex": "0" }, on: { "click": _vm.onFigureClick, "keydown": function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
return _vm.onFigureClick.apply(null, arguments);
} } }, [_vm._t("header")], 2) : _vm._e(), !_vm.empty ? _c("div", { staticClass: "app-sidebar-header__desc", class: {
"app-sidebar-header__desc--with-tertiary-action": _vm.canStar || _vm.$slots["tertiary-actions"],
"app-sidebar-header__desc--editable": _vm.nameEditable && !_vm.subname,
"app-sidebar-header__desc--with-subname--editable": _vm.nameEditable && _vm.subname,
"app-sidebar-header__desc--without-actions": !_vm.$slots["secondary-actions"]
} }, [_vm.canStar || _vm.$slots["tertiary-actions"] ? _c("div", { staticClass: "app-sidebar-header__tertiary-actions" }, [_vm._t("tertiary-actions", function() {
return [_vm.canStar ? _c("NcButton", { staticClass: "app-sidebar-header__star", attrs: { "aria-label": _vm.favoriteTranslated, "pressed": _vm.isStarred, "type": "secondary" }, on: { "click": function($event) {
$event.preventDefault();
return _vm.toggleStarred.apply(null, arguments);
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_vm.starLoading ? _c("NcLoadingIcon") : _vm.isStarred ? _c("Star", { attrs: { "size": 20 } }) : _c("StarOutline", { attrs: { "size": 20 } })];
}, proxy: true }], null, false, 2575459756) }) : _vm._e()];
})], 2) : _vm._e(), _c("div", { staticClass: "app-sidebar-header__name-container" }, [_c("div", { staticClass: "app-sidebar-header__mainname-container" }, [_c("h2", { directives: [{ name: "show", rawName: "v-show", value: !_vm.nameEditable, expression: "!nameEditable" }, { name: "linkify", rawName: "v-linkify", value: { text: _vm.name, linkify: _vm.linkifyName }, expression: "{text: name, linkify: linkifyName}" }], ref: "header", staticClass: "app-sidebar-header__mainname", attrs: { "id": `app-sidebar-vue-${_vm.uid}__header`, "aria-label": _vm.title, "title": _vm.title, "tabindex": _vm.nameEditable ? 0 : -1 }, on: { "click": function($event) {
if ($event.target !== $event.currentTarget) return null;
return _vm.editName.apply(null, arguments);
} } }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _vm.nameEditable ? [_c("form", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: () => _vm.onSubmitName(), expression: "() => onSubmitName()" }], staticClass: "app-sidebar-header__mainname-form", on: { "submit": function($event) {
$event.preventDefault();
return _vm.onSubmitName.apply(null, arguments);
} } }, [_c("input", { directives: [{ name: "focus", rawName: "v-focus" }], ref: "nameInput", staticClass: "app-sidebar-header__mainname-input", attrs: { "type": "text", "placeholder": _vm.namePlaceholder }, domProps: { "value": _vm.name }, on: { "keydown": function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
$event.stopPropagation();
return _vm.onDismissEditing.apply(null, arguments);
}, "input": _vm.onNameInput } }), _c("NcButton", { attrs: { "type": "tertiary-no-background", "aria-label": _vm.changeNameTranslated, "native-type": "submit" }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("ArrowRight", { attrs: { "size": 20 } })];
}, proxy: true }], null, false, 1252225425) })], 1)] : _vm._e(), _vm.$slots["secondary-actions"] ? _c("NcActions", { staticClass: "app-sidebar-header__menu", attrs: { "force-menu": _vm.forceMenu } }, [_vm._t("secondary-actions")], 2) : _vm._e()], 2), _vm.subname.trim() !== "" || _vm.$slots["subname"] ? _c("p", { staticClass: "app-sidebar-header__subname", attrs: { "title": _vm.subtitle || void 0 } }, [_vm._t("subname", function() {
return [_vm._v(" " + _vm._s(_vm.subname) + " ")];
})], 2) : _vm._e()])]) : _vm._e()]), _c("NcButton", { ref: "closeButton", staticClass: "app-sidebar__close", attrs: { "title": _vm.closeTranslated, "aria-label": _vm.closeTranslated, "type": "tertiary" }, on: { "click": function($event) {
$event.preventDefault();
return _vm.closeSidebar.apply(null, arguments);
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("Close", { attrs: { "size": 20 } })];
}, proxy: true }]) }), _vm.$slots["description"] && !_vm.empty ? _c("div", { staticClass: "app-sidebar-header__description" }, [_vm._t("description")], 2) : _vm._e()], 1), _c("NcAppSidebarTabs", { directives: [{ name: "show", rawName: "v-show", value: !_vm.loading, expression: "!loading" }], ref: "tabs", attrs: { "active": _vm.active, "force-tabs": _vm.forceTabs }, on: { "update:active": _vm.onUpdateActive } }, [_vm._t("default")], 2), _vm.loading ? _c("NcEmptyContent", { scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("NcLoadingIcon", { attrs: { "size": 64 } })];
}, proxy: true }], null, false, 826850984) }) : _vm._e()], 1)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"a6baa268"
);
const NcAppSidebar = __component__.exports;
export {
NcAppSidebar as N
};